@charset 'utf-8';
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,700&subset=latin,cyrillic-ext,greek-ext,greek,latin-ext,cyrillic);
@font-face {
	font-family: 'ROGFontsv';
	src: url('../fonts/ROGFontsv1.5-Regular.otf'),
		 url('../fonts/ROGFontsv1.5-Regular.otf') format('embedded-opentype'),
		 url("../fonts/ROG Fonts v1.6.1.ttf") format("opentype");
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Xolonium';
	src: url('../fonts/xolonium-Regular.otf'),
		 url('../fonts/xolonium-Regular.otf') format('embedded-opentype'),
		 url("../fonts/xolonium-Regular.ttf") format("opentype"),
		 url("../fonts/xolonium-regular.eot");
	font-weight: normal;
	font-style: normal;
}
@font-face {
    font-family: 'MyriadPro Bold';
    src: url('../fonts/Myriad-Bold.ttf');
    font-weight: normal;
    font-style: normal
}
/* ---------- RESET ---------- */
	html,
	body{
		margin: 0;
	}
	#hd * {
		margin: 0;
		padding: 0;
		text-decoration: none;
		list-style-type: none;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		word-wrap: break-word;
		word-break: break-word;
	}
	::selection {
		background: #1d2124;
		color: #f9bb44;
	}
	::-moz-selection {
		background: #1d2124;
		color: #f9bb44;
	}
	#hd{
		font-family: "Roboto Condensed", "Arial", sans-serif;
		background: black;
		color: #FFF;
		font-size: 16px;
		margin: 0;
		padding: 0;
		background-attachment: fixed;
		background-color: #000;
	}
	#hd ul,
	#hd li,
	#hd figure{margin: 0; padding: 0; }
	#hd h1,
	#hd h2,
	#hd h3,
	#hd h4,
	#hd p,
	#hd a,
	#hd li {
		font:inherit;
	}
	#hd img{
		display: block;
		height: auto;
		border:none;
		max-width: 100% !important;
		margin:0 auto;
	}
/* ---------- TXT ------------ */
	#hd h1,
	#hd h2,
	#hd h3,
	#hd h4,
	#hd h5,
	#hd h6,
	#hd a,
	#hd p,
	#hd b,
	#hd small{
		font:inherit;
		color:inherit;
	}
	#hd h2,
	#hd h3,
	#hd h4,
	#hd h5,
	#hd h6{
		font-family: 'Xolonium', sans-serif;
		font-weight: 400;
	}
	#hd h1{
		font-family: 'ROGFontsv', sans-serif;
		font-size: 4em;
		padding-bottom: 25px;
		text-shadow: 3px 3px 5px rgba(0, 0, 0, .4);
		line-height: .8em;
	}
	#hd h2{
		font-size: 3em;
		letter-spacing: .05em;
		display: inline-block;
	}
	#hd h3{
		/*font-size: 3em;*/
		display: inline-block;
		padding-bottom: 50px;
		font-size: 45px;
		line-height: 1.2;
	}
	#hd h6{
		font-size: 1.2em;
	}
	#hd a,
	#hd p,
	#hd b,
	#hd small{
		font-family: 'Roboto', sans-serif;
		font-weight: 400;
	}
	#hd p {
		/*font-size: .9em;*/
		letter-spacing: 1px;
		/*font-weight: 300;
		line-height: 1.5em;*/
		/*margin: 0;*/
		/*margin-bottom: 30px;*/
		font-family: 'Myriad Pro',sans-serif;
		font-size: 18px;
		line-height: 1.4;
	    font-weight: normal;
	    position: relative;
	    margin-bottom: 1em;
	}
	#hd small {
		font-size: .9em; 
	}
	#hd .txt-gradient{
		color: #f9bb44 !important;
	    background: #f9bb44;
	    font-family: "MyriadPro Bold", "Roboto", serif;
	    /*background: -webkit-linear-gradient(left, #bd0300 0%, #ff0400 30%,  #ff0400 70%, #bd0300 100%);
	    background: -o-linear-gradient(left, #bd0300 0%, #ff0400 30%,  #ff0400 70%, #bd0300 100%);
	    background: -moz-linear-gradient(left, #bd0300 0%, #ff0400 30%,  #ff0400 70%, #bd0300 100%);
	    background: linear-gradient(to right, #bd0300 0%, #ff0400 30%,  #ff0400 70%, #bd0300 100%);*/
	    -webkit-background-clip: text; 
	    -webkit-text-fill-color: transparent;
	    text-shadow: 1px 1px 3px rgba(0, 0, 0, .1);
	    font-weight: bolder;
	}
	/*ie11 above fixed*/
	_:-ms-fullscreen,
	:root #hd .txt-gradient{
	    background: transparent !important;
	}
	#hd .txt-center {
		text-align: center; 
	}
	#hd .txt-left {
		text-align: left; 
	}
