@charset 'utf-8';
@media screen and (min-width: 2000px){
	#hd .hd_immersion_ctrl{text-align: left;}
	#hd .hd_immersion_ctrl img{margin-left: 0; }
	#hd #spec .spec_content li:before{border-top-width: 2px;}
}
@media screen and (max-width: 1280px){
	#hd h2{
		font-size: 2.25rem;
		padding-bottom: 30px;
	}
	#hd #mediashow .wrapper {
		bottom: 0;
	}
/* ---------- hd_attention ---------- */
	#hd .hd_attention .attention_content img{width: 60px;}
/* ---------- hd_immersion ---------- */
	#hd .hd_immersion_ctrl{padding:40px 0;}
	#hd .hd_sec_imgshow h3{
		font-size: 2rem;
		padding-bottom: 19px;
	}
	#hd .hd_immersion_ctrl h4{padding-left: 10%; }
/* ---------- hd_halo --------------- */
	#hd .hd_halo_ui{background-size: 1440px;}
	#hd .hd_halo .col50{width: 40%;}
	#hd #halo_description p{width: 160px;}
	#hd #halo_description p:first-child{right: 80%;}
	#hd #halo_description p:last-child{left: 29%;}
	#hd #halo_description p span{font-size: 12px;}
	#hd #halo_description p:first-child:after{
		border-width: 15px 0 15px 140px;
		top: 106%;
	}
	#hd #halo_description p:last-child:after{
		border-width: 15px 0 15px 120px;
		right: 20%;
		bottom: 149%;
	}
/* ---------- hd_versatile ---------- */
	#hd .hd_versatile_content{width: 90%;}
	#hd .hd_versatile img{margin-top: 1%;}
	#hd .hd_versatile h2{padding-bottom: 10px;}
}
@media screen and (max-width: 1024px){
	#hd .hd_box {
		width: 100%;
		padding: 50px 40px;
	}
	#hd #mediashow .mediashow__first{
		height: 0;
		padding-bottom: 56.25%;
	}
	#hd #mediashow .wrapper{
		position: relative;
		bottom: 0;
		padding-top: 20px;
	}
}
@media screen and (max-width: 1023px){
/* ---------- kv -------------------- */
	#hd #kv .kv_content{
		position: relative;
		top: 0;
		margin-bottom: -20%;
		-webkit-transform: none;
		   -moz-transform: none;
		    -ms-transform: none;
		     -o-transform: none;
		        transform: none;
	}
	#hd #kv .kv_content .col50{width: 100%; }
	#hd #kv .kv_content p{max-width: none; }
	#hd #kv .kv_content img{max-width: 179px !important; }
/* ---------- hd_attention ---------- */
	#hd .hd_attention{
		background: #212526;
		background: -moz-linear-gradient(left, #212526 0%, #272b2c 13%, #616566 50%, #929493 78%);
		background: -webkit-linear-gradient(left, #212526 0%, #272b2c 13%, #616566 50%, #929493 78%);
		background: linear-gradient(to right, #212526 0%, #272b2c 13%, #616566 50%, #929493 78%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#212526', endColorstr='#929493',GradientType=1 );
	}
	#hd .hd_attention .attention_content{
		position: relative;
		top: 0;
		-webkit-transform: none;
		   -moz-transform: none;
		    -ms-transform: none;
		     -o-transform: none;
		        transform: none;
		padding:30px 0;
		margin-bottom: -15%;
	}
	#hd .hd_attention .attention_content .col50{
		width: 100%;
		max-width: none;
	}
	#hd .hd_attention .attention_content ul{
		text-align: left;
		padding-top: 20px;
	}
	#hd .hd_attention .attention_content ul li{
		max-width: 100px;
		text-align: center;
	}
/* ---------- hd_immersion ---------- */
	#hd .hd_immersion_ctrl h4{
		width: 60%;
		padding-left: 5%;
		margin-left: 6%;
	}
	#hd .hd_immersion_ctrl img{margin-left: 3%;}
	#hd .hd_immersion_ctrl:before{width: 40%;}
	#hd .hd_immersion_ctrl:after{left: 38%;}
