@charset "utf-8";

#atc01{position:relative;overflow:hidden;width:100%;height:1047px}
#atc01:before{position:absolute;right:0;content:'';z-index:-1;width:50%;height:100%;background:#f7f7f7}
#atc01 .img_scroll{position:absolute;width:70%;top:163px;right:0;transition:all 280ms}

@media screen and (max-width:1200px) {
#atc01 .img_scroll{position:absolute;width:700px;top:163px;right:0}
}

#atc01 .txt_area{position:absolute;top:332px;left:40px}
#atc01 .txt_area .s_tit{position:relative;display:inline-block;margin-bottom:7px;font-size:22px;font-style:italic;color:#ffa800;font-family:'Katibeh', cursive}
#atc01 .txt_area .s_tit:before{position:absolute;top:16px;right:-64px;content:'';width:52px;height:1px;background:#e6e6e6}
#atc01 .txt_area h3{font-weight:100;font-size:40px;line-height:55px;letter-spacing:-2px;color:#888;font-family:'notokr-thin'}
#atc01 .txt_area h3 span{display:block;color:#333;font-family:'notokr-bold'}
#atc01 .txt_area .txt{margin-top:25px;font-size:15px;line-height:26px;color:#666;font-family:'notokr-regular'}
#atc01 .txt_area .more_btn{margin-top:38px;width:145px;height:40px;border:1px solid #e1e1e1;font-size:13px;line-height:40px;text-align:center;color:#979797;transition:all 280ms}

#atc01 .txt_area .more_btn a {display:block;border:none;background:transparent;text-transform:uppercase;color:#666;border-radius: 0;
  transition: all 0.7s ease-out;
  background: linear-gradient(270deg, rgba(225,185,49,0.8), rgba(255,156,0,0.8), rgba(255,255,255,0), rgba(255,255,255,0));
  background-position: 1% 50%;
  background-size: 300% 300%;
  text-decoration: none}

#atc01 .txt_area .more_btn a:hover {color:#fff;background-position: 100% 50%}
#atc01 .txt_area .more_btn:hover{border:1px solid #febc3c}
/* Frame 이미지 영역 */
.frame {height:696px;overflow:hidden}
.frame ul{list-style:none;margin:0;padding:0;height:100%}
.frame ul li{float:left;width:318px;height:696px;border:1px solid #efefef;margin:0 13px 0 0;padding:0;background:#fff;cursor:pointer;transition:all 280ms}
.frame ul li:hover .pf_img{left:-300px}
.frame .img_area{position:relative;overflow:hidden;width:316px;height:587px}
.frame .img_area .pf_img{position:absolute;top:0;left:0;transition:all 400ms}
.frame .slide_test_wrap{padding:37px 0 0 23px}
.frame .slide_tit{font-size:18px;color:#222;font-family:'notokr-bold'}
.frame .slide_txt{font-size:14px;color:#989898;}

/* Scrollbar */
.scrollbar {position:relative;margin:40px 0 0 0;height:1px;background:#ddd;line-height:0}
.scrollbar .handle{position:absolute;top:-2px;height:5px;background:#ffa800;cursor:pointer}
.scrollbar .handle .mousearea {position:absolute;top:-9px;left:0;width:100%;height:20px}

/* Controls */
.controls_btn{position:absolute;top:-44px;left:0;font-size:21px;font-family:'Katibeh', cursive}
.controls_btn span{display:inline-block;font-style:italic;cursor:pointer;-ms-user-select:none;-moz-user-select:-moz-none;-webkit-user-select:none;-khtml-user-select:none;user-select:none}
.controls_btn span:hover{color:#ffa800}
.controls_btn .next{padding-left:5px}