@charset "utf-8";
*
{
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
body
{
font-size: 14px;
font-weight: normal;
background: #FFFFFF;
color: #6c6a74;
}
div
{
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ul
{
list-style: none;
margin-bottom: 0px;
}
p
{
font-size: 14px;
line-height: 1.2;
font-weight: 500;
color: #6c6a74;
-webkit-font-smoothing: antialiased;
-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
p a
{
display: inline;
position: relative;
color: inherit;
border-bottom: solid 1px #ffa07f;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
p:last-of-type
{
margin-bottom: 0;
}
a, a:hover, a:visited, a:active, a:link
{
text-decoration: none;
-webkit-font-smoothing: antialiased;
-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
p a:active
{
position: relative;
color: #FF6347;
}
p a:hover
{
color: #FFFFFF;
background: #ffa07f;
}
p a:hover::after
{
opacity: 0.2;
}
h1{font-size: 48px;}
h2{font-size: 36px;}
h3{font-size: 15px;}
h4{font-size: 15px;}
h5{font-size: 14px;}
h1, h2, h3, h4, h5, h6
{
color: #012061;
-webkit-font-smoothing: antialiased;
-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
.form-control
{
color: #db5246;
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 150px;
left: 0;
top: 0;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal2 {
display: none;
position: fixed;
z-index: 1;
padding-top: 150px;
left: 0;
top: 0;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 10px;
border: 1px solid #888;
width: 50%;
}
.modal-content2 {
background-color: #fefefe;
margin: auto;
padding: 10px;
border: 1px solid #888;
width: 50%;
}
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
section
{
display: block;
position: relative;
box-sizing: border-box;
}
.clear
{
clear: both;
}
.clearfix::before, .clearfix::after
{
content: "";
display: table;
}
.clearfix::after
{
clear: both;
}
.clearfix
{
zoom: 1;
}
.float_left
{
float: left;
}
.float_right
{
float: right;
}
.trans_200
{
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.trans_300
{
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.trans_400
{
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-ms-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
}
.trans_500
{
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
.newbtn{
color: white;
background-color: #007bff;
padding: 5px;
font-size: 20px;
cursor: pointer;
border: none;
padding: 0;
}
.fill_height
{
height: 100%;
}
.super_container
{
width: 100%;
overflow: hidden;
}
.prlx_parent
{
overflow: hidden;
}
.prlx
{
height: 130% !important;
}
.parallax-window
{
min-height: 400px;
background: transparent;
}
.parallax_background
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.nopadding
{
padding: 0px !important;
}
.button
{
display: inline-block;
width: auto;
height: 47px;
background: #ff8a00;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.button a
{
display: block;
position: relative;
padding-left: 33px;
padding-right: 77px;
line-height: 47px;
font-size: 12px;
font-weight: 600;
color: #FFFFFF;
text-transform: uppercase;
white-space: nowrap;
}
.button_arrow
{
position: absolute;
top: 0;
right: 0;
width: 44px;
height: 100%;
background: #ff6600;
text-align: center;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.button_arrow i
{
font-size: 20px;
line-height: 47px;
color: #ffae00;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.button:hover
{
background: #ffae00;
}
.button:hover .button_arrow
{
background: #ff8a00;
}
.button:hover .button_arrow i
{
color: #ffae00;
}
.section_title h2
{
font-weight: 600;
}
.section_subtitle
{
font-size: 14px;
color: #6c6a74;
text-align: center;
margin-top: 66px;
line-height: 2.14;
}
.py-md-5{
padding:3%;
}
.header
{
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
box-shadow: 0px 5px 20px rgba(0,0,0,0.05);
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.header.scrolled
{
top: -61px;
}
h2.txtbg{
background-image: linear-gradient(to right, rgb(255, 255, 255) 0%, rgb(255, 152, 0) 100%);
font-size:25px;
}
.con{
text-align: center;
position: absolute;
top: 59%;
left: 100%;
transform: translate(-50%,-50%);
width: 100%;
}
.con span{
text-transform: uppercase;
display: block;
}
.textorg{
color: #012061;
font-size: 60px;
font-weight: 700;
margin-top: 20px;
position: relative;
animation: patent-fadein 0.6s ease 1;
}
.text12{
color: #ff9800;
font-size: 60px;
font-weight: 700;
margin-top: 35px;
position: relative;
animation: patent-fadein 0.6s ease 1;
}
.text1{
color: #012061;
font-size: 60px;
font-weight: 700;
margin-top: 35px;
position: relative;
animation: patent-fadein 0.6s ease 1;
}
.text2{
color: #012061;
font-size: 38px;
animation: patent-fadein 0.6s ease 1;
padding-top:5px;
}
#navimg {
background-image: url(../images/bluelogo01.png);
background-repeat: no-repeat;
min-height: 100px;
background-size: 50%;
}
.webp #navimg { background-image: url(../images/bluelogo01.webp); }
.webp div.boxtxt1 { background-image: url(../images/hongkong.webp); }
.webp div.boxtxt3 { background-image: url(../images/china.webp); }
.webp div.boxtxt2 { background-image: url(../images/earth.webp); }
.webp div.boxtxt4 { background-image: url(../images/find.webp); }
.webp #bannerhome { background-image: url(../images/hands-001.webp); }
@keyframes patent-fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.txtbarbga{
background-image:url(../images/a.png); background-size:contain;
}
.txtbarbgb{
background-image:url(../images/b.png); background-size:contain;
}
.txtbar{
box-shadow: 8px 8px #11236a;
padding-left: 5px;
}
.top_bar
{
width: 100%;
background: #2c2b31;
}
.header.scrolled .top_bar
{
}
.top_bar_container
{
width: 100%;
height: 100%;
}
.top_bar_content
{
width: 100%;
height: 61px;
}
.top_bar_contact_list li
{
display: inline-block;
}
.question
{
font-family: 敺株?甇??擃? "Microsoft JhengHei", sans-serif ;
font-size: 12px;
font-weight: 600 !important;
color: #918ea0;
margin-left: 0px;
text-transform: uppercase;
}
.top_bar_contact_list li > div
{
display: inline-block;
font-size: 12px;
font-weight: 500;
color: #918ea0;
}
.top_bar_contact_list li > div
{
margin-left: 1px;
}
.top_bar_contact_list li:first-child
{
margin-right: 42px !important;
}
.top_bar_contact_list li:not(:last-child)
{
margin-right: 33px;
}
.top_bar_login
{
}
.top_bar_login ul li
{
display: inline-block;
position: relative;
}
.top_bar_login ul li a
{
font-size: 12px;
text-transform: uppercase;
font-weight: 600;
color: #FFFFFF;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.top_bar_login ul li a:hover
{
color: #ff8a00;
}
.top_bar_login ul li:not(:last-child)::after
{
display: inline-block;
margin-left: 5px;
margin-right: 1px;
content: '/';
font-size: 12px;
color: #FFFFFF;
font-weight: 600;
}
.header_container
{
width: 100%;
background: #FFFFFF;
border-bottom: 1px solid #ff9800;
padding-bottom: 5px;
box-shadow: 0 3px 3px -3px #DAF2FF;
}
.header_content
{
height: 60px;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.header.scrolled .header_content
{
height: 70px;
}
.logo,
.logo_text
{
display: inline-block;
}
.logo
{
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.logo_text
{
font-family: 敺株?甇??擃? "Microsoft JhengHei", sans-serif ;
font-size: 18px;
font-weight: 700;
line-height: 0.75;
margin-left: 1px;
color: #464646;
text-transform: uppercase;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.main_nav_contaner
{
}
.main_nav,
.search_button
{
display: inline-block;
}
.main_nav li
{
display: inline-block;
position: relative;
height: 31px;
}
.main_nav li:not(:last-child)
{
margin-right: 13px;
}
.main_nav li a
{
display: block;
font-size: 16px;
font-weight: bold;
line-height: 31px;
background: #FFFFFF;
color: rgb(1,32,97);
padding-left: 2px;
padding-right: 2px;
text-transform: uppercase;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 450ms ease;
}
.main_nav li a:hover,
.main_nav li.active a
{
color: #FFFFFF;
background: #791225;
}
.main_nav li a:hover
{
background: rgb(3, 169, 244);
}
.search_button
{
margin-left: 88px;
cursor: pointer;
}
.search_button i
{
font-size: 15px;
color: #181818;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.search_button:hover i
{
color: #ff8a00;
}
.header_search_form
{
display: block;
position: relative;
width: 40%;
}
.header_search_container
{
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
background: #2c2b31;
z-index: -1;
opacity: 0;
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-ms-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
}
.header_search_container.active
{
bottom: -73px;
opacity: 1;
}
.header_search_content
{
width: 100%;
height: 73px;
}
.search_input
{
width: 100%;
height: 40px;
border: none;
outline: none;
padding-left: 20px;
background: transparent;
border-bottom: solid 2px #ff8a00;
color: #FFFFFF;
}
.header_search_button
{
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 100%;
border: none;
outline: none;
cursor: pointer;
}
.hamburger_container
{
}
.hamburger
{
display: none;
cursor: pointer;
}
.hamburger i
{
font-size: 25px;
color: #791225;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.hamburger:hover i
{
color: #ff8a00;
}
.menu
{
position: fixed;
top: 0;
right: -400px;
width: 400px;
height: 70vh;
background: #e9ecef;
z-index: 101;
padding-right: 60px;
padding-top: 87px;
padding-left: 50px;
box-shadow: 0px 5px 20px rgba(0,0,0,0.1);
}
.menu .logo a
{
color: #000000;
}
.menu.active
{
right: 0;
}
.menu_close_container
{
position: absolute;
top: 30px;
right: 60px;
width: 18px;
height: 18px;
transform-origin: center center;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
cursor: pointer;
}
.menu_close
{
width: 100%;
height: 100%;
transform-style: preserve-3D;
}
.menu_close div
{
width: 100%;
height: 2px;
background: #232323;
top: 8px;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.menu_close div:last-of-type
{
-webkit-transform: rotate(90deg) translateX(-2px);
-moz-transform: rotate(90deg) translateX(-2px);
-ms-transform: rotate(90deg) translateX(-2px);
-o-transform: rotate(90deg) translateX(-2px);
transform: rotate(90deg) translateX(-2px);
transform-origin: center;
}
.menu_close:hover div
{
background: #937c6f;
}
.menu .logo
{
margin-bottom: 60px;
}
.menu_nav ul li
{
margin-bottom: 9px;
}
.menu_nav ul li a
{
font-size: 16px;
color: rgb(1,32,97);
font-weight: 700;
letter-spacing: 0.05em;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.menu_nav ul li a:hover
{
color: #ff6600;
}
.menu .search
{
width: 100%;
margin-bottom: 67px;
}
.search
{
display: inline-block;
width: 400px;
-webkit-transform: translateY(2px);
-moz-transform: translateY(2px);
-ms-transform: translateY(2px);
-o-transform: translateY(2px);
transform: translateY(2px);
}
.menu .header_search_form
{
width: 100%;
}
.search form
{
position: relative;
}
.menu .search_input
{
width: 100%;
background: transparent;
height: 42px;
border: none;
outline: none;
padding-left: 20px;
border-bottom: solid 2px #d9d9d9;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.menu .search_input::-webkit-input-placeholder
{
font-size: 14px !important;
font-weight: 500 !important;
color: rgba(0,0,0,0.15) !important;
}
.menu .search_input:-moz-placeholder
{
font-size: 14px !important;
font-weight: 500 !important;
color: rgba(0,0,0,0.15) !important;
}
.menu .search_input::-moz-placeholder
{
font-size: 14px !important;
font-weight: 500 !important;
color: rgba(0,0,0,0.15) !important;
}
.menu .search_input:-ms-input-placeholder
{
font-size: 14px !important;
font-weight: 500 !important;
color: rgba(0,0,0,0.15) !important;
}
.menu .search_input::input-placeholder
{
font-size: 14px !important;
font-weight: 500 !important;
color: rgba(0,0,0,0.15) !important;
}
.menu .search_input:focus
{
border-bottom: solid 2px #ff6600;
}
.header_search_button
{
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 100%;
border: none;
outline: none;
cursor: pointer;
background: transparent;
}
.header_search_button:focus
{
outline: none;
}
.header_search_button i
{
font-size: 16px;
color: #d9d9d9;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.header_search_button:hover i
{
color: #ff8a00;
}
.menu_extra
{
position: absolute;
right: 60px;
bottom: 30px;
}
.menu_phone,
.menu_social
{
font-size: 12px;
}
.menu_social
{
margin-right: -6px;
margin-top: 5px;
}
.menu_title
{
text-transform: uppercase;
margin-right: 10px;
}
.menu_social ul
{
display: inline-block;
}
.menu_social ul li
{
display: inline-block;
}
.menu_social ul li a i
{
font-size: 12px;
color: rgba(0,0,0,0.4);
padding: 6px;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.menu_social ul li a i:hover
{
color: #ff6600;
}
.imgleft{
float: left;
width: 50%;
margin-right: 5px;
}
h3.dataleft{
float: left;
}
.team{
float: left;
margin-right:10px;
}
div.top1 span{
color: #ffffff;
}
.onetop{
padding-top:60px;
}
.onehome{
margin-top:150px;
}
.onehome img{
margin-top:10px;
background-repeat: no-repeat;
padding-bottom:0px;
width:100%;
}
.fourbox
{
width: 100%;
height: 100%;
background-color:#ebf1f5;
}
div.boxtxt1 .cardimg{
float:left;
padding-top:5%;
padding-left:1px;
padding-bottom:5%;
}
div.boxtxt1 .cardbody{
display:block;
vertical-align:middle;
padding-top:10%;
padding-right:10%;
font-size:10px;
}
div.boxtxt1211 img{
padding-right:15px;
padding-top:15px;
float:left;
}
div.boxtxt5 {
background-color: red;
}
div.boxtxt5:hover {
background-color: red;
}
div.boxtxt1 {
align-items:center;
height: 220px;
border:10px #ebf1f5 solid;
padding-top:30px;
background-image: url(../images/hongkong.jpg);
background-repeat: no-repeat;
background-size: cover;
}
div.boxtxt1 p{
position: relative;
width: 100%;
background-color: rgba(89, 76, 60, 0.33);
top: 40%;
border-bottom: 4px solid #ffffff;
border-top: 4px solid #ffffff;
color: #ffffff;
font-size:22px;
}
div.boxtxt1 span{
position: absolute;
width: 65%;
background-color: #1b1e21;
top: 65%;
border-top: 4px solid #594c3c;
left: 0px;
color: #ffffff;
font-size:22px;
}
div.boxtxt2  img{
float:right;
}
div.boxtxt3 {
align-items:center;
height: 220px;
border:10px #610d1d solid;
padding-top:30px;
background-image: url(../images/china.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position:right;
}
div.boxtxt3 span{
position: absolute;
width: 65%;
background-color: #1b1e21;
border-top: 4px solid #e8661a;
left: 0px;
color: #ffffff;
font-size:22px;
}
div.boxtxt2 {
align-items:center;
height: 220px;
border:10px #0d0c0a solid;
padding-top:30px;
background-image: url(../images/earth.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position:center;
}
div.boxtxt2 span{
position: absolute;
width: 65%;
background-color: #1b1e21;
top: 65%;
border-top: 4px solid #151513;
left: 0px;
color: #ffffff;
font-size:22px;
}
div#bc {
background: #0c5460;
transition: 0.5s;
height: 200px;
}
div.boxtxt4 {
align-items:center;
height: 220px;
border:10px #ebf1f5 solid;
padding-top:30px;
background-image: url(../images/find.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position:center;
cursor:pointer;
}
div.boxtxt4 span{
position: absolute;
width: 65%;
background-color: #1b1e21;
top: 65%;
border-top: 4px solid #155724;
left: 0px;
color: #ffffff;
font-size:22px;
}
#fourli li {
float: left;
padding: 1px 5px 1px 1px;
color: #525252;
font-size: 13px;
font-weight: bold;
list-style-position: inside;
}
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
background: #791225;
}
.hovereffect1 {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
background:#03a9f4;
}
.hovereffect1 .overlay1 {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
cursor:pointer;
}
.hovereffect1 .overlay1 p {
background-color: rgba(0, 0, 0, 0.6);
padding: 3px 10px;
width: fit-content;
margin-left: auto;
}
.hovereffect0407 {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
background:#03a9f4;
}
.hovereffect0407 .overlay0407 {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
cursor:pointer;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
padding: 120px 20px;
cursor:pointer;
}
.hovereffect img {
display: block;
position: relative;
width: 100%;
height: 220px;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-10px,0,0);
transform: translate3d(-10px,0,0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.hovereffect0407 img {
display: block;
position: relative;
width: 50%;
height: 100%;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-10px,0,0);
transform: translate3d(-10px,0,0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
padding-top:30px;
}
.hovereffect0407:hover img {
opacity: 0.4;
filter: alpha(opacity=40);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.hovereffect1 img {
display: block;
position: relative;
width: 50%;
height: 100%;
object-fit: cover;
aspect-ratio: 512 / 341;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-10px,0,0);
transform: translate3d(-10px,0,0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.hovereffect1:hover img {
opacity: 0.4;
filter: alpha(opacity=40);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.hovereffect:hover img {
opacity: 0.4;
filter: alpha(opacity=40);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
overflow: hidden;
padding: 0.5em 0;
background-color: #1b1e21;
}
.hovereffect1 h2 {
text-align: right;
position: relative;
font-size: 25px;
overflow: hidden;
padding: 5px 10px;
border-right:15px solid #FF9800;
}
.hovereffect0407 h2 {
text-align: right;
position: relative;
font-size: 18px;
overflow: hidden;
padding: 5px 0px;
background-color:#FF9800;
}
.overlay1 h2 {
text-decoration: blue;
}
.hovereffect h2:after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: #fff;
content: '';
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(-100%,0,0);
transform: translate3d(-100%,0,0);
}
.hovereffect:hover h2:after {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.hovereffect a, .hovereffect p {
color: #FFF;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
}
.hovereffect:hover a, .hovereffect:hover p {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
#bannerhome{
background-image:url(../images/hands-001.jpg);
background-repeat:no-repeat;
background-size:cover;
min-height:300px;
}
.text-block {
position: absolute;
bottom: 20px;
right: 20px;
background-color: #c5dfe9;
color: white;
padding-left: 20px;
padding-right: 20px;
}
.headtitle1 {
width: 94%;
margin: auto;
text-align: center;
position: relative;
top: 15%;
color: #ffffff;
border: 5px solid #ebf1f5;
background-color: #ffffff36;
min-height: 200px;
}
.mainjoin
{
width: 100%;
padding-top: 5px;
padding-bottom: 1px;
text-align:  left;
}
.mainjoin img#sp{
padding: 5px 0px 5px 20px;
}
.join_button
{
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.mainjoin ul{
}
.mainjoin ul li{
background-color: #d2eaf1;
padding-left: 8px;
}
.mainjoin span{
font-size: 14px;
padding-left:5px;
}
.mainjoin #title1, p{
font-size:18px;
padding: 3px 0px 3px 5px;
text-align:left;
}
.mainjoin #titlename, p{
font-size:18px;
color:#111;
padding:5px 20px;
}
.mainjoin #title2, p{
font-size:13px;
line-height:120%;
text-align: justify;
color:#525252;
padding:0px 1px;
}
.mainjoin p{
font-size:14.4px;
color:#000;
}
.mainjoin .text1{
font-size: 15px;
text-align: left;
}
.mainjoin h1.gh1{
background:#d2eaf1;
padding-left: 20px;
border-bottom: 2px solid #ff9800;
font-size: 32px;
}
.mainjoin h1.gh0407{
background:#d2eaf1;
padding-left: 20px;
border-bottom: 2px solid #ff9800;
font-size: 28px;
}
.mainjoin p.gh0407{
color: #791225;
line-height: 120%;
letter-spacing:10px;
border-bottom: 1px solid #791225;
font-size: 20px;
}
.mainjoin h3.gh3{
color: #44425a;
line-height: 120%;
padding-bottom: 18px;
letter-spacing:1px;
font-weight:bold;
}
.mainjoin h4.gh4{
color: rgb(1,32,97);
line-height: 150%;
text-align:justify;
font-size:16px;
padding: 0px 25px;
}
.mainjoin strong.title {
text-align: left;
font-size: 16px;
color: #44425a;
display: block;
padding-bottom: 10px;
letter-spacing:2px;
}
.mainjoin p.text1 {
line-height:140%;
letter-spacing:2px;
}
.courses
{
width: 100%;
background: #FFFFFF;
padding-top: 88px;
padding-bottom: 99px;
}
.course_search
{
padding-left: 68px;
padding-right: 68px;
margin-top: 72px;
}
.course_search_form
{
width: 100%;
}
.course_button
{
position: relative;
width: 224px;
height: 50px;
border: none;
outline: none;
cursor: pointer;
background: #ff8a00;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.course_button .button_arrow
{
width: 47px;
background: #ff6600;
}
.course_button span:first-child
{
width: 100%;
height: 100%;
font-size: 12px;
color: #FFFFFF;
font-weight: 600;
padding-right: 44px;
line-height: 50px;
text-transform: uppercase;
}
.course_button:hover
{
background: #ffae00;
}
.course_button:hover .button_arrow
{
background: #ff8a00;
}
.course_search_form > div
{
width: calc((100% - 284px) / 2);
}
.course_input
{
position: relative;
width: 100%;
height: 50px;
border: none;
outline: none;
background: #f2f1f8;
padding-left: 22px;
}
.course_search_form > div::after
{
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 3px;
background: #ff6600;
content: '';
visibility: hidden;
opacity: 0;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.course_search_form > div:hover::after
{
visibility: visible;
opacity: 1;
}
.course_input::-webkit-input-placeholder
{
font-size: 12px !important;
font-weight: 400 !important;
font-style: italic;
color: #6c6a74 !important;
}
.course_input:-moz-placeholder
{
font-size: 12px !important;
font-weight: 400 !important;
font-style: italic;
color: #6c6a74 !important;
}
.course_input::-moz-placeholder
{
font-size: 12px !important;
font-weight: 400 !important;
font-style: italic;
color: #6c6a74 !important;
}
.course_input:-ms-input-placeholder
{
font-size: 12px !important;
font-weight: 400 !important;
font-style: italic;
color: #6c6a74 !important;
}
.course_input::input-placeholder
{
font-size: 12px !important;
font-weight: 400 !important;
font-style: italic;
color: #6c6a74 !important;
}
.courses_slider_container
{
width: 100%;
margin-top: 83px;
}
.course_body
{
width: 100%;
padding-left: 34px;
padding-right: 32px;
padding-top: 56px;
padding-bottom: 51px;
background: #f2f1f8;
}
.course_tag
{
height: 31px;
background: #ff6600;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
margin-left: 2px;
}
.course_tag:hover
{
background: #2c2b31;
}
.course_tag a
{
display: block;
padding-left: 19px;
padding-right: 19px;
line-height: 31px;
font-size: 14px;
color: #FFFFFF;
font-weight: 400;
}
.course_price span
{
display: inline-block;
position: relative;
font-size: 18px;
color: #ff6600;
-webkit-transform: translateY(2px);
-moz-transform: translateY(2px);
-ms-transform: translateY(2px);
-o-transform: translateY(2px);
transform: translateY(2px);
}
.course_title
{
margin-top: 29px;
}
.course_title h3 a
{
font-size: 22px;
color: #2c2b31;
font-weight: 600;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.course_title h3 a:hover
{
color: #ff6600;
}
.course_text
{
margin-top: 18px;
line-height: 1.928;
}
.course_footer
{
margin-top: 33px;
}
.course_author_image
{
width: 37px;
height: 37px;
overflow: hidden;
border-radius: 50%;
}
.course_author_image img
{
max-width: 100%;
}
.course_author_name
{
margin-left: 16px;
}
.course_author_name,
.course_author_name a
{
font-size: 14px;
color: #2c2b31;
font-weight: 500;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.course_author_name a:hover
{
color: #ff6600;
}
.courses_slider_nav
{
position: absolute;
top: 50%;
width: 51px;
height: 51px;
background: #ff8a00;
text-align: center;
cursor: pointer;
}
.courses_slider_nav:hover
{
background: #ff6600;
}
.courses_slider_nav i
{
font-size: 18px;
line-height: 51px;
color: #FFFFFF;
}
.courses_slider_prev
{
left: -161px;
}
.courses_slider_next
{
right: -161px;
}
.milestones
{
width: 100%;
padding-top: 156px;
padding-bottom: 161px;
}
.milestones_container
{
margin-top: 0px;
}
.milestone
{
width: 100%;
}
.milestone_icon
{
display: inline-block;
height: 81px;
width: 81px;
}
.milestone_icon img
{
max-width: 100%;
}
.milestone_counter
{
font-size: 48px;
font-weight: 500;
color: #FFFFFF;
line-height: 0.75;
margin-top: 37px;
}
.milestone_text
{
font-size: 18px;
font-weight: 500;
color: #FFFFFF;
margin-top: 21px;
line-height: 0.75;
}
.grouped_sections
{
width: 100%;
background: #FFFFFF;
padding-top: 89px;
padding-bottom: 100px;
}
.grouped_title
{
font-size: 30px;
font-weight: 600;
color: #44425a;
}
.accordions
{
margin-top: 58px;
}
.accordion_container:not(:last-child)
{
margin-bottom: 14px;
}
.accordion
{
height: 50px;
width: 100%;
background: #f2f1f8;
padding-left: 24px;
cursor: pointer;
color: #44425a;
font-size: 16px;
font-weight: 600;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.accordion div
{
max-width: 90%;
overflow: hidden;
white-space: nowrap;
}
.accordion:active
{
background: #fffbfa !important;
}
.accordion::after
{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
right: 12px;
width: 23px;
height: 23px;
background: #ff6600;
content: '+';
font-size: 16px;
color: #FFFFFF;
font-weight: 600;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.accordion.active::after
{
content: '-';
}
.accordion:hover::after
{
color: #FFFFFF;
}
.accordion:hover
{
background: #e9e8ef;
}
.accordion_panel
{
padding-right: 8px;
max-height: 0px;
overflow: hidden;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
.accordion_panel > div
{
padding-bottom: 11px;
}
.accordion_panel p
{
padding-top: 33px;
color: #6c6a74;
line-height: 2.2;
}
.events
{
width: 100%;
margin-top: 58px;
}
.event
{
width: 100%;
}
.event:not(:last-child)
{
margin-bottom: 20px;
}
.event_date
{
width: 63px;
height: 63px;
background: #ff6600;
}
.event_day
{
font-size: 26px;
font-weight: 500;
color: #FFFFFF;
line-height: 0.75;
}
.event_month
{
font-size: 10px;
font-weight: 400;
color: #FFFFFF;
line-height: 0.75;
margin-top: 10px;
}
.event_title a
{
font-size: 16px;
font-weight: 600;
color: #44425a;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.event_body
{
padding-left: 34px;
-webkit-transform: translateY(-5px);
-moz-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-o-transform: translateY(-5px);
transform: translateY(-5px);
}
.event_title a:hover
{
color: #ff6600;
}
.event_subtitle
{
font-size: 14px;
font-weight: 500;
color: #6c6a74;
margin-top: 5px;
}
.news
{
width: 100%;
margin-top: 58px;
}
.news_post
{
width: 100%;
}
.news_post:not(:last-child)
{
margin-bottom: 39px;
}
.news_post_image
{
width: 72px;
height: 72px;
}
.news_post_image img
{
max-width: 100%;
}
.news_post_body
{
padding-left: 25px;
}
.news_post_date
{
font-size: 12px;
font-weight: 600;
color: #ff5c00;
line-height: 0.75;
}
.news_post_title
{
margin-top: 10px;
}
.news_post_title a
{
font-size: 16px;
font-weight: 600;
color: #44425a;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.news_post_title a:hover
{
color: #ff6600;
}
.news_post_author
{
margin-top: 5px;
}
.news_post_author,
.news_post_author a
{
font-size: 14px;
font-weight: 500;
color: #6c6a74;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.news_post_author a:hover
{
color: #ff6600;
}
.video
{
width: 100%;
background: #FFFFFF;
}
.video_container_outer
{
width: 100%;
height: 507px;
}
.video_content
{
margin-top: calc(-1 * (750px / 1.875) / 2);
}
.video_container
{
width: 100%;
height: 100%;
background: red;
box-shadow: 0px 5px 15px rgba(0,0,0,0.05);
}
.video-js
{
width: 100% !important;
height: 100% !important;
overflow: hidden;
}
.video-js > div
{
width: 100%;
height: 100%;
}
.video-js .vjs-tech
{
height: 100% !important;
}
.vjs-big-play-button
{
z-index: 9;
outline: none;
}
.vjs-big-play-button:focus
{
outline: none;
}
.vjs-big-play-button:hover
{
-webkit-transform: translate(-50%, -50%) scale(1.05);
-moz-transform: translate(-50%, -50%) scale(1.05);
-ms-transform: translate(-50%, -50%) scale(1.05);
-o-transform: translate(-50%, -50%) scale(1.05);
transform: translate(-50%, -50%) scale(1.05);
}
.vjs-loading-spinner
{
display: none !important;
}
.video-js .vjs-control-bar
{
opacity: 0 !important;
}
.vjs-has-started:hover .vjs-control-bar
{
opacity: 1 !important;
}
.footer
{
width: 100%;
padding-top: 1px;
padding-bottom: 1px;
}
.footer .logo_container
{
position: absolute;
top: -10px;
left: 0;
}
.footer_about_text
{
padding-top: 49px;
}
.footer_social
{
margin-top: 22px;
}
.footer_social ul li
{
display: inline-block;
}
.footer_social ul li:not(:last-child)
{
margin-right: 24px;
}
.footer_social ul li a i
{
font-size: 16px;
color: #ff6600;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.footer_social ul li a i:hover
{
color: #ffae00;
}
.copyright
{
font-size: 12px;
font-weight: 500;
color: #b3b3b3;
margin-top: 70px;
}
.ft1{
font-weight: bold;
background: rgba(0, 129, 169, 0.16);
clear: both;
padding: 2px 35px 2px 10px;
color: #111;
font-size: 20px;
letter-spacing: 5px;
border-bottom:2px solid #ff9800;
text-align:left;
}
.footer_title
{
font-size: 22px;
font-weight: bold;
color: #f2f1f8;
padding: 0px 10px;
background: #87e0fd;
background: -moz-linear-gradient(-45deg, #87e0fd 0%, #00adb5 31%, #00adb5 31%, #002050 100%);
background: -webkit-linear-gradient(-45deg, #87e0fd 0%,#00adb5 31%,#00adb5 31%,#002050 100%);
background: linear-gradient(135deg, #87e0fd 0%,#00adb5 31%,#00adb5 31%,#002050 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#222831',GradientType=1 );
letter-spacing: 5px;
}
.footer_list
{
margin-top: 15px;
}
.footer_list li:not(:last-child)
{
margin-bottom: 1px;
}
.footer_list li a
{
font-size: 16px;
font-weight: 500;
color: #212529;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.footer_list li a:hover
{
color: #791225;
}
.footer_contact_info
{
padding-right: 70px;
margin-top: 26px;
}
.footer_contact_item:not(:last-child)
{
margin-bottom: 23px;
}
.footer_contact_title
{
font-size: 14px;
font-weight: 500;
color: #d53359;
}
.footer_contact_line
{
font-size: 14px;
font-weight: 500;
color: #6c6a74;
margin-top: 3px;
}
.footer .alert {
height: 50px;
display: flex;
align-items: center;
}
.contact_row {
padding: 5px 0;
display: flex;
align-items: center;
}
.contact_text {
text-align: left;
}
.contact_text a {
color: #005e7a;
}
.contact_text a:hover {
color: #791225;
}
.contact_map {
height: 100%;
min-height: 320px;
}
.contact_map iframe {
width: 100%;
height: 100%;
min-height: 320px;
border: 0;
}
.explist-cards .card {
border: 0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.explist-cards .card:hover {
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
transform: translateY(-3px);
}
.explist-cards .card-title-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
margin-bottom: 10px;
}
.explist-cards .card-title-row .card-title {
font-size: 20px;
font-weight: 600;
line-height: 1.4;
color: #005e7a;
margin: 0;
}
.explist-cards .card-title-row .btn-primary {
background: #ff8a00;
border-color: #ff8a00;
font-size: 13px;
white-space: nowrap;
}
.explist-cards .card-title-row .btn-primary:hover {
background: #ff6600;
border-color: #ff6600;
}
.explist-cards .card-text {
font-size: 14px;
color: #000000;
line-height: 1.7;
margin: 0;
}
.explist-cards .card-body {
padding: 22px 24px;
}
.jumbotron .lead {
font-weight: 400;
color: #000000;
}
.team-cards .card-text {
font-size: 16px;
color: #000;
line-height: 1.5;
}
.mainjoin h2.gh1 {
background: #d2eaf1;
padding-left: 20px;
border-bottom: 2px solid #ff9800;
font-size: 32px;
}
@media (max-width: 575.98px) {
#navimg .col-lg-12 > .d-flex {
flex-direction: column;
}
#smallheading {
text-align: center;
justify-content: center;
}
#navimg .navbar {
width: 100% !important;
}
.navbar-toggler {
display: block;
margin: 0 auto;
}
#navbarNavDropdown .navbar-nav {
text-align: center;
width: 100%;
}
#navbarNavDropdown .nav-link {
display: block;
padding-left: 10px;
padding-right: 10px;
}
#navimg .d-flex.align-content-stretch {
justify-content: center;
text-align: center;
}
}
.navbar .nav-link,
.navbar .dropdown-item {
font-size: 16px;
}
h1.text12,
h1.text1 {
margin: 0;
}