@charset "utf-8";
@import url(korea_normalize.css);
body { font-family: 'Pretendard' , 'Roboto', 'Noto Sans' , sans-serif ; font-size: 1rem !important; overflow-x:hidden;}
::selection {background:#009299; color:#fafafa;}
iframe {display:block; margin: 0 auto;}
.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: #0068b7;}
strong {color: #cc0000;}
i {font-style:normal;}

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

.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;}

.sect-wrap p {font-size:16px; color:#666;}
@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 { position: sticky; left:0; top:0; width:100%; z-index:999; transition:0.3s all; height:80px;  border-bottom: 1px solid rgba(255,255,255,.2); top:0; left:0; color:#fff; background:#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:23px; }
nav.computer .gnb {float:right; letter-spacing:0;transition:0.3s all;}
nav .gnb > li {float:left; padding: 2rem 1rem; letter-spacing:0; font-size:18px;position:relative; color:#333; transition:0.3s all; width:150px; 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:#cc0000; 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: 17px; display:inline; width:auto; overflow:hidden; text-align:left;}
nav.computer .gnb li .depth2 li a:hover {color:#cc0000 !important;}
nav.computer .gnb li .depth2 li a::before {position:absolute; content:''; width: 0%;  bottom:3px; left: 50%; height: 2px; background:#cc0000; 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;}
nav.computer .depth3 {display:none;}
nav.computer .depth2 li {position:relative;}
nav.computer .depth3 {position: absolute; top:0; left:100%; background:#f5f5f5;}
nav.computer .depth2 li:hover .depth3 {display:block;}
nav.computer .depth3 li:hover {background:#0068b7; color:#fff !important;}
nav.computer .depth3 li:hover a {color:inherit !important;}
nav .gnb li .depth2 .depth3 li:hover a  {color:white !important;}

/*푸터*/

footer {background: #0D0D0D; color:#ddd; line-height: 1.3rem; letter-spacing:0; font-size:15px;padding: 30px 0; font-size:14px; padding-bottom: 30px; letter-spacing:0;position:relative;}
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 .imgbox {float:right; width:340px; padding-bottom:13px;}
footer span {display:inline-block; padding-right: 30px;}
footer ul li:first-child{padding-right:30px;}
footer ul li{float: left; color: #fff; padding: 30px 0 20px 0; font-size: 17px;}
footer b {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;}
footer .menu-f ul li {color:#fff; border:0}
footer span.address {width:100%; max-width:475px; display:inline-block;}
footer h5{font-size:25px; color:#fff; margin-bottom: 15px;}
footer{padding-bottom:60px;}
footer .sect-wrap{width:1200px; margin:0 auto;}
footer .inner-top{border-bottom:1px solid #868686; font-weight:600}
footer .sect-wrap p {padding-bottom:0; color: #afafaf; font-size: 15px;}
footer .inner-top .inner-left span {display: inline-block;padding-right: 30px; padding-top: 30px; padding-bottom: 20px;font-size: 17px;}
footer .inner-left{width:60%; float:left;}
footer .inner-right{width:37%; float:right;}
footer .inner-right span{color:#cc0000}
footer .inner-right span{padding-right: 10px;}
footer .footer{padding-top:40px; color:#fff}
footer .copyright{padding-top:15px;}
footer .port_pdf_wrap{position:absolute;right:0;bottom:10px;padding-bottom:3px;border-bottom:1px solid #000;transition:all 0.3s;}
footer .port_pdf_wrap a{color:#fff;font-size:17px;}
footer .port_pdf_wrap::after{content:'';display:inline-block;width:24px;height:20px;background:url('../images/down.png');background-size:100%;margin-left:20px;}
footer .port_pdf_wrap:hover{border-bottom:1px solid #eee;transition:all 0.3s;}

/*푸터*/

.computer.scrolled { background:rgba(255,255,255,0.7); border-bottom: 1px solid #ddd;}

.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;}


.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: #333;
  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);
}

/* 사이드 메뉴 */
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:100%;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; max-width:278px;}
#side_menu .side_top .btn_close{display:block;position:absolute;right:-30px;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:#cc0000 !important; }
#gnb .depth2 li:hover a {color:#cc0000;}
#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;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; }

@media screen and (max-width:1300px) {
	footer {padding: 30px 10px;}
	footer .inner-left, footer .inner-right { width: 100%; }
	footer .sect-wrap{width:100%;}
	footer .inner-right li{padding: 10px 0 10px 0; font-size: 13px;}
	footer .port_pdf_wrap{right:20px;bottom:178px;}

	.brd-wrap {padding: 0 10px;}
}

@media screen and (max-width:1023px) {
	nav.computer .gnb {display:none;}
	nav.computer{padding:0 10px;}

}	

@media screen and (max-width:945px){ 
	 footer .port_pdf_wrap{bottom:208px;}
}
@media screen and (max-width:890px){ 
	 footer .port_pdf_wrap{bottom:230px;}
}
@media screen and (max-width:768px) {
	.half > .col {width:100%;}
	.third > .col {width:100%;}
	.sect-wrap p {font-size:14px;}
	.pc_space{display:inline;}	
	footer .imgbox {float:left;}

	nav.computer h1 img{max-width:270px;}
	nav.computer .menus, nav.mob .menus {padding-top: 0.1rem;}
	footer span.address {font-size:13px;}
	footer ul li.copy {font-size:12px;}
	
}


@media screen and (max-width:768px) {
	nav.computer h1 img { max-width: 180px; }
	nav.computer .menus li, nav.mob .menus li{padding-top: 6px;}
}
@media screen and (max-width:625px){ 
	 footer .port_pdf_wrap{bottom:208px;}
}
@media screen and (max-width:580px){ 
	 footer .port_pdf_wrap{bottom:182px;}
}
@media screen and (max-width:515px){ 
	 footer h5{margin-top:50px;}
	footer .port_pdf_wrap{bottom:250px;right:0;left:13px;}
}
@media screen and (max-width:450px){ 
	footer .port_pdf_wrap{bottom:241px;border:1px solid #dedede;width:50%;text-align:center;padding:10px 0;border-radius:10px;}
	footer .port_pdf_wrap a{padding-bottom:9px;display:inline-block;}
}
@media screen and (max-width:405px){ 
	 footer .port_pdf_wrap{bottom:265px;width:55%;}
}
@media screen and (max-width:405px){ 
	 footer .port_pdf_wrap{bottom:289px;}
}
@media screen and (max-width:375px){ 
	footer .inner-top .inner-left span{padding-right:20px;}
	footer .sect-wrap p{font-size:14px;}
	footer .port_pdf_wrap::after{margin-left:10px;}
}