/* ==========================================================================
   Font
   ========================================================================== */
@font-face {
  font-family: Playfair;
  font-style: normal;
  font-weight: 500;
  src: url(../fonts/PlayfairDisplay-Regular.ttf),
		url(../fonts/PlayfairDisplay-Italic.ttf),
		url(../fonts/PlayfairDisplay-Bold.ttf),
		url(../fonts/PlayfairDisplay-BoldItalic.ttf);
} 

@font-face {
  font-family: Vegur;
  font-style: normal;
  font-weight: 500;
  src: url(../fonts/Vegur-Regular.otf),
		url(../fonts/Vegur-Light.otf),
		url(../fonts/Vegur-Bold.otf);
} 

@font-face {
  font-family: calibri;
  font-style: normal;
  font-weight: 500;
  src: url(../fonts/calibri.ttf),
		url(../fonts/calibril.ttf);
} 

/* ==========================================================================
   Common Initialization
   ========================================================================== */
   
* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
body {
	position:relative;
	font-family:'Vegur', 'Microsoft JhengHei';
	font-size:16px;
	color:#333;
}
main {
	line-height:1;
}
.clear-both {
    clear: both;
}
.clear::after {
	content: '';
	clear: both;
	display: table;
}
b,.bold {
    font-weight: bold;
}
em,.italic {
    font-style: italic;
}
.text-center{
	text-align:center;
}
p{
	margin-bottom:0;
}
dl, ol, ul{
	margin-bottom:0;
}
header .top-header,
.common-wrapper,
.content{
	max-width:1360px;
	width:95%;
	margin:0 auto;
}
.content{
	padding:35px 0;
}
main{
	/* margin-top:99.5px; */
}
.msg_text{
	text-align:center;
	font-size:2em;
	padding:20px 0;
}
@media (min-width: 1008px){
	.desktop-item{
		display:inherit;
	}
	.mobile-item{
		display:none !important;
	}
}
@media (max-width: 1007px){
	.desktop-item{
		display:none !important;
	}
	.mobile-item{
		display:inherit;
	}
	body.open-mobile-menu{
		overflow:hidden;
	}
}

/* ==========================================================================
   Header
   ========================================================================== */
/* header{
	position:fixed;
	border-bottom:2px solid rgba(153,153,153,.5);
	z-index:3;
	left:0;
	top:0;
	width:100%;
	z-index:999;
	background-color:white;
} */

