@charset "utf-8";
/* CSS Document */
.side, .main{padding:1em;}
.innerhtml{line-height:200%;}
.content{padding:0 0 3em 0;}
/*nav*/
#header .nav .page{padding:0 45px;}
.nav ul li a{color:#fff; font-size:16px; font-weight: bold;}
.nav ul li a span{font-size:13px; font-weight: normal; color:#ccc;}
.nav ul li a:hover,.nav ul li a.hit{background:linear-gradient(#ccc 2%,#fff 2%); color: #016414; }
.nav ul li a.icon{padding-left:0.3em; padding-right:0.3em;}
.nav ul li a.hit{background:#006699; color: #fff; border-radius: 0.3em 0.3em 0 0;}
#header{transition:.3s; border-top:5px solid #0a9633;}
#header.show{background:linear-gradient(rgba(255,255,255,0.6) 60%,rgba(255,255,255,0)); padding-top:0;}
.logo img{filter:drop-shadow(0 0 5px rgba(255,255,255,0.4));}
#header .rr{text-align:right; font-size:12px;}
#header .rr a{display:inline-block; color:#333; border-right:1px solid #999; padding:0 1em;}
#header .rr a:hover{ color: blue;}
/*search*/
.search{padding-top:15px; padding-right:15px;}
.search input{height:28px;  color:#666; display: inline-block; outline: none; float:right; width:235px; padding:0 2px;}
.search div{width:40px; height:28px; display: inline-block; background:#ccc; text-align: center; float:right;}
/*default use*/
.page{padding:20px 15px;}
.d-area, .d-area2{padding:15px;}
.d-area2 .list{padding-left:0; padding-right:0;}
.d-area2 .list a{border:none;}
.d-area2 .list a:hover .summary{color:#336699;}
.d-area2 .list a:hover{border:none;}
.d-area2 .list a:hover h3.subject{color:#990033;}
.d-area2 .list h3.subject{border-bottom:1px solid #990033; color:#990033; font-size:14px; font-weight: bold;}
.d-area2 .list .summary{color:#666;}
.d-area .app{border:1px solid #ccc; margin-bottom:1em; font-size:14px;}
.d-area .app .col-5{line-height:0;}
.d-area .app .col-7{padding:0.5em; line-height: 160%; color:#666; font-size:14px;}
.d-area .app h3{margin:0; color:#000; font-size:18px; border-left:5px solid #006600; padding-left:1em;}
.d-area .app p.more{margin:0;}
.d-area .app p.more a:hover{background:#006600;}
/*content*/
.side{float:right;}
.sidetit{font-weight:bold; color:#fff;  background:linear-gradient(#0a9633 50%,#016414 50%); padding:0.4em 30px; position:relative; margin:0; font-size:18px; }
.sidetit::before{content:""; left:0.3em; width:20px; height:20px; background:#fff; display:inline-block; position:absolute; top:50%; transform:translateY(-50%);}
.sidetit::after{content:""; position:absolute; width:10px; height:10px; background:linear-gradient(45deg,#0a9633 50%,rgba(255,255,255,0) 50%); left:7px; top:38%; transform:rotate(225deg);}
.sidetit.qabtn{border-radius:0.3em; background:linear-gradient(#cc0033 50%,#990033 50%);}
.sidetit.qabtn::after{background:linear-gradient(45deg,#cc0033 50%,rgba(255,255,255,0) 50%);}
.submenu{border:1px solid #ccc; border-radius:0.3em; margin-bottom:1em;}
.submenu li a{position:relative;}
.submenu li a::before{content:""; width:10px; height:10px; background:linear-gradient(45deg,#ccc 50%,rgba(255,255,255,0) 50%); position:absolute; left:0; top:15px; transform:rotate(225deg);}
.tit{font-weight:bold; color:#000;  background:linear-gradient(#efefef 50%,#f5f5f5 50%); padding:0.2em 30px; position:relative; margin:0; font-size:18px; border-bottom:3px solid #009933; margin-bottom:1em;}
.tit::before{content:""; left:0.3em; width:16px; height:16px; background:#557055; display:inline-block; position:absolute; top:50%; transform:translateY(-50%); border-radius: 3px;}
.tit::after{content:""; position:absolute; width:6px; height:6px; background:linear-gradient(45deg,#fff 50%,rgba(255,255,255,0) 50%); left:8px; top:40%; transform:rotate(225deg);}
.list.application .col-7, .list.application .col-5{padding:1em;}
h1.subject{font-size:24px;}
p.more{text-align:right;}
p.more a{display:inline-block; padding:0.2em 1em; font-size:14px; color:#fff; background:#009933;}
/*list*/
.list{padding:1em;}
.list h3.subject{margin:0; color:#000;}
.list a{width:100%; diaplay:block; float:left; color:#666; border:1px solid #ccc;}
.list a:hover{color:#014283; border:1px solid #009933;}
.list a:hover h3.subject{color:#016414;}
.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:0;}
.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; 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;}
/*d-area*/
.d-area .list h3.subject{margin:0; padding:1em; display:block; text-align: center; min-height:5em; color:#000; background:linear-gradient(#ccc,#fff); border-left:10px solid #009933; position:relative;}
.d-area .list h3.subject::before{content:""; position:absolute; width:8px; height:8px; background:linear-gradient(45deg,#fff 50%,rgba(255,255,255,0) 50%); left:-12px; top:45%; transform:rotate(225deg);}

/*application*/
.list.application{padding-bottom:2em;}
.list.application a{border:none;}
.list.application a:hover img{transform:scale(1, 1);}
.list.application h3.subject{font-weight:bold; color:#000;  background:linear-gradient(#efefef 50%,#f5f5f5 50%); padding:0.2em 30px; position:relative; margin:0; font-size:18px; border-bottom:3px solid #009933;}
.list.application h3.subject::before{content:""; left:0.3em; width:16px; height:16px; background:#557055; display:inline-block; position:absolute; top:50%; transform:translateY(-50%); border-radius: 3px;}
.list.application h3.subject::after{content:""; position:absolute; width:6px; height:6px; background:linear-gradient(45deg,#fff 50%,rgba(255,255,255,0) 50%); left:8px; top:40%; transform:rotate(225deg);}
.list.application .col-7, .list.application .col-5{padding:1em;}
/*prolist*/
.list.prolist{padding-bottom:3em;}
.list.prolist div.col-9{padding-left:2em;}
.list.prolist h3.subject{color:#990033; background:linear-gradient(#efefef 50%,#f5f5f5 50%); padding:0.2em 0.5em; position:relative;}

/*prodetail*/
.download{margin:0; padding:0;}
.download div{border-radius:0.5em 0.5em 0 0; color:#fff; background:#016414; font-size:14px; min-height:auto; font-weight: bold; padding:0.3em 1em; margin-bottom:0.5em;}
.download li{line-height:160%; font-size:14px; cursor:pointer; color:#336699; line-height: 180%; padding:1em; position:relative;}
.download li::before{content:url(images/pdf.png); width:16px; height:auto; vertical-align: middle; margin-right:0.5em;}
.download li:hover{color:#3366ff; text-decoration: underline;}
.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;}

/*footer*/
#footer{font-size:15px; color:#333; background:#f5f5f5; word-break: break-all; line-height: 1.5em; padding:1em 0 0 0;}
#footer .col-3{border-left:1px solid #ccc;}
#footer .col-9{text-align:left;}
.copyright{background:linear-gradient(#0a9633 50%,#016414 50%); color:#fff; font-size:14px; padding:0; text-align: right;}
.copyright .page{padding:0.3em 0;}

#footer a{ color:#333;}
#footer a:hover{ color:#006600;}