#CIRCLE.studio_circle .circle_box {position:absolute; top:50%; left:50%; transform:translate(430px, 44px);}
#CIRCLE.studio_circle.off {transform:translate(200px, 0); opacity:0;}

#STUDIO_MAIN .bgs li.bg1 {background:url("/_resource/images/main/sub/studio/main_bg.jpg") center center no-repeat; background-size:cover;}
#STUDIO_MAIN .contents .thumb.off {transform:translate(200px, 0); opacity:0;}
#STUDIO_MAIN .contents .thumb .thumb_box {position:absolute; top:0; left:0; transform:translate(1230px, 606px) scale(1.1);}
#STUDIO_MAIN .contents .thumb .thumb_mask_box {position:absolute; width:904px; height:904px; border-radius: 50%; overflow:hidden; top:50%; left:50%; transform:translate(-50%, -50%);}
#STUDIO_MAIN .contents .thumb .thumb_mask_box div {position:absolute; top:50%; left:50%; background-size:cover; transform:translate(-50%, -50%); z-index:0;}
#STUDIO_MAIN .contents .thumb .thumb_mask_box .thumb_bg {width:904px; height:904px; background:url("/_resource/images/main/sub/studio/circle_thumb.png") center center no-repeat; background-size:cover;}


#STUDIO_SUB {position:relative; margin-top:100vh; background-color:#fff; z-index:2;}
#STUDIO_LIST {position:relative; padding-top:166px; text-align: center; width:100%;}
#STUDIO_LIST h3 {font-size:42px; color:#222222; font-weight: 500;}
#STUDIO_LIST .bgs {position:absolute; top:0; left:0;}
#STUDIO_LIST .bgs .bg1 {position:absolute; top:330px; left:1040px;}
#STUDIO_LIST .list {position:relative; width:1250px; margin:106px auto 0;}
#STUDIO_LIST .list .detail_btn {position:absolute; top:-34px; right:86px; font-size:13px; font-weight: 300; color:#333333;}
#STUDIO_LIST .list .detail_btn a {display: block;}
#STUDIO_LIST .list .detail_btn a img {vertical-align: middle; position:relative; top:-1px; margin-left:5px;}
#STUDIO_LIST .list .list_box {width:1080px; margin:0 auto; overflow:hidden; }
#STUDIO_LIST .list ul {white-space: nowrap;}
#STUDIO_LIST .list ul li {display: inline-block; margin-right:60px; text-align: left;}
#STUDIO_LIST .list ul li:last-child {margin-right:0;}
#STUDIO_LIST .list ul li .bg {position:relative; width:320px; height:460px; overflow: hidden; background-color:#eeeeee; border:1px solid rgba(0,0,0,0.06); box-sizing: border-box;}
#STUDIO_LIST .list ul li .bg .bg_box {position:relative; width:100%; height:100%;}
#STUDIO_LIST .list ul li .title {display: block; font-size:22px; font-weight: 600; color:#222222; line-height: 1; vertical-align: bottom; margin:26px 0 16px;}
#STUDIO_LIST .list ul li .title .state {color:#fe3333; font-size:12px; font-weight: 400; vertical-align: bottom; margin-left:11px;}
#STUDIO_LIST .list ul li .type {display: block; color:#222222; font-size:12px; font-weight: 300;}
#STUDIO_LIST .list ul li .type span {display: inline-block; margin:0 3px;}
#STUDIO_LIST .list ul li .over_box {position:absolute; top:0; left:0; width:100%; height:100%; opacity:0;}
#STUDIO_LIST .list ul li .over_box a {position:absolute; top:0; left:0; width:100%; height:100%; background:url("/_resource/images/main/sub/studio/poster_over_bg.png") 0 0 no-repeat; background-size:cover; text-align: center; }
#STUDIO_LIST .list ul li .over_box a span {position:absolute; top:50%; left:50%; display:block; width:152px; height:42px; line-height:42px; border:1px solid rgba(255,255,255,0.5); border-radius: 30px; font-size:14px; text-align: center; color:#fff; margin:-21px 0 0 -76px;}
#STUDIO_LIST .list ul li .over_box a img {display: inline-block; vertical-align: middle; position:relative; top:-1px; margin-right:10px;}
#STUDIO_LIST .list .arrows {position:absolute; top:206px;}
#STUDIO_LIST .list .arrow_l {left:0;}
#STUDIO_LIST .list .arrow_r {right:0;}
#STUDIO_LIST .list .arrows.finish img {opacity:0.3;}
#STUDIO_LIST .list .arrows.arrow_l:after {content:""; position:absolute; top:0; left:0; width:48px; height:48px; background:url("/_resource/images/main/list_arrow_l_on.png") 0 0 no-repeat; opacity:0; transition:opacity 0.3s;}
#STUDIO_LIST .list .arrows.arrow_r:after {content:""; position:absolute; top:0; left:0; width:48px; height:48px; background:url("/_resource/images/main/list_arrow_r_on.png") 0 0 no-repeat; opacity:0; transition:opacity 0.3s;}
#STUDIO_LIST .list .arrows:first-child {margin-right:10px;}
#STUDIO_LIST .list .arrows:hover:after {opacity:1;}