header .top-header{
	padding:15px 0;
	z-index:6;
	position:relative;
}
body.level3 header .top-header,
body.level4 header .top-header{
	display:none;
}
header .top-header .logo{
	height:67.5px;
	min-width:190px;
	display:inline-block;
	vertical-align:middle;
}
header .top-header .logo img{
	height:100%;
}
header .top-header .function-list{
	display:inline-block;
	vertical-align:middle;
	width:calc(100% - 265px);
	text-align:right;
}
header .top-header .function-list .list-item{
	display:inline-block;
	vertical-align:middle;
	margin-right:10px;
	font-weight:bold;
}
header .top-header .function-list .list-item.text-size{
	margin-right:0;
}
header .top-header .function-list .list-item.text-size span{
	margin-left:5px;
	cursor:pointer;
}
header .top-header .function-list .list-item.lang a{
	font-size:1.1em;
	cursor:pointer;
}
header .top-header .function-list .list-item.lang a.active{
	color:#d14713;
	cursor:default;
}
header .top-header .function-list .list-item.share{
	margin-right:40px;
	white-space:nowrap;
	position:relative;
}
header .top-header .function-list .list-item.share p{
	display:inline-block;
	vertical-align:middle;
}
header .top-header .function-list .list-item.share .share-item-list{
	position:absolute;
	top:100%;
	padding-top:12.5px;
	left:0;
	opacity:0;
	pointer-events:none;
}
header .top-header .function-list .list-item.share:hover .share-item-list,
header .top-header .function-list .list-item.share.open_sub_menu .share-item-list,
header .top-header .function-list .list-item.share:hover .share-item-list:hover{
	opacity:1;
	pointer-events:auto;
}
header .top-header .function-list .list-item.share .share-item-list img{
	width:24px;
	cursor:pointer;
}
header .top-header .function-list .list-item.share img{
	width:16px;
	display:inline-block;
	margin-right:5px;
	vertical-align:middle;
}
header .menu{
	position:fixed;
	width:100%;
	top:97.5px;
	left:50%;
	transform:translateX(-50%);
	background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.8) 50%, rgba(255,255,255,.3) 85%,rgba(255,255,255,0) 100%);
	transition:top 0.3s;
	z-index:6;
}
body.notOnTop header .menu{
	background-color:white;
	top:0px;
}
body.level3 header .menu,
body.level4 header .menu{
	top:0px;
}
header .menu-backup{
	background-color:white;
	height:97.5px;
	top:0;
	left:0;
	width:100%;
	position:fixed;
	z-index:5;
	transition:height 0.5s;
}
body.notOnTop header .menu-backup,
body.level3 header .menu-backup,
body.level4 header .menu-backup{
	height:0px;
}
header .menu .common-wrapper{
	display:flex;
	border-bottom:2px solid rgba(153,153,153,.7);
}
header .menu .menu-item{
	flex:1 1 auto;
	text-align:center;
	vertical-align:middle;
	padding:25px 0;
	color: #333;
	border-top:7.5px solid transparent;
	border-bottom:7.5px solid transparent;
	font-size:1.2em;
	font-weight:bold;
	line-height:20px;
}
header .menu .menu-item:not(.img-item):not(.icon-item):hover{
	transition:none;
	background-color:#e94f15;
}
header .menu .menu-item:not(.img-item) > a{
	transition:none;
}
header .menu .menu-item:not(.img-item):hover > a{
	color:white;
}
header .menu .menu-item .sub-menu{
	display:none;
	position:absolute;
	left:0;
	top:calc(100% - 2px);
	width:100%;
}
header .menu .menu-item:hover .sub-menu,
header .menu .menu-item.open_sub_menu .sub-menu{
	display:block;
	background-color:#e94f15;
	padding:30px 0px;
}
header .menu .menu-item .sub-menu ul{
	list-style:none;
	padding-left:0;
	width:100%;
}
header .menu .menu-item .sub-menu ul li{
    float: left;
    width: calc(100% / 3);
	padding:10px 15px;
	margin:6px 0;
}
header .menu .menu-item .sub-menu ul li a{
	color:#fff;
	transition:none;
}
header .menu .menu-item .sub-menu ul li.active,
header .menu .menu-item .sub-menu ul li:hover{
	background-color:white;
}
header .menu .menu-item .sub-menu ul li.active a,
header .menu .menu-item .sub-menu ul li:hover a{
	color:#e94f15;
}
header .menu .menu-item .sub-menu .common-wrapper{
	border:none;
}
header .menu .menu-item.img-item img.notOnTop-item,
header .menu .menu-item.icon-item.notOnTop-item{
	display:none;
}
body.notOnTop header .menu .menu-item.img-item img.notOnTop-item,
body.notOnTop header .menu .menu-item.icon-item.notOnTop-item,
body.level3 header .menu .menu-item.img-item img.notOnTop-item,
body.level3 header .menu .menu-item.icon-item.notOnTop-item,
body.level4 header .menu .menu-item.img-item img.notOnTop-item,
body.level4 header .menu .menu-item.icon-item.notOnTop-item{
	display:inline-block;
}
body.notOnTop header .menu .menu-item.onTop-item,
body.level3 header .menu .menu-item.onTop-item,
body.level4 header .menu .menu-item.onTop-item{
	display:none;
}
header .menu .menu-item.active{
	color: #e94f15;
    margin-bottom: -2px;
    border-bottom: 9.5px solid transparent;
    border-bottom-color: #e94f15;
}
header .menu .menu-item.active a{
	color:#e94f15;
}
header .menu .menu-item.icon-item{
	margin-right:25px;
}
header .menu .menu-item.img-item,
header .menu .menu-item.icon-item{
	min-width:60px;
	position:relative;
}
header .menu .menu-item.img-item img,
header .menu .menu-item.icon-item img{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	cursor:pointer;
}
header .menu .menu-item.icon-item img{
	max-height:80%;
}
body.notOnTop header .menu .menu-item.img-item img,
body.level3 header .menu .menu-item.img-item img,
body.level4 header .menu .menu-item.img-item img{
	position:relative;
	transform:none;
	width:20px;
	left:auto;
	top:auto;
	display:inline-block;
	margin-right:5px;
}
header .menu .menu-item.img-item .share-list,
header .menu .menu-item.img-item .lang-list{
	position:relative;
	display:none;
}
body.notOnTop header .menu .menu-item.img-item .share-list,
body.notOnTop header .menu .menu-item.img-item .lang-list,
body.level3 header .menu .menu-item.img-item .share-list,
body.level3 header .menu .menu-item.img-item .lang-list,
body.level4 header .menu .menu-item.img-item .share-list,
body.level4 header .menu .menu-item.img-item .lang-list,
body.search-result header .menu .menu-item.img-item .lang-list{
	display:inline-block;
}
header .menu .menu-item.img-item .share-list .share-item-list,
header .menu .menu-item.img-item .lang-list .lang-item-list{
	position:absolute;
	opacity:0;
	padding-top:10px;
	left:50%;
	transform:translateX(-50%);
	pointer-events:none;
	white-space:nowrap;
}
header .menu .menu-item.img-item .share-list:hover .share-item-list,
header .menu .menu-item.img-item .lang-list:hover .lang-item-list,
header .menu .menu-item.img-item .share-list.open_sub_menu .share-item-list,
header .menu .menu-item.img-item .lang-list.open_sub_menu .lang-item-list{
	opacity:1;
	pointer-events:auto;
}
header .menu .menu-item.img-item .lang-list .lang-item-list a{
	margin:0 2.5px;
	font-weight:bold;
	cursor:pointer;
}
header .menu .menu-item.img-item .lang-list .lang-item-list a.active{
	color:#e94f15;
}
header .menu .menu-item.img-item .share-list:hover .share-item-list img{
	width:30px;
	max-width:none;
	white-space:nowrap;
}
header .mobile-menu{
	display:none;
}
header .search-area{
	border:none;
	background-color:#1f7c8f;
	position:fixed;
	top:97.5px;
	left:0;
	width:100%;
	padding:30px 0;
	pointer-events: none;
	opacity:0;
	transition:all 0.5s;
	z-index:6;
}
body.notOnTop header .search-area,
body.level3 header .search-area,
body.level4 header .search-area{
	top:90px;
}
header .search-area.open{
	pointer-events: auto;
	opacity:1;
}
header .search-area .search-icon{
	display:inline-block;
	vertical-align:middle;
	margin-right:30px;
}
header .search-area input{
	background-color:transparent;
	border:0px;
	border-bottom:1px solid rgba(255,255,255,.7);
	font-size:2em;
	padding-bottom:10px; 
	font-family:'Playfair', 'Microsoft JhengHei';
	color:white;
	display:inline-block;
	vertical-align:middle;
}
header .search-area .common-wrapper{
	position:relative;
}
header .search-area .close-btn{
	position:absolute;
	top:5px;
	right:0;
	cursor:pointer;
}
header .search-area input::placeholder{
	color:rgba(255,255,255,.7);
}
header .search-area .default-option-list{
	margin-top:30px;
	margin-left:67px;
	color:white;
}
header .search-area .default-option-list .list-item{
	display:inline-block;
	padding:9px 22.5px;
	border:1px solid #fff;
	border-radius:20px;
	font-size:1em;
	color:white;
	margin-right:10px;
	margin-bottom:10px;
	cursor:pointer;
}
/* ==========================================================================
   Banner
   ========================================================================== */
