/*************** Google Font ***************/
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url("./public/googlefont/MaterialIcons-Regular.eot"); /* For IE6-8 */
    src: local('Material Icons'),
        local('MaterialIcons-Regular'),
        url("./public/googlefont/MaterialIcons-Regular.ttf") format('truetype');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
  
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
  
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
  
    /* Support for IE. */
    font-feature-settings: 'liga';
}
/*************** Google Font ***************/

html * { max-height: 9999999px; }
body {
    text-align: center;
    color: #545454;
    font-family: "Arial","微軟正黑體","Microsoft JhengHei", serif;
    line-height: 1.4;
    font-size: 16px;
    background-color:#ffffff;
}
img { width:100%; border: 0px; } /* */
ul, ol { padding:0; margin:0; }
li { list-style: none; }
button { border:none; background-color:transparent; }
a { color:#fff; text-decoration: none; }
a:hover { color:#ffcc66; text-decoration: none; }
a.Color2 { color:#0172a2; }
a.Color2:hover { color:#f0ab00; }
a.Color3 { color:#0094d7; }
a.Color3:hover { color:#ffcc66; }

/*** LINE ***/
.mh3 { height:3px; overflow:hidden; }
.mh5 { height:5px; overflow:hidden; }
.mh8 { height:8px; overflow:hidden; }
.mh10 { height:10px; overflow:hidden; }
.mh15 { height:15px; overflow:hidden; }
.mh20 { height:20px; overflow:hidden; }
.mh30 { height:30px; overflow:hidden; }
.mh80 { height:80px; overflow:hidden; }

/* .lineType1 { background-color:#fff; height:2px; overflow:hidden; } */
/* .lineType2 { background-color:#e5e5e5; height:1px; overflow:hidden; } */

/* Chrome, Safari, Edge, Opera */
/* remove input type=number arrow */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
/* remove input type=number arrow */
input[type=number] {
  -moz-appearance:textfield;
}


.main { width:100%; text-align:left; }
.Title1 { font-size:1.5rem; color:#fff; }
.Title2 { font-size:1.5rem; color:#0094d7; }
.SubTitle1 { color:#10155e; }


body .LinkType1 { display: inline-block; padding:8px 25px; border-radius: 25px; color:#0094d7; border:1px solid #0094d7; }
body .LinkType1:hover { background-color:#0094d7; color:#fff; }
body .LinkType2 { display: inline-block; padding:8px 25px; border-radius: 25px; color:#024765; background-color:#fff; }
body .LinkType2:hover {  }

.IconType1 { display: inline-flex; justify-content: center; align-items:center; width:32px; height:32px; background-color:#004a86; color:#fff; border-radius: 25px; }

/* 自定義圖片區塊 */
.BaseBD { position: relative; width:100%; }
.BaseTopBnr { padding-top:416px; }
.BaseImgS { padding-top:46.85%; }
.Base169 { padding-top:56.25%; }
.Base11 { padding-top:100%; }
.BaseArea { position: absolute; top:0px; left:0px; bottom:0px; right:0px; overflow: hidden; }

/* 圖片cover */
.imgCoverBox { overflow: hidden; }
.imgCoverBox .wh { height:100% !important; width:auto !important; }
.imgCoverBox .ww { width:100% !important; height:auto !important; }

/************************** video 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%;
}

.video-container-4by3 {
	position: relative;
	padding-bottom: 75%;
	padding-top: 0px;
	height: 0;
	overflow: hidden;
}

.video-container-4by3 iframe, .video-container object, .video-container embed {
	position: absolute;
	top: 0;left: 0;
	width: 100%;
	height: 100%;
}
/************************** video rwd **************************/

/*******************************************/
/* header */
.mask { display: none; position:fixed; left:0; right:0; top:0; bottom:0; background-color:rgba(255,255,255,0.5); z-index:5; }

header .topNavbar { background-color:#4e4e4e; color:#fff; }
header .topNavbar .nav-link { font-size:0.9375rem; padding:8px 18px; }
header .topNavbar li { position: relative; }
header .topNavbar .submenu { display: none; background-color:#fff; position: absolute; top:37px; left:0px; width:280px; text-align:left; z-index:10; }
header .topNavbar li:hover .submenu { display: block; }

header .topNavbar .submenu .country,
header .top .navbar .submenu .country { padding:15px; }
header .topNavbar .submenu .country li a,
header .top .navbar .submenu .country li a { padding:0; font-size:0.75rem; }

header .top { position: relative; }
header .top_h { height:416px; } 
header .top_h2 { height:380px; }


header .top .topmenu { position: relative; height:144px; }
header .top .topmenu .logo { position: absolute; left:170px; bottom:0px;  }
header .top .topmenu .logo img { max-width:120px; }

header .top .navbar { padding:0; }
header .top .navbar ul.nav { justify-content: flex-start; }
header .top .navbar li { position: relative; }
header .top .navbar a.nav-link { font-size:1.125rem; padding:7px 18px 12px; border-top:5px solid transparent; }

header .top .navbar .submenu { display: none; background-color:#e5e5e5; padding:10px 0px; position: absolute; top:49px; left:0px; width:220px; text-align:left; z-index:10; }
header .top .navbar .submenu li a { display: block; font-size:0.9375rem; padding:6px 10px; color:#0094d7; border-left:6px solid transparent; }

header .top .topsearch { position: absolute; top:12px; right:18px; }
header .top .topsearch form { position: relative; display: inline-flex; height:22px; font-size:0.875rem; }
header .top .topsearch form input,
header .top .topsearch form button { border:none; background-color:#fff; border-bottom:2px solid #005981; outline: none; }
header .top .topsearch form input { width:210px; padding-left:10px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
header .top .topsearch form button { color:#0094d7; border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
header .top .topsearch form .line { position: absolute; width:1px; right:26px; top:0; bottom:2px; background-color:#cccccc; }

header .top .toptxt { text-align:left; padding:18px; margin-top:40px; color:#fff; font-size:2.5rem; font-weight: bold; text-shadow:1px 1px 2px rgba(0,0,0,0.5); }
header .top .modtxt { text-align:left; padding:18px 0; margin-top:60px; color:#fff; font-size:2.5rem; font-weight: bold; text-shadow:1px 1px 2px rgba(0,0,0,0.5); }

header .top .topbnr { z-index:-10; }

/* footer */
footer { color:#fff; }
footer .ftop { text-align:left; padding:60px 0px; background-color:#024765; }
footer .ftop .tit { font-size:1.25rem; }
footer .ftop ul li { margin-top:8px; }
footer .ftop .LinkType2 { margin-top:20px; padding:8px 20px; }
footer .ftop ul li a { color:#0094d7; }
footer .ftop ul li a:hover { color:#ffcc66; }

footer .fbottom { padding:25px 0px; background-color:#000; }
footer .fbottom .container { display: flex; justify-content: space-between; align-items:center; }
footer .fbottom .copyright { font-size:0.875rem; }

/* public */
.totop { position: fixed; right:10px; top:80%; background-color:#4d4d4d; color:#fff; width:70px; height:70px; }

.page { margin:2rem 0; text-align:center; }
.page .prev { 
    display:inline-block; 
    margin-right:1rem;
    font-size:14px;
    vertical-align:middle;
}
.page .prev .icon {
    display: -ms-flexbox; 
    display:flex;
    width:100%; height:100%; 
    align-items:center;
    justify-content:center;
    margin-left:-1px;
}
.page .next { 
    display:inline-block; 
    margin-left:1rem;
    font-size:14px;
    vertical-align:middle; 
}
.page .next .icon {
    display: -ms-flexbox; 
    display:flex;
    width:100%; height:100%; 
    align-items:center;
    justify-content:center;
    margin-left:1px;
}

.page .none {
    display:inline-block; 
    color:#ffffff;
    background-color:#c7c6c4;  
    border-radius:20px; 
    width:30px; 
    height:30px;
}
.page .prev a, 
.page .next a { 
    display:inline-block; 
    color:#ffffff; 
    background-color:#0094d7; 
    border-radius:20px; 
    width:30px; 
    height:30px; 
}
.page .prev a:hover, 
.page .next a:hover { background-color:#231916; }

.m-nav { position:relative; }
.m-nav .m-sel-title { padding:3px 0; text-align:left; position:relative; border-bottom:1px solid #202020; padding-bottom:0.5rem; }
.m-nav .m-sel-title .name { display:inline-block; margin-right:2rem; }
.m-nav .m-sel-title .icon { display:inline-block; position:absolute; top:3px; right:10px; }
.m-nav .m-nav-div { position:relative; margin-bottom:1rem; margin-top:1rem; }  
.m-nav .m-nav-menu { border:1px solid #808080; border-radius:5px; margin-top:0.125rem; width:100%; background-color:#fff; }
.m-nav ul.m-nav-menu { margin:0; padding:0; list-style-type:none; } 
.m-nav ul.m-nav-menu li { margin:0 1.5rem; padding:0.5rem 0; text-align:center; border-top:1px solid #808080; }
.m-nav ul.m-nav-menu li:first-child { border-top:0px none #e8e8e8; }
.m-nav ul.m-nav-menu li a { color:#202020; display:block; padding:0.5rem 0;}
.m-nav ul.m-nav-menu .m-now a { color:#f0831e; }

.m-page { width:250px; margin-left:auto; }
.m-page .bdr { text-align:center; }
.m-page .m-sel-title { padding:8px 15px; display:inline-block; border:1px solid #dae2e5; }
.m-page .m-sel-title .name { margin-right:1rem; }
.m-page .m-sel-title .icon { position:static; }
.m-page .prev { padding:0px 5px; display:inline-block; }   
.m-page .next { padding:0px 5px; display:inline-block; }


form label:not(.form-check-label):not(.checkLabel) { color:#0068b7; }
form .form-check-inline { margin-bottom:0.5rem; }
form .form-group { margin-bottom:1.5rem; }

form select { 
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;

    cursor:pointer; 
    background-image: url(images/sel_down.png);
    background-size: 0.8rem;
    background-position: calc(100% - 0.5rem) center;
    background-repeat: no-repeat;
    
}
form select::-ms-expand { display:none; }
form select.form-control { padding-right:1.5rem; }

form .form-control { border-radius:0; background-color:#f6f6f6; }
form .form-control:focus { box-shadow:none; border-color:#303030; }
form .form-control:disabled, .form-control[readonly] {
	background-color: #f7f7f5;
	opacity: 1;
}
form button.send { border:0 none; background-color:#d88c02; color:#fff; padding:8px 60px; border-radius:20px; }

form .checkLabel { display:inline-block; position: relative; padding-left:25px; }
form .checkLabel .chkInput { position:absolute; top:6px; left:2px; opacity:0; }
form .checkLabel:hover .chkBox { background-color:#d0d0d0; }
form .chkBox { display:inline-block; width:1rem; height:1rem; background-color:#e0e0e0; border-radius:2px; position:absolute; top:3px; left:0; }
form .chkBox::after { 
    content:""; 
    width:6px; height:10px; 
    border-width:0 2px 2px 0; 
    border-color:#fff; 
    border-style:solid; 
    position:absolute; top:1px; left:calc(50% - 3px);
    -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);
    display:none;
    }
form .checkLabel .chkInput:checked ~ .chkBox { background-color:#000; }
form .checkLabel .chkInput:checked ~ .chkBox::after { display:block; }

#loginModal .modal-dialog {  max-width:550px; text-align:left; } /* margin-top:20vh; */ 

#loginModal .modal-dialog .close { font-size:1rem; position:absolute; top:-1.8rem; right:0; color:#fff; opacity:1; text-shadow:none; }
#loginModal .modal-dialog .close .fas { font-size:1.1rem; vertical-align:top; }

#loginModal .modal-content { margin-top:2rem; }
#loginModal .modal-body { padding:0; }

#loginModal .modal-content a { color:#0094d7; }
#loginModal .modal-content a:hover { color:#fd7e00; }
#loginModal .modal-content .form-nav .ii { text-align:center; padding:15px 0; font-size:1.3rem; color:#fff; background-color:#0094d7; }
#loginModal .modal-content .form-nav .login .ii, 
#loginModal .modal-content .form-nav .join .ii { cursor:pointer; }
#loginModal .modal-content .form-nav > .forget { display:none; }
#loginModal .modal-content .form-nav .now .ii { background-color:#fff; color:#0094d7; }
#loginModal .modal-content .form-nav .forget.now .ii { color:#fff; background-color:#0094d7; }

#loginModal .modal-content .form-area .ii { padding:30px; }
#loginModal .modal-content .form-area .form-login,
#loginModal .modal-content .form-area .form-join { display:none; }
#loginModal .modal-content .form-area .form-forget { display:none; }
#loginModal .modal-content .form-area > div.now { display:block; }

#loginModal .modal-content .form-login button.send { width:100%; padding:6px; text-align:center; background-color:#d88c02; color:#fff; border:0 none; border-radius:15px; }
#loginModal .modal-content .form-login .lr_link { margin-top:1rem; }

#loginModal .modal-content .form-join .join { margin-top:60px; }
#loginModal .modal-content .form-join .join a { display:block; width:100%; padding:6px; text-align:center; background-color:#d88c02; color:#fff; border:0 none; border-radius:15px; }
#loginModal .modal-content .form-join .back { text-align:right; margin-top:1rem; }

#loginModal .modal-content .form-forget button.send { width:100%; padding:6px; text-align:center; background-color:#d88c02; color:#fff; border:0 none; border-radius:15px; }


@media ( max-width:1199.98px ){ 
    header .topNavbar { display: none; }

    header .top { margin-top:100px; padding-bottom:20px; }
    header .top .topmenu { position: absolute; top:-100px; left:0px; right:0px; background-color:#0094d7; height:100px; }
    header .top .topmenu .logo { top:10px; left:24px; bottom:auto; z-index:5; }

    header .top .navbar { justify-content: flex-end; }
    header .top .navbar button { color:#fff; width:80px; height:80px; margin:10px 0px; outline: none; }
    header .top .navbar button.btnClose { position: absolute; right:0; top:0px; z-index:15; }
    header .top .navbar button .material-icons { font-size:3rem; }
    header .top .navbar a.nav-link { display: inline-block; border-top:none; padding: 12px 18px; }
    header .top .navbar ul.nav { text-align:left; padding:60px 0px; position: absolute; width:295px; right:0; top:0; background-color:#0094d7; color:#fff; display: block; z-index: 10; }
    header .top .navbar ul.nav .line { background-color:#fff; height:2px; overflow:hidden; margin:20px 0px; }
    header .top .navbar li { cursor: pointer; }

    header .top .navbar .submenu { display: none; position: static; width:100%; padding:0px; }
    header .top .navbar .submenu ul { padding:10px 0px; }
    header .top .navbar .submenu li a { border-left:none; display: inline-block; padding:12px 18px; color:#0172a2; }
    header .top .navbar .submenu li i { position: absolute; right:10px; top:10px; }

    header .top .navbar .submenu .submenu { background-color:#f4f4f4; }
    header .top .navbar .submenu .submenu li a { color:#000; }

    header .top .topsearch { right:95px; top:35px; }
    header .top .topsearch form { height:30px; }
    header .top .topsearch form input { width:315px; }

    header .top .toptxt { font-size:2rem; margin-top:0px; position: absolute; left:0; top:50%; transform: translate(0px,-50%); }
    header .top .modtxt { font-size:2rem; margin-top:0px; position: absolute; left:0; top:50%; transform: translate(0px,-50%); margin-left:30px; }

}
@media ( max-width:991.98px ){ 
    footer .email { margin-top:40px; }
}
@media ( max-width:767.98px ){ 
    header .top { margin-top:140px; }
    header .top_h { height:216px; }
    header .top_h2 { height:216px; }
    header .top .topmenu { top:-140px; height:140px; }
    header .top .topsearch { position:static; padding:0px 12px; }
    header .top .topsearch form { width:100%; }
    header .top .topsearch form input { width:calc(100% - 25px); }

    header .top .toptxt { font-size:1.25rem; }

    footer .tit { margin-top:10px; cursor: pointer; }
    footer ul { display: none; }

    .totop { width:40px; height:40px; padding:12px; }
    .totop .material-icons { font-size:1rem; }
}
@media ( max-width:575.98px ){ 
    footer .fbottom .container { display: block; text-align: center; }
    footer .fbottom .copyright { margin-top:10px; }
    
    .m-page { position:relative; width:100%; margin-right:auto; }
}

@media ( min-width:576px ){  }
@media ( min-width:768px ){  }
@media ( min-width:992px ){  }
@media ( min-width:1200px ){ 
    header .top .topmenu { background:url("./images/img_head.png")no-repeat top center; }
    header .top .navbar .nav-item:hover > a.nav-link { color:#fff; border-top:5px solid #fff; }
    header .top .navbar .nav-item:hover > .submenu { display: block; }
    header .top .navbar .submenu li a:hover { background-color:#fff; color:#f0ab00; border-left:6px solid #0094d7; }
    
    header .top_fixed { margin-bottom:25px; } 
    header .top_fixed .top_inner { position:relative; }
    header .top_fixed .top_inner .topmenu { position:absolute; top:0; left:0; width:100%; }
}