/* ---------- BLOCK ---------- */
	#hd .w90 {
		width: 90%;
		margin: 0 auto;
		position: relative;
	}
	#hd .w1920 {
		max-width: 1920px;
		margin: 0 auto;
		overflow: hidden;
	}
	#hd .w1200{
		width: 90%;
		margin: 0 auto;
		position: relative;
	}
	#hd .w1200 {max-width: 1200px; }
	#hd .col25,
	#hd .col33,
	#hd .col40,
	#hd .col45,
	#hd .col50,
	#hd .col55,
	#hd .col60,
	#hd .col70,
	#hd .col80  {
		display: inline-block;
		margin-left: -5px;
		vertical-align: middle;
	}
	#hd .col25 {width: 25%; }
	#hd .col33 {width: 33.33%; }
	#hd .col40 {width: 40%; }
	#hd .col45 {width: 45%; }
	#hd .col50 {width: 50%; }
	#hd .col55 {width: 55%; }
	#hd .col60 {width: 60%; }
	#hd .col70 {width: 70%; }
	#hd .col80 {width: 80%; }

	#hd .ib-top{vertical-align: top;}
	#hd .ib-bottom{vertical-align: bottom;}

	#hd .fleft {float: left; }
	#hd .fright {float: right; }
	#hd .cf:after{
		content:'';
		display: block;
		clear:both;
	}

	#hd .hd_mobile-on,
	#hd .hd_480on,
	#hd .hd_620on,
	#hd .hd_1024-on {display: none;}
	#hd .hd_btn{
		display: inline-block;
		min-width: 240px;
		border:1px solid rgba(0,0,0,.2);
		padding:20px 20px 18px;
		margin:15px 0;
		border-radius: 2px;
		font-weight: 400;
		letter-spacing: 1px;
		text-align: center;
		cursor: pointer;
		position: relative;
	}
	#hd .hd_btn:before,
	#hd .hd_btn:after{
		content: '';
		display: block;
		width: 10px;
		height: 10px;
		border: 0px solid #555;
		position: absolute;
		transition: .4s;
	}
	#hd .hd_btn:before {
		top: -1px;
		right: -1px;
		border-top-width: 1px;
		border-right-width: 1px;
	}
	#hd .hd_btn:after {
		bottom: -1px;
		left: -1px;
		border-bottom-width: 1px;
		border-left-width: 1px;
	}
	#hd .hd_btn:hover{color: #00cccc;}
	#hd .hd_btn:hover:before,
	#hd .hd_btn:hover:after{
		width: 100%;
		height: 100%;
		border-color: #00cccc;
	}
/*----------- COLOR -----------*/
	#hd .color-primary{
		color: #f51301;
	}
	#hd .color-grey {
		color: #3e3a39;
	}
	#hd .color-white {
		color: #fff;
	}
	#hd .gradient45d{
		background-color: #f9bb44;
		/*background: linear-gradient(135deg, #a90400 20%, #d21a1a 50%, #a90400 80%); 
		background: -moz-linear-gradient(135deg, #a90400 20%, #d21a1a 50%, #a90400 80%); 
		background: -webkit-linear-gradient(135deg, #a90400 20%, #d21a1a 50%, #a90400 80%); 
		background: -o-linear-gradient(135deg, #a90400 20%, #d21a1a 50%, #a90400 80%); */
	}
