/*
===================
무단전재 및 재배포 금지
Made by MarvelWorks
site : http://marvelworks.kr
* One  domain, One server, One license
* License Inquiry : info@marvelworks.kr
===================

===================
m navigation
===================
*/
.navheader {position:fixed; top:0; text-align:center; padding:10px 0; color:#fff; z-index:999; text-align:center; width:100%;transition:all 0.2s; box-shadow:0px 7px 15px 0px rgba(0, 0, 0, 0.035);}
.navheader.subhead {box-shadow:none; border-bottom:1px solid #e8e8e8;}
.navheader.min {background:#fff; transition:all 0.2s;}
.navheader.customhead {background:#fff;}

nav {
  padding: 0;
  margin:0 auto;
}
.navheader .logo { 	float:left; 	width:80%;	text-align:left;	font-size:23px;}
.navheader .logo img {  width: 180px;  transition:all 0.5s;}

.navheader .logo .white {display:block;}
.navheader .logo .normal {display:none;}
.navheader.min .logo .white {display:none;}
.navheader.min .logo .normal {display:block;}
.navheader.min .logo img { transition:all 0.5s;}
.navheader.customhead .logo .white {display:none;}
.navheader.customhead .logo .normal {display:block;}

#nav:checked + .nav-open {
  transform: rotate(45deg);
}
#nav:checked + .nav-open i {
  background: #000;
  transition: transform 0.2s ease;
}
#nav:checked + .nav-open i:nth-child(1) {
  transform: translateY(6px) rotate(180deg);
}
#nav:checked + .nav-open i:nth-child(2) {
  opacity: 0;
}
#nav:checked + .nav-open i:nth-child(3) {
  transform: translateY(-6px) rotate(90deg);
}
#nav:checked ~ .nav-container {
  z-index: 9990;
  opacity: 1;
  display:block;
  overflow-y: scroll;
  padding: 65px 0 0 0;
}
#nav:checked ~ .nav-container ul li a {
  opacity: 1;
  transform: translateY(0);
}
#nav:checked ~ .nav-container ul li a i {
  font-size:1.1rem;
  margin-right:5px;
 }
