@charset "utf-8";

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}

.fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    -o-transition: opacity .15s linear;
    transition: opacity .15s linear;
}

.fade.in {
    opacity: 1;
}

.modal-open {
    overflow: hidden;
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
}

.modal-backdrop.fade {
    filter: alpha(opacity=0);
    opacity: 0;
}

.modal-backdrop.in {
    filter: alpha(opacity=50);
    opacity: .5;
}

.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000;
}

.modal.fade .modal-dialog {
    -webkit-transition: -webkit-transform .3s ease-out;
    -o-transition: -o-transform .3s ease-out;
    transition: transform .3s ease-out;
    -webkit-transform: translate(0,-25%);
    -ms-transform: translate(0,-25%);
    -o-transform: translate(0,-25%);
    transform: translate(0,-25%);
}

.modal.in .modal-dialog {
    -webkit-transform: translate(0,0);
    -ms-transform: translate(0,0);
    -o-transform: translate(0,0);
    transform: translate(0,0);
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
}
.modal-content {
    position: relative;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #999;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 6px;
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);
    box-shadow: 0 3px 9px rgba(0,0,0,.5);
}
.modal-header {
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
}
.modal-header .close {
    margin-top: -2px;
}
.modal button.close {
    -webkit-appearance: none;
    padding: 0;
    cursor: pointer;
    background: 0 0;
    border: 0;
}
.modal .close {
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
}
.modal-title {
    margin: 0;
    line-height: 1.42857143;
}
.modal .h4, h4 {
    font-size: 20px;
	font-size: 2rem;
}
.modal-body {
    position: relative;
    padding: 15px;
}
.modal-body p{
    font-size: 18px;
    font-size: 1.8rem;
}
.modal-footer {
    padding: 15px;
    text-align: right;
    border-top: 1px solid #e5e5e5;
}
:after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.btn-group-vertical>.btn-group:after, .btn-group-vertical>.btn-group:before, .btn-toolbar:after, .btn-toolbar:before, .clearfix:after, .clearfix:before, .container-fluid:after, .container-fluid:before, .container:after, .container:before, .dl-horizontal dd:after, .dl-horizontal dd:before, .form-horizontal .form-group:after, .form-horizontal .form-group:before, .modal-footer:after, .modal-footer:before, .modal-header:after, .modal-header:before, .nav:after, .nav:before, .navbar-collapse:after, .navbar-collapse:before, .navbar-header:after, .navbar-header:before, .navbar:after, .navbar:before, .pager:after, .pager:before, .panel-body:after, .panel-body:before, .row:after, .row:before {
    display: table;
    content: " ";
}
.btn-group-vertical>.btn-group:after, .btn-toolbar:after, .clearfix:after, .container-fluid:after, .container:after, .dl-horizontal dd:after, .form-horizontal .form-group:after, .modal-footer:after, .modal-header:after, .nav:after, .navbar-collapse:after, .navbar-header:after, .navbar:after, .pager:after, .panel-body:after, .row:after {
    clear: both;
}
.modal .btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
	width: auto;
}
.modal .btn.focus, .modal .btn:focus, .modal .btn:hover {
    color: #333;
    text-decoration: none;
}
.modal .btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}
.modal .btn-default:hover {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

@media (min-width: 768px){
.modal-dialog {
    width: 600px;
    margin: 30px auto;
}
.modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
}
}

body{font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif}
.en{letter-spacing:0;}
.tc{letter-spacing:0.2em; font-family:"Microsoft YaHei UI", "Microsoft JhengHei"}
.tc h1, .tc .introArea p, .tc .whoArea h3{letter-spacing:0.2em;}

a{cursor:pointer; text-decoration:none; transition:all 0.4s ease;}

