/**************************************************
	Drag Effect
**************************************************/
::selection {background:#004438; color:#ffffff; text-shadow:none;}
::-moz-selection {background:#004438; color:#ffffff; text-shadow:none;}
::-webkit-selection {background:#004438; color:#ffffff; text-shadow:none;} 
::-o-selection {background:#004438; color:#ffffff; text-shadow:none;}


/**************************************************
	CSS
**************************************************/
#wrap{position: relative; width: 100%; margin: 0 auto; min-width: 1260px;}
.layFull{width: 100%; margin: 0 auto; position: relative;} 
.layGrid{width: 1260px; margin: 0 auto; position: relative;}
.flexBox{display: flex;}
.flexSpbet{justify-content: space-between;}
.flexRowre{flex-direction: row-reverse;}
.flexBox .flexItem{padding: 0 15px; box-sizing: border-box; position: relative;}
.flexItem9 {width: 75%;}
.flexItem8 {width: 66.66666667%;}
.flexItem7 {width: 58.33333333%;}
.flexItem6 {width: 50%;}
.flexItem5 {width: 41.66666667%;}
.flexItem4 {width: 33.33333333%;}
.flexItem3 {width: 25%;}
.flexItem20{width: 20%}
.flexItem img{max-width: 100%;}
.imgFull img{width: 100%;}


/* HEADER */
#header{padding: 0px 0; background-color: #fff;border-bottom: 1px solid #ddd;}
#logo{padding-top: 12px; padding-bottom: 12px;}
#logo > a{display: block;}
#nav{padding: 0;}
#nav > li > a{display: block; padding: 0 15px; font-size: 18px; font-weight: 600; line-height: 100px;}
#nav > li:hover a{background-color: #0d1d41; color: #fff}
.f-nav{position: fixed; top: 0; left: 0; z-index: 999;}

/* mainSlide */
#mainVisual{background-color: #ddd; width: 100%; height: 840px; position: relative; overflow: hidden;}
#mainVisual .mainSlide{height: 100%;}
#mainVisual .swiper-button-prev, 
#mainVisual .swiper-button-next{color: #fff; transform: translateY(-50%);}
#mainVisual .swiper-pagination{bottom: 15px; text-align: center; width: 100%;}
#mainVisual .swiper-pagination span{margin: 0 5px; width: 30px; height: 6px; background: #fff; border-radius: 6px; opacity: 1;}
#mainVisual .swiper-pagination span.swiper-pagination-bullet-active{background-color: #0d1d41;}
#mainVisual .layGrid{height: 100%; }
#mainVisual .layGrid .main-txt{width: 390px; position: absolute; top: 50%; left: 10px; transform: translateY(-50%);}
.main-txt h3{font-size: 40px; font-weight: 600; color: #004438; line-height: 50px; margin-bottom: 20px;}
.main-txt p{font-size: 17px; color: #525252;}
#slide1{background: url('../images/main_slide01.jpg') no-repeat center center; background-size: cover;}
#slide2{background: url('../images/main_slide02.jpg') no-repeat center center; background-size: cover;}


/* About Us */
.article{padding: 160px 0;}
#abou p{padding: 10px 0 20px;}
#abou > .flexBox{align-items: center;}
.cateTit{font-size: 44px; font-weight: bold; line-height: 42px; color: #0d1d41; font-family: 'Roboto Slab'; margin-bottom: 50px;}
.cateTit.colorWhite{color: #fff;}
.cateTit.ac{text-align: center;}
.txtTit{font-size: 28px; font-weight: 600; color: #0d1d41; line-height: 40px; letter-spacing: -1.5px; }
.abou01{margin-bottom: 70px;}

/* technology */
#tech{background: url(../images/tech_bg.jpg) no-repeat center center; background-size: cover; }
.techBox{background-color: #fff; padding: 20px; min-height: 308px; box-sizing: border-box;}
.techBox h3{color: #0d1d41; font-size: 22px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #0d1d41; height: 90px; box-sizing: border-box;}
.techBox p{letter-spacing: -0.4px; line-height: 24px;}

/* products */
.proTitle{padding: 0 10px;}
.proTitle .flexBox{background-color: #ecebf0; overflow: hidden; align-items: center;}
.proTitle .flexItem8{padding: 0}
.proTitle .flexItem4{padding: 0 50px;}
.proTitle ul li{text-align: right; font-size: 24px; font-weight: 500; line-height: 42px;}
.proList .flexBox{margin-top: 70px;}
.proImg{text-align: center;}
.proTxt{color: #004438; font-size: 28px; line-height: 38px; margin-bottom: 20px;}
.hashTag li{border: 1px solid #004438; display: inline-block; border-radius: 36px; height: 36px; padding: 0 20px; line-height: 36px;color: #004438; font-size: 14px; font-weight: 600; margin-right: 10px; margin-bottom: 30px;} 
.proList p{border-top: 1px solid #5e958a; padding: 30px 0 50px;}
.weight{color: #004438; font-size: 24px; font-weight: bold;}
.proList .flexRowre{text-align: right;}

/* banner */
#bnr{padding: 180px 0; background: url(../images/bnr.png) no-repeat center center; background-attachment: fixed; background-size: cover;}
#bnr h3{padding: 0 20px; width: 70%; font-size: 32px; line-height: 42px; font-weight: 600; color: #333; margin-bottom: 20px;}
#bnr p{padding: 0 20px; width: 70%;}


#prod .tab{width: 100%; position: relative; margin-bottom: 30px;}
#prod .tablinks{width: 25%; padding: 0 15px; float: left; box-sizing: border-box;}
#prod .tab .tablinks {background-color: #fff; border: 0; cursor: pointer;}
#prod .tab .tablinks span{color: #0d1d41; font-size: 18px; font-weight: 600; border: 1px solid #0d1d41; display: block; width: 100%; padding: 10px 5px; box-sizing: border-box;}
#prod .tab .tablinks.active span{background-color: #0d1d41; color: #fff}
.tabcontent h4{font-size: 22px; line-height: 30px; font-weight: bold; text-align: left; color: #0d1d41; margin-bottom: 15px;}
.tabcontent p{text-align: left;}
.proImg{margin-bottom: 50px;}
.proBot{padding: 0 15px; margin-bottom: 40px;}
.proList{text-align: center; color: #333; font-weight: 600;}
.proList span{display: block; margin-top: 10px;}
.tabcontent {display: none;}
	


#movi{background: url(../images/movi_bg.jpg) no-repeat center center; background-size: cover;}
.mobiWhite{position: relative; background-color: #ffffff; padding: 55px; width: 100%; max-width: 1230px; margin: 0 auto; box-sizing: border-box;}
#movi video{cursor: pointer;}
#movi .fr{width: 100%; max-width: 390px;}
#movi .fr h4{width: 100%; max-width: 390px; color: #2480cc; font-size: 28px; line-height: 38px; margin-bottom: 30px;}
#movi .fr a{position: absolute; bottom: 0; right: 0; display: block; padding: 20px 40px; background-color: #2480cc; color: #fff; font-size: 18px; font-weight: bold;} 

#cert .grayBox{background-color: #666666; padding: 40px; position: relative; padding-bottom: 130px; }
#cert .grayBox p{color: #fff;}
#certiSlider{ position: relative;}
.cert-button-next{position: absolute; bottom: 30px; right: 30px; font-size: 20px; color: #fff; cursor: pointer; width: 46px; height: 46px; border: 1px solid #fff; text-align: center; line-height: 46px; box-sizing: border-box;} 
.cert-button-prev{position: absolute; bottom: 30px; right: 75px; font-size: 20px; color: #fff;  cursor: pointer; width: 46px; height: 46px; border: 1px solid #fff; text-align: center; line-height: 46px;  box-sizing: border-box;}
.certiSlide img{width: 100%;}


#down{display: table;}
#down .article{width: 50%; display: table-cell; vertical-align: top;}
.downLeft{background: url(../images/down_bg.jpg) no-repeat center center; background-size: cover;}
.downRight{background: #f4f4f4; }
.downBox{width: 630px; padding: 0 15px; box-sizing: border-box;}
.downRight .downBox{padding-bottom: 100px;}
.downLeft .downBox{float: right;}
.downLeft .downBox h3{width: 495px; color: #fff; font-size: 26px; line-height: 36px; font-weight: 600; letter-spacing: -0.5px;}
.downLink{margin-top: 90px; margin-bottom: 30px;}
.downLink li{display: inline-block; margin-right: 15px;}
.downLink li > a{display: block; width: 130px; height: 130px; border-radius: 50%; border: 5px solid #0d1d41; text-align: center; line-height: 120px; box-sizing: border-box; color: #0d1d41; font-size: 20px; font-weight: bold; letter-spacing: -0.5px; position: relative;} 
.downLink li > a:hover{color: #fff; background: url(../images/down_link_bg.png) no-repeat center center #0d1d41;}
.downLink li > a span{position: absolute; bottom: 25px; left: 0; z-index: 99; width: 100%; text-align: center; color: #0d1d41; font-size: 14px; font-weight: bold;}
.downLink li > a:hover span{color: #fff;}
/* FOOTER */
#footer{background-color: #1a1a1a; padding: 60px 0;}
#foLogo{position: absolute; top: -100px; left: 50%; z-index: 99; transform: translateX(-50%);}
.foInfo{padding: 0 15px; position: relative; width: 40%; box-sizing: border-box;}
.foInfo > p{font-size: 14px; margin-bottom: 3px; line-height: 24px;} 
.foInfo > p > span{font-size: 14px; color: #999999; font-weight: bold; display: inline-block; margin-right: 10px;}
.copyTxt{position: absolute; right: 15px; top: 0; font-size: 14px; margin-bottom: 5px; line-height: 24px;}
.ggdLogo{position: absolute; right: 15px; bottom: 0;}