@charset "utf-8";

main {}
main article { padding: 100px 0;}

@media (max-width:991px){
    main article { padding: 90px 0;}
}
@media (max-width:768px){
    main article { padding: 70px 0;}
}
@media (max-width:576px){
    main article { padding: 50px 0;}
}

[data-scroll] {
  opacity:0; transform:translateY(100px); transition: 1s; transition-delay:.3s ;
}
.animated{
  opacity: 1; transform:translateY(0);
}


main .quick { }
main .quick .flex { min-height:157px }
main .quick .flex a { display: block; flex:1; padding: 70px 10px 5px; border-right: 1px solid #d7d7d7; background-repeat: no-repeat; background-position: top center;  text-align: center; transition: .2s; }
main .quick .flex a:last-of-type { border-right: none;}
main .quick .flex a h3 { padding: 0 0 10px; font-size: 20px; font-weight: 500; color: #000; }
main .quick .flex a p { font-size: 16px; color: #666;  line-height: 1.5;}
main .quick .flex a:nth-of-type(1) { background-image: url('/img/dw/ico_notice.png');}
main .quick .flex a:nth-of-type(2) { background-image: url('/img/dw/ico_pds.png');}
main .quick .flex a:nth-of-type(3) { background-image: url('/img/dw/ico_cert.png');}
main .quick .flex a:nth-of-type(4) { background-image: url('/img/dw/ico_location.png');}
main .quick .flex a:nth-of-type(1):hover { background-image: url('/img/dw/ico_notice_h.png');}
main .quick .flex a:nth-of-type(2):hover { background-image: url('/img/dw/ico_pds_h.png');}
main .quick .flex a:nth-of-type(3):hover { background-image: url('/img/dw/ico_cert_h.png');}
main .quick .flex a:nth-of-type(4):hover { background-image: url('/img/dw/ico_location_h.png');}
main .product { background: url('/img/dw/p_bg.jpg');}

main .product .title { padding: 0 0 40px; text-align: center;}
main .product .title h2 { padding: 0 0 25px; font-size: 48px; font-weight: 500;}
main .product .title p { font-size: 16px; line-height: 1.9;}
main .product .flex { margin: 0 -15px; min-height:}

main .product .flex li { flex:1; position: relative; margin: 0 15px; background: #fff;}
main .product .flex li a { display: block; position: relative;}
main .product .flex li a .img {}
main .product .flex li a .img img { width: 100%;}
main .product .flex li a .txt { padding: 30px 10px 25px; text-align: center;  }
main .product .flex li a h3 { padding: 0 0 10px; font-size: 24px; font-weight: 500;}
main .product .flex li a p span { display: block;}
main .product .flex li a:after { content:''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid #0e246c; opacity: 0; transition: .2s;}
main .product .flex li a:hover:after { opacity: 1;}
main .product .link { display: flex; margin: 50px 0 0;}
main .product .link a { display: block; flex:1; position: relative; padding: 0 50px; height: 80px; font-size: 22px; font-weight: 500; color: #fff; line-height: 80px;}
main .product .link a:first-of-type { background: #182b6c; }
main .product .link a:last-of-type { background: #1b1b1b; }
main .product .link a:after { content:"\e90b"; display: block; position: absolute; top: 0; right: 50px; font-family: xeicon !important; font-size: 47px; }
@media (min-width:992px){
	main .product .flex li:nth-of-type(1) { transition-delay:.4s }
	main .product .flex li:nth-of-type(2) { transition-delay:.6s }
	main .product .flex li:nth-of-type(3) { transition-delay:.8s }
}


@media (max-width:991px){
    main .product .flex { margin: 0 -10px;}
    main .product .flex li {  margin: 0 10px;}
    main .product .flex li .txt { font-size: 16px;}
    main .product .link a { padding: 0 40px;}
    main .product .link a:after { right: 40px;}
}
@media(max-width:768px){
    main .product .title { padding: 0 0 30px; }
    main .product .title h2 { padding: 0 0 20px; font-size: 42px;}
    main .product .flex { flex-wrap: wrap; margin: 0;}
    main .product .flex li { flex:none; margin:0 0 20px; width: 48.5%;}
    main .product .link a { padding: 0 25px; font-size: 18px;}
    main .product .link a:after { right: 25px; font-size: 32px;}    
}
@media (max-width:576px){
    main .quick .flex { flex-wrap:wrap; margin: 0 0 -40px;}
    main .quick .flex a { position: relative; flex:none; margin: 0 0 40px; width: 50%;}
    main .quick .flex a:nth-of-type(2n) { border-right: none;}
    main .quick .flex a:nth-of-type(-n+2):after { content:''; display: block; position: absolute; left: 50%; bottom:-20px; transform: translateX(-50%); width: 82%; height: 1px; background: #d7d7d7;}
    main .product .title { padding: 0 0 25px;}
    main .product .title h2  { padding: 0 0 15px; font-size: 38px;}
    main .product .title p { font-size: 15px; line-height: 1.5;}
    main .product .title p br { display: none;}
    main .product .link { margin: 30px 0 0;}
    
    main .product .link a { padding: 0 14px; height: 60px; line-height: 60px; font-size: 16px; text-align: center;}
    main .product .link a:after {display: none;}
}
@media (max-width:480px){
    main .product .flex li { width: 100%;}
}
@media (max-width:400px){
    main .product .title h2 {font-size: 31px;}
    main .product .link { flex-wrap:wrap; margin: 30px 0 -15px;}
    main .product .link a { flex:none; margin: 0 0 15px; width: 100%;}
}