/* reset */
html, body, h1, h2, h3, h4, h5, h6, div, dl, dt, dd, ul, ol, li, p, blockquote, pre, hr, figure, table, caption, th, td, form, fieldset, legend, input, button, textarea, menu { margin: 0; padding: 0; }
header, footer, section, article, aside, nav, hgroup, address, figure, figcaption, menu, details { display: block; }
table { border-collapse: collapse; border-spacing: 0; }
caption, th { text-align: left; font-weight: normal; }
html, body, fieldset, img, iframe, abbr { border: 0; }
i, cite, em, var, address, dfn { font-style: normal; }
[hidefocus], summary {
outline:0;
}
li { list-style: none; }
h1, h2, h3, h4, h5, h6, small { font-size: 100%; }
sup, sub { font-size: 83%; }
pre, code, kbd, samp { font-family: inherit; }
q:before, q:after { content: none; }
textarea { overflow: auto; resize: none; }
label, summary { cursor: default; }
a, button { cursor: pointer; }
h1, h2, h3, h4, h5, h6, em, strong, b { font-weight: bold; }
del, ins, u, s, a, a:hover { text-decoration: none; }
body, textarea, input, button, select, keygen, legend { font: 14px/1.65 Arial, 'Source Han Sans CN', 'Hiragino Sans GB', Dengxian, Helvetica, STHeiti, 'Microsoft YaHei', Arial, simsun, sans-serif; color: #111; outline: 0; }
body { background: #222; overflow-x: hidden; }
a, a:hover { color: #333; }
.clear { clear: both; }
 #video5s::-webkit-media-controls {
 display:none !important;
}
.mask_div { position: fixed; width: 100%; height: 100%; background: #000; opacity: 0.95; filter: alpha(opacity=95); z-index: 9998; left: 0; top: 0; display: none; }
.mask_div1 { position: fixed; width: 100%; height: 100%; background: #000; opacity: 0.85; filter: alpha(opacity=85); z-index: 9998; left: 0; top: 0; display: none; cursor: pointer }
.pop_qr { position: fixed; width: 320px; height: 400px; left: 50%; top: 50%; margin-left: -160px; margin-top: -200px; z-index: 9999; color: #FFF; display: none; }
.pop_qr p { line-height: 80px; text-align: center; font-size: 20px; }
.pop_video { position: fixed; width: 1000px; height: 563px; left: 50%; top: 50%; margin-left: -500px; margin-top: -300px; z-index: 9999; background: #FEE100; display: none; }
.pop_video * { position: absolute; }
.pop_video .pop_close { width: 50px; height: 50px; position: absolute; right: -50px; top: 0; overflow: hidden; text-indent: -9999px; background: url(../images/pop_close.png) 0 0 no-repeat; cursor: pointer; }
.pop_video .pop_text { width: 1000px; height: 50px; position: absolute; bottom: -50px; left: 0; overflow: hidden; text-align: center; color: #E5E5E5; font-size: 18px; line-height: 50px; }
#flash30 { display: none; }
#flash15 { display: none; }
#flash2018_90s { display: none; }
#flash2018_30s { display: none; }
#flash2018_winter_30s { display: none; }
/*LAYOUT*/
#head { position: fixed; background: url(../images/top2bg.png); height: 55px; left: 0; top: 0; z-index: 1000; width: 100%; opacity: 0; }
#head .logo2 { position: absolute; left: 0; top: 0; width: 260px; height: 72px; }
#head .menu { width: 100%; height: 55px; text-align: center; }
#head .menu a { display: inline-block; margin: 10px 0; line-height: 35px; padding: 0 30px; color: #FFF; opacity: 0.75; }
#head .menu a:hover { color: #FEE100; opacity: 1; }
#head .menu a.act { border: 1px solid #FFF; border-radius: 35px; opacity: 1 }
#share2 { height: 32px; position: absolute; top: 12px; right: 60px; color: #FFF; font-size: 12px; z-index: 10; }
#share2 .text { width: 64px; height: 32px; display: inline-block; vertical-align: middle; line-height: 32px; opacity: .75 }
#share2 .weixin { width: 32px; height: 32px; display: inline-block; background: url(../images/shareweixin.png); vertical-align: middle; margin-right: 20px; opacity: .75; overflow: hidden; text-indent: -9999px; }
#share2 .weibo { width: 32px; height: 32px; display: inline-block; background: url(../images/shareweibo.png); vertical-align: middle; opacity: .75; overflow: hidden; text-indent: -9999px; }
#share2 a:hover { opacity: 1; }
#share2 .shareqr { z-index: 11; position: absolute; right: -8px; top: 30px; width: 150px; height: 200px; display: none; }
#page1 { width: 100%; height: 100VH; height: 100%; background:#000; position: relative; min-width: 1200px; overflow: hidden }
#p1_mask { width: 100%; position: absolute; left: 0; top: 0; z-index: 2; background: url(../images/mask.png) center center no-repeat; background-size: cover; }
#logo { width: 258px; height: 50px; position: absolute; left: 0; top: 50px; background: url(../images/logo.png) no-repeat; display: block; text-indent: -9999px; overflow: hidden; z-index: 10; }
#share { height: 32px; position: absolute; top: 60px; right: 60px; color: #FFF; font-size: 12px; z-index: 10; }
#share .text { width: 64px; height: 32px; display: inline-block; vertical-align: middle; line-height: 32px; opacity: .65 }
#share .weixin { width: 32px; height: 32px; display: inline-block; background: url(../images/shareweixin.png); vertical-align: middle; margin-right: 20px; opacity: .65; overflow: hidden; text-indent: -9999px; }
#share .weibo { width: 32px; height: 32px; display: inline-block; background: url(../images/shareweibo.png); vertical-align: middle; opacity: .65; overflow: hidden; text-indent: -9999px; }
#share a:hover { opacity: 1 }
#share .shareqr { z-index: 11; position: absolute; right: -8px; top: 30px; width: 150px; height: 200px; display: none; }
#v_content { width: 100%; position: absolute; overflow: hidden; z-index: 1; left: 0; top: 50%; }
	#videoplay{width:230px; height:130px; position:fixed; right:0; z-index:999;}
/*		#videoplay .v1{width:230px; height:46px; background:url(../images/img1.png); line-height:46px; color:#000; text-indent:50px; margin-bottom:10px; font-size:16px;}
		#videoplay .v2{width:180px; height:34px; background:url(../images/img2.png) 0 0 no-repeat;  color:#fff; margin-left:50px; line-height:34px; margin-bottom:5px; cursor:pointer;  text-indent:55px;}
		#videoplay .v3{width:180px; height:34px; background:url(../images/img2.png) 0 0 no-repeat;color:#fff;  margin-left:50px;  line-height:34px;  cursor:pointer;  text-indent:55px;}
		#videoplay .v2:hover,#videoplay .v3:hover{background:url(../images/img2.png) 0 -34px no-repeat; color:#000}*/
		
#play { width: 900px; text-align: center; height: 340px; position: absolute; z-index: 11; margin-top: -170px; top: 50%; left: 50%; margin-left: -450px; }
#play .slogan { margin: 0 auto; height: 250px; }
#play .btn { width: 338px; height: 88px; background: url(../images/play.png) 0 0 no-repeat; display: block; margin: 0 auto; display: block; overflow: hidden; text-indent: -9999px; }
#play .btn:hover { background: url(../images/play.png) 0 -88px no-repeat; }
#videomore { text-align: left; margin: 0 auto; }
#videomore .v1 { color: #FFF; text-align: center; margin: 30px 0; }
#videomore .v2 { width: 200px; height: 34px; float: left; background: url(../images/img2.png) 0 0 no-repeat; color: #fff; margin-left: 20px; line-height: 34px; margin-bottom: 5px; cursor: pointer; text-indent: 50px; }
#videomore .v3 { width: 200px; height: 34px; float: left; background: url(../images/img2.png) 0 0 no-repeat; color: #fff; margin-left: 20px; line-height: 34px; cursor: pointer; text-indent: 50px; }
#videomore .v2:hover, #videomore .v3:hover { background: url(../images/img2.png) 0 -34px no-repeat; color: #000 }
#up_con { width: 100%; bottom: 50px; z-index: 10; position: absolute; text-align: center; cursor: pointer; }
#up_con .uptext { height: 40px; margin: 0 auto; text-align: center; font-size: 12px; color: #FFF; opacity: 0.65 }
#up_con .upicon { width: 60px; height: 28px; background: url(../images/up.png) center center no-repeat; margin: 0 auto; }
#page2 { background: #222; }
#page2 .line1, #page2 .line2, #page2 .line3, #page2 .line4, #page2 .line5 ,#page2 .line6{ padding: 0; margin: 0; line-height: 0; padding-bottom: 3px; }
#page2 .contentb { width: 1200px; height: 770px; margin: 70px auto 0 auto; position: relative; }
#page2 .contentb .play { width: 640px; height: 640px; left: 0; top: 0; position: absolute; z-index: 0; overflow: hidden }
#page2 .contentb .play img { transition: all 4.6s ease; }
#page2 .contentb .play img:hover { transform: scale(1.1); }
#page2 .contentb .play .playname{position:absolute; left:160px; bottom:50px; opacity:0.75; z-index:999; color:#FFF; text-align:center}
#page2 .contentb .play .playname strong{ font-weight:800; font-size:20px; letter-spacing:5px;}
#page2 .contentb .slogan { width: 440px; height: 140px; right: 0; top: 0; position: absolute; }
#page2 .contentb .yellow-block { width: 668px; height: 200px; right: 190px; bottom: 0; position: absolute; z-index: 0; background: url(../images/block.png) 0 0 no-repeat; }
#page2 .contentb .yellow-block .tirelogo { width: 330px; height: 140px; position: absolute; left: 70px; top: 30px; }
#page2 .contentb .yellow-block .tips { width: 54px; height: 44px; position: absolute; left: 340px; bottom: 40px; }
#page2 .contentb .tire { width: 402px; height: 431px; right: 0; bottom: 0; position: absolute; z-index: 1 }
#page2 .contentb .newicon { width: 117px; height: 45ox; right: 5px; bottom: 430px; position: absolute; z-index: 1 }
#page2 .contentb .text { right: 0; top: 160px; width: 435px; position: absolute; }
#page2 .contentb .text p { color: #EEE; font-size: 18px; line-height:36px}
#page2 .contentb .text p.big { color: #FFF; font-size: 42px; padding-top: 10px }
#page2 .contentb .play1 { width: 640px; height: 640px; right: 0; top: 0; position: absolute; z-index: 0; overflow: hidden }
#page2 .contentb .play1 .imghover { transition: all 4.6s ease; }
#page2 .contentb .play1 .imghover:hover { transform: scale(1.1); }
#page2 .contentb .slogan1 { width: 440px; height: 110px; left: 0; top: 0; position: absolute; }
#page2 .contentb .yellow-block1 { width: 668px; height: 200px; left: 190px; bottom: 0; position: absolute; z-index: 0; background: url(../images/block.png) 0 0 no-repeat; }
#page2 .contentb .yellow-block1 .tirelogo { width: 330px; height: 140px; position: absolute; right: 20px; top: 30px; }
#page2 .contentb .yellow-block1 .tips { width: 54px; height: 44px; position: absolute; right: 340px; bottom: 40px; }
#page2 .contentb .tire1 { width: 402px; height: 431px; left: 0; bottom: 0; position: absolute; z-index: 1 }
#page2 .contentb .text1 { left: 0; top: 130px; width: 430px; position: absolute; }
#page2 .contentb .text1 p { color: #999; font-size: 16px; }
#page2 .contentb .text1 p.big { color: #FFF; font-size: 42px; padding-top: 10px }
#page2  .moreproduct{ width: 1200px; height:525px; margin:35px auto 100px auto;}
#page2  .moreproduct .device{ width: 1200px; height:390px; position:relative;}
.device .arrow-left { background: url(../images/arrows.png) no-repeat left top; position: absolute; left: -30px; top: 50%; margin-top: -15px; width: 17px; height: 30px; }
.device .arrow-right { background: url(../images/arrows.png) no-repeat left bottom; position: absolute; right: -30px; top: 50%; margin-top: -15px; width: 17px; height: 30px; }
.device .swiper-container2 { height: 390px; width: 1200px; overflow:hidden}
.device .pagination { position: absolute; left: 0; text-align: center; bottom: -45px; width: 100%; }
.device .swiper-pagination-switch { display: inline-block; width: 40px; height: 14px; border-radius: 14px; background: #999; box-shadow: 0px 1px 2px #555 ; margin: 0 10px; cursor: pointer; }
.device .swiper-active-switch { background: #FFE100; }
#page2  .moreproduct .probox{width:380px; height:380px; display:block; border:5px solid #FFF; float:left; margin:0 5px;}
#page2  .moreproduct .probox:hover{border:5px solid #FFE100;}
.proti{width:1200px; height:135px; background:url(../images/prdtitle.png); position:relative}
.proti h2{width:360px; height:60px; text-align:right;color:#ffe100; font-size:36px;  font-weight:800;  background:#222; position:absolute; right:0;  top:6px;}

#pagestory { background: #222;  height: 500px; position: relative; cursor: pointer }
#pagestory .leftblock { width: 50%; height: 500px; position: absolute; left: 0; background: #FFE100 }
#pagestory .leftblock .bigtext { position: absolute; right: 50%; margin-right: -50px; width: 260px; top: 190px; }
#pagestory .leftblock .bigtext p { font-size: 64px; line-height: 64px; }
#pagestory .leftblock .bigtext em { font-size: 32px; font-weight: 100; }
#pagestory .leftblock .tips { width: 54px; height: 44px; position: absolute; right: 20%; top: 50%; margin-top: -22px }
#pagestory .rightblock { width: 50%; height: 500px; position: absolute; right: 0; background: #000; background: url(../images/rightblock.jpg) center center no-repeat; background-size: cover }

#page-wq .wq-kv{width:1200px; margin:36px auto;}
#page-wq .wq-kv img{box-shadow:#000 1PX 1PX 5PX;}
#page-wq .sc-title{width:350px; height:70px; background:url(../images/dateicon.png) 25px center no-repeat #FFE100; box-shadow:#000 1PX 1PX 5PX; margin:0 auto; border-radius:70px; text-indent:90px; font-size:28px; line-height:70px; font-weight:600; font-family:"微软雅黑";}
#page-wq .sc-tips{text-align:center; margin-top:30px; color:#777}
.timeline{height:550px;  }
.timeline .line{background:url(../images/sc-timeline.png) center repeat-x; width:100%; height:30px; position:absolute; padding-left:280px; left:0; top:50%; margin-top:-15px;}
.timeline .line .dot{width:30px; height:30px; position:relative; float:left;}
.timeline .line .dot .d1{width:20px; height:20px; background:#FFF; border-radius:20px; position:absolute; left:5px; top:5px; z-index:1;}
.timeline .line .dot .d2{width:30px; height:30px; background:#FFF; border-radius:30px; position:absolute; left:0; top:0; z-index:0; opacity:0.25; filter:alpha(opacity=25);}
@keyframes fadeInDot {
  from {
    transform: scale(1,1)
  }

  50% {
    transform: scale(1.25,1.25)
  }
  100% {
    transform: scale(1,1)
  }
}

.fadeInDot {
  animation-name: fadeInDot;
  animate-duration: 2s;
}
.timeline .sc-list{width:408px; height:212px; background:url(../images/sc-list-bg.png); position:absolute; left:-189px; top:-222px;}
.timeline .sc-list:hover{background-position:0 -212px ;}
.timeline .sc-list:hover h2,.timeline .sc-list:hover .date{color:#000;}
.timeline .sc-list h2{font-size:32px; color:#333; position:absolute; left:48px; top:17px;}
.timeline .sc-list .loc{font-size:16px; color:#666; position:absolute; left:48px; top:70px;}
.timeline .sc-list .news,.timeline .sc-list .photo{font-size:16px; color:#666; position:absolute;text-indent:25px; line-height:20PX;  }
.timeline .sc-list .news{left:48px; top:107px; background:url(../images/newsicon.png);background-repeat:no-repeat;}
.timeline .sc-list .photo{left:235px; top:107px;background:url(../images/photoicon.png);background-repeat:no-repeat;}
.timeline .sc-list .news:hover,.timeline .sc-list .photo:hover{color:#F90; background-position:0 -20PX;}
.timeline .sc-list .news{font-size:16px; color:#666; position:absolute;}
.timeline .sc-list .date{font-size:24px; line-height:30px; color:#333; width:400px; position:absolute; top:160px; left:0; text-align:center;}

.timeline .sc-list2{width:408px; height:220px; background:url(../images/sc-list-bg2.png); position:absolute; left:-189px; top:40px;}
.timeline .sc-list2:hover{background-position:0 -230px ;}
.timeline .sc-list2:hover h2,.timeline .sc-list2:hover .date{color:#000;}
.timeline .sc-list2 h2{font-size:32px; color:#333; position:absolute; left:48px; top:81px;}
.timeline .sc-list2 .loc{font-size:16px; color:#666; position:absolute; left:48px; top:133px;}
.timeline .sc-list2 .news,.timeline .sc-list2 .photo{font-size:16px; color:#666; position:absolute;text-indent:25px; line-height:20PX;  }
.timeline .sc-list2 .news{left:48px; top:168px; background:url(../images/newsicon.png);background-repeat:no-repeat;}
.timeline .sc-list2 .photo{left:235px; top:168px;background:url(../images/photoicon.png);background-repeat:no-repeat;}
.timeline .sc-list2 .news:hover,.timeline .sc-list2 .photo:hover{color:#F90; background-position:0 -20PX;}
.timeline .sc-list2 .news{font-size:16px; color:#666; position:absolute;}
.timeline .sc-list2 .date{font-size:24px; line-height:30px; color:#333; width:400px; position:absolute; top:28px; left:0; text-align:center;}


#page3{ background:#222; text-align:center; width:100%; position:relative; z-index:0;}
/*#page3 img{width:100%;}
#page3 .t1,#page3 .t2{margin:0 auto; }
#page3 .t2 img{vertical-align:bottom; display:block;}
#page3 .text{margin:50px 0;}
#page3 p{color:#FFF; font-size:20px; line-height:200%;}*/

	.p3{position:relative; z-index:101; }
		.p3 .big{width:100%}
		.p3 img{width:100%}
		.p3 .p3_1{position:absolute; left:7.96875%; top:9.1764%;}
		.p3 .p3_2{position:absolute; left:7.96875%; bottom:-10px;}
		.p3 .p3_3{position:absolute; left:51.5625%; top:31.5294%;}
		.p3 .p3mask{z-index:998;}
		.p3 .p3video{z-index:1; padding-top:2%; overflow:hidden;}
		.p3 .p3_video{position:absolute; left:46.67%; top:44.9%; }
				.p3 .btn{position:absolute; left:57.4375%; top:80.7%; height:60px; overflow:hidden;  background:url(../images/blackbtnBG3.png) 0 0 no-repeat #000; display:block; margin:0 auto; display:block; overflow:hidden; color:#000; line-height:60px; font-size:18px; text-align:left;  border-radius:35px; display:inline-table; text-indent:15%; z-index:999 }
		.p3 .btn:hover{background:url(../images/blackbtnBG3.png) 0 -80px no-repeat; box-shadow:#333 0px 0px 5px; }
		.p3 .btn:link,p2 .btn:visited{
		-webkit-transition:all 0.4s ease-in-out; 
		-moz-transition:all 0.4s ease-in-out; 
		-o-transition:all 0.4s ease-in-out; 
		-ms-transition:all 0.4s ease-in-out; 
		transition:all 0.4s ease-in-out;
}
		.p3 .btn .rightar{width:24px; height:60px; vertical-align:middle; float:right; margin-right:15%;}


#page4 { width: 100%; min-height: 200px; }
#page4 .aboutdunlop { background: #FEE100; text-align: center; }
.p2 { position: relative; z-index: 100; overflow: hidden; }
.p2 .big { width: 100% }
.p2 img { width: 100%; }
.p2 .p2_1 { position: absolute; left: 58.75%; top: 8.27%; }
.p2 .p2_2 { position: absolute; left: 56.25%; top: 21.2%; }
.p2 .p2_3 { position: absolute; left: 50.52%; top: 55.92%; }
.p2 .btn { position: absolute; left: 57.2%; top: 46.55%; height: 60px; overflow: hidden; background: url(../images/blackbtnBG.png) 0 0 no-repeat #FCD100; display: block; margin: 0 auto; display: block; overflow: hidden; color: #FFF; line-height: 60px; font-size: 20px; text-align: left; border-radius: 6px; display: inline-table; text-indent: 15%; }
.p2 .btn:hover { background: url(../images/blackbtnBG.png) 0 -80px no-repeat; box-shadow: #333 0px 0px 5px; }
.p2 .btn:link, p2 .btn:visited { -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }
.p2 .btn .rightar { width: 24px; height: 60px; vertical-align: middle; float: right; margin-right: 15%; }
.p5 { position: relative; z-index: 101; padding-top: 100px; background: #ffe100 }
.p5 .btn { position: absolute; left: 40%; bottom: 10%; height: 60px; overflow: hidden; background: url(../images/blackbtnBG.png) 0 0 no-repeat #FCD100; display: block; margin: 0 auto; display: block; overflow: hidden; color: #FFF; line-height: 60px; text-align: left; border-radius: 4px; display: inline-table; text-indent: 15%; z-index: 999 }
.p5 .btn:hover { background: url(../images/blackbtnBG.png) 0 -80px no-repeat; box-shadow: #333 0px 0px 5px; }
.p5 .btn:link, p2 .btn:visited { -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }
.p5 .btn .rightar { width: 24px; height: 60px; vertical-align: middle; float: right; margin-right: 15%; }
#page4 .block { width: 25%; display: block; float: left; cursor: pointer }
#page4 .block2 { width: 50%; display: block; float: left; }
#page4 .f1 { background: #ECECEC; position: relative; overflow: hidden; }
#page4 .f2 { background: #E4E4E4; position: relative; overflow: hidden; }
#page4 .f3 { background: #ECECEC; position: relative; overflow: hidden; }
#page4 .f4 { background: #E4E4E4; position: relative; overflow: hidden; }
#page4 .f5 { background: #B1B2B4; position: relative; overflow: hidden; }
#page4 .f6 { background: #4A4A4A; position: relative; overflow: hidden; }
#page4 .f7 { background: #363636; position: relative; overflow: hidden; }
#page4 .boxt { background: url(../images/borer.svg) center center no-repeat; background-size: 100%; width: 100%; height: 100%; transform: scale(1.25, 1.25); transition: all 0.75s; opacity: 0; position: absolute; left: 0; top: 0; z-index: 10 }
#page4 .boxt:hover { opacity: 1; transform: scale(1, 1); }
#page4 .gzwmtext { position: absolute; left: 0; top: 50%; font-size: 48px; color: #201913; width: 100%; margin-top: -34px; }
#page4 .gzwmtext span.t111 { font-size: 48px; display: block; line-height: 100%; text-align: center; }
#page4 .gzwmtext span.t222 { font-size: 20px; display: block; line-height: 100%; text-align: center }
#page4 .f1iconimg { position: absolute; width: 100%; z-index: 0 }
#page4 .f1iconimg1 { position: absolute; width: 100%; z-index: 1; opacity: 0; transition: all 0.75s; }
#page4 .f2iconimg { position: absolute; width: 100%; z-index: 0 }
#page4 .f2iconimg1 { position: absolute; width: 100%; z-index: 1; opacity: 0; transition: all 0.75s; }
#page4 .f3iconimg { position: absolute; width: 100%; z-index: 0 }
#page4 .f3iconimg1 { position: absolute; width: 100%; z-index: 1; opacity: 0; transition: all 0.75s; }
#page4 .f4iconimg { position: absolute; width: 100%; z-index: 0 }
#page4 .f4iconimg1 { position: absolute; width: 100%; z-index: 1; opacity: 0; transition: all 0.75s; }
#page4 .f6iconimg { position: absolute; width: 100%; z-index: 0 }
#page4 .f6iconimg1 { position: absolute; width: 100%; z-index: 1; opacity: 0; transition: all 0.75s; }
#page4 .f7iconimg { position: absolute; width: 100%; z-index: 0 }
#page4 .f7iconimg1 { position: absolute; width: 100%; z-index: 1; opacity: 0; transition: all 0.75s; }
#page4 .about_title { width: 100%; text-align: center; top: 15%; color: #666666; position: absolute; z-index: 9; }
#page4 .about_title1 { width: 50%; font-size: 16px; text-align: left; left: 20px; top: 20px; color: #666666; position: absolute; z-index: 9; font-size: 14px; color: #FFFFFF; opacity: 0.85 }
#page4 .black800 { color: #000; }
#footer { width: 100%; line-height: 80px; background: #000; color: #999999; text-align: center }
.go-to-top { position: fixed; bottom: 16px; right: 16px; z-index: 1001; width: 40px; height: 40px; background: url(../../img/go-to-top2.gif) no-repeat; cursor: pointer; display: none }
#menubar { }
#menubar a { display: block; margin: 10px 0; line-height: 35px; padding: 0 30px; border: 1px solid #333; border-radius: 35px; opacity: 1; background: #FFE100; color: #FFF; background: url(../images/top2bg.png); }
#menubar a:hover { border: 1px solid #D8BF00; border-radius: 35px; opacity: 1; background: #FFE100; color: #000 }
#menubar a.act { border: 1px solid #D8BF00; border-radius: 35px; opacity: 1; background: #FFE100; color: #000 }
.pageScroll { width: 110px; text-align: center; position: fixed; top: 50%; margin-top: -125px; right: 5px; z-index: 999; }
.scrollNav a { display: block; margin: 10px 0; line-height: 35px; padding: 0 10px; border: 1px solid #333; border-radius: 35px; opacity: 1; background: #FFE100; color: #FFF; background: url(../images/top2bg.png); }
.scrollNav { }
.scrollNav a:hover { border: 1px solid #D8BF00; border-radius: 35px; opacity: 1; background: #FFE100; color: #000 }
li.scrollNav.active a { border: 1px solid #D8BF00; border-radius: 35px; opacity: 1; background: #FFE100; color: #000 }

:root {  --color_1: #fff;
 --main-color: #1dd1a1;
}
.box { font-family: 'Niramit', sans-serif; text-align: center; position: relative; overflow: hidden; }
.box:before,  .box:after,  .box-content:before,  .box-content:after { content: ''; background: linear-gradient(rgba(0,0,0,0.65),rgba(0,0,0,0.1)); height: 100%; width: 25%; transform: translateY(-100%); position: absolute; left: 0; top: 0; z-index: 1; transition: all 0.3s; }
.box:hover:before,  .box:hover:after,  .box:hover .box-content:before,  .box:hover .box-content:after { transform: translateY(0); }
.box:after { left: 25%; }
.box .box-content:before { left: 50%; }
.box .box-content:after { left: 75%; }
.box:hover:before { transition-delay: 0.225s; }
.box:hover:after { transition-delay: 0.075s; }
.box:hover .box-content:before { transition-delay: 0.15s; }
.box:hover .box-content:after { transition-delay: 0s; }
.box img { width: 100%; height: auto; transition: all 0.3s ease 0s; }
.box:hover img { filter: grayscale(100%); }
.box .box-content { width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; transition: all 0.2s; }
.content { width: 100%; padding: 7px 0; opacity: 0; position: absolute; left: 0; bottom: -50%; z-index: 2; transition: all 0.3s ease 0.1s; }
.box:hover .content { opacity: 1; bottom: 45%; }
.box .title { color: #FFE100; font-size: 20px; line-height:30px;  font-weight: 500; letter-spacing: 5px; text-transform: uppercase; margin: 0; text-shadow:1px 1px 1px #000; }
.box .post { color:#ffe100; font-size: 36px; font-style: italic; text-transform: capitalize; letter-spacing: 1px; margin-bottom: 10px; display: block; text-shadow:1px 1px 1px #000; }
.box .title a{color:#FFE100; line-height:30px;  background:url(../images/linkicon.png) left center no-repeat; padding-left:36px; text-indent:-36px }
.box .title a:hover{text-decoration:NONE;  }
 @media only screen and (max-width:990px) {
.box { margin-bottom: 30px; }
}
 @media only screen and (max-width:479px) {
.box .title { font-size: 20px; }
}