@charset "utf-8";


/*FB留言板API*/
.fb-comments-api { margin-bottom:20px;}

.btn-wrap  { justify-content:flex-start; }

/*船期查詢*/
.schedule-wrap { display:block; width:100%; height:auto; overflow:hidden; max-width:1024px; margin:50px auto; background:#005bac; background:var(--maincolor-deep);
/*圓角*/
border-radius:10px;}

.schedule-tab,
.schedule-tab * { padding:0; margin:0; list-style:none; text-decoration:none;}
.schedule-tab { display:block; width:100%; height:auto; overflow:hidden; float:left; position:relative; z-index:1;}
.schedule-tab li { width:50%; height:auto; overflow:hidden; float:left;}
.schedule-tab li:only-child { width:100%;}
.schedule-tab li a { display:block; width:100%; height:auto; overflow:hidden; float:left; text-align:center; padding:calc( var(--basic-unit) * 0.5 ); background:lightgray;}
.schedule-tab li a:link,
.schedule-tab li a:visited { color:black;}
.schedule-tab li a:hover,
.schedule-tab li a:active { color:#005bac; color:var(--maincolor-deep); background:rgba(255,255,255,0.9);}

.schedule-tab li.active a,
.schedule-tab li.active a:link,
.schedule-tab li.active a:visited,
.schedule-tab li.active a:hover,
.schedule-tab li.active a:active{ background:none; color:white; cursor:default;}

.schedule-tab li:only-child a:link,
.schedule-tab li:only-child a:visited,
.schedule-tab li:only-child a:hover,
.schedule-tab li:only-child a:active {
background:linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.1) 100%);}

.schedule-from { width:100%; height:auto; overflow:hidden; padding:calc( var(--basic-unit) * 0.5 ); color:white; position:relative;}
.schedule-from * { padding:0; margin:0; list-style:none;}
.schedule-from ul { display:block; width:100%; height:auto; overflow:hidden; position:relative; z-index:2;}
.schedule-from ul li { display:block; width:100%; height:auto; overflow:hidden; float:left;}
.schedule-from ul li:nth-child(2),
.schedule-from ul li:nth-child(3) { width:50%;}
.schedule-from ul li > div { height:auto; overflow:hidden; float:left; padding:calc( var(--basic-font-size) * 0.5 );}
.schedule-from ul li > div:nth-child(1) { width:calc( var(--basic-font-size) * 5 );}
.schedule-from ul li > div:nth-child(2) { width:calc( 100% - ( var(--basic-font-size) * 5 ) ); }
.schedule-from:before { content:''; display:block; position:absolute; width:100%; height:100%; top:0; left:0; z-index:0;}
input[value="ship"] + .schedule-from:before { background:url(../Images/Layout/corp/search_ship.png) right bottom no-repeat; background-size:100% auto;}
input[value="ship-imp"] + .schedule-from:before { background:url(../Images/Layout/corp/search_ship_in.png) right bottom no-repeat; background-size:100% auto;}
input[value="cargo"] + .schedule-from:before { background:url(../Images/Layout/corp/search_cargo.png) right bottom no-repeat; background-size:100% auto;}

.schedule-from.import ul { display:flex; flex-wrap:wrap;}
.schedule-from.import ul li:nth-child(1) {order:1;}
.schedule-from.import ul li:nth-child(2) {order:3;}
.schedule-from.import ul li:nth-child(3) {order:2;}
.schedule-from.import ul li:nth-child(4) {order:4;}
.schedule-from.import ul li:nth-child(2) > div.schedule-from-box > select { width:100%;}

/*fontsize3 */
.fontsize3 .schedule-from ul li > div:nth-child(1) { width:calc( var(--basic-font-size) * 6 );line-height: calc( var(--basic-font-size) * 2 );}
.fontsize3 .schedule-from ul li > div:nth-child(2) { width:calc( 100% - ( var(--basic-font-size) * 6 ) );line-height: calc( var(--basic-font-size) * 2 );}
.fontsize3 .schedule-from ul li > div.schedule-from-box > select,
.fontsize3 .schedule-from ul li > div.schedule-from-box > input {line-height: calc( var(--basic-font-size) * 2 );height: calc( var(--basic-font-size) * 2 );}
/*fontsize4 */
.fontsize4 .schedule-from ul li > div:nth-child(1) { width:calc( var(--basic-font-size) * 8 );line-height: calc( var(--basic-font-size) * 2 );}
.fontsize4 .schedule-from ul li > div:nth-child(2) { width:calc( 100% - ( var(--basic-font-size) * 8 ) );line-height: calc( var(--basic-font-size) * 2 ); }
.fontsize4 .schedule-from ul li > div.schedule-from-box > select,
.fontsize4 .schedule-from ul li > div.schedule-from-box > input {line-height: calc( var(--basic-font-size) * 2 );height: calc( var(--basic-font-size) * 2 );}

