@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' , 'SUIT', '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', 'SUIT', '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: #142d62;}
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 */

/* nav */
/* nav.computer { width:100%; z-index:999; transition:0.3s all;top:0; left:0; color:#fff;position:fixed;} */
nav.computer, nav.mob{ width:100%; z-index:999; height:100px;transition:0.3s all;0; inset:0;color:#fff;position:fixed;}
nav.computer::after{display:block; content:''; opacity:0; visibility:hidden; width:100%; height:1px; position:absolute; left:0; top:100px; background:#ddd;}
nav.computer .header-wrap{/* max-width:1420px; */padding:0 50px;margin:0 auto; width:100%;display:flex;align-items:center;justify-content:space-between;}
nav.computer .menus, nav.mob .menus {display:flex;align-items:center;gap:25px;transition:0.3s all;}
nav.computer .menus .lang{width:35px;height:35px;}
nav.computer .menus li, nav.mob .menus li {transition:0.3s all; }
nav.computer h1, nav.mob h1 {transition:0.3s all; position:relative;height:50px;}
nav.computer .gnb {display:flex;transition:0.3s all;margin-top:0;}
nav .gnb > li{position:relative; font-size:18px;font-weight:550;display:flex;justify-content:center; align-items:center; height:100%; width:17rem; transition:all 0.3s ease;}
nav .gnb > li > a{position:relative;display:inline-flex;height:10rem;white-space:nowrap;align-items:center;padding:0 2.5rem;}
nav.computer .depth2 {display:none; position:absolute; left:50%; transform:translateX(-50%);}
nav.computer .gnb .depth2 {opacity:0; visibility:hidden; width:100%; padding:8px 0; min-height:35rem; position:absolute; top:11rem;z-index:9;}
nav.computer .gnb .depth2 > li {padding:8px 0; text-align:center;font-weight:500;}
nav.computer .gnb li:hover > .depth2 {display:block;}
nav.computer .gnb li .depth2 li a {color:rgba(0,0,0,0.7); line-height: 1rem; font-size: 15px; display:inline; width:auto; overflow:hidden; text-align:left;}
nav.computer .gnb .depth2 > li.on > a{color:#005eb8; font-weight:600;}
nav.computer .gnb li .depth2 li a::before {position:absolute; content:''; width: 0%;  bottom:3px; left: 50%; height: 2px;transition:0.3s all;}
nav.computer .gnb li .depth2 li a:hover::before { width: calc( 100% - 6rem ) ;left: 3rem;}

nav.computer_white .gnb > li a{color:#111;}
nav.computer_white .hamburger-menu-button-open,
nav.computer_white .hamburger-menu-button-open::before,
nav.computer_white .hamburger-menu-button-open::after{background:#111;}

/* ham_btn */
.hamburger-menu-button {width: 10px;height: 19px;display: block;position: relative;z-index: 100;background: transparent;border: 5px solid transparent;box-sizing: content-box;text-indent: 100%;color: #fff;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;right: 0;width: 20px;height: 3px;background: #fff;-webkit-transition: all 0.3s;transition: all 0.3s;}
.hamburger-menu-button-open::before, 
.hamburger-menu-button-open::after {right: 0;content: "";}
.hamburger-menu-button-open::before {top: 8px;width:24px;}
.hamburger-menu-button-open::after {bottom: 8px;width:30px;}
.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);
}

/* hover */
.computer.is_hover {height:36rem; background:#fff;z-index:9999;transition:all 0.5s ease-in-out; /* overflow:hidden; */ box-shadow:1px 1px 25px rgb(67 67 67 / 20%);}
.computer.is_hover::after{opacity:1; visibility:visible;display:block;}
.computer.is_hover .gnb .depth2 {display:block;}
.computer.is_hover .gnb > li{width:20rem;height:100%;transition:all 0.5s;}
.computer.is_hover .gnb > li.on{background:#223482;}
.computer.is_hover .gnb > li.on > a{color:#fff;}
.computer.is_hover .gnb > li.on .depth2 {display:block !important;opacity:1;visibility:visible;}
.computer.is_hover .gnb > li > a{color:#222;}
.computer.is_hover .gnb > li.open > a{color:#222;}
.computer.is_hover .gnb .depth2{opacity:1; visibility:visible;display:block;}
.computer.is_hover .gnb .depth2 > li a{color:rgba(0,0,0,0.7);}
.computer.is_hover .gnb .depth2 > li:hover > a{color:#223482; font-weight:600;}
.computer.is_hover h1 img{content:url('../../images/logo.png');}
.computer.is_hover .lang img{content:url('../../images/language.png');}
.computer.is_hover .hamburger-menu-button-open, 
.computer.is_hover .hamburger-menu-button-open::before, 
.computer.is_hover .hamburger-menu-button-open::after{background:#222;}

/* white */
nav.white{background:#fff;}
nav.white .gnb > li > a {color:#222;}
nav.white .gnb .depth2 > li a{color:#222;}
nav.white .header-wrap > h1 > a > img {content: url('../../images/logo.png');}
nav.white .header-wrap .menus .lang > img{content: url('../../images/language.png');margin-bottom:-4px;}
nav.white .hamburger-menu-button-open, 
nav.white .hamburger-menu-button-open::before, 
nav.white .hamburger-menu-button-open::after{background:#222;}

.lang{position:relative;display:inline-block;}
.lang:hover .lang-menu, .lang.active .lang-menu{display:block;}
.lang-menu{
  display:none;position:absolute; top:100%; left:50%; transform:translateX(-50%);
  background-color:#fff; border:1px solid #d2d2d2; padding:5px 10px;
  list-style:none;z-index:1000;min-width:70px;
}
.lang-menu li{display:block;padding:5px 10px;}
.lang-menu li a{display:block;color:#222;line-height:1.4;text-align:center;}
.lang-menu li:hover{box-shadow:inset 0 -2px 0 #223482;}

/* 사이드 메뉴 */
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;right:0;top:0;bottom:0;max-width:360px;width:100%;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.3s 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 30px; height:10rem; max-width:360px;width:100%; background:#fff; display:flex; align-items:center;}
/* #side_menu .side_top a,
#side_menu .side_top img{display:block; max-width:120px; height:60px;} */
#side_menu .side_top .btn_close{display:block; position:absolute; right:30px; top:0px; width:50px; height:10rem; cursor:pointer;text-indent:-9999px; background:url("../../images/side_close.png") no-repeat center center; z-index:20}
#side_menu .side_top .btn_close:hover{transform:rotate(180deg);}

/* 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:var(--main-color) !important; }
#gnb .depth2 li:hover a {color:var(--main-color);}
#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 .open > 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 p.title {font-size: 20px; font-weight: 700; height:35px; padding-top: 10px; margin-bottom: 10px;line-height:35px; }
#side_menu .gnb_wrap{padding:0 30px;margin-bottom:60px;}

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

/*footer*/
footer{padding:35px 60px 50px;background:#000;}
footer .foot_top{padding-bottom:20px;border-bottom:1px solid #3b3b3b;}
footer .foot_bot_left h5{color:#949494;font-size:2rem;font-weight:700;margin-bottom:15px;font-family:'SUIT';}
footer .foot_address{margin-top:15px;}
footer .foot_address li{font-size:1.8rem;color:#949494;font-weight:400;line-height:34px;font-family:'SUIT';}
footer .foot_right li{text-align:end;color:#fff;font-size:28px;font-weight:600;line-height:42px;}
footer .foot_bot{padding-top:55px;display:flex;justify-content:space-between;}
footer .privacy_wrap{display:flex;align-items:center;} 
footer .privacy_wrap li{color:#fff;font-weight:400;font-size:16px;padding-left:10px;font-family:'SUIT';}
footer .privacy_wrap li.on{font-weight:600;padding-right:10px;padding-left:0;border-right:1px solid #fff;}
footer .copyright p{color:#949494;font-size:14px;font-family:'SUIT';margin-top:28px;}

/* top_btn */
.top_btn{position:absolute; z-index:9; top:100px; right:0px; 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;}



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

}


@media screen and (max-width: 1400px){ 
	 header .head_gnb .dep1 {padding-left: 140px; } 
    .sect-wrap{width:100%; padding:0 10px;}
	.computer.is_hover .gnb > li{width:17rem;}
}

/*respond*/
@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;}
}

@media all and (max-width:1200px ) {
	.computer .gnb {display:block;}
	.half > .col {width: 100%; text-align:center;}
	.quarter > li {width:50%;}
	footer {padding: 20px 10px;}
	footer span.address {width:100%; font-size:12px;}
	.slick-next {right: 3rem !important;}
	.slick-prev {left: 3rem !important;}
	.menu-f {font-size:12px;}
}
@media all and (max-width: 1180px ) { 
	#side_menu .side_top {padding:0 3rem;}
	/* .gnb{display:none;} */
	#side_menu .side_top .hd_ham-close{right:20px;}

	nav .gnb > li{width:15rem;}
	.computer.is_hover .gnb > li{width:15rem;}
	nav .gnb > li > a{padding:0 1.5rem;}

	.top_btn{width:60px; height:60px;}
	.top_btn span{font-size:1.4rem;}
}
@media all and (max-width:1024px ) {
	.computer .gnb {display:none !important;}
	nav.computer .header-wrap{height:100px;}
	.computer.is_hover::after{display:none;}
	.computer .gnb.white{display:none;}
	nav.computer .gnb{display:none;}
	.computer.is_hover{/* display:none; */height:auto;background:transparent;}
	nav.computer .header-wrap h1 a{display:flex;flex-direction:column;align-items:center;justify-content:center;}
}
@media screen and (max-width:980px){ 
	nav .gnb > li{width:12rem;}
	.computer.is_hover .gnb > li{width:15rem;}

	footer .foot_bot{padding-top:40px;}
	footer .privacy_wrap li{font-size:14px;}
	footer .foot_right ul li{margin-right:0;font-size:22px;line-height:36px;}
	footer .foot_t-left{width:100%;}
	footer .foot_left address{flex-direction:column;line-height:1.5;}
	footer .foot_left ul li{font-size:16px;}
	footer .foot_address li{line-height:30px;}

	.top_btn{top:210px;}
}
@media screen and (max-width:880px){ 
	
} 
@media screen and (max-width:820px){ 
	footer .foot_top{flex-direction:column; align-items:center; gap:50px;}
	footer .foot_left{gap:20px;}
	footer .foot_right{margin-top:15px;}
	footer .foot_right ul li{text-align:start;font-size:18px;line-height:34px;}
	footer .foot_right li{font-size:22px;line-height:36px;margin-right:0;}
	footer .foot_bot{flex-direction:column;}
}

@media screen and (max-width:768px){ 
	#side_menu .side_top h1{width:200px;}
	#side_menu .side_top h1 img{width:100%;height:100%;}

	footer .sect-wrap{flex-direction:column;}
	footer .privacy_wrap li{font-size:13px;}
	footer .foot_right .foot_logo{margin-top:25px;}
	footer .foot_bot_left h5{font-size:1.8rem;margin-bottom:10px;}
	footer .foot_address{margin-top:10px;}
	footer .foot_left ul li{font-size:14px;}
	footer .footer_info{gap:15px;}
	footer .footer_info span{font-size:13px;white-space:nowrap;}
	footer .copyright{font-size:12px;}
}
@media screen and (max-width:600px){ 
	.hamburger-menu-button{margin-left:12px;}
	#side_menu .side_top{padding:0 2rem;}
	#side_menu .side_top .btn_close{right:15px;}
	#side_menu .gnb_wrap{padding:0 20px;}
	#gnb > li > a{font-size:15px;}

	footer .footer_main_bottom > div{flex-direction:column;gap:10px;padding:15px 0 15px;}
	footer .foot_left address{margin-top:12px;}
	footer .foot_left address p{font-size:15px;}
	footer .foot_left address .add_tel{margin-top:4px;}
	footer .foot_left address{margin-top:12px;}
	footer .footer_main_bottom{padding-top:45px;}
	
}
@media screen and (max-width:500px){ 
	.pc_space{display:inline;}
	.sect-wrap{padding:0 15px;}
 
	#side_menu .side_top a{width:150px;}
	#side_menu .side_top a{height:48px;}
	#side_menu .side_top{padding:0 1.5rem;}
	#side_menu .side_top .hd_ham-close{right:10px;}
	
	#header .language{right:50%;}
	#header .hd_menu{right:30%;}
	nav.white .header-wrap > h1 > a > img{width:200px;}
	nav.computer .header-wrap{padding:0 1.5rem;}
	nav.computer .menus, nav.mob .menus{gap:8px;}

	footer .foot_left address p{font-size:13px;}
	footer .foot_address li{line-height:22px;margin-bottom:5px;}
}

@media screen and (max-width:450px){ 
	#header .language{right:30%;}
	#header .hd_menu{right:10%;}
	#side_menu{max-width:80vw;}

}

@media screen and (max-width:390px){ 
	#side_menu .side_top a{width:190px;}
	#side_menu .side_top a{height:48px;}

}

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

}