.banner{
	position:relative;
	max-width:100%;
	overflow:hidden;
	z-index:4;
	margin-bottom:40px;
}
.banner .swiper-wrapper{
}
body.level2 .banner .banner-item{
	padding-top:22.9%;
}   
body.home .banner .banner-item{
	padding-top:40%;
}   
.banner .banner-item{
	overflow:hidden;
}
.banner .banner-item > a{
	display:inline;
}
.banner .banner-item .mobile{
	display:none;
}
.banner .banner-item img{
	position:absolute;
	top:0%;
	left:50%;
	transform:translateX(-50%);
	height:100%;
	width:auto;
	max-width:none;
}
.banner .swiper-pagination{
	bottom:5%;
	left:50%;
	width:auto;
	transform:translateX(-50%);
}
.banner .swiper-pagination .swiper-pagination-bullet{
	border-radius: 0;
    width: 55px;
	height:6px;
    margin-right: 10px;
	background:white;
	opacity:1;
	box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}
.banner .swiper-pagination .pause,
.banner .swiper-pagination .play{
	position:absolute;
	right:100%;
	top:55%;
    transform: translateY(-50%);
    margin-right: 5px;
	cursor:pointer;
}
.banner .swiper-pagination .play{
	display:none;
}
.banner .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{ 
	background:#2b8da0;
}
.banner .swiper-button-next{
	width:50px;
	height:auto;
	top:50%;
	transform:translateY(-50%);
	right:7.5%;
}
.banner .swiper-button-prev{
	width:50px;
	height:auto;
	top:50%;
	transform:translateY(-50%);
	left:7.5%;
}
/* .banner .banner-item img{
	transform-origin: left top;
	transform:scale(1.1) translateX(-50%);
	transition:all 0.75s;
}
.banner .banner-item.swiper-slide-active img{
	transform:scale(1) translateX(-50%);
} */
.orange-line{
	display:block;
	float:right;
	width:45%;
	height:50px;
	background-color:#e94e15;
	margin-top: -40px;
}
.orange-line::after {
	content: '';
	clear: both;
	display: table;
}
.banner .title-area{
	position:absolute;
	left:0;
	bottom:0;
	background-color:rgba(255,255,255,.7);
	width: 40%;
    padding: 2.5% 0px;
	z-index:3;
}
body.home .banner .title-area{
	display:none !important;
}
.banner .title-area .wrapper{
	padding-right:20px;
	margin-left:2.5vw;
}
.banner .title-area .top-title{
	color:#cc2c06;
	font-size:1.8em;
	line-height:1.3em;
	font-weight:bold;
	margin-bottom:7.5px;
	font-family:'Playfair', 'Microsoft JhengHei';
}
html[lang='en'] .banner .title-area .top-title{
	font-style: italic;
}
.banner .title-area .middle-title{
	color:#0a6e81;
	font-size:2.5em;
	line-height:1.3em;
	font-weight:bold;
	font-family:'Playfair', 'Microsoft JhengHei';
}
.banner .title-area .more{
	margin-top:30px;
	display:block;
	padding:5px 0px;
	width:170px;
	text-align:center;
	border:1.5px solid #cc2c06;
	color:#cc2c06;
}
@media (min-width: 1431px){
	.banner .title-area .wrapper{
		margin-left: calc((100vw - 1360px) / 2);
	}
}
/* ==========================================================================
   More
   ========================================================================== */
   .more-area{
	   text-align:center;
   }
   .more-area .more-btn{
	   border:1px solid #d14713;
	   padding:7.5px 0px;
	   min-width:200px;
	   display:inline-block;
	   color:#d14713;
   }
   .more-area .more-item{
	   display:none;
   }
