/* 공통 : 타이틀 */
h3.heading{ font-size:1.5rem; font-weight:700; color:#000;}

/* 공통 : 탭스타일 */
.tabTit li{ display: inline-block; margin-right:0.5rem;}
.tabTit li a{ display: block; min-width:7.5rem; text-align:center; padding:0.45rem 0.5rem; font-weight:600; font-size:0.8rem; border-radius:0.3rem;}

/* 공통 : 더보기버튼 */
.btn_more{ display: block; width:5rem; padding:0.4rem 0.5rem; text-align:center; font-size:0.7rem; color:#fff; margin:0 auto; text-align:center; border-radius: 1rem; background:#403d36;}

/* section */
#container > section{ position:relative;}
.section01{ z-index: 0;}
.section02{ width:100%; margin-top:-3rem; padding:4rem 0; background:url('/images/web/archives/main/section02_bg.png') repeat-x center top; z-index: 1; }
.section03{ width:100%; max-width:88rem; margin:0 auto; padding:3.5rem 0; background-color:#f5f1ed; background-image:url('/images/web/archives/main/section03_pttrn01.png'), url('/images/web/archives/main/section03_pttrn02.png'); background-repeat: repeat-x; background-position: 0 10px, 0 calc(100% - 10px); z-index: 1; }
.section03:before{ content:""; position:absolute; left:2rem; bottom:4rem; width:18rem; height:6.25rem; background:url('/images/web/archives/main/section03_bg01.png') no-repeat center/cover;}
.section03:after{ content:""; position:absolute; right:0; top:3.5rem; width:12rem; height:10.75rem; background:url('/images/web/archives/main/section03_bg02.png') no-repeat center/cover;}
.section04{ width:100%; padding:3.5rem 0; background:url('/images/web/archives/main/section04_bg.png') repeat-x center bottom; }

/* 비주얼 */
.Mvisual{ position:relative; height:33.75rem; width:100%; overflow:hidden; }
.Mvisual .visual{ position:relative; z-index: 0;}
.Mvisual .visual .item img{ position:relative; left:50%; transform: translateX(-50%); -webkit-transform: translateX(-50%);}
.Mvisual .control{ position:absolute; left:0; bottom:3rem; width:100%; display: flex; align-items: center; justify-content: center; color:#fff; z-index: 1;}
.Mvisual .control a{ display:block; width:2rem; text-align: center;}
.Mvisual .control .page{ font-size:0.7rem;}
.Mvisual .control .page strong{ font-weight:600;}
.Mvisual .control .page span{ opacity: 0.8;}
.Mvisual .control .page span:before{ display: inline-block; content: "/";}

/* 컬렉션 */
.clctn { position:relative; height:35.75rem; overflow:hidden; z-index:1;}
.clctn .tabTit{ margin-top:1rem;}
.clctn .tabTit li a{ background:#e6e2df; border:1px solid #e6e2df;}
.clctn .tabTit li.on a{ background:#7a563c; color:#fff;}
.clctn .tabTit li:not(.on) a:hover{ color:#56341b; border:1px solid #7a563c;}
.clctn .tabWrap { position:relative; height:25.5rem; margin-top:4rem; }
.clctn .list_box{ position:absolute; left:50%; bottom:0; width:100%; max-width:2090px; transform: translateX(-50%); -webkit-transform: translateX(-50%); opacity: 0; visibility: hidden;}
.clctn .list_box.on{ visibility: visible; opacity: 1; }
.clctn .clcSlide .slick-list{ padding-top:1rem !important; overflow:visible;}
.clctn .clcSlide .item{ display:inline-block;}
.clctn .clcSlide a { position:relative; display:block; margin:0 1.5rem; text-align:center; z-index:1;}
.clctn .clcSlide a:before{ content:""; position:absolute; left:50%; top:-2rem; width:25rem; height:25rem; border-radius:50%; transform: translateX(-50%) scale(0); -webkit-transform: translateX(-50%) scale(0); background:#f5f2ed; z-index:-1;}
.clctn .clcSlide a .img{ display:flex; align-items:center; justify-content:center; width:17.5rem; height:17.5rem; overflow:hidden; background:rgba(0,0,0,0.1);}
.clctn .clcSlide a .img img{ width:100%; height:auto;}
.clctn .clcSlide a strong,
.clctn .clcSlide a span{ display: block; overflow:hidden; text-overflow: ellipsis; white-space: nowrap;}
.clctn .clcSlide a strong{ font-size:0.85rem; font-weight: 600; color:#000; margin:1rem auto 0.5rem;}
.clctn .clcSlide a span{ font-size:0.75rem;}
.clctn .clcSlide a:hover ,
.clctn .clcSlide a:focus { margin-top:-1rem; z-index: 0; }
.clctn .clcSlide a:hover:before ,
.clctn .clcSlide a:focus:before { transform: translateX(-50%) scale(1); -webkit-transform: translateX(-50%) scale(1);}
.clctn .clcSlide a:hover .img,
.clctn .clcSlide a:focus .img{ border-radius:3rem 0; box-shadow:0 0 10px rgba(0,0,0,0.2); }
.clctn .tabWrap .control{ position:relative; margin-top:2.5rem; text-align:center; z-index:3;}
.clctn .tabWrap .control > a{ width:1.75rem; height:1.75rem; line-height:1.75rem; text-align: center; color:#777; border:1px solid #ccc; border-radius:50%; display:inline-block; vertical-align: middle; margin:0 0.15rem}
.clctn .tabWrap .control > a.more{ background:#403d36; color:#fff; }
.clctn .tabWrap .control > a.play{ display:none; }
/* 컬렉션 : 검색 */
.clctnSrch { position:absolute; right:calc(50% - 35rem); top:2.25rem;}
.clctnSrch form{ display:flex;}
.clctnSrch select { height:3rem; line-height:3rem; padding:0 2.5rem 0 0.25rem; border:0; border-bottom:2px solid #333; appearance: none; -webkit-appearance: none; background:url('/images/web/archives/main/bg_selectbox.png') no-repeat 100% 50%; }
.clctnSrch .srchForm{ flex:1; min-width:0px; display:flex; height:3rem; align-items: center; border-bottom:2px solid #333; }
.clctnSrch .srchForm input[type="text"]{ flex:1; min-width:0px; height:3rem; line-height:3rem; padding:0 0.25rem; border:0; background:none; margin:0 1rem;}
.clctnSrch .srchForm button{ display:flex; align-items: center; justify-content: center; width:2.5rem; height:2.5rem; line-height:2.5rem; margin:0 3px; border-radius:50%; font-size:1.1rem; color:#fff; background:#7a563c; border:1px solid #7a563c;}
.clctnSrch .srchForm button.filter{ padding:0 0.25rem; word-break: keep-all; font-size:13px; line-height:1.2; background:#000; border:1px solid #000;}
.clctnSrch .srchForm button:hover,
.clctnSrch .srchForm button:focus{ color:#7a563c; background:none;}
.clctnSrch .srchForm button.filter:hover,
.clctnSrch .srchForm button.filter:focus{ color:#000; }
/* 컬렉션 : 싱세검색 */
.clctnSrch .srchFilter{ display: none; position:absolute; right:0; top:0; width:100%; background:#000; padding:1.5rem; z-index: 1;}
.clctnSrch .srchFilter.open{ display:block;}
.clctnSrch .srchFilter h3{ color:#fff; font-weight: 700; font-size:1rem;}
.clctnSrch .srchFilter .filter { display: flex; flex-wrap: wrap; margin:1rem 0 0.75rem;}
.clctnSrch .srchFilter .filter select{ width:48%; height:2rem; line-height:2rem; background:none; border-radius:5px; border:1px solid #fff; color:#fff; padding:0 2.5rem 0 0.5rem; margin:0.25rem 1%; background:url('/images/web/archives/main/bg_selectbox_wh.png') no-repeat calc(100% - 0.5rem) 50%;}
.clctnSrch .srchFilter .filter option{ color:#333;}
.clctnSrch .srchFilter .srchForm{ border-color:#fff;}
.clctnSrch .srchFilter .srchForm input[type="text"]{ color:#fff; margin-left:0;}
.clctnSrch .srchFilter .srchForm input[type="text"]::placeholder{ color:#fff; }
.clctnSrch .srchFilter .srchForm button:hover,
.clctnSrch .srchFilter .srchForm button:focus{ background:#fff;}
.clctnSrch .srchFilter .btn_close{ position:absolute; right:1.5rem; top:1.25rem; color:#fff; font-size:1.1rem;}
/* 컬렉션 : active */
.clctn button{ transition: all .1s; -webkit-transition: all .1s;}
.clctn .tabWrap a,
.clctn .tabWrap a .img,
.clctn .tabWrap a:before{ transition: all .2s; -webkit-transition: all .2s;}

/* 기록전시관 */
.exhbt { position:relative; height:29rem; z-index:1;}
.exhbt .tabTit{ margin-top:1rem;}
.exhbt .tabTit li a{ background:#fff; border:1px solid #fff;}
.exhbt .tabTit li.on a{ background:#7a563c; color:#fff;}
.exhbt .tabTit li:not(.on) a:hover{ color:#56341b; border:1px solid #7a563c;}
.exhbt .list_box{ display: none; margin:2rem auto 0; }
.exhbt .list_box.on{ display: block;}
.exhbt .list_box ul{ display: flex; width:calc(100% + 2rem); margin-left:-1rem; margin-bottom:1.75rem;}
.exhbt .list_box li{ width:25%; padding:0 1rem; }
.exhbt .list_box li a{ display: block; border:1px solid #e0d5c9; background:#fff;}
.exhbt .list_box li a .img{ display: flex; align-items:center; justify-content:center; }
.exhbt .list_box li a .img p{ display: flex; align-items: center; justify-content: center; width:100%; height:16rem; line-height:0; background:#f1f1f1; transform: scale(0.75); -webkit-transform: scale(0.75); overflow: hidden;}
.exhbt .list_box li a .img img{ width:100%; height:auto;}
.exhbt .list_box li a .txt{ padding:0 0.5rem; text-align:center; background:#e0d5c9;}
.exhbt .list_box li a .txt span{ display: block; font-weight:600; line-height:2.5rem; overflow:hidden; text-overflow: ellipsis; white-space: nowrap;}
.exhbt .more{ position:absolute; right:0; top:3.1rem; width:8.5rem; line-height: 1.9rem; text-align:center; font-weight:600; font-size:0.75rem; border:2px solid #7a563c; color:#7a563c; border-radius:5px;  }
.exhbt .more i{ margin-left:0.5rem;}
.exhbt .more:hover,
.exhbt .more:focus{ background:#7a563c; color:#fff;}
.exhbt .list_box li a:hover,
.exhbt .list_box li a:focus{ border-color:#7a563c; box-shadow:0 0 10px rgba(0,0,0,0.2); }
.exhbt .list_box li a:hover .txt,
.exhbt .list_box li a:focus .txt{ background:#7a563c; color:#fff;}
.exhbt .list_box li a:hover .img p,
.exhbt .list_box li a:focus .img p{ opacity: 0.85; transform: scale(0.9); -webkit-transform: scale(0.9);}
.exhbt .list_box li a,
.exhbt .list_box li a p{ transition: all .2s; -webkit-transition: all .2s;}
/* 기록전시관 : 전체주제보기 팝업 */
.exhbtPopup{ display:none; position: fixed; left:0; top:4.5rem; width:100%; height: calc(100vh - 4.5rem); padding:2rem 0; background:#f5f2ed; overflow:auto; z-index: 99;}
.exhbtPopup h3{ color:#542f14; font-size:1.5rem; font-weight:700; text-align:center;}
.exhbtPopup dl{ margin-top:2rem;}
.exhbtPopup dt{ padding:0.25rem 0.5rem; font-size:1rem; font-weight: 700;}
.exhbtPopup dd .lst{ display: flex; flex-wrap: wrap;}
.exhbtPopup dd .lst li{ width:16.66%; padding:0.25rem;}
.exhbtPopup dd .lst li a{ height:100%; display: flex; align-items: center; padding:1rem; border-radius:1rem; border:1px solid #dfd5c9; background:#fff;}
.exhbtPopup dd .lst li a p{ flex:1; margin-right:0.25rem; font-weight:600; font-size:0.85rem;}
.exhbtPopup dd .lst li a span{ min-width:2.5rem; text-align:right; color:#532f15; line-height:0.9rem; font-size: 0.7rem; border-left:2px solid #bcaa9c;}
.exhbtPopup dd .lst li a:hover,
.exhbtPopup dd .lst li a:focus{ border-color:#542f14;}
.exhbtPopup .btn_close{ position:absolute; right:1rem; top:0.15rem; padding:0.35rem 0.75rem; color:#fff; font-weight:600; border-radius:1rem; background:#403d36;}
.exhbtPopup .btn_close i{ padding-left:1rem; }

/* 드론으로 보는 우리학교 */
.schView { position:relative; z-index:1;}
.schView .list_box{ margin:2rem auto 0; }
.schView .list_box ul{ display: flex; width:calc(100% + 2rem); margin-left:-1rem; margin-bottom:1.75rem;}
.schView .list_box li{ width:25%; padding:0 1rem; }
.schView .list_box li a{ display: block; border:1px solid #e0d5c9; background:#fff;}
.schView .list_box li a .img{ display: flex; align-items:center; justify-content:center; }
.schView .list_box li a .img p{ display: flex; align-items: center; justify-content: center; width:100%; height:16rem; line-height:0; background:#f1f1f1; transform: scale(0.75); -webkit-transform: scale(0.75); overflow: hidden;}
.schView .list_box li a .img img{ width:100%; height:auto;}
.schView .list_box li a .txt{ padding:0 0.5rem; text-align:center; background:#7a563c;}
.schView .list_box li a .txt span{ display: block; color:#fff; font-weight:600; line-height:2.5rem; overflow:hidden; text-overflow: ellipsis; white-space: nowrap;}
.schView .more{ position:absolute; right:0; top:3.1rem; width:8.5rem; line-height: 1.9rem; text-align:center; font-weight:600; font-size:0.75rem; border:2px solid #7a563c; color:#7a563c; border-radius:5px;  }
.schView .more i{ margin-left:0.5rem;}
.schView .list_box li a:hover,
.schView .list_box li a:focus{ border-color:#403d36; box-shadow:0 0 10px rgba(0,0,0,0.2); }
.schView .list_box li a:hover .txt,
.schView .list_box li a:focus .txt{ background:#403d36; color:#fff;}
.schView .list_box li a:hover .img p,
.schView .list_box li a:focus .img p{ opacity: 0.85; transform: scale(0.9); -webkit-transform: scale(0.9);}
.schView .list_box li a,
.schView .list_box li a p{ transition: all .2s; -webkit-transition: all .2s;}

/* 배너존 */
.banner_zone {line-height: 1; background: #fff; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;}
.banner_zone .container {position: relative; height: 4rem; overflow: hidden;}
.banner_zone .btn {float: left; margin-top: 1.1rem; overflow: hidden;}
.banner_zone .btn a {float: left; margin-right: 0.25rem; width: 1.8rem; height: 1.8rem; line-height: 1.8rem; text-align: center; font-size: 1.1rem; color: #000; background: #f6f6f6; border-radius: 50%; overflow: hidden;}
.banner_zone .btn a.play {display: none;}
.banner_zone .btn a:hover,
.banner_zone .btn a:focus{ background:#ddd;}
.banner_zone .bnWrap {float: left; padding-top: 0.75rem; padding-left: 1.5rem; width: calc(100% - 8.25rem); overflow: hidden;}
.banner_zone .bnWrap a {display: block; height: 2.5rem; line-height: 2.3rem; text-align: center; margin:0 5px; overflow: hidden;}
.banner_zone .bnWrap a img {max-width: 100%; max-height: 100%; vertical-align: middle;}
/* 배너존 : active */
.banner_zone .btn a:hover,
.banner_zone .btn a:focus {background: #f1f1f1;}

@media (max-width: 1440px) {
    .clctnSrch{ right:1rem;}

    .exhbt .list_box li{ padding:0 0.5rem;}

    .schView .list_box li{ padding:0 0.5rem;}

    /* 기록전시관 : 전체주제보기 팝업 */
    .exhbtPopup dd .lst li{ width:20%;}
}

@media (max-width: 1240px) {

    .tabTit ul{ display:flex; flex-wrap: wrap;}
    .tabTit li{ flex:1;}
    .tabTit li a{ min-width:0px;}

    .clctn{ height:auto;}
    .clctn h3.heading{ line-height:3rem;}
    .clctn .tabTit{ margin-top:2rem;}
    .clctnSrch{ top:0;}

    .exhbt .more{ top:0; z-index: 1;}
    .exhbt .list_box li{ width:33.33%;}
    .exhbt .list_box li:nth-child(n + 4){ display: none;}

    .schView .list_box li{ width:33.33%;}
    .schView .list_box li:nth-child(n + 4){ display: none;}

    /* 기록전시관 : 전체주제보기 팝업 */
    .exhbtPopup{ top:3.5rem; height:calc(100vh - 3.5rem);}
    .exhbtPopup dd .lst li{ width:25%;}

}

@media (max-width: 960px) {
    /* 비주얼 */
    .Mvisual{ height:auto;}
    .Mvisual .visual .item img{ width:200%; left:-50%; transform: none; -webkit-transform: none;}

    .exhbt .list_box li{ width:50%;}
    .exhbt .list_box li:nth-child(n + 3){ display: none;}

    .schView .list_box li{ width:50%;}
    .schView .list_box li:nth-child(n + 3){ display: none;}
}

@media (max-width: 860px) {

    /* 기록전시관 : 전체주제보기 팝업 */
    .exhbtPopup dd .lst li{ width:33.33%;}

	/* 배너존 */
	.banner_zone .btn {margin-top: 1.3rem;}
	.banner_zone .btn a {width: 1.5rem; height: 1.5rem; line-height: 1.5rem; font-size: 1rem;}
	.banner_zone .bnWrap {padding-left: 0.5rem; width: calc(100% - 7rem);}
}

@media (max-width: 768px) {

	.section04{ padding:2.5rem 0 3rem;}

    /* 공통 : 타이틀 */
    h3.heading{ font-size:1.3rem;}

	.clctn .tabTit li{ flex:auto; width:calc(50% - 0.5rem); margin:0.25rem;}
    .clctnSrch .srchForm button.filter{ font-size:12px;}

	.exhbt{ height:auto;}
	.exhbt .tabTit li{ flex:auto; width:calc(33.33% - 0.5rem); margin:0.25rem;}
    .exhbt .list_box{ margin:1rem auto 0;}
    .exhbt .list_box li a .img p{ height:13rem; transform:scale(0.8); -webkit-transform:scale(0.8);}

	.schView .tabTit li{ flex:auto; width:calc(33.33% - 0.5rem); margin:0.25rem;}
    .schView .list_box{ margin:1rem auto 0;}
    .schView .list_box li a .img p{ height:13rem; transform:scale(0.8); -webkit-transform:scale(0.8);}

    .exhbtPopup h3{ font-size:1.25rem; text-align:left;}
    .exhbtPopup .btn_close i{ padding-left:0.5rem; }
}

@media (max-width: 640px) {

    .clctnSrch{ position:relative; right:auto; top:auto; width:100%;}
    .clctn .tabTit{ margin-top:1rem;}

    /* 기록전시관 : 전체주제보기 팝업 */
    .exhbtPopup dd .lst li{ width:50%;}
}

@media (max-width: 560px) {

    .clctn .tabWrap{ height:20.5rem;}
    .clctn .clcSlide a{ margin:0 0.75rem;}
	.clctn .clcSlide a .img{ width:13rem; height:13rem;}
    .clctn .clcSlide a:before{ width:20rem; height:20rem;}
}

@media (max-width: 480px) {

    .exhbt .more{ width:auto; padding:0 0.75rem;}
    .exhbt .list_box li a .img p{ height:11rem; }

    .schView .list_box li a .img p{ height:11rem; }
}

@media (max-width: 390px) {

	.clctnSrch form{ display:block;}
	.clctnSrch select{ width:100%; margin-bottom:0.5rem;}
	.clctnSrch .srchForm input[type="text"]{ margin-left:0; margin-right:0.5rem;}

    .exhbt .tabTit li{ width:calc(50% - 0.5rem); }
    .exhbt .list_box li{ width:100%;}
    .exhbt .list_box li:nth-child(n + 2){ display: none;}
    .exhbt .list_box li a .img{ padding:0.75rem; }
    .exhbt .list_box li a .img p{ height:12rem; transform:none; -webkit-transform:none;}

    .schView .list_box li{ width:100%;}
    .schView .list_box li:nth-child(n + 2){ display: none;}
    .schView .list_box li a .img{ padding:0.75rem; }
    .schView .list_box li a .img p{ height:12rem; transform:none; -webkit-transform:none;}

    /* 기록전시관 : 전체주제보기 팝업 */
    .exhbtPopup dd{ max-height:19.25rem; overflow-y: auto;}
    .exhbtPopup dd .lst li{ width:100%;}
}