/* ---------- hd_halo --------------- */
	#hd .hd_halo figure{padding-bottom: 55%;}
	#hd #halo_description p:first-child{top: 25%;}
	#hd #halo_description p:last-child{top: 75%;}
/* ---------- hd_halo_ui ------------ */
	#hd #halo_ui figure ul li p{font-size: 12px;}
/* ---------- hd_versatile ---------- */
	#hd .hd_versatile{margin-top: 50px; }
	#hd .hd_versatile_content{top: 0; }
/* ---------- hd_aura --------------- */
	#hd .hd_aura .w1000{
		width: 100%;
		padding-top: 37%;
	}
	#hd .hd_aura figure + img{top: 28%;}
	#hd .hd_aura figure + img + img{
		width: 15%;
		top: 55%;
		right: 1%;
	}
}
@media screen and (max-width: 768px){
	#hd .hd-w768off{display: none;}
	#hd .hd-w768on{display: block;}
	#hd .hd_box {
	    width: 100%;
	    height: 90vh;
	    padding: 50px 20px 10px;
	}

	#hd .hd_width{
		width: 150%;
		max-width: none !important;
		margin-left: -50%;
	}
	#hd .hd_attention{
		background: #212526;
		background: -moz-linear-gradient(left, #434748 0%, #838584 50%, #929493 78%);
		background: -webkit-linear-gradient(left, #434748 0%, #838584 50%, #929493 78%);
		background: linear-gradient(to right, #434748 0%, #838584 50%, #929493 78%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#212526', endColorstr='#929493',GradientType=1 );
	}
/* ---------- hd_plug --------------- */
	#hd .hd_plug .w1200{padding:80px 0 30px;}
	#hd .hd_plug ul{margin-top: 0;}
	#hd .hd_plug ul li{
		display: block;
		width: 100%;
		margin:0 auto 50px;
		max-width: 450px;
	}
	#hd .hd_plug ul li:nth-child(n) i,
	#hd .hd_plug ul li:nth-child(n) p{
		max-width: none;
		text-align: center;
	}
	#hd .hd_plug ul li p{
		min-height: 0;
		margin-bottom: 0;
	}
	#hd .hd_plug ul li:nth-child(1) img,
	#hd .hd_plug ul li:nth-child(3) img{padding-top: 20px;}
/* ---------- hd_immersion ---------- */
	#hd .hd_immersion_ctrl{padding:25px 0;}
	#hd .hd_sec_imgshow h3{
		font-size: 1.5rem;
		padding:0 20px 13px;
	}
	#hd .hd_sec_imgshow .col50:last-child h3{top: 55%; }
	#hd .hd_sec_imgshow .col50:last-child p{top: 80%;}
	#hd .hd_immersion_ctrl h4{font-size: 1rem;}
/* ---------- hd_halo --------------- */
	#hd .hd_halo .halo_content{
		position: relative;
		top: 0;
		-webkit-transform: none;
		   -moz-transform: none;
		    -ms-transform: none;
		     -o-transform: none;
		        transform: none;
	}
	#hd .hd_halo .col50{
		width: 100%;
		max-width: none;
	}
	#hd .hd_halo .hd-btn{margin-top: 0;}
	#hd .hd_halo figure{
		width: 80%;
		padding-bottom: 70%;
		margin-top: -5%;
	}
	#hd #halo_description p:last-child{top: 89%;}
	#hd #halo_description p span{padding:10px;}
	#hd #halo_description p:first-child:before{top: 42%;}
	#hd #halo_description p:last-child:before{bottom: 42%;}
