@charset "utf-8";

#atc01{float:right}
#atc01 .left{float:left;margin-right:14px}
#atc01 .right{float:left}
#atc01 .box{padding:30px 32px;border-radius:10px;background-color:#fff}
#atc01 .box .tit_area{overflow:hidden;margin-bottom:20px}
#atc01 .box .tit{float:left;font-size:20px;font-family:'notokr-bold'}
#atc01 .box .tit_area a{float:right;margin-top:8px;font-size:12px;font-weight:700;color:#999;transition:all .3s;font-family:'Play',sans-serif}
#atc01 .box .tit_area a:hover{color:#666}

#atc01 .box01{overflow:hidden;width:342px;height:350px;padding:0;margin-bottom:14px}
#atc01 .box01 .sub_box_all{overflow:hidden;padding:30px 32px}
#atc01 .box01 .sub_box_all a:nth-child(1), #atc01 .box01 .sub_box_all a:nth-child(2){border-bottom:1px solid #d7d7d7}
#atc01 .box01 .sub_box_all a:nth-child(odd){border-right: 1px solid #d7d7d7}
#atc01 .box01 .sub_box_all a{display:block;position:relative;float:left;width:50%;height:116px;text-align:center}
#atc01 .box01 .sub_box_all .sub_box{position:absolute;top:50%;left:50%;-webkit-transform:translateY(-50%) translateX(-50%);-ms-transform:translateY(-50%) translateX(-50%);transform:translateY(-50%) translateX(-50%);width:100%}
#atc01 .box01 .sub_box_all .sub_box .img{position:relative;z-index:1}
#atc01 .box01 .sub_box_all a:hover .sub_box .img:before{background-color:rgba(204,204,204,.25)}
#atc01 .box01 .sub_box_all .sub_box .img:before{position:absolute;top:50%;left:50%;z-index:-1;-webkit-transition:all 3s;-ms-transition:all 3s;transition:all 3s;-webkit-transform:translateY(-50%) translateX(-50%);-ms-transform:translateY(-50%) translateX(-50%);transform:translateY(-50%) translateX(-50%);width:42px;height:42px;border-radius:50%;background-color:rgba(204,204,204,0);content:'';-webkit-transition:all .3s;-ms-transition:all .3s;transition:all .3s}
#atc01 .box01 .sub_box_all .sub_box p{margin-top:6px;font-size:16px;color:#555;font-family:'notokr-medium'}
#atc01 .box01 .link{display:block;position:relative;padding:0 32px;line-height:58px;background-color:#7d9ecd;color:#fff;font-size:16px;font-family:'notokr-medium'}
#atc01 .box01 .link:before,#atc01 .box01 .link:after{display:block;content:"\f0da";position:absolute;top:-1px;-webkit-transition:all .3s;transition:all .3s;font-family:'fontawesome'}
#atc01 .box01 .link:before{right:42px;opacity:0}
#atc01 .box01 .link:after{right:32px}
#atc01 .box01 .link:hover:before{right:32px;opacity:1;-webkit-transition-delay:.1s;transition-delay:.1s}
#atc01 .box01 .link:hover:after{right:20px;opacity:0}

#atc01 .box02{width:342px;height:221px}
#atc01 .box02 .cont li{overflow:hidden;width:136px !important;border-radius:3px}

#atc01 .box03{width:327px;height:349px;padding:0;margin-bottom:14px;font-size:14px;color:#777}
#atc01 .box03 a{display:block;position:relative;height:100%;padding:30px 0 0 32px}
#atc01 .box03 .cont{float:left}
#atc01 .box03 .cont .tit{float:none;margin-bottom:24px;color:#222}
#atc01 .box03 .cont .txt{margin-bottom:30px;color:#777;line-height:22px;letter-spacing:-.5px}
#atc01 .box03 .cont .ceo{position:absolute;bottom:38px;color:#777}
#atc01 .box03 .cont .ceo span{margin-left:4px;color:#333;font-size:18px;font-family:'notokr-bold'}
#atc01 .box03 .img{position:absolute;bottom:0;right:-38px}
#atc01 .box03 a>p{position:absolute;background-color:#1364a5;opacity:.15}
#atc01 .box03 .square_l{right:15px;top:74px;width:70px;height:70px;border-radius:12px;-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}
#atc01 .box03 .square_s{right:184px;bottom:81px;width:18px;height:18px;border-radius:4px;-webkit-transform:rotate(15deg);-ms-transform:rotate(15deg);transform:rotate(15deg);opacity:.2}
#atc01 .box03 .square_m{left:28px;bottom:125px;width:38px;height:38px;border-radius:8px;-webkit-transform:rotate(60deg);-ms-transform:rotate(60deg);transform:rotate(60deg);opacity:.2}
#atc01 .box03:hover .square_l{animation:rotate 2s linear infinite;transform-origin:50% 50%}
@-webkit-keyframes rotate{100%{-webkit-transform:rotate(390deg)}}
@keyframes rotate{100%{transform:rotate(390deg)}}
#atc01 .box03:hover .square_s{animation:rotate2 2s linear infinite;transform-origin:50% 50%}
@-webkit-keyframes rotate2{100%{-webkit-transform:rotate(-345deg)}}
@keyframes rotate2{100%{transform:rotate(-345deg)}}
#atc01 .box03:hover .square_m{animation:rotate3 2s linear infinite;transform-origin:50% 50%}
@-webkit-keyframes rotate3{100%{-webkit-transform:rotate(420deg)}}
@keyframes rotate3{100%{transform:rotate(420deg)}}

#atc01 .box04{width:327px;height:221px;padding:20px;background-color:#7d9ecd;color:#fff}
#atc01 .box04 .tit_area{margin-bottom:15px;padding-bottom:15px;text-align:center;border-bottom:1px solid rgba(255,255,255,.3)}
#atc01 .box04 .tit_area .tit{float:none;margin-bottom:5px;font-size:15px;font-family:'notokr-medium'}
#atc01 .box04 .tit_area .tel{font-size:28px;font-weight:700;font-family:'Play',sans-serif}
#atc01 .box04 .time_all{overflow:hidden;padding:0 10px}
#atc01 .box04 .time_all .left{position:relative;padding-right:15px;margin-right:15px;float:left;font-size:14px;line-height:24px;color:#fff}
#atc01 .box04 .time_all .left:before{position:absolute;right:0;top:4px;width:1px;height:85px;background-color:rgba(255,255,255,.3);content:''}
#atc01 .box04 .time_all .left dl{overflow:hidden}
#atc01 .box04 .time_all .left dl:before{float:left;width:2px;height:2px;margin:10px 8px 0 0;background-color:#fff;content:''}
#atc01 .box04 .time_all .left dl dt{float:left;margin-right:10px;opacity:.7}
#atc01 .box04 .time_all .left dl dd{float:left}
#atc01 .box04 .time_all .right{float:left;padding-top:14px;text-align:center}
#atc01 .box04 .time_all .right p{opacity:.8;margin-top:10px;-webkit-transition:all .3s;-ms-transition:all .3s;transition:all .3s;font-size:14px;color:#fff;font-family:'notokr-medium'}
#atc01 .box04 .time_all .right img{opacity:.8;-webkit-transition:all .3s;-ms-transition:all .3s;transition:all .3s}
#atc01 .box04 .time_all .right:hover img{opacity:1}
#atc01 .box04 .time_all .right:hover p{opacity:1}