.schedule-from ul li > div.schedule-from-box > select { width:calc( 50% - 5px ); height:auto; overflow:hidden; float:left; border:0; font-size:calc( var(--basic-font-size) * 0.8 );}
.schedule-from ul li > div.schedule-from-box > select:focus { background:lightyellow; border:1px solid var(--maincolor);}
.schedule-from ul li > div.schedule-from-box > select + select { margin-left:10px;}

.schedule-from ul li > div.schedule-from-box #txtCaptchacode { border:0; float:left;}
.schedule-from ul li > div.schedule-from-box #txtCaptchacode + img { border:0; float:left; margin:calc( var(--basic-unit) * 0.125 ) calc( var(--basic-unit) * 0.25 ) calc( var(--basic-unit) * 0.125 ) 0; height:calc( var(--basic-unit) * 1.25 ); width:auto;}

.schedule-from ul li > div.schedule-from-box #txtCaptchacode + img + a:link,
.schedule-from ul li > div.schedule-from-box #txtCaptchacode + img + a:visited { background:white;}

.schedule-from .btn-wrap { width:calc( var(--basic-unit) * 14 + 10px ); margin:10px auto; position:relative; z-index:2;}
.schedule-from .btn-wrap .btn { width:calc( var(--basic-unit) * 7 ); height:calc( var(--basic-unit) * 2 ); line-height:calc( var(--basic-unit) * 2 ); display:block; overflow:hidden; float:left; border:0; text-align:center; margin:0;
/*圓角*/
border-radius:5px;}
.schedule-from .btn-wrap .btn:last-child { margin-left:10px;}
.schedule-from .btn-wrap .btn:link,
.schedule-from .btn-wrap .btn:visited { background:var(--btn-bg-1); color:white;}
.schedule-from .btn-wrap .btn:hover,
.schedule-from .btn-wrap .btn:active { background:var(--btn-bg-1-o); color:white;}
.schedule-from .btn-wrap .btn i { display:none;}