/* ---------- hd_halo_ui ------------ */
	#hd .hd_halo_ui{padding: 150px 0 50px;}
	#hd #halo_ui figure ul li p{font-size: 1rem;}
	#hd #halo_ui figure img{
		width: 90%;
		margin:0 auto;
	}
	#hd #halo_ui figure ul{
		position: relative;
		margin-top: 30px;
	}
	#hd #halo_ui figure ul li,
	#hd #halo_ui02_description{
		width: 100%;
		max-width: 600px;
		position: relative;
		left: 0;right: 0;top: 0;
		margin:0 auto;
		padding: 5px 0 5px 40px;
	}
	#hd #halo_ui figure ul li:after,
	#hd #halo_ui02_description:after{display: none;}
	#hd #halo_ui figure ul li:nth-child(n):before,
	#hd #halo_ui02_description:before{
		font-family: 'xolonium', sans-serif;
		width: 24px;
		height: 24px;
		border-radius: 13px;
		line-height: 24px;
		border:none;
		position: absolute;
		top: 2px;
		left: 0;
		background-color: #cc0000;
		color:#fafafa;
		text-align: center;
		-webkit-transform: none;
		   -moz-transform: none;
		    -ms-transform: none;
		     -o-transform: none;
		        transform: none;
	}
	#hd #halo_ui02_description:before,
	#hd #halo_ui figure ul li:nth-child(1):before {content:'1';}
	#hd #halo_ui figure ul li:nth-child(2):before {content:'2';}
	#hd #halo_ui figure ul li:nth-child(3):before {content:'3';}
	#hd #halo_ui figure ul li:nth-child(4):before {content:'4';}
	#hd #halo_ui figure ul li:nth-child(5):before {content:'5';}
	#hd #halo_ui figure ul li:nth-child(6):before {content:'6';}
/* ---------- hd_versatile ---------- */
	#hd .hd_versatile{
		margin-top: 0;
		padding-top: 0;
	}
	#hd .hd_versatile_content{
		width: 90%;
		position: relative;
		padding-top: 50px;
	}
	#hd .hd_versatile img{margin-top: -7%;}
/* ---------- hd_aura --------------- */
	#hd .hd_aura{padding: 30px 0 50px; }
	#hd .hd_aura figure{top: 30px;}
	#hd .hd_aura .w1000{padding-top: 42%; }
	#hd .hd_aura figure + img{top: 25%;}
	#hd .hd_aura figure + img + img{top: 44%; }
}
@media screen and (max-width: 620px){
	#hd h2{
		font-size: 2rem;
		padding-bottom: 20px;
	}
/* ---------- hd_spec --------------- */
	#hd .w480on{display: block;}
	#hd .hd_spec .w1200{padding:30px 0 50px;}
	#hd #spec{
		width: 100%;
		padding-right: 0;
		margin:0;
	}
	#hd #spec img{
		width: 90%;
		margin:0 auto 30px;
	}
	#hd #spec .spec_content{
		position: relative;
	}
	#hd #spec .spec_content li {
		position: relative;
		width: 100%;
		left: 0;
		padding-left: 40px;
	}
	#hd #spec p{padding-bottom: 10px;}
	#hd #spec .spec_content li:nth-child(n):before,
	#hd #spec .rwd_num li{
		font-family: 'xolonium', sans-serif;
		width: 24px;
		height: 24px;
		border-radius: 13px;
		line-height: 24px;
		border:none;
		position: absolute;
		top: -2px;
		left: 0;
		background-color: #cc0000;
		color:#fafafa;
		text-align: center;
	}
	#hd #spec .spec_content li:nth-child(1):before {content:'1';}
	#hd #spec .spec_content li:nth-child(2):before {content:'2';}
	#hd #spec .spec_content li:nth-child(3):before {content:'3';}
	#hd #spec .spec_content li:nth-child(4):before {content:'4';}
	#hd #spec .rwd_num{
		width: 100%;
		height: 0;
		padding-bottom: 140%;
		position: absolute;
		top: 0;left: 0;
	}
	#hd #spec .rwd_num li:nth-child(1){top: 9%;left: 52%;}
	#hd #spec .rwd_num li:nth-child(2){top: 23%;left: 82%;}
	#hd #spec .rwd_num li:nth-child(3){top: 47%;left: 62%;}
	#hd #spec .rwd_num li:nth-child(4){top: 53%;left: 84%;}
/* ---------- hd_attention ---------- */
	#hd .hd_attention .attention_content ul{padding-top:0; }
	#hd .hd_attention .attention_content ul li{
		width: 25%;
		max-width: 80px;
	}
	#hd .hd_attention .attention_content img{width: 45px; }
	#hd b{font-size: .875rem;}
