/* layout.css 複製僅修正 連結後 再搬入 wordpress */

@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap');
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
/**{ font-family: 'Noto Serif TC', serif; }*/

*{ margin:0; padding:0; font-family:'Noto Sans TC', sans-serif; font-size:16px; color:#333; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
a{ text-decoration:none; }
p{ line-height: 1.8; }
.se_pager_content{ margin-top: 150px; }
.se_back_btnBox{ margin: 60px auto 80px; text-align: center; }
.se_back_btnBox a{ display: inline-block; line-height: 26px; background: #ff7f00; color: #fff; font-size: 1rem; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; padding: 0 10px; }

.header{ position:fixed; z-index:100; top:0; left:0; right:0; margin:auto; transition:background-color .3s; }
.header:before{ content:""; display:block; height:10px; width:100%;
background: rgb(5,44,89);
background: -moz-linear-gradient(left,  rgba(5,44,89,1) 0%, rgba(14,143,155,1) 100%);
background: -webkit-linear-gradient(left,  rgba(5,44,89,1) 0%,rgba(14,143,155,1) 100%);
background: linear-gradient(to right,  rgba(5,44,89,1) 0%,rgba(14,143,155,1) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#052c59', endColorstr='#0e8f9b',GradientType=1 ); }
.header .mar{ max-width:1400px; margin:auto; padding:0 20px; height:140px; display:flex; align-items: center; justify-content: space-between; }
.header .mar .logo{ display:block; width:290px; height:45px; background-image:url(assets/images/layout/logo.png); background-position:center; background-repeat:no-repeat; background-size:290px; }
.header .mar .rightbox{ height:140px; display:flex; align-items: flex-end; }
.header .mar .menubtn{ display:none; }
.header .mar .topbox{ display:flex; margin-bottom:10px; justify-content: flex-end; }
.header .mar .topbox .alinkbox{ display:flex; order:1; }
.header .mar .topbox .alink{ border:1px solid #fff; line-height:28px; padding:0 10px; border-radius:50px; -webkit-border-radius:50px; -moz-border-radius:50px; font-size:0.875rem; color:#fff; margin-left:10px; transition: .5s all; -webkit-transition: .5s all; -moz-transition: .5s all; }
.header .mar .topbox .memberblock{ order:2; }
.header .mar .topbox .memberbtn{ display:block; line-height:28px; padding:0 10px; border-radius:50px; -webkit-border-radius:50px; -moz-border-radius:50px; font-size:0.875rem; color:#fff; background:#ff7f00; margin-left:10px; }
.header .mar .topbox .memberoder{ display:flex; margin:0 0 0 10px; line-height: 30px; border: 1px solid #fff; padding: 0 15px; border-radius: 50px; background: #fff; }
.header.down .mar .topbox .memberoder{ background:#eee; }
.header .mar .topbox .memberoder .names{ font-size:1rem; color:#333; display:block; margin-right:10px; padding-right:10px; position:relative; transition: .5s all; -webkit-transition: .5s all; -moz-transition: .5s all; }
.header .mar .topbox .memberoder .names:after{ content:""; display:block; width:1px; height:16px; background:#ccc; position:absolute; right:0; bottom:0; top:0; margin:auto; }
.header .mar .topbox .memberoder .logout{ font-size:0.875rem; color:#333; display:block; transition: .5s all; -webkit-transition: .5s all; -moz-transition: .5s all; }

.header .mar .bottombox{ display:flex; justify-content: flex-end; }
.header .mar .bottombox .grids{ position: relative; margin-left:30px; height:60px; }
.header .mar .bottombox .grids:after{ content:""; background:#ff7f00; height:2px; position:absolute; left:0; bottom:0; margin:auto; width:0%; transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; }
.header .mar .bottombox .alink{ display:block; font-size:1.125rem; color:#fff; }
.header .mar .bottombox .grids .du{ position:absolute; top:60px; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); margin:auto; height:0; overflow:hidden; min-width:100%; }
.header .mar .bottombox .grids .du .dus{ transform:translateY(0); -webkit-transform:translateY(0); -moz-transform:translateY(0); background:#eee; position:relative; box-shadow: 0 5px 8px rgba(0,0,0,0.1); opacity: 0; transition: 0.8s all; -webkit-transition: 0.8s all; -moz-transition: 0.8s all;  }
.header .mar .bottombox .grids .du .dus:before{ content:""; position:absolute; top:-18px; left:0; right:0; margin:auto; display:block; border-color:transparent transparent #ff7f00 transparent; border-width: 0 6px 8px 6px; border-style:solid; width:0; height:0; }
.header .mar .bottombox .grids .du .dlist{ display:block; color:#333; font-size:0.875rem; text-align:center; padding:8px 10px; white-space:nowrap; transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; }

.header.down{ background:#fff; }
.header.down .mar .logo{ background-image:url(assets/images/layout/logo_color.png); }
.header.down .mar .topbox .alink{ border-color:#ccc; color:#777; }
.header.down .mar .bottombox .alink{ color:#000; }

.footer{ background:#eee; position:relative; z-index:31; }
.footer .topbox{ max-width:1400px; margin:auto; padding:45px 20px; display:flex; }
.footer .topbox .lbox{ width:50%; }
.footer .topbox .lbox .logobox{ display:flex; margin-bottom:35px; }
.footer .topbox .lbox .logobox .ls{ display:block; margin-right:20px; }
.footer .topbox .lbox .logobox .ls img{ max-width:100%; vertical-align:middle; }
.footer .topbox .lbox .logobox .ls:nth-child(1) img{ width:170px; }
.footer .topbox .lbox .logobox .ls:nth-child(2) img{ width:280px; }
.footer .topbox .lbox .datas{ margin-bottom:35px; }
.footer .topbox .lbox .datas .dlist{ display:flex; margin-bottom:15px; align-items: flex-start; }
.footer .topbox .lbox .datas .dlist:last-child{ margin:0; }
.footer .topbox .lbox .datas .d1{ width:70px; display:flex; align-items: center; }
.footer .topbox .lbox .datas .d1 .icon{ width:19px; font-size:0; }
.footer .topbox .lbox .datas .d1 .icon img{ max-width:100%; }
.footer .topbox .lbox .datas .d1 .txt{ font-size:0.875rem; color:#333; padding:0 0 0 5px; }
.footer .topbox .lbox .datas .d2{ flex:1; font-size:0.875rem; color:#333; }
.footer .topbox .lbox .datas .d2 span{ font-size:0.75rem; color:#777; } 
.footer .topbox .lbox .linkbox{ display:flex; }
.footer .topbox .lbox .linkbox .lk{ display:block; width:28px; height:28px; background-position:center; background-repeat:no-repeat; background-size:28px; margin-right:20px; }
.footer .topbox .lmenu{ width:50%; display:flex; justify-content: flex-end; }
.footer .topbox .lmenu .lgrid{ margin:0 0 0 80px; }
.footer .topbox .lmenu .lgrid:first-child{ margin:0; }
.footer .topbox .lmenu .lgrid .title{ display:block; font-size:1rem; font-weight:bold; color:#333; margin-bottom:15px; white-space:nowrap; }
.footer .topbox .lmenu .lgrid .txts{ display:block; color:#333; font-size:1rem; margin-bottom:10px; font-weight:300; }
.footer .bottombox{ padding:20px; text-align:center; color:#fff; font-size:0.875rem; font-weight:300;
background: rgb(5,44,89);
background: -moz-linear-gradient(left,  rgba(5,44,89,1) 0%, rgba(14,143,155,1) 100%);
background: -webkit-linear-gradient(left,  rgba(5,44,89,1) 0%,rgba(14,143,155,1) 100%);
background: linear-gradient(to right,  rgba(5,44,89,1) 0%,rgba(14,143,155,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#052c59', endColorstr='#0e8f9b',GradientType=1 ); }
.footer .bottombox a{ color:#fff; font-size:0.875rem; font-weight:300; }


/* Fade In */
/* 淡入 */
.fadeIn_base { opacity: 0; visibility: hidden;
    -webkit-transition: all 1.2s cubic-bezier(0.42, 0, 0.58, 1.0);
    -moz-transition: all 1.2s cubic-bezier(0.42, 0, 0.58, 1.0);
    -o-transition: all 1.2s cubic-bezier(0.42, 0, 0.58, 1.0);
    transition: all 1.2s cubic-bezier(0.42, 0, 0.58, 1.0);
}

.fi_top {       transform: translate(   0px,   50px); }
.fi_bottom {    transform: translate(   0px,  -50px); }
.fi_left {      transform: translate( -50px,    0px); }
.fi_right {     transform: translate(  50px,    0px); }
.fi_right_v2 {  transform: translate( 100px,    0px); }

.fi_end { opacity: 1; visibility: visible; transform: translate(0,0); }

/* Class 內 逐一進入 ( 公共 mini ) */
.fadeInBox.miniTime1 .fadeIn_base:nth-child(1) { transition-delay: 0.1s; }
.fadeInBox.miniTime1 .fadeIn_base:nth-child(2) { transition-delay: 0.2s; }
.fadeInBox.miniTime1 .fadeIn_base:nth-child(3) { transition-delay: 0.3s; }
.fadeInBox.miniTime1 .fadeIn_base:nth-child(4) { transition-delay: 0.4s; }
.fadeInBox.miniTime1 .fadeIn_base:nth-child(5) { transition-delay: 0.5s; }
.fadeInBox.miniTime1 .fadeIn_base:nth-child(6) { transition-delay: 0.6s; }
.fadeInBox.miniTime1 .fadeIn_base:nth-child(7) { transition-delay: 0.7s; }
.fadeInBox.miniTime1 .fadeIn_base:nth-child(8) { transition-delay: 0.8s; }
.fadeInBox.miniTime1 .fadeIn_base:nth-child(9) { transition-delay: 0.9s; }
.fadeInBox.miniTime1 .fadeIn_base:nth-child(10) { transition-delay: 1.0s; }
.fadeInBox.miniTime1 .fadeIn_base:nth-child(11) { transition-delay: 1.1s; }
.fadeInBox.miniTime1 .fadeIn_base:nth-child(12) { transition-delay: 1.2s; }
.fadeInBox.miniTime1 .fadeIn_base:nth-child(13) { transition-delay: 1.3s; }
.fadeInBox.miniTime1 .fadeIn_base:nth-child(14) { transition-delay: 1.4s; }
.fadeInBox.miniTime1 .fadeIn_base:nth-child(15) { transition-delay: 1.5s; }
.fadeInBox.miniTime1 .fadeIn_base:nth-child(16) { transition-delay: 1.6s; }
.fadeInBox.miniTime1 .fadeIn_base:nth-child(17) { transition-delay: 1.7s; }
.fadeInBox.miniTime1 .fadeIn_base:nth-child(18) { transition-delay: 1.8s; }
.fadeInBox.miniTime1 .fadeIn_base:nth-child(19) { transition-delay: 1.9s; }
.fadeInBox.miniTime1 .fadeIn_base:nth-child(20) { transition-delay: 2.0s; }

/*================================●●●●●●●●●●●●Hover●●●●●●●●●●●●================================*/
@media screen and (min-width:1024px){
.header .mar .bottombox .grids:hover:after{ width:100%; }
.header .mar .bottombox .grids:hover .du{ height:auto; overflow: inherit; }
.header .mar .bottombox .grids:hover .du .dus{ opacity:1; transform:translateY(30px); -webkit-transform:translateY(30px); -moz-transform:translateY(30px); }
.header .mar .bottombox .grids .du .dlist:hover{ color:#ff7f00; }

.header .mar .topbox .memberoder .names:hover{ color:#ff7f00; }
.header .mar .topbox .memberoder .logout:hover{ color:#ff7f00; }

.header .mar .topbox .alink:hover{ color:#fff; border-color:#ff7f00; background:#ff7f00; }

}

/*================================●●●●●●●●●●●●電腦●●●●●●●●●●●●================================*/
@media screen and (max-width:1200px){
.footer .topbox{ flex-wrap:wrap;  }
.footer .topbox .lbox{ width:100%; display:flex; flex-wrap:wrap; }
.footer .topbox .lbox .logobox{ width:100%; }
.footer .topbox .lbox .datas{ margin:0; }
.footer .topbox .lbox .linkbox{ flex:1; justify-content: flex-end; }
.footer .topbox .lmenu{ width:100%; padding:40px 0 0 0; justify-content:flex-start; }
.footer .topbox .lmenu .lgrid{ margin:0; width:33.33334%; }
.se_pager_content{ margin-top: 60px; }
}

/*================================●●●●●●●●●●●●平板●●●●●●●●●●●●================================*/
@media screen and (min-width:768px) and (max-width:1023px){
.header:before{ height:5px; }
.header .mar{ height:100px; }
.header .mar .rightbox{ height:auto; }
.header .mar .menus{ display:none; position: fixed; top: 105px; left: 0; right: 0; margin: auto; background:#eee; padding: 20px; box-shadow: 0 5px 10px rgba(0,0,0,0.1); }
.header .mar .topbox{ justify-content: center; margin-bottom: 30px; }
.header .mar .topbox .alink{ color:#333; border-color:#333; }
.header.down .mar .topbox .memberoder{ background:#fff; }

.header .mar .bottombox{ justify-content: flex-start; margin-left:-20px; }
.header .mar .bottombox .alink{ color:#333; margin: 0 0 20px 0; padding: 0 0 20px 0; border-bottom: 1px solid #ccc; }
.header .mar .bottombox .grids{ width:33.33334%; margin:0; height: auto; padding-left:20px; }
.header .mar .bottombox .grids .du{ height:auto; overflow:inherit; position:relative; top:auto; left:auto; transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); }
.header .mar .bottombox .grids .du .dus{ opacity:1; box-shadow:none; }
.header .mar .bottombox .grids .du .dus:before{ display:none; }
.header .mar .bottombox .grids .du .dlist{ text-align:left; }

.header .mar .menubtn{ display:block; width:30px; height:22px; cursor:pointer; position:relative; }
.header .mar .menubtn:before{ content:""; display:block; height:2px; width:100%; background:#fff; }
.header .mar .menubtn:after{ content:""; display:block; height:2px; width:100%; background:#fff; }
.header .mar .menubtn span{ display:block; height:2px; width:100%; background:#fff; margin:8px 0; }

.header .mar .menubtn.open span{ display:none; }
.header .mar .menubtn.open:after{ position:absolute; left:0; right:0; bottom:0; top:0; margin:auto; transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; }
.header .mar .menubtn.open:before{ position:absolute; left:0; right:0; bottom:0; top:0; margin:auto; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; }

.header.down .mar .topbox .alink{ color: #333; border-color: #333; }
.header.down .mar .bottombox .alink{ color:#333; }

.header.down .mar .menubtn:before{ background:#ff7f00 }
.header.down .mar .menubtn:after{ background:#ff7f00 }
.header.down .mar .menubtn span{ background:#ff7f00 }

}

/*================================●●●●●●●●●●●●手機●●●●●●●●●●●●================================*/
@media screen and (max-width:767px){
.header:before{ height:3px; }
.header .mar{ height:70px; padding:0 15px; }
.header .mar .logo{ width:200px; height:31px; background-size:200px; background-image:url(assets/images/layout/logo_sp.png); }
.header .mar .rightbox{ height:auto; }
.header .mar .menus{ display:none; position: fixed; top:73px; left: 0; right: 0; margin: auto; background:#eee; padding: 20px; box-shadow: 0 5px 10px rgba(0,0,0,0.1); max-height: calc( 100% - 73px ); overflow: auto; }
.header .mar .topbox{ justify-content: center; margin-bottom:20px; flex-wrap:wrap; }
.header .mar .topbox .alink{ color:#333; border-color:#333; margin:0 7px; }

.header .mar .topbox .memberblock{ width:100%; padding:30px 0 0 0; }
.header .mar .topbox .memberbtn{ margin:0; border-radius:0px; -webkit-border-radius:0px; -moz-border-radius:0px; font-size: 1.125rem; line-height: normal; padding:10px; color:#fff; background: #ff7f00; display:flex; justify-content:space-between; align-items: center; }
.header .mar .topbox .memberbtn:after{ content:""; display:block; background-image:url(assets/images/layout/arrow_right.svg); width:10px; height:10px; background-size:10px; background-repeat:no-repeat; background-position:center; }

.header .mar .bottombox{ justify-content: flex-start; margin-left:0; flex-wrap:wrap; }
.header .mar .bottombox .alink{ color:#333; margin: 0 0 10px 0; padding:10px; border-bottom:none; font-size:1.125rem; background:#fff;  display:flex; justify-content:space-between; align-items: center; }
.header .mar .bottombox .alink:after{ content:""; display:block; background-image:url(assets/images/layout/arrow_right_black.svg); width:10px; height:10px; background-size:10px; background-repeat:no-repeat; background-position:center; }
.header .mar .bottombox .alink.alinkNoArrow:after{ display:none; }
.header .mar .bottombox .grids{ width:100%; margin:0; height: auto; padding-left:0; padding-bottom:20px; }
.header .mar .bottombox .grids .du{ height:auto; overflow:inherit; position:relative; top:auto; left:auto; transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); }
.header .mar .bottombox .grids .du .dus{ opacity:1; box-shadow:none; padding: 0 10px; }
.header .mar .bottombox .grids .du .dus:before{ display:none; }
.header .mar .bottombox .grids .du .dlist{ text-align:left; padding:5px 0; }

.header .mar .menubtn{ display:block; width:30px; height:22px; cursor:pointer; position:relative; }
.header .mar .menubtn:before{ content:""; display:block; height:2px; width:100%; background:#fff; }
.header .mar .menubtn:after{ content:""; display:block; height:2px; width:100%; background:#fff; }
.header .mar .menubtn span{ display:block; height:2px; width:100%; background:#fff; margin:8px 0; }

.header .mar .menubtn.open span{ display:none; }
.header .mar .menubtn.open:after{ position:absolute; left:0; right:0; bottom:0; top:0; margin:auto; transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; }
.header .mar .menubtn.open:before{ position:absolute; left:0; right:0; bottom:0; top:0; margin:auto; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; }

.header .mar .topbox .memberoder{ margin:0; display:flex; background:#ff7f00; line-height: 40px; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; }
.header .mar .topbox .memberoder .names{ flex:1; color:#fff; }
.header .mar .topbox .memberoder .logout{ color:#fff; font-size:1rem; padding: 0 15px; }

.header.down .mar .topbox .alink{ color: #333; border-color: #333; }
.header.down .mar .topbox .memberoder{ background:#ff7f00; }
.header.down .mar .topbox .memberoder .names{ color:#fff; }
.header.down .mar .topbox .memberoder .logout{ color:#fff; }
.header.down .mar .bottombox .alink{ color:#333; }

.header.down .mar .menubtn:before{ background:#ff7f00 }
.header.down .mar .menubtn:after{ background:#ff7f00 }
.header.down .mar .menubtn span{ background:#ff7f00 }

.footer .topbox .lbox .datas{ margin-bottom:25px; width:100%; }
.footer .topbox .lbox .logobox{ flex-direction: column; align-items: center; }
.footer .topbox .lbox .logobox .ls{ margin:0 0 10px 0; }
.footer .topbox .lbox .logobox .ls:last-child{ margin:0; }
.footer .topbox .lbox .linkbox{ justify-content: center; }
.footer .topbox .lbox .linkbox .lk{ margin:0 10px; }

.footer .topbox .lmenu{ display:none; }

.footer .bottombox{ font-size:0.75rem; }
.footer .bottombox a{ font-size:0.75rem; }

}