@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');

body{font-family: "Noto Sans TC", "微軟正黑體"; line-height: 1; width: 100%; height: 100%; background: #0b1634;}
img{width: 100%;}

/*header{width: 100%; padding: 1% 0; overflow: hidden; position: fixed; top: 0; left: 0; z-index: 999; background:#4289baa8; 
	-webkit-transition: height 0.3s; -moz-transition: height 0.3s; -ms-transition: height 0.3s; -o-transition: height 0.3s; transition: height 0.3s;}*/
header a{width: 15%; padding: 1% 0; margin: 0 auto; display: block;}
header {width: 100%; overflow: hidden; position: fixed; top: 0; left: 0; z-index: 999; background-color: #0683c9; -webkit-transition: background-color 0.3s; -moz-transition: background-color 0.3s; -ms-transition: background-color 0.3s; -o-transition: background-color 0.3s; transition: background-color 0.3s; }
header.smaller {background:/*#0683c91f*/linear-gradient(180deg, rgba(33,117,175,0.7413340336134453) 0%, rgba(33,117,175,0) 92%, rgba(33,117,175,0) 100%); opacity: 0.6;}
header.smaller a{width: 10%;}
header:hover{background: #0683c9; opacity: 1;}

section{position: relative; min-height: 100vh; bottom: 0; left: 0; overflow: hidden; background-size: cover; background-position: center; background-attachment: fixed;}
section:before{ content: ' '; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-position: center; background-repeat: no-repeat; background-size: cover;}
section dl{position: absolute;}
section dl dt{color: #fff; text-shadow: 1px 1px 5px #333333;}
section dl dd:nth-child(2){color: #000; font-size: 30px; letter-spacing: 3px; padding: 1%; background: #fff; position: absolute; display: flex; align-items: center; justify-content: center; box-sizing: border-box;}

.s1{background-image: url(../images/s1.jpg);}
/*.s1:before{background-image: url(../images/s1.png); z-index: -1;}*/
.s1:after{content: ""; width: 55%; height: 10px; background: #2175af; position: absolute; bottom: 0;}
section dl.title{width: 940px; bottom: 0;}
section dl.title dt{font-weight: bold; position: relative;}
section dl.title dt p{font-size: 60px; position: absolute; top: 25%; left: 15%;}
section dl.title dt span{font-size: 110px;}
section dl.title dd{width: 65%; top: 60%; right: 20%; }

.s2{height: auto !important; background: url(../images/s2.jpg) top left no-repeat; background-size: cover; z-index: 1;}
.s2:before{content: ""; width: 55%; height: 10px; background: #2175af; position: absolute; top: 0;}
.s2:after{content: ""; width: 55%; height: 10px; background: #2175af; position: absolute; bottom: 0; right: 0;}
.s2 dl{position: relative; float: right;}
.s2 .demo-gallery{width: 100%; float: right; margin: 0 0 5%;}
.s2 .demo-gallery ul{width: 710px; float: right; margin: 0 5% 0 0; border: 8px solid #fff; box-shadow: 0 0 3px 0 #333333; border-radius: 5px; overflow: hidden;}
.s2 .size{font-size: 60px; font-weight: bolder; font-family: 'Arial black'; position: absolute; z-index: 1; bottom: 10px; right: 20px; color: #fff; text-align: right; letter-spacing: 2px;	text-shadow: 3px 3px 0 #333333;}
.s2 .size span{display: block; font-family: 'Arial'; font-size: 30px; margin: 2px 0 0;}
section dl.title2{width: 1019px; bottom: 0;right: -5%;}
section dl.title2 dt{font-weight: bold; position: relative;}
section dl.title2 dt p{font-size: 60px; position: absolute; top: 27%; left: 15%;}
section dl.title2 dt span{font-size: 110px;}
section dl.title2 dd:nth-child(2){width: 66%; top: 60%; left: 11%; }
.s2 .circle{top: 45%; left: 20%;}

.s3{background-image: url(../images/s3.png); z-index: 2; background-position: bottom;}
.s3:before{content: ""; width: 55%; height: 10px; background: #2175af; position: absolute; right: 0; left: auto;}
.s3:after{content: ""; width: 55%; height: 10px; background: #2175af; position: absolute; bottom: 0; left: 0; right: auto; top: auto;}
.title3{width: 565px; margin: 5% 3%;}
.title3 dd:nth-child(2){color: #fff; line-height: 40px; text-align: right; background: none; position: absolute; top: 47%; right: 11%; letter-spacing: 2px;}
.s3 .circle{left: 23%; bottom: 18%; top: auto !important;}


.s4_mask{background: #35292975; width: 100%; height: 150vh; position: absolute; top: 0; left: 0; z-index: 0;}
.s4{background-image: url(../images/s4.png); position: relative;}
/*.s4:before{background-image: url(../images/s4.png); z-index: -1;}*/
.s4:after{content: ""; width: 55%; height: 10px; background: #2175af; position: absolute; top: 0; bottom: auto; right: auto; left: 0;}
section dl.title4{width: 1163px; position: relative; margin: 0 0 3%; position: relative; z-index: 2;}
section dl.title4 dd:nth-child(2){width: 83%; right: 10px;}
.better{width: 100%; padding: 0 5% 3%; box-sizing: border-box; z-index: 2; position: relative;}
.better span{font-weight: bold;}
.better dl{width: 32%; margin-right: 2%; box-shadow: 0 0 5px 0 #444444; float: left; position: relative; border-radius: 5px; overflow: hidden;}
.better dl:nth-child(3){margin-right: 0;}
.better dl dt{width: 100%; padding: 5% 0; display: flex; align-items: center; justify-content: center; background: #fff;}
.better dl dt img{width: 80%;}
.better dl dd{width: 100%; text-align: center; color: #fff !important; padding: 4% 0 !important; background: #328bc9 !important; position: relative !important;}


.s5:before{background-image: url(../images/s5.png); z-index: -1;}
.title5{position: absolute; z-index: 5; }
.title5 dd:nth-child(2){font-size: 30px; text-align: left; left: 11%; right: auto;}


.s6{background-image: url(../images/s6.png); z-index: -1;}
/*.s6:before{background-image: url(../images/s6.png); z-index: -1;}*/
section dl.title6{width: 990px; bottom: auto; top: 5%;}
section dl.title6 dd:nth-child(2){top: 60%; width: 83.5%; right: 1%;}
section dl.title6 dt p{top: 17%;}


.s7{width: 100%; padding: 3% 0; background: url(../images/fhd2.png) no-repeat center, #fff; background-size: cover;}
.title7{font-size: 60px; padding: 0 0 0 10%; text-align: center; font-weight: bolder; letter-spacing: 2px; color: #185b89; position: relative; display: flex; align-items: center; justify-content: center;}
.title7:before, .title7:after{content: ""; height: 10px; width: 100%; background: #185b89; position: absolute; transform: translate(0, 0);transition-delay: 0.15s;}
.title7:before{ right:-25%; width: 13%; animation: wi 3s forwards; animation-delay:1.5s;}
@keyframes wi {
  from { right: -25%;}
  to { right: 0;}
}
.title7:after{ width:0; left: 30%; top: 65px; animation: he 3s forwards; animation-delay:2.5s;}
@keyframes he {
  from { width: 10px; height:0;}
  to { width: 10px; height:40vw;}
}
.s71{width: 60%; float: right; margin: 5% 0 8%;}
.s72{width: 38%; float: left; margin: 0 0 0 8%;}
.s73{width: 38%; float: right; margin: 5% 5% 0 0; }


.vr_t{width: 100%; text-align: center; position: relative; background: #fff; padding: 8% 0; position: relative; z-index: 1;}
.vr_t:before, .vr_t:after{content: ""; width: 41px; height: 42px; display: block; position: absolute; background: url(../images/icon.png) no-repeat; background-size: 100%;}
.vr_t:before{left: 27%; top: 20%;}
.vr_t:after{right: 20%; bottom: 27%;}
.vr_t dt{font-size: 90px; color: #2175af; font-weight: bolder; margin: 0 0 1.5%;}
.vr_t dd{font-size: 30px; width: fit-content; padding: 0.5% 1%; letter-spacing: 1px; color: #fff; background: #2175af; margin: 0 auto;}

.video{width: 100%; margin: -6% 0 0; padding: 3% 0 0; display: flex; align-items: center; justify-content: center; box-sizing: border-box; background: url(../images/vr.png) center top no-repeat; background-size: cover; position: relative; z-index: 2;}
.video2{padding: 0;}
/*.video video{width: 76%; height: 90vh; box-shadow: 0 0 7px 0px #a0a0a0; border-radius: 5px;}*/


.smart{width: 100%; height: 100vh; background: url(../images/money.jpg) no-repeat center; background-size: cover; position: relative; background-attachment: fixed;}
.sm_mask{width: 100%; height: 100vh; background: #15224c47; position: absolute; z-index: 1; top: 0; left: 0;}
.sm_t{text-align: center; text-shadow: 1px 1px 5px #383838; color: #fff; position: relative; z-index: 2; font-weight: bolder; position: relative; z-index: 2}
.sm_t dt{font-size: 60px; padding: 8% 0 2%; letter-spacing: 2px;}
.sm_t dd{font-size: 30px;}

.sm_con{width: 70%; margin: 5% auto 0; position: relative; z-index: 2}
.sm_con dl{width: 26%; margin: 0 11% 0 0; text-align: center; color: #fff; float: left;}
.sm_con dl:nth-child(3){margin-right: 0;}
.sm_con dl dt{width: 65%; height: 11.8vw; padding: 5%; border: 6px solid #fff; border-radius: 50%; box-sizing: border-box; margin: 0 auto 8%; display: flex; align-items: center; justify-content: center;}
.sm_con dl dt img{width: auto;}
.sm_con dl dd{font-size: 30px;}
.sm_con dl dd span{display: block; margin: 0 0 2%;}


.contact{width: 100%;}
.form-signup { background: url(../images/bg4.png) no-repeat left bottom, url(../images/bg5.png) no-repeat top right, url(../images/contact.png) no-repeat; background-size: 11%, 15%, cover; padding: 5%; box-sizing: border-box;}

/*.toggle { display: block; color: white; text-decoration: none; font-size: 0.8em; clear: both; position: absolute; top: auto; right: 0; bottom: 1em; left: 0; text-align: center;}
.toggle:hover { color: rgba(255, 255, 255, 0.75);}*/

.form-login{width: 100%; height: auto; overflow: hidden; overflow-y: auto; background:url(../images/bg1.png) no-repeat left top, url(../images/bg2.png) no-repeat right bottom, url(../images/bg3.png) no-repeat 2% bottom, url(../images/contact.png) no-repeat left;
 background-size: 15%, 15%, 37%, cover; padding: 5%; box-sizing: border-box;}
.form-login dl{text-align: center; color: #49b3ff; font-weight: bolder; margin: 4% 0 5%;}
.form-login dl dt{font-size: 60px; margin: 0 0 2%;}
.form-login dl dd{font-size: 90px;}
.form-login div{font-size: 30px; color: #ffffff; margin: 0 0 2%; padding: 0 0 0 50%; line-height: 42px;}
.form-login a{width: fit-content; font-size: 24px; color: #a7e2fe; border: 3px solid #a7e2fe; padding: 8px 1%; display: block; position: absolute; right: 15%; bottom: 13%; border-radius: 5px;}
.form-login a img{width: 25px; height: 23px; margin: 0 5px 0 0;}
.form-login a:hover{border-color: #fff; background: #fff;}


.check{float: left;}
.contact label{font-size: 20px; color: #e2f6ff; margin: 0 0 0 5px; cursor: pointer;}
.contact label a{color: #e2f6ff;}
.contact label a:hover{color: #fff;}
.check li{margin: 0 0 10px}
.contact_f input[type="checkbox"]{width: 8px; height: 8px; border: 1px solid #e2f6ff; display: block; background: none;}
.submit{border: 2px solid #e2f6ff; padding: 1% 3%; border-radius: 50px; font-size: 30px; background: none; color: #fff; float: right;}
.submit img{width: 42px; height: 39px; vertical-align: bottom;}



.con_t2{margin: 0 0 3%;}
.con_t2 dt{font-size: 36px; color: #49b3ff; margin: 0 0 0.5%;}
.con_t2 dd{font-size: 30px; color: #fff;}

.contact_f{padding: 3% 3% 0; background: #ffffff3b; margin: 0 0 3%;}
.contact_f input{color: #e2f6ff; width: 100%; border-bottom: 1px solid #b1b1b1; padding: 3px; box-sizing: border-box; background: none; font-size: 30px;}
.contact_f li input::placeholder, .contact_f textarea::placeholder, .contact_f select{color: #e2f6ff; font-size: 30px;}
.contact_f select, .contact_f textarea{border: 1px solid #b1b1b1; padding: 3px; box-sizing: border-box; width: 100%; background: none; border-radius: 5px; position: relative;}
.contact_f select{background: url(../images/select.png) no-repeat 98% center;}
.contact_f textarea{height: 12vw;}
.contact_f li{width: 47.5%; margin: 0 5% 3% 0; float: left;}
.contact_f li:nth-child(2n){margin-right: 0;}
.contact_f li:nth-child(7){width: 100%;}

.uhome{width: 100%; padding: 6% 5% 35vw; box-sizing: border-box; background: url(../images/btm.png) no-repeat bottom, #fff; background-size: 100%; color: #525252; position: relative; z-index: 3;}
.uhome dt{ font-size: 60px; font-weight: bold; margin: 0 0 5%; letter-spacing: 1px;}
.uhome dd{font-size: 30px; margin: 0 0 2%; line-height: 40px;}

.more{font-size: 20px; color: #42aaff; margin: 5% 0 0; padding:0.5% 1.5%; border: 2px solid #42aaff; border-radius: 10px; display: block; width: fit-content;}
.more:hover{color: #fff; background: #42aaff;}


.circle{position: absolute; }
.profilepicture { position: absolute;  width: 50px; height: 50px; background-size: 180px 180px; margin: auto;  top: 0; left: 0; bottom: 0; right: 0; z-index: 3; -webkit-box-shadow: 0 0 0px 18px rgb(255 255 255 / 20%), 0 0 5px 0px rgb(0 0 0 / 30%), inset 0 0 0 30px rgb(255 255 255); -moz-box-shadow: 0 0 0px 18px rgb(255 255 255 / 20%), 0 0 5px 0px rgb(0 0 0 / 30%), inset 0 0 0 30px rgb(255 255 255); box-shadow: 0 0 0px 18px rgb(255 255 255 / 20%), 0 0 5px 0px rgb(0 0 0 / 30%), inset 0 0 0 30px rgb(255 255 255);   -webkit-border-radius: 999px;  -moz-border-radius: 999px; border-radius: 999px;}
.pulse1 {width: 200px; height: 200px; margin: auto;  top: 0; left: 0; bottom: 0; right: 0; z-index: 1; opacity: 0; border: 3px solid rgba(255,255,255,.1);
   -webkit-animation: pulsejg1 4s linear infinite; -moz-animation: pulsejg1 4s linear infinite; animation: pulsejg1 4s linear infinite; -webkit-border-radius: 999px; -moz-border-radius: 999px; border-radius: 999px; -webkit-box-shadow: inset 0px 0px 15px 10px rgba(0, 0, 0, .6); -moz-box-shadow: inset 0px 0px 15px 10px rgba(0, 0, 0, .6); box-shadow: inset 0px 0px 15px 10px rgba(0, 0, 0, .6); -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
.pulse2 { position: absolute; width: 200px; height: 200px; margin: auto;  top: 0; left: 0; bottom: 0; right: 0; z-index: 2; opacity: 0; border: 1px solid rgba(255,255,255,0);
   -webkit-animation: pulsejg2 4s linear infinite; -moz-animation: pulsejg2 4s linear infinite; animation: pulsejg2 4s linear infinite; -webkit-border-radius: 999px; -moz-border-radius: 999px; border-radius: 999px; -webkit-box-shadow: inset 0px 0px 12px 5px rgba(255, 255, 255, .8); -moz-box-shadow: inset 0px 0px 12px 5px rgba(255, 255, 255, .8); box-shadow: inset 0px 0px 12px 5px rgba(255, 255, 255, .8); -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

@-webkit-keyframes pulsejg1 { 0% {     -webkit-transform: scale(.6);     opacity: 0; }
 50% {     -webkit-transform: scale(.6);     opacity: 0; }
 60% {     -webkit-transform: scale(.9);     opacity: .2; }
 70% {     -webkit-transform: scale(1.1);     opacity: .35; }
 80% {     -webkit-transform: scale(1.25);     opacity: .2; }
 100% {     -webkit-transform: scale(1.4);     opacity: 0; }
}

@-moz-keyframes pulsejg1 { 0% {     -moz-transform: scale(.6);     opacity: 0; }
 50% {     -moz-transform: scale(.6);     opacity: 0; }
 60% {     -moz-transform: scale(.9);     opacity: .2; }
 70% {     -moz-transform: scale(1.1);     opacity: .35; }
 80% {     -moz-transform: scale(1.25);     opacity: .2; }
 100% {     -moz-transform: scale(1.4);     opacity: 0; }
}

@keyframes pulsejg1 { 0% {     transform: scale(.6);     opacity: 0; }
 50% {     transform: scale(.6);     opacity: 0; }
 60% {     transform: scale(.9);     opacity: .1; }
 70% {     transform: scale(1.1);     opacity: .25; }
 80% {     transform: scale(1.25);     opacity: .1; }
 100% {     transform: scale(1.4);     opacity: 0; }
}

@-webkit-keyframes pulsejg2 { 0% {     -webkit-transform: scale(.6);     opacity: 0; }
 40% {     -webkit-transform: scale(.8);     opacity: .05; }
 50% {     -webkit-transform: scale(1);     opacity: .1; }
 60% {     -webkit-transform: scale(1.1);     opacity: .3; }
 80% {     -webkit-transform: scale(1.2);     opacity: .1; }
 100% {     -webkit-transform: scale(1.3);     opacity: 0; }
}

@-moz-keyframes pulsejg2 { 0% {     -moz-transform: scale(.6);     opacity: 0; }
 40% {     -moz-transform: scale(.8);     opacity: .05; }
 50% {     -moz-transform: scale(1);     opacity: .1; }
 60% {     -moz-transform: scale(1.1);     opacity: .3; }
 80% {     -moz-transform: scale(1.2);     opacity: .1; }
 100% {     -moz-transform: scale(1.3);     opacity: 0; }
}

@keyframes pulsejg2 { 0% {     transform: scale(.6);     opacity: 0; }
 40% {     transform: scale(.8);     opacity: .05; }
 50% {     transform: scale(1);     opacity: .1; }
 60% {     transform: scale(1.1);     opacity: .3; }
 80% {     transform: scale(1.2);     opacity: .1; }
 100% {     transform: scale(1.3);     opacity: 0; }
}






.small {font-size: 11px;color: #999;display: block;margin-top: -10px}
.cont {text-align: center;}
.page-head {padding: 60px 0;text-align: center;}
.page-head .lead {font-size: 18px;font-weight: 400;line-height: 1.4;margin-bottom: 50px;margin-top: 0;}
.btn {-moz-user-select: none;background-image: none;border: 1px solid transparent;border-radius: 2px;cursor: pointer;display: inline-block;font-size: 14px;font-weight: normal;line-height: 1.42857;margin-bottom: 0;padding: 6px 12px;text-align: center;vertical-align: middle;white-space: nowrap;text-decoration: none;}
.btn-lg {border-radius: 2px;font-size: 18px;line-height: 1.33333;padding: 10px 16px;}
.btn-primary:hover {background-color: #fff;color: #152836;}
.btn-primary {background-color: #152836;border-color: #0e1a24;color: #ffffff;}
.btn-primary {border-color: #eeeeee;color: #eeeeee;transition: color 0.1s ease 0s, background-color 0.15s ease 0s;}
.page-head h1 {font-size: 42px;margin: 0 0 20px;color: #FFF;position: relative;display: inline-block;}
.page-head h1 .version {bottom: 0;color: #ddd;font-size: 11px;font-style: italic;position: absolute;width: 58px;right: -58px;}
.demo-gallery > ul > li a {border-radius: 3px;display: block;overflow: hidden;position: relative;float: left;}
.demo-gallery > ul > li a > img {-webkit-transition: -webkit-transform 0.15s ease 0s;-moz-transition: -moz-transform 0.15s ease 0s;-o-transition: -o-transform 0.15s ease 0s;transition: transform 0.15s ease 0s;-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);height: 100%;width: 100%;}
.demo-gallery > ul > li a:hover > img {-webkit-transform: scale3d(1.1, 1.1, 1.1);transform: scale3d(1.1, 1.1, 1.1);}
.demo-gallery > ul > li a:hover .demo-gallery-poster > img {opacity: 1;}
.demo-gallery > ul > li a .demo-gallery-poster {bottom: 0;left: 0;position: absolute;right: 0;top: 0;-webkit-transition: background-color 0.15s ease 0s;-o-transition: background-color 0.15s ease 0s;transition: background-color 0.15s ease 0s;}
.demo-gallery > ul > li a .demo-gallery-poster > img {left: 50%;margin-left: -10px;margin-top: -10px;opacity: 0;position: absolute;top: 50%;-webkit-transition: opacity 0.3s ease 0s;-o-transition: opacity 0.3s ease 0s;transition: opacity 0.3s ease 0s;}
.demo-gallery > ul > li a:hover .demo-gallery-poster {background-color: rgba(0, 0, 0, 0.5);}
.demo-gallery .justified-gallery > a > img {-webkit-transition: -webkit-transform 0.15s ease 0s;-moz-transition: -moz-transform 0.15s ease 0s;-o-transition: -o-transform 0.15s ease 0s;transition: transform 0.15s ease 0s;-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);height: 100%;width: 100%;}
.demo-gallery .justified-gallery > a:hover > img {-webkit-transform: scale3d(1.1, 1.1, 1.1);transform: scale3d(1.1, 1.1, 1.1);}
.demo-gallery .justified-gallery > a:hover .demo-gallery-poster > img {opacity: 1;}
.demo-gallery .justified-gallery > a .demo-gallery-poster {background-color: rgba(0, 0, 0, 0.1);bottom: 0;left: 0;position: absolute;right: 0;top: 0;-webkit-transition: background-color 0.15s ease 0s;-o-transition: background-color 0.15s ease 0s;transition: background-color 0.15s ease 0s;}
.demo-gallery .justified-gallery > a .demo-gallery-poster > img {left: 50%;margin-left: -10px;margin-top: -10px;opacity: 0;position: absolute;top: 50%;-webkit-transition: opacity 0.3s ease 0s;-o-transition: opacity 0.3s ease 0s;transition: opacity 0.3s ease 0s;}
.demo-gallery .justified-gallery > a:hover .demo-gallery-poster {background-color: rgba(0, 0, 0, 0.5);}
.demo-gallery .video .demo-gallery-poster img {height: 48px;margin-left: -24px;margin-top: -24px;opacity: 0.8;width: 48px;}
.demo-gallery.dark > ul > li a {border: 3px solid #04070a;}

.third-effect .mask {opacity: 0;overflow:visible; -moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;-ms-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;}
.third-effect a.info {position:relative; font-size: 4em; opacity: 0;-webkit-transition: opacity 0.5s 0s ease-in-out;-moz-transition: opacity 0.5s 0s ease-in-out;-o-transition: opacity 0.5s 0s ease-in-out;-ms-transition: opacity 0.5s 0s ease-in-out;transition: opacity 0.5s 0s ease-in-out;}
.third-effect:hover .mask {opacity: 1; background: #1b1b1b96;}
.third-effect:hover a.info {opacity:1;-moz-transition-delay: 0.3s;-webkit-transition-delay: 0.3s;-o-transition-delay: 0.3s;-ms-transition-delay: 0.3s;transition-delay: 0.3s;}
.view {overflow: hidden;position: relative;text-align: center; cursor: pointer;}
.view .mask, .view .content {width: 100%;height: 100%;position: absolute;overflow: hidden;top: 0;left: 0; display: flex; align-items: center; justify-content: center;}
.view img {display: block;position: relative;}
.view a.info {color: #fff;}









figure.imgcover {position: relative; margin: 0; overflow: hidden; width: 100%;  color: #ffffff;  text-align: center; }
figure.imgcover *,
figure.imgcover *:before,
figure.imgcover *:after { -webkit-box-sizing: border-box;  box-sizing: border-box;  -webkit-transition: all 0.55s ease;  transition: all 0.55s ease;}
figure.imgcover img {  max-width: 100%;  backface-visibility: hidden;  vertical-align: top;  opacity: 0.9;}
figure.imgcover .title {  position: absolute;  top: 80%;  left: 25px;  padding: 5px 10px 10px;}
figure.imgcover .title:before,
figure.imgcover .title:after { height: 2px;  width: 800px;  position: absolute;  content: '';  background-color: #ffffff;}
figure.imgcover .title:before { top: -5px; left: 10px; -webkit-transform: translateX(100%); transform: translateX(100%);}
figure.imgcover .title:after { bottom: 0; right: 10px; -webkit-transform: translateX(-100%); transform: translateX(-100%);}
figure.imgcover .title div:before,
figure.imgcover .title div:after { width: 2px; height: 700px; position: absolute; content: '';  background-color: #ffffff;}
figure.imgcover .title div:before { top: 10px; right: 0; -webkit-transform: translateY(100%); transform: translateY(100%);}
figure.imgcover .title div:after { bottom: 10px; left: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%);}
figure.imgcover h4 { margin: 0; text-transform: uppercase;}
figure.imgcover h4 { display: block; font-size: 24px; font-weight: 700; background-color: #0b2e2ce8; padding: 5px 10px; color: #fff;}
figure.imgcover figcaption { position: absolute; bottom: 22%; left: 25px; text-align: left; opacity: 0; padding: 5px 60px 5px 10px; font-size: 0.8em; font-weight: 500; letter-spacing: 1.5px;}
figure.imgcover figcaption p { margin: 0; color: #fff; font-family: 'Montserrat'; font-size: 20px;}
figure.imgcover a { position: absolute; top: 0; bottom: 0; left: 0; right: 0;}
figure.imgcover:hover img,
figure.imgcover.hover img { zoom: 1; filter: alpha(opacity=35); -webkit-opacity: 0.35; opacity: 0.35;}
figure.imgcover:hover .title:before,
figure.imgcover.hover .title:before,
figure.imgcover:hover .title:after,
figure.imgcover.hover .title:after,
figure.imgcover:hover .title div:before,
figure.imgcover.hover .title div:before,
figure.imgcover:hover .title div:after,
figure.imgcover.hover .title div:after { -webkit-transform: translate(0, 0); transform: translate(0, 0);}
figure.imgcover:hover .title:before,
figure.imgcover.hover .title:before,
figure.imgcover:hover .title:after,
figure.imgcover.hover .title:after { -webkit-transition-delay: 0.15s; transition-delay: 0.15s;}
figure.imgcover:hover figcaption,
figure.imgcover.hover figcaption { opacity: 1; -webkit-transition-delay: 0.2s; transition-delay: 0.2s;}


.cd-top {content: "\f139"; display: block; font-size: 3em; position: fixed;bottom: 40px; right: 10px; z-index: 9; color: #5eaade; visibility: hidden;opacity: 0;-webkit-transition: opacity .3s 0s, visibility 0s .3s;-moz-transition: opacity .3s 0s, visibility 0s .3s;transition: opacity .3s 0s, visibility 0s .3s;}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {-webkit-transition: opacity .3s 0s, visibility 0s 0s;-moz-transition: opacity .3s 0s, visibility 0s 0s;transition: opacity .3s 0s, visibility 0s 0s;}
.cd-top.cd-is-visible {visibility: visible;opacity: 0.5;}
.cd-top.cd-fade-out {opacity: 1;}
.no-touch .cd-top:hover {background-color: #e86256; opacity: 1;}




.products_link{ width: 80px; right: 3px;  bottom: 25%;  position: fixed;  z-index: 999;}
.products_link a{ position: relative; font-size: 14px; color: #0683c9; bottom: 0;  width: 100%; letter-spacing: 1px; margin: 0 0 20px;  text-align: center;  display: block;
  -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}


.products_link a img{margin: 0 0 5px;}
.products_link a:hover{position: relative; bottom: 5px;}
.products_link a:hover:after{ box-shadow: -1px 15px 14px 0 #38383808;}



@media screen and (max-width: 1280px) {
figure.imgcover figcaption p{font-size: 16px;}
section dl.title dt span, section dl.title2 dt span{font-size: 60px; letter-spacing: 1px;}
section dl.title dt p, section dl.title2 dt p{font-size: 30px; letter-spacing: 2px;}
section dl dd:nth-child(2){font-size: 18px; letter-spacing: 1px;}
section dl.title{width: 520px;}
.s1:after, .s2:before, .s2:after, .s4:after, .title7:before{height: 5px;}
section dl.title2{width: 560px;}
.s2 .demo-gallery ul{width: 386px;}
.profilepicture{width: 30px; height: 30px;}
.s2 .circle{top: 25%; left: 18%;}
.s2 .size{font-size: 40px;}
.s2 .size span{font-size: 22px;}
.title3 dd:nth-child(2), .title5 dd:nth-child(2){line-height: 24px; font-size: 18px;}
.title3{width: 35%;}
.s3 .circle{left: 20%; bottom: 7%;}
section dl.title4{width: 620px;}
section dl.title4 dd:nth-child(2){right: 6px;}
.better dl{width: 29%; margin-right: 6%;}
section dl.title6{width: 535px;}
.title7{font-size: 38px;}
.title7:after{width: 5px !important;}
.vr_t dt{font-size: 60px;}
.vr_t dd{font-size: 15px;}
.vr_t:before, .vr_t:after{width: 21px; height: 23px;}
.sm_con{width: 85%;}
.sm_con dl{width: 30%; margin: 0 5% 0 0;}
.sm_con dl dt{height: 16.5vw;}
.sm_con dl dd{font-size:24px; line-height: 26px;}
.form-login dl dt{font-size: 40px; margin: 0 0 1%;}
.form-login dl dd{font-size: 60px;}
.form-login div, .con_t2 dd, .contact_f input, .contact_f li input::placeholder, .contact_f textarea::placeholder, .contact_f select{font-size: 20px;}
.con_t2 dt{margin: 0 0 10px;}
.uhome dt{font-size: 40px;}
.uhome dd{font-size: 20px; line-height: 30px;}
}



@media screen and (max-width: 979px) {
section dl.title dt span, section dl.title2 dt span{font-size: 40px;}
section dl dd:nth-child(2){font-size: 13px;}
section dl.title{width: 406px;}
section dl.title dt p, section dl.title2 dt p{font-size: 22px;}
section dl.title2{width: 390px;}
.pulse1, .pulse2{width: 150px; height: 150px;}
.title3{width: 43%;}
section dl.title4{width: 440px;}
section dl.title6{width: 372px;}
.title7{font-size: 30px;}
.vr_t dt, .sm_t dt{font-size: 40px;}
.sm_t dd{font-size: 20px;}
.sm_con dl dd{font-size: 18px; line-height: 22px;}
.sm_con dl dt img{width: 50%;}
.sm_con dl dt{border: 3px solid #fff;}
.form-login dl dt{font-size: 28px;}
.form-login dl dd{font-size: 46px;}
.form-login div{padding: 0 0 0 38%; line-height: 34px;}


}

@media screen and (max-width: 768px) {
.title3 dd:nth-child(2), .title5 dd:nth-child(2), .s2 .size span{font-size: 16px;}
.s2 .demo-gallery ul{width: 255px; border: 4px solid #fff;}
.s3 .circle{left: 10%;}
.s2 .size{font-size: 20px;}
.title3{width: 47%;}
.title7{font-size: 26px;}
.vr_t:before, .vr_t:after{width: 15px; height: 17px;}
.vr_t:before{left: 18%;}
.vr_t:after{right: 16%;}
.sm_con dl dd{font-size: 16px; line-height: 18px;}
.form-login dl dt{font-size: 20px;}
.form-login dl dd{font-size: 38px;}
.form-login div, .con_t2 dd, .contact_f input, .contact_f li input::placeholder, .contact_f textarea::placeholder, .contact_f select{font-size: 16px;}
.form-login div{line-height: 26px;}
.uhome dt{font-size: 32px;}
.uhome dd{font-size: 18px;}
.cd-top{font-size: 2em;}



}


@media screen and (max-width: 640px) {
.title3{width: 57%;}
.title3 dd:nth-child(2), .title5 dd:nth-child(2), .s2 .size span{font-size: 14px; line-height: 20px;}
.better span{display: block; padding: 2px 0;}
.better dl dd{display: block !important;}
.preview-slider .arrow-right{background-size: 20px !important; background-position: 90% center !important;}
.preview-slider .arrow-left{background-size: 20px !important; background-position: 10% center !important;}
.title7{font-family: 18px;}
.vr_t dt, .sm_t dt{font-size: 30px;}
.vr_t dd{font-size: 13px;}
.vr_t:after{right: 10%; bottom: 18%;}
.sm_t dd, .form-login dl dt{font-size: 18px;}
.sm_con dl dd{font-size: 14px; line-height: 14px;}
.sm_con{width: 90%;}
.form-login dl dd{font-size: 30px;}
.form-login dl{margin-top: 0;}
.form-login div, .con_t2 dd, .contact_f input, .contact_f li input::placeholder, .contact_f textarea::placeholder, .contact_f select{font-size: 14px;}
.form-login div{line-height: 22px;}
.uhome dt{font-size: 26px; margin: 0 0 3%;}
.uhome dd{font-size: 16px; line-height: 24px;}
.products_link{width: 65px; bottom: 10%;}

}