/* iweb32-style02
 * Copyright 2016, TANK
 * 
 * 2016 / 10 / 19
 */

.wow { -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; }
.deck01{opacity:1}
.tit .deckTop{margin-bottom:30px;}
.tit .deckTop h2{letter-spacing: 2.5px;position: relative;}
.deckTop{animation-name:fadeInDown;-webkit-animation-name:fadeInDown;}
.deckTop h3{position:relative;margin:0 0 40px;font-size:20px;font-weight:600;color:#242424;letter-spacing:1px;z-index:1}
.deckTop p{text-transform:uppercase;font-weight:700;margin-bottom: 10px;}
.deckTop p font{color:#252525;font-size: 52px;line-height:120%;font-family:'Poppins',sans-serif;font-weight:700;text-transform:uppercase;text-align:center;letter-spacing:1.5px}
.deckTop p font:nth-child(2){color:#252525;-webkit-text-stroke:2px #252525;-webkit-text-fill-color:transparent}


.littetitle{
    display: flex;
    flex-direction: column;
}
.littetitle .ame{
    font-size: 42px;
    line-height: 180%;
    font-weight: 700;
}
.littetitle .mr_top{
    font-size: 19px;
    margin-top: 3px;
    font-weight: 500;
    margin-bottom: 20px;
}
.littetitle h3:before{
	content:"";
	position: absolute;
	width: 6px;
	height: 140%;
	background: #37b0f5;
	top: -7px;
	-moz-transform-origin: bottom;
	-moz-transform: skewX(20deg);
	-webkit-transform-origin: bottom;
	-webkit-transform: skewX(-20deg);
	-o-transform-origin: bottom;
	-o-transform: skewX(-20deg);
	-ms-transform-origin: bottom;
	-ms-transform: skewX(-20deg);
	transform-origin: bottom;
	transform: skewX(-20deg);
	left: -18px;
}
.littetitle h3{
	color:#144a97;
	font-size:18px;
	position: relative;
}
#wrapBox{
    background-image: url(/images/02/web_bg.jpg);
    position: relative;
    margin-top: -140px;
    z-index: 1;
    padding-top: 140px;
    background-position: 50% 50%;
}
/* aboutWrap */
#aboutWrap {overflow: hidden;position: relative;}
#aboutWrap section {overflow: hidden;position: relative;padding: 90px 0;margin: auto;background-size: contain;z-index: 1;}
#aboutWrap #treeCanvas {position: absolute;top: 200px;left: 240px;-webkit-transform-origin: center;transform-origin: center;z-index: 10;display: none;}
#aboutWrap section #articleInfo7 .info { margin: 0 auto; width: calc(50% - -340px); text-align: center; font-size: 18px; color: #484848; }

.contline{
    display: flex;
    background-color: #f4f4f4;
}
.contline section{
    display: flex;
    justify-content: center;
}
.contline .bomitem{
    position: relative;
    display: flex;
    width: 31%;
    justify-content: center;
}
.contline .bomitem:first-child:before{
	position: absolute;
	content:"";
	width: 1px;
	height: 80%;
	background: #d5d5d5;
	right: 0;
	top: 10%;
}
.contline .bomitem:last-child:before{
	position: absolute;
	content:"";
	width: 1px;
	height: 80%;
	background: #d5d5d5;
	left: 0;
	top: 10%;
}
.contline .bomitem a{
    display: flex;
    align-items: center;
    padding: 20px 30px;
}
.contline .bomitem img{
    width: 80px;
}
/* products */
#recomWrap{
    position: relative;
}

.tit .deckTop h2::before {
    content: "";
    display: block;
    position: absolute;
    width: 30px;
    height: 3px;
    left: 0;
    margin-left: 0;
    bottom: -30px;
    background: #252525;
}
#products ul{overflow:hidden;position: relative;display: flex;flex-wrap: wrap;}
#products ul li{padding: 20px 20px;width: calc((100% / 4) - 40px);position: relative;border-width: 0px 0px 1px 0px;border-color: #dcdcdc;border-style: solid;background-color: #fff;}
#products ul li .info{border-radius:5px}
#products ul li .p-more{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
}
#products ul li .info .productPhoto{margin-bottom:10px}
#products ul li .info .productPhoto{transition:all 0.4s cubic-bezier(0.39,0.58,0.57,1);margin: 20px;background-size: cover;}
#products ul li .info:hover .productPhoto{-webkit-transform:scale(1.02);transform:scale(1.02)}
#products ul li .info:hover .productPhoto{}
#products ul li .info h3 a{overflow:hidden;height: 57px;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp: 2;-webkit-box-orient:vertical;text-align:left;font-size:20px;line-height: 160%;letter-spacing: 0;font-family:unset;padding: 10px 0;margin-bottom:0px;font-weight: 500;}
#products ul li .info span{padding:10px;font-size:17px;font-weight:600;color:#707070;display: none;}
#products ul li .info p{font-size: 16px;color:#CA2A18;text-align:left;font-weight:700;padding: 10px 0;}
#products ul li .info .addcar{border-radius:7px;padding:2px 0px;background:linear-gradient(0deg,#CA2A18 22%,#E96C5E 80%);-webkit-box-shadow:0 2px 12px rgba(70,70,70,0.64);-moz-box-shadow:0 2px 12px rgba(70,70,70,0.64);-ms-box-shadow:0 2px 12px rgba(70,70,70,0.64);box-shadow:3px 4px 8px 1px rgba(70,70,70,0.64);-webkit-transition:opacity 0.35s,-webkit-transform 0.35s;transition:opacity 0.35s,transform 0.35s;font-size:18px;color:#ffffff;text-align:center;width:72%}
#products ul li .info .addcar a{color:#ffffff}
#products ul li .info .addcar a:hover{color:#ffffff;text-decoration:none}
#products .deck01{
    position: relative;
    padding-bottom: 50px;
}
.btnBox{
    position: relative;
    display: flex;
    flex-direction: column;
}
.btnBox:hover a{
    background-color: #37b0f5;
}
.btnBox:hover:before{
	background-color: #37b0f5;
}
.btnBox:before{
	content:"";
	position: absolute;
	width: 50px;
	height: 100%;
	background: #131313;
	margin-left: 214px;
	-moz-transform-origin: bottom;
	-moz-transform: skewX(20deg);
	-webkit-transform-origin: bottom;
	-webkit-transform: skewX(20deg);
	-o-transform-origin: bottom;
	-o-transform: skewX(20deg);
	-ms-transform-origin: bottom;
	-ms-transform: skewX(20deg);
	transform-origin: bottom;
	transform: skewX(20deg);
	transition: all 0.5s ease-out 0s;
}
.moreBtn {display: inline-block;max-width: 140px;width: 50px;font-weight: 500;font-family: "Noto Sans TC";font-size: 13px;color: #6cb2c2;letter-spacing: 0.65px;text-align: center;padding: 12.5px 0px;}
.moreBtn:hover {color: #0a0a0a;}
.moreBtn.arrow {position: relative;text-align: left;padding: 20px 70px 20px 45px;width: 100px;background-color: #131313;color: #ffffff;transition: all 0.5s ease-out 0s;}
.moreBtn.arrow:before, .moreBtn.arrow:after {content: "";position: absolute;top: 0;margin: auto;display: block;transition: all 0.5s ease-out 0s;}
.moreBtn.arrow:before{
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.8em 0.6em 0px 0.5em;
    border-color: #fff transparent transparent transparent;
    right: 0;
    bottom: 0;
    content: "";
    -moz-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
    }
.moreBtn.arrow:after {bottom: 1px;right: 10px;width: 35px;height: 1px;background-color: rgb(255 255 255);}
.moreBtn.arrow:hover{}

/* photoList */
#photoList { overflow: hidden; }
#photoList .bidPhoto, #photoList .bd { float: left; width: 83%; }
#photoList .bd { margin-left: 1%; width: 16%; }
#photoList .bd ul li { margin: 10px 0; }
#photoList .bidPhoto a, #photoList .bd ul li a { border:1px #545353 solid; }

/* news */
#NPBox { margin-bottom: 80px; }
#newBox { border: 1px solid #eee; box-sizing: border-box; }
#NPBox .news-content-title { margin-right: 30px; padding: 16px 0; width: 124px; display: inline-block; background: #f39d90; font-weight: bold; text-align: center; font-size: 16px; color: #fff; }
#NPBox .new-slider { margin-bottom: 0; width: calc(100% - 160px); display: inline-block; }
#NPBox .news-item { position: relative; padding: 10px; display: flex; align-items: center; }
#NPBox .news-item .date { position: relative; margin-right: 30px; vertical-align: text-bottom; font-family: 'Montserrat',sans-serif; font-size: 15px; }
#NPBox .news-item h3 { width: 70%; }
#NPBox .news-item .title { overflow: hidden; display: inline-block; text-overflow: ellipsis; white-space: nowrap; vertical-align: text-bottom; font-weight: bold; font-size: 15px; }
#NPBox .news-item .date::after { position: absolute; width: 13px; height: 2px; background: #79551a; top: 50%; right: -23px; transform: translateY(-50%); content: ""; }
#NPBox .news-item .more { position: absolute; padding-right: 20px; display: flex; font-size: 15px; bottom: 12px; right: 0; }
#NPBox .news-item .more::after { position: absolute; height: 24px; width: 1px; background: #eee; display: inline-block; left: -15px; content: ""; }
#NPBox .news-item .more i { padding: 5px; font-size: 16px; color: #b3b3b3; vertical-align: bottom; }
#NPBox .news-item .more p { vertical-align: top; }

/* situationWrap */
#situationWrap { border-bottom: 30px solid #1d2087; background: url(../../images/02/index/img-situationBg.jpg); background-repeat: no-repeat; background-size: cover; background-color: rgb(212,229,243); background-position: 50% 10%; }
#situationWrap .info { padding: 170px 0; width: 100%; }
#situationWrap .info .logoimg { margin-bottom: 15px; text-align: center; }
#situationWrap .info p { text-align: center; text-shadow: 1px 2px 1px #000; line-height: 160%; font-size: 48px; color: #fff; }

/* serviceWrap */
#serviceWrap {position: relative;padding: 120px 0;background-size: cover;}
#serviceWrap section { display: flex; }
#serviceWrap .tit { position: relative; width: 20%; }
#serviceWrap .tit h3 { font-family: 'Montserrat',sans-serif; font-size: 229px; line-height: 120%; font-weight: 500; letter-spacing: -15px; color: #f4f4f4; }
#serviceWrap ul {display: flex;flex-wrap: wrap;}
#serviceWrap ul li {position: relative;margin: 0 auto;width: calc((100% / 2) - 30px);text-align: center;color: #565656;-webkit-box-sizing: border-box;box-sizing: border-box;background-repeat: no-repeat;-webkit-transition: all .4s ease;-o-transition: all .4s ease;transition: all .4s ease;}
#serviceWrap ul li .moreR {position: absolute;width: 100%;height: 100%;display: block;top: 0;left: 0;z-index: 3;}
#serviceWrap ul li:nth-child(2) { -webkit-animation-delay: .5s; }
#serviceWrap ul li:nth-child(3) { -webkit-animation-delay: 1s; }
#serviceWrap ul li .one {padding: 0px 0 0px;position: absolute;top: 90px;left: 60px;}
#serviceWrap ul li .two img { -webkit-transition: opacity 0.35s,-webkit-transform 0.35s; transition: opacity 0.35s,transform 0.35s; }
#serviceWrap ul li h3, #serviceWrap ul li p {margin: 5px auto;font-size: 15px;}


#serviceWrap ul li h3 {padding-bottom: 0;font-weight: 300;letter-spacing: 0.5px;font-size: 15px;color: #fff;text-transform: uppercase;}
#serviceWrap ul li h5 {padding-bottom: 35px;padding-top: 0;line-height: 120%;text-transform: uppercase;font-size: 28px;font-weight: 300;letter-spacing: .5px;color: #fff;}
#serviceWrap ul li article { text-align: center; }
#serviceWrap ul li p{color: #fff;text-transform: uppercase;text-decoration: underline;}


/* slogn */
#slogn { padding: 170px 0; background-image: url(/images/02/index/sloganBg.jpg); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; background-attachment: fixed; }
#slogn img { margin: 0 auto; display: block; }
#slogn .wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 0; -webkit-box-sizing: border-box; box-sizing: border-box; animation-name: fadeInUp; -webkit-animation-name: fadeInUp; }
#slogn .wrap a {position: relative;padding-left: 25px;width: 30%;height: 80px;border: 1px solid rgb(255 255 255 / 26%);display: inline-block;line-height: 80px;letter-spacing: 2.5px;font-size: 17px;color: #fff;background-color: rgb(10 7 3 / 40%);-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}
#slogn .wrap a:before { position: absolute; width:8px; height:1px; background-color:#fff; top: calc( 50% + 0.5px); right: 30px; -webkit-transform-origin:right top; -ms-transform-origin:right top; transform-origin:right top; -webkit-transform:rotate(40deg); -ms-transform:rotate(40deg); transform:rotate(40deg); -webkit-animation:anti02 2s forwards cubic-bezier(0.45,0.05,0.55,0.95) infinite; animation:anti02 2s forwards cubic-bezier(0.45,0.05,0.55,0.95) infinite; content: ""; }
#slogn .wrap a:after { position: absolute; width: 35px; height: 1px; top: 50%; right: 30px; background-color:#fff; -webkit-transform-origin:right top; -ms-transform-origin:right top; transform-origin:right top; -webkit-animation:anti02 2s forwards cubic-bezier(0.45,0.05,0.55,0.95) infinite; animation:anti02 2s forwards cubic-bezier(0.45,0.05,0.55,0.95) infinite; content: ""; }

@-webkit-keyframes iconRotate { 0% { -webkit-transform: rotate(0); } 100% { -webkit-transform: rotate(2deg); } }
@keyframes iconRotate { 0% { transform: rotate(0); } 100% { transform: rotate(2deg); } }
@-webkit-keyframes iconRotate2 { 0% { -webkit-transform: rotate(0); } 100% { -webkit-transform: rotate(-2deg); } }
@keyframes iconRotate2 { 0% { transform: rotate(0); } 100% { transform: rotate(-2deg); } }
@-webkit-keyframes iconRotate3 { 0% { -webkit-transform: rotate(0); } 80% { -webkit-transform: rotate(25deg); } 100% { -webkit-transform: rotate(25deg); } }
@keyframes iconRotate3 { 0% { transform: rotate(0); } 80% { transform: rotate(25deg); } 100% { transform: rotate(25deg); } }
@-webkit-keyframes bgWhirligig { 0% { -webkit-transform: rotate(360deg); } 100% { -webkit-transform: rotate(0); } }
@keyframes bgWhirligig { 0% { transform: rotate(360deg); } 100% { transform: rotate(0); } }
@-webkit-keyframes bgWhirligig-2 { 0% { -webkit-transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); } }
@keyframes bgWhirligig-2 { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
@-webkit-keyframes newsbg { 0% { background-position: 95% 35%; } 100% { background-position: 95% 90%; } }
@keyframes newsbg { 0% { background-position: 95% 35%; } 100% { background-position: 95% 90%; } }
@-webkit-keyframes anti02 { 0% { right: 50px; opacity: 0; } 100% { right: 30px; opacity: 1; } }
@keyframes anti02 { 0% { right: 50px; opacity: 0; } 100% { right: 30px; opacity: 1; } }

@media screen and (max-width:1680px) {
	#NPBox .news-item h3 { width: 60%; }
	#serviceWrap:before { right: 210px; zoom: 75%; }
	.deckTop {/* zoom: 75%; */}
}
@media screen and (max-width:1440px) {
	#aboutWrap section {position: relative;width: 90%;padding: 50px 0;}
	#serviceWrap { padding: 40px 0; }
	#serviceWrap:before { right: 130px; }

	.deck01 {}
	#aboutWrap #treeCanvas { left: 70px; }
}
@media screen and (max-width:1366px) {
	#situationWrap .info { width: 100%; }
	#serviceWrap section {width: 90%;display: flex;justify-content: space-around;}
}
@media screen and (min-width:1281px) {
#products ul::before {content: '';display: block;width: 100%;height: 100%;border-style: solid;border-width: 1px 1px 0px 1px;border-color: #dcdcdc;border-right: none;position: absolute;top: 0px;left: 0;z-index: 10;}
	
#products ul li::before {content: '';display: block;width: 1px;height: 100%;background: #dcdcdc;position: absolute;top: 0px;right: 0px;z-index: 10;}
#products ul li:last-child::before{right: 0px;}
#products ul li:hover::before {/* background: rgb(255 255 255 / 0%); */}
#recomWrap::after {
    content: '';
    position: absolute;
    height: 1000px;
    width: 50%;
    top: 0;
    right: 0;
    background-image: url(/images/02/index/img-pBg.jpg);
    z-index: -1;
}
}
@media screen and (max-width:1280px) {
	#slogn { background-attachment: initial; }
	#serviceWrap .tit { width: 10%; }
	#serviceWrap ul { width: 90%; display: flex; flex-wrap: wrap; }
#serviceWrap ul li .one{
    top: 30px;
    left: 30px;
}
	#serviceWrap ul li h5{
    font-size: 23px;
}
	#products ul li{
    padding: 20px 5px;
    width: calc((100% / 2) - 10px);
    border-width: 0;
}
}
@media screen and (max-width:1140px) {
}
@media screen and (min-width:1025px) {
	.deckTop-m { display: none; }
	#serviceWrap ul li:hover .two img { -webkit-transform: scale(0.95); transform: scale(0.95); }
	#serviceWrap ul li:hover {}
	#serviceWrap ul li:hover h3 {
    padding-bottom: 0;
}
	#serviceWrap ul li:hover h5 {
    padding-bottom: 15px;
}
	#slogn .wrap a:hover {background-color: #912a2a;border: 1px solid rgb(0 0 0 / 0%);}
	#bookWrap ul li .hoverBox a { padding: 0 23px; font-size: 16px; }
}
@media screen and (max-width:1024px) {
	#situationWrap .info { padding: 130px 0; }
	#serviceWrap .tit h3 { letter-spacing: -5px; font-size: 130px; }
	#serviceWrap {padding: 20px 0 10px;}
	#serviceWrap:after { zoom: 60%; bottom: -130px; z-index: 9; }
	#serviceWrap ul li {}
	#serviceWrap ul li p {padding-bottom: 6px;letter-spacing: 0;font-size: 12px;}
	#NPBox .news-item h3 { width: 55%; }
	.deck01 {}
	#serviceWrap section {padding: 0;width: 90%;margin: auto;display: flex;flex-direction: column;align-items: center;}
	#serviceWrap {/* padding: 0 0 10px; */}
	.deckTop {}
	#slogn .wrap { display: flex; flex-direction: column; }
	#slogn .wrap a { margin: 10px 0; width: 80%; height: 70px; line-height: 70px; }
	#slogn { padding: 100px 0; }
	.deckTop p {padding: 0;}
	.deckTop p font{
    font-size: 34px;
}
	.deckTop {}
	.deckTop-m { zoom: 80%; }
	#serviceWrap .tit { margin: 20px auto; width: 100%; }
	.deckTop-m p { text-align: center; }
}
@media screen and (max-width:960px) {

	.deckTop h3 { margin-bottom: 10px; }
	#NPBox .news-content-title { margin-right: 15px; }
	#NPBox .news-item .more { padding-right: 0; }
	#NPBox .news-item h3 { width: 50%; }
	#serviceWrap ul li .one {padding: 0px 0 0;top: 30px;left: 20px;}
	#serviceWrap ul li h5 {padding-bottom: 0;font-size: 18px;}
	#serviceWrap ul li h3{
    font-size: 13px;
}
	#serviceWrap ul {width: 100%;display: flex;flex-wrap: wrap;flex-direction: column;align-items: center;}
	#serviceWrap ul li {margin: 10px auto;width: 80%;}
	#products ul li .info .productPhoto{
    margin: 5px;
}
	#products ul li .info h3 a{
    font-size: 18px;
    height: 52px;
}
	#products ul li .info p{
    font-size: 14px;
}
	#products .deck01{
    padding-bottom: 20px;
}
}
@media screen and (max-width:768px) {
	#photoList .bd ul li { margin: 5px 0; }
	#prodInfo .box, #prodInfo .box:first-child, #prodInfo .box article { width: 100%; }
	#prodInfo .box .list:last-child { text-align: center; }
	#prodInfo .box .list:last-child p { margin-top: 10px; width: 32%; }
	#situationWrap .info p { font-size: 38px; }
	#situationWrap { background-position: 50% 60%; border-bottom: 30px solid #1d2087; }
	#NPBox .news-item .more p { display: none; }
	#aboutWrap #treeCanvas { top: 0; left: -130px; }
}
@media screen and (max-width:640px) {
	#newBox { padding: 0 16px; }
	.deckTop p {margin: 0 0 4px;}
	#serviceWrap ul li:after { background: none; }
	#NPBox .new-slider { width: 100%; }
	#NPBox .news-item h3 { width: calc(100% - 110px); }
	#NPBox .news-content-title { display: none; }
	#NPBox .sectionTitle { margin-bottom: 0; padding: 5px 0 5px 16px; background: #79551a; color: #fff; }
	#NPBox .sectionTitle .btn a, #NPBox .sectionTitle .btn a i { color: #fff; }
	#NPBox { margin-bottom: 20px; }
	.btnBox{
	    position: relative;
	    bottom: 0;
	}
	.contline .bomitem a{
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    padding: 18px 3px;
	}
	.contline .bomitem img{
    width: 45px;
    margin-bottom: 9px;
}
}
@media screen and (max-width:540px) {
	#NPBox .sectionTitle .btn a { font-size: 14px; }
	#serviceWrap ul li{
    width: 100%;
}
}
@media screen and (max-width:480px) {
	#situationWrap .info { padding: 70px 0; }
	#situationWrap .info p { font-size: 25px; }
	#serviceWrap:before { top: -100px; right: 90px; zoom: 55%; }
	#serviceWrap:after { bottom: -210px; zoom: 40%; }
	#serviceWrap .tit h3 { font-size: 90px; }
	#NPBox .news-item { display: block; }
	#NPBox .news-item .date, #NPBox .news-item h3 { display: block; }
	#NPBox .news-item h3 { width: 100%; }
	#NPBox .news-item .date::after { display: none; }
}
@media screen and (max-width:450px) {
	#photoList .bidPhoto,#photoList .bd { width: 100%; }
	#photoList .bd { display: none; }
	#product-article ul.tabs li a { padding: 0 10px; font-size: 14px; }
	#prodInfo .box .list:last-child p a { font-size: 14px; }
}
@media screen and (max-width:380px) {
}