/* ==========================================================================
   Page Title
   ========================================================================== */
body.level3 .page-title{
	background-image:url(../images/banner/level3_banner.jpg);
	background-size:cover;
}
body.level4 .page-title{
	background-image:url(../images/banner/level4_banner.jpg);
	background-size:cover;
}
.page-title .top-title{
	color:#e95016;
	font-size:1.2em;
	line-height:1.3em;
	font-weight:bold;
	font-family:'Playfair', 'Microsoft JhengHei';
}
html[lang="en"] .page-title .top-title{
	font-style: italic;
}
.page-title .middle-title{
	color:#2b8da0;
	font-size:2em;
	line-height:1.3em;
	font-weight:bold;
	font-family:'Playfair', 'Microsoft JhengHei';
}
.page-title .position{
	padding:15px 0;
	min-width:50%;
	margin-top:20px;
	background-color:rgba(255,255,255,.6);
	width: auto;
    display: inline-block;
    padding-right: 15px;
}
.page-title .position .wrapper{
	margin-left:2.5vw;
}
@media (min-width: 1431px){
	.page-title .position .wrapper{
		margin-left: calc((100vw - 1380px) / 2);
	}
}
/* ==========================================================================
   Footer
   ========================================================================== */
footer .top-footer{
	background-color:#2fadc6;
	padding:70px 0;
}
footer .top-footer .footer-item{
    width: calc(25% - 3px);
    display: inline-block;
	vertical-align:top;
	padding-right:10%;
	margin-bottom:40px;
}
footer .top-footer .footer-item .title{
	color:#641e0b;
	font-weight:bold;
	font-size:1.15em;
	margin-bottom:15px;
	line-height:1.3em;
}
footer .top-footer .footer-item a{
	line-height:1.5em;
	margin-bottom:5px;
	display:block;
	font-size:0.9em;
	font-weight: bold;
}
footer .bottom-footer{
	background-color:#195c69;
	padding:30px 0;
	font-family:'calibri', 'Microsoft JhengHei';
}
footer .bottom-footer .left{
	display:inline-block;
	width:calc(50% - 5px);
	vertical-align:middle;
	color:white;
	font-size:0.8em;
	line-height:1.5em;
	font-weight:lighter;
}
footer .bottom-footer .left a{
	font-weight:bold;
	color:white;
	font-weight:normal;
}
footer .bottom-footer .right{
	display:inline-block;
	width:calc(50% - 5px);
	vertical-align:middle;
	text-align:right;
}
footer .bottom-footer .right img{
	height:45px;
	vertical-align:middle;
	display:inline-block;
	margin-right:15px;
}
footer .bottom-footer .right img.w3c{
	height:30px;
}
/* ==========================================================================
   Section List
   ========================================================================== */