.hidden {
  display: none;
}

  .nav-container {
    position: fixed;
    top: 0;
    left: 0%;
    height: 100%;
    width: 100% !important;
    z-index: -1;
    background: #f7f7f7;
    opacity: 0;
    transition: all 0.2s ease;
	display:none;
	overflow:scroll;
  }

  .nav-container ul {
	width: 100%;
	float:left;
	border-top:1px solid #ddd;
  }
  .nav-container ul li {
    display: block;
    float: left;
    width: 100%;
    text-align: left;
	padding: 0;
	border-bottom:1px solid #ddd;
	background:#fff;
  }
  .nav-container ul li li {
	background:transparent;
  }
  .nav-container ul li a {
    opacity: 0;
    color: #333;
    font-size: 1.1rem;
    font-weight: 500;
    transition: all 0.2s ease;
	display:inline-block;
	min-width:85%;
	vertical-align:middle;
	padding:15px 20px;
  }
  .nav-open {
    position: fixed;
    right: 10px;
    top: 0;
    display: block;
    width: 48px;
    height: 48px;
    cursor: pointer;
    z-index: 9999;
    border-radius: 50%;
	transition:all .5s;
  }
  .nav-open i {
    display: block;
    width: 20px;
    height: 2px;
    background: #111;
    border-radius: 2px;
    margin-left: 14px;
  }
  .navheader.customhead .nav-open i, .navheader.min .nav-open i {	background:#111;  }

  .nav-open i:nth-child(1) {
    margin-top: 16px;
  }
  .nav-open i:nth-child(2) {
    margin-top: 4px;
    opacity: 1;
	width:20px;
	margin-left:14px;
  }
  .nav-open i:nth-child(3) {
    margin-top: 4px;
  }

.submenu {
  float:left;
  display:none;
  position:relative;
  z-index:9999;
  padding:20px;
  border-radius: 5px;
  left:50%;
  margin:0 !important;
  transform:translateX(-50%);
  min-width:150px;
  background:#f7f7f7;
}
.submenu li {
  float:none;
  display:block;
  text-align:center;
  margin-left:0 !important;
  border:0 !important;
}
.submenu li a {
  font-size:16px;
  color:#333;
  padding:5px 0 !important;
}

.nav-container ul.minimenu {border-top:0;}
.nav-container ul.minimenu li:before {content:''; width:4px; height:4px; background:#ccc; border-radius:100%; display:inline-block; margin-right:10px; vertical-align:middle;}
.nav-container ul.minimenu li a {font-size:0.9rem;}


.mlogo {position:absolute; left:20px; top:18px; width:95px; line-height:initial !important; z-index:9992;}
.menudown {background:none; border:0; display:inline-block; color:#c5c5c5; width:40px; font-size:30px; z-index:99; vertical-align:middle;}
.mlogin {	float:left;width: 100%;	z-index: 9992;	color: #333;	text-align: left;
padding: 0; background:#f7f7f7;}
.mlogin h2 span {margin:0 10px;}
.mlogin h2 {font-size: 1.2rem;	font-weight: 500;	border: 1px solid #ddd;border-left: 0;
border-right: 0; margin-bottom:10px; background:#fff; padding:0 20px; height:60px; line-height:60px;}
.mlogin ul {margin: 0 0 10px 0;float: left;	border-top:0; width: 100%;}
.mlogin li {border: 1px solid #ddd;float: left;width: 33.33% !important;	display: initial; background:#fff; padding:15px !important; text-align:center !important; border-left:0; }
.mlogin li:last-child {border-right:0;}
.mlogin li a {width:initial !important; padding:0 !important; min-width:initial !important; font-size:1rem;}
.mlogin li i {font-size:2.2rem !important; color:var(--color-green) !important; margin-right:0 !important;}


/*
===================
pc navigation
===================
*/
.menuBox {position:fixed; width:100%; margin:0 auto; top:0px; left:0; height:var(--menu-height); z-index:999;  }
	.menuBox ul {list-style:none; margin:0px; padding:0px; } 
	.menuBox .menu {position:relative; float:left;height:var(--menu-height); line-height:var(--menu-height); transition:all .2s; } 
	.menuBox .menu:before {content:''; position:absolute; bottom:0; left:50%; right:0; width:100%; height:0px; background:var(--menu-color-box);;  transform:translate(-50%,0);  transition:all .3s; z-index:-1;}
	.menuBox .menu.now:before {height:100%; transition:all .3s;}

	.menuBox .menu > LI { float:left; color:#000; width:var(--menu-width); text-align:center;font-size:1.25rem; font-weight:normal;cursor:pointer; }
	.menuBox .menu > LI a {color:#fff; font-weight:600;}
	.menuBox .submenuBox { display:none; float:left; top:0; margin-top:0; height:280px; width:100%; overflow:hidden; border-left:0; border-right:0; box-shadow:0px 5px 10px rgb(101 102 104 / 10%); position:relative; background:#f7f7f7; } 
	.menuBox .submenulist:first-child {}
	.menuBox .submenulist { float:left; width:var(--menu-width);height:480px; padding:35px; } 
	.menuBox .submenulist:hover, .menuBox .submenulist.now {background:var(--menu-color-box);}
	.menuBox .submenulist > LI { width:100%; padding:7px 5px; font-size:1.1rem; text-align:center; } 
	.menuBox .submenulist > LI:hover {}
	.menuBox .submenulist > LI a {color:#111; font-weight:500;} 
	.menuBox .submenulist > LI:hover a {color:#fff; } 
	.menuBox .submenulist.now > LI a {color:#fff;}
	.menuBox .centerbox {display:table; margin:0 auto;}

	.menuBox .minimenu {margin-top:10px; padding-left:20px; }
	.menuBox .minimenu li {list-style:disc; list-style-position:outside; font-size:0.9rem; color:gray; margin-bottom:5px; }
	.menuBox .minimenu li::marker {color:#bdbdbd;}
	.menuBox .minimenu li a {color:#535353; margin-left:-5px;}
	.menuBox .submenulist.now .minimenu li a {color:#e7e7e7;}
	.menuBox .submenulist.now .minimenu li::marker {color:#e7e7e7;}

	.submenuBox .back1 {
		display:none;
		position: absolute;
		left: 8%;
		top: 10%;
		opacity:0.7;
	}
	.submenuBox .back2 {
		display:none;
		position: absolute;
		right: 8%;
		top: 10%;
		transform:scaleX(-1);
		opacity:0.7;
	}

	.menuBox.min {background:#fff; }
	.menuBox.min {height:var(--menu-min-height); }
	.menuBox.min .menu{height:var(--menu-min-height); line-height:var(--menu-min-height);}
	.menuBox.min .menu > LI {}
	.menuBox.min .menu > LI a {color:#111; }
	.menuBox.min .menu.now > LI a {color:#fff;}
	.menuBox.min .menu.now > LI a {}
	.menuBox.min .menu:before {background:var(--menu-color-box); }

.toplogo {position:fixed; top:20px; left:50px; z-index:10000; transition:all .2s;}
	.toplogo img {max-width:270px; image-rendering: -webkit-optimize-contrast; transform: translateZ(0);backface-visibility: hidden; transition:all .2s;}
	.toplogo.min, .toplogo.new { transition:all .2s;}
	.toplogo.min img {  transition:all .2s;}

.topquick {position:fixed;  top:0; right:100px; padding:0; border-radius:7px 0 0 7px; height:initial; line-height:initial; text-align:center;  z-index:10000; transition:all .2s; }
	.topquick li {float:left; color:#fff; font-size:0.9rem; position:relative;  padding:0 5px;cursor:pointer; height:var(--menu-height); line-height:var(--menu-height);  transition:all .2s;}
	.topquick li a.log {display:inline-block; transition:all .2s; }
	.topquick li i {font-size:1.5rem; margin-right:5px;vertical-align:middle;}
	.topquick li img {filter: invert(1); width:50px;}
	.topquick li span {}
	.topquick .sub2 {height:0; overflow:hidden; position:absolute; left:0px; top:36px; width:100%; background:#fff;  transition:all .2s; border-radius:5px; box-shadow:0px 5px 17px 2px rgb(0 0 0 / 8%); }
	.topquick .sub2 li {float:left; width:100%; line-height:30px; height:30px; margin:0; padding:0; border-radius:0; background:transparent;}
	.topquick .sub2 a {margin:0; color:#333;}
	.topquick li.depth1:hover {}
	.topquick li:hover .sub2 {height:initial; padding:15px 0;}
	.topquick li:hover {}

	.topquick a {display:inline-block; font-weight:500; line-height:initial; color:#fff; transition:all .2s;}
	.topquick.min {  transition:all .2s;}
	.topquick.min a {color:#111;}
	.topquick.min li {height:var(--menu-min-height); line-height:var(--menu-min-height); color:#111; border-color:rgba(0,0,0,0.15);}

	.topquick a.log {line-height:initial; }
	.topquick a:last-child {margin-right:0;}
	.topquick a.last {display:inline-block; padding:6px 17px; border-radius:20px;background:var(--point-color); border-color:var(--point-color); color:#fff;}
	.topquick a:not(.last):hover {transition:all .3s;}
	.topquick a.last:hover {}

	.bg-overlay {display:none; position:fixed; top:85px; height:calc(100vh - 80px); left:0; width:100vw; background:rgba(0,0,0,0.55); z-index:2; content:''; z-index:10;}

.topall {position:fixed; top:0; right:50px; z-index:10000; transition:all .2s; font-size:2rem; height:var(--menu-height); line-height:var(--menu-height); color:#fff; cursor:pointer;}
	.topall.min {color:#111;}

.customhead {}
	.customhead .menuBox {box-shadow:0 5px 55px rgba(0, 0, 0, 0.05); background:#fff;}
	.customhead .menuBox .menu > LI a {color:#2e2e2e;}
	.customhead .menuBox .menu.now > LI a {color:#fff;}
	.customhead .topquick li {border-color:rgba(0,0,0,0.15); color:#111;}
	.customhead .topquick a {color:#111;}
	.customhead .topquick a.log {}
	.customhead .topquick.min a {}
	.customhead .topall {color:#111;}

	.customhead .menuBox.min {}
	.customhead .menuBox.min .menu > LI a {} 
	.customhead .menuBox .menu.now > LI a {}
	.customhead .menuBox.min .menu.now > LI a {}

	.customhead.subhead .menuBox {box-shadow:none; border-bottom:1px solid #eee;}

		@media (min-width:1500px) and (max-width:1820px) {
			.menuBox .menu > LI {width:220px;}
			.menuBox .submenulist {width:220px;}
			.submenuBox .back3 {left:18%; width:82%;}
			.submenuBox .slogan {left:4%;}
		}

		@media (min-width:1281px) and (max-width:1499px) {
			.menuBox .menu > LI {width:150px;}
			.menuBox .submenulist {width:150px; padding:40px 10px;}
			.menuBox .submenulist > LI {font-size:0.84rem;}
			.submenuBox .back3 {left:15%; width:85%;}
			.submenuBox .slogan {left:2%; font-size:1rem;}
		}

		@media (max-width:1280px) {


		
		}

		@media (min-width:769px) {
			.mainmenu li:hover .submenu {
			  display:block;
			}
		}

		@media (min-width:1400px) and (max-width:1600px) {
			:root {
				--menu-width: 150px;
			}
			.toplogo img {max-width:180px; margin-top:8px;}
		}

/*
===================
breadcrumb
===================
*/
#minibar {display:block; z-index:99; }
.breadcrumb { z-index:99; width:100%; position:fixed; top:var(--menu-height); background:#fff; border-left:0; border-right:0; border:1px solid #e8e8e8; border-top:0; border-left:0; border-right:0; transition:all .1s; box-shadow:0px 7px 15px 0px rgba(0, 0, 0, 0.035); }
	.breadcrumb .innerwrap {width:100%; max-width:var(--wrap-width); position:relative; }
	.breadcrumb ul {float:left;  z-index:99; }
	.breadcrumb ul:before {position:absolute; left:0; top:0; width:100vw; height:100%; background:#e1e4e9;  }
	.breadcrumb li {float:left; height:55px; line-height:55px;  border-right:0; font-weight:500;color:#484848;  padding:0 20px; position:relative; width:13rem; cursor:pointer;}
	.breadcrumb li.bli1:before {position:absolute; top:50%; left:0; width:1px; height:20px; transform:translate(0,-50%); background:#e8e8e8; content:'';}
	.breadcrumb li:after {position:absolute; top:50%; right:0; width:1px; height:20px; transform:translate(0,-50%); background:#e8e8e8; content:'';}
	.breadcrumb li span {margin-right:40px;}
	.breadcrumb li.bli2 i, .breadcrumb li.bli3 i {font-size:1.2rem; color:#000; position:absolute; right:20px; top:18px;}
	.breadcrumb li.bli1 {width:initial; font-size:1.5rem; color:#000;}
	.breadcrumb li.bli2 {cursor:default;}
	.breadcrumb li.bli2, .breadcrumb li.bli3 {background:#fff; /*background:#ecf1f9;*/}
	.breadcrumb .bsub {display:initial; position:absolute; left:-1px; top:55px; width:calc(100% + 2px); max-height:0; overflow:hidden;transition:all .5s;  border:1px solid transparent; }
	.breadcrumb .bsub:before {display:none;}
	.breadcrumb .bsub li {float:left; color:#fff; width:100%; padding:0; border:0 !important; height:35px; line-height:35px; font-size:0.94rem;}
	.breadcrumb .bsub li a {display:block;  padding:0 20px;  transition:all .3s; position:relative; color:#666; border:0;}
	.breadcrumb .bsub li.active a {color:var(--point-color);}
	.breadcrumb .bsub li:first-child {margin-top:20px;}
	.breadcrumb .bsub li:last-child {margin-bottom:20px;}
	.breadcrumb .bsub li:after {display:none;}
	.breadcrumb .bsub li a:after {display:none; position:absolute; content:'\f105'; right:20px;   color:gray; font-family:'Line Awesome Free'; font-weight:900;}
	.breadcrumb li:hover .bsub {background:#fff;max-height:330px; border-color:#e8e8e8; transition:all .3s; z-index:999;  }
	.breadcrumb li .bsub li:hover {color:gray; transition:all .2s;}

	.breadcrumb.min {top:var(--menu-min-height);}

	/*print*/
	.breadcrumb li.last { width:initial; position:absolute; right:0; top:0; border:1px solid #e8e8e8; border-top:0; border-bottom:0; color:#434343; cursor:pointer; height:55px; line-height:55px; padding-top:2px;}
	.breadcrumb li.last i {font-size:1.3rem; color:gray;}
	.breadcrumb li a {display:inline-block;}
	.breadcrumb li.last:after {display:none;}
	.breadcrumb li.last:hover {color:var(--point-color);}
	@media print {
		.headers, .toplogo, .logo, .navheader, .breadcrumb, .tailquick, .tailimg, #footer, #top, .submain {display:none;}
	}

.quickmenu {display:none; position:absolute; margin-top:-59px; width:100%; background:rgba(255,255,255,0.9); border-bottom:0px solid #ddd; border-left:0; border-right:0; z-index:8;}
	.quickmenu ul {display:table; margin:0 auto;}
	.quickmenu ul li {position:relative; float:left; width:160px; text-align:center; height:60px; line-height:60px; margin:0 0 -1px 0; font-size:18px; font-weight:400; border-radius:0px; transition:width .5s;}
	.quickmenu ul li a {position:relative; color:#333; transition:width .5s;}
	.quickmenu ul li:after {content:''; position:absolute; bottom:0; left:0; right:0; width:100%; height:3px; background:var(--point-color); display:none; animation:tabbar 0.5s;}
	.quickmenu ul li:hover:after {display:block;}
	.quickmenu ul li:hover a {color:gray;}
	.quickmenu ul li.active a {color:#424242; font-weight:500;}
	.quickmenu ul li.active a:before {content:''; width:7px; height:7px; background:var(--point-color); border-radius:100%; position:absolute; top:0; left:-10px;}
	.quickmenu ul li.active:after {display:block;}

	@keyframes tabbar {
		0% {width:0;}
		100% {width:100%;}
	}

#backbtn {position:absolute; top:0px; left:100px; color:#fff; z-index:999; padding:0 5px; height:47px; line-height:47px; font-size:14px; border-bottom:0px solid #424242;}
	#backbtn a {color:#cacaca}

#minibar.min {position:fixed; top:80px; background:#f7f7f7 !important; display:none;}
	#minibar.min .breadcrumb {background:#f7f7f7;}
	#minibar.min .breadcrumb li {color:gray;}
	#minibar.min #backbtn a {color:#424242;}

		@media (max-width:1280px) {
			#minibar {margin-top:67px; transition:none;}
			#minibar.min {top:50px; transition:none;}
			#backbtn {top:0; left:20px; margin-left:0; height:40px; line-height:40px;}

			.breadcrumb {padding-top:0; top:46px; }
			.breadcrumb.min {top:46px;}
			.breadcrumb .innerwrap {max-width:100%; padding:0 20px;}
			.breadcrumb ul {width:calc(100vw - 20px); bottom:25px; }
			.breadcrumb ul:before {width:calc(100vw - 20px);}
			.breadcrumb li {padding:0 24.5px; margin-left:0; font-size:1rem; height:50px; line-height:50px;  overflow:hidden;}
			.breadcrumb li.bli1 {padding:0 15px;}
			.breadcrumb li.bli2, .breadcrumb li.bli3 {width:initial;}
			.breadcrumb li.bli3 i {display:none; top:22px; right:20px;}
			.breadcrumb li span {margin-right:0;}
			.breadcrumb li i {font-size:1.2rem;}
			.breadcrumb li:after {margin-left:10px;}
			.quickmenu {width:100%; left:0; margin-left:0;}
			.quickmenu ul li {padding:0; width:85px; line-height:60px; font-size:.94rem;}
		}

/*
=================
int_* head
=================
*/
.submain {	width: 91vw;  margin: 0px 0 100px -11%;   height: 350px; position:relative;}
.bread{position: absolute;z-index: 2; background: #004ba8; color: #fff; width: 92%;
left: 8%; 	bottom: 0; padding:0 50px; }
	.bread li {float:left; height:70px; line-height:70px; margin-right:3rem; font-size:1.2rem}
	.bread a {color:rgba(255,255,255,0.4); font-weight:500; transition:all .2s;}
	.bread .active a{
		font-weight: 600;
		border-bottom: 5px solid #fff;
		padding-bottom:19px;
		color:#fff;
	}
	.bread a:hover {color:#fff;}

				@media (max-width:1680px) {
					.submain {width:100vw;}
				}

				@media (max-width:1280px) {
					.submain {margin:0 0 80px 0; height:250px; width:calc(100% + 20px);}
					.bread {left:0; width:100%;}
					.bread li {height:60px; line-height:60px; font-size:1.2rem;}
					.bread li:not(.active) {display:none;}
					.bread .active a {padding-bottom:13px;}
				}

/*
==================
int_3
==================
*/
.es_tit {float:left; width:100%; text-align:center; position:relative; margin-bottom:4rem;}
	.es_tit .bgtxt {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:9rem; color:#f5f5f5; z-index:-1; font-weight:900; width:100%;}
	.es_tit h2{font-size:2.6rem; color:#000;}
	.es_tit p {font-size:1.3rem; color:#666; margin-bottom:10px; letter-spacing:0.1em;}


@media (max-width:1280px) {
	.es_tit {margin-bottom:2.66rem;}
	.es_tit h2 {font-size:1.5rem;}
	.es_tit .bgtxt {font-size:3rem;}
}

.es_his {float:left; width:100%; position:relative;}
.es_his:before {position:absolute; content:''; top:0; left:50%; height:100%; width:1px; background:#ccc; z-index:-1; transform:translate(-50%,0);}
.es_his h2 {font-size:2.7rem; font-weight:900; color:var(--point-color); background:#fff; margin-top:10px; padding-bottom:20px; text-align:center;}
.es_his .right {display:table; width:50%; margin-left:54.9%; transform:translate(-10%,0);}
.es_his .left {display:table; width:50%; margin-left:0; transform:translate(-4.5%,0);}

.es_his .line { float:left; width:100%; margin:0 0 20px 15px; font-size:1.2rem;}
.es_his .line p {float:left; font-size:1.1rem;}
.es_his .line span {float:left; font-weight:bold; padding-left:20px; margin-right:0px;  position:relative; min-width:60px;}
.es_his .right .line span:before {position:absolute; left:-18.5px; top:50%; transform:translate(0, -50%); width:10px; height:10px; border:2px solid var(--point-color); background:#fff; border-radius:100%; content:'';}
.es_his .left .line span:before {position:absolute; right:-18.5px; top:50%; transform:translate(0, -50%); width:10px; height:10px; border:2px solid var(--point-color); background:#fff; border-radius:100%; content:'';}
.es_his .left .line span {float:right; padding-right:20px; margin-left:10px;}
.es_his .left .line p {float:right; text-align:right;}

@media (max-width:1280px) {
	.es_his h2 {text-align:left; font-size:2rem; }
	.es_his:before {left:1px; transform:none;}
	
	.es_his .left, .es_his .right {width:100%; margin-left:0; transform:none;}

	.es_his .line span {padding:0 0 0 10px !important; margin:0; margin-top:-2px; min-width:50px;}
	.es_his .left .line p, .es_his .left .line span {float:left; text-align:left;}
	.es_his .left .line span:before, .es_his .right .line span:before {right:initial; left:-18px;}
	.es_his .left .line span {margin-left:0;}

	.es_his .line span {font-size:1.1rem;}
	.es_his .line p {font-size:1rem; width:calc(100% - 70px); }
}

.subbody {margin:120px auto;}