@charset "utf-8";

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

/* 공통 */
#atc01 .box{float:none;position:relative;font-size:13px;line-height:1.7}
#atc01 .box .tit{font-family:'Raleway', sans-serif}

/* 고객센터 */
#atc01 .box01{width:100%;height:280px;padding:30px 35px;background: url(/sh_img/include/inc01/img/box01_bg.jpg) no-repeat top right #03a9ff;color: #dbdfe5;font-size:13px;font-family:'Raleway', sans-serif}
#atc01 .box01 span{}
#atc01 .box01 > p{float:left}
#atc01 .box01 .tit{width: 46.3%;height: auto;padding: 60px 0;font-size:24px;color:#fff;text-align:center;font-family:'notokr-bold';}
#atc01 .box01 .tit .tel{width:50%;padding-top:0;margin-bottom:10px;color:#fff;font-weight:700;font-size:35px;font-family:'Raleway', sans-serif}
#atc01 .box01 .txt{padding: 24px 0 24px 22px;font-size: 15px;line-height: 25px;font-family:'notokr-medium';}
#atc01 .box01 .txt span{display:block;margin-bottom:15px;color:rgba(255,255,255,.7);font-family:'notokr-bold'}
#atc01 .box01 .txt span .color{margin-bottom:0;color:rgba(255,255,255,.9)}

#atc01 .box01 .view{position:absolute;bottom:24px;right:258px;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:auto;height:430px;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 b{display:block;padding-top:2px;font-size:14px;font-weight:normal;letter-spacing:-.15px;color:#a9a9a9;font-family:'notokr-regular'}
#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{float: left;position:relative;width: 50%;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{width: 78%;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 ul{overflow:hidden}
#atc01 .box03 ul li{float:left;position:relative;width:50%;height:260px;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:60px;display:block;font-weight:600;-webkit-transition:all .3s;transition:all .3s;font-family:'Raleway', sans-serif}
#atc01 .box03 ul li:first-child{background-color:rgba(255,255,255,.045)}
#atc01 .box03 ul li .icon{position:absolute;right:36px;bottom:45px;opacity:.3}
#atc01 .box03 ul li:hover .vm{color:rgba(255,255,255,.7)}

/* 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}}