@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');
@import 'https://fonts.googleapis.com/earlyaccess/notosanstc.css';


/* 根據bootstrap所做的調整 */


body{ font-family:'Noto Sans TC', sans-serif,'Lato', sans-serif, "Microsoft JhengHei","Open Sans", sans-serif;line-height: 1.75;color: #111;font-size: 1.6rem;padding-top: 80px;letter-spacing:1px;overflow-x: hidden;}
form{height: 100%;}
a { color:#12549d;text-decoration: none;}
a:hover{ color: #000;text-decoration: none;}
a:focus{text-decoration: none;}
ul,li{list-style: none;padding: 0;margin: 0;}
p {margin: 0 0 8px;text-align: justify;}

.series_list a:hover{
        opacity:.8
    }


a,button {
    cursor: pointer;
    transition: .3s
}
:after,:before {
    text-decoration: inherit;
    vertical-align: inherit;
}

* {
    padding: 0;
    margin: 0;
}
img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}
:focus {outline: #36a4b5 auto 3px;}
hr{border-top: 1px solid #4e4e4e;}
.container{position: relative;}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {letter-spacing:2px;
   font-family: 'Lato', sans-serif,'Noto Sans TC', sans-serif,  "微軟正黑體", "微软雅黑", "Microsoft YaHei","Open Sans", 游ゴシック体, "Yu Gothic",  メイリオ, Meiryo, "MS Gothic", sans-serif;
margin-top: 0;margin-bottom: 0;}
h1{font-size: 3.3em;line-height:2em;}
h2{font-size: 2em;line-height: 2em;}
h3{font-size: 1.5em;line-height: 2em;}
h4{font-size: 1.2em;line-height: 1.5em;}
h5{font-size: 1.1em;line-height: 1.6em;}
h6{font-size: 1em;line-height: 1.4em;}


@media screen and (max-width: 991px){
body{font-size: 1.4rem;letter-spacing: 0;line-height:26px;padding-top: 47px;}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {margin-bottom: 5px;letter-spacing: 0;}
h1{font-size: 2.3em;line-height:2em;}
h2{font-size: 1.7em;line-height: 1.3em;font-weight: 700;}
h3{font-size: 1.3em;
    line-height: 1.3em;
    letter-spacing: 2px;}
h4{font-size: 1.2em;line-height: 1.3em;}
h5{font-size: 1.1em;line-height: 1.3em;}
h6{font-size: 1em;line-height: 1.3em;}
p {margin: 0 0 5px;text-align: justify;}
}


button,button:active,button:focus {
  outline: none!important;
}
h1,h2,h3 {
    font-weight: 800;
    line-height: 1.4;
}

.note {
    font-size: 1.2rem;
}

@media(max-width: 767px) {
    .note {
        font-size:1rem;
    }
}

section {
    position: relative;
}


@media(max-width: 767px) {
    .pc {
        display:none !important;
    }
}

@media(min-width: 768px) {
    .sp {
        display:none !important;
    }
}




/* ----------------------------------------------------------------
	Go To Top fixed_link
-----------------------------------------------------------------*/
#back-to-top {position: fixed;bottom: 10px;right:10px;z-index: 9999;
width:auto;height:auto;text-align: center;background:#888;line-height: 20px;color: #fff;padding:15px 15px;cursor: pointer;text-decoration: none;transition: opacity 0.2s ease-out;
opacity: 0;text-align: center;border-radius: 100px;}
#back-to-top i{display: block;}
#back-to-top:hover {}
#back-to-top.show {opacity:0.7;}

.fixed_link {
    width: 200px;
    height: 80px;
    padding-right: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: fixed;
    right: 0;
    bottom: 0;
    transform: translateY(100%);
    z-index: 99;
    background: linear-gradient(90deg, rgb(243, 226, 172) 0%, rgb(186, 149, 77) 100%);
    transition:0.2s ease;
}
.fixed_link:hover{opacity: 0.9;transition: opacity 0.2s ease-out;}

@media(max-width: 767px) {
    .fixed_link {
        display:none;
    }
}
.fixed_link img{
 max-height: 24px;
}
.fixed_link .icon {
    width: 33px;
    margin-left: 13px;
}

.fixed_link.active {
    transform: none;
}



/* ----------------------------------------------------------------
	Header style1 :menu right
-----------------------------------------------------------------*/
.header{    width: 100%;
    height: 80px;
    padding: 0 60px 0 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
background-color: #ededed;
    background-image: url(../images/header_bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, .16);
    transition: all 0.3s linear;
}

/* logo */
.header .logo{display:block;height:auto;transition: all 0.3s linear;    margin-right: 48px;
    flex-shrink: 0;}

@media screen and (max-width:991px){ 
    .header {position: fixed;
        min-width:0;
        height: 46px;
        padding: 0 0 0 14px;
        justify-content: flex-start;
        background-image: url("../images/header_bg_sp.webp");
    } 
.header .logo{   width:34px;
        z-index: 101;}
}


/* 主選單 NAVIGATION */
.header .navigation{float: left;display: flex;width: 100%;}
.header .navigation ul {padding: 0px;list-style: none;float:none;display: block;}
.header .navigation ul li {margin: 0;display: inline-block;float: left;position: relative;}
.header .navigation ul li a {display: block;color: #1252ac;
    letter-spacing: 1px;transition: all 0.3s;font-size: 15.5px!important;padding: 0 25px;}
.header .navigation ul li a:hover {opacity: 0.8;}
.header .navigation ul li.current a{color:#bd0025;}
@media(min-width: 992px) {
    .header .navigation ul li.current::before {
        content:"";
        width: 6px;
        height: 6px;
        margin: auto;
        display: block;
        position: absolute;
        right: 0;
        bottom: -13px;
        left: 0;
        background: #bd0025;
        border-radius: 50%
    }
 }

/* 主選單下拉 第二層 dropdownmenu */
.header ul.dropdownmenu{ display:none;position: absolute;background-color:#fff;
    z-index:9999;padding: 0;transition:all ease 0.5s;opacity: 0;min-width: 180px;
     left:-10px;box-shadow: 0 10px 20px -3px rgba(0,0,0,0.3);}
.header ul.dropdownmenu li{width: 100%;padding:0;margin: 0;}
.header ul.dropdownmenu li a {line-height:70px!important;float: none;text-decoration: none;
    display: block;text-align:center;border-top:1px solid #ccc;white-space:nowrap;
       /*background:linear-gradient(to top,#fbfbfb 0,#ffffff 100%);*/ }
.header ul.dropdownmenu li:first-child a{border-top: none;}
.header ul.dropdownmenu li:last-child a{}
.header ul.dropdownmenu li a:hover {color: #fff;
background:#C6AB7B;
}

.header .dropdown:hover ul.dropdownmenu {
    display: block; -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    opacity: 1;margin-top:0px;}  

/* 主選單下拉式 第二層 dropdownmenu--假如有子選單時顯示箭頭  */
.header .navigation li.has-child a:after{}
.header .navigation li.has-child ul li a:after{content:"";}    

/* 手機版選單右推開 mobimenu */
.smobitrigger,.mnuclose {display: none}
@media screen and (max-width:991px) {
.panellogo a{background:transparent;display:inline-block;}
.panellogo img {    width: 140px;padding:10px 0;}    
    .smobitrigger,
    .mnuclose {display: inline-block;}
    .smobitrigger {color: #fff;font-size: 20px;line-height: 12px;padding: 10px;position: absolute;        top: 0;
        right: 0;
        background: #fff;
        width: 46px;
        height: 100%;}
.smobitrigger .icon-bar{        display: block;        position: absolute;
        width: 16px;
        height: 2px;
        border-radius: 10px;
        background: #1147b4;        left: 14px;
        top: 19px;}
 .smobitrigger .icon-bar+.icon-bar{margin-top:6px;}    
.mnuclose span {text-shadow: none;text-decoration: none;color: #fff;        border-top: 1px solid #fff;
            border-bottom: 1px solid #fff;        padding-bottom: 3px;        display: inline-block;        margin-top: 10px;}
.mnuclose span::before {
    content: "CLOSE";
    font-size: 1.1rem;
    color: #fff;align-items: center;
        display: flex;
}
a.mnuclose{text-decoration: none;        position: absolute;font-size: 14px;width: 46px;height: 46px;
        right: 0;
        top: 0;} 
.header .navigation{float: left;}    
.header .navigation ul {overflow-y: auto;background: rgba(20, 62, 147, .97);
            padding: 85px 20px;        width: 100%;}
.header .navigation ul li{        display: block;
        float: none;}
    .header .navigation ul li+li{margin-top:30px;}
.header .navigation ul li a {color: #fff!important;
        width: auto;display: block;font-size: 20px!important;letter-spacing: 1px;
      line-height: 30px !important;
        display: inline-block;
        position: relative;}
.header .navigation ul li a {padding: 0!important;color: #fff;text-align: left;
      
    }
.header .navigation ul li.current a:before {
        content: "";
        width: 105%;
        height: 2px;
        background-color: #fff;
        position: absolute;
        bottom: -5px;
        left: 50%;
        transform: translateX(-50%);
        transition: width .1s ease-out;
    }
.header .navigation ul li a:hover,.navigation ul li a:focus,.navigation ul li a:after{
      opacity: 0.7;z-index: 99;

    }
    .mobimenu {
        list-style: none;
        padding: 20px;
        margin: 0px;
        height: 100%;
        position: fixed;
        height: 100%;
        left: 0px;
        top: -100%;
    }
    .mnuopn {
        top: 0px!important;
    }
    .ovrActv {

        transition: 0.3s;
        -webkit-transition: 0.3s;
        -moz-transition: 0.3s;
        -ms-transition: 0.3s;
        -o-transition: 0.3s;
    }
.navigation li ul.dropdownmenu{width: 100%;display:block;position: relative;opacity: 1;margin-top: 0;}
.navigation li ul.dropdownmenu li a{margin: 0;border-bottom: none;padding:6px 20px 6px 40px;white-space: normal;text-align: left;
    line-height: 1.6em;
    }
    .mobimenu ul.dropdownmenu li a{background: #333;border: none;line-height: 50px!important;}
.moinner{max-width: 270px;margin: auto;}
}

/* right-link */
.header .right-link{float: right;position: relative;}
.header .right-link .cart{    width: 150px;
    height: 40px;color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #fff;padding: 0 15px;
background: linear-gradient(90deg, rgb(243, 226, 172) 0%, rgb(186, 149, 77) 100%);
    transition: 0.2s ease;}
.header .right-link .cart a{color: #fff;}
.header .right-link .cart .icon img{color: #fff;margin-bottom: 5px;}
.header .right-link .cart:hover{opacity: 0.8;}
@media screen and (max-width:991px) {
.header .right-link {
    float: right;
    position: absolute;
    top: 0;
    right: 46px;
}
.header .right-link .cart{    position: absolute;
    top: 0;border: none;    width: 47px;
    height: 47px;
    z-index: 1;
    right: 0;}
.header .right-link .cart .txt{display: none;}

}

/* ----------------------------------------------------------------
	sidemenu
-----------------------------------------------------------------*/


/* ----------------------------------------------------------------
	Footer 
-----------------------------------------------------------------*/

.footer{background:#fff;color: #000;text-align: center;border-top:1px solid #eee;padding:20px 0 20px;}
.footer h4{font-weight:400;}
.footer .logo{max-width: 150px;text-align: center;display: block;margin: auto;}
.footer a{color: #888; -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;font-size: 100%;}
.footer a:hover{color: #fff; text-decoration: none;
 -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;}
.footer .widget_links{display:block;width: 33.3%;float: left;}
.footer .widget_links ul li a:before{font-family: 'Glyphicons Halflings';
font-size: 7px;margin-right: 5px;}
.footer .widget_links ul li a{padding: 5px 5px 5px 0;display: block;}
.copyrights{padding: 20px 0;letter-spacing: 1px;color: #1147b4;;font-size: 0.9em;border-top: 1px solid rgba(255,255,255,0.1);font-weight: 300;
text-align: center;}
.copyrights .container p{float: left;}
.copyrights .container a{float: right;}

@media screen and (max-width: 991px){
.copyrights {letter-spacing: 0;font-size: 0.8em;}   
}
@media screen and (max-width: 767px){
.footer .logo{max-width: 100px;margin: auto;}
}
/* ----------------------------------------------------------------
	Video Youtube RWD
-----------------------------------------------------------------*/
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0px;
    height: 0;
    overflow: hidden;
}
.video-container iframe, .video-container object, .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.iframe-rwd {
    position: relative;
    padding-bottom:100%;
    padding-top:100%;
    height: 100%;
    overflow: visible;
}
.iframe-rwd iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ----------------------------------------------------------------
	首頁 carousel 
-----------------------------------------------------------------*/
/* 大圖輪播*/

.carousel-inner{height: 100%;}
.carousel-control.right,.carousel-control.left{background-image: none;}
.carousel-control{display: none; text-shadow: none;width: 50px;
   background-color: #c0a27d;height: 50px;top:50%;margin-top: -30px;border-radius: 400px;}
.carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev{margin-left: -15px;margin-top: -15px;font-size: 22px;line-height:30px;}
.carousel-control .glyphicon-chevron-right, .carousel-control .icon-next{margin-right: -15px;margin-top: -15px;font-size: 22px;line-height:30px;}
.carousel-indicators li{width: 14px;height: 14px;margin:6px;}
.carousel-indicators .active{width: 14px;height: 14px;margin: 6px;}
.carousel-indicators {
    position:absolute;bottom: -65px;}
.carousel-indicators li{   background-color:#E5DDD1;}
.carousel-indicators .active{    background-color: #000000;}

@media screen and (max-width: 991px){
.carousel-control{background-color: transparent;}
.carousel-indicators {bottom: -10px;}
.carousel-indicators li{width: 10px;height: 10px;margin: 2px;}
.carousel-indicators .active{width: 10px;height:10px;margin: 2px;}    
}
@media screen and (max-width: 767px){

    .carousel-control.right, .carousel-control.left{display: none;}    
.carousel-indicators {bottom:-45px;} 
.carousel-indicators li{}    
.carousel-indicators .active {}    
}
/* ----------------------------------------------------------------
首頁 TOP home
-----------------------------------------------------------------*/
.series {
    padding: 89px 0 99px;
    background-color: #fff;
    background-image: url("../images/bg_triangle_top.webp"),url("../images/bg_triangle_bottom.webp");
    background-repeat: no-repeat;
    background-position: top,bottom;
    background-size: 100% 271px,100% 272px;
}
.inner {
    width: calc(100% - 50px);
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
section.series h2 {
    margin-bottom: 55px;
}
.en_ttl {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.en_ttl span {
    margin-top: 13px;
    display: inline-block;
    font-size: 1.8rem;
    font-weight: bold;
    color: #bd9953;
}
section.series .series_list li+li {
    margin-top: 30px;
}
section.series .series_list img {
    width: 100%;
    height: auto;
    box-shadow: 10px 10px 26px 0px rgba(0,0,0,.16)
}
@media(max-width: 767px) {
    .en_ttl img {
        height: 27px;
    }
        .en_ttl span {
        margin-top: 9px;
        font-size: 1.4rem;
    }
    section.series {
        padding:52px 0 59px;
        background-image: url("../images/bg_triangle_top_sp.webp"),url("../images/bg_triangle_bottom_sp.webp");
        background-size: 100% 128px,100% 127px;
    }    
        section.series h2 {
        margin-bottom:38px;
    }
    section.series .series_list img {
        box-shadow:5px 5px 13px 0px rgba(0,0,0,.16);
    }
}