@import url('https://fonts.googleapis.com/css2?family=Roboto&family=Anton&display=swap');
article h1,article h2,article h3,article h4,article h5,article h6{font-family: "Anton"; text-transform: capitalize;}
article p{font-family: "Roboto";margin-bottom: 15px;line-height:1.5rem}
article .center{text-align: center;}
article img{margin-top:30px}
article .flex img{margin-top:0}
article h2{font-size: 1.8rem;line-height: 2.8rem;color: #333; position: relative;margin-bottom: 15px;}
article h2 span{color: #014489;}
article h2.dot::after{display:block;content: ". . . . . .";color: #014489;}
article .t.flex{justify-content: space-between;align-items: center;}
article .ft{align-items: center;justify-content: space-between;margin-bottom: 30px;}
article .ft .l{font-size: 1rem; color: #014489;}
article .ft .r{width: 30px;height: 8px;border:1px solid #014489;border-radius: 4px;}
article .machine-icon{position: relative;width: 160px;}
article .machine-icon img{width: auto !important;margin: 0 auto;}
article .machine-icon .bg{position: absolute;right: 0;bottom: 20px;}
article .machine-icon .machine{position: relative;}
article .dashed{border-bottom:1px dashed #014489;padding-bottom: 10px;margin-bottom: 40px;}
article .line-bg1{background: linear-gradient(-45deg, #ffffff 20%, #eaf3fa);}
article .line-bg2{background: linear-gradient(135deg, #ffffff 20%, #b5d7ff);}
article .solid{position: relative;}
article .solid::after{display: block;content: "";width: 60px;height: 2px;background-color: #014489;left: 0; bottom: 0;}
article ul li{margin-bottom: 10px;}
article ul li .img{margin-bottom: 10px;}

article .video .m-video{position: relative;padding-top: 56.2%;margin-top:30px}
article .video iframe{position: absolute;width: 100%;height: 100%;left: 0;top: 0;}

.right>div{border-radius: 10px;overflow: hidden;box-shadow: 0 0 5px #ddd;margin-bottom: 20px; padding: 20px;background: #fff;}
.right .contact-r a{display: block;width: 100%;line-height: 30px;text-align: center;margin-top: 10px; border: 1px solid #014489; color: #fff;border-radius: 15px;background-color: #1e46b7;}
.right .contact-r a.btn2{background-color: #fff;color: #014489;}
.right .contact-r a:hover{background-color: #1e46b7;color: #fff;transition: all .3s;}
.right .suppl{background: linear-gradient(to bottom,#b5d7ff,#ffffff 30%);padding-top: 0;}
.right .suppl p.t{text-align: center;background-color: #ffffff94;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;color: #1e46b7;font-weight: bold;margin: 0 auto 10px;width: 150px;}
.right .suppl p.b{font-weight: bold;margin-bottom: 5px;}
.right .suppl ul.flex{justify-content: space-between;}
.right .suppl li{margin-bottom:10px}
.right .suppl ul.flex p{font-size:.9rem;line-height:1.5rem;}
.right .suppl .suppl_bt.flex{justify-content: space-between;}
.right .suppl .suppl_bt a{display:inline-block;padding:5px 10px;font-size: 14px; font-weight: bold; border-radius: 15px;border: 1px solid #ddd;color: #333;margin-top: 10px;}
.right .suppl .suppl_bt a.btn2{color: #1e46b7;border: 1px solid #1e46b7;}
.right .suppl .suppl_bt a:hover{background-color: #1e46b7;color: #fff;transition: all .3s;}

.pan{padding: 20px 0;}
.pan span{display: block;margin-bottom: 10px;background-color: #f5f5f5;padding:10px}
.pan span a{color: grey;}
.map-txt.container{margin: 80px auto 40px;}
.map-txt h2{text-align: center;font-size: 2rem;line-height: 2.5rem;color: #333;font-family: "Anton";margin-bottom:20px}
.map-txt h2 span{color: #014489; font-size: 3rem;}
#map{width: 100%;padding-top: 40%;}
#map .gm-style-iw-d{max-width: 200px;}

.otline{display:flex;flex-wrap: wrap; margin:0 auto;width:100%;max-width:750px;justify-content:space-around}
.otline>div{width:49%;border-radius:15px;overflow: hidden;margin-bottom: 2rem;}
.otline dl{transition:all .2s;position: relative;}
.otline dl:hover{box-shadow:0 0 8px 1px #ccc}
.otline dl:hover dt{background:rgba(0,0,0,.8)}
.otline dl dd{position: absolute;left: 0;top: 0;height: 100%;}
.otline dl dd img{width: auto;height: 100%;}
.otline dl dt{box-sizing:border-box;padding:20px;width:100%;height:100%;position:relative;z-index: 1; background:rgba(0,0,0,.5);color:#fff;transition:all .2s}
.otline dl h6{font-size:1.2rem;line-height:2.8rem}
.otline dl p{margin-bottom:20px;color:#fff}
.otline dl a{display:inline-block;padding:0 25px;border:1px solid #fff;border-radius:20px;color:#fff;line-height:40px;transition:all .2s}
.otline dl a:hover{border-color:#77b917;background:#77b917}

@media (max-width:768px){
    .otline>div{width: 100%;max-width: 380px;}
    article ul.flex li{width:48%}
    article ul li.flex{width: 48%; max-width: 340px;}
    article h2{font-size:1.5rem;line-height:1.5}
}