@charset "UTF-8";
/* CSS Document */
body,html{
	margin:0 0;
	width:100%;
	height:100%;
	font-family:'SegoeUI', sans-serif;
	-webkit-text-size-adjust:none;
	-moz-text-size-adjust:none;
	-ms-text-size-adjust:none;
	overflow-X:hidden;
	/*overflow-Y:scroll;*/
	background-image:url(../img/background.jpg);
	color:#fff;
}

.wrapper{ position:relative; overflow:hidden; }
img{ border:none; margin:0; padding:0; }

input, textarea{ 
	border:none; 
	padding:0px;
	background-color:transparent;
	font-size:16px; 
	font-family:'SegoeUI', sans-serif;
	color:#fff;
	-moz-appearance:none;
	-webkit-appearance:none;
	-webkit-border-radius:0px;
	resize:none;
	outline:none; 
}
input:focus, select:focus, textarea:focus{ outline:none; font-style:inherit; }
input[type="file"] {   opacity:0; cursor:pointer; }

select{
	background-image:none;
	width:95%; padding:0; margin:0; border:none;
	border-radius:0px;
	color:#fff;
	opacity:0;
	font-size:16px;
	height:46px;
}

a{ color:#fff; text-decoration:none;}
a.a_remove{ color:#333; }
a.a_remove:hover{ color:#111; }

a.blue_link{ color:#107cb1; text-decoration:underline; }

ul, li{ margin:0; padding:0; list-style-type:none;}
div, select, a, input, img, span{ -webkit-tap-highlight-color: rgba(0,0,0,0); }
h1, h2, h3, h4, h5, h6{ font-family:inherit; font-size:inherit; font-weight:inherit; line-height:inherit; margin:0; display:inherit; vertical-align:auto; }

ul.tnc_first, ul.tnc_first > li { list-style-type:decimal; margin:12px; }
ul.tnc_second, ul.tnc_second>li { list-style-type:lower-roman; }
ul.tnc_third, ul.tnc_third>li { list-style-type:upper-roman; margin-left:15px; }

li.product_bullet{ background-image:url(../img/bullet.png); background-position:left top; background-repeat:no-repeat; padding-left:20px; background-size:10px 20px; }

.txt_cnt{ font-size:18px; }
.txt_body{ font-size:20px; }
.txt_head{ font-size:40px; }
.txt_subhead{ font-size:25px; }
.txt_bold{ font-weight:bold; }
.txt_small{ font-size:14px; }
.txt_step{  font-size:82px; letter-spacing:2px; line-height:100%; font-weight:100; }

.game_step_head{ float:left; margin-right:10px;  }
.game_step_head.winner{ padding-top:30px; }
.game_step_body{ float:left; margin-top:7px; padding-top:43px; }

.txt_black{ color:#111; }
.txt_white{ color:#fff; }
.txt_blue{  color:#107cb1; }
.txt_grey{  color:#727d84; }

.ms_button{ position:absolute; width:120px; height:18px; padding:9px 0 9px 0; text-align:center; color:#fff; line-height:100%; cursor:pointer; }
.ms_button_label{ position:relative; height:inherit; }

.ms_button.inactive{ cursor:auto; opacity:0.4; }

.ms_button.center{ margin:25px auto; }

.ms_button.float_right{ float:right; margin-left:10px; }

.ms_button.float{ position:relative; margin-bottom:15px; }
@media only screen and (min-width:0px) and (max-width: 1023px){ 
.ms_button.float{ float:left; margin-left:0px; }
}

@media only screen and (min-width:0px) and (max-width: 479px){
	.txt_cnt{ font-size:12px; }
	.txt_body{ font-size:12px; }
	.txt_head{ font-size:22px; }
	.txt_subhead{ font-size:14px; }
	.txt_small{ font-size:11px; }
	.txt_step{  font-size:48px; }
	
	.game_step_head.winner{ padding-top:10px; }
	.game_step_head{ float:none; }
	.game_step_body{ padding-top:0px; float:none; }
	
	li.product_bullet{ background-size:6px 12px; padding-left:12px; }
	.ms_button{ height:12px; padding:4px 0 8px 0;}
}
@media only screen and (min-width:480px) and (max-width: 639px){
	.txt_cnt{ font-size:12px; }
	.txt_body{ font-size:13px; }
	.txt_head{ font-size:26px; }
	.txt_subhead{ font-size:16px; }
	.txt_small{ font-size:11px; }
	.txt_step{  font-size:48px; }
	
	.game_step_head.winner{ padding-top:12px; }
	.game_step_body{ padding-top:22px; }
	
	li.product_bullet{ background-size:6px 12px; padding-left:12px; }
	.ms_button{ height:12px; padding:4px 0 8px 0; }
}
@media only screen and (min-width:640px) and (max-width: 767px){
	.txt_cnt{ font-size:13px; }
	.txt_body{ font-size:14px; }
	.txt_head{ font-size:28px; }
	.txt_subhead{ font-size:17px; }
	.txt_small{ font-size:11px; }
	.txt_step{  font-size:52px; }
	
	.game_step_head.winner{ padding-top:13px; }
	.game_step_body{ padding-top:23px; }
	
	li.product_bullet{ background-size:7px 14px; padding-left:14px; }
	.ms_button{ height:13px; padding:5px 0 9px 0; }
}
@media only screen and (min-width:768px) and (max-width:1023px){
	.txt_cnt{ font-size:14px; }
	.txt_body{ font-size:15px; }
	.txt_head{ font-size:30px; }
	.txt_subhead{ font-size:19px; }
	.txt_small{ font-size:12px; }
	.txt_step{  font-size:56px; }
	
	.game_step_head.winner{ padding-top:15px; }
	.game_step_body{ padding-top:26px; }
	
	li.product_bullet{ background-size:7px 14px; padding-left:14px; }
	.ms_button{ height:14px; padding:7px 0 8px 0; }
}
@media only screen and (min-width:1024px) and (max-width:1279px){
	.txt_cnt{ font-size:14px; }
	.txt_body{ font-size:16px; }
	.txt_head{ font-size:32px; }
	.txt_subhead{ font-size:20px; }
	.txt_small{ font-size:12px; }
	.txt_step{  font-size:56px; }
	
	.game_step_head.winner{ padding-top:12px; }
	.game_step_body{ padding-top:25px; }
	
	li.product_bullet{ background-size:7px 15px; padding-left:15px; }
	.ms_button{ height:14px; padding:7px 0 8px 0; }
}
@media only screen and (min-width:1280px) and (max-width:1599px){
	.txt_cnt{ font-size:16px; }
	.txt_body{ font-size:17px; }
	.txt_head{ font-size:34px; }
	.txt_subhead{ font-size:21px; }
	.txt_small{ font-size:14px; }
	.txt_step{  font-size:64px; }
	
	.game_step_head.winner{ padding-top:16px; }
	.game_step_body{ padding-top:31px; }
	
	li.product_bullet{ background-size:8px 17px; padding-left:17px; }
	.ms_button{ height:16px; padding:8px 0 9px 0; }
}

.clear{ clear:both; }
canvas{ position:absolute; top:0; left:0; }

#header_container, #body_container, #footer_container, .content_container{ width:100%; position:relative; }

.loader_container{ position:fixed; z-index:150; width:0%; height:6px; top:0; margin:0; overflow:hidden; 
	transition:width .2s ease-out;
	-webkit-transition:width .2s ease-out;
    -moz-transition:width .2s ease-out;
	-ms-transition:width .2s ease-out;
	-o-transition:width .2s ease-out;
}
.loader_container > img{ width:100%; height:6px; margin-top:0; vertical-align:top; }
@media only screen and (min-width:0px) and (max-width: 640px){
	.loader_container{ height:4px; }
}

@keyframes newIcon {
    from { top:16px; }
    to { top:6px; }
}
.menu_icon_new{ 
	position:fixed; width:60px; height:43px; background-size:contain; background-image:url(../img/icon_new.png); background-repeat:no-repeat; z-index:96; 
	top:16px; opacity:0;
	-webkit-transition:opacity .2s ease-out;
    -moz-transition:opacity .2s ease-out;
	-ms-transition:opacity .2s ease-out;
	-o-transition:opacity .2s ease-out;
}
.menu_icon_new.desktop_div{
	animation-name: newIcon;
    animation-duration: .4s;
	animation-iteration-count: infinite;
}


@keyframes newIconM {
    from { top:20%; }
    to { top:30%; }
}

.menu_icon_new.mobile_div{ position:absolute; left:15%; top:20%; width:40px; height:29px; }
.menu_icon_new.mobile_div{
	animation-name: newIconM;
    animation-duration: .4s;
	animation-iteration-count: infinite;
}

.menu_container{ 
	position:fixed; width:0px; height:40px; top:28px; left:50%; margin-left:0px; overflow:hidden; z-index:95;
	transition:width .7s cubic-bezier(.4,.23,0,1), margin-left .7s cubic-bezier(.4,.23,0,1);
	-webkit-transition:width .7s cubic-bezier(.4,.23,0,1), margin-left .7s cubic-bezier(.4,.23,0,1);
    -moz-transition:width .7s cubic-bezier(.4,.23,0,1), margin-left .7s cubic-bezier(.4,.23,0,1);
	-ms-transition:width .7s cubic-bezier(.4,.23,0,1), margin-left .7s cubic-bezier(.4,.23,0,1);
	-o-transition:width .7s cubic-bezier(.4,.23,0,1), margin-left .7s cubic-bezier(.4,.23,0,1);
}
.menu_container.active{ width:1000px; margin-left:-500px; }
.menu_container_inner{ position:absolute; width:1000px; height:40px; top:0; left:50%; margin-left:-500px;}
.menu_container_ele.corner_left, .menu_container_ele.corner_right{ position:absolute; width:40px; height:40px; background-size:contain; background-repeat:no-repeat;  }
.menu_container_ele.corner_left{  left:0px;  background-image:url(../img/menu_corner_left.png); }
.menu_container_ele.corner_right{ right:0px; background-image:url(../img/menu_corner_right.png); }
.menu_container_ele.cnt{ position:absolute; left:40px; width:920px; height:40px; background-image:url(../img/menu_background.png); }

.menu_button{ float:left; font-size:17px; color:#fff; margin-top:8px; text-align:center; cursor:pointer; }
.menu_button:hover{ color:#107cb1; }
.menu_button.bleed{ width:60px; margin-top:0; height:40px; cursor:auto; }
.menu_button.sep{ width:120px; margin-top:7px; height:26px; background-image:url(../img/menu_sep.svg); background-size:contain; background-repeat:no-repeat; background-position:center center; cursor:auto; }
.menu_button.middle_space{ width:230px; }

.logo_container{ position:fixed; bottom:35px; right:50px; width:150px; z-index:100; }
.logo_container.twoinone{ top:-98px; left:50%; width:136px; height:98px; margin-left:-68px; }
.logo_container.menu, .logo_container.microsoft{ opacity:0; 
	transition:bottom 0.4s ease-out, opacity 0.4s linear, visibility .4s;
	-webkit-transition:bottom 0.4s ease-out, opacity 0.4s linear, visibility .4s;
    -moz-transition:bottom 0.4s ease-out, opacity 0.4s linear, visibility .4s;
	-ms-transition:bottom 0.4s ease-out, opacity 0.4s linear, visibility .4s;
	-o-transition:bottom 0.4s ease-out, opacity 0.4s linear, visibility .4s;
}
.logo_container.menu{ top:-1000px; left:-1000px; }
.logo_container.microsoft.active{ opacity:1; }

.logo_container.scroll{ width:100%; bottom:50px; right:0; text-align:center; opacity:0; visibility:hidden;
	transition:bottom 0.4s ease-out, opacity 0.4s linear, visibility .4s;
	-webkit-transition:bottom 0.4s ease-out, opacity 0.4s linear, visibility .4s;
    -moz-transition:bottom 0.4s ease-out, opacity 0.4s linear, visibility .4s;
	-ms-transition:bottom 0.4s ease-out, opacity 0.4s linear, visibility .4s;
	-o-transition:bottom 0.4s ease-out, opacity 0.4s linear, visibility .4s;
}
.logo_container.scroll.active{ bottom:30px; opacity:1;  }
.logo_container.scroll > img{ max-width:40px; }

.menu_mobile_container_icon{ text-align:center; opacity:0;
	transition:opacity 0.5s linear;
	-webkit-transition:opacity 0.5s linear;
    -moz-transition:opacity 0.5s linear;
	-ms-transition:opacity 0.5s linear;
	-o-transition:opacity 0.5s linear;
}
.menu_mobile_container_icon.open{ opacity:1; }


.menu_mobile_container_ele{ text-align:center; padding:24px 0; opacity:0; width:100%; margin-top:-10px; position:relative;
	transition:opacity 0.4s linear, margin-top 0.5s ease-out;
	-webkit-transition:opacity 0.4s linear, margin-top 0.5s ease-out;
    -moz-transition:opacity 0.4s linear, margin-top 0.5s ease-out;
	-ms-transition:opacity 0.4s linear, margin-top 0.5s ease-out;
	-o-transition:opacity 0.4s linear, margin-top 0.5s ease-out;
}
.menu_mobile_container_ele.open{ opacity:1; margin-top:0; 
	transition:opacity 0.4s linear, margin-top 0.5s ease-out;
	-webkit-transition:opacity 0.4s linear, margin-top 0.5s ease-out;
    -moz-transition:opacity 0.4s linear, margin-top 0.5s ease-out;
	-ms-transition:opacity 0.4s linear, margin-top 0.5s ease-out;
	-o-transition:opacity 0.4s linear, margin-top 0.5s ease-out;
}
.menu_mobile_container_ele.active, .menu_mobile_container_ele.selected{ background-color:#fff; color:#107cb1; }

@media only screen and (min-width: 0px) and (max-width: 480px) {
	.logo_container{ bottom:auto; top:23px; right:15px; width:80px; }
	.logo_container.menu{ bottom:auto; top:12px; left:12px; width:40px; }
	.logo_container.menu.active, .logo_container.microsoft.active{ opacity:1; }
	.logo_container.scroll{ top:auto; bottom:25px; display:block; }
	.logo_container.scroll.active{ bottom:15px; visibility:visible; }
}
@media only screen and (min-width: 481px) and (max-width: 767px) {
	.logo_container{ bottom:auto; top:32px; right:20px; width:96px; }
	.logo_container.menu{ bottom:auto; top:16px; left:16px; width:52px; }
	.logo_container.menu.active, .logo_container.microsoft.active{ opacity:1; }
	.logo_container.scroll{ top:auto; bottom:35px; display:block; }
	.logo_container.scroll.active{ bottom:20px;visibility:visible;  }
}
@media only screen and (min-width: 0px) and (max-width: 767px) {
	.logo_container.twoinone{ display:none; }
	.menu_container{  display:none;  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
	.logo_container{ bottom:20px; right:30px; width:105px; }
	.logo_container.twoinone{ width:98px; height:70px; top:-70px; margin-left:-49px;  }
	
	@keyframes newIcon {
		from { top:9px; }
		to { top:4px; }
	}
	
	.menu_icon_new{ top:9px; width:40px; height:29px; }
	.menu_container{ height:30px; top:20px;  }
	.menu_container.active{ width:700px; margin-left:-350px; }
	.menu_container_inner{ width:700px; height:30px; margin-left:-350px; }
	.menu_container_ele.corner_left, .menu_container_ele.corner_right{ width:30px; height:30px;  }
	.menu_container_ele.cnt{ left:30px; width:640px; height:30px; }
	.menu_button{ font-size:13px;margin-top:6px; }
	.menu_button.bleed{ width:40px; height:30px; }
	.menu_button.sep{ width:86px; margin-top:5px; height:20px; }
	.menu_button.middle_space{ width:140px; }
}

@media only screen and (min-width: 1024px) and (max-width: 1280px) {
	.logo_container{ width:120px; bottom:25px; right:36px; }
	.logo_container.twoinone{ width:120px; height:86px; top:-86px; margin-left:-60px;  }
	
	@keyframes newIcon {
		from { top:18px; }
		to { top:10px; }
	}
	
	.menu_icon_new{ top:18px; width:40px; height:29px; animation-duration: .4s; }
	.menu_container{ height:36px; top:25px;  }
	.menu_container.active{ width:900px; margin-left:-450px; }
	.menu_container_inner{ width:900px; height:36px; margin-left:-450px; }
	.menu_container_ele.corner_left, .menu_container_ele.corner_right{ width:36px; height:36px;  }
	.menu_container_ele.cnt{ left:36px; width:828px; height:36px; }
	.menu_button{ font-size:15px;margin-top:8px; }
	.menu_button.bleed{ width:59px; height:36px; }
	.menu_button.sep{ width:108px; margin-top:6px; height:24px; }
	.menu_button.middle_space{ width:210px; }
}

#body_container, .content_container{ position:absolute; width:100%; height:100%; opacity:0; }
.content_container{ top:0; position:absolute; opacity:0; }

.content_container{ position:absolute; }
#body_container{ position:absolute; }

.door_container{ position:fixed; top:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:90; }
.door_container_left, .door_container_right, .door_background_container, .door_foreground_container, .door_logotype_container, .door_text_container{ position:absolute; }
.door_foreground_container, .door_logotype_container{ display:none; }


.door_container{
	-webkit-transition:-webkit-transform .6s; /* Safari */
    transition:transform .6s;
}
.door_container.ready{
	-webkit-transition: -webkit-transform 0s; /* Safari */
    transition:  transform 0s;
}


.door_text_container{ width:auto; margin-left:-30px; opacity:0; width:400px;
	transition:margin-left .4s cubic-bezier(0,.46,.28,1), opacity .4s linear;
	-webkit-transition:margin-left .4s cubic-bezier(0,.46,.28,1), opacity .4s linear;
    -moz-transition:margin-left .4s cubic-bezier(0,.46,.28,1), opacity .4s linear;
	-ms-transition:margin-left .4s cubic-bezier(0,.46,.28,1), opacity .4s linear;
	-o-transition:height .6s cubic-bezier(0,.46,.28,1), opacity .4s linear;
}
.door_text_container.active{ margin-left:0px; opacity:1; }
.desktop_div{ font-size:16px; line-height:160%; }
.mobile_div{ font-size:12px;  line-height:160%; }

@media only screen and (min-width: 481px) and (max-width: 767px) {
	.mobile_div{ font-size:14px;  line-height:160%; }
}
@media only screen and (min-width: 1601px) {
	.desktop_div{ font-size:18px; line-height:160%; }
}
@media only screen and (min-width: 2001px) {
	.desktop_div{ font-size:20px; line-height:160%; }
}

.section_container{ position:relative; width:100%; height:100%; }
.section_container.kv{ opacity:0; }
.section_container.kv.active{ opacity:1; }

.product_background{ position:absolute; }

.background_ele{ position:absolute; pointer-events:none; }
.background_ele.triangle_orangle{ width:220px; top:0; left:0; }
.background_ele.triangle_blue{ width:350px; bottom:0; right:0; }
.background_ele.triangle_pink{ width:890px; top:0px; }

.background_icon{ position:absolute; 
	transition:height .6s cubic-bezier(0,.46,.28,1);
	-webkit-transition:height .6s cubic-bezier(0,.46,.28,1);
    -moz-transition:height .6s cubic-bezier(0,.46,.28,1);
	-ms-transition:height .6s cubic-bezier(0,.46,.28,1);
	-o-transition:height .6s cubic-bezier(0,.46,.28,1);
}

.background_icon.twoinone{ top:0%; width:23%; height:0; overflow:hidden; text-align:right; }
.background_icon.twoinone > img{ width:100%; max-width:330px; }

.kv_all_container, .kv_all_container_inner{ position:absolute; }
.kv_all_container{ overflow:hidden; width:100%; }
.kv_all_container_inner{ left:0;
	transition:left .4s cubic-bezier(0.770, 0.000, 0.175, 1.000);
	-webkit-transition:left .4s cubic-bezier(0.770, 0.000, 0.175, 1.000);
    -moz-transition:left .4s cubic-bezier(0.770, 0.000, 0.175, 1.000);
	-ms-transition:left .4s cubic-bezier(0.770, 0.000, 0.175, 1.000);
	-o-transition:left .4s cubic-bezier(0.770, 0.000, 0.175, 1.000);
}
.kv_container{ float:left; }

.kv_indicator_container{ position:absolute; width:160px; height:16px; left:50%; margin-left:-80px; }
.kv_indicator{ background-color:#fff; opacity:0.6; width:16px; height:16px; border-radius:20px; float:left; margin:0 12px; cursor:pointer; }
.kv_indicator.active{ opacity:1; cursor:auto; }
.kv_indicator.hover{ opacity:1; cursor:pointer; }

.kv_button_prev{ position:absolute; left:0;    top:50%; margin-top:-174px; }
.kv_button_next{ position:absolute; left:100%; top:50%; margin-top:-174px; margin-left:-173px; }
.kv_button_thumbnail{ position:absolute; width:173px; height:347px; }
.kv_button_thumbnail_normal, .kv_button_thumbnail_active{ position:absolute; width:100%; }
.kv_button_thumbnail_active{ display:none; }

.kv_button_icon{ position:absolute; width:58px; height:58px; background-size:cover; top:50%; margin-top:-29px;  background-position:right; }
.kv_button_prev > .kv_button_thumbnail > .kv_button_icon{ right:48px; background-image:url(../img/button_prev.png); }
.kv_button_next > .kv_button_thumbnail > .kv_button_icon{ left:48px; background-image:url(../img/button_next.png); }


.kv_all_mobile_container{ width:100%; height:100%; position:relative; display:none; }
.kv_mobile_ele{ position:relative; width:100%; height:15%; 
	transition:height .4s cubic-bezier(0.770, 0.000, 0.175, 1.000);
	-webkit-transition:height .4s cubic-bezier(0.770, 0.000, 0.175, 1.000);
    -moz-transition:height .4s cubic-bezier(0.770, 0.000, 0.175, 1.000);
	-ms-transition:height .4s cubic-bezier(0.770, 0.000, 0.175, 1.000);
	-o-transition:height .4s cubic-bezier(0.770, 0.000, 0.175, 1.000);
}
.kv_mobile_ele.active{ height:55%; }

.kv_mobile_visual{ position:absolute; bottom:0; width:100%; overflow:hidden;
	-webkit-filter:grayscale(100%); filter:gray; /* IE6-9 */
	transition:filter .4s linear;
	-webkit-transition:-webkit-filter .4s ease-out;
}
.kv_mobile_ele.active > .kv_mobile_visual{ -webkit-filter:grayscale(0%); }

@media only screen and (min-width: 641px) and (max-width: 1023px) {
	.kv_indicator_container{ width:128px; height:12px; margin-left:-64px; }
	.kv_indicator{ width:12px; height:12px; margin:0 10px; }
}
@media only screen and (min-width: 0px) and (max-width: 640px) {
	.kv_all_mobile_container{ display:block; }
	.kv_all_desktop_container{ display:none; }
	.background_icon.twoinone{ width:26%; }
}


.game_container{ position:absolute; width:55%; max-width:800px; height:auto; color:#4e565b; left:35%; top:15%; margin-left:0; visibility:visible; opacity:1;
	transition:margin-left .3s ease-out, visibility .3s, opacity .3s linear;
	-webkit-transition:margin-left .3s ease-out, visibility .3s, opacity .3s linear;
    -moz-transition:margin-left .3s ease-out, visibility .3s, opacity .3s linear;
	-ms-transition:margin-left .3s ease-out, visibility .3s, opacity .3s linear;
	-o-transition:margin-left .3s ease-out, visibility .3s, opacity .3s linear;
}
.game_container.inactive{ margin-left:-8%; visibility:hidden; opacity: 0; }

@media only screen and (min-width: 0px) and (max-width: 1023px) { .game_container{ left:15%; } }

.game_all_container{  position:absolute; width:100%; left:0%; top:10%; }
.game_all_container.game{   top:40%; }
.game_all_container.gallery{ top:35%; left:0; width:100%; display:none; }

.gallery_icon_container{ margin:auto auto; width:90%; max-width:1000px; position:relative;   }
.gallery_icon_container > img{ width:30%; min-width:120px;  }

.gallery_eles_container{ position:relative; width:100%; height:390px; overflow:hidden; }
.gallery_eles_container_inner{ position:absolute; width:20000px; left:0; }

.gallery_ele{ 
	position:absolute; 
	width:300px; height:195px;
	
	-ms-transform-origin:50% 50%;
    -webkit-transform-origin:50% 50%;
    transform-origin:50% 50%;
	
	top:100px;
}

.gallery_ele.active{ 
	-ms-transform:scale(2,2);
    -webkit-transform:scale(2,2);
    transform:scale(2,2);
}

.gallery_ele{
	transition:all .4s ease-out;
	-webkit-transition:all .4s ease-out;
    -moz-transition:all .4s ease-out;
	-ms-transition:all .4s ease-out;
	-o-transition:all .4s ease-out;
}
@media only screen and (min-width: 0px) and (max-width: 768px) {
	.game_all_container.gallery{ top:50%; }
	.gallery_eles_container{ height:200px; }
	.gallery_ele{ width:150px; height:100px; top:50px; }
}
@media only screen and (min-width: 769px) and (max-width: 1280px) {
	.gallery_eles_container{ height:320px; }
	.gallery_ele{ width:240px; height:160px; top:80px; }
}



@media only screen and (min-width: 0px) and (max-width: 640px) {
	.gallery_icon_container{ width:90%;  }
}

.game_title_container{ position:absolute; width:40%; max-width:380px; opacity:0; left:8%; overflow:hidden; height:2px; visibility:visible; margin-top:20px;
	transition:height .4s ease-out, opacity .2s linear, left .2s ease-out, visibility .2s;
	-webkit-transition:height .4s ease-out, opacity .2s linear, left .2s ease-out, visibility .2s;
    -moz-transition:height .4s ease-out, opacity .2s linear, left .2s ease-out, visibility .2s;
	-ms-transition:height .4s ease-out, opacity .2s linear, left .2s ease-out, visibility .2s;
	-o-transition:height .4s ease-out, opacity .2s linear, left .2s ease-out, visibility .2s;
}
.game_title_container.active{ opacity:1; }

.game_txt_container{ position:absolute; top:0; left:0; opacity:0; 
	transition:opacity .4s;
	-webkit-transition:opacity .4s;
    -moz-transition:opacity .4s;
	-ms-transition:opacity .4s;
	-o-transition:opacity .4s;
}

.game_body_container{ position:relative; margin:auto; width:80%; max-width:1000px; }
@media only screen and (min-width: 1024px) and (max-width: 1279px) {
	.game_title_container{ width:36%;  margin-top:10px; }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
	.game_body_container{ width:90%; }
	.game_title_container{ left:5%;  margin-top:10px; }
}
@media only screen and (min-width: 640px) and (max-width: 767px) {
	.game_body_container{ width:90%; }
	.game_title_container{ left:5%; margin-top:10px; }
}
@media only screen and (min-width: 480px) and (max-width: 639px) {
	.game_body_container{ width:90%; }
	.game_title_container{ left:0; margin-top:10px; width:40%; }
}
@media only screen and (min-width: 0px) and (max-width: 479px) {
	.game_body_container{ width:90%; }
	.game_title_container{ left:4%; margin-top:10px; width:40%; }
}


.game_body_container.game{  position:absolute; margin-left:10%; width:100%; }

.game_all_container.aftergame > .game_body_container.game{ display:none; }
.game_all_container.game > .game_body_container.coming_soon{ display:none; }

.game_body_container.game{ visibility:visible; opacity:1; left:0;
	transition:opacity .2s linear, left .2s ease-out, visibility .2s;
	-webkit-transition:opacity .2s linear, left .2s ease-out, visibility .2s;
    -moz-transition:opacity .2s linear, left .2s ease-out, visibility .2s;
	-ms-transition:opacity .2s linear, left .2s ease-out, visibility .2s;
	-o-transition:opacity .2s linear, left .2s ease-out, visibility .2s;
}
.game_body_container.game.inactive, .game_title_container.inactive{ left:-10%;  visibility:visible; opacity:0; }

.game_body_container > .txt_cnt{ opacity:0; margin-left:-20px; margin-bottom:1%;
	transition:margin-left .4s cubic-bezier(0,.46,.28,1), opacity .4s;
	-webkit-transition:margin-left .4s cubic-bezier(0,.46,.28,1), opacity .4s;
    -moz-transition:margin-left .4s cubic-bezier(0,.46,.28,1), opacity .4s;
	-ms-transition:margin-left .4s cubic-bezier(0,.46,.28,1), opacity .4s;
	-o-transition:margin-left .4s cubic-bezier(0,.46,.28,1), opacity .4s;
}
.game_body_container > .txt_cnt.active{ opacity:1; margin-left:0; }
.game_body_container > .txt_cnt.txt_para{ margin-bottom:0.5%; }

.game_product_visual{ margin:25px 0; text-align:right; }
.game_product_visual > img{ width:100%; }

.game_canvas_line{  }
#canvas_game_home_line{ position:absolute; }
.game_button_container{ position:absolute; top:0; }

.game_2_container{ width:100%; height:200px; position:relative; margin-left:7%; }
.game_2_container_inner{ position:absolute; right:0; width:100%; height:100%; }

.game_2_container{ width:90%; left:5%; }

.game_2_container > .game_button{ display:none; }

.game_2_statement_bg{ position:absolute; left:7%; width:92%; opacity:0;
	transition:opacity .4s;
	-webkit-transition:opacity .4s;
    -moz-transition:opacity .4s;
	-ms-transition:opacity .4s;
	-o-transition:opacity .4s;
}
.game_2_statement_bg_deco_top{ position:absolute; left:0; top:-10%; width:27%; opacity:0; 
	transition:top .4s cubic-bezier(0,.46,.28,1), opacity .4s;
	-webkit-transition:top .4s cubic-bezier(0,.46,.28,1), opacity .4s;
    -moz-transition:top .4s cubic-bezier(0,.46,.28,1), opacity .4s;
	-ms-transition:top .4s cubic-bezier(0,.46,.28,1), opacity .4s;
	-o-transition:top .4s cubic-bezier(0,.46,.28,1), opacity .4s;
}
.game_2_statement_bg_deco_bottom{ position:absolute; right:-2.5%; bottom:-5%; width:28.4%; opacity:0; 
	transition:bottom .4s cubic-bezier(0,.46,.28,1), opacity .4s;
	-webkit-transition:bottom .4s cubic-bezier(0,.46,.28,1), opacity .4s;
    -moz-transition:bottom .4s cubic-bezier(0,.46,.28,1), opacity .4s;
	-ms-transition:bottom .4s cubic-bezier(0,.46,.28,1), opacity .4s;
	-o-transition:bottom .4s cubic-bezier(0,.46,.28,1), opacity .4s;
}
.game_2_statement_bg.active, .game_txt_container.active{ opacity:1; }
.game_2_statement_bg_deco_top.active{ opacity:1; top:0; }
.game_2_statement_bg_deco_bottom.active{ opacity:1; bottom:9%; }

.game_2_statement_bg_ele, .game_2_statement_word_ele{ width:100%; position:absolute; display:none; }
.game_2_statement_bg_ele.active, .game_2_statement_word_ele.active{ display:block; }

@media only screen and (min-width: 0px) and (max-width: 400px) {
.game_2_statement_bg_deco_bottom.active{ opacity:1; bottom:7%; }
}
@media only screen and (min-width: 401px) and (max-width: 480px) {
.game_2_statement_bg_deco_bottom.active{ opacity:1; bottom:7%; }
}
@media only screen and (min-width: 0px) and (max-width: 640px) {
	.game_2_container{ margin-left:2%; }
	.game_all_container{   top:45%; }
	.game_all_container.game{ top:30%; }
	.game_title_container{ width:50%; max-width:240px; }
	.game_body_container{  width:90%; }
	
	
}
@media only screen and (min-width: 641px) and (max-width: 1280px) {
	.game_2_container{ margin-left:4%; }
	.game_title_container{ width:30%; max-width:300px; }
	.game_2_container{ width:80%; left:10%; }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
	.game_2_container{ margin-left:4%; }
}
@media only screen and (min-width: 0px) and (max-width: 1023px) {
	#canvas_game_home_line{ display:none; }
	.game_product_visual{ margin:15px 0; text-align:right; }
	.game_product_visual > img{ max-width:220px; width:70%; }
	.game_title_container{ margin-left:0; }
	.game_body_container.game{ margin-left:0; width:100%; max-width:370px; min-width:300px; }
}




.game_cnt_headline{ font-size:23px;  }
.game_cnt_body{     font-size:14px;  }
.game_container.home > .ms_button{ opacity:0; margin-left:-20px; }

.game_container.home > .ms_button.active{ opacity:1; margin-top:0px; }
.game_container.home > .ms_button.active{ margin-left:0px; }

.game_container.home > .ms_button{
	transition:margin .4s ease-out, opacity .4s linear;
	-webkit-transition:margin .4s ease-out, opacity .4s linear;
    -moz-transition:margin .4s ease-out, opacity .4s linear;
	-ms-transition:margin .4s ease-out, opacity .4s linear;
	-o-transition:margin .4s ease-out, opacity .4s linear;
}
#btn_agree{
	transition:opacity .4s linear;
	-webkit-transition:opacity .4s linear;
    -moz-transition: opacity .4s linear;
	-ms-transition:opacity .4s linear;
	-o-transition:opacity .4s linear;
}

.game_step_container{ position:absolute; margin-left:-8%; visibility:hidden; opacity:0; 
	transition:margin-left .3s ease-out, visibility .3s, opacity .3s linear;
	-webkit-transition:margin-left .3s ease-out, visibility .3s, opacity .3s linear;
    -moz-transition:margin-left .3s ease-out, visibility .3s, opacity .3s linear;
	-ms-transition:margin-left .3s ease-out, visibility .3s, opacity .3s linear;
	-o-transition:margin-left .3s ease-out, visibility .3s, opacity .3s linear;
}
.game_step_container.active{ margin-left:0; visibility:visible; opacity:1; }

.game_core_container{ margin:0 auto 0 auto; width:70%; max-width:900px;  }
@media only screen and (min-width:0px) and (max-width: 767px){
	.game_core_container{ width:90%; max-width:600px; }
}

.game_step_title_container{ margin-bottom:30px; }

.game_step_body_cnt{ }

.game_deco_top{ position:absolute; width:25%; left:-5%;  opacity:0; margin-top:-3%;
	transition:margin-top .3s ease-out, opacity .3s linear;
	-webkit-transition:margin-top .3s ease-out, opacity .3s linear;
    -moz-transition:margin-top .3s ease-out, opacity .3s linear;
	-ms-transition:margin-top .3s ease-out, opacity .3s linear;
	-o-transition:margin-top .3s ease-out, opacity .3s linear;
}
.game_deco_bottom{ position:absolute; width:18%; bottom:-13%; right:-4%; opacity:0; 
	transition:bottom .3s ease-out, opacity .3s linear;
	-webkit-transition:bottom .3s ease-out, opacity .3s linear;
    -moz-transition:bottom .3s ease-out, opacity .3s linear;
	-ms-transition:bottom .3s ease-out, opacity .3s linear;
	-o-transition:bottom .3s ease-out, opacity .3s linear;
}

.game_deco_top.active{ margin-top:0%;  opacity:1; }
.game_deco_bottom.active{ bottom:-10%; opacity:1; }


.game_content_container{ 
	position:relative; display:none; 
}
.game_content_container.active{ }
.game_content_container_inner{ position:relative; 
	perspective:1500px; 
	-webkit-perspective:1500px; 
	-moz-perspective:1500px; 
	
	transform-style:preserve-3d; 
	-webkit-transform-style:preserve-3d;
	-moz-transform-style:preserve-3d;
}
.game_content_container > .ms_button{ margin-top:20px; right:0; }
.game_frame_container{ margin-left:15px; margin-top:15px; background-size:contain; background-repeat:no-repeat; background-position:center center; pointer-events:none; position:absolute; top:0; width:inherit; height:inherit;  }
.game_photo_container{ position:absolute; width:49.9%; height:100%; top:0; background-color:#282828; }
.game_photo_container.left{ 
	transition: transform 1s; 
	-webkit-transition:transform 1s; 
    -moz-transition:transform 1s; 
	-ms-transition:transform 1s; 
	-o-transition:transform 1s; 
	
	transform: rotateY(179deg); 
	-webkit-transform: rotateY(179deg);
	-moz-transform: rotateY(179deg);
	-ms-transform: rotateY(179deg);
	
	transform-origin:right center; 
	-webkit-transform-origin:right center;
	-moz-transform-origin:right center;
	-ms-transform-origin:right center;
}
.game_photo_container.left.active{ 
	transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
}
.game_photo_container.right{ left:50.2%; 
	transform: rotateY(0deg); 
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	
	transform-origin:left center;
	-webkit-transform-origin:left center;
	-ms-transform-origin:left center;
	-moz-transform-origin:left center;
}

.game_photo_container.left > .game_frame_container{  background-image:url(../img/game_frame_left.png); }
.game_photo_container.right > .game_frame_container{ background-image:url(../img/game_frame_right.png); margin-left:0; }

.upload_button_container, .scale_button_container{ width:62px; height:42px; position:absolute; left:49.9%; top:50%; margin-left:-31px; margin-top:-20px; }
.upload_button_container.wide, .scale_button_container.wide{ width:124px;  margin-left:-62px; }

.upload_button_container{  overflow:hidden; }

.scale_button_container{ top:auto; bottom:-50px; display:none; }

.upload_button{ float:left; background:url(../img/icon_upload.svg); background-repeat:no-repeat; background-size:contain; width:40px; height:40px; border-radius:40px; border:1px solid #329dd8; cursor:pointer; margin:auto; display: inline-block; margin:0 10px; }
.upload_image_container{ width:100%; height:100%; overflow:hidden; background-image:none; background-position:center center; background-size:cover; background-repeat:no-repeat; position:absolute; }

.cam_button, .scale_button{ width:40px; height:40px; float:left; cursor:pointer; border-radius:40px; border:1px solid #329dd8; margin:0 10px;  background:url(../img/icon_cam.svg); background-repeat:no-repeat; background-size:contain; }

.scale_button.plus{ background-image:url(../img/icon_plus.svg); } 
.scale_button.minus{ background-image:url(../img/icon_minus.svg); } 

#video-container-a, #video-container-b{ width:100%; height:inherit; overflow:hidden; position:absolute; left:0; top:0;  }
#camera_stream_a, #camera_stream_b{ left:0; margin:0; padding:0; position:absolute; min-width:100%; min-height:100%; }

.touch_button{ cursor:pointer; border:2px solid #ff1187; border-radius:100px; width:96px; height:18px; padding:39px 0; position:absolute; top:50%; left:50%; margin:-48px 0 0 -48px; background-color:rgba(6, 6, 6, .6); text-align:center; color:#ff1187; font-weight:bold; font-size:18px; line-height:100%; display:none; }
.touch_button.active{ border-color:#32a0da; color:#32a0da; }

.game_result_container{ position:absolute; width:600px; height:100px; top:50%; left:50%; margin-left:-300px; display:none;
	background-position:0 0; background-repeat:repeat-y; background-image:url(../img/game_result_text_full.png); 
	transition:background-position 3.4s cubic-bezier(.18,1,0,.93);
	-webkit-transition:background-position 3.4s cubic-bezier(.18,1,0,.93);
    -moz-transition:background-position 3.4s cubic-bezier(.18,1,0,.93);
	-ms-transition:background-position 3.4s cubic-bezier(.18,1,0,.93);
	-o-transition:background-position 3.4s cubic-bezier(.18,1,0,.93);
}

.game_statement_container{}




.game_finish_button_container{ height:50px; width:75%; left:20%; position:absolute; display:none; }
.game_finish_button_container_inner{ margin:auto auto; width:240px; }
.game_finish_button_ele{ float:left; margin:0 10px; width:100px; }
.game_finish_button{ width:50px; height:50px; cursor:pointer; border-radius:50px; border:1px solid #329dd8; margin:0 auto; margin-top:-15px; background-repeat:no-repeat; background-size:contain;  }
.game_finish_button_label{ text-align:center; width:inherit; margin-top:5px; }

.game_finish_button.fb{ background-image:url(../img/icon_fb.svg); }
.game_finish_button.dl{ background-image:url(../img/icon_dl.svg); }

@media only screen and (min-width: 0px) and (max-width: 1023px) {
	.upload_button_container, .scale_button_container{ width:42px; height:32px; margin-left:-21px; margin-top:-15px; }
	.upload_button_container.wide, .scale_button_container.wide{ width:84px;  margin-left:-42px; }
	.upload_button{ width:30px; height:30px; background-size:30px 30px; margin:0 5px;  }
	.cam_button, .scale_button{ width:30px; height:30px; background-size:30px 30px; margin:0 5px;  }
	.touch_button{ border-radius:100px; width:62px; height:14px; padding:24px 0; position:absolute; margin:-31px 0 0 -32px; font-size:14px;  }
	
	.scale_button_container{ bottom:-35px; }
	
	.game_finish_button_container{ height:40px;  }
	.game_finish_button_container_inner{ width:180px; }
	.game_finish_button{ width:40px; height:40px; border-radius:40px; margin:0 auto; margin-top:-10px;  }
	
}
@media only screen and (min-width: 0px) and (max-width: 580px) {
	.game_finish_button_container{ left:0; width:100%; }
	.touch_button{ width:48px; height:12px; padding:18px 0; font-size:12px;  margin:-30px 0 0 -24px;  }
	
}


.lab_all_container{ width:82%; max-width:900px; position:absolute; right:0; }
.lab_text_container{ text-align:right; margin-bottom:10px; opacity:0; margin-right:8%; 
	transition:margin-right .4s ease-out, opacity .4s linear;
	-webkit-transition:margin-right .4s ease-out, opacity .4s linear;
    -moz-transition:margin-right .4s ease-out, opacity .4s linear;
	-ms-transition:margin-right .4s ease-out, opacity .4s linear;
	-o-transition:margin-right .4s ease-out, opacity .4s linear;
}
.lab_ele_container{ position:relative; width:100%; margin-top:10px; }
.lab_visual_ele_container{ cursor:pointer; position:absolute; right:8%; height:100%; width:60%; opacity:0; 
	transition:right .4s ease-out, opacity .4s linear, margin-right .4s ease-ou;
	-webkit-transition:right .4s ease-out, opacity .4s linear, margin-right .4s ease-out;
    -moz-transition:right .4s ease-out, opacity .4s linear, margin-right .4s ease-out;
	-ms-transition:right .4s ease-out, opacity .4s linear,margin-right .4s ease-out;
	-o-transition:right .4s ease-out, opacity .4s linear, margin-right .4s ease-out;
}
.lab_text_container.active{ opacity:1; margin-right:0; }
.lab_visual_ele_container.active{ right:0px; opacity:1; }

.lab_visual_ele_active, .lab_visual_ele{ position:absolute; width:100%;  }
.lab_visual_ele_active{ display:none; }

.lab_text_inner.mobile_div{ text-align:left; /*margin-left:47%;*/ width:60%; max-width:168px; }
.lab_play_button{ position:absolute; top:92%; left:7%; width:7%; border-radius:100px; border:1px solid #fff; }
.lab_title_container{ position:absolute; left:26%; top:52%; width:54%; text-align:center; }
.lab_subtitle_container{ position:absolute; bottom:52%; height:30%; left:18%; width:72%; }
.lab_subtitle_ele.top, .lab_subtitle_ele.bottom, .lab_subtitle_cross{ position:absolute; width:100%; text-align:center; }
.lab_subtitle_ele.top{ left:0%; text-align:right; width:44%; }
.lab_subtitle_ele.bottom{ text-align:left; width:44%; left:56%; }

.lab_subtitle_sub{ font-size:60%; line-height:70%; }

@media only screen and (min-width:641px) and (max-width: 768px){
	.lab_play_button{ width:7%; }
}
@media only screen and (min-width:0px) and (max-width: 640px){
	.lab_all_container{ width:80%; max-width:560px; }
	.lab_ele_container{ width:100%; margin-top:8px; }
	.lab_visual_ele_container{ width:100%; }
	.lab_play_button{ width:6%; top:50%; left:14%;  }
	.lab_title_container{ width:40%; text-align:left; line-height:110%; left:22%; }
	
	.lab_title_container.coming_soon{ width:100%; text-align:center; left:0%; }
	
	.lab_subtitle_container{ text-align:center; height:100%; top:0%; width:33%; left:54%;  }
	.lab_subtitle_ele.top{ top:50%; bottom:auto; text-align:center; width:100%;  }
	.lab_subtitle_ele.bottom{ bottom:auto; top:50%; text-align:center; width:100%; left:0; }
	
	.lab_subtitle_sub{ font-size:60%; line-height:60%; }
	
}




.background_icon.product{ width:31%; text-align:left; left:60%; top:0%; height:0; overflow:hidden; }
.background_icon.product > img{ width:70%; max-width:400px; }

.product_all_container{ position:absolute; width:86%; left:7%; max-width:1280px; z-index:80; }
.product_container, .product_name_container{ position:relative; }
.product_container{ /*margin-bottom:34%;*/ left:45%; width:47%; /*width:50%; left:47%; max-width:760px;*/}
.product_container.last{ /*margin-bottom:17%;*/ }
.product_container.even{ left:10%; width:85%; }

.product_name_triangle_container{ position:absolute; width:22%; top:-50px; opacity:0; max-width:130px;  
	transition:top .4s cubic-bezier(0,.46,.28,1), opacity .4s;
	-webkit-transition:top .4s cubic-bezier(0,.46,.28,1), opacity .4s;
    -moz-transition:top .4s cubic-bezier(0,.46,.28,1), opacity .4s;
	-ms-transition:top .4s cubic-bezier(0,.46,.28,1), opacity .4s;
	-o-transition:top .4s cubic-bezier(0,.46,.28,1), opacity .4s;
}
.product_name_triangle_container.active{ top:0; opacity:1; }

.product_name_headline_container{   position:relative; opacity:0; left:8%; line-height:125%; width:80%; }
.product_name_subheadline_container{position:relative; opacity:0; left:5%; line-height:110%; width:80%; }
.product_name_headline_container.active{    opacity:1; left:12%; }
.product_name_subheadline_container.active{ opacity:1; left:9%; }

.product_container.even > .product_name_container > .product_name_triangle_container{ width:12%;  }
.product_container.even > .product_name_container > .product_name_headline_container{   left:3%; }
.product_container.even > .product_name_container > .product_name_subheadline_container{left:5%; }
.product_container.even > .product_name_container > .product_name_headline_container.active{    left:5%; }
.product_container.even > .product_name_container > .product_name_subheadline_container.active{ left:7%; }


.product_name_headline_container, .product_name_subheadline_container{
	transition:left .4s cubic-bezier(0,.46,.28,1), opacity .4s;
	-webkit-transition:left .4s cubic-bezier(0,.46,.28,1), opacity .4s;
    -moz-transition:left .4s cubic-bezier(0,.46,.28,1), opacity .4s;
	-ms-transition:left .4s cubic-bezier(0,.46,.28,1), opacity .4s;
	-o-transition:left .4s cubic-bezier(0,.46,.28,1), opacity .4s;
}

.product_body_logo{ position:relative; opacity:0; width:50%; }
.product_body_logo > img{ width:20%; max-width:70px; }
.product_body_logo.lenovo > img{ width:34%; max-width:112px; }
.product_body_logo.ms > img{ width:38%; max-width:119px; }
.product_body_logo.active{ opacity:1; }

.product_container.even > .product_body_logo{ left:9%;  }
.product_container.even > .product_body_logo > img{ width:9%;  }
.product_container.even > .product_body_logo.ms > img{ width:19%; }

.product_body_container{ position:relative;  margin:6% 0 1% 1%; }
.product_body_ele{ line-height:160%; margin-bottom:15px; }
.product_container.even > .product_body_container{ margin:3% 0 1% 9%; }

.product_body_visual{ position:relative; opacity:0; width:100%; display:none; }
.product_body_visual.active{ opacity:1; }
.product_body_visual > img{ width:66%; max-width:300px; }

.product_body_visual_desktop{ position:absolute; display:block; width:100%; text-align:right; top:100; opacity:0; margin-top:-8%; }
.product_body_visual_desktop.active{ opacity:1; margin-top:0; }
.product_body_visual_desktop > img{ width:63%; max-width:440px; }
.product_body_visual_desktop.lenovo > img{ width:72%; max-width:480px; }

.product_container.even > .product_body_visual_desktop > img{ width:42%; max-width:550px; }
.product_container.even > .product_body_visual_desktop.hp > img{ width:46%; max-width:580px; }

li.product_bullet{ opacity:0; line-height:100%; }
li.product_bullet.active{ opacity:1; }

.product_body_button{ opacity:0; margin:4% 0 4% 0; width:190px; text-align:center; line-height:100%; color:#000; position:relative; }
.product_body_button.active{ opacity:1;  }
.product_container.even > a > .product_body_button{ margin:2% 0 2% 0; left:9%; }

.game_button{ color:#fff; margin:4% 0 4% 0; width:190px; text-align:center; line-height:100%; position:relative; }

.game_button, .product_body_ele, .product_body_button, .product_body_logo, .product_body_visual, li.product_bullet, .product_body_visual_desktop{
	transition:margin-left .4s ease-out, margin-top .4s ease-out, opacity .4s linear, top .4s ease-out, left .4s ease-out;
	-webkit-transition:margin-left .4s ease-out, margin-top .4s ease-out, opacity .4s linear, top .4s ease-out, left .4s ease-out;
    -moz-transition:margin-left .4s ease-out, margin-top .4s ease-out, opacity .4s linear, top .4s ease-out, left .4s ease-out;
	-ms-transition:margin-left .4s ease-out, margin-top .4s ease-out, opacity .4s linear, top .4s ease-out, left .4s ease-out;
	-o-transition:margin-left .4s ease-out, margin-top .4s ease-out, opacity .4s linear, top .4s ease-out, left .4s ease-out;
}



@media only screen and (min-width: 0px) and (max-width: 767px) {
	.background_icon.product{ width:50%; text-align:center; left:25%; }
	.background_icon.product > img{ width:75%; max-width:200px; }
	.product_all_container{ width:90%; left:5%; }
	.product_container, .product_container.even{ left:0%; width:100%; /*margin-bottom:50%;*/ }
	.product_container.last{ /*margin-bottom:25%;*/ }
	
	.product_name_triangle_container{  width:16%; }
	.product_name_headline_container{    left:4%; width:53%; line-height:100%; padding-top:1%; }
	.product_name_subheadline_container{ left:0%; width:90%; line-height:150%;  }
	.product_name_headline_container.active, .product_name_subheadline_container.active{ opacity:1; left:8%; }
	.product_container.even > .product_name_container > .product_name_triangle_container{ width:16%;  }
	.product_container.even > .product_name_container > .product_name_headline_container{   left:4%; }
	.product_container.even > .product_name_container > .product_name_subheadline_container{left:0%; }
	.product_container.even > .product_name_container > .product_name_headline_container.active{    left:8%; }
	.product_container.even > .product_name_container > .product_name_subheadline_container.active{ left:8%; }
	
	
	.product_body_visual{ width:100%; margin:5% 0; text-align:center; display:block; }
	.product_body_visual > img{ width:66%; max-width:300px; }
	.product_body_visual_desktop{ display:none; }
	
	.product_body_logo{ right:0; text-align:right; top:-1%; position:absolute; width:100%; }
	.product_body_logo > img{ width:14%; max-width:60px; }
	.product_body_logo.lenovo{ margin-top:2.5%; }
	.product_body_logo.lenovo > img{ width:24%; max-width:96px; }
	.product_body_logo.ms{ margin-top:2.5%; }
	.product_body_logo.ms > img{ width:26%; max-width:102px; }
	.product_container.even > .product_body_logo{ left:0%;  }
	.product_container.even > .product_body_logo > img{ width:14%;  }
	.product_container.even > .product_body_logo.ms > img{ width:26%; }
	
	.product_body_container{ margin-left:3%; margin-top:0; }
	.product_container.even > .product_body_container{ margin:0 0 1% 3%; }
	
	.product_body_button{ width:33%; max-width:140px; } 
	.product_body_button{ left:5%; } 
	
	.product_container.even > a > .product_body_button{ left:5%; margin:4% 0 4% 0; }
	
	.game_button{ max-width:140px; } 
	/*.game_button{ left:5%; } 
	.game_button.ms_button.float_right{ left:0; }*/
}
@media only screen and (min-width: 641px) and (max-width: 1279px) {
	.product_body_button{ width:48%; max-width:160px; } 
	.game_button{ max-width:160px; } 
}
@media only screen and (min-width: 1280px) and (max-width: 1599px) {
	.product_body_button{ width:50%; max-width:176px; } 
	.game_button{ max-width:176px; } 
}



.product_section_background, .product_section_background_mobile{ position:absolute; width:100%; height:100%; overflow:hidden; }

.product_section_background_inner{ position:absolute; }

.product_section_background{ display:block; }
.product_section_background_mobile{ display:none; } 
@media only screen and (min-width: 0px) and (max-width: 767px) {
	.product_section_background{ display:none; }
	.product_section_background_mobile{ display:block; } 
}

.product_section_background > .product_section_background_inner{
	transition:transform .4s ease-out;
	-webkit-transition:transform .4s ease-out;
    -moz-transition:transform .4s ease-out;
	-ms-transition:transform .4s ease-out;
	-o-transition:transform .4s ease-out;
}
.product_section_background_mobile > .product_section_background_inner{
	transition:transform .4s ease-out;
	-webkit-transition:transform .4s ease-out;
    -moz-transition:transform .4s ease-out;
	-ms-transition:transform .4s ease-out;
	-o-transition:transform .4s ease-out;
}

.winner_ref_container{ display:none; }
.winner_title_container{ width:20%; position:absolute; max-width:300px; top:20px; left:20px; }

.overlayer_container{ display:none; position:fixed; width:100%; height:100%; background-color:rgba(10,10,10,0.85); z-index:200; }
.overlayer_container.winner_tnc{ position:fixed; display:none; left:0%; top:0%; width:100%; height:100%;  }
.overlayer_container_wrapper{ width:90%; height:90%; position:relative; margin:auto auto; max-width:1200px;  }

.overlayer_container_inner.g_tnc{ margin-top:50px; height:92%; }

.overlayer_container_inner{ width:100%; overflow:scroll; -webkit-overflow-scrolling:touch; overflow-x:hidden; margin:0; position:absolute; display:block; }
.overlayer_container_inner.share{ display:none; }

.overlayer_container_cnt{ width:100%; margin:0 auto; }

.share_ele{ float:right; width:33%; }
.share_ele.clone{ width:60%; margin-right:0px; }


.close_button{ cursor:pointer; position:absolute; right:20px; top:20px; border:1px solid #7d838a; border-radius:50px; width:40px; height:40px; background-image:url(../img/icon_close.png); background-size:contain; background-repeat:no-repeat; background-position:center center; }

.close_button.winner{ top:20px; right:20px; }


.share_finish_button_container{ height:50px; width:100%; margin-top:30px; }
.share_finish_button_container_inner{  margin:auto auto; width:280px;  }
.share_finish_button_container_inner > a > .game_finish_button{  margin-top:0; }

.winner_finish_button_container{ margin:15px auto 0 auto; width:100%; min-width:240px; max-width:1000px; display:block; }
.winner_ms_button_container{ margin:auto; margin-top:10px; display:none; }

.ref_code{ padding:5px 5px 8px 5px; border:1px solid #fff; text-align:center; max-width:110px; background-color:#fff; margin:10px auto 0 auto; }
.ref_code.active{ background:none; }

@media only screen and (min-width: 0px) and (max-width: 480px) {
	.close_button{ width:30px; height:30px; right:15px; top:16px;  }
	.close_button.winner{ top:16px; }
}
@media only screen and (min-width: 481px) and (max-width: 767px) {
	.close_button{ width:34px; height:34px; right:20px; top:24px;  }
	.close_button.winner{ top:24px; }
}

#player{ z-index:999; position:fixed; display:none; }

.desktop_div{ display:block; }
.mobile_div{ display:none; }
@media only screen and (min-width: 0px) and (max-width: 640px) {
	.desktop_div{ display:none; }
	.mobile_div{ display:block; }
}
@media only screen and (min-width: 0px) and (max-width: 768px) {
	.share_ele{ float:none; width:100%; margin:auto auto; }
	.share_ele.clone{ float:none; text-align:center; width:100%; margin:auto auto; }
	
	.winner_title_container{ width:100%; max-width:768px; left:0; text-align:center;  }
	.winner_ref_container{ display:block; }
	.winner_ref_container_desktop{ display:none; }
}
@media only screen and (min-width: 0px) and (max-width: 480px) {
	.winner_title_container > img{ max-width:110px; width:50%; }
}
@media only screen and (min-width: 481px) and (max-width: 768px) {
	.winner_title_container > img{ max-width:160px; width:50%; }
}


@media only screen and (min-width: 0px) and (max-width: 1023px) {
	.share_finish_button_container{ height:40px; margin-top:10px; width:100%;  }
	.share_finish_button_container_inner{ width:180px; margin-top:30px; }
	
	.game_finish_button_ele{ margin:0 5px; width:70px;}	
	.game_finish_button_container_inner{ margin:auto auto; width:160px;}
}
@media only screen and (min-width: 0px) and (max-width: 480px) {
	.game_finish_button_ele{ margin:0 5px; width:60px;}
	.game_finish_button_container_inner{ margin:auto auto; width:140px;}
	
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
	.lab_text_inner.desktop_div{ display:none; }
	.lab_text_inner.mobile_div{ display:block; }
	table{ font-size:50%; }
}

.overlayer_screen_orientation{ position:fixed; width:100%; height:100%; background-color:#000; z-index:500; display:none; }
.overlayer_screen_orientation_inner{ position:absolute; left:50%; top:50%; width:40px; height:40px; margin:-20px 0 0 -20px; background-image:url(../img/icon-screen-Rotation.png); background-size:contain; background-repeat:no-repeat; background-position:center center; }