.section-list{
	max-width:1160px;
	width:95%;
	margin:80px auto;
}
.section-list .mobile{
	display:none;
}
.section-list .desktop:after{
	content: '';
	clear: both;
	display: table;
}
.section-list .desktop .left{
	width:48%;
	float:left;
}
.section-list .desktop .right{
	width:48%;
	float:right;
}
.section-list .list-item{
	width:100%;
	margin-bottom:50px;
	overflow:hidden;
	text-align:center;
}
.section-list .list-item .cover{
	position:relative;
	width:100%;
	cursor:pointer;
	transition:all 0.5s;
	overflow:hidden;
}
.section-list .list-item .cover img{
	width:100%;
}
.section-list .list-item .cover:after{
	content:'';
	position:absolute;
	left:-0.5%;
	top:0;
	width:101%;
	height:100%;
	background-color:#eeeeee;
	transition:all 1s;
	transition-delay: 0.5s;
}
.section-list .list-item .cover:hover{
	/*transform:scale(1.01);*/
}
.section-list .list-item.aos-animate .cover:after{
	top:-105%;
	/*transform:scale(1.01);*/
}
.section-list .list-item .title{
	display:inline-block;
	font-size:1.75em;
	padding-bottom:10px;
	padding-top:20px;
	border-bottom:2px solid #e94e15;
	max-width: 70%;
    line-height: 1.3em;
	color:#333;
	font-family:'Playfair', 'Microsoft JhengHei';
}
.section-list .list-item .mascot{
	display:block;
	max-width:90%;
	margin:0 auto;
	text-align:left;
}
.section-list .list-item .mascot img{
	max-width:60%;
	display:block;
}
.section-list .list-item .cover{
	padding-top: 62%;
	position:relative;
	overflow:hidden;
}
.section-list .list-item .cover img{
	position: absolute;
	left: 50%;
	top: 0;
	height: 100%;
	width: auto;
	transform: translateX(-50%);
	max-width: none;
}
/* ==========================================================================
   Position
   ========================================================================== */
   .position{
	   padding:30px 0;
	   display:none !important;
   }
   .position span{
		height: 15px;
		background: black;
		padding-left: 1px;
		vertical-align: middle;
		display: inline-block;
		
   }
   .position img{
	   display:inline-block;
	   vertical-align:middle;
	   margin-right:10px;
   }
   .position p,.position a{
	   display:inline-block;
	   vertical-align:middle;
	   font-size:1.1em;
	   margin:0 5px;
   }
/* ==========================================================================
   Page List
   ========================================================================== */
