@charset "utf-8";
@import url(font.css);
@import url(korea_normalize.css);
body { font-size: 1rem !important;}
::selection {background:#009299; color:#fafafa;}
iframe {display:block;}
.youtube {position:relative; width:100%; padding-bottom:56.25%; margin-bottom:2rem;}
.youtube iframe {position:absolute; top:0; left:0; width:100%; height:100%;}
.mobonly {display:none;}
.comonly {display:inline;}
.voice {position:absolute; left:9999px;}

h1 {font-size:4rem;}
h2 {font-size:3rem;}
h3 {font-size:2rem;}
h4 {font-size:1.75rem;}
h5 {font-size:1.5rem;}
h6 {font-size:1.25rem;}
p {font-size:1rem; line-height:1.5rem;}
.big {font-size:1.125em; line-height:1.7em;}
span {}
b {color: #142d62;}
strong {color: #142d62;}
i {font-style:normal;}

em {font-style:normal;}
dl::after {display:block; clear:both; content:'';}
dt , dd {float:left;}

.center {text-align:center;}
.left {text-align:left;}
.right {text-align:right;}
.justify {text-align:justify;}

.f-left {float:left;}
.f-right {float:right;}

.row::after {display:block;content:'';clear:both;}
.row > .col {float:left}
.half > .col {width:50%;}
.third > .col {width: 33.333%;}
.quarter > .col {width:25%;}
.fifth > .col {width:20%;}
.sixth > .col {width: 16.66667%;}

.row > li {float:left ; width:100%;}
.half > li {width:50%;}
.third > li {width: 33.333%;}
.quarter > li {width:25%;}

.imgbox > img {display:block; max-width:100%;}

.white {color:#fff;}
.black {color:#333;}

.more {border-bottom:1px solid #333 !important; font-size:14px; padding:0.5rem 0.2rem;  color:#333 !important; display:inline-block;  margin-top: 1.5rem; transition:0.3s all; background:white; }
.more:hover {padding:0.5rem 1rem; }
.lazy-load img {opacity:0;}
.trans {position: relative; overflow: hidden;animation: imgbox 1s ease-in-out forwards;}
.trans img {overflow: hidden; opacity: 0;animation: img 1s ease-in-out forwards;}
.trans:before {content: ''; position: absolute; left: 0; right: 0; height: 100%; z-index: 10;background: #e00032; transform: translateX(-100%);animation: img_before 1s ease-in-out forwards; z-index: 2;}

@keyframes imgbox {
	0% {box-shadow:none;}
	50% {box-shadow:none;}
	50.001% {box-shadow: 5px 5px 20px rgba(0,0,0,0);}
	100% {box-shadow: 5px 5px 20px rgba(0,0,0,0.3);}
}


/* fade */




/* nav */
nav.computer, nav.mob { left:0; top:0; width:100%; z-index:999; transition:0.3s all; height:87px; background:rgba(0,0,0,.2) ; border-bottom: 1px solid rgba(255,255,255,.2);position:absolute; top:0; left:0; color:#fff;}
nav.computer .header-wrap , nav.mob .header-wrap {max-width:1200px; margin:0 auto; width:100%;}
nav.computer .menus, nav.mob .menus {float:right; padding-top:0.9rem;transition:0.3s all;}
nav.computer .menus li, nav.mob .menus li {float:right;padding-left: 1rem; padding-top:2px;transition:0.3s all;}
nav.computer h1, nav.mob h1 {float:left;transition:0.3s all; position:relative;}
nav.computer h1 img {position:absolute; top:0; left:0;margin-top:22px; }
nav.computer .gnb {float:right; letter-spacing:0;transition:0.3s all;}
nav .gnb > li {float:left; padding: 2rem 2rem; letter-spacing:0; font-size:18px;position:relative; color:#fff; transition:0.3s all; width:135px; text-align:center; }
nav.computer .depth2 {display:none; box-shadow: 3px 3px 10px rgba(0,0,0,.3) ; position:absolute; left:50%; transform:translateX(-50%);}
nav.computer .gnb li > .depth2 {position:absolute; top: 80%; background:white; line-height: 1.6em; padding: 1rem 0 ; z-index:9999;}
nav.computer .gnb li > .depth2 li {float:none; padding:0.5rem 2rem; position:relative; text-align:center; color:#142d62; white-space:nowrap; text-shadow:none;}
nav.computer .gnb li:hover > .depth2 {display:block;}

nav .gnb li .depth2 li a {color:#333 !important; line-height: 1rem; font-size: 15px; display:inline; width:auto; overflow:hidden; text-align:left;}
nav.computer .gnb li .depth2 li a:hover {color:#142d62 !important;}
nav.computer .gnb li .depth2 li a::before {position:absolute; content:''; width: 0%;  bottom:3px; left: 50%; height: 2px; background:#142d62; transition:0.3s all;}
nav.computer .gnb li .depth2 li a:hover::before { width: calc( 100% - 6rem ) ;left: 3rem;}
nav.computer.scrolled li {text-shadow:none;}
nav.computer.scrolled h1 img {margin-top:22px;}


/* footer */

footer {background:#fff; color:#999; line-height: 2rem; letter-spacing:0; font-size:15px;padding: 30px 0; font-size:14px; padding-bottom: 30px; border-top: 1px solid #ddd;}
footer .footer-inner {max-width:1200px; margin:0 auto; width:100%; position:relative;}
footer .logo-f {position:absolute; top:0; right:0;}
footer .menu-f::after {display:block; clear:both; content:'';}
footer span {display:inline-block; padding-right: 30px;}
footer ul li{float:left; padding-right: 15px; padding-left:15px; border-right: 1px solid #ddd; color:#666; margin-top: 10px;}
footer ul li:last-child, footer ul li:nth-of-type(3) {border:none;}
footer ul li:first-child {padding-left:0;}
footer ul li.copy {font-size:13px; color:#999;}
footer .top {position:fixed; bottom:50px; right:50px; display:inline-block; width:43px; height:43px; background:url(../images/top.png) no-repeat center center; opacity:0.8; z-index:999;}


.computer.scrolled { background:white; border-bottom: 1px solid #ddd;}
.computer.scrolled .menus {padding-top: 1.6rem;}
.computer.scrolled .gnb li {padding: 1.6rem 2rem;}
.computer.scrolled h1 {font-size:3rem;}
.mob {display:none;}

nav.computer.scrolled .menus .hamburger-menu-button-open {background:#333;}
nav.computer.scrolled .menus .hamburger-menu-button-open::before {background:#333;}
nav.computer.scrolled .menus .hamburger-menu-button-open::after {background:#333;}

/* menuScreen */

#menuScreen {position:fixed; top:0; left:100%; right:0; bottom:0; background: #222; z-index:9999;transition:0.5s all; width:100%;}
#menuScreen::after {clear:both; content:''; display:block;}
#menuScreen .menubg {width:35%; height:100%; background:url(../images/menubg.jpg) no-repeat center center; float:left;}
#menuScreen .menubox {width: 65%; height:100%; float:left; padding:8rem;position:relative;}
#menuScreen .menubox .gnb > li {width:30%; font-size:24px; color:#fff; float:left; padding-bottom: 3rem; height:320px; position:relative;}
#menuScreen .menubox .gnb > li::before {width:5px; height:5px; position:absolute; background:#e00032; content:''; display:block; left: -7px; top:-7px;}
#menuScreen .menubox .gnb .depth2 {font-size: 15px; color:#bbb; padding-top: 1rem; line-height:2rem;}
#menuScreen .menubox .gnb .depth3 {font-size:16px; color:#999; padding: 0 0.5rem; padding-bottom: 0.5rem;}
#menuScreen .menubox .gnb a{transition:0.5s all;}
#menuScreen .menubox .gnb a:hover {color:#e00032;}
#menuScreen .menubox .menu_close {position:absolute; right:2rem; top:2rem; width:7rem; height:7rem; text-align:center; background:#333; color:transparent;}
#menuScreen .menubox .menu_close span {display:inline-block; position:relative; margin-top:28%; width:2.5rem; height:2.5rem; color:#333;}
#menuScreen .menubox .menu_close span::before, #menuScreen .menubox .menu_close span::after {content:''; display:block; position:absolute; left:0; width:100%; border-bottom:0.1rem solid #fff;}
#menuScreen .menubox .menu_close span::before {top: 50%; transform:rotate(-45deg);}
#menuScreen .menubox .menu_close span::after {top: 50%; transform:rotate(45deg);}
#menuScreen .menubox .call {background:#444; padding:3rem; color:#fff; font-size:1rem; line-height: 2rem; position:absolute; right:2rem; bottom:2rem; padding-top:2rem; z-index: 999;}
#menuScreen .menubox .call svg {width:1rem; height:1rem; margin-right:0.5rem;}
#menuScreen .menubox .call dt, #menuScreen .menubox .call dd {float:left;}
#menuScreen .menubox .call dl::after {clear:both; content:''; display:block; }
#menuScreen .menubox .call dd {font-weight: 300; color:#ccc;}
#menuScreen .menubox .call dt {width: 8rem;}
#menuScreen h4 {font-size:24px; color:white;padding:0; padding-bottom:1rem; text-align:left;}
#menuScreen .menubox .gnb .depth3{display:none;}
#menuScreen .menubox .lang li {float:right;padding-right: 10px;}

/* 사이드 메뉴 */
html.side_menu,
body.side_menu{overflow:hidden}
#side_mask{position:fixed;left:0;top:0;right:0;bottom:0;width:100%;height:100%;background:rgba(0,0,0,0.7);z-index:1000;opacity:0;visibility:hidden}
#side_mask.active{opacity:1;visibility:visible}
#side_menu{position:fixed;left:0;top:0;bottom:0;max-width:360px;width:80%;background:#fff;z-index:1010;overflow:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;opacity:0;visibility:hidden;
	-webkit-transform: translateX(-100%);
   	-o-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    transform: translateX(-100%);
	transition: 0.2s all;
	z-index: 9999;
}
#side_menu.active{opacity:1;visibility:visible;
	-webkit-transform: translateX(0);
   	-o-transform: translateX(0);
    -ms-transform: translateX(0);
    -moz-transform: translateX(0);
    transform: translateX(0);
}
#side_menu .side_top{position:relative;padding:0 10px;height:65px}
#side_menu h1 {padding: 20px; padding-left:7px;}
#side_menu .side_top a,
#side_menu .side_top .img{display:block}
#side_menu .side_top .btn_close{display:block;position:absolute;right:-19px;top:-4px;width:96px;height:90px;text-indent:-9999px;background:url("../images/side_close.png") no-repeat center center;z-index:20}
#side_menu .side_lang{ height:150px}
#side_menu .side_lang .title{height:35px;font-size:20px;color:#fff;font-weight:700}
#side_menu .side_lang .lang_list{height:60px}
#side_menu .side_lang .lang_list li{float:left;padding:0 40px;background:url("../img/icon/lang_line.png") no-repeat left center}
#side_menu .side_lang .lang_list li:first-child{padding-left:0;background:none}
#side_menu .side_lang .lang_list a{display:block;height:30px;line-height:30px;font-size:17px;color:#bdbdbd;font-weight:700}
#side_menu .side_lang .lang_list .active{color:#3e3e3e}
#side_menu .gnb_wrap{padding:0 30px;margin-bottom:60px}
#mob {display:none; width:100%;}
/* gnb */
#gnb {padding-top: 30px; background:transparent !important;}
#gnb > li{border-bottom:1px solid #eee ; color:#fff;}

#gnb > li > a {display:block;position:relative;height:45px;line-height:45px;font-size:16px;color:#333;font-weight:600; transition: .3s;}
#gnb > li:hover > a { color:#289dc3 !important; }
#gnb .depth2 li:hover a {color:#289dc3;}
#gnb > li > a:after{content:" ";display:block;position:absolute;right:12px;top:69%;margin-top:-11px;width:10px;height:6px;background:url("../images/side_arrow.png") no-repeat;z-index:20; background-size: contain;}
#gnb .link_one:after{display:none}
#gnb .active > a:after{
	-webkit-transform: rotate(180deg);
   	-o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);

}
#gnb .depth2{display:none;padding:10px 0;border-top:1px solid #ccc}
#gnb .depth2 a{display:block;padding:0 15px;height:30px;line-height:30px;font-size:13px;color:#666; transition: .3s;}
#gnb .depth2 .active{font-weight:700;color:#111}
#side_menu .btn_wrap{padding:0 20px 20px 20px}
#side_menu .btn_inquiry{display:block;height:60px;line-height:60px;text-align:center;font-size:23px;color:#3e3e3e;font-weight:700px;border:3px solid #3a3a3a;border-radius:10px}
#side_menu .sns li {float:left; margin-right: 10px;height:60px; padding-top: 15px; }
#side_menu p.title {font-size: 20px; font-weight: 700; height:35px; padding-top: 10px; margin-bottom: 10px;line-height:35px; }


.overlay {
  position: fixed;
  width: 100%;
  height: 100vh;
  background: #0f0f0f;
  z-index: 1;
  opacity: 0;
  transition: 0.3s all ease-in;
 visibility:none;
 	display:none;
  
}


.overlay-on {
	opacity:1;
	display:block;
}


.overlay ion-icon {
  position: fixed;
  right: 0;
  margin: 2em;
  color: white;
}

.overlay ul {
  text-align:center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  list-style: none;
}

.overlay ul li {
  font-size: 84px;
}
/* hamburger menu */
.hamburger-menu-button {
  width: 10px;
  height: 40px;
  display: block;
  position: relative;
  z-index: 100;
  background: transparent;
  border: 5px solid transparent;
  box-sizing: content-box;
  border-radius: 50%;
  text-indent: 100%;
  color: transparent;
  white-space: nowrap;
  cursor: pointer;
}
.hamburger-menu-button-open {
  top: 50%;
  margin-top: -1px;
  left: 50%;
  margin-left: -12px;
}
.hamburger-menu-button-open, 
.hamburger-menu-button-open::before, 
.hamburger-menu-button-open::after {
  position: absolute;
  width: 24px;
  height: 2px;
  background: #fff;
  border-radius: 4px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.hamburger-menu-button-open::before, 
.hamburger-menu-button-open::after {
  left: 0;
  content: "";
}
.hamburger-menu-button-open::before {
  top: 6px;
}
.hamburger-menu-button-open::after {
  bottom: 6px;
}
.hamburger-menu-button-close {
  background: transparent;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.hamburger-menu-button-close::before {
  -webkit-transform: translateY(-6px) rotate(45deg);
          transform: translateY(-6px) rotate(45deg);
}
.hamburger-menu-button-close::after {
  -webkit-transform: translateY(6px) rotate(-45deg);
          transform: translateY(6px) rotate(-45deg);
}
@media all and (max-width: 1399px ) {
	.computer .menus {display:block}
	nav.computer .header-wrap {padding: 0 2rem;}
	.computer .header-wrap {padding: 0 1.5rem;}
	.computer  .mobile-nav { position:absolute; right: 0; left:auto; top:15px; }
	.computer .gnb {display:none;}
	.mob  .mobile-nav a {padding: 0; color:#333;}
	/*.mob  span.lines {width: 22px; height:2px; background:white; display:inline-block;position:relative;}
	.mob  .mobile-nav span::before, header .mobile-nav span::after {width:22px; height: 2px; background:#fff; position:absolute; top: -7px; content:''; transition:0.3s all;}
	.mob  .mobile-nav span::after {top: 7px;}
	.mob  .mobile-nav:hover span::before {top:-5px;}
	.mob  .mobile-nav:hover span::after {top:5px;}*/
	.mob .gnb { width: 320px; background:white; position:fixed; top:0; height:100%; min-height:100%; max-width:100%; z-index:9999;  overflow: hidden; right:0; padding: 50px 30px 0;}
	.mob .gnb > li ul li {display:none;}
	.mob .gnb > li {text-align:left; text-shadow: none; width: auto;float:none; color:#333; padding: 1.2rem 0; font-size: 16px; font-weight:600; border-bottom: 1px solid #ededed;}
	.mob .gnb > li:last-child {border-bottom: 0;}
	.mob .gnb .close {position:absolute; top:0; right:0; width: 30px; height:30px; background:#e00032; text-align:center;}
	.mob .gnb .close span {transform:rotate(45deg);}
	.mob .gnb .close span::before {content:''; width:22px; height:2px; background:#fff; transform:rotate(-90deg);display:block;}
	.mob .gnb .language li {display:inline-block; float:left; padding-right: 0.5rem; padding-bottom: 1rem; width:37px; }
}
@media all and (max-width:1200px) {
	footer {padding-left:20px; padding-right:20px;}
}

@media all and (max-width:1100px ) {
	footer span, footer ul li {font-size: 13px;}
	
	footer {text-align:center;}
	footer ul {text-align:center;}
	footer ul li {float:none; display:inline-block;}
	footer ul li.copy {text-align:center; float:none; font-size: 12px;}

}

@media all and (max-width:500px ) {
	footer {line-height: 1.6em;}
	footer span, footer .copy{font-size:12px; padding:0; line-height: 1.3em;}
	footer .copy {font-size:11px;}
	footer .menu-f li a {font-size: 11px;}
	.mobonly {display:block;}
	footer b {font-size: 11px;}
	footer ul li {padding:0; padding-right: 10px; border:none; font-size:11px;}
	 h1 img {transform:scale(0.9) translateX(-30px);}
	
}