/*查詢結果*/
.search-result { display:block; width:100%; height:auto; overflow:hidden; overflow-x:auto; float:left; border:1px solid #ccc; margin-bottom:20px;}
.search-result table.tb-schedule { min-width:100%; width:auto; max-width:none; white-space:nowrap; border:0; border-collapse:0; border-spacing:0; border-top:1px solid white; border-left:1px solid white;}
.search-result table.tb-schedule tr:nth-child(odd) { background:#eee;}
.search-result table.tb-schedule th,
.search-result table.tb-schedule td { font-size:0.8em; border:0; border-bottom:1px solid white; border-right:1px solid white;}
.search-result table.tb-schedule th { background:#005bac; color:white; padding:calc( var(--basic-unit) * 0.5 );}
.search-result table.tb-schedule th > span { display:block; width:100%; height:auto; overflow:hidden;}
.search-result table.tb-schedule th > span + br { display:none;}
.search-result table.tb-schedule th > span.en { font-size:0.7em; opacity:0.7;}
.search-result table.tb-schedule td { padding:calc( var(--basic-unit) * 0.5 );}
.search-result table.tb-schedule td.date { font-size:0.7em;text-align:center;}
.search-result table.tb-schedule td.empty-data { color:red; background:#eee;}

.search-result table.tb-schedule .show-tooltip {transition:all .5s;}
.search-result table.tb-schedule .show-tooltip:hover { background:lightyellow;}
.search-result table.tb-schedule .show-tooltip .tooltip-box { position:absolute; z-index:2;transition:all .5s;}
.search-result table.tb-schedule .show-tooltip .tooltip-box .tooltip{ position:absolute; background:#FFF; border:1px solid #047AC2; width:auto; top:0; display:none; z-index:9999; padding:10px;transition:background .5s; text-align:left; left:0; max-width:calc( 100vw - 40px ); overflow:hidden; height:auto; white-space:normal; padding-top:30px;
display: flex;
flex-wrap:wrap;
align-items:center;}
.search-result table.tb-schedule .show-tooltip .tooltip-box .tooltip:hover { background:gold;}
.search-result table.tb-schedule .show-tooltip .tooltip-box .tooltip > .close { width:30px; height:30px; text-align:center; line-height:30px; background:#eee; position:absolute; top:0; right:0; cursor:pointer;}
.search-result table.tb-schedule .show-tooltip .tooltip-box .tooltip a { display:inline-block; width:auto; height:auto; overflow:hidden; float:left; background:var(--maincolor); color:white; padding:5px; text-decoration:none; margin-right:5px;
/*圓角*/
border-radius:5px;}
.search-result table.tb-schedule .show-tooltip .tooltip-box .tooltip a + br { display:none;}
.search-result table.tb-schedule .show-tooltip .tooltip-box .tooltip a:hover,
.search-result table.tb-schedule .show-tooltip .tooltip-box .tooltip a:active { background:var(--maincolor-deep);}

.search-result ~ .btn-wrap .btn { width:100%; text-align:center;
display: flex;
flex-wrap:wrap;
justify-content:center;}

.page-content .descr > div.benefits { display:block; width:100%; height:auto; overflow:hidden; padding:10px;}
.page-content .descr > div.benefits > .b-box { display:flex; flex-wrap:wrap; width:100%; max-width:1024px; height:auto; overflow:hidden; float:left; border:1px solid #eee; margin-bottom:20px;
box-shadow:         2px 2px 3px 0px rgba(0, 0, 0, 0.1);}
.page-content .descr > div.benefits > .b-box .photo { width:45%; height:auto; overflow:hidden; float:left;}
.page-content .descr > div.benefits > .b-box .photo img { display:block; max-width:100%; height:auto; float:left;}
.page-content .descr > div.benefits > .b-box .text { width:55%; height:auto; overflow:hidden; float:left; padding:0 20px;}
.page-content .descr > div.benefits > .b-box:nth-child(odd) {flex-direction:row-reverse; float:right;}

@media only screen and (min-width:0px) and (max-width:1080px) {
	.schedule-wrap { margin:0 auto;margin-bottom:20px;}
	.schedule-from ul li:nth-child(2),
	.schedule-from ul li:nth-child(3) { width:100%;}
input[value="ship"] + .schedule-from:before { background:url(../Images/Layout/corp/search_ship.png) right bottom no-repeat; background-size:auto 50%;}
input[value="cargo"] + .schedule-from:before { background:url(../Images/Layout/corp/search_cargo.png) right bottom no-repeat; background-size:auto 50%;}
input[value="ship-imp"] + .schedule-from:before { background:url(../Images/Layout/corp/search_ship_in.png) right bottom no-repeat; background-size:auto 50%;}


	}
@media only screen and (min-width:1025px){
/*依序淡出*/
.schedule-wrap { opacity:0; transform: translate(0, -10px);
animation:schedule-wrap_ani 0.5s forwards linear;animation-delay:0.5s;}
@keyframes schedule-wrap_ani{
0%{ opacity:0; transform: translate(0, -10px);}
100%{ opacity:1; transform: translate(0, 0);}
}
}

@media only screen and (min-width:0px) and (max-width:900px) {
	.page-content .descr > div.benefits > .b-box .photo { width:50%;}
	.page-content .descr > div.benefits > .b-box .text { width:50%;}
	.page-content .descr > div.benefits > .b-box .text p { margin-bottom:5px; margin-top:10px;}
	.page-content .descr > div.benefits > .b-box .text ol { margin-top:0;}
	.page-content .descr > div.benefits > .b-box .text ol li { font-size:0.7em;}
	}

@media only screen and (min-width:0px) and (max-width:620px) {
	.page-content .descr > div.benefits > .b-box .photo { width:100%; border-bottom:1px solid #eee;}
	.page-content .descr > div.benefits > .b-box .photo img { width:100%;}
	.page-content .descr > div.benefits > .b-box .text { width:100%;}
	}

@media only screen and (min-width:0px) and (max-width:540px) {
	.schedule-from ul li > div.schedule-from-box > select { width:100%; margin-bottom:10px;}
	.schedule-from ul li > div.schedule-from-box > select:only-child { margin-bottom:0;}
	.schedule-from ul li > div.schedule-from-box > select + select { margin-left:0; margin-bottom:0;}
	}

@media only screen and (min-width:0px) and (max-width:460px) {
	.schedule-from { padding:calc( var(--basic-font-size) * 0.25 );}
	.schedule-from ul li > div { padding:calc( var(--basic-font-size) * 0.25 );}
	.schedule-from ul li > div:nth-child(1) { width:calc( var(--basic-font-size) * 4.5 );}
	.schedule-from ul li > div:nth-child(2) { width:calc( 100% - ( var(--basic-font-size) * 4.5 ) ); }
	.schedule-from ul li > div.schedule-from-box #txtCaptchacode { margin-right:0;}
	}