.steps {position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden;}
.steps .side_line img {width:311px; height:311px;}
.media_center_tab {margin-bottom:0;}
.media_center_tab ul.experience_ul li{float: left;width: 100%;text-align: center;position: relative;}

.dump_box {width:100%; height:70px;}
.content_360 {position:relative; height:93vh; min-height:600px; background-color:#000; overflow:hidden; opacity:0;}
.content_360 img {max-width: none;}

#VIDEO_CONTAINER {position:absolute; top:0; left:0; width:100%; height:100%; z-index:0;}
#VIDEO_CONTAINER div {position:absolute; top:0; left:0; width:100%; height:100%;}
#VIDEO_CONTAINER div video {position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; transition:opacity 1s; }
#VIDEO_CONTAINER div video.active {opacity:1;}
#VIDEO_CONTAINER div img {position:absolute; top:0; left:0; width:100%; height:100%;}
#VIDEO_CONTAINER .video_box {opacity:0; transition:opacity 1s;}
#VIDEO_CONTAINER .video_box.active {opacity:1;}
#VIDEO_CONTAINER .video_box .black_dimmed {position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.3); z-index:2;}

#CIRCLE {position:absolute; top:0; left:0; width:100%; height:100%;}
#CIRCLE ul {position: absolute;top:50%;left:50%; transition:all 1s;}
#CIRCLE ul li {position: absolute;top:0;left:0;width: 760px; height: 760px;  margin: -380px 0 0 -380px;}
#CIRCLE .side_circle {position:absolute; top:50%; left:50%;}
#CIRCLE .side_circle div.active {transition:all 0.7s;}
#CIRCLE .side_circle .step1_line {position:absolute; top:-312px; left:0; height:0; overflow: hidden;}
#CIRCLE .side_circle .step2_line {position:absolute; top:0; left:0; height:0; overflow: hidden;}
#CIRCLE .side_circle .step3_line {position:absolute; top:311px; left:-312px; width:311px; height:0; overflow: hidden;}
#CIRCLE .side_circle .step3_line img {position:absolute; bottom:0; left:0;}
#CIRCLE .side_circle .step4_line {position:absolute; top:0; left:-312px; width:311px; height:0; overflow: hidden;}
#CIRCLE .side_circle .step4_line img {position:absolute; bottom:0; left:0;}
#CIRCLE .side_circle .step1_line.active {height:311px;}
#CIRCLE .side_circle .step2_line.active {height:311px;}
#CIRCLE .side_circle .step3_line.active {top:0; height:311px;}
#CIRCLE .side_circle .step4_line.active {top:-311px; height:311px;}

#CIRCLE.active ul li.move { animation-duration: 2.2s; animation-name: circleMotion; animation-iteration-count: infinite; animation-direction: normal; }
#CIRCLE.active ul li.delay {animation-delay: 1s;}
#CIRCLE.big ul {transform:scale(1.5); opacity:0;}
#CIRCLE.small ul {transform:scale(0.79); opacity:1;}


.step_contents {position:absolute; top:0; left:0; width:100%; height:100%; display: table; text-align: center; color:#fff;}
/*.step_contents .circle {position:absolute; top:50%; left:50%; margin:-300px;}*/
.step_contents .inner {display: table-cell; vertical-align: middle;}
.step_contents .inner .spot {margin-top:24px; height:13px;}
.step_contents .inner .copy1 {font-size:70px; margin-top:15px; line-height:70px;}
.step_contents .inner .copy1:after {content:""; display: block; width:30px; height:1px; background-color:rgba(255,255,255,0.7); margin:25px auto 21px;}
.step_contents .inner .copy2 {font-size:16px; line-height:28px;}

/*#STEP_MAIN .circle{position: absolute;top:50%;left:50%;}
#STEP_MAIN .circle li {position: absolute;top:50%;left:50%;width: 760px; height: 760px;  margin: -380px 0 0 -380px;}
#STEP_MAIN .circle.active li.move { animation-duration: 2.2s; animation-name: circleMotion; animation-iteration-count: infinite; animation-direction: normal; }
#STEP_MAIN .circle.active li.delay {animation-delay: 1s;}*/
#STEP_MAIN .main_contents .inner .title {margin-top:25px;}
#STEP_MAIN .main_contents .inner .title:after {content:""; width:21px; height:1px; background-color:rgba(255,255,255,0.7); display: block; margin:30px auto 24px;}
#STEP_MAIN .main_contents .inner .desc {font-size:16px; line-height:26px;}
#STEP_MAIN .main_contents .inner .btn {margin-top:50px;}
#STEP_MAIN .main_contents .inner .btn a {position:relative; display:inline-block; width:213px; height:46px; line-height:46px;}
#STEP_MAIN .main_contents .inner .btn a:before {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:url("/Images/media/htc/main_btn_bg_off.png") 0 0 no-repeat; opacity:0;  transition-delay:0.3s;}
#STEP_MAIN .main_contents .inner .btn a .btn_bg {position:absolute; top:0; left:0; width:100%; height:100%; background:url("/Images/media/htc/main_btn_bg.png") center center no-repeat; border-radius: 110px; transition:all 0.3s;}
#STEP_MAIN .main_contents .inner .btn a .btn_bg.left {width:50%;}
#STEP_MAIN .main_contents .inner .btn a .btn_bg.right {width:50%; left:50%;}
#STEP_MAIN .main_contents .inner .btn a .quality {position:absolute; top:0; left:0; width:100%; height:100%;}
#STEP_MAIN .main_contents .inner .btn a .quality div {width:50%; float:left; display: block; opacity:0; color:#ff4311; transition:all 0.3s; background-color:rgba(0,0,0,0);}
#STEP_MAIN .main_contents .inner .btn a span {position:relative; transition:opacity 0.3s;}
#STEP_MAIN .main_contents .inner .btn a:hover:before {opacity:1; transition-delay:0s;}
#STEP_MAIN .main_contents .inner .btn a:hover .quality div {opacity:1;}
#STEP_MAIN .main_contents .inner .btn a:hover span {opacity:0;}
#STEP_MAIN .main_contents .inner .btn a .quality div:hover {color:#fff;}


/*#STEP1 .step1_contents .circle .step1_line {position:absolute; top:-12px; left:302px; opacity:1;}
#STEP2 .step2_contents .circle .step2_line {position:absolute; top:302px; left:302px; opacity:1;}
#STEP3 .step3_contents .circle .step3_line {position:absolute; top:302px; left:-12px; opacity:1;}
#STEP4 .step4_contents .circle .step4_line {position:absolute; top:-12px; left:-12px; opacity:1;}*/


#RADAR {position:absolute; top:30px; left:33px; width:52px; height:52px; background:url("/Images/media/htc/radar_bg.png") 0 0 no-repeat; opacity:0; transition:opacity 0.3s;}
#RADAR.active {opacity:1;}
#RADAR .radar_bar {position:absolute; top:50%; left:50%;}
#RADAR .radar_bar img {position:absolute; top:-16px; left:-12.5px;}


#CHECK_DOTS {position:absolute; bottom:6px; right:81px; height:40px; opacity:0; transition:opacity 0.3s;}
#CHECK_DOTS.active {opacity:1;}
#CHECK_DOTS:after {content:""; position:absolute; top:1px; right:-15px; display: block; width:1px; height:15px; background-color:rgba(255,255,255,0.5);}
#CHECK_DOTS .check_arrow {position:relative; float:right; top:-1px; margin-left:6px;}
#CHECK_DOTS .check_arrow .on {position:absolute; top:0; left:0; opacity:0;}
#CHECK_DOTS .check_arrow.active img {opacity:0;}
#CHECK_DOTS .check_arrow.active img.on {opacity:1;}
#CHECK_DOTS ul {float:left;}
#CHECK_DOTS ul li {position:relative; float:left;}
#CHECK_DOTS ul li .on {position:absolute; top:-1px; left:0; opacity:0;}
/*#CHECK_DOTS ul li.active {margin:0 5px;}*/
#CHECK_DOTS ul li.active .on {opacity:1;}

#SOUND_VOLUME {position:absolute; bottom:19px; right:25px; height:40px; display: none;}
#SOUND_VOLUME a {display: block; width:40px; height:40px; text-align: center;}
#SOUND_VOLUME a img {position:absolute; top:0; left:0; margin-top:14px; margin-left:12px;}
#SOUND_VOLUME .off {opacity:0;}
#SOUND_VOLUME.mute img {opacity:0;}
#SOUND_VOLUME.mute .off {opacity:1;}

/* GUIDE360 */
#GUIDE360 {position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.4); display: none;}
#GUIDE360 .contents {position:absolute; top:50%; left:0; margin-top:-127px; width:100%; text-align: center;}
#GUIDE360 .contents .icon {width:328px; height:216px; margin:0 auto; background:url("/Images/media/htc/guide_360_seq.png") 0 0 no-repeat; }
#GUIDE360.active .contents .icon { animation: motion-guide-360 2s steps(71) infinite;}


#OVER_360_BOX {position:absolute; top:0; left:0; width:100%; height:100%; display: none; cursor:url("/Images/media/htc/cursor_off.png"), pointer;}
#OVER_360_BOX.on {cursor:url("/Images/media/htc/cursor_on.png"), pointer;}

#HOTSPOT {position:absolute; top:0; left:0; display: none;}
#HOTSPOT a {position:absolute; top:-43px; left:0; display: block; width:42px; }
#HOTSPOT a .copy {position:relative; left:0; width:42px; height:39px; margin-left:-21px; background:url("/Images/media/htc/hotspot_bg.png") center center no-repeat; background-size:cover; transition:all 0.3s;}
#HOTSPOT a .copy .copy_box {position:relative; display:flex; width:100%; height:100%; overflow:hidden;}
#HOTSPOT a .copy .copy_box > img {margin:12px 12px; width:17px; height:14px;}
#HOTSPOT a .copy .copy_box span {position:absolute; top:0; left:41px; display:inline-block; font-size:12px; color:#fff; line-height: 38px; white-space: nowrap; width:0; overflow:hidden; transition:all 0.3s;}
#HOTSPOT a .copy .hotspot_check {position:absolute; top:-9px; right:-9px; opacity:0; transition:opacity 0.3s;}
#HOTSPOT a .arrow {position:relative; left:-6px;}
#HOTSPOT a:hover .copy span {width:100%;}

/* 핫스팟 사이즈조절 */
/*#HOTSPOT a .copy {display:flex; position:relative; left:0; width:150px; height:39px; margin-left:-21px; background:url("/Images/media/htc/hotspot_bg.png") center center no-repeat; background-size:cover; transition:all 0.3s;}
#HOTSPOT a .copy img {margin:12px 12px; width:17px; height:14px;}
#HOTSPOT a .copy span {position:absolute; top:0; left:38px; display:inline-block; font-size:12px; width:100%; overflow:hidden; color:#fff; line-height: 38px; white-space: nowrap; transition:all 0.3s;}
#HOTSPOT a .arrow {position:relative; left:-6px;}*/

#HOTSPOT a:hover .spot_copy_1_1_1 {width:156px; left:-57px;} /* left:(156-42)/2 */
#HOTSPOT a:hover .spot_copy_1_1_2 {width:156px; left:-57px;}
#HOTSPOT a:hover .spot_copy_1_2_1 {width:102px; left:-30px;}
#HOTSPOT a:hover .spot_copy_1_2_2 {width:112px; left:-35px;}
#HOTSPOT a:hover .spot_copy_1_2_3 {width:112px; left:-35px;}

#HOTSPOT a:hover .spot_copy_2_1_1 {width:158px; left:-58px;}
#HOTSPOT a:hover .spot_copy_2_1_2 {width:152px; left:-55px;}
#HOTSPOT a:hover .spot_copy_2_2_1 {width:96px; left:-27px;}
#HOTSPOT a:hover .spot_copy_2_2_2 {width:102px; left:-30px;}

#HOTSPOT a:hover .spot_copy_3_1_1 {width:164px; left:-61px;}
#HOTSPOT a:hover .spot_copy_3_1_2 {width:182px; left:-70px;}
#HOTSPOT a:hover .spot_copy_3_1_3 {width:170px; left:-64px;}
#HOTSPOT a:hover .spot_copy_3_2_1 {width:106px; left:-32px;}
#HOTSPOT a:hover .spot_copy_3_2_2 {width:82px; left:-20px;}

#HOTSPOT a:hover .spot_copy_4_1_1 {width:172px; left:-65px;}
#HOTSPOT a:hover .spot_copy_4_1_2 {width:166px; left:-62px;}
#HOTSPOT a:hover .spot_copy_4_2_1 {width:96px; left:-27px;}
#HOTSPOT a:hover .spot_copy_4_2_2 {width:96px; left:-27px;}
#HOTSPOT a:hover .spot_copy_4_2_3 {width:96px; left:-27px;}


.EN #HOTSPOT a:hover .spot_copy_1_2_1 {width:110px; left:-34px;}
.EN #HOTSPOT a:hover .spot_copy_2_2_1 {width:108px; left:-33px;}
.EN #HOTSPOT a:hover .spot_copy_2_2_2 {width:114px; left:-36px;}
.EN #HOTSPOT a:hover .spot_copy_4_2_1 {width:184px; left:-71px;}
.EN #HOTSPOT a:hover .spot_copy_4_2_2 {width:184px; left:-71px;}
.EN #HOTSPOT a:hover .spot_copy_4_2_3 {width:184px; left:-71px;}
.CN #HOTSPOT a:hover .spot_copy_4_2_1 {width:110px; left:-34px;}
.CN #HOTSPOT a:hover .spot_copy_4_2_2 {width:110px; left:-34px;}
.CN #HOTSPOT a:hover .spot_copy_4_2_3 {width:110px; left:-34px;}


#STEP_MENU {position:absolute; top:0; left:35px; height:100%;}
#STEP_MENU .inner {display: table; height:100%;}
#STEP_MENU .inner ul {display: table-cell; vertical-align:middle;}
#STEP_MENU .inner ul li {float:left; clear:both;}
#STEP_MENU .inner ul li.menu {height:49px;}
#STEP_MENU .inner ul li.line {height:15px; margin:5px 0;}
#STEP_MENU .inner ul li a {display: block; position:relative;}
#STEP_MENU .inner ul li a .on {position:absolute; top:0; left:0; opacity:0; transform:scale(0.8); transition:all 0.3s;}
#STEP_MENU .inner ul li a span {display: inline-block; font-size:14px; color:#fff; line-height:49px; margin-left:11px; opacity:0; transform:translate(-30px, 0); transition:all 0.3s;}
#STEP_MENU .inner ul li a:hover .on {opacity:1; transform:scale(1);}
#STEP_MENU .inner ul li a:hover span {opacity:1; transform:translate(0,0);}
#STEP_MENU .inner ul li a.active .on {opacity:1; transform:scale(1);}
#STEP_MENU .inner ul li a.active span {opacity:1; transform:translate(0,0);}

#POPUP {position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.7); display: none;}
#POPUP .popups {position:absolute; top:0; left:0; width:100%; height:100%; display: table;}
#POPUP .popups ul {display: table-cell; vertical-align: middle;}
#POPUP .popups ul li {position:relative; width:800px; margin:0 auto;}
#POPUP .list_popup ul .img_box {height:332px; background-color:#000;}
#POPUP .list_popup ul .img_box a {position:absolute; top:0; right:-27px;}
#POPUP .list_popup ul .copy1 {height:60px; background-color:#fff; line-height: 60px; border-bottom:1px solid #dedede;}
#POPUP .list_popup ul .copy1 img {vertical-align: middle; position:relative; top:-2px; margin-left:40px;}
#POPUP .list_popup ul .copy1 span {display: inline-block; font-size:15px; color:#ff4311; margin-left:14px;}
#POPUP .list_popup ul .copy1 .right_copy {position:absolute; top:0; right:40px;}
#POPUP .list_popup ul .copy1 .right_copy:before {content:""; width:1px; height:21px; background-color:#dedede; display: inline-block; position:relative; top:5px;}
#POPUP .list_popup ul .copy2 {color:#666666; background-color:#fff;}
#POPUP .list_popup ul .copy2 span {font-size:14px; display: block; padding:30px 40px; line-height:22px;}

#POPUP .video_popup ul .video_box {width:800px; height:450px; background-color:#000;}
#POPUP .video_popup ul .video_box a {position:absolute; top:0; right:-27px;}
#POPUP .video_popup ul .copy1 {height:60px; background-color:#fff; line-height: 60px; border-bottom:1px solid #dedede;}
#POPUP .video_popup ul .copy1 img {vertical-align: middle; position:relative; top:-2px; margin-left:40px;}
#POPUP .video_popup ul .copy1 span {display: inline-block; font-size:15px; color:#ff4311; margin-left:14px;}
#POPUP .video_popup ul .copy1 span.color_black {color:#000;}
#POPUP .video_popup ul .copy1 .right_copy {position:absolute; top:0; right:40px;}
#POPUP .video_popup ul .copy1 .right_copy:before {content:""; width:1px; height:21px; background-color:#dedede; display: inline-block; position:relative; top:5px;}



#LOADING {position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.7); display: none;}
#LOADING .spinner{ position: absolute; top: 50%; left: 50%; width:20px; height:20px; border:5px solid #ff4311; border-right-color: transparent; border-radius: 50%;  margin: -12px 0 0 -12px;  }
#LOADING.active .spinner {animation:rotate-forever 0.75s infinite linear;}



.hidden {visibility: hidden; opacity: 0;}

.EN .steps .step_contents .inner .copy1 {font-size:60px;}
/*.EN #SOUND_VOLUME {bottom:15px;}*/
.CN .steps .step_contents .inner .copy1 {font-size:58px;}
/*.CN #SOUND_VOLUME {bottom:20px;}*/



@keyframes circleMotion {
    0% { transform: scale3d(1, 1, 1) rotate(0.1deg); -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); -o-transform: scale3d(1, 1, 1); }
    21% { opacity: 1; visibility: visible; }
    95%{ transform: scale3d(1.14, 1.14, 1.14) rotate(0.1deg); -webkit-transform: scale3d(1.14, 1.14, 1.14); -moz-transform: scale3d(1.14, 1.14, 1.14); -o-transform: scale3d(1.14, 1.14, 1.14); }
    100% { opacity: 0;visibility: hidden; transform: scale3d(1, 1, 1) rotate(0.1deg); -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); -o-transform: scale3d(1, 1, 1); }
}

@keyframes rotate-forever {
    0% { transform: rotate(0deg);}
    100% { transform: rotate(360deg); }
}

@keyframes motion-guide-360 {
    from { background-position:0 0; }
    to { background-position:0 -15336px; }
}