@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;}
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;}*/
b {color: #e62129;}
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%;}
.nine > .col {width:11.11112%}

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


.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:0; width:100%; height:10rem; z-index:999; transition:0.5s; padding:0 5rem; display:flex; justify-content:space-between; background:rgba(255,255,255,0); 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::after{display:block; content:''; opacity:0; visibility:hidden; width:100%; height:1px; position:absolute; left:0; top:100px; background:#ccc;}
#header .logo {height:10rem; display:inline-flex; align-items:center;}
#header .hd_logo{display:inline-block; width:256px; height:45px; background:url('../../images/logo_w.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:15rem; transition:all 0.3s ease;}
#header .gnb > li:hover{width:18rem;}
#header .gnb > li > a {position:relative; font-size:20px; color:white;white-space:nowrap;font-weight:500;display:inline-flex; height:10rem; align-items:center; padding:0 3.7rem;}
#header .gnb > li.on > a {color:#005eb8;}
#header .gnb .depth2 {opacity:0; visibility:hidden; width:100%; padding:1rem 0; min-height:35rem; position:absolute; top:10rem; left:0; z-index:9;}
#header .gnb .depth2 li a{color:#222; transition:all 0.2s;}
#header .gnb .depth2 > li > a{font-size:15px;}
#header .gnb .depth2 > li {padding:1rem 0; text-align:center;}
/* #header .gnb .depth2 > li > a .ico */
#header .gnb .depth2 > li.on > a{color:#005eb8; font-weight:600;}

/* ham_btn */
#header .menu_right-wrap{display:flex;}
#header .hd_menu{width:25px; height:40px; position:relative; top:28px; 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:white; 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:6px;}
#header .hd_menu .ham_btn::after{bottom:6px;}

.language{width: 80px; height: 44px; overflow: visible; float: right; top:32px; position: relative; right: 22px;}  
.language ul{display: block;position: relative; border:1px solid #DFE0E8;border-radius: 22px;padding: 10px 20px; font-size: 14px;text-transform: uppercase;font-weight: 500; line-height:1;}
.language ul::before{content:"\e942"; position:absolute; top:10px; right:20px; font-family:'xeicon' !important; color:white;}
.language li{width: 100%;}
.language li a{display: block; color:white;}
.language li:last-child a{margin-top:5px;}
.language li:not(.active){display: none;}
.language ul:hover li{display: block !important;}

/* 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 .hd_logo{background:url('../../images/logo_c.png?ver=260212') no-repeat center/contain}
#header.is_hover .gnb .depth2 {display:block;}
#header.is_hover .gnb > li{width:18rem;}
#header.is_hover .gnb > li.on{background:var(--main-color2);}
#header.is_hover .gnb > li > a{color:#222;}
#header.is_hover .gnb > li.on > a{color:#fff;}
#header.is_hover .gnb > li.open > a{color:#fff;}
#header.is_hover .gnb .depth2{opacity:1; visibility:visible;}
#header.is_hover .gnb .depth2 > li a{color:#222;}
#header.is_hover .gnb .depth2 > li:hover > a{color:var(--main-color2); 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:#222;}

/* white */
#header.white{background:rgba(255,255,255,0.6); backdrop-filter:blur(7px);}
#header.white:hover{background:#fff;}
#header.white .hd_logo{background:url('../../images/logo_c.png?ver=260212') no-repeat center/contain;}
#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:1000;opacity:0;visibility:hidden}
#side_mask.active{opacity:1;visibility:visible}
#side_menu{position:fixed;left:0;top:0;bottom:0;max-width:100%;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: 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: translateX(0);
}
#side_menu .side_top{position:relative; padding:0 5rem; height:10rem; margin: 0 auto; width:100%; background:white; display:flex; align-items:center;}
#side_menu .side_top a,
#side_menu .side_top .img{display:block; max-width:212px; height:43px;}
#side_menu .side_top .hd_ham-close{display:block; position:absolute; right:50px; top:0px; 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:#222; backdrop-filter:blur(7px); position:fixed; left:0;top:10rem; bottom:0; right:0; z-index:9999; overflow-y:auto;}
.ham-nav_wrap .ham-nav{position:relative; width:100%; margin:0 auto; display:flex; justify-content:space-between; max-width:1420px;}
.ham-nav_wrap .ham-nav > li{padding-top:100px; text-align:left; width:20%; font-size:2.6rem; font-weight:700; color: var(--sub-color); position:relative;}
.ham-nav_wrap .ham-nav > li::after {content:''; display:block; width:25px; height:25px; border-radius:50%; background:rgba(255,107,0,0.3); position:absolute; top:65px; left:-13px; opacity:0; transition:all 0.3s ease;}
.ham-nav_wrap .ham-nav > li:hover::after{opacity:1; top:85px; width:30px; height:30px;}
.ham-nav_wrap .ham-nav > li > a{display:block;}
.ham-nav_wrap .dep2{position:relative; margin-top:30px;}
.ham-nav_wrap .dep2 > li{padding-bottom:20px;}
.ham-nav_wrap .dep2 > li > a{display:block; text-indent:20px; font-weight:400; color:#fff; font-size:16px; position:relative; transition:all 0.3s ease;}
.ham-nav_wrap .dep2 > li > a:before{position:absolute;left:0;top:6px; display:block;width:6px;height:6px;content:''; background-color:var(--sub-color);}

.ham-nav_wrap .dep2:hover > li > a{opacity:0.6;}
.ham-nav_wrap .dep2 > li:hover > a{color:var(--sub-color); opacity:1;}


/*footer*/
footer{background:#161618; padding:85px 0 60px;}
footer .sect-wrap{position:relative;}
footer .foot_logo{margin-top:30px;width:195px; height:50px; background:url('../../images/logo_w.png') no-repeat center/contain;}
footer .foot_logo a{display:block; width:100%; height:100%;}
footer .foot_top{padding-bottom:17px;border-bottom:1px solid #838384;}
footer .foot_top ul{display:flex; justify-content:start; gap:30px;}
footer .foot_top ul li {font-size:1.6rem; color:#fff; transition:all 0.3s ease;}
footer .foot_top ul li:first-child{font-weight:700;}
footer .foot_top ul li:hover{color:var(--main-color);}

footer .foot_bottom{margin-top:30px;display:flex;gap:60px;}
footer .foot_address p{color:#fff;font-size:1.8rem;line-height:36px;}
footer .foot_bottom .copyright{color: #c7c7c7; font-size:1.6rem;font-weight:300;margin-top:15px;}


/* top_btn */
.top_btn{position:absolute; z-index:999; top:-62px; right:30px; width:75px; height:75px; border-radius:50%; border:1px solid #fff;}
.top_btn a {display:flex; flex-direction:column; justify-content:center; align-items:center; gap:10px; width:100%; height:100%; transition:all 0.3s ease;}
.top_btn a .top_btn-arrow{position:relative; width:1px; height:20px; background:#fff;}
.top_btn a .top_btn-arrow::before,
.top_btn a .top_btn-arrow::after{content:''; display:block; width:8px; height:1px; background:#fff; position:absolute; top:2px;}
.top_btn a .top_btn-arrow::before{transform:rotate(45deg); left:-1px;}
.top_btn a .top_btn-arrow::after{transform:rotate(-45deg); right:-1px;}
.top_btn a span{color:#fff;}

.top_btn a span,
.top_btn a .top_btn-arrow,
.top_btn a .top_btn-arrow::before,
.top_btn a .top_btn-arrow::after{transition:all 0.3s ease;}

.top_btn:hover{background:var(--main-color); border:none;}
.top_btn:hover a span{color:white;}
.top_btn:hover a .top_btn-arrow,
.top_btn:hover a .top_btn-arrow::before,
.top_btn:hover a .top_btn-arrow::after{background:white;}


/*respond*/



@media screen and (max-width: 1500px){
    header{padding: 0 20px;}

}

@media screen and (max-width: 1450px){
	#header .gnb{max-width:80%; margin-left:100px;}
}

@media screen and (max-width: 1400px){ 
	 header .head_gnb .dep1 {padding-left: 140px; } 
    
	
}


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

}

@media all and (max-width: 1280px ) { 
	.sect-wrap{width:100%; padding:0 15px;}

	#header,
	#side_menu .side_top{padding:0 1.5rem;}
	#header .hd_logo, 
	#side_menu .side_top a,
	#side_menu .side_top img{width:200px;}
	#side_menu .side_top img,
	#side_menu .side_top a{height:auto;}
	#side_menu .side_top .hd_ham-close{right:20px;}	

	#header .gnb{display:none;}
	#side_menu .side_top .hd_ham-close{right:20px;}

	.ham-nav_wrap .ham-nav{max-width:100%; padding:0 25px;}
	.ham-nav_wrap .ham-nav > li{width:auto; padding:25px 0; font-size:2.2rem;}
	.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%; display:block;}
}

@media all and (max-width: 1080px ) { 

}

@media screen and (max-width:980px){ 
	.ham-nav_wrap .ham-nav > li::after{display:none;}

	.foot_address p{flex-direction:column; gap:10px; padding:3px 0;}
	.foot_address p span::after{display:none;}
	footer .foot_top ul{gap:15px;}
	footer .foot_top ul li{font-size:1.4rem;}
	footer .foot_bottom{gap:30px;}
	footer .foot_address p{font-size:1.6rem;line-height:28px;}
	footer .foot_bottom .copyright{font-size:1.4rem;}
}

@media screen and (max-width:820px){ 
	#header .hd_logo,
	#side_menu .side_top a,	#side_menu .side_top .img{width:180px;}

	.ham-nav_wrap .ham-nav{flex-direction:column; padding:30px;}
	.ham-nav_wrap .ham-nav > li:not(li:first-child){padding-top:0;}
	.ham-nav_wrap .dep2{margin-top:20px;}
	.ham-nav_wrap .dep2 > li{padding-bottom:15px;}

	footer .foot_top{flex-direction:column; align-items:center; gap:50px;}
	footer .foot_left{flex-direction:row; gap:70px;}
}

@media screen and (max-width:660px){ 	
	footer .foot_logo{margin-top:0;}
	footer .foot_bottom{flex-direction:column;} 
}

@media screen and (max-width:500px){ 
	.pc_space{display:inline;}

	#header, #side_menu .side_top{padding:0 1.5rem;}
	#header .hd_logo, #side_menu .side_top a, #side_menu .side_top img{width:160px;}
	#side_menu h1{padding-top:5px;}
	#side_menu .side_top .hd_ham-close{right:10px;}

	.ham-nav_wrap .ham-nav{margin:0; padding-top:0;}
	.ham-nav_wrap .dep2{margin-left:10px;}
	.ham-nav_wrap .dep2 > li > a{font-size:15px;}

	.language{width:75px;}
	.language ul::before{right:10px;}

	footer .foot_logo{width:160px;}
	footer .foot_address p{font-size:1.4rem;}
	footer .foot_bottom{gap:10px;}
	footer .foot_bottom ul{gap:0; justify-content:space-between;}
	footer .foot_bottom .copyright{font-size:1.3rem; text-align:center;}

	.top_btn{width:58px; height:58px; right:10px;}
	.top_btn a span{font-size:1.4rem;}
}

@media screen and (max-width:420px){ 
	footer .foot_bottom ul li{font-size:1.3rem;}
}

@media screen and (max-width:390px){ 
	#header .hd_logo, #side_menu .side_top a, #side_menu .side_top img{width:140px;}

	.ham-nav_wrap .ham-nav > li {font-size:16px;}
	.ham-nav_wrap .dep2 > li > a{font-size:14px;}

	footer .foot_top-wrap ul li{font-size:12px;}
	footer .foot_bottom .copyright{font-size:1.3rem;}
}

@media screen and (max-width:375px){ 
	footer address .foot_com_name{font-size:15px;}
	footer address p, 
	footer address li{font-size:14px;}
}