/* ---------- fp-nav --------- */
	#fp-nav ul li {
		text-align: center;
	}
	#fp-nav ul li a span,
	#fp-nav ul li:hover a span {
		width: 6px;
		height: 6px;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}
	#fp-nav ul li.active a span,
	#fp-nav ul li.active:hover a span,
	#fp-nav ul li.active:hover a span {
		top: 0;
		left: 0;
		right: 0;
		height: 13px;
		width: 13px;
		margin: auto;
		background-color: #f9bb44;
	}
	#fp-nav ul li:hover a span {
		background-color: #f9bb44;
	}
	#fp-nav ul li .fp-tooltip {
		color: #f9bb44;
	}
	/*#fp-nav ul li.active .fp-tooltip {
		top: 5px;
	}*/	
/* ---------- scrollUp ------- */
	#hd #scrollUp {
		float: left;
		position: fixed;
		right: 25px;
		bottom: 40px;
		z-index: 17;
		width: 45px;
		height: 45px;
		border-radius: 26px;
		cursor: pointer;
		z-index: 999;
		opacity: 0;
		border: 2px solid #f9bb44;
		-webkit-transition: all .25s ease;
		   -moz-transition: all .25s ease;
		    -ms-transition: all .25s ease;
		     -o-transition: all .25s ease;
		        transition: all .25s ease;
	}
	#hd #scrollUp.hd-show {
		opacity: 1;
	}
	#scrollUp svg {
	    display: block;
	    position: absolute;
	    margin: auto;
	    top: 0;
	    right: 0;
	    bottom: 5px;
	    left: 0;
	    fill: #f9bb44;
	    -webkit-transform: rotateZ(270deg);
	    -moz-transform: rotateZ(270deg);
	    -ms-transform: rotateZ(270deg);
	    -o-transform: rotateZ(270deg);
	    transform: rotateZ(270deg);
	}
	#scrollUp:hover svg {
	    fill: white;
	}
	#hd #scrollUp:hover,
	#hd #scrollUp:active {
		background-color: #f9bb44;
	}
/* ---------- main------------ */
	#hd .sec_padding{
		position: relative;
		padding: 120px 0;
		border-bottom: 1px solid #fff;
		min-height: 600px;
	}
	#hd li.detail_item{
		position: relative;
		font-size: .9em;
		letter-spacing: .1em;
		padding:0 7px 5px;
		border-bottom: 1px solid #f9bb44;
		color: #eee;
	}
	#hd li.detail_item.left{
		text-align: left;
	}
	#hd li.detail_item.right{
		text-align: right;
	}
	#hd li.detail_item.left:before,
	#hd li.detail_item.right:after{
		content: "";
		position: absolute;
		bottom: -1px;
		height: 23px;
		width: 12px;
		background-color: #f9bb44;
		/*background: linear-gradient(90deg, #d21a1a 20%, #a90400 50%); 
		background: -moz-linear-gradient(90deg, #d21a1a 20%, #a90400 50%); 
		background: -webkit-linear-gradient(90deg, #d21a1a 20%, #a90400 50%); 
		background: -o-linear-gradient(90deg, #d21a1a 20%, #a90400 50%); */
	}
	#hd li.detail_item.left:before{
		transform-origin:bottom;
		transform:skewX(25deg);
		left: -11px;
	}
	#hd li.detail_item.right:after{
		transform-origin:bottom;
		transform:skewX(-25deg);
		right: -11px;
	}
	#hd li.detail_item span{
		position: absolute;
		width: 1px;
		height: 40px;
		bottom: -40px;
		background-color: #f9bb44;
	}
	#hd li.detail_item.left span{
		transform:skewX(25deg);
		right: -11px;
	}
	#hd li.detail_item.right span{
		transform:skewX(-25deg);
		left: -11px;
	}
	#hd li.detail_item span:after{
		content: "";
		position: absolute;
		width: 6px;
		height: 6px;
		border-radius: 100%;
		background-color: #f9bb44;
		bottom: 0;
	}
	#hd li.detail_item.left span:after{
		transform:skewX(-25deg);
		right: -3px;
	}
	#hd li.detail_item.right span:after{
		transform:skewX(25deg);
		left: -3px;
	}