/* ---------- hd_halo --------------- */
	#hd .hd_halo figure{
		width: 65%;
		padding-bottom: 75%;
	}
	#hd #halo_description p:last-child{top: 80%;}
	#hd .hd_halo_ui{padding-top: 120px;}
	#hd .hd_halo_ui h2+p{margin-bottom: 0;}
/* ---------- hd_aura --------------- */
	#hd .hd_aura figure + img{
		display: block;
		width: 60%;
		margin: 35% auto 0;
		position: relative;
		left: 0;right: 0;top: 0;
	}
	#hd .hd_aura figure + img + img{
		display: block;
		width: 40%;
		max-width: 179px !important;
		margin:-30px 5% 20px auto;
		position: relative;
		left: 0;right: 0;top: 0;
	}
	#hd .hd_aura .w1000{padding-top: 0;}
}
@media screen and (max-width: 480px){
	#hd h2 {
		font-size: 1.875rem;
		padding-bottom: 20px;
	}
	#hd h2 nobr {
		white-space: initial;
	}
/* ---------- hd_immersion ---------- */
	#hd .hd_sec_imgshow{width: 100%;margin-left: 0;}
	#hd .hd_immersion_title{padding-bottom: 0;}
	#hd .hd_sec_imgshow .col50{
		display: block;
		width: 100%;
		margin-left: 0;
		height: auto;
		padding-bottom: 10px;
		position: relative;
		-webkit-transform: skewY(-10deg);
		   -moz-transform: skewY(-10deg);
		    -ms-transform: skewY(-10deg);
		     -o-transform: skewY(-10deg);
		        transform: skewY(-10deg);
	}
	#hd .hd_sec_imgshow .col50:nth-child(n) img{
		width: 100%;
		height: auto;
		position: relative;
		left: 0;
		-webkit-transform: skewY(10deg);
		   -moz-transform: skewY(10deg);
		    -ms-transform: skewY(10deg);
		     -o-transform: skewY(10deg);
		        transform: skewY(10deg);
	}
	#hd .hd_sec_imgshow .col50:nth-child(1) img{margin-top: 10%;}
	#hd .hd_sec_imgshow .col50:nth-child(n) h3{
		top: 40%;
		-webkit-transform: skewY(10deg) !important;
		   -moz-transform: skewY(10deg) !important;
		    -ms-transform: skewY(10deg) !important;
		     -o-transform: skewY(10deg) !important;
		        transform: skewY(10deg) !important;
	}
	#hd .hd_sec_imgshow .col50:first-child h3{right: 5%; }
	#hd .hd_sec_imgshow .col50:last-child h3{left: 5%; }
	#hd .hd_sec_imgshow .col50:first-child:after{
		width: 100%;
		height: 3px;
		top: auto;
		bottom: 0;
		background: #666464;
		background: -moz-linear-gradient(left, #111111 0%, #666464 17%, #666464 34%, #ffffff 100%);
		background: -webkit-linear-gradient(left, #111111 0%,#666464 17%,#666464 34%,#ffffff 100%);
		background: linear-gradient(to right, #111111 0%,#666464 17%,#666464 34%,#ffffff 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#111111', endColorstr='#ffffff',GradientType=0 );
	}
	#hd .hd_sec_imgshow .col50:last-child p{
		font-size: 12px;
		top: 80%;
		-webkit-transform: skewY(10deg);
		   -moz-transform: skewY(10deg);
		    -ms-transform: skewY(10deg);
		     -o-transform: skewY(10deg);
		        transform: skewY(10deg);
	}
	#hd .hd_immersion_ctrl img{
		display: block;
		max-width: none !important;
		margin:0 auto;
	}
	#hd .hd_immersion_ctrl h4{
		display: block;
		width: 100%;
		margin:10px 0;
		padding-left: 0;
		text-align: center;
	}
	#hd .hd_immersion_ctrl:before,
	#hd .hd_immersion_ctrl:after{display: none;}
}