@charset "utf-8";
/* CSS Document */
.side, .main{padding:1em;}
.innerhtml{line-height:200%;}
.content{padding:3em 0;}
/*nav*/
.nav ul li a{color:#000; font-size:16px; padding: 2.5em 1.5em;transition:.3s;}
.nav ul li a:hover{color: #fff;}
.nav ul li a.icon{padding-left:0.3em; padding-right:0.3em; display:inline-block; color:#999;}
.nav ul li a.icon:hover{color:#1960ae;}
#header{transition:.3s; background:#fff;border-top: 0.3em solid #1960ae;}
#header .page{padding:0;}
#header.show{background:rgba(255,255,255,0.8); padding-top:0;box-shadow: 2px 2px 7px rgba(0,0,0,0.6);}
.logo{padding: 1.2em 0 0 0;transition:.3s;}

.show .nav ul li a{padding: 2.3em 1.2em;}
.show .nav ul li a.icon{padding-left:0.3em; padding-right:0.3em;}
.logo img{filter:drop-shadow(0 0 5px rgba(255,255,255,0.4));}
.nav ul li a.hit{background:#006699; color: #fff; border-radius: 0.3em 0.3em 0 0;}
#defaultimg{position: relative;}




/*default use*/
.d-area{background: url(images/d1bg.jpg)top left no-repeat; padding: 8em 0;}
.d-area hr{border:1px solid #2a518d;}
.d-area .list a{background: none;box-shadow:none;text-align: center;}
.d-area .list h3{font-weight: bold;font-size: 20px;color: #000;margin: 0.7em 0 0.5em 0;}
.d-area .list p{font-size: 13px;margin: 0;}
.d-area2{line-height: 0; background:url(images/d2bg.jpg)top left no-repeat; background-size: cover; z-index: -3; overflow: hidden; position:relative;}
.d-area2::before{content:""; width:10%; height:90%; transform:skewX(10deg); display:block; position:absolute; left:35%; top:5%; background:rgba(200,200,200,0.3); z-index:-10;}
.d-area2 .rr{float: right;color: #fff; overflow: hidden;position: relative; transform: skewX(10deg) translateX(56px); background:0px 0px 15px rgba(0,0,0,0.3);}
.d-area2 .rr h4{font-size: 35px;font-weight: normal; line-height: 150%;}
.d-area2 .rr p{line-height: 170%;}
.d-area2 .rr .rrcontent{z-index: 100; transform: skewX(-10deg); padding: 2em 4em 4em 4em; background: url(images/d2bg2.jpg)top left no-repeat;background-size: cover;}
.d-area2img {position: fixed;top: 0;left: -8%; z-index: -2; text-align: right;transform: skewX(-10deg);}
.d-area2img img{width: 120%;}
.d-area3{background: url(images/d3bg.jpg)top left no-repeat;padding: 3em 0;background-size: cover;}
.d-area3 h4.tit2::before{content: "";position: absolute;height: 4px; width: 6em;background: linear-gradient(90deg,#eb6100 40%,#1960ae 40%);bottom: -12px;}
.d-area3 .list a{background:none;box-shadow:none;}
.d-area3 .list h3{font-size: 21px;color: #000;font-weight: bold;padding-bottom: 10px;border-bottom: 1px solid #a2b0b6;}
.d-area3 .list div{padding: 1em;}
.d-area3 .list div p.more{font-weight: bold;color: #9e9e9e;text-align: left;}
.d-area3 .col-7{padding: 2em 0 0 0;}
.d-area3 .list div{color: #000;}
/*content*/
#defaultimg h1.tit{position:absolute;color: #fff; text-align: center;top:60%;width: 100%;font-size: 45px;letter-spacing: 5px;text-shadow: 4px 2px 4px rgba(0,0,0,0.8);height: 100%;margin: 0;}
.sidetit {font-weight: normal;color: #fff;background: #666;padding: 0.7em 0.5em;border-radius: 0.5em;margin-top: 0;position: relative;}
.sidetit::before { content: "";width: 15px;height: 15px;position: absolute; bottom: -5px;right: 20px; background: linear-gradient(45deg,rgba(0,0,0,0) 50%,#666 50%);transform: rotate(135deg); position: absolute;}
h1.subject{font-size:24px;}
h4.tit{font-size: 25px;color: #2a4c87;margin: 0;}
h4.tit span{color: #000;}
p.tit{text-align: right;font-size: 15px;margin: 0;padding-top: 13px;}
p.tit a{color: #000;}
p.tit a:hover{color: #2a4c87;}
p.tit i{color: #d54726;margin-left: 2px;}
h4.tit2{font-size: 25px;color: #000;margin: 0;font-weight: bold;text-align: center;position: relative;}
.product .list a{background: none;border: 1px solid #efefef;text-align: left;box-shadow:none;padding: 0;}
.product .list a:hover{background: none;border: 1px solid #91c5ff;box-shadow: 0 0 5px rgba(0,0,0,.1);}
.product .list a:hover h3.subject{border-left: 2px solid #2c91ff;}
.product .list figure {padding: 0;}
.product .list h3.subject {padding: 0.5em; font-size: 105%;border-left: 2px solid #ccc; margin: 0.5em 0 0 0;font-weight: normal;color: #000;}
.product .list div{padding: 0;}

/*list*/
.list{padding:1em;}

.list h3{font-weight:normal; margin:0; color:#226EB5;}
.list a{width:100%; diaplay:block; float:left; color:#666; background:linear-gradient(45deg,#f5f5f5 30%,#e6e5db 50%,#f5f5f5 60%); box-shadow: 0 0 10px rgba(0,0,0,0.2); padding:10px;}
.list a:hover{color:#014283; box-shadow: 0 10px 20px rgba(0,0,0,0.2); background:linear-gradient(45deg,#f5f5f5 0%,#e6e5db 10%,#f5f5f5 20%);}
.list figure img{transition:.3s;}
.list a:hover img{transform:scale(1.05, 1.05);}
.list a:hover div{color:#333;}
.list a:hover p.more{color:#f00;}
.list a:hover figcaption{opacity:1;}
.list figure{diaplay:block; line-height:0; overflow: hidden; position:relative;}
.list figcaption{position:absolute; top:0; left:0; width:100%; height:100%; opacity:1; text-align: center; color:#fff; background:rgba(1,66,131,0.6); z-index: 100; font-size: 14px; padding-top:30%; opacity:0; transition:.3s;}
.list div{padding:0.3em; min-height: 3em; font-size:14px; color:#666; line-height: 160%;}
.list div p.more{text-align:right; margin:0; color:#666; font-size:12px;}
.list figcaption span{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
/*gallery*/
.list.gallery a{padding:0; background:#fff;}
.list.gallery div{padding:0.3em 1em;}
.list.gallery h3.subject{color:#333;}
.list.gallery a:hover h3.subject{color:#f00;}
/*prodetail*/
.list.propic a{border:1px solid #ccc; background:#fff; overflow:hidden; line-height: 0;}
.prodetail h1.subject{font-size:22px; margin-top:0; color:#226EB5;}
.prodetail .col-6, .prodetail .col-12{padding:0 1em;}
.prodetail .col-6 img{border:10px solid #fff; filter: drop-shadow(0 -7px 5px rgba(0,0,0,0.1));}
.prodetail h4.subtit{margin-bottom:0.5em; color:#999; border-bottom:1px solid #ccc;}
.prodetail h4.subtit span{display:inline-block; padding:0.3em 1em; border-radius:0.5em 0.5em 0 0; border:1px solid #ccc; border-bottom:none; transform:translateY(2px); background:#fff;}
.prodetail .innerhtml img{border: 0;box-shadow: 0;}
.prodetail .innerhtml .left{background: #E5E0DD;padding: 1em;text-align: center;}
.prodetail .innerhtml .left p{text-align: center;color: #828282;font-family: Lato,"Helvetica Neue",Helvetica,Arial,sans-serif;}
.prodetail .innerhtml ul{list-style:none;padding: 0;}
.prodetail .innerhtml ul li{border-bottom: 1px solid #E5E0DD;padding: 1em;}
.prodetail .innerhtml ul li div{width: 50%;float: left;padding-right: 5px;}
.prodetail .innerhtml h4{width: 100%;height: auto;float: left;color: #666;font-weight: normal;font-size: 18px;padding-left: 0.5em;border-left: 5px solid #ccc;}

/*faq*/
.qa .box{display: none;}
.qa .box-open{display:block;}

/*footer*/
#footer{font-size:13px; color:#fff; background:#1960ae; word-break: break-all; line-height: 1.5em; padding-top:3em;line-height: 170%;}
#footer .col-20,#footer .col-3,#footer .col-21{padding: 0 1em;}
#footer p{margin: 0;}
#footer ul{margin: 0;padding:0;list-style: none;display: inline;}
#footer ul li{width: 50%;float: left;}
#footer ul li a{color: #fff;}
#footer ul li a:hover{color: #ffbe10;}
#footer .col-21{text-align: right;}
.gotop{z-index:300;position: fixed;right: 3%;bottom:3%;}
.gotop a{color: rgba(123,164,208,0.8);}
@media screen and (max-width:1686px){/*desktop*/
	
	.d-area2{background:url(images/d2bg.jpg) no-repeat left center; background-size:100%; z-index: -3;overflow: hidden;}
}

@media screen and (max-width:1280px){/*desktop*/
	
	.page{padding:0 3%;}
	
}
@media screen and (max-width:960px){/*desktop-small pad*/
	.nav ul li a{padding-left:0.3em; padding-right:0.3em;}
	.d-area2 .rr{transform: skewX(0deg) translateX(0px);}
	.d-area2 .rr .rrcontent{transform: skewX(0deg);}
}
@media screen and (max-width:767px){/*phone*/
	#header{background:rgba(255,255,255,0.7);border-top: 0.5em solid #1960ae;}
	.nav ul li a{color:#ccc;padding: 1em;}
	.nav ul li{ border-bottom:1px solid #666;}
	.page{padding:0 3%;}
	.logo{ padding: 10px 0 10px 5px;}
	#footer .col-20,#footer .col-3,#footer .col-21{padding: 1em 1em 0 0em;}
	.d-area {padding: 3em 0;}
	.d-area2 .rr{transform:none;}
	.d-area2 .rr .rrcontent{transform:none;padding: 1em;}
	.d-area2img {display: none;}
	.d-area3 .list a{background:rgba(255,255,255,0.4);}
	#footer {padding-top: 1em;}
	#defaultimg h1.tit{ font-size: 30px;}
	
	
	
}