#STUDIO_DRAMA_MOVIE {position:relative; width:1080px; margin:192px auto 0; text-align: center;}
#STUDIO_DRAMA_MOVIE .bgs {position:absolute; top:0; left:0; z-index:0;}
#STUDIO_DRAMA_MOVIE .bgs .bg1 {position:absolute; top:80px; left:-690px;}
#STUDIO_DRAMA_MOVIE .top_copy {position:relative; z-index:1;}
#STUDIO_DRAMA_MOVIE .top_copy .tabs {margin-bottom:32px;font-size:0;}
#STUDIO_DRAMA_MOVIE .top_copy .tabs a {display: inline-block; font-size:40px; color:#999; transition:all 0.3s;}
#STUDIO_DRAMA_MOVIE .top_copy .tabs a:first-child:after {content:"/"; position: relative; top:1px; width:22px; height:37px; display: inline-block; font-size:36px;color:#ccc;margin:0 16px;font-weight:500;vertical-align:top;}
#STUDIO_DRAMA_MOVIE .top_copy .tabs a:hover {color:#222222;}
#STUDIO_DRAMA_MOVIE .top_copy .tabs a.on {color:#222222;}
#STUDIO_DRAMA_MOVIE .top_copy .copy_box {position:relative;}
#STUDIO_DRAMA_MOVIE .top_copy .copy_box > div {position:absolute; top:0; left:0; width:100%; text-align: center; opacity:0; visibility: hidden; transition:all 0.3s;}
#STUDIO_DRAMA_MOVIE .top_copy .copy_box > div:first-child {position:relative;}
#STUDIO_DRAMA_MOVIE .top_copy .copy_box > div.on {opacity:1; visibility: visible;}
#STUDIO_DRAMA_MOVIE .top_copy .copy_box .desc {font-size: 18px; font-weight: 300; color:#222222;margin-bottom:35px;}
#STUDIO_DRAMA_MOVIE .top_copy .copy_box .btn a {display: block; width:176px; height:48px; border:1px solid rgba(0,0,0,0.3); font-size:14px; color:#000000; line-height:48px; margin:0 auto; border-radius: 30px; transition:all 0.3s; letter-spacing: 0.2px;}
#STUDIO_DRAMA_MOVIE .top_copy .copy_box .btn a:hover {background-color:#222; color:#fff;}
#STUDIO_DRAMA_MOVIE .list_box {position:relative; margin-top:45px;}
#STUDIO_DRAMA_MOVIE .list_box ul {white-space: nowrap;}
#STUDIO_DRAMA_MOVIE .list_box ul li {position:relative; width:1080px; height:570px; overflow:hidden; display: inline-block; margin-right:40px; vertical-align: top; opacity:0; transform:translate(0, 100px); border:1px solid rgba(0,0,0,0.06); box-sizing: border-box;}
#STUDIO_DRAMA_MOVIE .list_box ul li:last-child {margin-right:0;}
#STUDIO_DRAMA_MOVIE .list_box ul.active li {opacity:1; transform:translate(0, 0); transition:all 0.8s;}
#STUDIO_DRAMA_MOVIE .list_box ul.active li:nth-child(2){transition-delay: 0.1s;}
#STUDIO_DRAMA_MOVIE .list_box ul li a {display: block;}
#STUDIO_DRAMA_MOVIE .list_box ul li .bg {position:absolute; top:0; left:0; width:100%; height:100%; transition:transform 1s;}
#STUDIO_DRAMA_MOVIE .list_box ul li .bg:before {content:""; position:absolute; bottom:0; left:0; width:100%; height:181px; background:url("/_resource/images/main/sub/studio/movdra_dim.png") bottom center no-repeat; background-size:cover;}
#STUDIO_DRAMA_MOVIE .list_box ul li .copy {position:absolute; bottom:50px; left:50px; text-align: left;}
#STUDIO_DRAMA_MOVIE .list_box ul li .copy > span {display: block;}
#STUDIO_DRAMA_MOVIE .list_box ul li .copy .name { font-size:30px; color:#fff; font-weight: 600; margin-bottom:21px; letter-spacing:-0.8px;}
#STUDIO_DRAMA_MOVIE .list_box ul li .copy .date { font-size:14px; color:#fff; font-weight: 400; height:24px; line-height: 24px;}
#STUDIO_DRAMA_MOVIE .list_box ul li .copy .date .type {display: inline-block; font-size:11px; font-weight: 500; width:70px; height:24px; background:url("/_resource/images/main/sub/studio/drama_movie_copy_bg.png") 0 0 no-repeat; text-align: center; margin-right:12px; text-transform:uppercase; letter-spacing: 0.4px;}
#STUDIO_DRAMA_MOVIE .list_box ul li a:hover .bg {transform:scale(1.05);}
#STUDIO_DRAMA_MOVIE .arrows {position:absolute; top:603px; left:0; width:100%;}
#STUDIO_DRAMA_MOVIE .arrows a {position:relative; display: block; position:absolute; top:0;}
#STUDIO_DRAMA_MOVIE .arrows .arrow_l {left:40px;}
#STUDIO_DRAMA_MOVIE .arrows .arrow_r {right:40px;}
#STUDIO_DRAMA_MOVIE .arrows a.finish img {opacity:1;}
#STUDIO_DRAMA_MOVIE .arrows a.arrow_l:after {content:""; position:absolute; top:0; left:0; width:48px; height:48px; background:url("/_resource/images/main/list_arrow_l_on.png") 0 0 no-repeat; opacity:0; transition:opacity 0.3s;}
#STUDIO_DRAMA_MOVIE .arrows a.arrow_r:after {content:""; position:absolute; top:0; left:0; width:48px; height:48px; background:url("/_resource/images/main/list_arrow_r_on.png") 0 0 no-repeat; opacity:0; transition:opacity 0.3s;}
#STUDIO_DRAMA_MOVIE .arrows a:hover:after {opacity:1;}

