@charset "utf-8";
/*웹 브라우저 같은 프로그램(user agent)이나 스크린 리더, 맞춤법 검사기, 검색 엔진에 유용한 정보를 제공하기 위함*/
abbr,acronym{border:0;}
* {box-sizing:border-box; word-wrap: break-word; word-break:keep-all;}

body{position:relative; font-family:  'Pretendard' , 'Roboto', 'Noto Sans KR',  sans-serif ;  
	width:100%; padding:0px; ;color:#222;  font-size: 1.6rem !important; overflow-x:hidden;
	user-select: none;-webkit-user-select: none;-moz-user-select: none; -ms-user-select: none;
}
article, aside, hgroup, header, footer, figure, figcaption, nav, section,time, mark, canvas, video, audio, details, summary {display:block; box-sizing:border-box;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0; box-sizing:border-box;}
address,caption,cite,code{font-style:normal;font-weight:normal;}
table{border-collapse:collapse;}
ol,ul,li{ list-style:none; }
a:visited, a:link, a:active, a:hover{color:inherit;text-decoration:none; ; border:none;}
.wrap{font-family: 'Pretendard', 'Roboto' ; /* letter-spacing: -0.05rem */}
.clearfix {zoom:1;}
.clearfix:before, .clearfix:after {content:"";display:table;}
.clearfix:after {clear:both;}
::after, ::before { box-sizing: border-box; }
::selection {background:#009299; color:#fafafa;}

.white{color:#fff;}
.blind{display:none;}



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

.blue{color:#2d86f4;}
.pc_space{display:block;}
.h_100{height: 100%;}
.inner{position: relative;margin: 0 auto;z-index: 5;}
.sect-wrap{max-width: 1420px; padding:0 30px;margin: 0 auto;}
.section{/* overflow: hidden; */position: relative;}
.mo{display: block;transition: 0.8s;}
.mo_up{transform: translate(0,100%);}
.mo_left{transform: translate(-100%,0);}
.mo_right{transform: translate(100%,0);}
.mo_fade{transition: 0.6s;opacity: 0;}
.mo1{transition-delay: 0.4s;}
.mo2{transition-delay: 0.8s;}
.mo3{transition-delay: 1.2s;}
.com .mo_up{transform: translate(0,0);}
.com .mo_fade{opacity: 1;}
.com .mo_left{transform: translate(0,0);}
.com .mo_right{transform: translate(0,0);}

.w_100{width: 100%;}
.w_50{width: 50%;}
.w_30{width: 30%;}
.w_5{width: 5%;}

.img100 img{width:100%;}

/* 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:1.6rem;}*/
.big {font-size:1.125em; line-height:1.7em;}
b {color: #e7c953;}
strong {color: #e7c953;}
i {font-style:normal;}

em {font-style:normal;}
dl::after {display:block; clear:both; content:'';}

.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%;}
img.protect{pointer-events:none;}

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



.blacked {color:#333; border-color:#333; }
/* fade */

/*header*/
#header {position:fixed; top:0; left:50%;transform:translateX(-50%);padding-top:20px;width:100%; height:12rem;z-index:9991; transition:0.5s; display:flex; justify-content:space-between; background:rgba(255,255,255,1); backdrop-filter:none;}
/* #header::after {display:block; content:''; opacity:0; visibility:hidden; width:100%; height:calc(100% - 10rem); position:absolute; left:0; bottom:0; background:#f5f5f7; background:url('../../images/logo_gnb.png') no-repeat right bottom; transition:0.4s; z-index:-1; border-top:1px solid #ccc;} */
#header::before{content:'';width:100%;height:20px;background:#006468;position:absolute;top:0;left:0;}
#header::after{display:block; content:'';width:100%; height:1px; position:absolute; left:0; top:120px; background:#dedede;}
#header .header_inner{max-width:1735px;width:100%;position:relative;margin:0 auto;padding:0;}
#header .logo {height:10rem; display:inline-flex; align-items:center;}
#header .hd_logo{display:inline-block; width:180px; height:72px; background:url('../images/logo.png') no-repeat center/contain; z-index:1;}
#header nav{display:flex; justify-content:center; width:100%; height:100%; position:absolute; left:0; top:0;}
#header .gnb_wrap{position:relative;margin-left:130px;}
#header .gnb{display:flex;}
#header .gnb li a{display:inline-block;}
#header .gnb > li{position:relative; display:inline-flex; flex-direction:column; justify-content:space-between; align-items:center; height:100%; width:25rem; transition:all 0.3s ease;}
#header .gnb > li:hover{width:25rem;}
#header .gnb > li > a {position:relative; font-size:18px; color:#222; white-space:nowrap;font-weight:500; display:inline-flex; height:10rem; align-items:center; padding:0 3.7rem;}
#header .gnb > li.on > a {color:var(--main-color);}
#header .gnb .depth2 {opacity:0; visibility:hidden; width:100%; padding:1rem 0; min-height:38rem; position:absolute; top:10.1rem; left:0; z-index:999;}
#header .gnb .depth2 li a{color:#222; transition:all 0.2s;}
#header .gnb .depth2 > li > a{font-size:14px;}
#header .gnb .depth2 > li {padding:0.8rem 0; text-align:center;}
#header .gnb .depth2 > li.on > a{color:var(--main-color); font-weight:600;}

/* ham_btn */
#header .menu_right-wrap{display:flex;position:absolute;right:0;top:24px;}
#header .hd_menu{width:30px; height:50px;background:transparent;}
#header .hd_menu a{display:block; width:100%; height:100%;}
#header .hd_menu .ham_btn{top:50%; left:50%;}
#header .hd_menu .ham_btn,
#header .hd_menu .ham_btn::before,
#header .hd_menu .ham_btn::after{content:''; display:block; width:25px; height:2px; background:#000; border-radius:4px; -webkit-transition:all 0.3s; transition:all 0.3s; position:absolute; left:0; z-index:9;}
#header .hd_menu .ham_btn::before{top:8px;}
#header .hd_menu .ham_btn::after{bottom:8px;}

/* hover */
/* #header.is_hover {height:35rem; background:#fff; overflow:hidden; box-shadow:1px 1px 25px rgb(67 67 67 / 20%);}
#header.is_hover::after{opacity:1; visibility:visible;}
#header.is_hover .gnb .depth2 {display:block;}
#header.is_hover .gnb > li{width:30rem;position:relative;}
#header.is_hover .gnb > li::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--sub-color);transition:all 0.3s ease;}
#header.is_hover .gnb > li.on::after{width: 100%;}
#header.is_hover .gnb > li > a{color:#222;}
#header.is_hover .gnb > li.on > a{color:var(--sub-color);}
#header.is_hover .gnb > li.on .depth2{background:#f5f5f5;}
#header.is_hover .gnb > li.open > a{color:#fff;}
#header.is_hover .gnb .depth2{opacity:1; visibility:visible;border-left:1px solid #eee;}
#header.is_hover .gnb .depth2.depth2_last{border-right:1px solid #eee;}
#header.is_hover .gnb .depth2 > li a{color:#222;}
#header.is_hover .gnb .depth2 > li:hover > a{color:var(--main-color); font-weight:600;}
#header.is_hover .language ul::before{color:#222;}
#header.is_hover .language li a{color:#222;}
#header.is_hover .hd_menu .ham_btn,
#header.is_hover .hd_menu .ham_btn::before,
#header.is_hover .hd_menu .ham_btn::after {background:#000;} */

/* white */
#header.white{border-bottom:1px solid #ccc;}
#header.white:hover{background:#fff;}
#header.white .gnb > li > a {color:#222;}
#header.white .gnb .depth2 > li a{color:#222;}
#header.white .language ul::before{color:#222;}
#header.white .language li a{color:#222;}
#header.white .hd_menu .ham_btn,
#header.white .hd_menu .ham_btn::before,
#header.white .hd_menu .ham_btn::after{background:#222;}

/* 사이드 메뉴 */
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:9997;opacity:0;visibility:hidden;}
#side_mask.active{opacity:1;visibility:visible;}
#side_menu{position:fixed;left:50%;top:50%;max-width:100%;width:95%;height:95%;border-radius:20px;background:#fff;z-index:9998;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: 99999;
}
#side_menu.active{opacity:1;visibility:visible;
	-webkit-transform: translateX(0);
   	-o-transform: translateX(0);
    -ms-transform: translateX(0);
    -moz-transform: translateX(0);
    transform: translate(-50%, -50%);
}
#side_menu .side_top{position:relative; max-width:1420px;height:15rem; padding:0 30px;margin: 0 auto; width:100%; background:#fff; display:flex; align-items:center;}
#side_menu .side_top a,
#side_menu .side_top .img{display:block; max-width:264px; height:72px;}
#side_menu .side_top .hd_ham-close{display:block; position:absolute; right:0; top:22px; width:50px; height:10rem; text-indent:-9999px; background:url("../images/side_close.png") no-repeat center center; z-index:20}


/*side-menu*/
.ham-nav_wrap{background:#fff; backdrop-filter:blur(7px); position:fixed; left:0; top:12rem; bottom:0; right:0; z-index:9999; overflow-y:auto;}
.ham-nav_wrap .ham-nav{position:relative; width:100%; margin:100px auto 0; display:flex; flex-direction:column; justify-content:center; max-width:1420px;}
.ham-nav_wrap .ham-nav > li{text-align:left; width:100%;position:relative;padding:30px 0 30px 30px; border-top:1px solid #dedede;}
.ham-nav_wrap .ham-nav > li > a{font-size:2.7rem; font-weight:700;color:#333;transition:all 0.2s ease;}
.ham-nav_wrap .ham-nav > li:last-child{margin-bottom:0;}
/* .ham-nav_wrap .ham-nav > li > a::after{content:" ";display:block;position:absolute;right:20px;top:40px;width:18px;height:12px;background:url("../images/side_arrow.png") no-repeat;z-index:20; background-size: contain;} */
.ham-nav_wrap .ham-nav > li.active > a{color:var(--main-color);}
/* .ham-nav_wrap .ham-nav > li.active::after {content:''; display:block; width:20%; height:2px; background:#fff; position:absolute; top:50%; left:-320px; transform:translateY(-50%); opacity:1; transition:all 0.3s ease;} */
.ham-nav_wrap .ham-nav > li.active:hover::after{opacity:1;}
.ham-nav_wrap .ham-nav > li > a{display:block; width:100%;}
.ham-nav_wrap .dep2{position:relative;margin-top:35px;display:none;z-index:1000;line-height:1.8;}
.ham-nav_wrap .dep2 > li{margin-right:65px;}
.ham-nav_wrap .dep2 > li:last-child{margin-right:0;}
.ham-nav_wrap .dep2 > li > a{display:block; font-weight:450; color:#555; font-size:18px; transition:all 0.3s ease;}
.ham-nav_wrap .ham-nav > li.active .dep2 > li > a{color:#333;opacity:0.6;}

.ham-nav_wrap .ham-nav > li.active .dep2 > li > a:hover{opacity:1;}
/* .ham-nav_wrap .dep2 > li:hover >a{color:var(--main-color); opacity:1;} */

.ham-nav_wrap .ham-nav .open > a::after{ 
	-webkit-transform: rotate(180deg);
   	-o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
}

/*footer*/
footer{width:100%; padding:60px 0;background:#2b2b2b;position:relative;text-align:center;}
footer .foot_info {margin-bottom:35px;}
footer .foot_info h1{font-size:2rem;color:#fff;font-weight:bold;}
footer .foot_info p{font-size:1.6rem;color:#fff;line-height:22px;margin:22px 0 10px;font-weight:350;}
footer .foot_info span{font-size:1.6rem;color:#fff;font-weight:600;line-height:26px;} 
footer .copy{font-size:1.3rem;color:#fff;line-height:22px;font-weight:350;}


@media all and (max-width: 1750px ) { 
	#header .header_inner{padding:0 15px;}
	#header .menu_right-wrap{right:15px;}
}
@media all and (max-width: 1450px ) { 

	#header .gnb > li > a {font-size:18px;}
	#header .gnb_wrap{margin-left:140px; max-width:850px;}

}
@media screen and (max-width: 1400px){ 
    header .head_gnb .dep1 {padding-left: 140px; } 
    .sect-wrap{width:100%; padding:0 10px;}
	
}
@media all and (max-width: 1320px ) { 
	header .gnb_bx .wrap .gnb_wrap .depth01{width:150px;} 

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

	.sect-wrap{width:100%; padding:0 20px !important;}

}

@media all and (max-width: 1280px ) { 
	#header .gnb > li {width:15.5rem;}

	#header .gnb_wrap{margin-left:100px;}

	.ham-nav_wrap .ham-nav > li::after{top:5px;}
	.ham-nav_wrap .ham-nav > li:hover::after{top:15px;}
	.ham-nav_wrap .dep2{width:100%;}
}
@media all and (max-width: 1180px ) { 
	#header .gnb{display:none;}
	#side_menu .side_top .hd_ham-close{right:20px;}
}
@media screen and (max-width: 1080px){ 

}
@media screen and (max-width:980px){ 
	.ham-nav_wrap .ham-nav > li::after{display:none;}
}
@media screen and (max-width:820px){ 
	.ham-nav_wrap .dep2 > li{margin-right:40px;}
	.ham-nav_wrap .ham-nav > li > a{font-size:2.5rem;}
	.ham-nav_wrap .dep2 > li > a{font-size:16px;}

}

@media screen and (max-width:768px){ 
	.sect-wrap{padding:0 10px !important;}
	.pc_space{display:inline-block;}
	
	footer{padding:50px 0 50px;}
	footer .foot_info h1{font-size:1.8rem;}
	footer .foot_info p{font-size:1.4rem;margin:15px 0 5px;}
	footer .foot_info span{font-size:1.4rem;line-height:22px;}
}
@media screen and (max-width:660px){ 
	.ham-nav_wrap .dep2{flex-wrap:wrap;height:100%;}
}
@media screen and (max-width:500px){ 
	#header .hd_logo,
	#side_menu .logo img{width:150px;}
	#side_menu .side_top .hd_ham-close{right:10px;}
	
	#header .hd_menu{right:30%;}
	.ham-nav_wrap .ham-nav{margin:60px auto 0;}
	.ham-nav_wrap .dep2 > li > a{font-size:15px;}
	.ham-nav_wrap .ham-nav > li{padding:30px 0 30px 15px;}
	.ham-nav_wrap .ham-nav > li > a{font-size:2rem;}

	footer .foot_info p{font-size:1.3rem;line-height:20px;}
}

@media screen and (max-width:450px){ 
	#header .language{right:38px;top:34px;}
	#header .language img{width:28px;height:28px;}
	#header .hd_menu .ham_btn, #header .hd_menu .ham_btn::before, #header .hd_menu .ham_btn::after{width:23px;}
	#header .hd_menu .ham_btn{top:45%;left:40%;}
	.lang-menu li a{font-size:14px;}
	.ham-nav_wrap .ham-nav > li > a::after{width:15px;}
	.ham-nav_wrap .dep2{margin-top:20px;}
	#side_menu .side_top .hd_ham-close{background-size:18px;}
	#side_menu .side_top{padding:0 15px;}
}

@media screen and (max-width:430px){ 
}
@media screen and (max-width:390px){ 
	#side_menu .side_top .hd_ham-close{top:20px;}

	.ham-nav_wrap .ham-nav > li{padding:20px 0 20px 15px;}
	.ham-nav_wrap .ham-nav > li > a {font-size:18px;}
	.ham-nav_wrap .dep2 > li > a{font-size:14px;}		
	.ham-nav_wrap .ham-nav > li > a::after{top:26px;}

}
@media screen and (max-width:360px){ 
	
}