.page-list{
	margin-bottom:100px;
}
body.level3 .page-list,
body.level4 .page-list{
	margin:0;
	padding:50px 0;
}
.page-list .list-item{
	width:calc(100% / 3 - 23px);
	margin-right:20px;
	display:inline-block;
	margin-bottom:30px;
	vertical-align:top;
}
body.level3 .page-list .list-item,
body.level4 .page-list .list-item{
	width:calc(100% / 4 - 23px);
}
.page-list .list-item .cover{
	position:relative;
	z-index:2;
	padding-top:63%;
}
body.level3 .page-list .list-item .cover{
	padding-top:66.2%;
}
.page-list .list-item .cover img{
	position:absolute;
	height:100%;
	width:auto;
	top:0;
	left:50%;
	max-width:none;
	transition:all 0.5s;
	transform:translateX(-50%);
}
.page-list .list-item .title-area{
	width:85%;
	margin-left:auto;
	background-color:white;
	margin-top:-25px;
	padding:25px 20px;
	position:relative;
	z-index:3;
	margin-right: -0.6%;
}
.page-list .list-item .title-area .title-icon,
.series-mobile-list .list-item .title-icon,
.series-list .list-item .title-icon{
	margin-top:10px;
	height:16.5px;
	display:block;
}
.page-list .list-item .title a:not(.titile-icon-text),
.series-mobile-list .list-item .title a:not(.titile-icon-text),
.series-list .list-item .title a:not(.titile-icon-text),
.series-area .left .title a:not(.titile-icon-text){
	margin-right:15px;
}
.series-area .left .title .title-icon{
	height:16.5px;
	vertical-align:middle;
}
.series-area .left .title a{
	vertical-align:middle;
}
.series-list .list-item .title-icon{
	margin-top:5px;
}
.page-list .list-item .title-area a,
.series-list .list-item .title-area a{
	display:inline-block;
	vertical-align:middle;
}
.series-list .list-item .title a{
	max-height:6em;
	overflow:hidden;
}
.page-list .list-item .title-area .title-icon-text,
.series-list .list-item .title-icon-text,
.series-area .left .title .title-icon-text{
	color:red;
	font-weight:bold;
	font-size:0.8em;
}
body.level3 .page-list .list-item .title-area,
body.level4 .page-list .list-item .title-area{
	padding:15px;
}
.page-list .list-item .title-area .title{
	color:#333;
	font-size:1.5em;
	padding-bottom:15px;
	display:block;
	position:relative;
	font-family:'Playfair', 'Microsoft JhengHei';
	line-height:1.3em;
}
body.level3 .page-list .list-item .title-area .title,
body.level4 .page-list .list-item .title-area .title{
	font-size:1.3em;
}
.page-list .list-item .title-area .title:after{
	content:'';
	position:absolute;
	left:0;
	top:calc(100%);
	width:35%;
	height:2px;
	background-color:#e94f15;
}

.page-list .list-item .cover{
	position:relative;
	width:100%;
	cursor:pointer;
	transition:all 0.5s;
	overflow:hidden;
}
.page-list .list-item .cover:after{
	content:'';
	position:absolute;
	left:-0.5%;
	top:0;
	width:101%;
	height:100%;
	background-color:#eeeeee;
	transition:all 1s;
	transition-delay: 0.5s;
}
.page-list .list-item .cover:hover{
	/*transform:scale(1.01);*/
}
.page-list .list-item.aos-animate .cover:after{
	top:-100%;
}
/* ==========================================================================
   Meun Button
   ========================================================================== */
