@charset "utf-8";
/* base */

/* font */
@font-face {
    font-family: 'Frutiger';
    src:url('/font/Frutiger.ttf') format('woff'),
        url('/font/Frutiger.ttf') format('woff2');
        font-weight: 400;
} 
@font-face {
    font-family: 'Frutiger';
    src:url('/font/Frutiger_bold.ttf') format('woff'),
        url('/font/Frutiger_bold.ttf') format('woff2');
        font-weight: 600;
} 

@font-face{font-family: 'pretendard', sans-serif;}

.bai {font-family: 'Frutiger', san-serif;letter-spacing:0;}
.bai_m {font-family: 'Frutiger', san-serif;letter-spacing:0;font-weight: bold;}


html {word-break:keep-all;}
html,body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0; padding:0; margin-block-start:0; font-family:'pretendard', 'Malgun Gothic', '맑은 고딕', "돋움", san-serif; font-weight: 400;}
body{font-family:'pretendard', 'Malgun Gothic', '맑은 고딕', "돋움", sans-serif; font-size:16px; line-height:1.4; color:#777; letter-spacing:0px; -webkit-text-size-adjust:none; font-weight: 400; transition: all .3s;}
fieldset,img,button{border:0;}
img,input,button{vertical-align:top;}

table{border-collapse:collapse;}
address,em{font-style:normal;}
ol,ul{list-style:none;}
hr{border:none;}
a{text-decoration:none; color: #777;transition: all .3s;}
a:hover, a:active, a:focus{text-decoration:none; color: #333;}
sup{font-size: 1rem !important;}
legend{position:absolute; left:-9999px; top:0}
caption{overflow:hidden; width:0; height:0; font-size:0; line-height:0;}
button{background:none; cursor:pointer;}
button::-moz-focus-inner{padding:0; border:0;}
h1,h2,h3,h4,h5,h6{font-family: 'pretendard';font-weight: normal;}
input[type=button],
input[type=submit],
button{/* -webkit-appearance:none;cursor:pointer; */}
img{max-width:100%;}

*:focus {}
::-moz-selection {background: #022661;color: #fff;}
::selection {background: #022661;color: #fff;}

input {font-family:'pretendard', 'Malgun Gothic', san-serif; vertical-align: middle;border: #ccc 1px solid;}
button { border-radius:0; }
input[type='checkbox'], input[type='radio'] {width:20px; height: 25px;line-height: 25px;text-align: left; display: inline-block; position: relative; top:-1px; }
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color:#999; }
input::-moz-placeholder, textarea::-moz-placeholder { color:#999; opacity:1; }
input:-ms-input-placeholder, textarea:-ms-input-placeholder { color:#999 !important; }

input,
textarea {
/*    -webkit-appearance:none; */
   -webkit-border-radius: 0;
}
.input{border: #e1e1e1 1px solid; vertical-align: middle;font-size: 1rem; height:3.5rem; padding:10px; box-sizing: border-box; }
textarea {width: 100%; padding:30px; font-size:1rem; line-height: 1.4; border:1px solid #e1e1e1; box-sizing: border-box; }



.frm{display:inline-block !important;position:relative}
.frm label{display:inline;position:relative;font-size:1rem; line-height: 1.3; padding-left:35px;text-transform:uppercase; color: #000; font-weight: normal; margin-right:10px;cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;}
.frm label:before {content:'';display:block;position:absolute;left:0;top:-3px;width:26px;height:26px;background:url("../images/common/spr_form.png") no-repeat;}
.frm input[type=checkbox]:focus+label, .frm input[type=radio]:focus+label {outline:1px dotted #e0e0e0}
.frm input[type=checkbox], .frm input[type=radio]{position:absolute;left:12px;top:10px;width:1px;height:1px;opacity:0}
.frm input[type=checkbox]+label:before{background-position:0 -13px}
.frm input[type=checkbox]:checked+label:before{background-position:-26px -13px}
.frm input[type=radio]+label:before{background-position:-52px -13px}
.frm input[type=radio]:checked+label:before{background-position:-78px -13px}

.frmList{margin-top:-8px}
.frmList > li{margin:8px 0 0 3px}
.frmList .frmCheck, .frmList .frmRadio{display:inline-block;position:relative}
.frmList .frmCheck label, .frmList .frmRadio label{display:inline-block;position:relative;width:165px;max-width:165px;border:1px solid #ccc;z-index:2;box-sizing:border-box;color:#666;background:#fff;padding:9px 35px 11px 15px;font-size:16px;}
.frmList .frmCheck label:before{content:'';display:block;position:absolute;right:12px;top:18px;width:18px;height:13px;background:url("../images/common/spr_form.png") no-repeat 0 0}
.frmList .frmCheck input[type=checkbox], .frmList .frmRadio input[type=radio] {position:absolute;right:0; top:0;width:1px;height:1px;border-color:transparent !important;z-index:1;  overflow: hidden; clip:rect(0,0,0,0);}
.frmList .frmCheck input[type=checkbox]:checked+label, .frmList .frmRadio input[type=radio]:checked+label{border:1px solid #000;color:#000;background:#f9f9f9}
.frmList .frmCheck input[type=checkbox]:checked+label:before{background-position:-18px 0}
.frmList .frmCheck input[type=checkbox]:disabled+label:before{background-position:-36px 0}
.frmList .frmCheck input[type=checkbox]:disabled+label{color:#bfbfbf}
.frmList .frmRadio label{width:219px;max-width:219px;padding:11px 15px 13px;text-align:center}



/* 파일 업로드 스타일 */
.filebox input[type="file"] {
	position: absolute;
	width: 0;
	height: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	margin-bottom: 3px;
}

.filebox label {
	display: inline-block;
	padding: 13px 20px;
	color: #333;
	vertical-align: middle;
	background-color: #fdfdfd;
	cursor: pointer;
	border: 1px solid #e1e1e1;
	border-radius: 5px;
}

/* named upload */
.filebox .upload-name {
	display: inline-block;
  height: 50px;
  font-size:1rem; 
  padding: 0 10px;
	vertical-align: middle;
	background-color: #f5f5f5;
  border: 1px solid #e1e1e1;
  width:73%;
}



.txc-image{max-width: 100%;}

/** placeholder *************************************************/
*::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #c7c7c7;
}
*::-moz-placeholder { /* Firefox 19+ */
  color: #c7c7c7;
}
*:-ms-input-placeholder { /* IE 10+ */
  color: #c7c7c7;
}
*:-moz-placeholder { /* Firefox 18- */
  color: #c7c7c7;
}


/*-------------------------------- Skip Menu --------------------------------*/
.skipMenu {position:absolute; top:0px; left:0; width:100%; z-index:99;}
.skipMenu a{height:1px;font-size: 0; color:#eee; display:block;}
.skipMenu a:focus, 
.skipMenu a:active {height:auto; padding:7px 0 10px; background-color:#f0f0f0; color:#333; text-decoration:none; font-size: 15px; font-weight:bold; text-align:center; _float:left; display: block;}

@media (max-width:600px) {
.skipMenu {display: none;}

}


/*---------------------------------- COMMON ----------------------------------*/
.section{width:100%; position: relative; box-sizing: border-box;display: block;}
.section.grid2{display: grid; grid-template-columns: repeat(2, 45%); grid-gap: 10%;}
.container{width:100%; max-width: 1400px; margin-left: auto; margin-right: auto;position: relative; display: block;box-sizing: border-box;}
#contents{width:100%; min-height: 800px; position: relative;box-sizing: border-box;display: block;}


/*---------------------------------- Button----------------------------------*/

.btn {font-family: 'pretendard', san-serif; font-weight: 400; font-size: 16px;	text-transform: uppercase; position: relative;border: none; padding: 15px 40px; min-width: 150px; display: block;	-webkit-transition: -webkit-transform .5s, all .5s;	-moz-transition: -moz-transform .5s, all .5s;	transition:all .5s, transform .5s;}
.btn.text-left {text-align: left}
.btn:after {
	opacity: 0;
	pointer-events: none;
	position: absolute;
	width: 100%;
	height: 100%;
	content: '';
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	padding: 0;
	z-index: 1;
}
.btn:hover {text-decoration: none; }
.btn:hover:after {opacity: 1}
.btn.btn-dark {background: #333;	color: #fff}
.btn.btn-dark:hover {	background: #555 !important;}
.btn.btn-inline {	display: inline-block;	vertical-align: top}
.btn.btn-grey {	background: #757575;	color: #fff;}
.btn.btn-grey:hover {	background: #424242; color: #fff;}
.btn.btn-grey.no-border:after {	border: none}
.btn.btn-light {background: #f1f1f1;color: #666;}
.btn.btn-light:hover {	background:#ddd; color: #666;}
.btn.btn-border1 {background:transparent;color: #fff; border:1px solid #fff; padding-right:80px; background: url(../images/main/main_slide_arrow.png) no-repeat 85% center;}
.btn.btn-border1:hover {	border:1px solid #fff;color: #fff;}

.btn.btn-border2 {background:transparent;color: #333; border:1px solid #333; padding-right:80px; background: url(../images/main/main_sec3_arrow.png) no-repeat 85% center;}
.btn.btn-border2:hover {	border:1px solid #333;color: #333;}

.btn.btn-white {background: transparent;	border: 1px solid #fff; color: #fff; font-weight: 600;}
.btn.btn-white:after {border: solid 2px #fff}
.btn.btn-white.no-border:after {	border: none}
.btn.btn-green {background: #022661;	color: #fff}
.btn.btn-green:hover {background: #007ab5 !important;}

button:focus {}
.btn-center{margin:0 auto; text-align: center}
.btn.btn-inline{display: inline-block;}
.btn-full{width:100%;}

.btn-mini{font-size: 14px;text-transform: uppercase; font-weight: normal; background: #f1f1f1; color: #666!important;	text-align: center;	padding:15px 20px;	text-decoration: none;position: relative; display: inline-block; vertical-align: middle; border-radius: 10px;}
.btn-mini:hover {background: #e7e7e7 !important;}

@media screen and (max-width: 768px) {
.btn{padding:15px 10px; font-size:14px; }
}


.ico_down{background:url('../images/common/ico_down.png')no-repeat; position: relative; content: ''; display: inline-block; width:28px; height: 17px;margin-left:5px; vertical-align: middle;}
.ico_arrow{background:url('../images/service/ico_arrow.png')no-repeat; position: relative; content: ''; display: inline-block; width:30px; height: 10px;margin-left:10px; margin-bottom: 3px; vertical-align: middle;}

.ico_dropbox{background:url('../images/common/ico_dropbox.png')no-repeat; position: relative; content: ''; display: inline-block; width:28px; height: 26px;margin-left:5px;margin-bottom: -5px}

.btnArea{width:100%; max-width: 1500px; min-height: 45px; margin:0 auto; padding: 20px 0; display: block; clear: both; position: relative;}
.btnArea.right button{float: right; margin-right:10px;}

.btn-flex{display: flex;align-items: center; justify-content:center;padding: 30px 0 50px;}
.btn-flex button{margin:0 3px;}

@media screen and (max-width: 768px) {
.btn-flex{padding:20px 0 40px;}
.btn-flex.btn3 button{min-width: 30%;}
}


.no_bottom{padding-bottom: 0 !important;}
.nopd{padding:0;}
.no_mb{margin-bottom: 0px !important;}
.gray_wrap{background: #fbfbfb;}
.pd100{padding:100px 0 !important;}

.block{display: block !important;}
.inline{display: inline !important}
.mt100{margin-top:100px}
.mt90{margin-top:90px}
.mt80{margin-top:80px}
.mt70{margin-top:70px}
.mt60{margin-top:60px}
.mt50{margin-top:50px}
.mt40{margin-top:40px}
.mt30{margin-top:30px}
.mt20{margin-top:20px}
.mt10{margin-top:10px}
.mt0{margin-top:0px}
.mb60{margin-bottom:60px;}
.pt100{padding-top: 100px}
.pt90{padding-top: 90px}
.pt80{padding-top: 80px}
.pt70{padding-top: 70px}
.pt60{padding-top: 60px}
.pt50{padding-top: 50px}
.pt40{padding-top: 40px}
.pt30{padding-top: 30px}
.pt20{padding-top: 20px}
.pt10{padding-top: 10px}
.pl10{padding-left: 10px}
.pl20{padding-left: 20px}
.pl30{padding-left: 30px}
.pl50{padding-left: 50px}
.pl90{padding-left: 90px}
.ml20{margin-left: 20px}
.ml30{margin-left: 30px}
.ml50{margin-left: 50px}
.ml60{margin-left: 60px}
.ml70{margin-left: 70px}
.ml80{margin-left: 80px}
.ml90{margin-left: 90px}
.f16{font-size: 16px;}

.c_white{color: #fff !important;}
.c_black{color: #000 !important;}
.c_red{color: #cb0007 !important;}
.c_light{color: #aaa !important;}
.c_gray{color: #c6c6c6 !important;}
.line_h{line-height:1.6;}


.ellip {max-height:24px;/* height:24px; */display:block;display:-webkit-box;-webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; white-space: nowrap; }
.blind {position:absolute; top:0; left:0;width:0px; height:0px; overflow:hidden; visibility:hidden; font-size:0; line-height:0;}
.bold{font-weight: bold; font-weight: 600;}

/* slick Slider */
.slick-slider { position: relative; display: block; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; }
.slick-list:focus { }
.slick-list.dragging { cursor: pointer;}
.slick-slider .slick-track,
.slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.slick-track { position: relative; top: 0; left: 0; display: block; }
.slick-track:before,
.slick-track:after { display: table; content: ''; }
.slick-track:after { clear: both; }
.slick-loading .slick-track { visibility: hidden; }
.slick-slide { display: none; float: left; height: 100%; min-height: 1px; }
[dir='rtl'] .slick-slide { float: right; }
.slick-slide img { display: block; }
.slick-slide.slick-loading img { display: none; }
.slick-slide.dragging img { pointer-events: none; }
.slick-initialized .slick-slide { display: block; }
.slick-loading .slick-slide { visibility: hidden; }
.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; }
.slick-arrow.slick-hidden { display: none; }


/* 슬라이드 메뉴 내부 스크롤 */
.scroller { height:100%; width:100%; position:relative; overflow:hidden; box-sizing:border-box; -webkit-box-sizing:border-box; }
.ftscroller_container {height: 90%; box-sizing: border-box;}


select {
  background-color: rgba(255, 255, 255, 1);
  background:url('../images/common/lnb_arr.png') no-repeat 93%;
  width: 100%;
  padding:3px 10px;
  border:1px solid #e7e7e7;
  border-radius: 0;
  height: 3.5rem;
  vertical-align:middle;
  margin-right: 5px;
  font-size: 16px;
  position: relative;
	-webkit-appearance: none;  /* 네이티브 외형 감추기 */
	-moz-appearance: none;
	appearance: none;
	box-sizing: border-box;
}

@media screen and (max-width: 1000px) {
select {font-size: 1rem;}
}


/* dropdownlist */
.dropLst { display:inline-block; /* position:relative; */ vertical-align:middle; color:#666; }
.dropLst .txt { position:relative; display:block; text-align:left; text-decoration:none; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; height:40px; padding:0 40px 0 10px; box-sizing:border-box; color:#333; }
.dropLst .hidradio { opacity:0; filter:alpha(opacity=0); position:absolute; z-index:-1; top:5px; left:5px; }
.dropLst .dlst { display:none; position:absolute; top:100%; z-index:9; min-width:100%; box-shadow:1px 1px 1px rgba(0,0,0,.2); -webkit-box-shadow:1px 1px 1px rgba(0,0,0,.2); }
.dropLst.bottom .dlst { top:auto; bottom:100%; }
.dropLst .dlst.aright { right:0; }
.dropLst ul { margin-top:-1px; background-color:#fff; max-height:300px; padding:0; overflow-x:hidden; overflow-y:auto; box-sizing:border-box; -webkit-box-sizing:border-box; }
.dropLst ul > li { position:relative; }
.dropLst ul > li > label { display:block; position:relative; cursor:pointer; }
.dropLst ul > li > label > span { display:block; }
.dropLst ul > li > a:hover, .dropLst ul > li > label:hover > span, .dropLst ul > li > label.hover > span { /* background-color:#f3f3f3; */ }
.dropLst .txt, .dropLst ul { border:1px solid #d7d7d7; }
.dropLst .txt, .dropLst li span, .dropLst li a { line-height:38px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dropLst li span, .dropLst li a { padding:0 10px; }
.dropLst li a.selected, .dropLst li a.on, .dropLst li label.on span {/*font-weight:bold;*/}
.dropLst li span, .dropLst li a { display:block; }


.clearfix:after {content: ""; display: block; clear: both;}
.clearfix > li {display: block; float:left;}
/*.isDisabled {color: currentColor; cursor: not-allowed; text-decoration: none;}*/


/* image scale */
.scale{transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transition: all 0.5s ease-in-out; }
 .scale:hover {
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
} 


/*--------------------------- 	NAVIGATION  ---------------------------*/


/* header
----------------------------------------------------------------------*/

/* header */
.header {position: fixed; width: 100%; height: 100px; background: transparent; box-sizing: border-box; z-index: 11; transition: all .3s;transition-duration: .3s; }

.header > .gnb_web_area {position: relative; top:0; left:0; width: 100%; height: 100px; margin:0 auto;padding:0 100px; box-sizing: border-box; overflow: hidden; background: transparent; margin-left:auto; margin-right:auto;	-webkit-transition:height 0.2s cubic-bezier(0, 0, 0.25, 1), visibility 0s cubic-bezier(0, 0, 0.25, 1); transition:height 0.2s cubic-bezier(0, 0, 0.25, 1), visibility 0s cubic-bezier(0, 0, 0.25, 1), transform 0.5s cubic-bezier(0, 0, 0.25, 1);}

.header > .gnb_web_area > .gnb_bg {position: absolute; top:0; left:0; width: 100%; height: 100px; -webkit-transition:height 0.3s cubic-bezier(0, 0, 0.25, 1), visibility 0s cubic-bezier(0, 0, 0.25, 1); transition:height 0.3s cubic-bezier(0, 0, 0.25, 1), visibility 0s cubic-bezier(0, 0, 0.25, 1);}
.header > .gnb_web_area:before {content: ""; z-index: 2; opacity:0.2; }

.header .gnb_web_area .gnb_box {width:100%; height: 100px; margin:0 auto; position: relative; border-bottom: 2px solid #fff; box-sizing: border-box;display:flex; align-items: stretch;justify-content: space-between;}
.header > .gnb_web_area .gnb_box ul li a {color:#fff; }
.header > .gnb_web_area > .gnb_box > h1 {position: relative; display:flex; align-items: center; justify-content: flex-start; width:20%; height: 100px;}
.header > .gnb_web_area > .gnb_box > h1 > .logo { min-width: 200px; height: 50px; background:url("../images/common/logo.png") no-repeat; background-size: auto 50px;}
.header > .gnb_web_area > .gnb_box > h1 > .logo em {position: absolute; top:0; left:0; width: 0; height: 0; overflow: hidden; opacity: 0;}
.header > .gnb_web_area > .gnb_box > .gnb { width:100%; max-width: 900px; height: 80px; display:flex; margin-top:20px;}
.header > .gnb_web_area > .gnb_box .gnb ul.dep1 {position:relative; margin:0 auto; text-align: center; display:flex; align-items: flex-start;justify-content: space-around; width:100%;}
.header > .gnb_web_area > .gnb_box .gnb ul.dep1 > li {position: relative; line-height: 80px; width:auto; box-sizing: border-box; }
.header > .gnb_web_area > .gnb_box .gnb ul.dep1 > li > a {display: block; letter-spacing: 0; font-family: 'Frutiger', san-serif;letter-spacing:0; font-size:19px; font-weight: 400; color:#fff; line-height: 80px; text-align: center; box-sizing: border-box; padding:0;}
.header > .gnb_web_area > .gnb_box .gnb ul.dep1 > li > a:hover,
.header > .gnb_web_area > .gnb_box .gnb ul.dep1 > li > a.hover,
.header > .gnb_web_area > .gnb_box .gnb ul.dep1 > li > a.active {font-weight: 500;}
.header > .gnb_web_area > .gnb_box .gnb ul.dep1 > li > a.active:after{width:100%; height: 3px; background: #fff; display: block; content: ''; position: absolute; top:75px; }

.header > .gnb_web_area.active {height: 450px; background: rgba(2,37,98,0.82); z-index: 13; -webkit-transition:height 0.5s cubic-bezier(0, 0, 0.25, 1), visibility 0.2s cubic-bezier(0, 0, 0.25, 1); transition:height 0.2s cubic-bezier(0, 0, 0.25, 1), visibility 0.5s cubic-bezier(0, 0, 0.25, 1), transform 0.2s cubic-bezier(0, 0, 0.25, 1);box-shadow:20px 20px 20px rgba(0,0,0,.2);}
.header > .gnb_web_area.active > .gnb_bg {top:0; -webkit-transition:height 0.5s cubic-bezier(0, 0, 0.25, 1), visibility 0.5s cubic-bezier(0, 0, 0.25, 1); transition:height 0.5s cubic-bezier(0, 0, 0.25, 1), visibility 0.5s cubic-bezier(0, 0, 0.25, 1); }
/* gnb 배경 이미지 추가 */
.header > .gnb_web_area > .gnb_box > .gnb_img{display: none;}
.header > .gnb_web_area.active > .gnb_box > .gnb_img{background:url(../images/common/gnb_bg.png) no-repeat; position: absolute; bottom:-500px; left:110px; z-index: -1; width:400px; height: 450px; display: block; content: ''; padding-left:170px; padding-top:100px; box-sizing: border-box; }
.header > .gnb_web_area.active > .gnb_box > .gnb_img i{width:226px; height: 50px; background:url(../images/common/gnb_bg_logo.png)no-repeat center; display: block; content: '';font-size: 0; margin-bottom: 20px;}
.header > .gnb_web_area.active > .gnb_box > .gnb_img p{font-size: 20px; color: #fff; text-align: center;}

@media screen and (max-width: 1600px) {
.header > .gnb_web_area.active > .gnb_box > .gnb_img{position: absolute; bottom:-500px; left:0; width:400px; height: 450px;padding-left:100px; }
}

@media screen and (max-width: 1400px) {
.header > .gnb_web_area.active > .gnb_box > .gnb_img{width:300px; background-size: 160px auto;padding-left:50px;}
.header > .gnb_web_area.active > .gnb_box > .gnb_img i{width:180px; height: 50px; background-size:160px auto; margin:0 auto 10px;}
.header > .gnb_web_area.active > .gnb_box > .gnb_img p{font-size: 16px;}
}

@media screen and (max-width: 1300px) {
.header > .gnb_web_area.active > .gnb_box > .gnb_img i{display: none;}
.header > .gnb_web_area.active > .gnb_box > .gnb_img p{display: none;}
}

@media screen and (max-width: 1000px) {
.header > .gnb_web_area.active > .gnb_box > .gnb_img{display: none;}
}

.header > .gnb_web_area.active > .gnb_box > h1 > .logo {background-image: url("../images/common/logo.png"); background-size: auto 50px;}
.header > .gnb_web_area.active > .gnb_box > .gnb ul.dep1 > li > a {color: #fff}
.header > .gnb_web_area.active > .gnb_box > .gnb ul.dep1 > li:after {background-color: #d1d1d1;}
.header > .gnb_web_area.active > .gnb_box .gnb ul.dep1 > li > a:hover,
.header > .gnb_web_area.active > .gnb_box .gnb ul.dep1 > li > a.hover,
.header > .gnb_web_area.active > .gnb_box .gnb ul.dep1 > li > a.active {color:#fff;}

.header > .gnb_web_area > .gnb_box > .gnb ul.dep2 {position:relative; padding-top:30px;}
.header > .gnb_web_area > .gnb_box > .gnb ul.dep2 > li {position: relative; padding:8px 0;}
.header > .gnb_web_area > .gnb_box > .gnb ul.dep2 > li > a {display: block; font-size:16px; font-weight: normal; color:#333; line-height: 1.3; box-sizing: border-box;}
.header > .gnb_web_area.active > .gnb_box > .gnb ul.dep2 > li > a{color: #a3acc4;}
.header > .gnb_web_area > .gnb_box > .gnb ul.dep2 > li > a:hover,
.header > .gnb_web_area > .gnb_box > .gnb ul.dep2 > li > a.hover,
.header > .gnb_web_area > .gnb_box > .gnb ul.dep2 > li > a.active {color:#fff;}

.header > .gnb_web_area > .gnb_box > .gnb ul.dep3 {position:relative; padding-bottom:9px;}
.header > .gnb_web_area > .gnb_box > .gnb ul.dep3 > li {position: relative; line-height: 24px;}
.header > .gnb_web_area > .gnb_box > .gnb ul.dep3 > li > a {display: block; font-size:14px; color:#fff; padding:3px 0; line-height: 18px; box-sizing: border-box;}
.header > .gnb_web_area > .gnb_box > .gnb ul.dep3 > li > a:hover,
.header > .gnb_web_area > .gnb_box > .gnb ul.dep3 > li > a.hover,
.header > .gnb_web_area > .gnb_box > .gnb ul.dep3 > li > a.active {color:#000; text-decoration:underline;}

.header > .gnb_web_area > .gnb_box > .gnb > .right_zone {position: relative; width:120px; height: 80px;}
.header > .gnb_web_area > .gnb_box > .gnb > .right_zone > .info {height: 100px; display: flex; justify-contetn:flex-end; }
.header > .gnb_web_area > .gnb_box > .gnb > .right_zone > .info ul {position:relative; margin:0 ; display: flex;}
.header > .gnb_web_area > .gnb_box > .gnb > .right_zone > .info ul li {position: relative;width:60px; height: 80px; line-height: 100px;}
.header > .gnb_web_area > .gnb_box > .gnb > .right_zone > .info ul li a {position: relative; display: block; padding-top:0; text-align: center; width:100%; height: 100%;}
.header > .gnb_web_area .gnb_box .gnb .right_zone .info ul li.btn01 a{background:url('../images/common/gnb_allmenu.png') no-repeat right; display: block;  content: '';font-size:0; }
.header > .gnb_web_area .gnb_box .gnb .right_zone .info ul li.btn_login a{background:url('../images/common/gnb_login.png') no-repeat right;background-size: auto 30px; display: block;  content: '';font-size:0; }
.header > .gnb_web_area .gnb_box .gnb .right_zone .info ul li.btn_logout a{background:url('../images/common/gnb_logout.png') no-repeat right;background-size: auto 30px; display: block;  content: '';font-size:0; }



/* 모바일 header */
.header > .gnb_mobile_area {display: none; height: 70px; width:100%;}
.header > .gnb_mobile_area > h1 {position: absolute; top:0; left:30px; display: block; width:200px; height: 70px;}
.header > .gnb_mobile_area > h1 > .logo {display: block; width: 200px; height: 70px; background: url("../images/common/logo.png") no-repeat left; background-size: auto 40px; }
.header > .gnb_mobile_area > h1 > .logo em {position: absolute; top:0; left:0; width: 0; height: 0; overflow: hidden; opacity: 0;}
.header > .gnb_mobile_area > a.btn_gnb {position: absolute; top:15px; right:30px; display: block; width: 37px; height:40px; background:url('../images/common/gnb_allmenu.png') no-repeat right center; }
.header > .gnb_mobile_area > a.btn_gnb em {position: absolute; top:0; left:0; width: 0; height: 0; overflow: hidden; opacity: 0;}

/* 스크롤 픽스 header 전용 */
#wrap #header.nav_black{ width:100%; height: 100px; background: rgba(255,255,255,0.9);transition: background .3s;}
#wrap #header.nav_black > .gnb_web_area.active {height: 450px; background: rgba(255,255,255,0.9); }
/* 스크롤 gnb 배경 이미지 추가 */
#wrap #header.nav_black > .gnb_web_area.active > .gnb_box > .gnb_img{background:url(../images/common/gnb_bg2.png) no-repeat; }
#wrap #header.nav_black > .gnb_web_area.active > .gnb_box > .gnb_img i{ background:url(../images/common/gnb_bg2_logo.png)no-repeat;}
#wrap #header.nav_black > .gnb_web_area.active > .gnb_box > .gnb_img p{color: #333;}

@media screen and (max-width: 1600px) {
#wrap #header.nav_black > .gnb_web_area.active > .gnb_box > .gnb_img{position: absolute; bottom:-500px; left:0; width:400px; height: 450px;padding-left:100px; }
}

@media screen and (max-width: 1400px) {
#wrap #header.nav_black > .gnb_web_area.active > .gnb_box > .gnb_img{width:300px; background-size: 160px auto;padding-left:50px;}
#wrap #header.nav_black > .gnb_web_area.active > .gnb_box > .gnb_img i{width:180px; height: 50px; background-size:160px auto; margin:0 auto 10px;}
#wrap #header.nav_black > .gnb_web_area.active > .gnb_box > .gnb_img p{font-size: 16px;}
}

@media screen and (max-width: 1300px) {
#wrap #header.nav_black > .gnb_web_area.active > .gnb_box > .gnb_img i{display: none;}
#wrap #header.nav_black > .gnb_web_area.active > .gnb_box > .gnb_img p{display: none;}
}

@media screen and (max-width: 1000px) {
#wrap #header.nav_black > .gnb_web_area.active > .gnb_box > .gnb_img{display: none;}
}


#wrap #header.nav_black > .gnb_web_area .gnb_box .gnb .right_zone .info ul li.btn_login a{background:url('../images/common/gnb_login_bl.png') no-repeat right;background-size: auto 30px; display: block;  content: '';font-size:0; }
#wrap #header.nav_black > .gnb_web_area .gnb_box .gnb .right_zone .info ul li.btn_logout a{background:url('../images/common/gnb_logout_bl.png') no-repeat right;background-size: auto 30px; display: block;  content: '';font-size:0; }


/* fullpage 섹션별 header 2 */
#header.nav_black > .gnb_web_area > .gnb_box{border-bottom: 2px solid #666}
#header.nav_black > .gnb_web_area > .gnb_box > h1 > .logo {position: absolute;   height: 50px; background:url("../images/common/logo2.png") no-repeat; background-size: auto 50px;}

#header.nav_black > .gnb_web_area > .gnb_box .gnb ul.dep1 > li > a {display: block; letter-spacing: 0; font-size:19px; font-weight: 500; color:#333; }
#header.nav_black > .gnb_web_area > .gnb_box > .gnb ul.dep2 > li > a{color: #666;}
#header.nav_black > .gnb_web_area > .gnb_box > .gnb ul.dep2 > li > a.active {color:#fff;}

#header.nav_black > .gnb_web_area .gnb_box .gnb .right_zone .info ul li.btn01 a{background:url('../images/common/gnb_allmenu2.png') no-repeat right; display: block; content: '';}

#header.nav_black > .gnb_web_area > .gnb_box .gnb ul.dep1 > li > a:hover,
#header.nav_black > .gnb_web_area > .gnb_box .gnb ul.dep1 > li > a.hover,
#header.nav_black > .gnb_web_area > .gnb_box .gnb ul.dep1 > li > a.active {color:#022661;}

#header.nav_black > .gnb_web_area > .gnb_box > .gnb ul.dep2 > li > a:hover,
#header.nav_black > .gnb_web_area > .gnb_box > .gnb ul.dep2 > li > a.hover,
#header.nav_black > .gnb_web_area > .gnb_box > .gnb ul.dep2 > li > a.active {color:#022661;}

@media all and (max-width:1600px) {
.header > .gnb_web_area {margin:0 auto;padding:0 5%;}
.header > .gnb_web_area > .gnb_box .gnb ul.dep1 > li > a { font-size:18px; }
#header.nav_black > .gnb_web_area > .gnb_box .gnb ul.dep1 > li > a { font-size:18px; }

}
/* header tablet */
@media all and (max-width:1200px) {
.header {position: fixed; width: 100%; height: 80px}
.header > .gnb_web_area{height: 80px;}
.header > .gnb_web_area > .gnb_bg{height: 80px;}
.header .gnb_web_area .gnb_box {height: 80px;}
.header > .gnb_web_area > .gnb_box > .gnb{margin-top:0;}
#header.nav_black {position: fixed; width: 100%; height: 80px}
#wrap #header.nav_black{height: 80px;}

.header > .gnb_web_area > .gnb_box > h1 {position: relative; display:flex; align-items: center; justify-content: flex-start; width:20%; height: 80px;}
.header > .gnb_web_area > .gnb_box > h1 > .logo { height: 40px; background-size: auto 40px;}
.header > .gnb_web_area.active > .gnb_box > h1{width:20%; }
.header > .gnb_web_area.active > .gnb_box > h1 > .logo {height: 40px; background-size: auto 40px;}
#header.nav_black > .gnb_web_area > .gnb_box > h1 {width:20%;}
#header.nav_black > .gnb_web_area > .gnb_box > h1 > .logo {height: 40px; background-size: auto 40px;}

}
@media all and (max-width:1024px) {
}
/* header mobile */
@media all and (max-width:900px) {
.header {position: fixed; width: 100%; height: 70px}
.header > .gnb_web_area {display: none;}
.header > .gnb_web_area:before {display: none;}
.header > .gnb_mobile_area {display: block;}

#header.nav_black {position: fixed; width: 100%; height: 70px}
#header.nav_black > .gnb_web_area {display: none;}

#header.nav_black > .gnb_mobile_area {display: block; }
#header.nav_black > .gnb_mobile_area { height: 70px; width:100%;background: #fff; }
#wrap #header.nav_black{ width:100%; height: 70px;}

#header.nav_black > .gnb_mobile_area > h1 {position: absolute; top:0; left:20px; display: block; width:200px; height: 70px;}
#header.nav_black > .gnb_mobile_area > h1 > .logo {display: block; width: 200px; height: 70px; background: url("../images/common/logo2.png") no-repeat left ; background-size: auto 40px; }
#header.nav_black > .gnb_mobile_area > h1 > .logo em {position: absolute; top:0; left:0; width: 0; height: 0; overflow: hidden; opacity: 0;}
#header.nav_black > .gnb_mobile_area > a.btn_gnb {position: absolute; top:15px; right:20px; display: block; width: 40px; height: 34px;background:url('../images/common/gnb_allmenu2.png') no-repeat right;}
#header.nav_black > .gnb_mobile_area > a.btn_gnb em {position: absolute; top:0; left:0; width: 0; height: 0; overflow: hidden; opacity: 0;}
}

/* 모바일 펼침 메뉴 */
.gnb_modal { visibility:hidden; opacity:0; position:fixed; top:0; bottom:0; left:0; right:0; z-index:11; background-color:rgba(0,0,0,.4); -webkit-transition:opacity 0.3s cubic-bezier(0, 0, 0.25, 1) 0.4s, visibility 0s cubic-bezier(0.9, 0, 0, 0.9) 0.7s; transition:opacity 0.3s cubic-bezier(0, 0, 0.25, 1) 0.4s, visibility 0s cubic-bezier(0.9, 0, 0, 0.9) 0.7s; }
.show_gnb .gnb_modal { opacity:1; visibility:visible; -webkit-transition-delay:0s; transition-delay:0s; }

/*모바일 menu */
.nav_gnb { opacity:0; visibility:hidden; position:fixed; right:0; top:0; box-sizing:border-box; max-width:460px; width:100%; height:100vh; z-index:100; overflow:hidden; -webkit-transition:opacity 0.3s cubic-bezier(0, 0, 0.25, 1) 1s, visibility 0s cubic-bezier(0, 0, 0.25, 1) 1s, transform 0.5s cubic-bezier(0, 0, 0.25, 1); transition:opacity 0.3s cubic-bezier(0, 0, 0.25, 1) 1s, visibility 0s cubic-bezier(0, 0, 0.25, 1) 1s, transform 0.5s cubic-bezier(0, 0, 0.25, 1); -ms-transform:translateX(100%); -webkit-transform:translateX(100%); transform:translateX(100%); transform:translate3d(100%,0,0); background-color: #fff;}
.show_gnb .nav_gnb {opacity:1; visibility:visible; -webkit-transition-delay:0s; transition-delay:0s; -ms-transform:translateX(0); -webkit-transform:translateX(0); transform:translateX(0); transform:translate3d(0,0,0);}

.nav_gnb {letter-spacing: 0; padding-bottom:30px; box-sizing: border-box;}
.nav_gnb .head {position: relative; height: 120px; background: #022661;}
.nav_gnb .head .logo {position: relative; top:0; left:20px; width: 200px; height: 70px; text-indent: -999em; background: url("../images/common/logo.png") no-repeat center left; background-size: auto 40px;}
.nav_gnb .head .logo a{width:100%; height: 100%; display: block;}
.nav_gnb .head .btns {position: absolute; top:12px; right:0; padding-right:60px; height: 40px;}
.nav_gnb .head .btns .btn_gnb_close {position: absolute; top:0; right:10px; width: 50px; height: 40px; background: url("../images/common/icons.png") no-repeat -75px 0; background-size:  500px auto; text-indent: -999em;}
.nav_gnb .head .gnb_menu{position: relative; width:100%; padding:0 10px; box-sizing: border-box; margin-top:10px;}
.nav_gnb .head .gnb_menu a{font-size: 16px; font-weight: 300; color: #fff; padding:10px 10px;}


.nav_gnb .scroller .ftscroller_y {-webkit-transition:all 0.1s cubic-bezier(0, 0, 0.25, 1); transition:all 0.1s cubic-bezier(0, 0, 0.25, 1);}
.nav_gnb .menus {padding-bottom: 100px;}
.nav_gnb .menu {padding:30px 40px 0;}
.nav_gnb .menu ul.dep1 > li > a {position: relative; display: block; padding:20px 0; font-size:30px; font-family: 'Frutiger', san-serif;line-height: 1.3; height: 2rem; color:#333;vertical-align: top; }
.nav_gnb .menu ul.dep1 > li.active > a {color:#022661;}

.nav_gnb .menu ul.dep2 {display: none;padding:4px 0; margin-bottom:16px; display: flex;flex-wrap:wrap;justify-content:space-between; }
.nav_gnb .menu ul.dep2 > li{width:45%;}
.nav_gnb .menu ul.dep2 > li > a {position: relative; display: block; padding:5px 0; font-size:16px; font-weight: 300; line-height: 1.3; height: 2rem; color:#888; }
.nav_gnb .menu ul.dep2 > li.active > a {font-weight: bold;}
.nav_gnb .menu ul.dep2 > li.active > a.menuPlus:after {background-position: -215px 0;}
.nav_gnb .menu ul.dep2 > li:first-child > a {border-top:none;}
.nav_gnb .menu ul.dep2 > li.active > a,
.nav_gnb .menu ul.dep2 > li > a:foucs,
.nav_gnb .menu ul.dep2 > li > a:hover {font-weight: bold;}
.nav_gnb .menu ul.dep3 {padding-bottom:10px;}
.nav_gnb .menu ul.dep3 > li > a {position: relative; display: block; padding:0 10px; font-size:15px; line-height: 23px; height: 25px; color:#666; }
.nav_gnb .menu.menuSub {padding-top:0; margin-bottom:30px;}

.nav_gnb .nav_foot {position: absolute; bottom:0; width: 100%; z-index:1; }
.nav_gnb .nav_foot ul li {display: block; padding:20px; box-sizing: border-box;}
.nav_gnb .nav_foot ul li:first-child{ border-right:1px solid #353463;}
.nav_gnb .nav_foot .copy{font-size: 13px;font-family: 'Frutiger', san-serif;letter-spacing:0; color: #aaa; }
.nav_gnb .nav_foot ul li a {position: relative; display: block; width: 100%; height:20px; text-align: center;font-size:16px; padding:0; line-height:1; color:#aaa; }
.nav_gnb .nav_foot ul li a.on{color: #fff; font-weight: bold; border}

.nav_gnb .nav_foot ul li a {position: relative; display: block; width: 100%; height: 70px; padding-top:45px; text-align: center; box-sizing: border-box;}
.nav_gnb .nav_foot ul li a em {}
.nav_gnb .nav_foot ul li a:after {content: ""; position: absolute; top:15px; left:50%; margin-left:-20px; display: block; background: url("../images/common/icons.png") center top; background-repeat: no-repeat; background-size:500px auto;}
.nav_gnb .nav_foot ul li a.btn_01:after {width: 40px; height: 30px; background-position: -265px -15px;}
.nav_gnb .nav_foot ul li a.btn_02:after {width: 40px; height: 30px; background-position: -305px -15px;}
.nav_gnb .nav_foot ul li a.btn_03:after {width: 40px; height: 30px; background-position: -345px -15px;}

.nav_gnb .nav_foot ul li a.btn_11:after {width: 40px; height: 30px; background-position: -305px -15px;}
.nav_gnb .nav_foot ul li a.btn_12:after {width: 40px; height: 30px; background-position: -265px -50px;}
.nav_gnb .nav_foot ul li a.btn_13:after {width: 40px; height: 30px; background-position: -345px -50px;}


/* footer */
#footer{width:100%; position: relative; display: block; clear: both; background: #fff; padding: 35px 100px 60px;overflow-x: hidden; border-top:1px solid #cccccc; box-sizing: border-box;}
#footer .section{display: flex; justify-content:space-between; align-items:center;width:100%; }
#footer .f_add{text-align: left; display: flex;}
#footer .f_add h1{width:250px; height: 50px; background: url(../images/common/f_logo.jpg) no-repeat left; background-size: auto 40px; display: block; font-size: 0;}
#footer .f_add li{font-size: 16px;font-weight:300; color: #666; padding: 2px 0;}
#footer .f_menu{text-align: right; }
#footer .f_menu ul{display: flex;}
#footer .f_menu li a{font-size: 18px;font-weight:300; color: #666; padding: 5px 20px;}
#footer .f_menu li:last-child a{padding-right: 0;}
#footer .f_menu b{color: #333; font-weight: normal;}

@media screen and (max-width: 1600px) {
#footer{ padding:20px 5% 60px;}
}

@media screen and (max-width: 1280px) {
#footer .f_add h1{width:160px; }
#footer .f_add li{font-size: 14px;}
#footer .f_menu li a{font-size: 14px;padding: 5px 10px;}
}

@media screen and (max-width: 900px) {
#footer{ padding: 20px 20px 60px;}

#footer .section{display: block;width:100%;}
#footer .f_add{text-align: center; display: block;}
#footer .f_add h1{width:250px; height: 50px;background-size:auto 35px; background-position: center; margin:0 auto; margin-bottom: 20px;}
#footer .f_add li{font-size: 13px; padding: 2px 0;}

#footer .f_menu{text-align: center; margin: 30px auto;}
#footer .f_menu ul{display: flex;justify-content:space-around; max-width: 500px; margin:0 auto;}
#footer .f_menu li a{font-size: 13px; padding: 5px 0;}
}

@media screen and (max-width: 370px) {
#footer .f_menu ul{display: grid;grid-template-columns: repeat(2, 1fr);grid-gap:15px;}
#footer .f_menu li a{font-size: 13px; width:100%;}

}

#btn_top{position: fixed; right:10px; bottom:100px; z-index: 10; }
#btn_top a{width:75px; height:75px; background:rgba(255,255,255,.8) url(../images/common/btn_top.png) no-repeat center; background-size: auto 40px; display: block; content: ''; font-size: 0;transition: all 0.3s ease;}
#btn_top a:hover{background: #022661 url(../images/common/btn_top_hover.png) no-repeat center;background-size: auto 40px;}

@media screen and (max-width: 1200px) {
#btn_top{ bottom:10px; }
}
@media screen and (max-width: 800px) {
#btn_top a{width:50px; height:50px; background: #022661 url(../images/common/btn_top_hover.png) no-repeat center;background-size: auto 30px;}
#btn_top a:hover{background: #022661 url(../images/common/btn_top_hover.png) no-repeat center;background-size: auto 30px;}
}

/* swiper 기본 */
.swiper-container {	width:100%;	height:auto; position: relative;}
.swiper-slide {	text-align:center;float: left;display:flex; /* 내용을 중앙정렬 하기위해 flex 사용 */	align-items:center; /* 위아래 기준 중앙정렬 */	justify-content:center; /* 좌우 기준 중앙정렬 */}
.swiper-slide img {	width:100%;	max-width:100%; /* 이미지 최대너비를 제한, 슬라이드에 이미지가 여러개가 보여질때 필요 */}

.swiper-container .swiper-button-prev, .swiper-container .swiper-button-next{position: absolute; top:47%; width: 34px; height: 66px; z-index: 100; cursor: pointer; background: url('../images/common/btn_arrow2.png')no-repeat right;background-size: 68px auto;}
.swiper-container .swiper-button-prev{background-position: left;}
.swiper-container .swiper-button-next{background-position: right;}

@media screen and (max-width: 800px) {
.swiper-container .swiper-button-prev, .swiper-container .swiper-button-next{position: absolute; top:47%; width: 17px; height: 33; z-index: 100; cursor: pointer; background: url('../images/common/btn_arrow2.png')no-repeat right;background-size: 34px auto;}
.swiper-container .swiper-button-prev{background-position: left;}
.swiper-container .swiper-button-next{background-position: right;}

}

.swiper-pagination-bullet {width: 17px;height: 17px;line-height: 1;font-size: 0;margin-bottom: 9px 0; opacity: .8;/* background: #fff */}
.swiper-pagination-bullet-active {opacity: 1;}

/* 유튜브 iframe 반응형 */
.youtube { position:relative; width:100%; padding-bottom:56.25% }
.youtube iframe { position:absolute;  top:0; left:0; width:100%; height:100%; }