@charset "utf-8";

#atc03{position:relative;z-index:1}
#atc03:before{ display:block; content:""; position:absolute; left:50%; top:340px;width:100%; height:1px; margin-left:-680px; background-color:#e1e1e1}
#atc03:after{ display:block; content:""; position:absolute; right:0; top:0; z-index:-1; width:50%; height:340px; background-color:#f5f5f5}
#atc03 .inner{position:relative;width:100%;max-width:1200px;margin:0 auto;padding-top:160px}
#atc03 .inner:after{display:block;content:'';clear:both}
#atc03 .inner:before{content:'';position:absolute;left: -80px;top:0;width:1px;height:100%;background-color:#e1e1e1}
#atc03 .inner>div{float:left;width:calc(100% / 2)}

/*list*/
#atc03 .left{height:672px;padding:118px 40px 0}
#atc03 .left .tit_area{display:block;position:relative;margin-bottom:66px}
#atc03 .left .tit_area .tit{font-size:32px;line-height:32px;font-weight:700;letter-spacing:0;color:#194a6c;font-family:'Philosopher'}
#atc03 .left .tit_area .more{position:absolute;right:0;top:5px;width:19px;height:19px;-webkit-transition:all .3s;-ms-transition:all .3s;transition:all .3s}
#atc03 .left .tit_area .more:before{content:'';position:absolute;left:9px;top:0;width:1px;height:100%;background-color:#003c62}
#atc03 .left .tit_area .more:after{content:'';position:absolute;left:0;top:9px;width:100%;height:1px;background-color:#003c62}
#atc03 .left ul li{margin-bottom:30px}
#atc03 .left ul li a{display:block;overflow:hidden}
#atc03 .left ul li a .date{float:left;width:95px;height:95px;margin-right:35px;padding-top:22px;background-color:#f5f5f5;border-radius:15px;letter-spacing:0;text-align:center;font-size:15px;line-height:16px;color:#777;font-family:'Philosopher'}
#atc03 .left ul li a .date .day{margin-bottom:8px;font-size:23px;line-height:23px;color:#2e7cae;font-weight:700}
#atc03 .left ul li a .cont{float:left;width:325px;padding:10px 0 0;letter-spacing:-.2px}
#atc03 .left ul li a .cont .subj{margin-bottom:12px;font-size:16px;line-height:16px;color:#222;font-family:'Noto Sans KR';font-weight:500}
#atc03 .left ul li a .cont .txt{font-size:15px;line-height:25px;color:#777}

/*right*/
#atc03 .right{padding:90px 0 86px 60px;border-left:1px solid #e1e1e1;text-align:center;color:#fff}
#atc03 .right .cont{padding:78px 0 72px;border-radius:30px;background-color:#194a6c}
#atc03 .right .cont .stit{display:inline-block;position:relative;z-index:1;margin-bottom:60px;font-size:17px;font-weight:700;letter-spacing:0;font-family:'Philosopher'}
#atc03 .right .cont .stit:before{position:absolute;left:50%;top:50%;z-index:-1;content:url(./img/inc03_Licon.png);margin:-52px;animation:rotate 10s linear infinite;transform-origin:50% 50%}
@-webkit-keyframes rotate{100%{-webkit-transform:rotate(360deg)}}
@keyframes rotate{100%{transform:rotate(360deg)}}
#atc03 .right .cont .tit{margin-bottom:26px;font-size:32px;line-height:43px;letter-spacing:-1px;white-space:pre-line;font-family:'Noto Sans KR';font-weight:100}
#atc03 .right .cont .tit b{font-family:'Noto Sans KR';font-weight:700}
#atc03 .right .cont .txt{margin-bottom:38px;font-size:15px;line-height:26px;letter-spacing:-.2px;white-space:pre-line;color:rgba(255,255,255,.4)}
#atc03 .right .cont a{display:inline-block;width:250px;height:65px;border-radius:34px;border:1px solid rgba(255,255,255,.2);-webkit-transition:all .3s;-ms-transition:all .3s;transition:all .3s;line-height:65px;color:#fff;font-size:15px;letter-spacing:0;font-weight:700;font-family:'Philosopher'}
#atc03 .right .cont a span{position:relative;padding-right:32px}
#atc03 .right .cont a span:after{right:0px}
#atc03 .right .cont a span:before, #atc03 .right .cont a span:after{display:block;content:"\f178";position:absolute;bottom:0;-webkit-transition:all .3s;transition:all .3s;line-height:15px;font-size:13px;font-weight:normal;font-family:'fontawesome'}
#atc03 .right .cont a span:before{right:10px;opacity:0}

