@charset "UTF-8";

/* 공통 레이아웃 */
::selection {background:#00B6D1; color:#fff;}
/* 콘텐츠 상하단 여백 */
#header {position:relative;}
#header.sub {border-bottom:1px solid #000;}
#header .btnBack {display:block; width:24px; height:24px; background:url(../images/sub/i_back.svg); background-repeat:no-repeat; background-position:center; transition:background .3s;} 
#header .btnBack:focus,
#header .btnBack:hover,
#header .btnBack.active {background:url(../images/sub/i_back_on.svg);}
/* #header.active {height:100px; box-shadow:unset;}
#header.active.fixed {position:fixed; height:70px; box-shadow:1px 1px 20px 4px rgba(26,67,153,0.2);} */
#con {position:relative; z-index:0; min-height:calc(100vh - 70px); padding:30px 0; transition:height 0.3s, padding 0.3s;}

@media screen and (max-width:350px){
	#header {height:60px;}
	#header .btnBack {width:22px; height:22px; background-size:22px;}
	#con {min-height:calc(100vh - 60px); padding:25px 0;}
}



/* @공통 */
#header .conTit {display:block; font-weight:700; font-size:1.375rem; color:#000; text-align:center; transition:font .3s;}
#con .conTit02 {display:block; font-weight:700; font-size:1.625rem; color:#000; text-align:center; transition:font .3s;}
#con .conWrap {padding-top:35px; transition:padding .3s;}
#con .subTit {display:block; font-weight:700; font-size:1rem; color:#000; transition:font .3s;}

@media screen and (max-width:350px){
	#header .conTit {font-size:1.25rem;}
	#con .conTit02 {font-size:1.5rem;}
	#con .conWrap {padding-top:25px;}
}


/* 오디오가이드 View 상단 */
#header.boView .headerWrap {justify-content: flex-end;}
#header.boView .headerWrap .hCenter {display:block; position:absolute; top:50%; left:50%; width:40px; height:5px; border-radius:5px; background-color:rgba(0,0,0,0.2); transform: translate(-50%, -50%);}
#header.boView .headerWrap .utilList > li .good::before {background-image:url(../images/common/i_good.svg);}
#header.boView .headerWrap .utilList > li .bookMark::before {background-image:url(../images/common/i_bookMark.svg);}
#header.boView .headerWrap .utilList > li .link::before {background-image:url(../images/common/i_link.svg);}


/* 통합검색 결과 */
#TotalSearch {padding:10px 0 10px; transition:.3s;}
#TotalSearch .searchCon {display:flex; height:50px; margin:25px auto 0; align-items:center; justify-content: center; transition:.3s;}
#TotalSearch .searchCon .in-txt {width:100%; height:100%; padding:15px; border:1px solid #E9E9E9; border-right:0; flex-grow:1; transition:.3s;}
#TotalSearch .searchCon .in-txt,
#TotalSearch .searchCon .in-txt::placeholder {font-weight:500; font-size:0.9375rem; color:#000;}
#TotalSearch .searchCon .btnSearch {display:block; position:relative; overflow:hidden; width:50px; height:100%; background-color:#1A4399; flex-shrink:0; transition:.3s;}
#TotalSearch .searchCon .btnSearch::before {content:''; display:block; position:absolute; top:0; left:0; width:0%; height:100%; background:linear-gradient(-45deg, #362A99, #0071BC); transition:.3s;}
#TotalSearch .searchCon .btnSearch:focus::before,
#TotalSearch .searchCon .btnSearch:hover::before,
#TotalSearch .searchCon .btnSearch.active::before {width:100%;}
#TotalSearch .searchCon .btnSearch > span {position:relative; font-weight:600; font-size:0.875rem; color:#fff;}

#TotalSearch .totalResult {display:block; margin:20px 0; padding:20px; text-align: center; background-color:#F5F7F9; font-weight:500; font-size:1rem; color:#000; transition:.3s;}
#TotalSearch .totalResult .bold {font-weight:700; color:#01216D;}

#TotalSearch .totalList {display:block;}
#TotalSearch .totalList > li {display:block; padding:20px 0; border-bottom:1px solid #E9E9E9; transition:.3s;}
#TotalSearch .totalList > li:first-child {padding-top:0;}
#TotalSearch .totalList > li .root {display:flex; position:relative; padding-left:23px; align-items:center; transition:.3s;}
#TotalSearch .totalList > li .root::before {content:''; display:block; position:absolute; top:50%; left:0; width:18px; height:18px; background: url(../images/sub/totalSearch/i_total.svg) no-repeat center; transform: translateY(-50%); transition:.3s;}
#TotalSearch .totalList > li .root .mRoot {display:block; font-weight:700; font-size:1rem; color:#000; transition:.3s;}
#TotalSearch .totalList > li .root .mRoot:focus,
#TotalSearch .totalList > li .root .mRoot:hover,
#TotalSearch .totalList > li .root .mRoot.acitve {color:#3E79F4;}
#TotalSearch .totalList > li .root .mRoot:not(:first-child) {position:relative; padding-left:24px; transition:.3s;}
#TotalSearch .totalList > li .root .mRoot:not(:first-child)::before {content:''; display:block; position:absolute; top:50%; left:4px; width:18px; height:18px; background: url(../images/sub/totalSearch/route-arrow.svg) no-repeat center; transform: translateY(-50%); transition:.3s;}

#TotalSearch .totalList > li .txtCon {display:block; padding:5px 0 0 23px; transition:.3s;}
#TotalSearch .totalList > li .txtCon .txt {display:block; font-weight:500; font-size:0.9375rem; color:#707780; line-height:1.5; word-break:break-all; transition:.3s;}
#TotalSearch .totalList > li .txtCon .txt .underline {padding:0 1px; background-color:#01216D; font-weight:400; font-size:0.875rem; color:#fff;}
#TotalSearch .totalList > li .txtCon .date {display:block; position:relative; margin-top:8px; padding-left:21px; font-weight:500; font-size:0.875rem; color:#707780; transition:.3s;}
#TotalSearch .totalList > li .txtCon .date::before {content:''; display:block; position:absolute; top:50%; left:0; width:18px; height:18px; background:url(../images/sub/totalSearch/i_totalDate.svg) no-repeat center; transform:translateY(-50%); transition:.3s;}

@media screen and (max-width:350px){
	#TotalSearch {padding:10px 0 0;}
	#TotalSearch .searchCon {height:45px; margin:20px auto 0;}
	#TotalSearch .searchCon .in-txt {padding:12px 20px;}
	#TotalSearch .searchCon .btnSearch > span {font-weight:500; font-size:0.875rem;}
	#TotalSearch .totalResult {margin:17px 0; padding:15px; font-size:0.9375rem;}
	#TotalSearch .totalList > li {padding:15px 0;}
	#TotalSearch .totalList > li .txtCon {padding:4px 0 0 23px;}
	#TotalSearch .totalList > li .txtCon .txt br {display:none;}
	#TotalSearch .totalList > li .txtCon .date {margin-top:7px;}
	#TotalSearch .totalList > li .txtCon .date::before {width:17px; height:17px; background-size:17px;}
}

/* 2뎁스 메뉴 리스트 */
#depth02Menu .subTxt {display:block; padding-top:20px; font-weight:500; font-size:1rem; color:#7E8790; text-align:center; transition:.3s;}
#depth02Menu .subTxt br:first-child {display: none;}
#depth02Menu .menuList {display:block; margin-top:30px; transition:.3s;}
#depth02Menu .menuList > li {display:block; border-bottom:1px solid #000;}
#depth02Menu .menuList > li .menu {display:block; padding:45px; background-color:#fff; transition:padding .3s, background .7s;}
#depth02Menu .menuList > li .menu:focus,
#depth02Menu .menuList > li .menu:hover,
#depth02Menu .menuList > li .menu.active {background-color:#F5F7F9;}
#depth02Menu .menuList > li .menu .txt {display:block; position:relative; padding:0 30px 0 45px; font-weight:800; font-size:1.25rem; color:#000; word-break:break-all; transition:.3s;}
#depth02Menu .menuList > li .menu .txt::before {content:''; display:block; position:absolute; top:50%; left:0; width:30px; height:30px; background-position:center; background-repeat:no-repeat; transform:translateY(-50%); transition:.3s;}
#depth02Menu .menuList > li .menu .txt.m01::before {background-image:url(../images/sub/depth02Menu/I_menu_01.svg);}
#depth02Menu .menuList > li .menu .txt.m02::before {background-image:url(../images/sub/depth02Menu/I_menu_02.svg);}
#depth02Menu .menuList > li .menu .txt.m03::before {background-image:url(../images/sub/depth02Menu/I_menu_03.svg);}
#depth02Menu .menuList > li .menu .txt.m04::before {background-image:url(../images/sub/depth02Menu/I_menu_04.svg);}
#depth02Menu .menuList > li .menu .txt::after {content:''; display:block; position:absolute; top:50%; right:30px; width:24px; height:24px; background:url(../images/sub/i_arrow.svg) no-repeat center; opacity:0; transform:translateY(-50%); transition:.3s;}
#depth02Menu .menuList > li .menu:focus .txt::after,
#depth02Menu .menuList > li .menu:hover .txt::after,
#depth02Menu .menuList > li .menu.active .txt::after {right:0; opacity:1;}


@media screen and (max-width:350px){
	#depth02Menu .subTxt {padding-top:15px;}
	#depth02Menu .subTxt br:first-child {display:block;}
	#depth02Menu .menuList {margin-top:20px;}
	#depth02Menu .menuList > li .menu {padding:35px 25px;}
	#depth02Menu .menuList > li .menu .txt {padding:0 30px 0 37px; font-size:1.125rem;}
	#depth02Menu .menuList > li .menu .txt::before {width:25px; height:25px; background-size:25px;}
	#depth02Menu .menuList > li .menu .txt::after {width:20px; height:20px; background-size:20px;}
}




/* 페이지 준비중 */
#openReady {display:flex; height:100vh; min-height:600px; align-items:center; justify-content:center;}
#openReady .txt-wrap {display:block; text-align:center;}
#openReady .txt-wrap .txt {display:block; position:relative; padding-top:240px; font-weight:700; font-size:1.5rem; color:#333B3D; transition:.3s;}
#openReady .txt-wrap .txt::before {content:''; display:block; position:absolute; top:0; left:50%; width:220px; height:190px; background:url(../images/sub/img_ready.png) no-repeat center center; transform:translateX(-50%); transition:width .3s, height .3s, background .3s;}
#openReady .txt-wrap .txt .blue {color:#3E79F4;}
#openReady .txt-wrap .text {display:block; padding-top:15px; font-weight:400; font-size:1rem; color:#979798; line-height:1.6; transition:.3s;}

@media screen and (max-width:350px){
	#openReady .txt-wrap .txt {padding-top:210px; font-size:1.375rem;}
	#openReady .txt-wrap .txt::before {width:180px; height:190px; background-size:180px;}
	#openReady .txt-wrap .text {padding-top:10px; line-height:1.5;}
}




/* 상설전시 > 해양교류사실 */
#con .audioSubject {display:block;} 
#con .audioSubject .topWrap {display:flex; align-items:flex-end; justify-content:space-between;}
#con .audioSubject .topWrap .btnLocation {display:block; position:relative; padding:5px 10px 5px 28px; border-radius:5px; background-color:#3E79F4; font-weight:700; font-size:0.625rem; color:#fff;}
#con .audioSubject .topWrap .btnLocation::before {content:''; display:block; position:absolute; top:50%; left:10px; width:14px; height:14px; background:url(../images/sub/i_location.svg) no-repeat center; transform:translateY(-50%);}
#con .audioSubject .txt {display:block; padding-top:7px; font-weight:400; font-size:0.875rem; color:#7E8790; word-break:break-all;}
#con .audioSubject .imgWrap {display:block; padding-top:10px;}
#con .audioSubject .imgWrap .img {display:block; width:100%;}
#con .audioSubject #subjectSelect {width:100%;}
#con .audioSubject #subjectSelect .btnSelect {display:block; position:relative; width:100%; height:40px; margin-top:10px; padding:0 25px 0 20px; text-align: left; background-color:#fff; border-bottom:1px solid #000; font-weight:400; font-size:0.875rem; color:#7E8790; transition:.3s;}
#con .audioSubject #subjectSelect .btnSelect::before {content:''; display:block; position:absolute; top:50%; right:10px; width:18px; height:18px; background:url(../images/sub/i_select_arrow.svg) no-repeat center; transform:rotate(0deg) translateY(-50%); transition:.3s;}
#con .audioSubject #subjectSelect .btnSelect.active {color:#01216D;}
#con .audioSubject #subjectSelect .btnSelect.active::before {transform:rotate(180deg) translateY(50%);}
#con .audioSubject #subjectSelect .subjectList {display:none; position:absolute; left:0; z-index:1; width:100%; padding:15px 20px; background-color:#fff; border:1px solid #E9E9E9; border-radius:0 0 10px 10px;}
#con .audioSubject #subjectSelect .subjectList > li {display:block;}
#con .audioSubject #subjectSelect .subjectList > li:not(:first-child) {padding-top:10px;}
#con .audioSubject #subjectSelect .subjectList > li .btnSelect2 {display:block; background:transparent; font-weight:400; font-size:0.875rem; color:#7E8790; transition:.3s;}
#con .audioSubject #subjectSelect .subjectList > li .btnSelect2:focus,
#con .audioSubject #subjectSelect .subjectList > li .btnSelect2:hover,
#con .audioSubject #subjectSelect .subjectList > li .btnSelect2.active {color:#01216D;}
#con .audioSubject .subList {display:block; padding:10px 0; transition:padding .3s;}
#con .audioSubject .subList > li {display:block; padding:20px; border-bottom:1px solid #E9E9E9; transition:padding .3s;}
#con .audioSubject .subList > li .num {display:block; position:relative; padding:10px 0 10px 40px; font-weight:700; font-size:0.75rem; color:#000; transition:padding .3s;}
#con .audioSubject .subList > li .num::before {content:''; display:block; position:absolute; top:50%; left:0; width:30px; height:30px; border-radius:50%; background:url(../images/sub/i_audio.svg) no-repeat center, #3E79F4; transform: translateY(-50%);}
#con .audioSubject .subList > li .tit {display:block; padding-top:10px; font-weight:700; font-size:1rem; color:#000;}

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



/* 팝업 */
#popWrap {visibility: hidden; overflow:hidden; position: absolute; top:-10%; left:20%; width: 100%; height: 100%; opacity:0; transition:top 0.5s, left 0.5s, visibility 0s 0.5s, opacity 0.5s;}
#popWrap.on {visibility: visible; top:0; left:0; opacity:1; transition:top 0.5s, left 0.5s, visibility 0s 0s, opacity 0.5s;}
#popWrap::before {content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); transition: background 0s 0.5s;}
#popWrap .popCon {position:absolute; top:calc(50% - 70px); left:0; z-index: 99; width:100%; padding:30px; background-color:#fff; transform:translateY(-50%); transition:.3s;}
#popWrap .popCon .topWrap {position:relative; padding-bottom:30px; transition:.3s;}
#popWrap .popCon .topWrap .subTit {display:block; margin:0 auto; font-weight:700; font-size:1rem; color:#000; transition:.3s;}
#popWrap .popCon .topWrap .btnClose {display:block; position:absolute; top:0; right:0; width:18px; height:18px; background:url(../images/sub/popup/i_pop_close.svg) no-repeat center; transition:.3s;}
#popWrap .popCon .imgWrap {position:relative;}
#popWrap .popCon .imgWrap .img {width:100%;}
#popWrap .popCon .imgWrap .floor {display:flex; position:absolute; bottom:0; right:0; width:30px; height:30px; border-radius:50%; background-color:#3E79F4; font-weight:600; font-size:0.75rem; color:#fff; align-items:center; justify-content:center; transition:.3s;}


@media screen and (max-width:400px){
	#popWrap {width:100vw;}
	#popWrap.on {left:-20px;}
	#popWrap .popCon {padding:25px 20px;}
}
@media screen and (max-width:350px){
	#popWrap .popCon {top:calc(50% - 60px); padding:20px 15px;}
	#popWrap .popCon .topWrap {padding-bottom:20px;}
	#popWrap .popCon .imgWrap .floor {width:27px; height:27px;}
}
@media screen and (max-width:300px){
	#popWrap.on {left:-15px;}
}














/* 대메뉴명 > 페이지명 */
#con .s0000 {display:block;}


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