/* ---------- kv --------------*/
 	#hd #kv{
 		position: relative;
 	}
 	#hd .kv_banner{
 		width: 100%;
 	}
 	#hd .kv_title{
 		position: absolute;
 		bottom: 50%;
 		right: 9.25%;
 		-moz-transform: translate(0,50%);
		-webkit-transform: translate(0,50%);
		-o-transform: translate(0,50%);
		-ms-transform: translate(0,50%);
		transform: translate(0,50%);
 		text-align: left;
 	}
/* ---------- style -----------*/
	#hd #style{
		background-image: url(../img/style_bg.jpg);
		background-size: cover;
		background-position: center top;
		padding: 70px 0;
	}
	#hd #style .w1200{
		direction: rtl;
	}
	#hd #style .w1200 .col50{
		direction: ltr;
		vertical-align: top;
	}
	#hd .style_text{
		padding: 70px 0 0 50px;
	}
	#hd .style_fidlock{
		margin-left: 0;
		width: 70%;
		max-width: 360px;
		opacity: 0;
		-moz-transform: translateX(-50px) scale(0.8);
		-webkit-transform: translateX(-50px) scale(0.8);
		-o-transform: translateX(-50px) scale(0.8);
		-ms-transform: translateX(-50px) scale(0.8);
		transform: translateX(-50px) scale(0.8);
	}
	#hd .style_fidlock.active{
		opacity: 1;
		-moz-transform: translateX(0) scale(1);
		-webkit-transform: translateX(0) scale(1);
		-o-transform: translateX(0) scale(1);
		-ms-transform: translateX(0) scale(1);
		transform: translateX(0) scale(1);
		-webkit-transition: all .4s ease;
		-webkit-transition: all .8s ease;
		   -moz-transition: all .8s ease;
		    -ms-transition: all .8s ease;
		     -o-transition: all .8s ease;
		        transition: all .8s ease;
		transition-delay: 1.5s;
	}
	.mobile_fidlock{
		display: none;
	}
	#hd .style_pd{
		position: relative;
	}
	#hd .style_pd_photo{
		width: 90%;
		left: 0;
		right: 0;
		margin: 0 auto;
	}
	#hd .style_pd_photo.open{
		position: absolute;
		top: 0;
	}
	#hd .style_pd .circle{
		position: absolute;
		width: 22%;
		height: 22%;
		bottom: .6%;
		right: 17.6%;
	}
	#hd .style_pd .circle img{
		position: absolute;
		width: 100%;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		opacity: 0;
	}
	#hd .style_pd .circle.active img{
		animation-duration: 3s;
		animation-timing-function:ease-out;
		animation-iteration-count: infinite;
	}
	#hd .style_pd .circle.active img:nth-child(1){
		animation-name: circle01;
	}
	@keyframes circle01{
		0% {
			opacity: 0;
			-moz-transform:scale(0.3);
			-webkit-transform:scale(0.3);
			-o-transform:scale(0.3);
			-ms-transform:scale(0.3);
			transform:scale(0.3);
		    } 
		20%{
			opacity: 1;
			-moz-transform:scale(1);
			-webkit-transform:scale(1);
			-o-transform:scale(1);
			-ms-transform:scale(1);
			transform:scale(1);
		}
		70%{
			opacity: 1;
		}
		100%{
			opacity: 0;
		}
	}
	#hd .style_pd .circle.active img:nth-child(2){
		animation-name: circle02;
	}
	@keyframes circle02{
		18% {
			opacity: 0;
			-moz-transform:scale(0.6);
			-webkit-transform:scale(0.6);
			-o-transform:scale(0.6);
			-ms-transform:scale(0.6);
			transform:scale(0.6);
		    } 
		40%{
			opacity: 1;
			-moz-transform:scale(1);
			-webkit-transform:scale(1);
			-o-transform:scale(1);
			-ms-transform:scale(1);
			transform:scale(1);
		}
		70%{
			opacity: 1;
		}
		100%{
			opacity: 0;
		}
	}
	#hd .style_pd .circle.active img:nth-child(3){
		animation-name: circle03;
	}
	@keyframes circle03{
		38% {
			opacity: 0;
			-moz-transform:scale(0.7);
			-webkit-transform:scale(0.7);
			-o-transform:scale(0.7);
			-ms-transform:scale(0.7);
			transform:scale(0.7);
		    } 
		60%{
			opacity: 1;
			-moz-transform:scale(1);
			-webkit-transform:scale(1);
			-o-transform:scale(1);
			-ms-transform:scale(1);
			transform:scale(1);
		}
		70%{
			opacity: 1;
		}
		100%{
			opacity: 0;
		}
	}
