@charset "utf-8";
*{font-family: 'Pretendard'}
@font-face {
    font-family: 'cormorant';
    src: url('/resources/custom/fonts/etc/CormorantGaramond-SemiBold.ttf') format('woff');
    font-weight: 600;
    font-display: swap;
}

header .ico-sub{display:none;}
main .fix-layout{max-width:1604px; margin:0 auto; padding:0 12px;}

/*아카이브 메인 - 공통*/
.main-tit-box{text-align:center; width:100%; margin-bottom:60px;}
.main-tit-box span{font-family: 'cormorant'; display:block; margin-bottom:24px; color:#fff; font-size:30px; }
.main-tit-box p{color:#fff; font-size:60px; font-weight:600; }

/*아카이브 메인 - sc01*/
.sc01{min-height:100vh; background:url(/resources/custom/images/darchives/main/sc01-bg.jpg); background-size:cover; padding-top:280px; padding-bottom:30px; background-position:right;}
.main-txt-wrap{display:flex; align-items: center; margin-bottom:150px;}
.main-txt-wrap .main-txt{width:60%;}
.main-txt-wrap .main-txt h5{font-family:'Gmarket'; color:#fff; font-size:36px; font-weight:300; line-height: 1.3;}
.main-txt-wrap .main-txt h3{font-family:'Gmarket'; color:#fff; font-size:60px; margin-top:30px; margin-bottom:50px; word-break:keep-all;}
.main-txt-wrap .main-txt p{color:#cdcdd0; font-size:20px; line-height:1.5; word-break:keep-all;}

.main-txt-wrap .main-search-wrap{width:40%;}
.main-txt-wrap .main-search-wrap form{display: flex;width: 100%; max-width:660px;align-items: center; justify-content: center; margin-bottom:20px;}
.main-txt-wrap .main-search-wrap fieldset{display: block;height: 68px;max-width: 660px;width: 100%;position: relative; border:none;}
.main-txt-wrap .main-search-wrap #searchText{ display: block;width: 100%; height: 100%;padding: 0 20px; margin: 0;float: none;line-height: 1.3;
    font-size: 20px;color: #101010;background-color: #fff;border-radius: 0px; border:none; border-radius: 12px; border:3px solid #18b2f0;}
.main-txt-wrap .main-search-wrap #searchText::placeholder{font-size:20px; color:#383838;}
.main-txt-wrap .main-search-wrap input[type="submit"]{    position: absolute;right: 35px;top: 50%;
    transform: translateY(-50%);background-image:url(/resources/custom/images/darchives/main/ico-search-box.png); width: 25px;height:26px;background-repeat: no-repeat;
    background-position: center;font-size: 0;background-color: rgba(0, 0, 0, 0); margin: 0; padding: 0; transition: all .3s; background-size: cover;}
.main-txt-wrap .main-search-wrap .popular-search-box{display:flex; gap:24px; align-items:center;}
.main-txt-wrap .main-search-wrap .popular-search-box p{position:relative; color:#fff; font-family:'Gmarket'; font-size:20px; padding-left:40px; width: 150px;}
.main-txt-wrap .main-search-wrap .popular-search-box p:after{content:""; display:block; width:24px; height:31px; background:url(/resources/custom/images/darchives/main/ico-hotSearch.png);
position:absolute; left:0; top:-4px;}
.main-txt-wrap .main-search-wrap .popular-search-box ul{display:flex; gap:12px; flex-wrap:wrap; width:calc(100% - 150px);}
.main-txt-wrap .main-search-wrap .popular-search-box ul > li > a{display:block; padding:12px 22px; background:rgba(255,255,255,.7); border:1px solid #fff; color:#383838;
border-radius:30px; transition:all .3s;}
.main-txt-wrap .main-search-wrap .popular-search-box ul > li > a:hover{background:#00c6ff; color:#fff;}

.cate-sl-wrap{display:flex; align-items:center; gap:20px;}
.cate-sl-wrap .cate-sl-tit{display:flex; align-items:end; gap:40px; width:720px;}
.cate-sl-wrap .cate-sl-tit p{color:#fff; font-size:30px; font-weight:600; line-height: 1.3; word-break: keep-all;}
.cate-sl-wrap .cate-sl-tit p strong{position:relative; font-size:50px; font-family:'Gmarket'; color:#00c6ff;}
.cate-sl-wrap .cate-sl-tit p strong:after{content:""; display:block; width:100%; height:1px; position:absolute; left:0; bottom:-3px; background:#00c6ff;}
.cate-sl-wrap .cate-sl-tit .cate-sl-pager{margin-bottom:10px; display:flex; gap:12px; align-items:center;}
.cate-sl-wrap .cate-sl-box{width:calc(100% - 720px); overflow: visible; clip-path: inset(0 -100vw 0 0);}
/*.cate-sl-wrap .cate-sl-list{display:flex; gap:40px;}*/
.cate-sl-wrap .cate-sl-itm{width:260px; }
.cate-sl-wrap .cate-sl-itm a{display:flex; width:100%; height:110px; align-items:center; justify-content:center; background:rgba(0,0,0,.6);
border:1px solid #5e5e5e; border-radius:24px; gap:30px; transition:all .3s;}
.cate-sl-wrap .cate-sl-itm a:hover{background:rgba(246,238,21,.6);}
.cate-sl-wrap .cate-sl-txt > span{font-family:'Gmarket'; font-size:20px; color:#fff; font-weight:300; display:block; margin-bottom:6px;}
.cate-sl-wrap .cate-sl-txt > p{font-family:'Gmarket'; font-size:30px; color:#fff;}
.cate-sl-wrap .cate-sl-txt > p > span{font-family:'Gmarket'; font-size:20px; color:#fff; font-weight:300;}

/*아카이브 메인 - sc02*/
.sc02{background:url(/resources/custom/images/darchives/main/sc02-bg.jpg); background-size:cover; padding-top:80px; background-size: cover;}
.new-archive-wrap{display:flex;}
.new-archive-wrap .article-box{width:50%;}
.new-archive-wrap .article-box a{display:block; position:relative;}
.new-archive-wrap .article-box .img-box{width:100%; height:495px; overflow:hidden; }
.new-archive-wrap .article-box .img-box img{width:100%; height:100%; object-fit:cover; transition:all .3s;}
.new-archive-wrap .article-box .img-box:hover img{transform:scale(1.1);}
.new-archive-wrap .article-box .txt-box{position:absolute; left:0; bottom:0; width:100%; background:rgba(0,0,0,.75); padding:35px 12px 45px 60px;}
.new-archive-wrap .article-box .txt-box:after{content:""; display:block; width:1px; height:70px; background:#c1c0c0; position:absolute; bottom:0; left:40px;}
.new-archive-wrap .article-box .txt-box p{color:#fff; font-size:20px; overflow: hidden;line-height: 1.3em; max-height: 3.9em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.contents-box{width:50%; padding-left:80px;}
.contents-box .contents-itm > a{display:flex; gap:35px; padding:26px 60px; align-items:center; border-radius:24px; transition:all .3s;}
.contents-box .contents-itm .contents-img{width:64px; height:64px;}
.contents-box .contents-itm .contents-img img{width:100%; height:100%; object-fit:cover;}
.contents-box .contents-itm .contents-txt {width:calc(100% - 64px - 35px);}
.contents-box .contents-itm .contents-txt > span{color:#fff; display:block; font-size:18px; margin-bottom:10px; transition:all .3s;}
.contents-box .contents-itm .contents-txt > p{color:#fff; font-size:25px; transition:all .3s; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.contents-box .contents-itm > a:hover{background:#fff;}
.contents-box .contents-itm > a:hover .contents-img{border:1px solid #eee;}
.contents-box .contents-itm > a:hover .contents-txt > span{color:#1d1d1d}
.contents-box .contents-itm > a:hover .contents-txt > p{color:#1d1d1d}

.qk-link-wrap{display:flex; align-items:center;}
.qk-link-wrap .main-tit-box{width:50%; margin-bottom:0; text-align:right; padding-right:40px;}
.qk-link-wrap .main-tit-box span{font-size:18px; margin-bottom:10px;}
.qk-link-wrap .main-tit-box p{font-size:28px;}
.qk-link-wrap .qk-link-list{display:flex; position:relative; padding-top:45px; padding-bottom:20px; z-index: 2; width: 50%;}
.qk-link-wrap .qk-link-list:before{width:2000px; height:100%; content:""; display:block; position:absolute; left:0; top:0; background:#fff; z-index: -1;}
.qk-link-wrap .qk-link-itm{width:calc(100% / 5);}
.qk-link-wrap .qk-link-itm > a{display:block; text-align:center; }
.qk-link-wrap .qk-link-itm > a > img{margin-bottom:20px; display:block; margin-left:auto; margin-right:auto; transition:all .3s;}
.qk-link-wrap .qk-link-itm > a:hover > img{translate:translateY(10px);}
.qk-link-wrap .qk-link-itm > a > span{color:#191919; font-size:18px; font-weight:600; display:block;}

.sc03{padding:80px 0; background-image: linear-gradient(to bottom, #fff 60%, #f6f7fb 40%);}
.sc03 .fix-layout{position:relative;}
.sc03 .main-tit-box span {color:#1f1f1f}
.sc03 .main-tit-box p {color:#1f1f1f}
/*.issue-pick-list{padding:0 100px; display:flex; gap:50px; overflow: hidden;}*/
/*.issue-pick-itm{width:calc((100% - 150px) / 3);}*/
.issue-pick-itm > a{display:block; width:100%; position:relative; border-radius:8px; overflow:hidden;}
.issue-pick-itm .issue-pick-img{width:100%; height:310px; overflow:hidden;}
.issue-pick-itm .issue-pick-img img{width:100%; height:100%; object-fit:cover;}
.issue-pick-itm .issue-pick-txt{position:absolute; bottom:-100%; left:0; width:100%; height:100%; background:rgba(0,0,0,.7); color:#fff; font-size:20px;
display:flex; align-items:center; justify-content: center; text-align:center; padding:0 12px; transition:all .3s ease;}
.issue-pick-itm > a:hover .issue-pick-txt{bottom:0;}
.issue-pick-pager a{position:absolute; top:60%; z-index:2;}
.issue-pick-pager .issue-sl-prev{left:0;}
.issue-pick-pager .issue-sl-next{right:0;}

.sc04{padding-bottom:75px; background:#f6f7fb;}
.sc04 h3{font-size:30px; color:#1b1b1b; margin-bottom:40px;}
.noti-list{display:flex; gap:20px;}
.noti-itm{width:calc((100% - 40px) / 3);}
.noti-itm a{display:block; background:#fff; padding:35px; border-radius:4px; border:1px solid #dddddd;}
.noti-itm a > p{font-size:18px; color:#303030; font-weight:600; margin-bottom:12px; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.noti-itm a > span{color:#838282; font-weight:400;}

/*반응형 시작*/
@media all and (max-width:1400px){
		.main-txt-wrap .main-txt h3{font-size:50px;}
		.main-txt-wrap{margin-bottom:50px;}
		
		.contents-box{padding-left:20px;}
}
@media all and (max-width:1200px){
		.sc01{padding-top:150px; min-height:unset; padding-bottom:50px;}
		.main-txt-wrap{flex-wrap:wrap; gap:20px;}
		.main-txt-wrap .main-txt{width:100%; text-align: center;}
		.main-txt-wrap .main-txt h3{margin:20px 0;}
		.main-txt-wrap .main-search-wrap{width:100%;}
		.main-txt-wrap .main-search-wrap form{margin-left:auto; margin-right:auto;}
		.main-txt-wrap .main-search-wrap .popular-search-box{max-width:660px; margin-left:auto; margin-right:auto;}
        .cate-sl-wrap .cate-sl-tit p{font-size:24px;}
		.cate-sl-wrap .cate-sl-tit{width:560px; gap:20px;}
		.cate-sl-wrap .cate-sl-box{width:calc(100% - 560px);}
		
		
		.new-archive-wrap .article-box .txt-box:after{left:12px;}
		.new-archive-wrap .article-box .txt-box{padding-left:30px;}
		.contents-box .contents-itm > a{padding:26px 30px;}
		.contents-box .contents-itm .contents-txt > p {font-size:20px;}
}
@media all and (max-width:900px){
		 .cate-sl-wrap .cate-sl-tit p{font-size:20px;}
		 .cate-sl-wrap .cate-sl-tit{width:510px; gap:20px;}
         .cate-sl-wrap .cate-sl-box{width:calc(100% - 510px);}
}
@media all and (max-width:767px){
		.main-tit-box{margin-bottom:24px;}
		.main-tit-box span{margin-bottom:10px; font-size:20px;}
		.main-tit-box p{font-size:32px;}
		
		.sc01{padding-top:100px;}
		.main-txt-wrap .main-txt h5{font-size:24px;}
		.main-txt-wrap .main-txt h3{font-size:38px;}
		.main-txt-wrap .main-txt p{font-size:16px;}
		.main-txt-wrap .main-txt p br{display:none;}
		.cate-sl-wrap{flex-direction:column; gap:20px;}
		.cate-sl-wrap .cate-sl-tit{width:100%; justify-content: space-between;}
		.cate-sl-wrap .cate-sl-tit p strong{font-size:40px;}
        .cate-sl-wrap .cate-sl-box{width:100%; clip-path: inset(0 -100vw 0 -100vw);}
        .cate-sl-wrap .cate-sl-list{gap:20px;}
        .cate-sl-wrap .cate-sl-itm {width:200px;}
		.cate-sl-wrap .cate-sl-itm a{ height:100px;}
		.cate-sl-wrap .cate-sl-txt > span, .cate-sl-wrap .cate-sl-txt > p > span{font-size:18px;}
		.cate-sl-wrap .cate-sl-txt > p{font-size:24px;}
		
		.new-archive-wrap{flex-direction:column; gap:20px;}
		.new-archive-wrap .article-box{width:100%;}
		.new-archive-wrap .article-box .img-box{height:380px;}
		.contents-box{width:100%; padding-left:0;}
		.contents-box .contents-itm > a{padding:20px;}
		.qk-link-wrap .main-tit-box{width:150px;}
		.qk-link-wrap .qk-link-list{width:calc(100% - 150px); flex-wrap:wrap; padding-left:12px; padding-top:20px; padding-bottom:20px;}
		.qk-link-wrap .qk-link-itm{width:calc(100% / 3); }
		.qk-link-wrap .qk-link-itm > a{border:1px solid #eee; padding:20px 4px; height: 100%;}
		.qk-link-wrap .qk-link-itm > a > span{font-size:16px;}
		
		.sc04 h3{margin-bottom:20px;}
		.noti-list{flex-direction:column;}
		.noti-itm{width:100%; }
}
@media all and (max-width:500px){
		.qk-link-wrap{flex-direction: column; gap: 20px; margin-top: 20px;}
		.qk-link-wrap .main-tit-box{width:100%; text-align:left;}
		.qk-link-wrap .qk-link-list{width:100%; padding-left:0;}
		.qk-link-wrap .qk-link-list:before{width:100vh; left:-12px;}
}
@media all and (max-width:450px){
		.main-txt-wrap{margin-bottom:30px;}
		.main-txt-wrap .main-txt h5{font-size:20px;}
		.main-txt-wrap .main-txt h3{font-size:30px;}
		.main-txt-wrap .main-search-wrap .popular-search-box{flex-direction: column; gap:10px;}
		.main-txt-wrap .main-search-wrap .popular-search-box ul{width:100%;}
		.cate-sl-wrap .cate-sl-tit p{font-size:16px;}
		.cate-sl-wrap .cate-sl-tit p strong{font-size:30px;}
		.main-txt-wrap .main-search-wrap .popular-search-box ul > li > a{padding:8px 16px;}
}

/*애니메이션 추가*/
.main-txt h5{transition:all .3s; transform:translateY(100px); opacity:0}
.main-txt.active h5{transform:translateY(0); opacity:1;}
.main-txt h3{transition:all .3s; transform:translateY(100px); opacity:0}
.main-txt.active h3{transform:translateY(0); opacity:1; transition-delay:.2s}
.main-txt p{transition:all .3s; transform:translateY(100px); opacity:0}
.main-txt.active p{transform:translateY(0); opacity:1; transition-delay:.4s}