.menu-btn{
  width: 20px;
  height: 15px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

.menu-btn span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #000;
  border-radius: 2px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
.menu-btn span:nth-child(1) {
  top: 0px;
}

.menu-btn span:nth-child(2),.menu-btn span:nth-child(3) {
  top: 6px;
}

.menu-btn span:nth-child(4) {
  top: 12px;
}

.menu-btn.open span:nth-child(1) {
  top: 6px;
  width: 0%;
  left: 50%;
}

.menu-btn.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.menu-btn.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.menu-btn.open span:nth-child(4) {
  top: 6px;
  width: 0%;
  left: 50%;
}
/* ==========================================================================
   Series
   ========================================================================== */
   .series-title{
		font-size: 1.7em;
		margin-bottom: 25px;
   }
   .series-area .left{
	   width:64.5%;
	   float:left;
   }
	.series-area .left .title{
		font-size: 1.3em;
		line-height:1.3em;
		margin: 15px 0px;
	}
	.series-area .left .cover {
		position: relative;
		padding-top: 66.2%;
		width: 100%;
		overflow: hidden;
	}
	.series-area .left .cover img {
		position: absolute;
		left: 50%;
		height: 100%;
		top: 0;
		transform: translateX(-50%);
		max-width: none;
	}
   .series-area .series-list-container{
		width:33%;
		float:right;
		margin-bottom:50px;
		position:relative;
		z-index:3;
   }
   .series-area .series-list{
		overflow:hidden;
		height: 600px;
   }
   .series-area .series-list .swiper-wrapper{
	   
   }
   .series-area .series-list-container .swiper-button-prev{
		left:50%;
		right:auto;
		bottom:calc(100% + 10px);
		top:auto;
		transform:translateX(-50%) rotate(-135deg);
		-webkit-transform:translateX(-50%) rotate(-135deg);
   }
   .series-area .series-list-container .swiper-button-next{
		left:50%;
		right:auto;
		top:calc(100% + 30px);
		bottom:auto;
		transform:translateX(-50%) rotate(45deg);
		-webkit-transform:translateX(-50%) rotate(45deg);
   }
   .series-area .series-list .list-item .title{
	   display:inline-block;
	   width:calc(55% - 15px);
	   vertical-align:middle;
	   font-size:1em;
	   color:#666;
	   line-height:1.5em; 
	   text-overflow:ellipsis;
	   max-height:6em;
   }
   .series-area .series-list .list-item .cover{
		display:inline-block;
		width:45%;
		margin-right:5px;
		vertical-align:top;
		position: relative;
		padding-top: 30.5%;
		overflow: hidden;
   }
   .series-area .series-list .list-item .cover img{
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 0;
		height: 100%;
		max-width: none;
   }
   .series-area::after {
		content: '';
		clear: both;
		display: table;
	}
	.arrow {
		border: solid black;
		border-width: 0 3px 3px 0;
		display: inline-block;
		padding: 16px;
		width:auto;
		height:auto;
		border-color:#e94f15;
		outline:none;
	}
	.arrow:after{
		display:none;
	}
/* ==========================================================================
	last init
   ========================================================================== */	
.cover img.new_label{
	left:auto !important;
	transform:none !important;
	right:0px;
}	
body.level3 .page-title,
body.level4 .page-title{
	padding-bottom:40px;
}
/* ==========================================================================
	Popup Modal
   ========================================================================== */	
   #popupModal{
		font-family:'Playfair', 'Microsoft JhengHei';
		line-height:1.5em;
   }
   #popupModal .popup-title{
	   position:relative;
   }
   #popupModal .popup-title p{
	   font-size:2em;
	   color:#cc2c06;
   }
   #popupModal .news-block{
	   padding:30px 0;
   }
   #popupModal .news-block .title{
	   font-size:1.5em;
	   color:#0a6e81;
	   text-align:center;
	   margin-bottom:20px;
   }
   #popupModal .news-block .desc{
	   font-size:1.2em;
	   color:#333;
   }
   #popupModal .news-block .desc table{
	   max-width:100%;
   }
   #popupModal .news-block .desc .table-wrapper{
	   margin:30px 0;
		max-width:100%;
		overflow:auto;
	}
   #popupModal .news-block .desc table th,
   #popupModal .news-block .desc table td{
	   padding:10px;
	   border:1px solid red;
   }
   #popupModal .news-block .desc table tr:first-child td{
	   color:#0a6e81;
   }
   #popupModal .close-btn{
		position: absolute;
		right: 0px;
		top: 50%;
		transform: translateY(-50%);
		width: 3%;
		min-width:20px;
		cursor:pointer;
   }
   #popupModal .modal-dialog{
		display: -ms-flexbox;
		display: flex;
		-ms-flex-align: center;
		align-items: center;
		min-height: calc(100% - (2rem * 2));
   }
   @media (min-width: 1192px){
		#popupModal .modal-dialog{
			width: 1100px;
		}
	}
   #popupModal .modal-content{
	   width:100%;
	   border-radius: 0px;
   }
   #popupModal .modal-body{
       padding: 5% 6%;
   }
/* ==========================================================================
	Video Modal
   ========================================================================== */
   #videoModal .modal-dialog{
	   top:50%;
	   left:50%;
	   transform:translate(-50%,-50%);
	   margin:0;
	   max-width:95%;
   }
   #videoModal .modal-content{
	   border-radius:0;
	   background-color:transparent;
   }
   #videoModal .modal-body{
	   padding:0;
	   padding-top:56.4%;
	   position:relative;
	   background-color:transparent;
   }
   #videoModal .modal-body iframe{
	   position:absolute;
	   left:50%;
	   top:50%;
	   transform:translate(-50%,-50%);
	   width:100%;
	   height:100%; 
   }
   
/* ==========================================================================
	Loading overlay
   ========================================================================== */	
.loading-overlay{
	position:fixed;
	left:0;
	top:0;
	height:100%;
	width:100%;
	background-color:#f9f7f8;
	z-index:9999;
}
.loading-overlay img{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	width:10%;
	max-width:100px;
	min-width:75px;
}
body.loading-overlay-open{
	overflow:hidden;
}