@charset "utf-8";
/* CSS Document */

* {margin:0px; padding:0px;}
.cleardiv {clear:both;}
#back {position:fixed; right:40px; bottom:120px; cursor:pointer; display:none; z-index:10;}

body {background:#eaeaea;}

#layout {position:relative;}

header {height:400px; margin-top:40px; position:relative; background:url(../images/hd_bg.jpg) top center no-repeat;}
header img.hd980 {display:none;}
header div.hd1200 {height:400px; position:relative; background:url(../images/header.png) top center no-repeat;}
header div.goto {display:block; width:980px; height:400px; margin:auto; position:relative;}
header div.goto a {display:block; width:242px; height:48px; position:absolute; right:40px; bottom:7px;}

nav {position:relative; height:auto; box-sizing:border-box; padding:15px 0px; background:#0f3963;}
nav center {width: 980px;}
nav center span {width: 100%; display: flex; flex-wrap: wrap;}
nav a {display:inline-block; width:100px; font-size:20px; line-height:40px; font-family:微軟正黑體,MS Gothic,sans-serif; color:#b9cadb; border:4px double #b9cadb;}
nav a:hover {font-family:微軟正黑體,MS Gothic,sans-serif; color:goldenrod; border:4px double goldenrod; font-size:20px; line-height:40px;}
nav a.slec {color:goldenrod; border:4px double goldenrod; cursor:default;}
nav i.nav_rt {position:absolute; right:0px; top:0px; padding:17px 5px; background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.6));}
nav i.nav_lt {position:absolute; left:0px; top:0px; padding:17px 5px; background: linear-gradient(to right, rgba(0,0,0,0.6), rgba(0,0,0,0));}

#content {width:980px; box-sizing:border-box; padding:10px; background:white; position:relative;}
#content .mb_gotext {display:none;}

#content .con_lt {float:left; width:530px;}
#contetn .con_lt article {position:relative;}
article p.title_jp {font-size:18px; line-height:32px; padding:0px 8px; margin-top:10px; margin-bottom:5px; font-family:微軟正黑體,MS Gothic,sans-serif; background:#c70026; color:white;}
article p.title_ks {font-size:18px; line-height:32px; padding:0px 8px; margin-top:10px; margin-bottom:5px; font-family:微軟正黑體,MS Gothic,sans-serif; background:purple; color:white;}
article p.title_kyu {font-size:18px; line-height:32px; padding:0px 8px; margin-top:10px; margin-bottom:5px; font-family:微軟正黑體,MS Gothic,sans-serif; background:brown; color:white;}
article p.title_oki {font-size:18px; line-height:32px; padding:0px 8px; margin-top:10px; margin-bottom:5px; font-family:微軟正黑體,MS Gothic,sans-serif; background:royalblue; color:white;}
article p.title_ngy {font-size:18px; line-height:32px; padding:0px 8px; margin-top:10px; margin-bottom:5px; font-family:微軟正黑體,MS Gothic,sans-serif; background:darkolivegreen; color:white;}
article p.title_hok {font-size:18px; line-height:32px; padding:0px 8px; margin-top:10px; margin-bottom:5px; font-family:微軟正黑體,MS Gothic,sans-serif; background:darkslateblue; color:white;}
article p.title_thk {font-size:18px; line-height:32px; padding:0px 8px; margin-top:10px; margin-bottom:5px; font-family:微軟正黑體,MS Gothic,sans-serif; background:steelblue; color:white;}
article p.title_skk {font-size:18px; line-height:32px; padding:0px 8px; margin-top:10px; margin-bottom:5px; font-family:微軟正黑體,MS Gothic,sans-serif; background:coral; color:white;}
article p {font-size:16px; line-height:24px; margin-bottom:5px; font-family:微軟正黑體,MS Gothic,sans-serif; text-align:justify;}
article div.topic_outter {display: flex; align-items: center; column-gap: 2rem; margin: 2rem;}
article p.topic_title {font-size: 25px; font-weight: bold; margin-bottom: 10px;}
article img.topic_img {width: 100%; height: 100%;}
article span {display:block; position:relative; width:250px; float:right; margin-left:3px;}
article span img.bigimg {float:right; width:248px;}
article span img.smlimg {float:right; margin:1px; width:60px;}

#content .block {border-top: 1px solid #ddd;}

#content .con_rt_outter {display: flex; flex-direction: column; float: right;}
#content .con_rt {float:right; width:420px; box-sizing:border-box; padding:5px; border:1px solid #0f3963; border-radius:15px; margin-top: 10px; -webkit-border-radius:15px; -moz-border-radius:15px;}

#content .con_middle_outter {display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center; margin: 2rem;}
#content .con_middle {flex: 0 0 30%; box-sizing:border-box; padding:5px; border:1px solid #0f3963; border-radius:15px; margin-top: 10px; -webkit-border-radius:15px; -moz-border-radius:15px; margin: 0;}

.link {margin:10px auto;}
.link a {display:inline-block; vertical-align:top; position:relative; width:90px; margin:0px 3px; font-size:15px; line-height:30px; font-family:微軟正黑體,MS Gothic,sans-serif; color:black;}
.link a .airline {display: flex; height: 36px; background: lavender; border-radius: 10px; align-items: center; justify-content: center;}
.link a i {display:none;}
.link a.slec {cursor:default;}
.link a.slec .airline {background:#c70026; color:white;}
.link a.slec i {position:relative; display:block; text-align:center; font-size:40px; height:15px; line-height:15px; margin-top:-4px; /*z-index:1;*/ color:#c70026;}
.link a:hover .airline {background:#c70026; color:white;}
.link a:hover i {position:relative; display:block; text-align:center; font-size:40px; height:15px; line-height:15px; margin-top:-4px; /*z-index:1;*/ color:#c70026;}

@media screen and (max-width: 768px) {
	#back {right:10px; bottom:10px;}
	#back img {width:60px; height:auto;}
	header {width:100%; height:auto; background:none;}
	header img.hd980 {display:block; width:100%; height:auto;}
	header div.hd1200 {width:100%; height:auto; background:none;}
	header div.goto {width:100%; height:auto; background:none;}
	header div.goto a {width:20%; height:auto; right:8px; bottom:7px;}
	header div.goto a img {width:100%; height:auto;}
	nav {width:100%; box-sizing:border-box; padding:15px 10px; height:auto; overflow-x:scroll; overflow-y:hidden; white-space:nowrap;}
	nav a {font-size:16px; line-height:30px; paddding:10px 0px;}
	nav a:hover {font-size:16px; line-height:30px; paddding:10px 0px; color:goldenrod; border:4px double goldenrod;}
	#content {width:100%;}
	#content .mb_gotext {display:block; width:60%; margin-bottom:10px; text-align:center; font-size:16px; line-height:36px; background:goldenrod; color:white; font-family:微軟正黑體,MS Gothic,sans-serif;}
	#content .con_middle {flex: 0 0 45%;}
	#content .con_lt {float:none; width:96%; margin:auto; clear: both;}
	#content .con_rt {float:none; width:96%; margin:auto; margin-bottom:10px;}
	#content .con_rt table {background:none; border-bottom:1px solid gray;}
	article span {width:100%;}
	article span img.bigimg {width:100%; height:auto;}
	article span img.smlimg {width:24%; height:auto; margin:0.5%;} 
}

@media screen and (max-width: 576px) {
	#content .con_middle {flex: 0 0 100%;}
}