@charset "utf-8";

#atc01{position:relative;width:100%}
#atc01:before{display:block;content:"";position:absolute;left:0;width:0;height:100%;background-color:#f7f7f7}
#atc01_wrap{position:relative;width:1200px;margin:0 auto;padding:125px 0;border-left:1px solid #ddd}

/* 스크롤*/
#atc01 .scr_d{position:absolute;left:-3px;top:50%;display:block;width:5px;height:5px;border-radius:50%;background-color:#222;-webkit-animation:scroll linear 4s infinite;animation:scroll linear 4s infinite}
@-webkit-keyframes scroll{from{top:35%;opacity:0}15%{opacity:1}to{top:70%;opacity:0}}
@keyframes scroll{from{top:35%;opacity:0}15%{opacity:1}to{top:70%;opacity:0}}
#atc01 .scr_d_txt{position:absolute;left:-80px;top:50%;-ms-transform:rotate(90deg);-webkit-transform:rotate(90deg);transform:rotate(90deg);margin-top:-5px;font-size:13px;font-weight:700;color:#222;letter-spacing:2px;font-family:'Playfair Display', serif}

/* 이미지+문구 */
#atc01 .cont{position:relative;padding-left:80px}
#atc01 .cont:after{display:block;visibility:hidden;content:"";clear:both}
#atc01 .cont .atc01_img{float:left;position:relative;width:417px;height:299px;border-radius:60px 0;opacity:0;-webkit-transform:translateY(-30px) rotate(-10deg);transform:translateY(-30px) rotate(-10deg);transform-style:preserve-3d;-webkit-transition:all .3s;transition:all .3s;background-repeat:no-repeat}
#atc01 .cont .atc01_img:after{position:absolute;left:0;top:0;z-index:-1;content:"";width:97%;height:97%;transform:scale(0.95) translateY(25px) translateZ(-20px);filter:blur(20px);opacity:0;background-image:inherit}

#atc01 .cont .txt{float:left;padding:80px 0 0 50px}
#atc01 .cont .txt h3{margin-bottom:15px;font-size:18px;font-weight:700;color:#222;letter-spacing:0;line-height:1.4;font-family:'Playfair Display', serif}
#atc01 .cont .txt h3 span{display:block;font-size:52px}
#atc01 .cont .txt h3 span:after{display:inline-block;content:"";width:7px;height:7px;margin-left:4px;border-radius:50%;background-color:#222}

/* 박스 */
#atc01 .cont .box{position:absolute;right:-70px;bottom:-110px;width:380px;height:527px;padding:100px 0 0 55px;color:#989a9c;background:url(/sh_img/include/include_01/img/box_bg.png) right bottom no-repeat #2f3539;opacity:0;-webkit-transition:all .3s;transition:all .3s}
#atc01 .cont .box h4{font-size:36px;font-weight:700;line-height:1.3;color:#fff;letter-spacing:0;font-family:'Playfair Display', serif}
#atc01 .cont .box p{padding:40px 0 20px;color:#fff;font-family:'notokr-medium'}
#atc01 .cont .box a{display:inline-block;position:relative;margin-top:65px;font-size:13px;line-height:27px;letter-spacing:0;color:#fff;font-family:'Playfair Display', serif}
#atc01 .cont .box a:after{display:block;content:"";position:absolute;right:-85px;top:15px;width:70px;height:1px;background-color:#fff;-webkit-transition:all .3s;transition:all .3s}
#atc01 .cont .box a:hover:after{width:192px;background-color:#dbb313}

/* 액션 */
#atc01 .cont .box.active{bottom:0;opacity:1;-webkit-transition:all 1.2s .15s cubic-bezier(0.165, 0.84, 0.44, 1);transition:all 1.2s .15s ecubic-bezier(0.165, 0.84, 0.44, 1)}
#atc01 .cont .atc01_img.active{opacity:1;-webkit-transform:translateY(0) rotate(0);transform:translateY(0) rotate(0);-webkit-transition:all 1.2s .5s cubic-bezier(0.165, 0.84, 0.44, 1);transition:all 1.2s .5s ecubic-bezier(0.165, 0.84, 0.44, 1)}
#atc01 .cont .atc01_img.active:after{opacity:.9; -webkit-transition:all 3s 1s;transition:all 3s 1s}
#atc01.active:before{width:31%;-webkit-transition:all 2.5s;transition:all 2.5s}/* 익스 8 */

#atc01 .cont .atc01_img.active:after:root{ display:none\9}
@media \0screen {
#atc01 .cont .atc01_img:after { display:none}
}