html,
body {
    margin: 0;
    padding: 0;
    color: #BECCC4;
    font-size: 100%;
    background: #000;
	font-family: 'Cuprum','Segoe UI','微軟正黑體',sans-serif;
}
body {
    padding-bottom: 1px;
    background-image: url(../images/bkg_body.png);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
}

html {
  scroll-behavior: smooth;
}

body a {
    text-decoration: none;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
	font-family:  'Cuprum','Segoe UI','微軟正黑體',sans-serif;
}
body img {
    width: 100%;
}
a:hover {
    text-decoration: none;
}
input[type="button"],
input[type="submit"],
input[type="text"],
input[type="email"],
input[type="search"] {
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;    
    font-family: 'Cuprum','Segoe UI','微軟正黑體',sans-serif;
}
ul {
    margin: 0;
    padding: 0;
}
li {
    list-style-type: none;
}
p {
    margin: 0;
    line-height: 1.8em;
    letter-spacing: 1px;
}

/*-- home --*/
#home { 
    width: 100%;
    height: 80vh;
    background-image: url(../images/bkg_homeStrip.jpg);
    background-repeat: repeat-x;
    background-size: contain;
}
.home_wrap {
    max-width: 1076px;
    margin:0 auto;
    width: 100%;
    height: 100%;
    background-image: url(../images/bkg_home.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.home_flexCenter {
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.home_content {
    width: 100%;
    text-align: center;    
}
.home_h1 {
    width: 100%;
    text-align: center;    
    color: #EFE8FF;
    word-wrap: normal;
    word-break: normal;
    letter-spacing: 0.3em;
    background: url(../images/bkg_home-h1.png) repeat-x;
    background-position: center;
    background-size: contain;
    font-size: 4em;
    line-height: 1.5em;
}
.home_span {    
    color: #918AA1;
    font-size: 1.2em;
    letter-spacing: 0.6em;
}
/*-- //home --*/

/*-- section --*/
.section {
    width: 100%;
    max-width: 980px;
    margin: 60px auto;
}
.sec_header {
    text-align: center;
    font-size: 0.9em;
    letter-spacing: 0.8em;
    position: relative;
}
.sec_header::before,
.sec_header::after{
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: url(../images/deco_sectionHeaderLine.png) no-repeat center;
}
.sec_header h5 {
    padding: 0.8em
}
.sec_content {
    width: 100%;
    max-width: 980px;
    border: 1px solid #46A88C;
    margin: 80px auto 100px;
}
.subTitle{
    width: 100%;
    text-align: center;
}
.subT_wrap {
    background-color: #000;
    transform: translateY(-50%);
    display: inline-block;
}
.subT_wrap::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    height: 2em;
    background-image: url(../images/deco_subTitleL.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.subT_wrap::after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    height: 2em;
    background-image: url(../images/deco_subTitleR.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.subT_wrap h4 {
    font-size: 2em;
    display: inline-block;
    vertical-align: middle;
    padding: 0 15px;
}
.subContent {
    padding: 2em 5em 4em;
}
/*-- //section --*/

/*-- prdt1 --*/
.prdt1-1Text {
    width: 100%;
    margin-top: 20px;
    font-size: 2em;
    text-align: center;
    background-color: #133228;
    padding: 2em 0;
}
.prdt1-2Text {
    width: 100%;
    margin-top: 20px;    
    font-size: 1.3em;
    padding: 1em;
}
.iconText::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background: url(../images/icon_shield.png) no-repeat center;
    background-size: contain;
    margin-right: 0.2em;
}
/*-- //prdt1 --*/

/*-- prdt2 --*/
.prdt2Text {
    width: 100%;
    padding: 0.5em 0;
    background-color: #133228;
    margin-left: 0.8em;
    margin-top: 20px;
    font-size: 1.2em;
}
.prdtCap {
    display: inline-block;
    margin-left: -0.8em;  
    margin-right: 1em;  
    padding: 0.3em 0.4em 0.2em;
    width: 8em;
    color: #24171E;
    background-image: linear-gradient(90deg, #4BC59E , #46A88C);
    border-radius: 3px;
}
.prdt2Text span {
    font-size: 1.2em;
}
/*-- //prdt2 --*/

/*-- prdt3 --*/
.prdt3Text {
    font-size: 1.6em;
    line-height: 3em;
}
.prdt3Text span {
    font-size: 1.5em;
    color: #4BC59E;
}
/*-- //prdt3 --*/

/*-- contact --*/
.info {
    margin-top: 2em;
}
.info span{
    color: #4BC59E;
}
.info h1 {
    font-size: 4em;
    line-height: 2em;
    color: #4BC59E;
}
.mailForm input,
textarea {
    width: 100%;
    background-color: #BECCC4;
    padding: 0.8em;
    border: 0;
    color: #000;
}
textarea {
    height: calc(100% - 20px);
}
.inputWrap {
    margin-bottom: 20px;
}
.btnSubmit {
    margin: 0 auto;
    border: 0;
    border-radius: 3px;
    color: #E5FFF0;
    font-size: 1.5em;
    padding: 0.3em 2em;
    background-image: linear-gradient(90deg, #4BC59E , #46A88C);
}
/*-- //contact --*/

/*-- fotter --*/
footer {
    color: #6D728D;
}
footer a {
    color: #6D728D;
}
footer a:hover {
    color: #E5FFF0;
}
/*-- //footer --*/

/*-- responsive sceen --*/
@media (max-width: 980px) {
  .section {
    width: 95%;
  }
}
@media (max-width: 768px) {
    .prdt2Text span {
        display: block;
        margin: 0.5em 1em 0
    }
}
@media (max-width: 767px) {
    .prdt1-1Text {
        margin-bottom: 2em;
    }
    .small-mt {
        margin-top: 1em;
    }
}
@media (max-width: 576px) {
    .home_h1 {
        font-size: 2.5em;
    }
    .subContent {
        padding-left: 2em;
        padding-right: 2em;
    }
    .prdt1-2Text {
        font-size: 2em;
    }
}
@media (max-width: 425px) {
    .info h1 {
        font-size: 3.5em;
    }
}
@media (max-width: 375px) {
    .prdt1-2Text {
        font-size: 1.5em;
    }
    .info h1 {
        font-size: 3em;
    }    
}
@media (max-width: 320px) {
    .home_h1 {
        font-size: 2em;
    }
    .sec_content {
        margin: 30px auto 50px;
    }
    .subT_wrap h4 {
        font-size: 1.5em;
    }
    .subContent {
        padding: 2em 1em 2em;
    }
    .prdt1-1Text {
        margin-bottom: 1em;
        padding: 0.5em 0;
    }
    .prdt1-2Text {
        margin-top: 0;
        padding-bottom: 0;
    }
    .prdt3Text {
        font-size: 1.5em;
    }
    .info h1 {
        font-size: 3em;
    }    
}
/*-- responsive sceen --*/