@charset "utf-8";
/* *******************************************************
 * filename : content_responsive.css
 * description : 서브페이지 컨텐츠 반응형 CSS
 * date : 2022-03-14
******************************************************** */


/* ******************  서브공통 ********************** */
/* -------- 공통 스크롤바  -------- */
@media all and (max-width:1279px){
	.custom-scrollbar-wrapper .scroll-object{max-width:100%;}
}
@media all and (max-width:800px){
	.custom-scrollbar-wrapper{position:relative;margin-right:calc(-1* var(--area-padding)); cursor:move}
	.custom-scrollbar-wrapper .scroll-object{max-width:none; width:800px; }
	.cm-scroll-drag-guide {display:flex; justify-content:flex-end; margin-right:var(--area-padding); }
	.cm-scroll-drag-guide .cm-scroll-drag-inner { position: relative; width:50px; height: 50px; }
	.cm-scroll-drag-guide .cm-scroll-drag-inner:before { position:absolute; top:4px; right:0; width:100%; height:3px; background-color:#ccc; content:""; border-radius:5px;}
	.cm-scroll-drag-guide .drag-tail { position: absolute; z-index: 1; left: 0px; top: 3px; animation:moveScrollAni 3s both infinite; }
	.cm-scroll-drag-guide .drag-tail .tail{display:block; width: 25px; height: 5px; background-color: rgba(0, 0, 0, 0.7); border-radius:5px; opacity:1; }
	.cm-scroll-drag-guide .drag-tail .hand-icon{ font-size:30px; color:#aaa }
	@keyframes moveScrollAni {
		0%, 10% {
			left: 0;
			margin-left: 0px;
		}
		50% {
			left: 100%;
			margin-left: -25px;
		}
		100% {
			left: 0;
			margin-left: 0px;
		}
	}
}

/* -------- 공통 :: 탭 -------- */
@media all and (max-width:1279px){
	.sub-tab-list-style .area{padding:0}
	/* Tab Fixed Move*/
	.sub-tab-list-style.top-fixed{top:80px;}
}
@media all and ( max-width: 800px ){
	/* Tab 공통 스타일 */
	.sub-tab-wrapper-style,
	.sub-tab-list-style.top-fixed,
	.sub-tab-list-style ul li a{height:40px; }
	.sub-tab-list-style ul li a em{font-size:13px}
	/* Tab Fixed Move*/
	/* Mobile Tab Drop Menu */
	.sub-drop-menu-style{position:relative;}
	.sub-drop-open-btn-style{display:block; position:relative; padding:0 15px; height:40px; line-height:40px; font-size:15px; background-color:#333; box-sizing:border-box;}
	.sub-drop-open-btn-style span{color:#fff; }
	.sub-drop-open-btn-style .arrow{color:#fff; position:absolute; top:50%; right:15px; margin-top:-7px}
	.sub-drop-open-btn-style.open .arrow{transform:rotate(180deg)}
	.sub-drop-menu-style ul{display:none; margin:0; height:auto; position:absolute; top:100%; left:0px; right:0px; background-color:#fff; border:1px solid #ddd; border-top:0; z-index:11; box-sizing:border-box;}
	.sub-drop-menu-style ul li{position:static; display:block; float:none; border:0; border-top:1px solid #eee; width:auto; background-color:transparent}
	.sub-drop-menu-style ul li:first-child{border-top:0; border-left:0}
	.sub-drop-menu-style ul li a{display:block; width:auto; height:auto; padding:10px 15px; border:0;}
	.sub-drop-menu-style ul li a em{font-size:13px;}
	.sub-drop-menu-style ul li.selected{background-color:transparent; border-color: #eee;}
	.sub-drop-menu-style ul li.selected a em{color:#f57f20; font-weight:600; }
}
@media all and (max-width:480px){
	/* Tab Fixed Move*/	
	.sub-tab-list-style.top-fixed{top:60px;}
}


/* ****************** 01 소개 :: 01 소개 ********************** */
@media all and (max-width:800px){
	.intro-con01{margin-top: 6rem; flex-direction: column-reverse;}
	.intro-con01-img{margin-top: 5rem; width: 100%; text-align: center;}
	.intro-con01-img img{max-width: 100%; display: inline-block;}
	.intro-con01-txt{width: 100%;}
	.intro-con01-txt h5{font-size: 3rem; line-height: 1.3;}
	.intro-con01-txt p{margin-top: 2.5rem; font-size: 1.62rem; line-height: 1.66;}
}


/* ****************** 01 소개 :: 02 이용안내 ********************** */
@media all and (max-width:800px){
	.information-con01-list{margin-top: 6rem;}
	.information-con01-item{padding: 6rem 0;}
	.information-con01-tit{margin-bottom: 1.5rem; width: 100%; padding-right: 0;}
	.information-con01-tit h5{font-size: 2.7rem; line-height: 1.29;}
	.information-con01-txt{width: 100%;}
	.information-con01-txt .tit{margin-bottom: 1.5rem; font-size: 2.3rem; line-height: 1.3;}
	.information-con01-txt p + .tit{margin-top: 3.5rem;}
	.information-con01-txt .txt{font-size: 1.62rem; line-height: 1.66;}
	.information-con01-txt .dot-txt{padding-left: 1.7rem; font-size: 1.6rem; line-height: 1.66;}
	.information-con01-txt .dot-txt + .dot-txt{margin-top: 0.5rem;}
	.information-con01-txt .dot-txt:before{top: 0.8rem; left: 0; width: 0.6rem; height: 0.6rem;}
	.information-con01-txt .caution-txt{margin-top: 1rem; padding-left: 2.4rem; font-size: 1.5rem; line-height: 1.6;}
	.information-con01-txt .caution-txt:before{top: -0.2rem; left: 0; font-size: 1.9rem;}
	/* 고해상 파일 신청 */
	.information-con01-txt .file-box{margin-top: 1.5rem; padding: 3rem; border-radius: 1.5rem;}
	.information-con01-txt .file-box h5{margin-bottom: 1rem; width:100%; font-size: 1.72rem; line-height: 1.68; padding-right: 0;}
	.information-con01-txt .file-box h5 br{display: none;}
	.information-con01-txt .file-box ul{margin-bottom: 2rem; width: 100%; padding-right: 0;}
	.information-con01-txt .file-box ul li{padding-left: 1rem; font-size: 1.62rem; line-height: 1.66;}
	.information-con01-txt .file-box .btn{width: 23.5rem; height: 6.5rem; font-size: 1.8rem; border-radius: 1rem;}
	.information-con01-txt .file-box .btn i{margin-left: 1rem;}
	.information-con01-txt .file-box .btn:hover span{left:1.5rem;}
	/* 문의 및 안내 */
	.information-con01-txt .tel-txt{margin-top: 2rem; font-size: 2.3rem; line-height: 1.3;}
	.information-con01-txt .tel-txt strong{margin-left: 2rem; font-size: 2rem;}
	.information-con01-txt .tel-txt strong i{top: 0.1rem; font-weight: 400; margin-right: 0.3rem;}
}


/* ****************** 01 소개 :: 03 저작권 관련 안내 ********************** */
@media all and (max-width:800px){
	.copyright-con01{margin-top: 2rem;}
	.copyright-con01 .top-txt{font-size: 1.85rem; line-height: 1.56;}
	.copyright-con01-list{margin-top: 6rem;}
	.copyright-con01-item{padding: 6rem 0;}
	.copyright-con01-tit{margin-bottom: 1.5rem; width: 100%; padding-right: 0;}
	.copyright-con01-tit h5{padding-left: 6rem; font-size: 2.7rem; line-height: 1.3;}
	.copyright-con01-tit h5 span{top: -1rem; left: -0.5rem; font-size: 4rem;}
	.copyright-con01-txt{width: 100%;}
	.copyright-con01-txt p{padding-left: 1.7rem; font-size: 1.62rem; line-height: 1.66;}
	.copyright-con01-txt p + p{margin-top: 1.5rem;}
	.copyright-con01-txt p:before{top: 0.8rem; width: 0.6rem; height: 0.6rem;}
}


/* ****************** 02 주제 :: 리스트 ********************** */
@media all and (max-width:800px){
	.sub-page .bbs-top-list-box.has-filter-box{padding: 0; flex-direction: column; align-items: flex-end;}
	.sub-page .bbs-top-list-box .total-list-con{margin-top: 2rem; width: 100%; text-align: left;}
	
	/* 페이크폼 */
	.fakeform-selectbox .select-title {text-indent: 1rem; height: 3.7rem; font-size: 1.45rem; line-height: 3.5rem}
	.fakeform-selectbox .select-title:after{right: 0.7rem; font-size: 1.45rem;}
	/* 옵션창 */
	.select-option span,
	.select-option strong {padding: 1rem 1rem; height: auto; font-size: 1.4rem; line-height: 1.4;}

	/* 리스트 */
	.cm-gallery-list{margin: -1rem -0.8rem;}
	.cm-gallery-item{width:calc(50% - 1.6rem); margin:1rem 0.8rem;}
	.cm-gallery-img .over-icon{margin: -2.5rem 0 0 -2.5rem; width:5rem; height:5rem; line-height:5rem; font-size:2rem;}
	.cm-gallery-txt{padding: 1rem 1.5rem; height: 8rem;}
	.cm-gallery-txt .tit{font-size:1.6rem; line-height: 1.3;}

	/* 리스트02 */
	.cm-gallery-list02 .cm-gallery-txt{height: 6rem;}
}


/* ****************** 02 주제 :: 뷰 ********************** */
@media all and (max-width:1279px){
	.cm-view-top{padding-top: 0;}
}
@media all and (max-width:800px){
	.cm-view-top-left{width: 100%; max-width: none;}
	.cm-view-top-right{margin-top: 5rem; padding-left: 0; width: 100%; max-width: none;}

	.cm-view-pdf-iframe{max-width: 50rem; width:100%; height:54.6rem;}

	.cm-view-pdf-slide{width: 100%;}
	.video-cover-box .icon i{font-size:6.5rem; line-height:6.5rem;}

	.cm-view-thum-container{margin-top: 3rem;}
	.cm-view-thum-item{width: 20%; height: 100%; opacity: 1; border: 1px solid #e5e5e5; box-sizing: border-box;}
	.cm-view-thum-item.swiper-slide-thumb-active {opacity: 1;}
	.cm-view-thum-item span{position: relative; width: 100%; height: 0; padding-top: 66.009%; display: block; background-color: #f6f6f6;}
	.cm-view-thum-item span img {position:absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; object-fit: contain; cursor: pointer;}
	.cm-view-thum-item span i{position:absolute; top:50%; left:50%;  z-index:1; transform: translate(-50%, -50%) rotate(90deg); font-size:2rem; color:#fff; line-height:2rem;}
	.cm-view-thum-item .video-thumb{background-color: #000;}
	.cm-view-thum-item .video-thumb img{opacity: 0.75; object-fit: cover;}

	.cm-view-top-right-tit{}
	.cm-view-top-right-tit h5{font-size: 2.8rem; line-height: 1.3;}
	.cm-view-top-right-info{margin-top: 1.5rem; padding-top: 1.5rem;}
	.cm-view-top-right-info dl + dl{margin-top: 1rem;}
	.cm-view-top-right-info dt, .cm-view-top-right-info dd{font-size: 1.55rem; line-height: 1.67;}
	.cm-view-top-right-caution dt,
	.cm-view-top-right-info dt{width: 10rem; padding-right: 1.5rem;}
	.cm-view-top-right-caution dd,
	.cm-view-top-right-info dd{width: calc(100% - 10rem);}
	.cm-view-top-right-caution{margin-top: 2rem; padding-top: 2rem;}
	.cm-view-top-right-caution dt{font-size: 1.8rem; line-height: 1.3;}
	.cm-view-top-right-caution dd{font-size: 1.45rem; line-height: 1.51;}

	.cm-view-hidden-txt{width: 100%; height: 3.02em;}
	.cm-view-hidden-btn{margin-top: 1rem; min-width: 9rem; padding: 0 2.6rem 0 1.2rem; font-size: 1.25rem; line-height: calc(3rem - 4px); border-radius: 3rem;}
	.cm-view-hidden-btn i{top: calc(50% + 0.1rem); right: 0.8rem; font-size: 1.35rem;}
	.cm-view-hidden-btn:hover span{left:0.8rem;}
	.cm-view-hidden-close{padding-left: 2rem;}

	.cm-view-top-right-btn{margin-top: 4rem; padding-top: 3rem;}
	.cm-view-top-right-btn a{width: calc(33.333% - 0.2rem); height: 5.5rem; font-size: 1.55rem;}
	/* 2개일 때 */
	.cm-view-top-right-btn a:nth-last-child(2):first-child,
	.cm-view-top-right-btn a:nth-last-child(2):first-child ~ a{width: calc(50% - 0.2rem);}
	/* 1개일 때 */
	.cm-view-top-right-btn a i{margin-left: 0.5rem; font-size: 2rem;}
	.cm-view-top-right-btn a:hover span{left:1.5rem;}
	
	.cm-view-bottom{margin-top: 7rem;}

	.cm-view-tab-list ul{height: 6.2rem;}
	.cm-view-tab-list ul li{width:19rem; margin-left:-1px;}
	.cm-view-tab-list ul li:first-child{margin-left:0;}
	.cm-view-tab-list ul li a{height: calc(6.2rem - 1px); line-height:1.3; font-size: 1.8rem;}
	.cm-view-tab-con{padding: 4rem 2.5rem;}
	.cm-view-tab-con .paging {margin: 4rem 0 0;}

	.cm-view-filter-box{padding-bottom: 1.7rem; margin-bottom: 2.5rem;}
	.cm-view-filter-item + .cm-view-filter-item{margin-left: 1.5rem;}
	.cm-view-filter-item .tit{margin-right: 0.7rem; font-size: 1.5rem; line-height: 1.3;}
	.cm-view-filter-item .fakeform-selectbox{width: 12rem;}
	.cm-view-filter-item + .cm-view-filter-item .fakeform-selectbox{width: 7rem;}
}