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

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td { 
	margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-family: inherit; 
}
img{
	display:inline-block; vertical-align:middle;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
strong { font-weight: bold; }

a { 
    text-decoration: none;
}
body,
html {
    scroll-behavior: smooth;
    height: 100%;
    font-family: 'Glyphicons Halflings', 'Arial', "微軟正黑體";
}

/*--title--*/
h2 { font-weight: bold; text-align: center; padding: 15px;}
.allTitle { display:box; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; justify-content: center; padding: 10px 0;}
.titleLeft, .titleRight { width: 8px;}
.titleLeft { border-top: 2px #000 solid; border-bottom: 2px #000 solid; border-left: 2px #000 solid;}
.titleRight { border-top: 2px #000 solid; border-bottom: 2px #000 solid; border-right: 2px #000 solid;}

/*--Menu--*/
.angButMenu { text-align: center; padding: 35px;}
.overlay { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: rgb(0,0,0); background-color: rgba(0,0,0, 0.9); overflow-x: hidden; transition: 0.5s;}
.overlay-content { position: relative; top: 25%; width: 100%; text-align: center; margin-top: 30px;}
.overlay a { padding: 8px; text-decoration: none; font-size: 28px; color: #818181; display: block; transition: 0.3s;}
.overlay a:hover, .overlay a:focus { color: #f1f1f1;}
.overlay .closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px;}
.angLeftMenu { cursor:pointer; position: fixed; color: #fff; text-align: center; padding: 5px 0; display: none; background: rgba(158, 158, 158, 0.6); width: 60px;}
.angLeftMenu i { font-size: 35px;}
.angLeftMFont { font-size: 12px;}

/*--top--*/
.topImg { /*background-image: url('../images/index_bg2.jpg'); height: 100%;*/ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; display:box; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; justify-content: center; align-items: center;}
.redSquare { position: absolute; width: 600px; background: #000; padding: 50px 20px; text-align: center; color: #fff; opacity: 80%; border-radius: 10px; margin: 20px;}
.redSquare .squareImg { width: 40%;}
.redSquare div h2 { font-size: 2rem;}
.redSquare div h2 p { font-size: 1rem;}
.redSquare a { color: #fff;}
.redSquare a img { color: #fff;}
.languageChoose { margin: auto; margin-bottom: 20px; display: flex; justify-content: center; align-items: center; border: #fff 1px solid; width: 88px; height: 22px;}
.languageChoose .ChooseC, .languageChoose .ChooseE { font-size: 0.9rem; padding: 2px; width: 40px;}
.languageChoose .ChooseC { background: #fff; color: #c30d23;}
.languageChoose .ChooseE { background: #c30d23; color: #fff;}
.languageChoose a:hover .ChooseC, .languageChoose a:hover .ChooseE { background: #f4511e; color: #fff;  height: 18px;}

/*--content-1--*/
/* about button*/
.button { border-radius: 4px; border: 1px #eee solid; background-color: #FFB243; color: #fff; text-align: center; font-size: 1.6rem; padding: 10px; width: 200px; transition: all 0.5s; cursor: pointer; margin: 5px;}
.button span { cursor: pointer; display: inline-block; position: relative; transition: 0.5s;}
.button span:after { content: '\00bb'; position: absolute; opacity: 0; top: 0; right: -10px; transition: 0.5s;}
.button:hover { background-color: #F39800;}
.button:hover span { padding-right: 25px;}
.button:hover span:after { opacity: 1; right: 0;}
.bottomButton { text-align: center;}

/* 翻轉卡片內容 */
.fourFeatures { display:box; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; justify-content: center;}
.featuresMobile { display: none;}
.four-card { background-color: transparent; perspective: 1000px; padding: 10px; width: 350px; height: 370px;}
.four-card-inner { position: relative; transition: transform 0.6s; transform-style: preserve-3d; background-color: #ff8d00; height: 370px;}
.four-card:hover .four-card-inner { transform: rotateY(180deg); background-color: #ff8d00; height: 370px;}
.four-card-front img { width: 100%;}
.four-card-front, .flip-card-back { position: absolute; backface-visibility: hidden;}
.four-card-front {}
.four-card-back { padding: 0 10px; background-color: #ff8d00; color: white; transform: rotateY(180deg); text-align: center; align-items: center; display:box; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; justify-content: center; align-items: center; height: 370px;}

/*--卡片style--*/
.four-card-back h3 span { font-size: 6rem; color: #ffd079;}

.aboutContent div { text-align: center;}
.aboutContent div p { text-align: justify; padding: 15px 0;}
.aboutContent { width: 70%; line-height: 2; margin: auto; padding: 30px 0;}

.circleStyle, .circleStyle_m { text-align: center; margin: auto;}
.circleStyle_m { display: none;}

/*--content-2--*/
.sloganBox { background: #1b1b1b; text-align: center; line-height: 1.8; padding: 15px 80px;}
.sloganBox h3 { color: #fff; text-align: justify;}
.sloganBox h3 span { font-size: 1.4rem; color: #F39800;}
.productBox { padding: 30px 200px;}
.productBox div { padding: 20px;}
.productBox div p { line-height: 2;}
.productBox div p a { color: #000;}
.productBox div p span { color: #c1291e;}

/*--content-3--*/
.modeFour { display:box; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; justify-content: center; text-align: center;}
.modeFour div { border: 2px #777 solid; padding: 20px 10px; margin: 15px 5px;}
.modeFour div:hover { transform: scale(1.02); color: #172A88; font-weight: bold; border: 2px #0087ff solid;}
.modeFour div h4 { font-size: 1em; text-align: center; padding: 10px 0;}
.modeFour div img { width: 100%;}


/*--footer--*/
.footerBox_black { background: #1b1b1b; font-size: 0.8rem; color: #fff; padding: 20px 15px; display:box; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; align-items: center;}
.footerBox_black div { width: 33%;}
.footerBox_black .blackLogo { text-align: center;}
.footerBox_black .blackContent, .footerBox_black .blackContent_A { width: 100%;}
.footerBox_black .blackContent, .footerBox_black .blackContent_A a { color: #fff;}
.footerBox_black .blackContent_A { display:box; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; }
.footerBox_black .blackContent_A img { padding: 0 6px; width: 28px;}
.footerBox_red { background: #172A88; font-size: 0.8rem; color: #fff; text-align: center; padding: 10px 0;}

/*--go to top--*/
.TopBackBu { position: fixed; bottom: 20px; right: 20px; border-radius: 50px; background: rgba(158, 158, 158, 0.48); width: 50px; height: 50px; color: #fff; font-weight: bold; line-height: 50px; text-align: center; font-size: 20px; display: block;}
.TopBackBu a { color: #fff; display: block;}
.TopBackBu:hover { background: rgba(158, 158, 158, 0.7); color: #fff;}



@media (max-width: 1440px) {
    .four-card-inner, .four-card-back, .four-card:hover .four-card-inner { height: 360px;}
}

@media (max-width: 1200px) {
    .four-card, .four-card-inner, .four-card-back, .four-card:hover .four-card-inner { height: 250px;}
}

@media (max-width: 768px) {
    .angLeftMenu { display: block;}
    .productBox { display:block; padding: 40px 0;}
    .productBox .productImg { text-align: center; padding: 0px;}
    .productBox div p { padding: 0 0 0 160px;}
    .modeFour { display:box; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; justify-content: center; text-align: center; flex-wrap: wrap;}
    .four-card, .four-card-inner, .four-card-back, .four-card:hover .four-card-inner { height: 182px;}
    .four-card-back h3 span { font-size: 4rem; color: #ffd079;}
    .four-card-back h3 { font-size: 0.9rem;}
    .redSquare { width: 500px;}
}
@media (max-width: 576px) {
    .topImg { background-image: url('../images/index_bg2.jpg'); height: 100%;}
    .wellVideo {display: none;}
    .redSquare { position: inherit;}
    .redSquare .squareImg { width: 60%;}
    .overlay a { font-size: 20px}
    .overlay .closebtn { font-size: 40px; top: 15px; right: 35px;}
    .productBox div p { padding: 5px;}
    .modeFour div { margin: 15px;}
    .modeFour div img { width: 50%;}
    .allTitle { padding: 20px;}
    .featuresMobile img { width: 100%;}
    .fourFeatures { display: none;}
    .featuresMobile { padding: 20px;}
    .aboutContent { width: 80%;}
    .sloganBox { padding: 15px 40px;}
    .featuresMobile div h3 { display:box; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; justify-content: center; align-items: center; padding: 10px;}
    .featuresMobile div h3 span { color: #ff8d00; font-size: 2rem; border-right: 1px #ff8d00 solid; margin: 0 10px; padding: 0 10px;}
    .modeFour, .footerBox_black, .circleStyle_m, .featuresMobile { display: block;}
    .four-card, .four-card-inner, .four-card-back, .four-card:hover .four-card-inner { width: auto; height: 428px;}
    .footerBox_black div, .footerBox_black .blackLogo { width: 100%; line-height: 1.5; padding: 0 0 5px 0;}
    .footerBox_red { padding: 10px;}
}
@media (max-width: 375px) {
    .redSquare { height: auto;}
    .redSquare h2 { padding: 15px 10px;}
}