@charset "utf-8";
/* CSS Document */

button {-webkit-tap-highlight-color : transparent;}
a {-webkit-tap-highlight-color : transparent;}
input {-webkit-tap-highlight-color : transparent;}



/**** 본문바로가기 ****/
#accessibility {width:100%; text-align: center; background-color:#333; position:absolute; top:-31px; left:0; z-index: 500; height:30px;}
#accessibility a {color:#fff; font-size: 13px; display: inline-block; padding:6px 10px 6px;}

.skip-navi{display:block;position:absolute;left:0;top:0;overflow:hidden;width:1px;height:1px;text-align:center;color:#fff !important;z-index:9999;}
.skip-navi:focus,.skip-navi:active{padding:5px 0;width:100%; color:#fff; height:auto; background:#333}


/**** 본문 ****/
#wrap {position:relative; width:100%; overflow: hidden; min-width:320px; min-height: 100vh;}


.inner1200 {width:1200px; margin:0 auto; position:relative;}
.inner1200:after {content: ""; display: block; clear: both;}

.dpnone {display: none !important;}


@media all and (max-width:1200px){
	.inner1200 {width:100%; padding:0 10px;}
}





/******* 모바일 메뉴 *******/
.mobile_menu {display: none;}
.mobile_menu_black {display: none;}


@media all and (max-width:1000px){
	/* 검정배경 */
	.mobile_menu_black {position: fixed; left: 0; top: 0; z-index: 2400; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7);}

	/* 모바일 메뉴 */
	.mobile_menu {display: block; position: fixed; right: -300px; top: 0; z-index: 2500; width: 300px; overflow-y: auto; height: 100%; background-color: #fff;}
	.mobile_menu .top_ul {display: flex; flex-wrap: wrap; height: auto; background-color: #015252; border-bottom: 1px solid #006f6f;}
	.mobile_menu .top_ul li {border-right: 1px solid #006f6f; flex-grow: 1; border-top: 1px solid #006f6f; margin-top: -1px;}
	.mobile_menu .top_ul li:last-of-type {border-right: none;}
	.mobile_menu .top_ul li a {display: block; height: 100%; display: flex; align-items: center; justify-content: center; padding:10px 10px; color: #fff; font-size: 14px;}
	.mobile_menu .top_ul li a.btn_close i {font-size: 27px; color: rgba(255,255,255,0.7);}
	
	.mobile_menu .search_b {height: 50px; width: 100%; border-bottom: 1px solid #eee;}
	.mobile_menu .search_b::after {content: ""; display: block; clear: both;}
	.mobile_menu .search_b input[type="text"] {float: left; width: 70%; height: 100%; font-size: 13px; border: none;}
	.mobile_menu .search_b button {float: left; width: 30%; height: 100%; font-size: 13px; background-color: #006f6f; color: #fff;}
	
	.mobile_menu .bott_box {width: 100%;}
	.mo_gnb {width: 100%;}
	.mo_gnb > li {border-bottom: 1px solid #e0e0e0;}
	.mo_gnb > li > a {display: block; padding: 18px 45px 17px 20px; position: relative;}
	.mo_gnb > li > a .txt {font-size: 17px; font-weight: 500; color: #333; letter-spacing: 0.02em;}
	.mo_gnb > li > a .icon {position: absolute; right: 18px; top: 18px; display: flex; justify-content: center; align-items: center; width: 23px; height: 23px; border:1px solid #e5e5e5;}
	.mo_gnb > li > a .icon i {font-size: 13px; color: #999;}
	.mo_gnb > li > a .icon2 {position: absolute; right: 20px; top: 18px;}
	.mo_gnb > li > a .icon2 i {font-size: 17px; color: #bbb;}
	.mo_gnb > li > a.active {}
	.mo_gnb > li > a.active .txt {color: #006f6f;}
	.mo_gnb > li > a.active .icon {border-color: #006f6f;}
	.mo_gnb > li > a.active .icon i {color: #006f6f;}
	.mo_gnb > li > a.active .icon2 i {color: #006f6f;}
	
	.mo_gnb_depth2 {display:none; width: 100%; background-color: #f0f0f0;}
	.mo_gnb_depth2 > li {border-top: 1px solid #e0e0e0;}
	.mo_gnb_depth2 > li > a {display: block; padding: 13px 33px 12px 27px; position: relative; background-color: #f7f7f7;}
	.mo_gnb_depth2 > li > a .txt {font-size: 15px; color: #777;}
	.mo_gnb_depth2 > li > a .icon {position: absolute; right: 20px; top: 13px;}
	.mo_gnb_depth2 > li > a .icon i {font-size: 13px; color: #777;}
	.mo_gnb_depth2 > li > a.active {background-color: #e5ecff}
	.mo_gnb_depth2 > li > a.active .txt {color: #222;}
	.mo_gnb_depth2 > li > a.active .icon i {color: #222;}

	.mo_gnb_depth3 {display:none; width: 100%; background-color: #fff;}
	.mo_gnb_depth3 > li {border-top: 1px solid #e0e0e0;}
	.mo_gnb_depth3 > li > a {display: block; padding: 13px 33px 12px 35px; position: relative;}
	.mo_gnb_depth3 > li > a .txt {font-size: 15px; color: #777;}
	.mo_gnb_depth3 > li > a .icon {position: absolute; right: 20px; top: 13px;}
	.mo_gnb_depth3 > li > a .icon i {font-size: 13px; color: #777; transition: all .25s ease;}
	.mo_gnb_depth3 > li > a.active {background-color: #eaf7ff;}
	.mo_gnb_depth3 > li > a.active .txt {color: #222;}
	.mo_gnb_depth3 > li > a.active .icon i {color: #222; transform: rotate(180deg);}

	.mo_gnb_depth4 {display:none; width: 100%; background-color: #fff; padding: 18px 20px 18px 25px;}
	.mo_gnb_depth4 > li {margin-top: 7px;}
	.mo_gnb_depth4 > li:first-child {margin-top: 0;}
	.mo_gnb_depth4 > li > a {display: block; padding-left: 15px; position: relative; font-size: 14px;}
	.mo_gnb_depth4 > li > a::before {content: ""; width: 5px; height: 1px; background-color: #888; position: absolute; left: 0; top: 11px;}
}










/******* 헤더 *******/
#hd {border-bottom: 1px solid #eee; background-color: #fff;}
#hd .inner1200 {position: relative; text-align: center; padding: 28px 0 15px;}

#hd .logo_box {}

#hd .lang_box {position: absolute; right: 0; top: 40%;}
#hd .lang_box .a1 {display: block;}
#hd .lang_box .a1 span {vertical-align: middle;}
#hd .lang_box .a1 .txt {font-size: 14px; font-weight: 400;}
#hd .lang_box .a1 .arrow {font-size: 12px; color:#555; margin-left: 5px;}
#hd .lang_box .a1 .arrow i {transition: all .25s ease;}
#hd .lang_box .a1.active .arrow i {transform: rotate(180deg);}

#hd .lang_box .lang_sub {display: none; position: absolute; width: 100%; border: 1px solid #ddd;}
#hd .lang_box .lang_sub > li {border-top: 1px solid #ddd;}
#hd .lang_box .lang_sub > li:first-child {border-top: none;}
#hd .lang_box .lang_sub > li > a {display: block; font-size: 13px; padding: 3px 5px 2px;}


#hd .moMenu_btn {position: absolute; right: 10px; top: 28%; display: none;}

.btn_MobileMenu {width: 20px; margin-left: 12px;}
.btn_MobileMenu .line {display: block; width: 100%; height: 2px; background-color: #111; margin-top: 5px; transition: all .25s ease;}
.btn_MobileMenu .line:first-of-type {margin-top: 0;}
.btn_MobileMenu .line.short {width: 70%;}
.btn_MobileMenu:hover .line,
.btn_MobileMenu:focus .line {background-color: #015252;}
.btn_MobileMenu:hover .line.short,
.btn_MobileMenu:focus .line.short {width: 100%;}



@media all and (max-width:1000px){
	#hd .lang_box {display: none;}

	#hd .inner1200 {padding: 13px 0 15px; text-align: left;}
	#hd .logo_box {padding-left: 15px;}
	#hd .logo_box img {width: 150px;}

	#hd .moMenu_btn {display: block;}
}





/* 메뉴 */
#gnb_wrap {width: 100%; height: 55px; position: relative;}

#gnb_wrap .inBox {height: 55px; width: 100%; position: absolute; left: 0; top: 0; background-color: #fff; z-index: 1000; border-bottom: 2px solid #005a70; overflow: hidden;}


#gnb {width: 1200px; margin: 0 auto; display: flex; position: relative;}
#gnb::before {content: ""; display: block; background-color: #eee; position: absolute; left: -100%; top: 56px; width: 1000%; height: 1px; z-index: 1000;}
#gnb > li {width: 16.66%; position: relative;}
#gnb > li > a {display: flex; align-items: center; justify-content: center; height: 55px; font-size: 16px;}
#gnb > li:hover > a {font-weight: 500; color: #006f6f;}
#gnb > li > a.active2 {font-weight: 500; color: #006f6f;}

#gnb .gnb_sub {position: absolute; left: 0; top: 100%; width: 100%; z-index: 100; text-align: center; padding: 20px 10px;}
#gnb .gnb_sub > li {margin-top: 12px;}
#gnb .gnb_sub > li:first-of-type {margin-top: 0;}
#gnb .gnb_sub > li > a {display: block; font-size: 14px; word-break: keep-all; line-height: 1.2;}
#gnb .gnb_sub > li > a:hover {text-decoration: underline; color: #006f6f;}
#gnb .gnb_sub > li.active2 > a {font-weight: 500; color: #006f6f;}



@media all and (max-width:1200px){
	#gnb {width: 100%; padding: 0 10px;}
	#gnb > li > a {font-size: 14px;}
	#gnb .gnb_sub > li > a {font-size: 13px;}
}

@media all and (max-width:1000px){
	#gnb_wrap {display: none;}
}










/******* 풋터 *******/
#ft {width: 100%; background-color: #333333; padding:25px 0;}
#ft .top_box {border-bottom: 1px solid #48484a; display: flex; flex-wrap: wrap; align-items: center; padding-bottom: 20px;}
#ft .top_box .lb {margin-right: auto;}
#ft .bottom_box {display: flex; flex-wrap: wrap; align-items: center; padding: 25px 0 20px;}
#ft .bottom_box .lb {margin-right: auto;}
#ft .ft_menu {display: flex;}
#ft .ft_menu > li {padding: 0 22px;}
#ft .ft_menu > li:first-child {padding-left: 0;}
#ft .ft_menu > li > a {font-size: 15px; color: #999999;}
#ft .ft_menu > li.white > a {color: #fff;}
#ft .ft_menu > li > a:hover,
#ft .ft_menu > li > a:focus {text-decoration: underline;}
#ft .ft_sns {display: flex;}
#ft .ft_sns > li {padding: 0 7px;}
#ft .ft_sns > li > a {color: #999; font-size: 22px;}
#ft .ft_sns > li > a img {width: 22px; margin-top: -3px;}
#ft address {font-size: 14px; color: #666;}
#ft address b {font-size: 14px; color: #999; font-weight: 400;}



@media all and (max-width:800px){
	#ft {padding:20px 0 30px;}
	#ft .top_box {padding-bottom: 10px;}
	#ft .top_box .lb {width: 100%;}
	#ft .top_box .rb {width: 100%; margin-top: 10px; text-align: center;}
	#ft .bottom_box {padding: 15px 0 10px; text-align: center;}
	#ft .bottom_box .lb {width: 100%; padding: 0 30px;}
	#ft .bottom_box .rb {width: 100%; margin-top: 10px;}
	#ft .bottom_box .rb img {width: 200px;}
	#ft .ft_menu {flex-wrap: wrap;}
	#ft .ft_menu > li {padding: 5px 10px; width: 50%; text-align: center;}
	#ft .ft_menu > li:first-child {padding-left: 10px;}
	#ft .ft_menu > li > a {font-size: 14px;}
	#ft .ft_sns {display: inline-flex;}
	#ft .ft_sns > li {padding: 0 7px;}
	#ft address {font-size: 12px; word-break: keep-all;}
	#ft address b {font-size: 12px;}
}	







/******* 서브 탑 컨텐츠 *******/
#sub_top_contents {width: 100%;}
#sub_top_contents .img_con {width: 100%; height: 215px; position: relative;}
#sub_top_contents .img_con .img_box {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; animation: 2s linear forwards subBg; background-position: center center; background-size: cover;}

#sub_top_contents .txt_box {width: 100%; height: 100%; text-align: center; padding-top: 60px;}
#sub_top_contents .txt_box h2 {font-size: 30px; color:#fff; font-weight: 400; text-shadow: 0 0 10px rgba(0,0,0,0.2); line-height: 1.2; animation: 0.5s linear 0.5s forwards txtOpacity; opacity: 0; font-family: 'GmarketSansMedium';}
#sub_top_contents .txt_box h4 {font-size: 14px; color:#fff; font-weight: 300; text-shadow: 0 0 10px rgba(0,0,0,0.2); line-height: 1.4; animation: 0.5s linear 1s forwards txtOpacity; opacity: 0; margin-top: 20px;}

#sub_top_contents .menu_con {width: 100%; background-color: #005a70; border-bottom: 1px solid #ddd; text-align: center;}
#sub_top_contents .menu_con .sub_menu_ul {display: inline-flex; width: 100%; justify-content: center;}
#sub_top_contents .menu_con .sub_menu_ul > li {text-align: center; flex-basis: 25%; border-left: 1px solid #046780;}
#sub_top_contents .menu_con .sub_menu_ul > li:first-child {border-left: none;}
#sub_top_contents .menu_con .sub_menu_ul > li > a {display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; color: #fff; padding: 15px 5px; font-size: 14px;}
#sub_top_contents .menu_con .sub_menu_ul > li.active > a {background-color: #fff; color: #333; font-weight: 500;}


@keyframes subBg {
	0% {transform: scale3d(1,1,1);}
	100% {transform: scale3d(1.02,1.02,1.02);}
}

@keyframes txtOpacity {
	0% {opacity: 0; transform: translateY(20px);}
	100% {opacity: 1; transform: translateY(0);}
}



@media all and (max-width:1200px){
	#sub_top_contents .menu_con .inner1200 {padding: 0;}
}

@media all and (max-width:800px){
	/******* 서브 탑 컨텐츠 *******/
	#sub_top_contents {}
	#sub_top_contents .img_con {height: 130px;}

	#sub_top_contents .txt_box {padding: 0px 20px; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
	#sub_top_contents .txt_box h2 {font-size: 17px; }
	#sub_top_contents .txt_box h4 {font-size: 13px; margin-top: 7px;}

	#sub_top_contents .menu_con {}
	#sub_top_contents .menu_con .sub_menu_ul {display: flex; width: 100%; flex-wrap: wrap; justify-content: flex-start;}
	#sub_top_contents .menu_con .sub_menu_ul > li {flex-basis: 50%; border-left: none; border-right: 1px solid #046780; border-bottom: 1px solid #046780;}
	#sub_top_contents .menu_con .sub_menu_ul > li:first-child {border-right: 1px solid #046780;}
	#sub_top_contents .menu_con .sub_menu_ul > li:nth-of-type(2n) {border-right: none;}
	#sub_top_contents .menu_con .sub_menu_ul > li > a {padding: 8px 5px; font-size: 12px; font-weight: 300; color: #eee;}
	#sub_top_contents .menu_con .sub_menu_ul > li.active {border-bottom: none;}
}	







/*********** 서브 컨텐츠 ***********/

.sub_contents {padding: 100px 0 140px;}

/* 서브 타이틀 */
.sub_contents_top_info {width: 100%; border-bottom: 1px solid #ededed; text-align: center; padding-bottom: 17px; margin-bottom: 43px;}
.sub_contents_top_info h1 {font-size: 25px; font-weight: 500; color: #111; margin-bottom: 10px; line-height: 1.2;}
.sub_contents_top_info .sub_con_nav {display: inline-flex;}
.sub_contents_top_info .sub_con_nav > li {padding:0 15px; position: relative; color: #666; font-size: 14px; font-weight: 400;}
.sub_contents_top_info .sub_con_nav > li::before {content: "\e93e"; font-family : 'xeicon'; position: absolute; right: -7px; padding-top: 2px; font-size: 13px;}
.sub_contents_top_info .sub_con_nav > li:last-child::before {content: "";}
.sub_contents_top_info .sub_con_nav > li:last-child {font-weight: 500; color: #111;}

/* 서브컨텐츠 */
.sub_contents_bottom_box {padding: 43px 44px;}


@media all and (max-width:1000px){
	.sub_contents {padding: 30px 0 50px;}

	/* 서브 타이틀 */
	.sub_contents_top_info {padding-bottom: 10px; margin-bottom: 20px;}
	.sub_contents_top_info h1 {font-size: 18px; margin-bottom: 10px;}
	.sub_contents_top_info .sub_con_nav {display: inline-flex; flex-wrap: wrap;}
	.sub_contents_top_info .sub_con_nav > li {padding:0 10px; font-size: 12px;}
	.sub_contents_top_info .sub_con_nav > li::before {right: -4px; padding-top: 3px; font-size: 9px;}

	/* 서브컨텐츠 */
	.sub_contents_bottom_box {padding: 20px 5px;}
}













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