@charset "utf-8";
/* CSS Document */
html,body { margin:0; padding:0;}

/*header start*/
header,footer {
	width: 100%;
	float: left;
	background-color: #24458b;
}
.relative-center,.footer-inner {
	max-width: 1206px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	position: relative;
	width: 100%;
}
.logo {float: left; max-width:294px; padding-top:26px; padding-bottom:26px;}
@media (max-width:991px) {.logo {width:30%;} }
@media (max-width:900px) {.logo {width:30%; min-width:250px; padding-top:10px; padding-bottom: 10px; padding-left: 10px;} }
.top-right {float:right;}
@media (max-width:900px) { .top-right { display:none;} }
.top-link {float: left; margin-top:26px;}
.top-link ul {float: right;}
.top-link li {float: left; padding-right: 20px;}
.top-link li:last-child {padding-right: 0px;}
.top-link li a {float:left; font-size: 95%; color:#7fa0e4; vertical-align: middle;}
.top-link li a:before {content: ''; width: 14px; height: 14px; display: inline-block; margin-right: 7px; vertical-align: middle; background-image:url(../../images/link-icon.png);}
.top-link li a:hover,.link li a:focus {color: #c0dcff;}
.top-link li:nth-child(1) a:before{background-position: 0px 0px;}
.top-link li:nth-child(2) a:before{background-position: -14px 0px;}
.top-link li:nth-child(3) a:before{background-position: -28px 0px;}
.top-link li:nth-child(4) a:before{background-position: -42px 0px;}
.top-link li:nth-child(1) a:hover:before,.link li:nth-child(1) a:focus:before{background-position: 0px 14px;}
.top-link li:nth-child(2) a:hover:before,.link li:nth-child(2) a:focus:before{background-position: -14px 14px;}
.top-link li:nth-child(3) a:hover:before,.link li:nth-child(3) a:focus:before{background-position: -28px 14px;}
.top-link li:nth-child(4) a:hover:before,.link li:nth-child(4) a:focus:before{background-position: -42px 14px;}
@media (max-width:991px) {.top-link li:nth-child(1) {display: none;}}
.search {
	float: right;
	margin-top: 22px;
	margin-left: 25px;
}
.search-input,.search-submit {
	border:none;
	background-color: #102758;
	color: #FFFFFF;
	line-height: 24px;
    height:26px;
	padding-right: 8px;
	padding-left: 8px;
	font-size: 95%;
	vertical-align: middle;
	width:143px;
	outline:none;
}
.search-input {height:26px;line-height: 28px\0;}
.search-input::-webkit-input-placeholder {color: #8f9fc2;}
.search-input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */color: #8f9fc2;}
.search-input::-moz-placeholder { /* Mozilla Firefox 19+ */color: #8f9fc2;}
.search-input:-ms-input-placeholder { /* Internet Explorer 10+ */color: #8f9fc2;}
.search-submit {
	font-size: 0px;
	vertical-align: middle;
	margin-left: -5px;
	padding-right: 15px;
	padding-left: 15px;
	width: auto;
	background-image: url(../../images/search-icon.png);
	background-repeat: no-repeat;
	background-position: center center;
}
.search-submit:hover,.search-submit:focus {background-image: url(../../images/search-icon_.png);}
/*header end*/

/*content start*/
.main-content {width:100%; float:left;}
.main-wrapper {display: table; width:100%;table-layout: fixed;}
.area-left,.area-right {display: table-cell; vertical-align:top;}
.area-left {width:77.1%;}
.banner-wrapper{ position:relative; border-bottom: 2px solid #e70012;}
.banner {display:block}
.banner img {width:100%;}
.banner:before {
    content: '建構卓越的海洋事業集團誠信．創新．成長';
    position:absolute;
    top:15%;
    left:6%;
    width:11em;
    font: 2em "Microsoft Jhenghei", "微軟正黑體", "Trebuchet MS", Arial, Helvetica, sans-serif;
    color:#ffffff;
    text-shadow:0px 0px 10px rgba(20%,20%,40%,0.7);
}
.social-breadcrumbs-wrapper {position: absolute; bottom:0;width: 100%;}
/*social-links start*/
    .social-links-tooltip {display: block; float: left; width:100%; z-index: 900; position:relative;}
    .social-links a {
        background-color: #cfcfcf;
        height: 40px;
        width: 40px;
        font-size: 0px;
        float: left;
        text-align: center;
        line-height: 40px;
        color: #FFFFFF;
    }
    .social-links a:hover,.social-links a:focus {}
    .social-links a.switcher-fontlevel {font-size: 1em; font-family:"Microsoft Jhenghei", "微軟正黑體", "Trebuchet MS", Arial, Helvetica, sans-serif;}
    .social-links a.is-active {background-color: #2752d1;}
    .social-links,.switcher-print {background-repeat: no-repeat; background-position: center center;}
    a.switcher-print {background-color: #22ccb6; background-image: url(../../images/print.svg);}
    a.social-mail {background-color: #d8a22c; background-image: url(../../images/mail.svg);}
    a.social-fb {background-color: #4e6dc5; background-image: url(../../images/fb.svg);}
    a.social-gg {background-color: #d73d31; background-image: url(../../images/gl.svg);}
    a.social-tt {background-color: #1bb2e9; background-image: url(../../images/tr.svg);}
    a.social-pl {background-color: #e56824; background-image: url(../../images/pk.svg);}
    a.social-le {background-color: #00b500; background-image: url(../../images/le.svg);}
/*social-links end*/
.breadcrumbs{
    float:left; 
    width:100%; 
    background:rgba(0%,0%,0%,0.5); 
    padding-left: 15px;
    padding-top:13px;
    padding-bottom:13px;
   
}
.breadcrumbs ul li {float:left;}
.breadcrumbs ul li a {
    color:#a4a4a4; 
    background-image: url(../../images/breadcrumbs-icon.png);
    background-repeat: no-repeat;
    background-position: left 5px;
    padding-left:18px;
    padding-right: 12px;
    line-height: 1.5em;
    font: 0.935em "Microsoft Jhenghei", "微軟正黑體", "Trebuchet MS", Arial, Helvetica, sans-serif;
}
.breadcrumbs ul li a:hover,.breadcrumbs ul li a:focus{
    color:#d7d7d7;
    text-decoration:underline;
    background-image: url(../../images/breadcrumbs-icon_.png);}
.main-title {
    font: 1.2em "Microsoft Jhenghei", "微軟正黑體", "Trebuchet MS", Arial, Helvetica, sans-serif;
    float:left;
    width:100%;
    padding: 15px 20px 15px 50px;
    background-image: url(../../images/main-title-icon.svg);
    background-repeat: no-repeat;
    background-position: 15px 27px;
}
.main-title::first-letter {font-size: 1.4em;}
.main-inner {
   display: inline-block;
   width:100%;
   padding: 0px 15px 30px 15px;
   font: 1em "Microsoft Jhenghei", "微軟正黑體", "Trebuchet MS", Arial, Helvetica, sans-serif;
   line-height: 1.8em;
   text-align:justify;
}
.area-right {width:22.9%; background-color: #ebebeb;}
@media screen and (max-width: 900px){
    .area-right {display: none;}
    .area-left {width:100%; overflow: hidden;display: block;}
}
@media screen and (max-width: 680px){
    .main-inner {line-height: 1.5em;}
    .banner:before {
        font-size: 1.5em;
        font-size: 22px\0;
    }
}
@media screen and (max-width: 580px){
    .banner:before {
        font-size: 1.2em;
        font-size: 18px\0;
        top:30px;
        left:30px;
    }
    
    .banner-wrapper,.social-breadcrumbs-wrapper{position: static;}
    .banner-wrapper {border-bottom: none;}
    .banner {border-bottom: 2px solid #e70012;}
    .breadcrumbs {background:rgba(0%,0%,0%,0);}
    
    .social-links-tooltip {display: -webkit-flex;display: flex;}
    .social-links a{-webkit-flex: 1; flex: 1; width:auto; height:auto;}
    
}

.leftmenu {
	width: 25%;
	font-family: "微軟正黑體";
	z-index: 999;
	display: table-cell;
	vertical-align: top;
}
.left-tit {
	color: #9fb1d8;
	background-color: #102758;
	line-height: 63px;
	font-weight: normal;
	padding-left: 20%;
	background-image: url(../../images/left-tit.svg);
	background-repeat: no-repeat;
	background-position: 10% 21px;
	font-size: 1.2em;
    border-bottom: 2px solid #e70012;
}
.leftbgul01 {
	display: block;
	float: left;
	list-style-type: none;
	width: 100%;
	padding-bottom: 20px;	
}
.leftbgul01 li {border-bottom: 1px solid #e1dfdf; float:left; width:100%;}
.leftbgli01 {
	width: 100%;
	display: block;
	float: left;
	list-style-type: none;
	}

.leftbgli01 a {
	text-decoration: none;
	display: block;
	color: #2b2b2b;
	float: left;
	padding-left:calc( 11.5% + 21px);
	vertical-align: middle;
	padding-top: 18px;
	padding-bottom: 18px;
	width: 100%;
	padding-right: 10px;
	outline: none;
	font-size: 105%;
    position: relative;
}

.leftbgli01 a:before {
    content: '';
    position: absolute;
    float:left;
    left:11.5%;
    margin-top: 2px;
    width:11px;
    height:11px;
    background-image: url(../../images/leftmenu-icon01.svg);
	background-repeat: no-repeat;
	background-position: 0px 0px;
}
.leftbgli01 a:hover,.leftbgli01 a.active,.leftbgli01 a:focus  {
    color: #24458b;
    background-image: url(../../images/left-menubg.png);
}
.leftbgul02 {
	float: left;
	width: 100%;
    border-top: 1px solid #e1dfdf;
}
.leftbgul02 li:last-child {border-bottom:none;}
.leftbgli02 {
	list-style-type: none;
    float: left;
	width: 100%;
}
.leftbgli02 a {
	display: block;
	float: left;
	width: 100%;
	color: #525252;
	padding-left: calc( 20% + 21px);
	padding-right: 10px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

.leftbgli02 a:before {background-image: url(../../images/leftmenu-icon02.svg); left:20%; }
.leftbgul03 {
    float: left;
	width: 100%;
    border-top: 1px solid #e1dfdf;
}
.leftbgli03 {
	list-style-type: none;	
}
.leftbgli03 a {
	float: left;
	padding-left:calc( 29% + 21px);
	width: 100%;
	color: #525252;
	display: block;
	padding-right: 10px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
.leftbgli03 a:before {background-image: url(../../images/leftmenu-icon03.svg); left:29%;}
/*content end*/

/*footer*/
footer {background-color: #2d5891;}
.footer-inner {padding-top: 45px;padding-bottom: 45px;overflow: hidden;}
.footer-copyright {float:left;width:100%;background-color:#142a47;color:#486792;}
.footer-logo{
    font: 1.1em "Microsoft Jhenghei", "微軟正黑體", "Trebuchet MS", Arial, Helvetica, sans-serif;
    float:left;
    width:100%;
    padding-left:30px;
    padding-bottom: 10px; 
    margin-bottom: 12px;
    background-image: url(../../images/footer-logo.svg); 
    background-repeat:no-repeat; 
    background-position: left 9px;
    line-height: 40px;
    border-bottom: 1px solid #486792;
}
.footer-info {float:left; width:30%;color:#cad2d8;}
.footer-info ul li {float:left;width:100%; padding:10px 0 10px 32px; font-size: 0.935em; line-height: 20px;position: relative;}
.footer-info li:before {position: absolute;left:0;content: ''; width:20px;height: 20px;background-image: url(../../images/footer-info-icon.svg); background-repeat:no-repeat;float:left; vertical-align:middle; margin-left:2px; margin-right: 5px;}
.footer-info li:nth-child(1):before{background-position:left 0px;}
.footer-info li:nth-child(2):before{background-position:left -20px;}
.footer-info li:nth-child(3):before{background-position:left -40px;}
.footer-info li:nth-child(4):before{background-position:left -60px;}
.footer-info li:nth-child(2) {letter-spacing: 3px;}
.footer-info li:nth-child(2) a {color:#cad2d8;}
.footer-info li:nth-child(2) a:hover,.footer-info li:nth-child(2) a:focus {color:#ffffff; text-decoration: underline; outline: none;}
.footer-nav {float:left; width:67%; margin-left: 3%; display: -webkit-flex; display: -ms-flex: 1; display: flex;}
.column {-webkit-flex: 1; -ms-flex: 1; flex: 1; margin-left: 25px; font: 1.0em "Microsoft Jhenghei", "微軟正黑體", "Trebuchet MS", Arial, Helvetica, sans-serif; color:#cad2d8; padding-bottom: 30px; padding-top: 8px;}
.footer-nav-title {font-size:1.1em;color:#efefef; margin-bottom: 20px;display: block;background-image: url(../../images/footer-icon.svg); background-repeat:no-repeat; background-position: left 3px; padding-left:12px;}
.column li a {display: block;color:#cad2d8;font-size: 0.935em; margin:10px 13px;}
.column a:hover,.column a:focus {color:#ffffff; text-decoration: underline; outline: none;}
.footer-declare {display:block;border-top: 1px solid #537299; clear:both; padding-top: 20px;}
.brands {float:left;width:100%;}
.brands figure {float:left;padding-right: 5px;min-height: 33px;}
.declare a {float:left; color:#cad2d8;font-size: 0.8em;text-decoration: underline;margin-top: 12px;}
.declare a:before{content: '';width:1px;height:14px;background-color: #7c95b5; float:left; margin-right: 10px; margin-left: 5px;}
.declare a:first-child:before {display:none;}
.declare a:hover,.declare a:focus{color:#ffffff; text-decoration: underline; outline: none;}
a.gotop {float:right; margin-top: -15px; outline: none;}
.footer-copyright{padding:18px 0px; font-size:0.8em;}
.footer-copyright i {float:right;}
.footer-copyright i ins {text-decoration: none;}
.language-container {
    display:none;
    float:right;
    margin-right: 0.5em;
    border: 1px solid #486792;
    color:#486792;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.language-container a {outline: none;}
.lang-select {color:#486792;padding:7px 15px;display: block;}
.lang-select:hover {background-color: aliceblue;}
.lang-select:after {content: '';}

.language-dropdown-container {
    display:none;
    /* border: 1px solid #FFFFFF; */
    color:#486792;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    position: absolute;
    bottom:3px;
    background-color: aliceblue;
    padding:5px 0;
    box-shadow: 0 5px 5px rgba(51,51,51,.5);
}

.language-dropdown-container ul li a {display: inline-block;padding:7px 15px;min-width: 86px; color:#486792;}
.language-dropdown-container ul li a:hover {background-color: #cd0916;color:#ffffff;}

@media screen and (max-width: 1206px){
    .footer-info { width:37%;}
    .footer-nav { width:60%; margin-left: 1%;}
    .footer-logo {margin-left: 5px; width:calc(100% - 5px);}
    .declare,.brands {padding-left: 5px;}
}

@media screen and (max-width: 900px) {
    .footer-copyright span {display: none;}
    .language-container {display: block;}
    .footer-copyright i {float:left; display: inline-block; padding-left: 5px; font-size:0.75em; line-height: 28px;}
}

@media screen and (max-width: 850px){
    .footer-info { width:100%; padding-bottom: 15px;}
    .footer-nav,.footer-copyright span {display: none;}
    .footer-inner {padding-top: 25px;}
    .declare a:last-child {display: none;}
}
@media screen and (max-width: 650px) {
    .footer-inner {padding-bottom: 25px;}
    a.gotop {float:inherit;width:100%; margin-top: 15px; text-align: center;display: inline-block;}
    .footer-copyright i ins {display: none;} 
}
@media screen and (max-width: 350px){
    .footer-inner {padding-bottom: 15px;}
    .declare a {float:none; display: inline-block;}
    .declare {float:left; width:100%; padding-bottom: 30px;}
     a.gotop {float:none; margin-top: -10px; outline: none;}
}


/*共用ease*/
.seemore,.seemore:hover,.seemore:focus,.guild li a img,.guild li a:hover img,.guild li a:focus img,.guild li a:hover figcaption,.guild li a:focus figcaption,.guild li a figcaption {
    -webkit-transition: all 0.5s ease;                  
    -moz-transition: all 0.5s ease;                 
    -o-transition: all 0.5s ease;   
    -ms-transition: all 0.5s ease;          
    transition: all 0.5s ease; 
}


/*--relation page--*/

.relation table {width:100%;}
.relation table td,.relation table th {border: 1px solid #eeeeee; padding: 10px;}
.relation table th {background-color: #5982b9; color:#ffffff; text-align: right; width:16em;}
.relation table tr:hover td {background-color: #f2f6f7;}
.relation table td input[type="text"],.relation table td textarea
{
    min-height: 2.5em;
    box-sizing: border-box;
    padding-left: 1em;
    padding-right: 1em;
    font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif, 微軟正黑體;
    font-weight: normal;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 3px inset;
    position: relative;
    border-width: 1px;
    border-style: solid;
    border-color: silver;
    outline: none;
    background: rgb(255, 255, 255);
    border-radius: 4px;
    min-width: 50%;
}

.relation table td label {padding-right: 10px;}

.relation table td textarea {color: #585858; width:100%; padding:10px 15px;}

.relation table td input::-webkit-input-placeholder {
    -webkit-text-security: none;
    color: #585858;
    pointer-events: none;
}

.relation table td p {color:#eb6b6b;}

.relation div {display:block; text-align: center; padding:15px 0;}
.relation div input[type="submit"],.relation div a {
    background-color: #505050;
    color: #FFFFFF;
    border: 1px none #FFFFFF;
    margin-right: 5px;
    margin-left: 5px;
    padding-right: 30px;
    padding-left: 30px;
    border: none;
    box-shadow: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    text-align: center;
    height: 43px;
    display: inline-block;
    vertical-align: middle;
    margin-top: 15px;
}
.relation div a {line-height: 42px; }
.relation div input[type="submit"]:hover,.relation div a:hover {background-color: #5982b9;}
.codeimg {height:39px; vertical-align:middle;}
.lab-form-Vsearch img {width:40px; height:40px;}

/*--relation page end--*/

.qrcode {margin-bottom: 50px;}