/* ---------- storage ---------*/
	#hd #storage{
		position: relative;
		background-image: url(../img/storage_bg.jpg);
		background-size: cover;
		background-position: center;
	}
	#hd #storage .w1200{
		position: relative;
	}
	#hd #storage .storage_bg{
		position: absolute;
		width: 25%;
		bottom: 0;
		left: 0;
		opacity: .8;
	}
	#hd .storage_pd{
		position: absolute;
		width: 49%;
		max-width: 940px !important;
		top: 0;
		right: 0;
	}
	#hd .storage_text{
		max-width: 45%;
		padding: 185px 0 185px;
	}
/* ---------- feature ---------*/
	#hd #feature{
		position: relative;
		background-image: url(../img/feature_bg.jpg);
	    /*background-attachment: fixed;*/
	    background-size: cover;
	    background-position: center;
	}
	#hd #feature_mobile{
		display: none;
	}
	#hd #feature .w1200{
		text-align: left;
	}
	#hd #feature .w1200 .col50{
		/*vertical-align: top;*/
		vertical-align: middle;
	}
	#hd .feature_text{
		padding-left: 30px;
		/*height: 100vh;*/
	}
	#hd .feature_text:before{
		content: "";
		display: inline-block;
		width: 0;
		height: 100%;
		background-color: #fff;
		vertical-align: middle;
	}
	#hd .feature_text .txt-inlineBox{
		/*display: inline-block;
		width: calc(100% - 5px);
		vertical-align: middle;
		padding-top: 4vh;*/
	}
	#hd .feature_text p{
		margin-bottom: 0;
	}
	#hd .feature_pd01{
		position: relative;
		display: block;
		margin: 0 auto;
		margin-bottom: 100px;
	}
	#hd .feature_pd{
		padding-top: 50px;
		padding-bottom: 50px;
		/*padding-top: 150px;
		padding-bottom: 150px;*/
	}
	#hd .feature_pd01 .pd_main{
		width: 88%;
	}
	#hd .arrow_blue,
	#hd .arrow_red,
	#hd .spot{
		position: absolute;
		left: 0;
		right: 0;
		margin: 0 auto;
	}
	#hd .spot{
		top: 44%;
	}
	#hd .arrow_blue{
		width: 35%;
		top: 15%;
		animation-name: arrow_blue;
		animation-duration: 2.5s;
		animation-timing-function:linear;
		animation-iteration-count: infinite;
	}
	@keyframes arrow_blue{
		0% {
			opacity: 0;
		    } 
		20%{
			opacity: 0;
			-moz-transform:translateY(30px) scale(0.8);
			-webkit-transform:translateY(30px) scale(0.8);
			-o-transform:translateY(30px) scale(0.8);
			-ms-transform:translateY(30px) scale(0.8);
			transform:translateY(30px) scale(0.8);
		}
		50%{
			opacity: 1;
			-moz-transform:translateY(0px) scale(1);
			-webkit-transform:translateY(0px) scale(1);
			-o-transform:translateY(0px) scale(1);
			-ms-transform:translateY(0px) scale(1);
			transform:translateY(0px) scale(1);
		}
		60%{
			opacity: 1;
		}
		85%{
			opacity: 0;
		}
		100%{
			opacity: 0;
		}
	}
	#hd .arrow_red{
		width: 40%;
		top: 55%;
		animation-name: arrow_red;
		animation-duration: 2.5s;
		animation-timing-function:linear;
		animation-iteration-count: infinite;
	}
	@keyframes arrow_red{
		0% {
			opacity: 0;
			-moz-transform:translateY(30px);
			-webkit-transform:translateY(30px);
			-o-transform:translateY(30px);
			-ms-transform:translateY(30px);
			transform:translateY(30px);
		    } 
		20%{
			opacity: 1;
			-moz-transform:translateY(0px);
			-webkit-transform:translateY(0px);
			-o-transform:translateY(0px);
			-ms-transform:translateY(0px);
			transform:translateY(0px);
		}
		50%{
			opacity: 1;
		}
		60%{
			opacity: 1;
		}
		85%{
			opacity: 0;
		}
		100%{
			opacity: 0;
		}
	}
	#hd .spot{
		width: 60%;
		bottom: 23%;
	}
	#hd .feature_pd02{
		position: relative;
		margin: 0 auto;
	}
	#hd .feature_pd02 .pd_main{
		width: 76%;
		margin-right: 10%;
	}
	#hd .feature_pd02 li.detail_item{
		position: absolute;
		left: -5%;
		padding: 0 2px 5px;
	}
	#hd .feature_pd02 li.detail_item:nth-child(1){
		bottom: 84%;
		width: 50%;
	}
	#hd .feature_pd02 li.detail_item:nth-child(2){
		bottom: 66.5%;
    	width: 38%;
	}
	#hd .feature_pd02 li.detail_item:nth-child(3){
		bottom: 48%;
    	width: 73%;
	}
	#hd .feature_pd02 li.detail_item:nth-child(4){
		bottom: 20%;
    	width: 34%;
	}
