@charset "utf-8";

#atc01{overflow:hidden;position:relative}
#atc01 .inner{position:relative;width:1600px;margin:0 auto}

#atc01 .grid{position:absolute;top:0;bottom:0;left:0;right:0;z-index:-1;width:100%;max-width:1600px;margin:0 auto}
#atc01 .grid span{position:absolute;left:50%;top:0;bottom:0;z-index:-3;width:1px;height:0;margin-left:-320px;background-color:#e1e1e1;-webkit-transition:all .4s;transition:all .4s}
.fp-viewing-05 #atc01 .grid span, .fp-viewing-last #atc01 .grid span{height:100%;-webkit-transition:all 2s .2s;transition:all 2s .2s}

/* 타이틀 */
#atc01 .tit_area{opacity:0;position:absolute;left:30px;top:200px;z-index:1;color:#08151d;-webkit-transition:all .6s .3s;transition:all .6s .3s}
#atc01 .tit_area span{font-family:'Play'}
#atc01 .tit_area .s_tit{font-size:17px;font-weight:700;font-family:'Play'}
#atc01 .tit_area .b_tit{margin-top:20px;font-size:42px;font-weight:700;line-height:52px;font-family:'Play'}
#atc01 .tit_area .circle{opacity:0;position:absolute;right:0;top:-75px;z-index:-1;width:250px;height:250px;margin-top:-200px;border-radius:50%;-webkit-transition:margin .6s .2s;transition:margin .6s .2s;
background:linear-gradient(-45deg, rgba(255,255,255,0) 35%, #f0f1f3 100%);-webkit-animation:downup 4s infinite;animation:downup 4s infinite;
-webkit-transforsm:translateY(-30px);-ms-transforsm:translateY(-30px);transforsm:translateY(-30px)}
@-webkit-keyframes downup{0%{transforsm:translateY(0)}50%{transform:translateY(50px)}100%{transform:translateY(0)}}
@keyframes downup{0%{transforsm:translateY(0)}50%{transform:translateY(50px)}100%{transform:translateY(0)}}
.fp-viewing-05 #atc01 .tit_area, .fp-viewing-last #atc01 .tit_area{opacity:1;left:0}
.fp-viewing-05 #atc01 .tit_area .circle, .fp-viewing-last #atc01 .tit_area .circle{opacity:1;margin-top:0}

/* 박스 */
#atc01 ul{overflow:hidden;float:right;position:relative;height:50vh}
#atc01 ul li{opacity:0;float:left;position:relative;width:480px;height:100%;-webkit-transform:translateX(-50px);transform:translateX(-50px);-webkit-transition:all .6s;transition:all .6s;background:no-repeat center;background-size:cover}
#atc01 .col1 li:nth-child(1){background-image:url(/sh_img/include/inc01/img/bg-01.jpg)}
#atc01 .col1 li:nth-child(2){background-image:url(/sh_img/include/inc01/img/bg-02.jpg)}
#atc01 .col2 li:nth-child(1){background-image:url(/sh_img/include/inc01/img/bg-03.jpg)}
#atc01 .col2 li:nth-child(2){background-image:url(/sh_img/include/inc01/img/bg-04.jpg)}
#atc01 .col2 li:nth-child(3){background-image:url(/sh_img/include/inc01/img/bg-05.jpg)}
@media (max-width:1460px){#atc01 ul li{width:465px}}

#atc01 ul li a{display:block;height:100%;padding:55% 0 0 60px;color:#fff;-webkit-transition:all .4s cubic-bezier(0.165, 0.84, 0.44, 1);transition:all .4s cubic-bezier(0.165, 0.84, 0.44, 1)}
#atc01 ul li .icon{opacity:0;position:relative}
#atc01 ul li .icon:after{display:block;content:"";position:absolute;bottom:0;left:0;width:0;height:2px;background-color:#fff;-webkit-transition:all .4s cubic-bezier(0.165, 0.84, 0.44, 1);transition:all .4s cubic-bezier(0.165, 0.84, 0.44, 1)}
#atc01 ul li .stit{margin-top:25px;font-size:17px;font-family:'notokr-bold'}
#atc01 ul li .desc{opacity:0;position:absolute;left:60px;top:64%;margin-top:-40px;letter-spacing:-.2px;color:rgba(255,255,255,.6);-webkit-transition:all .4s;transition:all .4s}
#atc01 ul li:hover a{padding-top:38%;color:#fff;background-color:#08151d}
#atc01 ul li:hover .desc{opacity:1;margin-top:0}
#atc01 ul li:hover .icon{opacity:1}
#atc01 ul li:hover .icon:after{width:calc(100% - 60px)}
.fp-viewing-05 #atc01 ul li, .fp-viewing-last #atc01 ul li{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}
.fp-viewing-05 #atc01 ul .li-2,.fp-viewing-05 #atc01 ul .li-4, .fp-viewing-last #atc01 ul .li-2,.fp-viewing-last #atc01 ul .li-4{transition-delay:.3s}
.fp-viewing-05 #atc01 ul .li-1,.fp-viewing-05 #atc01 ul .li-3,.fp-viewing-05 #atc01 ul .li-5, .fp-viewing-last #atc01 ul .li-1,.fp-viewing-last #atc01 ul .li-3,.fp-viewing-last #atc01 ul .li-5{transition-delay:.6s}

/* 자세히보기 */
#atc01 ul li .btn{position:absolute;left:60px;top:86%;width:70px;font-size:13px;font-weight:700;line-height:1;color:#ccc;font-family:'Play'}
#atc01 ul li .btn span{position:absolute;left:0;top:0;-webkit-transition:all .4s;transition:all .4s}
#atc01 ul li .btn span.second{-webkit-transform:translateY(7px);transform:translateY(7px);opacity:0;color:#fff}
#atc01 ul li:hover .btn .second{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
#atc01 ul li:hover .btn .first{-webkit-transform:translateY(-7px);transform:translateY(-7px);opacity:0}