/* 모바일 호버 X */
@media (hover: hover) {
#atc03 .left .tit_area:hover .more{transform:rotate(90deg)}
#atc03 .right .cont a:hover{border:1px solid rgba(255,255,255,.5)}
#atc03 .right .cont a:hover span:before{right:0;opacity:1;-webkit-transition-delay:.1s;transition-delay:.1s}
#atc03 .right .cont a:hover span:after{right:-10px;opacity:0}
}

/* 반응형 [s] */
@media (max-width:1230px){
#atc03 .left{height:auto;padding:118px 30px 0}
#atc03 .left .tit_area .tit{font-size:30px}
#atc03 .left ul li a .cont{width:70%}
#atc03 .right{padding:90px 30px}
#atc03 .right .cont .tit{font-size:30px;line-height:41px}
}

@media (max-width:1024px){
#atc03:before{top:220px}
#atc03:after{height:220px}
#atc03 .inner{padding-top:70px}
#atc03 .left{padding-top:90px}
#atc03 .left ul li a .date{margin-right:30px}
#atc03 .left ul li a .cont .subj{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#atc03 .left ul li a .cont{width:60%}
#atc03 .right{padding:70px 30px}
#atc03 .right .cont{padding:78px 25px 72px}
#atc03 .right .cont .tit{white-space:normal;word-break:keep-all}
#atc03 .right .cont .txt{white-space:normal;word-break:keep-all}
}

@media (max-width:768px){
#atc03:before{top:130px;left:0;margin-left:0}
#atc03:after{display:none}
#atc03 .inner>div{width:100%}
#atc03 .left{padding-top:0}
#atc03 .left .tit_area .tit{font-size:28px}
#atc03 .left ul li a .date{width:85px;height:85px;padding-top:20px;line-height:23px}
#atc03 .left ul li a .date .day{margin-bottom:0;font-size:20px}
#atc03 .left ul li a .cont{width:70%}
#atc03 .left ul li a .cont .subj{font-size:15px}
#atc03 .right{padding:20px 30px 70px}
#atc03 .right .cont .stit{margin-bottom:35px;font-size:15px}
#atc03 .right .cont .tit{font-size:28px;line-height:38px;white-space:pre-line}
#atc03 .right .cont .txt{white-space:pre-line}
#atc03 .right .cont a{font-size:13px}
}

@media (max-width:480px){
#atc03:before{top:175px}
#atc03 .inner{padding-top:50px}
#atc03 .left{padding:64px 15px 0}
#atc03 .left .tit_area .tit{font-size:25px}
#atc03 .left ul li a .cont{width:65%}
#atc03 .right{padding:20px 15px 70px}
#atc03 .right .cont{padding:60px 25px}
#atc03 .right .cont .tit{font-size:25px;line-height:37px}
#atc03 .right .cont .txt{white-space:normal}
}

@media (max-width:380px){
#atc03 .left ul li a .date{margin-right:20px}
#atc03 .left ul li a .cont{width:60%}
#atc03 .right .cont .tit{white-space:normal}
#atc03 .right .cont a{width:100%;height:60px;line-height:60px}
}
/* 반응형 [e] */