a.btn_banner{display:inline-block; padding:10px 0; background:rgba(47, 32, 89, 0.5); border:1px solid #fff; color:#fff; border-radius:30px;}
a.btn_banner:hover{background:rgba(47, 32, 89, 0.8); color:#fff; border:1px solid #fff;}
a.btn_color1{display:inline-block; padding:10px 0; border:1px solid #6f60aa; color:#2d1f59; border-radius:30px;}
a.btn_color1:hover{background:rgba(47, 32, 89, 0.5); color:#fff}
a.btn_color2{display:inline-block; padding:10px 0; border:1px solid #fff; color:#fff; border-radius:30px}
a.btn_color2:hover{background:rgba(255, 255, 255, 0.2)}
a.btn_form{display:block; background:#f37021; padding:10px 40px; border:0; color:#fff; border-radius:30px}
a.btn_form:hover{background:rgba(50, 50, 50, 0.5)}

p, li p{margin-bottom:1em; line-height:1.5em}

.floatL{float:left}
.floatR{float:right}
.bgGrey{background:#666}
.bgWhite{background:#fff}
.center{text-align: center}
.btn{text-align:center;}

.outerWrap{position:relative; background:#000; overflow:hidden}

header{background:rgba(47,32,89,0.8); width:100%; position:fixed; left:0; top:0; z-index:999; transition:all 0.4s ease;}
header .wrap{position:relative; width:auto; padding:0 8%;}
header .logo{display:inline-block; width:200px; height:50px; transition:all 0.4s ease; background:url(../images/logo.png) no-repeat 0 10px; padding:15px 0}
header.shrink{background:rgba(0,0,0,0.6);}
header .wrap .menu{display:inline-block; float:right; font-size:1em; margin-top:1.2em}
header .wrap .lang{font-size:14px;font-size:1.4rem; color:#fff; border:1px solid #fff; width:120px; height:2.5em; vertical-align:middle; line-height:2.5em; text-align:center; cursor:pointer;}
header .wrap .menu .en{letter-spacing:0.5px}
header .wrap .dropdown-content {display: none; position: absolute; margin-top:0; font-size:0.8em; background-color:#fff; width:150px; border-top:2px solid #333; box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.6); z-index: 1;}
header .wrap .dropdown-content a{display: block; color:#333; border-bottom:1px solid #999; line-height:1em; padding:15px 20px}
header .wrap .dropdown-content a:last-child{border-bottom:0;}
header .wrap .dropdown-content a:hover{color:#fff; background-color: #462f83;}
header .wrap .menu:hover .dropdown-content {display: block;}
header.shrink ul.menu li a:before{height:0;}

.sidenav .closebtn{position:absolute; top:10px; left:10px; width:30px; height:30px; background:#555; }
.sidenav .closebtn:before, .sidenav .closebtn:after{width: 20px; height: 2px; content: ''; position: absolute; top:13px; left:5px; background-color: #fff; transition: all 0.4s ease-out; }
.sidenav .closebtn:before{transform: rotate(-45deg)}
.sidenav .closebtn:after{transform: rotate(45deg)}
.sidenav .closebtn:hover:before{transform: rotate(45deg); transition: all 0.4s ease-out;}
.sidenav .closebtn:hover:after{transform: rotate(-45deg); transition: all 0.4s ease-out;}

footer{background:rgba(47,32,89,0.8); }
footer .Txt{width:100%; padding:10px 0 0 0;}
footer .info{font-size:14px; line-height:1.8em; font-weight:normal; color:#fff;}
footer .address li{line-height: 1.5em; padding: 0 0 15px 30px; list-style: none; background-repeat: no-repeat; background-position: left top; background-size: 20px;}
footer .company{margin:0 0 0 -30px; font-size:1.2em; }
footer .location{background-image: url("../images/icon_address.svg")}
footer .contact li{line-height: 1.5em; padding: 0 0 15px 30px; list-style: none; background-repeat: no-repeat; background-position: left top; background-size: 20px;}
footer .phone{background-image: url("../images/icon_phone.svg")}
footer .fax{background-image: url("../images/icon_fax.svg")}
footer .email{background-image: url("../images/icon_email.svg")}
footer li a{color:#fff}

.endArea{float:left; width:100%; font-size:0.85em; line-height:0.85em; color:rgba(255, 255, 255, 0.7); background:#2f2059; vertical-align: middle;}
.endArea a{color:#fff; text-decoration: none; margin-left:10px;}
.endArea .iconFb{display:inline-block; float:right; background-color:#3b5999; border-radius: 50%; width: 32px; height:32px; color:#fff; font-size:1.3em; line-height:34px; text-align: center; border: none; outline: none; cursor: pointer; overflow: hidden; box-sizing:border-box; transition:all 0.4s ease-in-out}
.endArea .iconFb:hover{background-color:#fff; color:#3b5999; transition:all 0.4s ease-in-out}

.goTopBox{display:none; position:fixed; right:0; text-align:center; z-index:999;}
.goTopBox a{background: rgba(238, 20, 70, 0.8); color:#FFF;}
.goTopBox a:hover{line-height:0.85em}


nav.dot-nav-component {position: fixed; right: 10px; top: 50%; transform: translate(-50%,-50%); z-index: 998;}
nav.dot-nav-component .item {display: block; margin-bottom: 15px; position: relative; background:#999; border-radius:50%; }
nav.dot-nav-component .item .active{background: #ee1446; border:2px solid #fff}
nav.dot-nav-component a {display: block; width:10px; height:10px; border-radius:50%; position: relative; font-size: 0; line-height: 0; letter-spacing: 0; cursor: pointer; border:2px solid transparent}
nav.dot-nav-component a:hover{background: #ee1446; border:2px solid #fff}

.tooltip {position:relative; display:block;}
.tooltip .tooltiptext {visibility: hidden; display:block; min-width: 100px; background-color:rgba(47,32,89,0.6); color:#fff; font-weight:600;  border-bottom:1px solid #bbb; padding:20px 15px; position:absolute; font-size:14px; z-index:1; top:-35px; right:20px;}
.tooltip .tooltiptext::after {content: " "; position: absolute; bottom:-1px; left: 100%; width:8px; height:8px; border-bottom: 1px solid #bbb; background:linear-gradient(45deg, rgba(47,32,89,0.6) 5px, transparent 5px)}
.tooltip:hover .tooltiptext {visibility: visible; right:25px; transition:0.4s ease}
.tc .tooltiptext{letter-spacing:0.1em}


@media only screen and (min-width:1366px){
header .wrap{padding:0 8%;}
.m_menu{display:none;}
.wrap{padding:0 8%;}
.tc #slogan {height:3em;}
.en	#slogan {height:3.5em;}
.btn{font-size:0.9rem; width:100%; text-align: center}

footer .address{display:inline-block; margin:1em 0 0 0;}
footer .contact{display:inline-block; float:right; right:8%; border-left: solid 1px #bdb8ca; padding:10px 0 0 20px; vertical-align: top; margin-bottom:10px}

.endArea{padding:20px 0; line-height: 2.5em}
.endArea .copyright{display:inline-block; float:left;}
.endArea .socialMedia{display:inline-block; float:right;}

.goTopBox {bottom:85px;} 
.goTopBox a{width:70px; height:70px; bottom:65px; font-size:3.5em; line-height:65px}
}

@media only screen and (max-width:1366px){
header.shrink{display:none}	
/*.outerWrap{padding-top:50px;}*/
.mainArea{padding:20px 0;}

header{display:none;}
.m_menu{display:block; width:100%; box-shadow:0px 1px 2px 1px rgba(0,0,0,0.2); position:fixed; top:0; left:0; z-index:999;}
.m_menu .controlBox{background:rgba(0,0,0,0.6);}
.m_menu .controlBox a.main{display:block; float:left; width:80px; height:80px; color:#FFF; padding:25px 30px; box-sizing:border-box}
.m_menu .controlBox a.main div{width: 30px; height: 3px; background-color:#fff; margin: 5px 0;}
.m_menu .controlBox .m_logo{background:url(../images/m_logo.png) no-repeat center; background-size:contain; margin:1em 0; width:300px; height:50px; position:absolute; left:50%; margin-left:-150px; overflow:hidden;}
.m_menu .controlBox .right{float:right;margin-top:16px;margin-right:10px;}
.m_menu .controlBox .right a{display:inline-block;font-size:12px;padding:5px 7px;color:#FFF;text-align:center;border-radius:3px;border:1px solid #FFF;}

.m_menu .sidenav {height:100%; width:0; position:fixed; z-index:1; top:0; left:0; background-color:#202642; overflow-x:hidden; transition:0.5s; padding-top:50px; color:#fff; white-space:nowrap; box-shadow: 1px 0px 2px 0px rgba(0,0,0,0.7)}
.m_menu .sidenav p {padding:10px 10px 2px 10px; font-size:1em; color:#fff; display:block;}
.m_menu .contactIcon{padding:10px 15px }
.m_menu .contactIcon a{margin:0 0 0 5px; display:inline-block; border: 2px solid #999; width:22px; height:22px; vertical-align:middle; line-height:1.2em; text-align:center; border-radius:100%; padding:10px; animation-duration: 0.4s; }
.m_menu .contactIcon a:hover{background:#6f60aa; animation-duration: 0.4s;}
.m_menu .contactIcon a .phone{width:22px; height:22px; background-image: url("../images/icon_phone.svg")}
.m_menu .contactIcon a .email{width:22px; height:22px; background-image: url("../images/icon_email.svg")}
.m_menu ul.nav{font-family:"Microsoft YaHei UI", "Microsoft JhengHei"; padding:10px 10px}
.m_menu ul.nav li{border-top:1px solid #666;}
.m_menu ul.nav li:last-child{border-bottom:1px solid #666;}
.m_menu ul.nav li a{padding:10px 10px; display:block; font-size:0.8em; color:#FFF;}
.m_menu ul.nav li a:hover{background:#555}
.m_menu ul.nav li a i{float:right;}
.m_menu ul.nav li .submenu{display:none;}
.m_menu ul.nav li .submenu a{padding:10px 20px; font-size:1em;}
.m_menu ul.nav li .submenu a:hover{background:#D10003;}
.sidenav .m_logo_txt{position:absolute; top:15px; left:50px; background:url(../images/m_logo_txt.png) no-repeat; width:158px; height:30px}	

footer .Txt{padding:10px 5% 0 5%;}
footer .address{display:block; margin:1em 0 0 0;}
footer .contact{display:block; float:none; width:auto; right:0; border-left: 0; padding:0 0 0 0; vertical-align: top; margin-bottom:10px}

.endArea{box-sizing: border-box;padding:10px 5%; line-height: 2.5em}
.endArea .copyright{display:inline-block; float:left;}
.endArea .socialMedia{display:inline-block; float:right;}	

.goTopBox {bottom:65px;} 
.goTopBox a{width:60px; height:60px;font-size:3em; line-height:55px}
}




@media only screen and (max-width:768px){

.m_menu .controlBox .m_logo{margin:0.7em 0; width:240px; height:30px; margin-left:-120px}
.m_menu .controlBox a.main{width:55px; height:50px; padding:15px 15px;}
.m_menu .controlBox a.main div{width: 20px; height: 2px; margin: 4px 0;}	

.endArea {padding:10px 0 0 0}
.endArea .wrap{padding:0}
.endArea .copyright{display:block; float:none; text-align:center; margin:0 10px 0;}
.endArea .socialMedia{display:block; float:none; text-align:center; background:rgba(255,255,255,0.1); padding:10px 0; margin:10px 0 0 0;}
.endArea .socialMedia span{line-height:1.5em; vertical-align:middle}
.endArea .socialMedia a{float:none; vertical-align:middle}
	
.goTopBox{bottom:65px;} 
.goTopBox a{width:50px; height:50px; font-size:2.8em; line-height:45px}
}



/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */
/* Portrait */
@media only screen and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
 {
	  
.m_menu .controlBox .m_logo{width:200px; margin-left:-100px;}
	 
.goTopBox a{width:32px; height:32px; font-size:2em; line-height:36px}
	
}