html {
  scroll-behavior: smooth;
 }


body{ background: #000; font-family:helve,Tahoma, Geneva, sans-serif; color:#000;   }

p,a{  text-decoration:none;  font-family: helve,Tahoma, Geneva, sans-serif; color:#000; line-height: 1.2;}
a{cursor: pointer; }
h1{  font-size:40px; font-family:tr-f,Tahoma, Geneva, sans-serif; text-transform:uppercase; color:#fff; }
h2{  font-size:37px; font-family:helve-bc,Tahoma, Geneva, sans-serif;text-transform:uppercase; color:#000; }
h3{  font-size:18px; font-family:helve-bc,Tahoma, Geneva, sans-serif; text-transform:uppercase; color:#000; }
h4{  font-size:30px; font-family:helve-bc,Tahoma, Geneva, sans-serif; text-transform:uppercase; color:#000;  }

a:hover{ cursor: pointer; text-decoration: underline;}




@font-face {
    font-family:helve-bc;
    src:url(../font/HelveticaNeueLTStd-BdCn.otf);
}

@font-face {
    font-family:helve;
    src:url(../font/HelveticaNeueLTStd-Roman.otf);
}

@font-face {
    font-family:df;
    src:url("../font/df.ttf");
}

@font-face {
    font-family:tr-f;
    src:url("../font/tr/tr-f.ttf");
}

.pagewarp{ width: 1280px; margin:0px auto; position: relative;}


img.logo-icn-main{float: left;}
img.logo-txt-main{ margin-left: -5px;}




#sec1{ float: left; width:100%; background: url("../images/sec1-bg.jpg")bottom center no-repeat #000; height: 1213px; }



#sec1 h1{font-size: 105px; clear: both; float: left; margin-top:40px;}

.header{float: left;   margin-top: 30px;}

.top-nav{ float: left; margin-top: 67px;  margin-left: 25px; }
.menu{ }
.menu ul{list-style: none; margin-bottom: 0;}
.menu ul li{ display: inline-block; margin-right:40px; padding-top: 30px;}
.menu ul li a{ color:#fbe9dd; font-size:15px; font-weight: bold; text-transform: uppercase;}
.menu ul li a:hover{ }


ul.sub-menu{position: absolute; background: #0000009c; top:57px; left: 0;  display: none; border: 1px solid #fbe9dd; z-index: 20;border-right: none; border-bottom: none;border-top: none; }



ul.sub-menu li{ display: block;
  margin: 0;
  padding: 15px 51px 15px 13px;
    padding-top: 15px;
  border-bottom: 1px solid #ffffff7a;
  background-image: none; }

ul.sub-menu li:first-child{padding-top:15px;}
ul.sub-menu li:last-child{border-bottom: none;}
ul.sub-menu li a{ color: #fff; font-size: 14px;   font-weight: normal; display: block;   cursor: pointer;}
ul.sub-menu li a:hover{ }


#sec2{
	float: left;
  width: 100%;
  background: url("../images/sec2-bg.jpg")center top;
  height: 807px;
  padding-top: 150px;
}

img.pd-sec2{ float: left;}
.sec2-info{  
float: left;
  width: 500px;
  padding-top: 63px;
  margin-left: 50px;

}

.sec2-info-head{ float: left; }
img.sec2-info-head-icn{ float: left;}
.sec2-info-head h1{ 
color: #fff;
  float: left;
  font-size: 100px;
  line-height: 0.85;
  margin-top: 62px;
  margin-left: 18px;
}
.sec2-info-inner{ float: left;  }
.sec2-info-inner p{
	color: #fff;
  font-size: 14px;
  line-height: 1.2;
  margin-top: 40px;
}



#sec3{ float: left; width:100%; ;background: url("../images/_sec3-bg2.png")bottom center no-repeat,url("../images/_sec3-bg1.png")top center no-repeat; height: 989px; background-color: #000; border-bottom: 30px solid #fff; position: relative;}

.sec3-info{
	position: absolute;
  width: 300px;
	top: 200px;
 
}
.sec3-info h1{ 
color: #fff;
  font-size: 100px;
  line-height: 0.85;
}
.sec3-info p{
	color: #fff;
  font-size: 14px;
  line-height: 1.2;
  margin-top: 40px;
}



img.sec3-model{ float: right; margin-top: -283px;  margin-right: -200px;}




#sec4{float:left; width:100%; background: url("../images/sec4-bg.jpg")top repeat-x; height: 259px; margin-top: 20px; }

.black-border{ width: 33.33%; float: left; background: #000; margin-top: 20px;}
.white-border{ height: 206px; width:90%; margin: 0 5%; border: 1px solid #fff;}


.pantone-style{ float: left; background: #6a6a6a;
  height: 202px;
  width: 85px;
  margin: 2px;}
.white-box-inner{ float: right; text-align: right; margin: 15px 10px 0 0;}
.white-box-inner h1{ text-transform: uppercase; color:#fff; font-family:helve-bc,Tahoma, Geneva, sans-serif; font-size: 60px}
.white-box-inner a{ color:#cb7456; font-weight: bold;  font-family:helve-bc,Tahoma, Geneva, sans-serif;  text-transform: uppercase; font-size:25px; margin-top:30px; }





#sec5{ float:left; width:100%; padding: 150px 0 200px;}
img.authen-stk{float: left; margin-left:100px;}

.sec5-info{float: left; width: 600px; margin-left: 100px;}
.sec5-info h1{ font-size: 123px;
  line-height: 0.85; margin-bottom: 50px;}
.howto{float: left; width:30%; margin-right: 3%;}
.howto h2{ color:#cb7456; margin-bottom: 20px;}
.howto p{color:#fff; font-size: 14px;}




#sec6{float: left; width: 100%; background: url("../images/sec6-bg.jpg")top right no-repeat #fff; padding: 150px 0 200px;}
img.sec6-logo{float: left; margin-left: 100px;}

.sec6-info{width: 600px; float: left; margin: 250px 0 0 100px;}
.sec6-info h1{ font-size: 123px; color:#3a0f00;
  line-height: 0.85; margin-bottom: 50px;}




.footer{ background: #000; text-align: center; padding: 20px 0 30px 0; float: left; width:100%;}
.footer p{color:#fff;}




/*--------------------- inner page --------------------------*/



#inner-head{ float: left; width:100%; background:url("../images/inner-top-bg.jpg")top center no-repeat #000; padding-bottom: 50px; border-bottom: 20px solid #fff;  }

#inner-head h1{font-size: 95px; clear: both; float: left; margin-top:40px;}







.inner-info-list{float: left; width: 100%; padding: 100px 0 150px; background: #fff; border-top:20px solid #c98d73;}
.inner-info-head{float: left; width: 100%; margin-bottom: 80px;}



.pd-box{float: left; width: 25%; text-align: center; height: auto; padding: 20px 0 80px 0;}
.pd-box img{ width:80%;}
.pd-box h1{margin-top: 20px; color: #000; font-size: 34px;  font-family:helve-bc,Tahoma, Geneva, sans-serif; text-transform:uppercase; }










@media screen and (max-width: 1480px) {

}


@media screen and (max-width: 1280px) {
	
	.pagewarp{ width: 88%; margin:0px 5%; float: left;}
	img.pd-sec2 {  width: 50%;}
	.sec2-info{width:40%;}
	img.authen-stk{margin-left: 0; width:40%;}
	img.sec6-logo{margin-left: 5%; width:30%;}
	
	.sec3-info{top:100px;}
	img.sec3-model{ float: none; position: absolute; margin: 0; width:900px; right: -5%; bottom:-1020px;}
	.pantone-style{width:60px;}
	.white-box-inner h1{font-size:49px;}
	.sec5-info{width:50%; margin-left: 5%;}
	.sec6-info{width:40%; margin: 155px 0 0 50px;}
	
	.header{width:100%;}
}



@media screen and (max-width: 1100px) {
	#sec3{height: auto; padding: 20px 0 500px 0;}
	.sec3-info{position: relative; float: left; width:300px;}
	img.sec3-model{width: 650px;    bottom: -531px;}
	
}


@media screen and (max-width: 1024px) {
	#sec1 h1{font-size: 92px;}
	#sec2{padding: 150px 0; height: auto;}
	.sec2-info{padding-top: 0;}
	.white-box-inner h1{font-size: 35px;}
	.white-box-inner a{font-size: 18px;}
	.sec5-info h1{font-size: 100px;}
	.sec6-info h1{ font-size: 100px;}
	img.authen-stk{ width:35%;}
	.menu ul li a{font-size: 13px;}
	.menu ul li{margin-right: 27px;}
}




@media screen and (max-width: 1000px) {
	img.pd-sec2{width:40%;}
	.sec2-info{width:50%;}
	
	.pd-box{width:33.3%;}

}





@media screen and (max-width: 900px) {  
	#sec1 h1{font-size:85px;}
	.white-box-inner h1{font-size:30px;}
	.white-box-inner a{font-size:16px;}
	img.sec3-model{width:621px;}
	.sec3-info{ width:200px;}
	.sec5-info{width:100%; margin-left: 0;}
	 img.authen-stk {    width: 300px;    margin-bottom: 50px;  }
	#sec5{padding-top: 100px;}
}



@media screen and (max-width: 800px) {  

}






@media screen and (max-width: 750px) /*flip mobile view*/ { 
	
	img.pd-sec2 {  width: 40%;   position: absolute;  top: 29px;  left: 0;}
	.sec2-info {  width: 100%;  margin-left: 0;  margin-top: 92px;  }
	.sec2-info-head {  float: left;  margin-left: 289px;}
	 #sec2 {		 padding: 50px 0;}
	  .white-box-inner h1 {    font-size: 25px;  }
	.sec6-info{margin-top: 15px;}
	.sec3-info p{text-shadow: 2px 2px 2px #000;}
	 .sec3-info {    width: 300px;    z-index: 1;  }
	
	.pd-box{width:48%;}

}

@media screen and (max-width: 700px) {
	#sec1{ background:url("../images/sec1-bg-res2.png")top center no-repeat, url("../images/sec1-bg-res.jpg")bottom center no-repeat; background-size: 100%; height: auto;  padding-bottom: 862px;}
	#sec1 h1{margin-top: 25px; font-size: 70px;}

	 img.pd-sec2 {    width: 50%;    position: relative;    margin-top: 43px;  }
	.sec2-info-head{margin-left: 0;}
	.sec2-info{margin-top:49px;}
	
	#sec2{ background:url("../images/sec2-bg-res2.jpg")top center no-repeat, url("../images/sec2-bg-res.jpg")bottom center no-repeat; background-size: 100%; background-color: #a15b45; padding-bottom:200px;}
	 .pantone-style {    width: 35px;  }
	  .sec6-info h1 {    font-size: 80px;  }
	.top-nav{margin-left: 0;}
}



@media screen and (max-width: 600px){
		#sec4{background: none; height: auto;}
	.black-border {		width: 100%;}
	.white-border {  height: 120px; width: 100%;	margin: 0%;}
	 .pantone-style {     width: 93px; height: 115px;  }
	  .white-box-inner h1 {    font-size: 39px;  }
}

@media screen and (max-width: 500px){

}



@media screen and (max-width: 500px) {	
	.top-nav{margin-left:5px;}
	img.logo-icn-main {  position: absolute;  top: 27px;  left: 0; }
	.header{width:100%;}
	img.logo-txt-main {  margin-left: 110px;  margin-top: 47px;  width: 195px; }
	.menu {  margin-top: 27px; }
	  .menu ul li {    margin-right: 13px;  }
	 .menu ul li a {    font-size: 14px;  }
	span.hide-on-time{display: none;}
	  #sec1 h1 {    font-size: 54px;  }
	
	#sec1{  padding-bottom: 562px;}
	
	
	
	img.pd-sec2 {    width: 80%; } 
	#sec2{padding-bottom:100px;}
	
	
	
	
	
	#sec3 {    height: auto;    padding: 20px 0 0 0; overflow: hidden;}
	 .sec3-info {    width: 67%;    position: relative;  }
	img.sec3-model {    width: 150%;    position: relative;    float: left;   margin-left: -35%;    margin-bottom: -30px; 
		margin-top: -36px; bottom:0;  }
	
	

	
	img.authen-stk{width:100%;}
	 .sec5-info h1 {    font-size: 75px; margin-bottom: 0;  }
	.howto {  width: 100%;  margin-right: 0;  margin-top: 40px;}
	
	#sec6{background-position-x:-70%; }
	 img.sec6-logo {    margin-left: 0;    width: 45%;    margin-bottom: 36px;  }
	 .sec6-info {    margin-top: 15px; width: 100%;    margin: 10px 0 0 0;  }
	.sec6-info h1{font-size: 90px;}
	
	
	.pd-box{width:48%; padding-bottom: 50px;}
	.pd-box h1{font-size: 25px;}
}

@media screen and (max-width: 420px) {	

}

@media screen and (max-width: 400px) {	
	  .menu ul li a {    font-size: 12px;  }
		 .menu ul li {    margin-right: 14px;  }
	.sec2-info-head h1{font-size:87px;}
}