#STUDIO_VIDEO {margin:180px auto 0;}
#STUDIO_NEWS {margin-top:177px;}



/*************************************************** motion set *****************************************************************************/
/* direct motion */
#STUDIO_MAIN.motion .contents .thumb .thumb_mask_box {width:300px; height:300px;}
#STUDIO_MAIN.direct .contents .thumb .thumb_mask_box {width:904px; height:904px; transition:width 1s, height 1s;}


/* motion set */
#STUDIO_LIST h3 {opacity:0; transform:translate(0, 200px);}
#STUDIO_LIST .list_box {opacity:0; transform:translate(0, 200px);}
#STUDIO_LIST .list .detail_btn {opacity:0; transform:translate(0, 200px);}
#STUDIO_LIST .list .arrow_l {opacity:0; transform:translate(200px, 0);}
#STUDIO_LIST .list .arrow_r {opacity:0; transform:translate(-200px, 0);}

#STUDIO_DRAMA_MOVIE .top_copy {opacity:0; transform:translate(0, 200px);}
#STUDIO_DRAMA_MOVIE .list_box {opacity:0; transform:translate(0, 200px);}
#STUDIO_DRAMA_MOVIE .arrows .arrow_l {opacity:0; transform:translate(200px, 0);}
#STUDIO_DRAMA_MOVIE .arrows .arrow_r {opacity:0; transform:translate(-200px, 0);}
#STUDIO_DRAMA_MOVIE .bgs .bg1 {transform:scale(0.2);}
/*************************************************** motion set *****************************************************************************/