/* ---------- convenience -----*/	
	#hd #convenience{
		background-image: url(../img/convenience_bg.jpg);
		padding: 100px 0 0;
		background-size: cover;
		background-position: center;
	}
	#hd #convenience p{
		max-width: 900px;
		display: inline-block;
		padding-bottom: 20px;
	}
	#hd .convenience_pd{
		position: relative;
		max-width: 1000px;
		margin: 0 auto;
	}
	#hd .convenience_pd .main_photo{
		width: 70%;
	}
	#hd .convenience_pd .close_photo{
		position: absolute;
		top: 0;
		left: -2%;
		width: 28%;
	}
	#hd .convenience_pd .detail_item{
		position: absolute;
	}
	#hd .convenience_pd .detail_item:nth-child(1){
		bottom: 56%;
		left: 0;
		width: 26%;
	}
	#hd .convenience_pd .detail_item:nth-child(2){
		bottom: 38.5%;
		right: 0;
		width: 37%;
	}
/* ---------- gallery ---------*/
	#hd #gallery{
		background-color: #1e1e1e;
	}
	#hd .gallery_main{
		background-image: url(../img/gallery_1_pd.png);
		background-color: #1e1e1e;
		background-size: auto 75%;
		background-position: center 35%;
		background-repeat: no-repeat;
		position: relative;
		width: 45%;
		padding-top: 47.3%;
		height: 0;
	}
	#hd .gallery_main img{
		position: absolute;
		left: 0;
		right: 0;
		margin: 0 auto;
		height: 80%;
		bottom: 10%;
	}

	#hd .range_slider{
		width: 260px;
		position: absolute;
		background: #111;
		height: 16px;
		border-radius: 10px;
		bottom: 5%;
		left: 0;
		right: 0;
		margin: 0 auto;
	}
	#hd .range_slider .range_control{
		position: absolute;
		height: 18px;
		width: 33%;
		background-color: #555;
		top: -1px;
		left: 0;
		border: 1px solid #777;
		border-radius: 15px;
		box-shadow: 2px 0 7px rgba(0,0,0,.8);
		-webkit-transition: all .25s ease;
		   -moz-transition: all .25s ease;
		    -ms-transition: all .25s ease;
		     -o-transition: all .25s ease;
		        transition: all .25s ease;
	}
	#hd .range_slider input#range{
		position: absolute;
		display: block;
		width: 100%;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		height: 40px;
		margin: auto;
		z-index: 2;
		opacity: 0;
		cursor: pointer;
	}
	
	#hd .gallery_slider{
		width: 260px;
	    position: absolute;
	    height: 16px;
	    border-radius: 10px;
	    bottom: 5%;
	    left: 0;
	    right: 0;
	    margin: 0 auto;
	    text-align: center;
	}
	#hd .gallery_slider li{
		display: inline-block;
		width: 10px;
	    height: 10px;
	    margin: 5px 7px;
	    background: #d6d6d6;
	    -webkit-backface-visibility: visible;
	    -webkit-border-radius: 30px;
	    -moz-border-radius: 30px;
	    border-radius: 30px;
	    transition: all 0.8s ease 0s;
	    -webkit-transition: all 0.8s ease 0s;
	    -moz-transition: all 0.8s ease 0s;
	    -ms-transition: all 0.8s ease 0s;
	    -o-transition: all 0.8s ease 0s;
	    cursor: pointer;
	}
	#hd .gallery_slider li:hover,
	#hd .gallery_slider li.active{
		background: #f8b942;
	    width: 50px;
	    transition: all 0.8s ease 0s;
	    -webkit-transition: all 0.8s ease 0s;
	    -moz-transition: all 0.8s ease 0s;
	    -ms-transition: all 0.8s ease 0s;
	    -o-transition: all 0.8s ease 0s;
	}
	#hd .gallery_slider li.active{
		animation-name: flash01;
	    animation-duration: 1.5s;
		animation-timing-function:ease-out;
		animation-iteration-count: infinite;
	}
	@keyframes flash01{
		0%{
			opacity: 1;
			background: #f8b942;
		}
		50%{
			opacity: .5;
		}
		100%{
			opacity: 1;
			background: #f8b942;
		}
	}


	#hd .gallery_circle{
		width: 33px;
    	height: 32px;
		padding-top: 4px;
		text-align: center;
		border-radius: 100%;
		letter-spacing: 0;
	}
	#hd .gallery_box{
		width: 55%;
	}
	#hd .gallery_box #gallery_box01,
	#hd .gallery_box #gallery_box02{
		display: none;
	}
	#hd .gallery_list{
		display: flex;
		flex-wrap: wrap;
	}
	#hd .gallery_item{
		background-size: cover;
		background-position: center;
	}
	#hd #gallery_box00 .gallery_item_top h6,
	#hd #gallery_box00 .gallery_item_bottom h6,
	#hd .gallery_item h6{
		font-family: Myriad Pro , sans-serif;
		font-weight: 600;
		font-size: 1.3em;
		position: absolute;
		width: calc(100% - 20px);
		bottom:20px;
		left: 20px;
		padding-left: 45px;
		height: 45px;
		line-height: 1.425;
	}
	#hd #gallery_box00 .gallery_item_top h6 span,
	#hd #gallery_box00 .gallery_item_bottom h6 span,
	#hd .gallery_item h6 span{
		font-family: Myriad Pro , sans-serif;
		position: absolute;
		left: 0;
		top: -4px;
	}
	#hd .full_item{
		background-size: 100%;
    	background-repeat: no-repeat;
    	background-color: #191919;
	}
	#hd #gallery_box00 .gallery_item_top{
		position: relative;
		width: 50%;
		height: 0;
		padding-top: 43%;
	}
	#hd #gallery_box00 .gallery_item_bottom{
		position: relative;
		width: 100%;
		height: 0;
		padding-top: 43%;
	}
	#hd #gallery_box01 .gallery_item{
		position: relative;
		width: 50%;
		height: 0;
		padding-top: 43%;
	}
	#hd #gallery_box02 .gallery_item{
		position: relative;
		width: 50%;
	}
	#hd #gallery_box02 .gallery_item .top,
	#hd #gallery_box02 .gallery_item .bottom{
		background-size: cover;
		background-position: center;
		position: relative;
		width: 100%;
		height: 0;
		padding-top: 86%;
	}
	#hd .gallery_item .short_word{
	    width: 80%;
	}

