@charset "utf-8";

#atc02{overflow:hidden;width:100%;height:100%;font-family:'Poppins',sans-serif}
#atc02 .inner{position:relative;width:1200px;height:100%;margin:0 auto}

/* 텍스트 */
#atc02 .bar{position: absolute;left:0;top:0;width:368px;height:0;background-color:#000;-webkit-transition:all .1s .6s;transition:all .1s .6s}
#atc02 .bar p{position:absolute;right:-70px;top:60px;font-size:320px;font-weight:800;color: transparent;-webkit-text-stroke: 1px rgba(255,255,255,.3);
animation:swing 4.2s ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both;animation-iteration-count:infinite}
@keyframes swing{0%{transform:rotate(10deg)}50%{transform:rotate(-10deg)}100%{transform:rotate(10deg)}}
.fp-viewing-thirdPage #atc02 .bar{height:100%;transition:all .8s .2s}
#atc02 .cont{position:absolute;left:65px;bottom:65px;padding-bottom:90px;font-size:13px;line-height:24px;color:rgba(255,255,255,.7);font-family:'notokr-regular'}
#atc02 .cont:after{display:block;content:"";position:absolute;bottom:0;left:0;width:10px;height:10px;background-color:#fff}
#atc02 .cont p{overflow:hidden;margin-bottom:28px;font-size:36px;font-weight:700;line-height:46px;color:#fff;font-family:'Poppins'}
#atc02 .cont p span{overflow:hidden;display:block;opacity:0;filter:alpha(opacity=0)}
#atc02 .cont p span:nth-child(2):after{display:inline-block;content:"";/*width:7px;height:7px;margin-left:4px;border-radius:7px;background-color:#fff*/}
#atc02 .cont p span:nth-child(1){-webkit-transform:translateY(99px);-ms-transform:translateY(99px);transform:translateY(99px);-webkit-transition:all  0.79s 0.36s;transition:all  0.79s 0.36s}
#atc02 .cont p span:nth-child(2){-webkit-transform:translateY(99px);-ms-transform:translateY(99px);transform:translateY(99px);-webkit-transition:all  0.78s 0.45s;transition:all  0.78s 0.45s}
.fp-viewing-thirdPage #atc02 .cont p span{opacity:1;filter:alpha(opacity=100);-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}

/* view btn */
#atc02 .more_btn{display:block;position:absolute;left:50%;bottom:0;z-index:1;width:232px;height:220px;font-size:14px;font-weight:600;color:#fff;text-align:center;line-height:225px;opacity:0;filter:alpha(opacity=0);-webkit-transform:translateY(99px);-ms-transform:translateY(99px);transform:translateY(99px);-webkit-transition:all  0.79s 0.36s;transition:all  0.79s 0.36s}
#atc02 .more_btn span{position:relative;z-index:1}
#atc02 .more_btn:before{display:block;content:"";position:absolute;top:0;left:0;z-index:0;width:100%;height:100%;background-color:#f6bb07;-webkit-transition:all .4s;transition:all .4s}
#atc02 .more_btn:hover:before{border-radius:100px 0 0}
.fp-viewing-thirdPage #atc02 .more_btn{opacity:1;filter:alpha(opacity=100);-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}

/* 이미지 */
#atc02 .img{position:absolute;left:50%;bottom:0;margin-left:136px;opacity:0;filter:alpha(opacity=0);-webkit-transform:translateY(99px);-ms-transform:translateY(99px);transform:translateY(99px);-webkit-transition:all  0.79s 0.18s;transition:all  0.79s 0.18s}
.fp-viewing-thirdPage #atc02 .img{opacity:1;filter:alpha(opacity=100);-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}

/* dot */
#atc02 .dot{position:absolute;left:464px;top:50%;margin-top:-70px}
#atc02 .dot em{display:inline-block;margin-right:13px;-webkit-animation-fill-mode:both;animation-fill-mode:both}
#atc02 .dot em:nth-child(1){animation:flow1  4s infinite}
@keyframes flow1{0%{transform:translateY(-4px)}40%{transform:translateY(50px)}100%{transform:translateY(-4px)}}
#atc02 .dot em:nth-child(2){animation:flow2  4s infinite;animation-delay:.18s}
@keyframes flow2{0%{transform:translateY(-3px)}40%{transform:translateY(51px)}100%{transform:translateY(-2px)}}
#atc02 .dot em:nth-child(3){animation:flow3  4s infinite;animation-delay:.27s}
@keyframes flow3{0%{transform:translateY(-2px)}40%{transform:translateY(52px)}100%{transform:translateY(-3px)}}
#atc02 .dot em:nth-child(4){animation:flow4  4s infinite;animation-delay:.36s}
@keyframes flow4{0%{transform:translateY(-1px)}40%{transform:translateY(53px)}100%{transform:translateY(-1px)}}
#atc02 .dot em:nth-child(5){animation:flow5  4s infinite;animation-delay:.45s}
@keyframes flow5{0%{transform:translateY(0)}40%{transform:translateY(54px)}100%{transform:translateY(0)}}
#atc02 .dot em:nth-child(6){animation:flow6  4s infinite;animation-delay:.54s}
@keyframes flow6{0%{transform:translateY(-1px)}40%{transform:translateY(55px)}100%{transform:translateY(-1px)}}
#atc02 .dot em:nth-child(7){animation:flow7  4s infinite;animation-delay:.63s}
@keyframes flow7{0%{transform:translateY(-2px)}40%{transform:translateY(54px)}100%{transform:translateY(-2px)}}
#atc02 .dot em:nth-child(8){animation:flow8  4s infinite;animation-delay:.72s}
@keyframes flow8{0%{transform:translateY(-3px)}40%{transform:translateY(53px)}100%{transform:translateY(-3px)}}
#atc02 .dot em:nth-child(9){animation:flow9  4s infinite;animation-delay:.81s}
@keyframes flow9{0%{transform:translateY(-4px)}40%{transform:translateY(52px)}100%{transform:translateY(-4px)}}
#atc02 .dot em:nth-child(10){animation:flow10  4s infinite;animation-delay:.90s}
@keyframes flow10{0%{transform:translateY(-5px)}40%{transform:translateY(51px)}100%{transform:translateY(-5px)}}
#atc02 .dot em:nth-child(11){animation:flow11  4s infinite;animation-delay:.99s}
@keyframes flow11{0%{transform:translateY(-4px)}40%{transform:translateY(50px)}100%{transform:translateY(-4px)}}
#atc02 .dot em:nth-child(12){animation:flow12  4s infinite;animation-delay:1.08s}
@keyframes flow12{0%{transform:translateY(-3px)}40%{transform:translateY(51px)}100%{transform:translateY(-3px)}}
#atc02 .dot em:nth-child(13){animation:flow13  4s infinite;animation-delay:1.27s}
@keyframes flow13{0%{transform:translateY(-2px)}40%{transform:translateY(52px)}100%{transform:translateY(-2px)}}
#atc02 .dot em:nth-child(14){animation:flow14  4s infinite;animation-delay:1.36s}
@keyframes flow14{0%{transform:translateY(-1px)}40%{transform:translateY(53px)}100%{transform:translateY(-1px)}}