@charset "utf-8";

#atc03{position:relative;overflow:hidden;margin:auto;max-width:1920px;padding-bottom:30px;font-family:'Poppins','Noto Sans KR'}
#atc03 *:focus{outline:none}

/* 타이틀 */
#atc03 .tit{position:relative;width:1000px;margin:0 auto 25px;text-align:center}
#atc03 .tit span{font-size:12px;font-weight:600;letter-spacing:.2px;color:rgba(255,255,255,.4)}
#atc03 .tit h2{font-size:33px;font-weight:600;color:#fff}

/* control */
#atc03 .btn_wrap{position:absolute;right:5px;top:20px}
#atc03 .btn_wrap button{display:inline-block;position:relative;width:48px;height:48px;border:none;font-size:11px;font-weight:500;color:#fff;text-align:center;line-height:48px;background-color:transparent;font-family:'Poppins'}
#atc03 .btn_wrap button:before{display:block;content:"";position:absolute;transform:rotate(45deg);width:48px;height:48px;border-radius:10px;border:1px solid rgba(255,255,255,.17);-webkit-transition:all .2s;transition:all .2s}
#atc03 .btn_wrap button.next{margin-left:3px}

/* 슬라이드 */
#atc03 .inc03{position:relative;z-index:3;width:100%;height:460px;overflow:unset;cursor:grab}
#atc03 .inc03 .item{width:380px;height:100%}
#atc03 .inc03 .item a{display:block;position:relative;z-index:1;height:100%;padding:42px 45px;border:1px solid rgba(255,255,255,.15);font-size:13px;font-weight:400;color:rgba(255,255,255,.3);word-break:keep-all}
#atc03 .inc03 .item .date{position:absolute;top:35px;right:35px;font-size:12px;color:#fff;line-height:1.5;letter-spacing:.2px;text-align:center}
#atc03 .inc03 .item .date span{display:block;font-size:23px;font-weight:500}
#atc03 .inc03 .item .stit{display:inline-block;width:80px;height:30px;border:1px solid #c72452;border-radius:30px;font-size:11px;font-weight:700;letter-spacing:.2px;text-align:center;line-height:28px;color:#c72452}
#atc03 .inc03 .item .subj{padding:70px 0 10px;font-size:16px;color:#fff;letter-spacing:-.3px;font-weight:500;font-family:'Noto Sans KR';word-break:keep-all}
#atc03 .inc03 .item .plus{width:40px;height:40px;margin-top:35px;border-radius:50%;border:1px solid rgba(255,255,255,.2);text-align:center;line-height:38px}
#atc03 .inc03 .item .plus img{opacity:.3;-webkit-transition:all .2s;transition:all .2s}
#atc03 .inc03 .item .hit{position:absolute;left:45px;bottom:40px;font-size:12px;font-weight:500;color:#fff;letter-spacing:.2px}
#atc03 .inc03 .item:before{display:block;content:"";position:absolute;top:0;left:0;z-index:0;width:100%;height:100%;background:url(./img/border.png) no-repeat;background-size:contain;opacity:0;-webkit-transition:all .2s;transition:all .2s}
#atc03 .inc03 .item.on:before{opacity:1}
#atc03 .inc03 .is-selected:before{opacity:1}
#atc03 .inc03 .is-selected a{border-color:transparent}
#atc03 .inc03 .is-selected .plus img{opacity:1}

/* pager */
#atc03 .nav_container{display:flex;justify-content:end;position:absolute;z-index:3;top:20px;left:50%;transform:translateX(-50%);max-width:1000px;width:100%}
#atc03 .nav_container div{position:relative;display:flex;justify-content:center;align-items:center;width:48px;height:48px;font-size:11px;font-weight:500;color:#fff;cursor:pointer}
#atc03 .nav_container div:after{content:"";position:absolute;top:0px;left:0px;transform:rotate(45deg);width:100%;height:100%;border:1px solid rgb(255, 255, 255, 0.2);border-radius:8px;transition:all .3s}

/* 반응형 [s] */
@media (hover:hover){
#atc03 .btn_wrap button:hover:before{border-color:rgba(255,255,255,.4)}
#atc03 .inc03 .item:hover:before{opacity:1}
#atc03 .inc03 .item:hover a{border-color:transparent}
#atc03 .inc03 .item:hover .plus img{transform:rotate(90deg);opacity:1}
#atc03 .nav_container div:hover:after{border:1px solid rgb(255, 255, 255, .6)}
}
@media (max-width:1024px){
#atc03{padding-bottom:110px;margin-top:60px}
#atc03 .nav_container{left:unset;right:2.5%;max-width:unset;width:max-content;transform:none}
#atc03 .nav_container div{width:46px;height:46px}
#atc03 .tit{margin:0 auto 35px;width:95%}
#atc03 .tit h2{font-size:28px}
#atc03 .inc03{height:390px}
#atc03 .inc03 .item.on{height:calc(100% - 20px);border:10px solid transparent;border-image:linear-gradient(#c72452,#16429a) 1;box-sizing:content-box;transition:all .3s}
#atc03 .inc03 .item:before{display:none}
#atc03 .inc03 .item a{padding:35px;border:1px solid rgba(255,255,255,.15) !important}
#atc03 .inc03 .item .subj{padding:40px 0 5px}
#atc03 .inc03 .item .plus{margin-top:20px}
#atc03 .inc03 .item .hit{left:35px;bottom:35px}
}
@media (max-width:768px){
#atc03{padding-bottom:90px;margin-top:10px;min-height:600px}
#atc03 .tit h2{font-size:25px}
#atc03 .inc03{height:auto}
#atc03 .inc03 .item {text-align:center}
#atc03 .inc03 .item.on{box-sizing:border-box}
#atc03 .inc03 .item a{display:flex;flex-direction:column;align-items:center;padding:20px 15%}
#atc03 .inc03 .item .date{margin-bottom:15px;position:static}
#atc03 .inc03 .item .date span{font-size:21px}
#atc03 .inc03 .item .subj{padding:18px 0 5px}
#atc03 .inc03 .item .hit{position:static;margin-top:20px;}
}
@media (max-width:480px){
#atc03{padding-bottom:50px;margin-top:0px;min-height:500px}
#atc03 .tit{margin:0 auto 25px}
#atc03 .tit h2{font-size:21px}
#atc03 .nav_container{display:none}
#atc03 .inc03 .item a{padding:15px 10%}
#atc03 .inc03 .item .date{margin-bottom:12px}
#atc03 .inc03 .item .date span{font-size:20px}
#atc03 .inc03 .item .subj{padding:13px 0 5px;font-size:15px}
#atc03 .inc03 .item .plus{margin-top:15px}
#atc03 .inc03 .item .hit{margin-top:15px}
}
@media (max-width:380px){
#atc03{padding-bottom:40px;min-height:465px}
#atc03 .nav_container div{width:43px;height:43px}
#atc03 .tit h2{font-size:19px}
#atc03 .inc03 .item .stit{width:75px;height:28px;line-height:26px}
#atc03 .inc03 .item .date{margin-bottom:10px}
#atc03 .inc03 .item .date span{font-size:19px}
#atc03 .inc03 .item .subj{padding:10px 0 3px;font-size:14px}
#atc03 .inc03 .item a{padding:15px 5%;font-size:12px}
}
/* 반응형 [e] */
