@charset "utf-8";

#atc01{overflow:hidden;float:left;position:relative;width:50%;height:700px}

/* 공통 */
#atc01 .box{float:left;position:relative;font-size:13px;line-height:1.7}
#atc01 .box .tit{font-family:'Raleway', sans-serif}
#atc01 .tit b{display:block;padding-top:2px;font-size:14px;font-weight:normal;letter-spacing:-.15px;color:#a9a9a9;font-family:'notokr-regular'}

/* 고객센터 */
#atc01 .box01{width:50%;height:380px;padding:50px 50px;background-image:url(/sh_img/include/inc01/img/box01_bg.jpg);font-size:13px;color:#87a5d7;font-family:'Raleway', sans-serif}
#atc01 .box01 .tit{font-size:17px;font-weight:600;color:#fff;font-family:'Raleway', sans-serif}
#atc01 .box01 .tel{padding-top:50px;margin-bottom:10px;font-size:26px;font-weight:700;color:#fff}
#atc01 .box01 .view{position:absolute;bottom:65px;font-size:13px;font-weight:600;letter-spacing:.3px;color:#fff;}
#atc01 .box01 .view:after{display:inline-block;content:"";position:absolute;left:110%;top:50%;width:43px;height:1px;background-color:rgba(255,255,255,.2)}
#atc01 .box01 a{display:block;position:absolute;right:0;bottom:0;width:75px;height:75px;border-top:1px solid rgba(255,255,255,.2);border-left:1px solid rgba(255,255,255,.2);font-size:18px;text-align:center;line-height:75px;color:#fff;-webkit-transition:all .3s;transition:all .3s}
#atc01 .box01 a:hover{background-color:rgba(255,255,255,.05)}

/* 라테스트 */
#atc01 .box02{width:50%;height:380px;padding:50px 50px;background-color:#fff}
#atc01 .box02 .tit{position:relative;margin-bottom:30px;font-size:17px;font-weight:600;color:#222;cursor:pointer}
#atc01 .box02 .tit span{display:block;position:absolute;right:0;top:13px;width:19px;height:1px;margin-top:-1px;background-color:#333}
#atc01 .box02 .tit span:after{display:block;content:"";position:absolute;left:9px;top:-9px;width:1px;height:19px;background-color:#333;-webkit-transition:all .3s;transition:all .3s}
#atc01 .box02 .tit:hover span:after{-webkit-transform:rotate(90deg);transform:rotate(90deg)}
#atc01 .box02 ul li{position:relative;height:75px;padding-left:90px;margin-bottom:15px;font-size:13px}
#atc01 .box02 ul li a{color:#888}
#atc01 .box02 ul li .date{position:absolute;left:0;top:0;width:75px;height:75px;padding-top:11px;border:1px solid #e1e1e1;line-height:1.4;text-align:center;-webkit-transition:all .3s;transition:all .3s;font-family:'Raleway', sans-serif}
#atc01 .box02 ul li .date .day{font-size:20px;font-weight:600;color:#222}
#atc01 .box02 ul li .subj{padding-top:14px;font-size:14px;color:#222;font-family:'notokr-medium'}
#atc01 .box02 ul li:hover .date{background-color:#f7f7f7}

/* 바로가기 */
#atc01 .box03{width:100%;color:#787a7d;background-color:#2a2f37;font-family:'notokr-medium'}
#atc01 .box03 .tit{position:relative}
#atc01 .box03 .tit span{display:block;position:absolute;right:0;top:13px;width:19px;height:1px;margin-top:-1px;background-color:#fff}
#atc01 .box03 .tit span:after{display:block;content:"";position:absolute;left:9px;top:-9px;width:1px;height:19px;background-color:#fff;-webkit-transition:all .3s;transition:all .3s}
#atc01 .box03 .tit:hover span:after{-webkit-transform:rotate(90deg);transform:rotate(90deg)}
#atc01 .box03 > ul{overflow:hidden}
#atc01 .box03 > ul > li{float:left;position:relative;width:50%;height:320px;padding:45px 50px;cursor:pointer}
#atc01 .box03 > ul > li .tit{margin-bottom:15px;font-size:17px;font-weight:600;color:#fff}
#atc01 .box03 > ul > li .vm{margin-top:120px;display:block;-webkit-transition:all .3s;transition:all .3s;font-size:18px;}
#atc01 .box03 > ul > li:first-child{background-color:rgba(255,255,255,.045)}
#atc01 .box03 > ul > li .icon{position:absolute;right:36px;bottom:65px}
#atc01 .box03 > ul > li:hover .vm{color:rgba(255,255,255,.7)}
#atc01 .box03 .latest_area ul li{position:relative;height:75px;padding-left:90px;margin-bottom:15px;font-size:13px}
#atc01 .box03 .latest_area ul li a{color:#fff}
#atc01 .box03 .latest_area ul li .date{position:absolute;left:0;top:0;width:75px;height:75px;padding-top:11px;border:1px solid #e1e1e1;line-height:1.4;text-align:center;-webkit-transition:all .3s;transition:all .3s;font-family:'Raleway', sans-serif}
#atc01 .box03 .latest_area ul li .date .day{font-size:20px;font-weight:600;color:#ddd}
#atc01 .box03 .latest_area ul li .subj{padding-top:14px;font-size:14px;color:#ddd;font-family:'notokr-medium'}
#atc01 .box03 .latest_area ul li:hover .date{background-color:#2a2f37}

/* fadeInUp  */
#atc01 .box01{animation-delay:.4s}
#atc01 .box02{animation-delay:.6s}
#atc01 .box03{animation-delay:.8s}
#atc01 .animated{-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
#atc01 .fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}
@-webkit-keyframes fadeInUp{from{opacity:0;webkit-transform:translate3d(0, 30%, 0);transform:translate3d(0, 30%, 0)}to{opacity:1;webkit-transform:none;transform:none}}
@keyframes fadeInUp{from{opacity:0;webkit-transform:translate3d(0, 30%, 0);transform:translate3d(0, 30%, 0)}to{opacity:1;webkit-transform:none;transform:none}}