@charset "utf-8";
/* *******************************************************
 * filename : content.css
 * description : 서브페이지 컨텐츠 CSS
 * date : 2022-03-14
******************************************************** */

/* ******************  서브공통 ********************** */
/* -------- 공통 스크롤바  -------- */
.custom-scrollbar-cover,
.cm-scroll-drag-guide{display:none;}

/* -------- 공통 :: 탭 -------- */
/* Tab 공통 스타일 */
.sub-tab-wrapper-style{position:relative; height:60px; margin-bottom:15px; }
.sub-tab-list-style ul{display:table; width:100%; height:100%; table-layout:fixed;}
.sub-tab-list-style ul:after{display:none}
.sub-tab-list-style ul li{/* float:left; */ display:table-cell; vertical-align:middle; position:relative; width:20%; background-color:#fff; border:1px solid #e5e5e5; border-left:0 }
.sub-tab-list-style ul li:first-child{border-left:1px solid #e5e5e5;}
.sub-tab-list-style ul li a{display:table; height:58px; width:100%; }
.sub-tab-list-style ul li a em{display:table-cell; vertical-align:middle; color:#494949; font-size:18px; letter-spacing:-0.30px; text-align:center;}
.sub-tab-list-style ul li.selected{z-index:1; background-color:#333; border-color:#333;}
.sub-tab-list-style ul li.selected a em{color:#fff; }
/* Tab Fixed Move*/
.sub-tab-list-style.top-fixed{position:fixed; top:70px; left:0; width:100%; height:60px;}
/* Mobile Tab Drop Menu */
.sub-drop-open-btn-style{display:none}

@media all and (min-width:1025px){
	/* Tab Fixed Background */
	.sub-tab-list-style:before{position:absolute; top:0px; bottom:0px; left:50%; width:0; content:""; background-color:#fff; border-bottom:1px solid #e5e5e5; transition:all 0.5s}
	.sub-tab-list-style.top-fixed:before{width:100%; margin-left:-50%}
}

/* ****************** 소개 :: 온라인자료관소개 ********************** */
.intro-page article:not(.con1) {display:flex; align-items:center;}
.intro-page article .con-tit {font-size:2.6rem; letter-spacing:-0.025em; color:#222; line-height:1.538; font-weight: 500; margin-bottom: 1.5rem;}
.intro-page article .sub-txt {font-size:2rem; letter-spacing:-0.025em; color:#222; line-height:1.7; font-weight: 300;}
.intro-page article .sub-img {position: absolute; top:0; left:0; right:0; bottom:0; max-width:100%; max-height:100%; box-shadow: 10px 11px 24px 0px rgba(0, 0, 0, 0.1);}
.intro-page .con1 {margin-bottom:24.5rem;}
.intro-page .con1 .img-box {position: absolute; width:40.2rem; left:10rem; bottom:-14rem; height:0; padding-top:20.66%;}
.intro-page .con2 {margin-bottom: 44rem;}
.intro-page .con2 > div {width: 50%;}
.intro-page .con2 .img-box {position: absolute; width:27.1rem; left:1.7rem; top:17.3rem; height:0; padding-top:66.09%;}
.intro-page .con2 .left-box {padding-top:8.5rem;}
.intro-page .con2 .right-box {padding-left:10.5rem; box-sizing:border-box;}

.intro-page .con3 {margin-bottom: 28.2rem;}
.intro-page .con3 .left-box {width: 54.18%;}
.intro-page .con3 .right-box {width: calc(100% - 54.18%); padding-left: 9rem; box-sizing: border-box;}
.intro-page .con3 .img-box{position:absolute; right:3.4rem; bottom:-7.2rem; width: 32rem; padding-top: 30.92%; height:0;}
.intro-page .con3 .sub-img {}

.intro-page .con4 .con-tit {letter-spacing:-0.072em;}
.intro-page .con4 .left-box {width: 59.91%; padding-left:6rem; box-sizing:border-box;}
.intro-page .con4 .right-box {display: flex; width: calc(100% - 59.91%); padding-left:0;}
.intro-page .con4 .right-box .intro-img-box {margin-right: 2rem;}
.intro-page .con4 .right-box .intro-img-box:last-of-type {margin-right: 0;}
.intro-page .con4 img {box-shadow: 10px 11px 24px 0px rgba(0, 0, 0, 0.1);}

.intro-top-tit {text-align:center; margin-bottom: 7rem;}
.intro-top-tit .tit {font-size:3.4rem; letter-spacing:-0.025em;  color:#222; line-height:1.529; margin-bottom: 1rem;}
.intro-top-tit .sub-tit , .info-page .info-tit{font-size:2.3rem; letter-spacing:-0.025em; color:#222; line-height:1.652; text-align:center; font-weight: 400;} 
.intro-img-box{position: relative;}
.intro-img-box img{max-width:100%; border-radius:10px;}


@media all and (max-width:800px){
	.intro-page article:not(.con1) {flex-wrap:wrap;}
	.intro-top-tit .tit {font-size:2.5rem;}
	.intro-top-tit .sub-tit , .info-page .info-tit {font-size:2rem;}
	.intro-page article .con-tit {font-size:2.2rem;}
	.intro-page article .sub-txt {font-size:1.6rem;}
	.intro-page .con2 {margin-bottom: 22rem;}
	.intro-page .con2 .left-box , .intro-page .con3 .left-box , .intro-page .con4 .left-box{width: 100%;}
	.intro-page .con2 .right-box , .intro-page .con3 .right-box , .intro-page .con4 .right-box{width: 100%;}
	
	.intro-page .con1 {margin-bottom:12.25rem;} 
	.intro-page .con1 .img-box {padding-top:33.57%; bottom:-10rem;}
	.intro-page .con2 .left-box {margin-bottom:5rem;}
	.intro-page .con2 .right-box {padding-left:0;}
	.intro-page .con2 .img-box {padding-top:45%;}

	.intro-page .con3 {margin-bottom: 14.1rem; flex-direction:column-reverse;} 
	.intro-page .con3 .left-box {/* margin-bottom: 10rem; */}
	.intro-page .con3 .right-box {padding-left: 0; margin-bottom: 5rem;}

	.intro-page .con4{flex-direction: column-reverse;}
	.intro-page .con4 .left-box {padding-left: 0; margin-bottom: 5rem;}
	.intro-page .con4 .right-box {justify-content:center; }
	/* .intro-img-box {display:flex;}
	.intro-img-box > * {width:50%;}
	.intro-page .con1 {margin-bottom:10rem;}
	.intro-page .con1 .img-box {position: relative; left:0; bottom:0; padding-top:26.66%;} */
}

/* ****************** 소개 :: 공지사항 ********************** */
/* ****************** 공통 :: SEARCH BOX ********************** */
.bbs-top-list-box{display:flex; align-items:flex-end; justify-content:space-between; flex-direction:row-reverse; flex-wrap:wrap; margin-bottom:3rem;}
.board-search-box{text-align:center; width:46.66%;}
.board-search-box .board-search-inner{position: relative; max-width:560px; height:6rem; box-sizing:border-box; border:1px solid #e2e2e2; background-color:#f5f5f5; border-radius:1rem;}
.board-search-box .board-search-inner:after{display:none;}
.board-search-box .search-subject-select,
.board-search-box .search-word{height:100%; background-color:transparent; border:0; padding:0 2.5rem; padding-right:13rem; font-size:1.8rem; color:#333; letter-spacing:-0.025em; box-sizing:border-box; font-weight:300;}
.board-search-box .search-subject-select{width:120px; }
.board-search-box .search-subject-select:not(.custom-select){padding-left:1em;}
.board-search-box .search-word{width:100%; border-right:0;}
.board-search-box .search-subject-select + .search-word,
.board-search-box .board-custom-select-box + .search-word{width:calc(100% - 170px); border-left:1px solid #ddd; }
.board-search-box .search-subject-select:focus,
.board-search-box .search-word:focus{color:#222; outline:none; background-color:transparent;}
.board-search-box .search-word::placeholder{color:#a9a9a9;}
.board-search-box .search-word::-webkit-search-cancel-button{display:none;}
.board-search-box .bbs-search-btn{position: absolute; top:50%; right:1rem; transform:translateY(-50%); width:11.2rem; height:4rem; line-height:4rem; font-size:1.8rem; letter-spacing:-0.025em; color:#fff; cursor:pointer; vertical-align:top; background:var(--main-color); border-radius:1rem;}
.board-search-box .bbs-search-btn i{position: relative; font-size:2rem; top:3px; margin-right:1rem;}

.total-list-con{font-size:2rem; line-height:1.5; letter-spacing:-0.025em; color:#222; font-weight:700;}
.total-list-con .cm-bbs-font-color{position: relative; color:var(--main-color); padding:0 2px}
.total-list-con .cm-bbs-font-color:before{position: absolute; content:''; width:100%; height:1.1rem; bottom:0; left:0; background:var(--main-color); opacity:0.2;}


.bbs-list-style{border-top:1px solid #d7d7d7;}
.bbs-list-style .bbs-item > a{
	display:flex; position:relative; padding:3rem; height:14rem; border:1px solid transparent; background-color:#fff; border-bottom:1px solid #d7d7d7; box-sizing:border-box;
	-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s
}
.bbs-list-style .bbs-item > a:before{position: absolute; content:''; width:calc(100% + 1px); height:calc(100% + 1px); top:-1px; left:-1px; border:1px solid var(--main-color); box-sizing:border-box; border-radius:5px; z-index:1; opacity:0; transition:all 0.3s; box-shadow: 9px 15px 38px 0px rgba(0, 0, 0, 0.07);}
.bbs-list-style .bbs-item .bbs-list-num{display:block; width:4.5rem; font-size:1.6rem; line-height:2rem; letter-spacing:-0.025em; color:var(--main-color);}
.bbs-list-style .bbs-item .bbs-subject-box{display:block; position:relative; } 
.bbs-list-style .bbs-item .bbs-subject-info-box{display: flex; margin-bottom:2.5rem;}
.bbs-list-style .bbs-item .bbs-subject-info-box p{font-size:1.6rem; line-height:2rem; letter-spacing:-0.025em; color:rgba(34,34,34,0.8); font-weight:300;}
.bbs-list-style .bbs-item .bbs-subject-info-box p.bbs-subject-name{position: relative; margin-right:2rem; padding-right:2rem;}
.bbs-list-style .bbs-item .bbs-subject-info-box p.bbs-subject-name:before{position: absolute; content:''; right:0; top:0.3rem; width:1px; height:1.3rem; background:#d7d7d7;}
.bbs-list-style .bbs-item .bbs-subject-txt-box{display:inline-block; position:relative; max-width:100%; }
.bbs-list-style .bbs-item .bbs-subject-txt{display: inline-block; padding-right: 5px; overflow: hidden; width: 100%; text-overflow: ellipsis; white-space: nowrap; font-size:2.2rem; font-weight:700; line-height:1.45; vertical-align:middle; color:#222; letter-spacing:-0.025em; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}
.bbs-list-style .bbs-item .bbs-list-info-con{width:calc(100% - 10rem);}
.bbs-list-style .bbs-item .bbs-list-info-con .notice-tit{display:inline-block; vertical-align:middle; height:25px; line-height:25px; border:1px solid #000; padding:0 15px; font-size:14px; letter-spacing:-0.5px; color:#000; margin-right:10px;}
.bbs-list-style .bbs-item .bbs-subject-txt .category{margin-right:5px; }
.bbs-list-style .bbs-item .bbs-right-info-con{position:absolute; top:50%; right:3rem; transform:translateY(-50%); text-align:right;}
.bbs-list-style .bbs-item .bbs-right-info-con .bbs-more-btn{font-size:2.4rem; line-height:1.25; color:#222;}


.bbs-list-style .bbs-item > a:hover:before{opacity:1;}
.bbs-list-style .bbs-item > a:hover .bbs-subject-txt{color:var(--main-color);}

@media all and (max-width:800px){
	.board-search-box {width: 100%;}
	.board-search-box .board-search-inner {max-width:initial;}
	.bbs-top-list-box {flex-direction:row;}
	.bbs-list-con .total-list-con {margin-top:3rem;}
}


/* ****************** 공통 :: PAGING ********************** */
.paging{display:flex; justify-content:center; width:100%; text-align:center; margin:30px 0; flex-wrap:wrap;}
.paging a{position:relative; display:block; height:30px;  line-height:1.6; margin:0 1.5rem; border:1px solid #ddd; text-align:center; font-size:2rem; font-weight:300; color:#a9a9a9; letter-spacing:-0.025em; background-color:#fff; border:none; transition:all 0.3s;}
.paging a:hover{color:var(--main-color);}

.paging-style a.cur{border-color:var(--main-color); color:var(--main-color); font-weight:700;}
.paging-style a.cur:after{position:absolute; bottom:0px; left:50%; width:100%; margin-left:-50%; height:2px; background-color:var(--main-color); content:"";}

/* ****************** 공통 :: 공지사항 view ********************** */
.bbs-view-con {border-top:2px solid #000;  border-bottom:1px solid #e6e6e6; margin-bottom:5rem;}
.bbs-view-con .bbs-view-top {display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #ededed; padding:0 3rem;}
.bbs-view-con .bbs-tit {font-size:2.4rem; line-height:1.4; letter-spacing:-0.025em; color:#222; padding:3.5rem 0; }
.bbs-view-con .bbs-write-info {display:flex;}
.bbs-view-con .bbs-write-info dd {font-size:1.6rem; letter-spacing:-0.025em; color:rgba(34,34,34,0.8);}
.bbs-view-con .bbs-write-info dd:first-child {position: relative; padding-right: 2rem;}
.bbs-view-con .bbs-write-info dd:first-child:after {display:block; content:""; position:absolute; width:1px; height:1.3rem; background: #d7d7d7; right:0; top:50%; transform:translateY(-50%);}
.bbs-view-con .bbs-write-info dd:last-child {margin-left: 2rem;}
.bbs-view-content {font-size:1.6rem; padding:5rem 3rem;}
/* .bbs-view-content .view-con-inner {padding:0 3rem;} */
.bbs-view-con .down-list {display:flex; flex-wrap:wrap; margin:0; padding-left:0;}
.bbs-view-con .down-list li {width: calc(50% - 2rem); margin-right: 2rem; box-sizing:border-box; list-style:none; border:1px solid #d2d2d2; border-radius:6px; margin-bottom: 2rem; display:flex; align-items:center; justify-content: space-between;}
.bbs-view-con .down-list li:nth-of-type(even) {margin-right: 0;}
/* .bbs-view-con .down-list li:nth-of-type(3) , .bbs-view-con .down-list li:nth-of-type(4) {margin-bottom:0;} */
.bbs-view-con .down-list li > a {display:flex; justify-content:space-between; align-items:center; width:100%; padding:1.45rem 2.9rem;}
.bbs-view-con .down-list li .left-box {display:flex; align-items:center; width:calc(100% - 70px);}
.bbs-view-con .down-list .icon-box {position: relative; height: 0; padding-top:31px; width:31px; margin-right: 1.8rem;}
.bbs-view-con .down-list .item-tit {font-size:1.6rem; letter-spacing:-0.025em; color:#222; overflow:hidden; display:block; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.bbs-view-con .down-list .down-btn {color:#222; text-decoration:none; width:70px;}
.bbs-view-con .down-list .down-btn em {margin-right:1.5rem; font-style:normal;}
.bbs-view-con .down-list .down-btn i {position: relative; top:2px; font-style:normal;}
.cm-btn-controls {display: flex; justify-content:center; margin:5rem 0;}
.cm-btn-controls > div{display: flex;}
.cm-btn-controls .btn-style01, 
.cm-btn-controls .btn-style02,
.cm-btn-controls .btn-style03{display:flex; justify-content:center; align-items:center; border-radius:6px; font-size:1.8rem; letter-spacing:-0.025em; color:#3a3a3a; border:1px solid #545454; width:16rem; height:5.4rem; margin:0 1rem; box-sizing:border-box;}

.cm-btn-controls .btn-style02{background:var(--main-color); color:#fff;}
.cm-btn-controls .btn-style03{background-color: #424242; border-color: #424242; color:#fff;}

.bbs-view-prev-next-list {background: #f7f7f7; border-radius:1.4rem; padding:3.5rem 5rem;}
.bbs-view-prev-next-list table {width: 100%;}
.bbs-view-prev-next-list li {margin-bottom:2rem;}
.bbs-view-prev-next-list li:last-child {margin-bottom: 0;}
.bbs-view-prev-next-list table tr {display:flex; width:100%;}
.bbs-view-prev-next-list table tr th {position: relative; display:flex; /* padding-right:3rem; */}
.bbs-view-prev-next-list table tr th:after {display: block; content:""; position:absolute; top:50%; transform:translateY(-50%); right:0; width:1px; height:15px; background:rgba(184,184,184,0.45);}
.bbs-view-prev-next-list table tr th i {margin-right: 1rem;}
.bbs-view-prev-next-list .bbs-prev-next-tit {padding-right:3rem;}
.bbs-view-prev-next-list table tr th, .bbs-view-prev-next-list table tr td {font-size:1.8rem; line-height:1.4;}
.bbs-view-prev-next-list table tr td {display:flex; /* width: calc((100% - 10rem)); */ width:calc(100% - 13.5rem); padding-left:3rem; justify-content:space-between;}
.bbs-view-prev-next-list table tr td a {position: relative;}
.bbs-view-prev-next-list table tr td a:before {display:none; content:""; position:absolute; bottom:0; left:0; width:100%; height:1px; background:#222;}
.bbs-view-prev-next-list table tr td:hover a:before {display: block;}
.bbs-view-prev-next-list .list-day {color:rgba(34,34,34,0.5);}

@media all and (max-width:800px){
	.bbs-view-con .bbs-view-top {flex-wrap:wrap; padding:0 1.5rem;}
	.bbs-view-con .bbs-tit {width: 100%; padding:1.75rem 0;}
	.bbs-view-con .bbs-write-info {margin-bottom:1.75rem;}
	.bbs-view-content {padding:2.5rem 1.5rem;}
	.bbs-view-content .down-list li {width: 100%; margin-right: 0; padding:1rem;}
	.bbs-view-content .down-list li:last-child {margin-bottom: 0;}
	.bbs-view-content .down-list li:nth-of-type(3) {margin-bottom:2rem;}
	.bbs-view-content .down-list .item-tit {width:13rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
	.bbs-view-content .down-list li > a {flex-wrap:wrap; padding:0;}
	.bbs-view-prev-next-list {padding:1.75rem;}
	.cm-btn-controls {margin:2.5rem 0;}

	.bbs-view-con .down-list li{width:100%; margin-right:0}
	.bbs-view-prev-next-list table tr th, .bbs-view-prev-next-list table tr td{font-size:1.4rem;}
}

/* ****************** 소개 :: 이용안내 ********************** */
.info-page .info-tit {margin-bottom: 4.5rem;}
.info-page .info-type-box {background:#f3f3f3; border-radius:2.4rem; padding:5.5rem 6rem;}
.info-page .info-list li {display:flex; margin-bottom:2.8rem;}
.info-page .info-list li:last-of-type {margin-bottom: 0;}
.info-page .info-list .list-tit {position: relative; display:inline-block; width: 16rem; font-size:2rem; letter-spacing:-0.025em; color:#222; line-height:1.5; padding-left: 1rem; box-sizing:border-box;}
.info-page .info-list .list-tit:before {display: block; content:""; width:3px; height: 3px; background-color:#003ca6; position:absolute; left:0; top:12px; }
.info-page .info-list .list-txt {width: calc(100% - 16rem); font-size:1.6rem; letter-spacing:-0.025em; color:#585858; line-height:1.875;}
.info-page .public-work {display:flex; margin-top: 9rem;}
.public-work .work-tit {font-size:2rem; letter-spacing:-0.025em; font-weight: 400; color:#222; margin-right: 5rem;}
.public-work .public-txt {font-size:1.6rem; letter-spacing:-0.025em; color:#585858; line-height:1.75; margin-top: 2.7rem;}

@media all and (max-width:800px){
	.info-page .info-type-box {padding:2.75rem 3rem;}
	.info-page .public-work {margin-top:4.5rem; flex-wrap:wrap;}
	.info-page .info-list li {flex-wrap:wrap;}
	.info-page .info-list .list-tit {width: 100%;}
	.info-page .info-list .list-txt {width: 100%;}
	.public-work .work-tit {margin-right:0; margin-bottom:2rem;}
	.public-img img {margin-left:-5px;}
}

/* ****************** 온라인자료관 :: 인터뷰 영상 , 아카이브 공통 ********************** */
.interview-list , .archive-con-list {display:flex; flex-wrap:wrap; margin:0 -1%;}
.interview-list .item , .archive-con-list li {margin:0 1% 3.2rem;}
.interview-list .img-box , .archive-con-list .img-box {background: #efefef; border-radius: 10px; text-align: center; width: 100%; position:relative; height:0; overflow:hidden;}
.interview-list .img-box {padding-bottom:56.71%;}
.archive-con-list .img-box {padding-bottom:56.71%; width:97%;}
.interview-list .img-box img, .archive-con-list .img-box img {border-radius:10px; width:100%; height:100%;}
.interview-list .interview-txt , .archive-con-list .archive-txt {display:inline-block; font-size:1.8rem; line-height:1.5; letter-spacing:-0.025em; color:#222; margin:2rem 1.5rem; transition:all 0.4s;}
.interview-list .interview-txt:before , .archive-con-list .archive-txt:before {display:block; opacity:0; visibility:hidden; content:""; position:absolute; bottom:0; width: 100%; height: 1px; background:#003ca6; left:0; transition:all 0.4s;}
.archive-con-list li:hover .archive-txt , .interview-list .item:hover .interview-txt{color:#003ca6;}
.archive-con-list li:hover .archive-txt:before , .interview-list .item:hover .interview-txt:before {opacity:1; visibility:visible;}
.online-data .sub-tit {display:inline-block; font-size:1.6rem; letter-spacing:-0.025em; color:#003ca6; margin-bottom: 2.5rem;}
.online-data .main-tit {font-size:3.2rem; line-height:1.2; letter-spacing:-0.025em; color:#222; font-weight: 600; padding-bottom:1.6rem; border-bottom: 2px solid #003ca6; margin-bottom: 5.3rem;}
.online-data .info {display:flex; margin-bottom: 1.5rem;}
.online-data .info dt {color:#222; width: 10rem;}
/* .online-data .info dl {width:calc(100% - 10rem);} */
.online-data .info dd {width:calc(100% - 10rem);}
.online-data .info dd , .online-data .info.timeline li {color:#585858; line-height:1.5;}
.online-data .info.content dd {overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical;}
.online-data .info dt, .online-data .info dd , .online-data .info.timeline li {font-size:1.6rem; letter-spacing:-0.025em;} 
.online-data .more-btn {display: flex; align-items: center; background: #003ca6; color: #fff; width: 8.7rem; height: 3.4rem; padding: 0 1.2rem; float: right; justify-content: space-between; box-sizing: border-box; border-radius:6px;}
.online-data .more-btn em {font-size:1.4rem;}
.online-data .more-btn i {font-size:1.6rem;}

/* ****************** 온라인자료관 :: 인터뷰 영상 ********************** */
.interview-page .sub-content-wrap {margin-top: 6.7rem;}
.interview-page .total-list-con {margin-bottom: 3.2rem;}
.interview-list .item {width: 23%;}

/* ****************** 온라인자료관 :: 인터뷰 영상 view페이지 ********************** */
.interview-view-page .interview-view-wrapper {display:flex; padding-bottom: 3.5rem; border-bottom:1px solid #ddd;}
.interview-view-page .left-box {background: #ddd; width:55.83%; height: 58.95%;}
.interview-view-page .right-box {width: calc(100% - (55.83% + 8rem)); margin-left: 8rem;}
/* 유튜브 */
/* 비디오 영역 Start */
.video-iframe-wrapper{position:relative; max-width:800px; margin:0px auto; overflow:hidden;}
.video-iframe-box{position:relative; padding-top:58.95%; height:0; background-color:#000}
.video-iframe-box iframe{position:absolute; top:0px; left:0px; width:100%; height:100%;}
.video-cover-box{position:absolute; top:0px; left:0px; width:100%; height:100%; cursor:pointer ;  }
.video-cover-box:after{position:absolute; top:0px; left:0px; width:100%; height:100%; cursor:pointer ; background-color:rgba(0,0,0,0.4); content:"";}
.video-cover-box .thumb{display:block; width:100%; height:100%;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}
.video-cover-box .thumb img{width:100%; height:100%;}
.video-cover-box:hover .thumb{
	-ms-transform: scale(1.1) rotate(0.002deg);
	  -o-transform: scale(1.1) rotate(0.002deg);
	  -moz-transform: scale(1.1) rotate(0.002deg);
	  -webkit-transform: scale(1.1) rotate(0.002deg);
	  transform: scale(1.1) rotate(0.002deg);
}
.video-cover-box .icon{position:absolute; top:50%; left:50%;  z-index:1; -ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);}
.video-cover-box .icon i{font-size:60px; color:#fff; line-height:50px; text-shadow:1px 1px 10px rgba(0, 0, 0, .5);}

/* ****************** 온라인자료관 :: 인터뷰 영상 view페이지 :: 더보기 팝업 ********************** */
.popup-container {position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #fff; border-radius: 20px; padding:4.5rem;}
.popup-container .top-line {display: flex; align-items: center; justify-content: space-between; padding-bottom:2rem; border-bottom:1px solid rgba(0,0,0,0.15);}
.popup-container .top-line .popup-tit {font-size:2.8rem; letter-spacing:-0.025em; color:#222;}
.popup-container .top-line .popup-close-btn {font-size:3rem; color:#222;}
.popup-container .pop-content {font-size:1.6rem; letter-spacing:-0.025em; line-height:1.78; color:#585858; margin-top: 2rem;}

@media all and (max-width:800px){
	.interview-list {margin: 0 -1.5%;}
	.interview-list .item {width: 30.31%; margin:0 1.5% 3.2rem;}
	.interview-view-page .interview-view-wrapper {flex-wrap:wrap;}
	.interview-view-page .left-box {width:100%;}
	.interview-view-page .right-box {width:100%; margin-left: 0; margin-top:2rem;}
	.popup-container {width: 80%; box-sizing:border-box;}
}

@media all and (max-width:480px){
	.interview-list {margin: 0 -1%;}
	.interview-list .item {width: 48%; margin:0 1% 3.2rem;}
}

/* ****************** 온라인자료관 :: 아카이브 ********************** */
.archive-wrapper {margin-top: 7rem;}
.archive-wrapper .container{display:flex;}
.archive-wrapper .archive-menu {width: 19.41%;}
.archive-wrapper .archive-menu-list .item {position: relative; width:100%; font-size:2rem; box-sizing:border-box; margin-bottom:1rem;}
.archive-wrapper .archive-menu-list .item:last-of-type {margin-bottom: 0;}
.archive-wrapper .archive-menu-list .item > a {display:flex; justify-content:space-between; /* width:100%;  */padding:1.8rem; background: rgba(0,60,166,0.08); color:#222; border-radius:1.2rem;}
.archive-wrapper .archive-menu-list .item.selected > a {background: rgba(0,60,166,1); color:#fff;}
/* .archive-wrapper .archive-menu-list .item button {display:flex; justify-content:space-between; padding:1.8rem; width: 100%; text-align:left; font-size:2rem; color:#222; border-radius:1.2rem; background: rgba(0,60,166,0.08);}  */
.archive-wrapper .archive-menu-list .item.open button {color:#fff; background:rgba(0,60,166,1);}
.archive-wrapper .archive-sub-menu {display:none; width: 100%; background: #fff; margin-bottom:4rem;}
.archive-wrapper .archive-sub-menu .sub-item > a{display:flex; justify-content:space-between; padding:1.8rem; border-bottom:1px solid rgba(34,34,34,0.2); color:#222;}
.archive-wrapper .archive-sub-menu .sub-item:last-of-type {border-bottom:0;}
.archive-wrapper .third-menu {display:none; margin:1.5rem 0;}
.archive-wrapper .third-menu li{position: relative; font-size:1.8rem; letter-spacing:-0.025em; line-height:1.3; padding-left:3.3rem; margin-bottom:2rem;}
.archive-wrapper .third-menu li a {display:inline-block; color:#222;}
.archive-wrapper .third-menu li:before {display:block; content:""; width:3px; height:3px; background: #003ca6; position:absolute; left:2rem; top:0.8rem;}
.archive-wrapper .third-menu li a:hover,
.archive-wrapper .third-menu li.selected a {color:#003ca6;}
.archive-inner-list {display:none;}
.archive-inner-list .inner-item {border-bottom:1px solid rgba(34,34,34,0.2);}
.archive-inner-list .inner-item:last-of-type {border-bottom:0;}
.archive-inner-list .inner-item.selected {/* border-bottom:0; */ position: relative; z-index:9;}
.archive-inner-list .inner-item.selected .third-wrap{border-bottom:1px solid rgba(0,60,166,0.2);}
.archive-inner-list .inner-item > a{display:flex; justify-content:space-between; padding:1.8rem; color:#222;}
.archive-inner-list .inner-item.selected > a{color:var(--main-color);}
.archive-content {width:calc(100% - (19.41% + 7.3rem)); margin-left:7.3rem;}
.archive-content .top-con {width:100%; display:flex; align-items:center; justify-content:space-between; margin-bottom: 3rem;}
.archive-content .top-con select {border:none; width: 16.2rem; height: 4.2rem; font-size:1.8rem; letter-spacing:-0.02em; color:#222;  border-radius:10px; padding:0 2rem; box-sizing:border-box; background:url('/images/icon/down_icon.png')no-repeat; background-color: rgba(0,60,166,0.08); background-position:90% 50%;}
.archive-content .top-con select:first-child {margin-right: 1rem;}
.archive-con-list li {width:31.33%;}

/* 
.archive-menu-list .item.selected .archive-inner-list{display: block;}
.archive-menu-list .item.selected .archive-inner-list .inner-item.selected .third-menu{display: block;} */

/* ****************** 온라인자료관 :: 아카이브 view 페이지 ********************** */
.archive-view-wrapper .top-con , .archive-view-wrapper .middle-con{display:flex;}
.archive-view-page .left-box {width:55.83%;}
.archive-view-page .right-box {width: calc(100% - (55.83% + 8.4rem)); margin-left: 8.4rem; padding-bottom:2.2rem; border-bottom:1px solid #ddd;}
.archive-view-page .more-btn {margin-bottom: 5.5rem;}
.archive-view-page .down-btn {display:flex; align-items:center; justify-content:space-between; height: 5.3rem; width: 100%; border:1px solid #003ca6; padding:0 2rem; box-sizing:border-box;}
.archive-view-page .down-btn em , .archive-view-page .down-btn i{font-size:1.6rem; color:#003ca6;}

/* 온라인자료관 :: 아카이브 view 페이지 :: 슬라이드 */
.archive-view-page .slide-box {margin-bottom: 10px;}
.archive-view-page .slide-box .slide-item {border-radius:1rem; border:1px solid #ddd; box-sizing:border-box; margin:0 1px;}
.archive-view-page .slide-box .slide-item span{display: block; position: relative; width:100%; padding-top:66.71%; border-radius:1rem; overflow:hidden;}
.archive-view-page .slide-box .slide-item img {position: absolute; top:0; left:0; bottom:0; right:0; margin:auto; max-width:100%; max-height:100%;}
.archive-view-page .slide-box button {font-size:4rem; position:absolute; top:50%; transform:translateY(-50%); color:#fff; z-index:1;}
.archive-view-page .slide-box .slick-prev {left:0;}
.archive-view-page .slide-box .slick-next {right:0;}
.archive-view-page .slide-box img {max-width:100%;}
.archive-view-page .slider-nav .nav-item {/* max-height:76px; */ margin-right: 8px; border-radius:10px; border:1px solid #eee; box-sizing:border-box;}
.archive-view-page .slider-nav .nav-item span{display: block; position: relative; width:100%; padding-top:61.53%; border-radius:1rem; overflow:hidden;}
.archive-view-page .slider-nav .nav-item img {position: absolute; top:0; left:0; bottom:0; right:0; margin:auto; max-width:100%; max-height:100%;}

/* 온라인자료관 :: 아카이브 view 페이지 :: middle-con */
.archive-view-wrapper .middle-con {background: #f7f7f7; border-radius:2rem; padding:4.5rem 4rem; margin-top: 8rem;}
.archive-view-wrapper .middle-con .middle-list {width: 50%;}
.archive-view-wrapper .middle-con .middle-list .tit {position: relative; font-size:2rem; letter-spacing:-0.025em; color:#222; padding-left:1rem; margin-bottom:2.4rem;}
.archive-view-wrapper .middle-con .middle-list .tit:before {display:block; content:""; width:3px; height:3px; background: #003ca6; position:absolute; left:0; top:8px;}
.archive-view-wrapper .middle-con .sub-list .sub-tit , .archive-view-wrapper .middle-con .sub-list em{font-size:1.6rem; letter-spacing:-0.025em; color:#222;}
.archive-view-wrapper .middle-con .sub-list .sub-tit {margin-right:3rem;}
.archive-view-wrapper .middle-con .sub-list li {display:flex; margin-bottom:1.5rem; padding-left: 1rem;}
.archive-view-wrapper .middle-con .sub-list em {display: block; color:#585858;}
.archive-view-wrapper .middle-con .sub-list .sub-list-inner em{margin-bottom:0.8rem;}
.archive-view-wrapper .middle-con .sub-list .sub-list-inner em:last-child{margin-bottom:0rem;}
.archive-view-wrapper .middle-con .sub-list .sub-txt {font-size:1.6rem; letter-spacing:-0.025em; line-height:1.5; color:#585858;}
.archive-view-wrapper .middle-con .middle-list.list-02 .img-box {margin-bottom: 1rem;}

/* 온라인자료관 :: 아카이브 view 페이지 :: 관련 기록물 */
.archive-view-wrapper .bottom-con , .interview-view-page .bottom-con {margin-top: 9rem; padding-bottom: 7.7rem; border-bottom:1px solid #ddd;}
.archive-view-wrapper .bottom-con .con-tit , .interview-view-page .bottom-con .con-tit {font-size:2.8rem; letter-spacing:-0.025em; color:#222; text-align:center; margin-bottom: 4rem;}
.archive-view-wrapper .record-list , .interview-view-page .record-list {padding: 0 8.4rem;}
.archive-view-wrapper .record-list .img-box img , .interview-view-page .record-list .img-box img {max-width:100%; margin:0 auto; border-radius:inherit; height:100%;}
.archive-view-wrapper .record-list .slick-list , .interview-view-page .record-list .slick-list {margin:0 -3rem;}
.archive-view-wrapper .record-list .record-item , .interview-view-page .record-list .record-item {text-align:center; margin:0 1.5rem;}
.archive-view-wrapper .record-list .record-item .img-box , .interview-view-page .record-list .record-item .img-box {position: relative; height: 0; padding-top:58.64%; border:1px solid #eee; border-radius:10px; overflow:hidden;}
.archive-view-wrapper .record-list .record-tit , .interview-view-page .record-list .record-tit {font-size:2rem; line-height:1.5; letter-spacing:-0.025em; color:#222; margin-top: 1.5rem; font-weight: 500;}
.archive-view-wrapper .record-list button , .interview-view-page .record-list button {position: absolute; top: 50%; transform: translateY(calc(-50% - 35px)); z-index: 1; font-size: 4rem;}
.archive-view-wrapper .record-list .slick-prev , .interview-view-page .record-list .slick-prev {left:0;}
.archive-view-wrapper .record-list .slick-next , .interview-view-page .record-list .slick-next {right:0;}

@media all and (max-width:800px){
	.sub-drop-menu-style .archive-menu-list {border:none;}
	.archive-view-wrapper .top-con, .archive-view-wrapper .middle-con {flex-wrap:wrap;}
	.archive-view-page .left-box {width: 100%; margin-bottom:2rem;}
	.archive-view-page .right-box {width: 100%; margin-left:0;}
	.archive-view-page .slide-box img {width: 100%;}
	.archive-view-wrapper .middle-con {margin-top: 4rem; padding: 3rem 1.5rem;}
	.archive-view-wrapper .middle-con .middle-list {width: 100%;}
	.archive-view-wrapper .middle-con .middle-list.list-01 {margin-bottom: 2rem;}
	.archive-view-wrapper .middle-con .middle-list.list-02 .sub-list li {flex-wrap:wrap;}
	.archive-view-wrapper .middle-con .middle-list.list-02 .sub-list li .sub-tit {margin-bottom: 1.5rem;}
	.archive-view-wrapper .bottom-con , .interview-view-page .bottom-con{margin:4.5rem 0 0; padding-bottom:3.85rem;}
	.archive-wrapper .container {flex-wrap:wrap;}
	/* .archive-wrapper .archive-menu {display:none;} */
	/* .archive-wrapper .archive-menu {width: 100%; margin-bottom: 5rem;} */
	.archive-wrapper .archive-menu {width: 100%;}
	.archive-wrapper .archive-menu-list .item {width:calc((100% - 2rem) / 2); margin-right: 2rem;}
	.archive-wrapper .archive-menu-list .item:nth-of-type(even) {margin-right: 0;}
	.archive-menu .sub-drop-menu-style > ul {display:flex !important; position: relative; flex-wrap:wrap;}
	.archive-menu .sub-drop-menu-style .archive-inner-list {/* border:none; */ border-radius:1.2rem;}
	.archive-menu .sub-drop-menu-style > ul li {border-top:0;}
	.archive-menu .sub-drop-menu-style > ul > li.selected > a > em {color:#fff;}
	.archive-menu .sub-drop-menu-style > ul > li.selected .inner-item em {color:#222;}
	.archive-content {width: 100%; margin-left: 0;}
	.archive-content .top-con {flex-direction:column; align-items:flex-start;}
	.archive-content .total-list-con {width: 100%; margin-top:2rem; margin-bottom:2rem;}
}

@media all and (max-width:480px){
	.archive-con-list li {width: 48%;}
}


/* ****************** 협력단체 ********************** */
.partners-list-style02 ul {margin:0 -1% !important;}
.partners-list-style02 li {float:left; text-align:center; margin: 0 1% 3.33%; width: 23%;}
.partners-list-style02 li a {background-color: #f3f3f3; border-radius:10px; display:inline-block; width:100%; height: 100%; padding:10px; box-sizing:border-box; transition:all 0.3s; border:1px solid #f3f3f3;}
.partners-list-style02 .partners-img-box {width: 100%; /* height:165px; */ padding:5.2rem 0;}
.partners-list-style02 .partners-img-box .img-inner {position: relative; width: 100%; /* height: 100%; */ height: 0; padding-top:23.52%;}
.partners-list-style02 .partner-name {display:inline-block; margin:2rem 0 0;}
.partners-list-style02 .partner-name p {position: relative; font-size:1.8rem; letter-spacing:-0.025em; color:#222; transition:all 0.3s; padding-bottom:8px; height:4.5rem; word-break:break-all;
	overflow:hidden;
	display:block;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;}
.partners-list-style02 .partner-name p:after {display:block; content:""; position:absolute; width:100%; height:1px; background:#003ca6; left:0; bottom:0; transition:all 0.3s; opacity:0; visibility:hidden;}

/* li 마우스 오버 시 */
.partners-list-style02 li:hover a {border:1px solid #003ca6; box-shadow: 5px 8px 21px 0px rgba(0, 0, 0, 0.08);}
.partners-list-style02 li:hover .partner-name p {color:#003ca6;}
.partners-list-style02 li:hover .partner-name p:after {opacity:1; visibility:visible;}


@media all and (max-width:800px){
	.partners-list-style02 li {width: 31.33%;}
}

@media all and (max-width:480px){
	.partners-list-style02 li {width: 48%;}
	/* .partners-list-style02 .partners-img-box {height: 100px;} */
}

/* ****************** 정보광장 :: 공통 ********************** */
/* 소식 목록 */
.news-list-con .board-search-box .board-search-inner {border:2px solid #003ca6; background-color:#fff;}
.news-list {margin:0 -1%; display:flex; flex-wrap:wrap;}
.news-list .item {/* float:left; */ text-align:center; width:23%; margin:0 1% 4.16%;} 
.news-list .item a {display:inline-block; width: 100%; /* height: 100%; */ border-radius:10px; }
.news-list .item .inner-box{position: relative; display:inline-block; width: 100%; height:0; padding-top:59.78%; border-radius:inherit; overflow:hidden; background:#efefef;}
.news-list .item .inner-box > img{position: absolute; top:0; left:0; bottom:0; right:0; margin:auto; width:100%; max-height:100%; /* background: #222; */}
.news-list .item .inner-box.no-img img{width:50%}
.news-list .item .news-tit {position: relative; font-size:1.8rem; line-height:1.5; letter-spacing:-0.025em; color:#222; text-align: left; /* padding: 1rem 6rem 1rem 2rem; */ margin:0 1rem; padding-bottom:0.5rem; transition:all 0.3s;}  
.news-list .item .news-tit:after {display:block; content:""; position:absolute; width:100%; height:1px; background: #003ca6; left:0; bottom:0; opacity:0; visibility:hidden; transition:all 0.3s;}
.news-list .item:hover .news-tit {color:#003ca6;}
.news-list .item:hover .news-tit:after {opacity:1; visibility:visible;}

/* view 페이지 :: 이미지 */
.bbs-view-content .img-box {/* background:#222; */ /* height:380px; */ position: relative; /* height: 0; padding-top:65%; */ margin-bottom:5rem; margin:0 auto 5rem;}
.bbs-view-content .img-box img {max-width:100%;}

/* view 페이지 :: 신청기간 / 교육형태 / 문의 */
.bbs-view-con .info-box {background: #f7f7f7; border-radius:1.4rem; padding:3.5rem 4.5rem; margin-top: 5rem; margin-bottom:3rem;}
.bbs-view-con .info-box .info-item {display:flex; padding:1.5rem 0; border-bottom:1px solid #dbdbdb; font-size:1.4rem;}
.bbs-view-con .info-box .info-item:first-child {padding-top:0;}
.bbs-view-con .info-box .info-item:last-child {padding-bottom: 0; border-bottom:0;}
.bbs-view-con .info-box .info-item .title {position: relative; display:inline-block; width: 10.5rem;}
.bbs-view-con .info-box .info-item .title:after {display:block; position:absolute; top:50%; right:0; transform:translateY(-50%); content:""; width:1px; height:15px; background: rgba(184,184,184,0.45);}
.bbs-view-con .info-box .info-item .txt {display:inline-block; width:calc(100% - 10.5rem); padding-left: 3rem;}
.bbs-view-con .info-box p {line-height:1.4;}
.bbs-view-con .info-box p.tit {font-size: 2rem; color: #222; font-weight: 700;}

@media all and (max-width:800px){
	.news-list .item {width: 31.33%;}
	.bbs-view-content .info-box {padding:1.75rem 2.25rem;}
}

@media all and (max-width:480px){
	.news-list .item {width: 48%;}
}

/* ****************** 통합검색 ********************** */
.result-container .location {margin-bottom: 4rem; padding-top:5.7rem;}
.result-container .top-line {display:flex; justify-content:space-between; border-bottom:2px solid #232323;}
.result-container .top-line .result-tit {font-size:3.2rem; letter-spacing:-0.025em; color:#222; margin-bottom: 2.5rem;}
.result-container .con-tit {display:flex; justify-content:space-between; margin-bottom: 2rem;}
.result-container .con-tit p {font-size:2.4rem; letter-spacing:-0.025em; color:#222;}
.result-container .con-tit p span{color:#7a7a7a;}
.result-container .con-wrap {padding:9rem 0 5.5rem; border-bottom:1px solid #ddd;}
.result-container .con-wrap:last-child{border-bottom:0;}
.result-container .more-result {font-size:1.4rem; letter-spacing:-0.025em; color:#232323; width: 15.8rem; display: flex; justify-content: space-between; align-items:center; border-bottom:1px solid #525252; padding-bottom:0.5rem;}
.result-list {display:flex; margin:0 -1.25rem;}
.result-list .item {margin:0 1.25rem; width: 23%;}
.result-list .img-box {position: relative; height: 0; /* padding-top:58.92%; */ padding-top:56%; background: #efefef; border-radius:1rem; overflow:hidden;}
.result-list .img-box img{width:100%; max-width:none; max-height:none;}
.result-list .result-txt {font-size:1.8rem; letter-spacing:-0.025em; color:#222; padding:1.8rem 2rem; line-height:1.4;}

.no-img img{width:50% !important;}

@media all and (max-width:800px){
	.result-container .top-line {flex-wrap:wrap;}
	.result-container .con-wrap {padding:4.5rem 0 2.75rem;}
	.result-list {flex-wrap:wrap; margin:0 -1%;}
	.result-list .item {width: 31.33%; margin: 0 1%;}
}

@media all and (max-width:480px){
	.result-list .item {width: 48%;}
}

/* 회원가입 공통 */
.join-page .sub-tit {font-size:3.2rem; color:#222; letter-spacing:-0.025em; text-align:center; margin-bottom:5rem;}
.join-page .cm-btn-controls button , .join-page .cm-btn-controls a{border-radius:1.2rem; height: 6.6rem;}
.join-list {display:flex; justify-content:center; margin-bottom: 6rem;}
.join-list .item {width: 7.8rem; margin-right: 14.6rem; text-align:center;}
.join-list .icon-box:after {display:block; content:""; position:absolute; left:100%; top: 50%; transform: translateY(-50%); width:14.6rem; height:1px; background:rgba(160,160,160,0.15);}
.join-list .item:last-of-type {margin-right: 0;}
.join-list .item:last-of-type .icon-box:after {display:none;}
.join-list .item.on .icon-box {background-color: #1346a9;}
.join-list .item:nth-of-type(1) .icon-box span{background:url(/images/content/join_01.png)no-repeat 50% 50%;}
.join-list .item:nth-of-type(1).on .icon-box span{background:url(/images/content/join_01_on.png)no-repeat 50% 50%;}
.join-list .item:nth-of-type(2) .icon-box span{background:url(/images/content/join_02.png)no-repeat 50% 50%;}
.join-list .item.on:nth-of-type(2) .icon-box span{background:url(/images/content/join_02_on.png)no-repeat 50% 50%;}
.join-list .item:nth-of-type(3) .icon-box span{background:url(/images/content/join_03.png)no-repeat 50% 50%;}
.join-list .item.on:nth-of-type(3) .icon-box span{background:url(/images/content/join_03_on.png)no-repeat 50% 50%;}
.join-list .item .icon-box {position:relative; height: 0; padding-top:100%; background: #ededed; border-radius:50%; margin-bottom:1.5rem;} 
.join-list .item .icon-box span{display:inline-block; width: 7.8rem; height: 7.8rem; position:absolute; top:0; left:0; right:0; bottom:0; max-width:100%; max-height:100%;}
.join-list .item .num {display:inline-block; font-size:1.5rem; letter-spacing:-0.025em; font-weight: 600; margin-bottom:0.5rem;}
.join-list .item:nth-of-type(1) .num{color:#1346a9;}
.join-list .item:nth-of-type(2) .num{color:rgba(34,34,34,0.4);}
.join-list .item:nth-of-type(3) .num{color:rgba(34,34,34,0.4);}
.join-list .item .join-tit {font-size:1.6rem; color:#222; font-weight: 600;}
.join-page .bbs-write-con:last-child .bbs-inquiry-agree-con {border-bottom:0;}
/* 회원가입 01 */
.join-page .inquiry-box .agree-tit {font-weight:600;}
.join-page .inquiry-box .inquiry-agreement-con {min-height:19.5rem; height:19.5rem; overflow-y:scroll; border-top:0; border-right:0; background:#f8f8f8; border-radius:1.2rem; padding:2.2rem;}

@media all and (max-width:480px){
	.join-list .item {margin-right:5rem;}
}

/* 회원가입 02 */
/* 입력 폼 */
.join-form-con {position: relative; border-top:2px solid #000;}
.join-form-tbl {width: 100%;}
.join-form-tbl tr {border-bottom:1px solid #e6e6e6;}
.join-form-tbl th {text-align: left; color: #333; font-weight: 400; font-size: 18px; letter-spacing: -0.5px; line-height: 20px; word-break: keep-all;}
.join-page .essential-icon {color:#db1919; font-size:1.6rem; letter-spacing:-0.025em;}
.join-form-tbl th, .join-form-tbl td {padding:20px 10px;}
.join-form-tbl .input-basic, .join-form-tbl .select-basic {width:50%; max-width:558px; height: 56px; border:1px solid #e2e2e2; border-radius:1.2rem; background-color:#f8f8f8;}
.birth-input .select-basic {max-width:157px; }
.tel-input .input-basic, .tel-input .select-basic,
.birth-input .input-basic, .birth-input .select-basic,
.email-input .input-basic, .email-input .select-basic {max-width:167px; font-size:1.6rem; color:#a9a9a9;}
.hypen {color:#676767; font-size:1.6rem; margin:0 1rem;}
.tel-input select,
.birth-input select,
.email-input select {padding-left: 2.7rem;}
.email-input .input-basic, .email-input .select-basic {    width: 30%; max-width: 167px; margin-bottom: 3px;}
.email-input .select-basic {margin-left:1rem;}
.join-sub-txt2 {font-size:1.4rem; color:#a9a9a9; margin-top: 1rem;}
.join-sub-btn {border:1px solid #848484; font-size:1.6rem; border-radius:1.2rem; width:14.7rem; height:5.6rem; margin-left: 1rem;}
.custom-radio-item-box {margin-bottom: 1rem;}
.custom-radio-item-box .custom-radio-item:first-of-type {margin-right: 4rem;}
.custom-radio-item-box label {position: relative; top:4px;}
.custom-radio-item-box strong {font-size:1.6rem; color:#676767;}
.join-page .cm-btn-controls {display:flex; justify-content: center;} 
.join-page .cm-btn-controls .btn-style01 , .join-page .cm-btn-controls .btn-style02  {margin:0;}
.join-page .cm-btn-controls .btn-style01 {margin-right:1rem; border:0; background: #003ca6; color:#fff;}
.join-page .cm-btn-controls .btn-style02 {background: #303030; color:#fff;}
.address-input .input-basic:first-child {margin-top: 0;}
.address-input .input-basic {margin-top:1rem;}
.join-form-tbl .width100 {max-width:none;}
.join-form-tbl .address-input .input-basic:last-of-type {padding-left:2.7rem;}
.join-form-tbl .address-input .input-basic::placeholder {font-size:1.6rem; color:#a9a9a9;}

/* 회원가입 03 */
.join-page .inquiry-box .agree-tit {font-weight:600;}
.join-page .inquiry-box .inquiry-agreement-con {min-height:19.5rem; border-top:0; border-right:0; background:#f8f8f8; border-radius:1.2rem; padding:2.2rem;}
.join-page.join03 {text-align:center;}
.join-page.join03 .check-icon {font-size:12rem; color:#1346a9; margin-bottom: 2rem;}
.join-page.join03 .join-result-t {font-size:2.8rem; letter-spacing:-0.025em; color:#222; font-weight: 600; margin-bottom: 1.5rem;}
.join-page.join03 .join-result-sub-t {font-size:1.8rem; letter-spacing:-0.025em; color:rgba(34,34,34,0.6);}
.go-login {display:flex; justify-content:center; align-items:center; width:22.6rem; height:6.6rem; font-size:1.8rem ; border:1px solid #545454; color:#3a3a3a; border-radius:1.2rem; margin:6rem auto 0; font-weight: 600;}

/* 로그인 */
.login-box {width: 39%; margin:0 auto;}
.login-box .form-list-icon .login-input {width: 100%; height:60px; border-radius:1.2rem; border:1px solid #e2e2e2; background-color:#f8f8f8 ; padding-left: 2.8rem; font-size:1.6rem;}
.login-box .form-list-icon .login-input::placeholder {color:#a9a9a9;}
.login-box .form-list-icon li:last-child .login-input {margin-top: 1rem;}
.login-box .id-save-btn {text-align: right; color: #333; font-size: 16px; letter-spacing: -0.3px; margin-top: 15px;}
.login-box .cm-btn-controls {margin:3.5rem 0;}
.login-box .cm-btn-controls .btn-style01 {width: 100%; margin-right: 0; height: 7.6rem;}
.form-box-list {text-align:center; padding-bottom:4.5rem; border-bottom:1px solid #e6e6e6;}
.form-box-list a {font-size:1.6rem; letter-spacing:-0.025em; color:#a9a9a9;}
.form-box-list a:before {display: inline-block; content: ""; background-color: #ddd; width: 1px; height: 15px; vertical-align: middle; margin: -2px 4rem 0 4rem;}
.form-box-list a:first-child {margin-left: -10px;}
.form-box-list a:first-child:before {display:none;}
.sns-box {display:flex; align-items:center; margin-top: 4.5rem;}
.sns-box .sns-tit {display:inline-block; font-size:1.8rem; color:#222; letter-spacing:-0.025em; width:21.6rem;}
.sns-box .sns-list {display:flex;}
.sns-box .sns-list .sns-item  {width: 50px; height: 50px; border-radius:50%; background: #f2f2f2; margin-right:1.7rem;}
.sns-box .sns-list .sns-item:last-child {margin-right: 0;}
.sns-box .sns-list .sns-item a {display:flex; justify-content:center; align-items:center; width: 100%; height: 100%;}
.sns-box .sns-list .sns-item i {font-size:1.8rem; color:#333;}

@media all and (max-width:800px){
	.login-box {width: 100%;}
	.sns-box .sns-list {width:calc(100% - 21.6rem); justify-content:center;}
	.sns-box .sns-list .sns-item {width: 20%; height:auto; margin-right:5%;}
	.sns-box .sns-list .sns-item a {width:100%; padding-top:100%; height:0; position: relative;}
	.sns-box .sns-list .sns-item i {position:absolute; top:50%; left:50%; transform:translate(-50% , -50%);}

	
}



/* ******************  회원가입 공통  ********************** */
.member-wrapper{max-width:1000px; margin:0px auto;}

.join-step-con{padding-bottom:50px;}
.join-step-con .join-tit{color:#222; font-size:20px; letter-spacing:-0.75px; font-weight:500; padding-bottom:15px;}
/* 공통 :: 상단 진행과정 바 */
.join-process-bar-con > ol{overflow:hidden;  margin:50px auto; text-align:center;}
.join-process-bar-con > ol > li{display:inline-block; padding-left:80px; overflow:hidden; text-align:center; letter-spacing: -0.5px; background:url(/images/board/process_arrow.png) no-repeat 0 50%}
.join-process-bar-con > ol > li:first-child{background:none;}
.join-process-bar-con > ol > li .process-icon{float:left; width:48px; height:48px; color:#fff; background-color:#ccc; -webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;}
.join-process-bar-con > ol > li.current .process-icon{background-color:#424446}
.join-process-bar-con > ol > li .process-icon i{font-size:24px; line-height:48px; }
.join-process-bar-con > ol > li dl{float:left; width:120px; padding-left:15px; text-align:left; padding-top:5px;}
.join-process-bar-con > ol > li dl dt{height:20px; font-size:13px; color:#888;}
.join-process-bar-con > ol > li dl dd{height:28px; font-size:17px; color:#333;}


/* 공통 :: 회원폼 레이아웃 */
.member-con-inner{padding:60px 0;border:1px solid #ddd; }
.member-search-con-inner{padding:75px 0; border:1px solid #ddd; border-top:0;}
.member-form-con{width:96%; max-width:480px; margin:0px auto;}	/* 가로값 설정 */
.member-form-con-txt{padding-bottom:40px; text-align:center; letter-spacing:-1px;}
.member-form-con-txt strong{display:block; font-size:24px; color:#333; font-weight:500;}
.member-form-con-txt b{font-weight:600; color:#000;}
.member-form-con-txt p{color:#666; font-size:14px; line-height:22px; font-weight:300; }
.member-form-con-txt p:before{display:block; content:""; width:30px; height:2px; background-color:#ccc; margin:20px auto;}
.form-tit{display:block; color:#464646; font-size:20px; letter-spacing:-0.3px; font-weight:500; margin-bottom:15px;}
.form-list li{overflow:hidden; margin-top:-1px;}
.form-list li:first-child{margin-top:0;}
.form-list li label{line-height: 30px; color:#222; font-size:13px; letter-spacing:-0.5px;}
.form-input-box{float:left; width:80%;}
.form-input{
    position:relative; width:100%; box-sizing:border-box; background:none; border:0px;  color:#707070; background-color:#fff; font-size:14px; border:1px solid #ddd; letter-spacing:-0.3px; font-weight:400; height:50px; text-indent:10px; color:#aaa;
    -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s
}
.form-select{
   width:30%; background:none; border:0px;  color:#707070; font-size:15px; border:1px solid #ddd; letter-spacing:-0.3px; font-weight:400; height:50px; color:#aaa;
    -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s
}
.form-input:focus,.form-select:focus{color:#333; border-color:#000; z-index:1;}

/* 공통 :: 회원관련 ::  탭 */
.member-tab-list-con ul{overflow:hidden; }
.member-tab-list-con ul li{float:left; width:50%; position:relative; }
.member-tab-list-con ul li:first-child{margin-left:0;}
.member-tab-list-con ul li a{display:block; height:60px; line-height:60px; text-align:center; border:1px solid #ddd; border-bottom:1px solid #3a4050; color:#686767;  font-size:18px; letter-spacing:-0.5px; }
.member-tab-list-con ul li.selected{z-index:1;}
.member-tab-list-con ul li.selected a{height:61px; border-color:#3a4050; color:#3a4050; border-bottom:0; font-weight:500}
.member-tab-list-con + .member-con-inner{border-top:0}

/* 공통 :: 회원가입 필수입력 */
.essential-txt{position:absolute; top:-30px; right:0px; color:#464646; font-size:13px; letter-spacing:-0.3px;}
.essential-icon{color:#cf0505; margin:0 3px 0 0; vertical-align:middle;}


.cm-button-box {display:flex; max-width:47rem; margin:auto;margin-top: 3.5rem; }
.cm-button-box a,.cm-button-box button {display:flex; justify-content:center; align-items:center; width:calc(100% - 12px); height:7.6rem; border-radius:1.2rem; color:#fff; font-size:1.8rem; letter-spacing:-0.025em;}
.cm-button-box a:first-child,.cm-button-box button:first-child {margin-right: 12px;}
.cm-button-box .id-btn {background: #424242;}
.cm-button-box .pw-btn {background: #003ca6;}




/* ******************   공통  ********************** */
@media all and (max-width:1220px){
	/* 공통 :: 상단 진행과정 바 */
	.join-process-bar-con > ol > li dl{width:100px; padding-left:10px;}
	.join-process-bar-con > ol > li dl dt{font-size:12px;}
	.join-process-bar-con > ol > li dl dd{font-size:13px;}
}
@media all and (max-width:800px){
	/* 공통 :: 상단 진행과정 바 */
	.join-process-bar-con > ol > li{display:block; float:left; width:33.33%; padding-left:0; background-size:8px auto}
	.join-process-bar-con > ol > li .process-icon{float:none; display:block; width:40px; height:40px; line-height:40px; margin:0px auto;}
	.join-process-bar-con > ol > li .process-icon i{font-size:18px; line-height:40px;}
	.join-process-bar-con > ol > li dl{float:none; width:auto; padding-left:0; padding-top:10px; text-align:center;}
	.join-process-bar-con > ol > li dl dt, .join-process-bar-con > ol > li dl dd{height:auto;}
	.join-process-bar-con > ol > li dl dd{padding-top:3px;}

	/* 공통 :: 회원폼레이아웃 */
	.member-con-inner{padding:30px 0;}
	.member-form-con{padding:30px 0;}
	.member-form-con:last-child{padding-top:0}
	.member-form-con-txt{padding-bottom:30px; }
	.member-form-con-txt strong{font-size:20px; font-weight:bold; word-break:keep-all; line-height:24px;}
	.member-form-con-txt p{width:80%; margin:0px auto; font-size:11px; line-height:16px; word-break:keep-all;}
	.member-form-con-txt p:before{width:20px; height:1px; margin:15px auto}
	.form-tit{text-align:center; margin-bottom:25px;}
	.form-input{font-size:13px; height:40px;}

	/* 공통 :: 회원관련 ::  탭 */
	.member-tab-list-con ul li a{height:40px; line-height:40px; font-size:14px;}
	.member-tab-list-con ul li.selected a{height:41px;}
	/* 공통 :: 회원관련 ::  버튼 */
	.cm-button-box{margin-top:2rem;}
	.cm-button-box a,.cm-button-box button{height:5rem;}
}

@media all and (max-width:480px){
	/* 공통 :: 회원폼레이아웃 */
	.member-form-con{width:auto; padding:20px;}

}

/* ******************   LOGIN  ********************** */
@media all and (max-width:800px){
	/* LOGIN :: 아이콘로그인 */
	.form-list-icon{margin-bottom:15px;}
	.form-list-icon > li{margin-top:5px;}
	.form-list-icon > li .login-input{height:40px; width:calc(100% - 30px); font-size:13px;}
	.form-list-icon > li i{width:25px; font-size:20px;}
	/*  LOGIN :: 아이디저장 및 하단영역 */
	.id-save-btn{font-size:12px; margin-top:0px;}
	.id-save-btn input[type="checkbox"]{width:20px; height:20px;}
	.id-save-btn + .cm-btn-controls{padding-top:15px;}
	.form-box-list{height:44px; line-height:44px; }
	.form-box-list a{font-size:13px;}
	.form-box-list a:before{margin:-2px 10px 0 10px;}
}

/* ******************   LOGIN ::  SNS  ********************** */
@media all and (max-width:1220px){
	.member-con-inner-shop, .member-con-inner-sns{padding:25px}
	/* LOGIN :: SNS LOGIN */
	.member-con-inner-sns .member-form-con{padding-left:15px;}
	.member-con-inner-sns .member-form-con:first-child{padding-right:15px;}
}
@media all and (max-width:800px){
	.member-con-inner-sns .member-con-inner{padding:35px 20px}
	.member-con-inner-sns:before{display:none;}
	.member-con-inner-shop, .member-con-inner-sns{padding:40px 0px;}
	/* LOGIN :: SNS LOGIN (Short Ver) */
	.member-form-short-sns-con{margin-top:25px; padding-top:0px; border-top:0}
	.member-form-short-sns-con .short-sns-tit{float:none; font-size:18px; line-height:24px; margin-bottom:15px; text-align:center;}
	.short-sns-list-con{float:none; text-align:center;}
	.short-sns-list-con li{float:none; display:inline-block; margin-left:5px}
	.short-sns-list-con li button{width:38px; height:38px;}
	/* LOGIN :: SNS LOGIN (Long Ver) */
	.member-con-inner-sns .member-form-con, .member-con-inner-sns .member-form-con:first-child{
		display:block; float:none; width:100%; padding:0; max-width:480px; margin:0px auto;
	}
	.member-con-inner-sns .member-form-con:first-child{border-right:0; padding-bottom:50px;}
	.member-con-inner-sns .member-form-con .sns-login-list li{padding-top:5px;}
	.member-con-inner-sns .member-form-con .sns-login-list li a,
	.member-con-inner-sns .member-form-con .sns-login-list li button{height:40px; text-indent:50px; font-size:14px;}
	.member-con-inner-sns .member-form-con .sns-login-list .sns-icon{width:40px; height:40px; line-height:40px;}
	.member-con-inner-sns .member-form-con .sns-login-list .sns-icon i{line-height:40px;}
}

/* ******************   LOGIN ::  SHOP 로그인  ********************** */
@media all and (max-width:1220px){
	/* LOGIN :: SHOP LOGIN ( 가로Ver ) */
	.member-con-inner-shop .member-form-con, 
	.member-con-inner-shop .member-form-con:first-child{display:block; width:auto; padding:20px; }
	.member-con-inner-shop .member-form-con:first-child{border-right:0; padding-bottom:30px;}
}
@media all and (max-width:800px){
	/* LOGIN :: SHOP LOGIN ( 가로Ver ) */
	.nonmember-form-con{text-align:center;}
	.nonmember-form-con .form-tit{margin-bottom:15px;}
	.nonmember-form-con .cm-btn-controls button, 
	.nonmember-form-con .cm-btn-controls a{min-width:none; width:100%; margin:0;}
	.member-con-inner-shop .member-form-nonmember{border-top:0; margin-top:20px; padding-top:0;}
	.member-con-inner-shop .member-form-nonmember-con{float:none; width:100%; padding:20px 0; border-top:1px solid #ddd;}
	.member-con-inner-shop .member-form-nonmember-con:last-child:before{display:none;}

	/* LOGIN :: SHOP LOGIN 2 ( 세로Ver ) */
	.nonmember-service-con{text-align:center;}
	.nonmember-service-con:first-child{margin-top:0}
	.nonmember-service-con > p,
	.nonmember-service-buttons{float:none; width:auto;}
	.nonmember-service-con > p{margin-bottom:10px; font-size:13px; }
	.nonmember-service-con > p br{display:none;}
	.nonmember-service-buttons{margin:0 -1%;}
	.nonmember-service-buttons a{float:left; width:48%; margin:0 1%; box-sizing:border-box; font-size:13px;}
	.nonmember-service-buttons a.nonmember-buy-btn{float:none; display:block; width:auto; margin:0 1%;}
}
/* ******************  아이디, 비번 찾기  ********************** */
@media all and (max-width:800px){
	/* 아이디 찾기 :: 결과 */
	.id-check-inner .customer-id{font-size:15px; padding:30px 0; line-height:24px;}
}

 /* ******************  JOIN 02 / MODIFY  ********************** */
@media all and (max-width:800px){
	.join-form-tbl,
	.join-form-tbl tbody,
	.join-form-tbl tbody tr,
	.join-form-tbl tbody tr th,
	.join-form-tbl tbody tr td{display: block; width:100%;}

	/* JOIN 01 */
	.join-step-con{padding-bottom:30px;}
	.join-step-con .join-tit{font-size:16px; padding-bottom:10px;}
	.join-agreement-con{height:150px; padding:15px}
	/* JOIN 02 */
	.essential-txt{font-size:11px; top:-20px; font-weight:300;}
	.join-form-tbl th,.join-form-tbl td{padding:5px; padding-right:0}
	.join-form-tbl th{width:30%; font-size:13px; }
	.join-form-tbl td{width:70%;}
	.join-form-tbl .input-basic,
	.join-form-tbl .select-basic{width:100%; height:34px; font-size:13px; text-indent:4px; max-width:none; }
	.join-form-tbl .select-basic{height:34px;}
	.join-form-tbl .join-sub-btn{min-width:auto; width:80px; height:34px; margin-left:5px; font-size:12px; padding:0; box-sizing:border-box;}
	.join-form-tbl .join-sub-txt, .join-form-tbl .join-sub-txt2{display:block; margin-left:0; margin-top:5px; word-break:keep-all; line-height:15px; }
	
	/* JOIN 02::기타 */
	.ios-os .join-form-tbl fieldset{
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}
	.id-input .input-basic,
	.address-input .input-basic:first-of-type{float:left; width:calc(100% - 85px) !important;}
	.tel-input select, .birth-input select, .email-input select{padding-left:0.5rem;}
    .birth-input .select-basic{width:calc(33.33% - 24px) !important;}
    .tel-input .select-basic{width:calc(33.33% - 19px) !important;}
	.tel-input .input-basic{width:calc(33.33% - 16px) !important;}
	.email-input .input-basic{width:calc(50% - 13px) !important;}
	.email-input .select-basic{width:100% !important; margin-top:5px; margin-left:0}
	.address-input .input-basic{margin-top:3px;}
	.join-form-tbl .hypen{margin:0 2px; font-size:1.4rem; display: inline-block; width:14px; text-align:center;}
}
@media all and (max-width:359px){
	.join-form-tbl .join-sub-btn{font-size:11px;}
}


 /* ******************  JOIN FINISH ********************** */
@media all and (max-width:800px){
	/* JOIN FINISH :: 01 */
	.join-finish-icon{width:80px; height:80px; }
	.join-finish-icon i{font-size:45px; line-height:30px}
	.join-finish-txt{font-size:14px; line-height:1.3em; word-break:keep-all;}
	/* JOIN FINISH :: 02 */
	.join-finish-tit-con{height:auto; margin-bottom:20px; padding-bottom:20px; }
	.join-finish-tit{font-size:18px; line-height:20px;  word-break:keep-all;}
	.join-finish-sub-tit{font-size:12px; word-break:keep-all;}
	.join-finish-member-info{padding:15px;}
	.join-finish-member-info .member-info-left-icon{display:none;}
	.member-info-right-con dl {margin-bottom:15px;}
	.member-info-right-con dl dt, .member-info-right-con dl dd{float:none; width:auto; padding:0; }
	.member-info-right-con dl dt{font-size:13px; padding-bottom:7px; }
	.member-info-right-con dl dt i{margin-top:-2px; vertical-align:middle;}
	.member-info-right-con dl dd{font-size:15px; color:#222; line-height:1.5; font-weight:500; padding-left:22px;}
}


/* 온라인자료관 내용추가 (2023-05-04 MJ) */
.intro-page .con5{margin-bottom:15rem;}
.intro-page .con5 .con-tit {letter-spacing:-0.072em;}
.intro-page .con5 .left-box {width: 65.66%; padding-right:6rem; box-sizing:border-box;}
.intro-page .con5 .right-box {display: flex; width: 34.34%; padding-left:0; justify-content: flex-end;}
.intro-page .con5 .right-box .intro-img-box {margin-right: 2rem;}
.intro-page .con5 .right-box .intro-img-box:last-of-type {margin-right: 0;}
/* .intro-page .con5 img {box-shadow: 10px 11px 24px 0px rgba(0, 0, 0, 0.1);} */
@media all and (max-width:800px){
	.intro-page .con5{margin-bottom:5rem;}
	.intro-page .con5 .left-box,
	.intro-page .con5 .right-box{width:100%;}
	.intro-page .con5 .left-box {padding-left: 0; }
	.intro-page .con5 .right-box {justify-content:center; margin-bottom: 5rem;}
}


/* 아카이브 뷰페이지 화살표 추가 (2023-06-12 MJ) */
.archive-view-page .left-box .slider-nav{width:100%; margin:auto;}
.archive-view-page .left-box .slider-nav .slick-arrow{position: absolute; top:50%; transform:translateY(-50%); font-size:2.4rem; color:#585858; width:5%; text-align:center;}
.archive-view-page .left-box .slider-nav .slick-arrow.slick-prev{left:-5%;}
.archive-view-page .left-box .slider-nav .slick-arrow.slick-next{right:-5%;}