html,body{
    margin: 0;
    padding: 0;
    font-family: 'Microsoft JhengHei',monospace,'Raleway Light',Arial,sans-serif;
    font-size: 15px;
    background: url('../images/bg2.png');
    font-weight: normal;
    line-height: 1.4em;
}
.paper{padding: 20px 10px;}
.pgTopBg{background: url('../images/pgTopBg1-02.png') top right no-repeat;display: block;width: 100%;height: 100%;
    background-size: 80%;background-attachment: fixed;}
ul li, div, p, button{font-family: 'Microsoft JhengHei','Raleway Light',Arial,sans-serif;}
p{text-align: left;font-size: 1.1em;line-height: 1.5em;}
.containerTop{width: 90%;margin: auto;}
.containerDef{width: 80%;    margin: auto;min-height: 500px;}
h1{margin: 2em 0;text-shadow: 0px 1px 0px rgb(255 255 255);}
h2{margin: 1.2em 0;font-weight: 600;}
h3{margin: 0.5em 0;font-weight: 500;}
a:hover{text-decoration: none;cursor: pointer;}
.img{width: 100%;}
.row{margin: 0;}

.pgFirstPdgTop{padding-top: 5em;}

.mgnTop{margin-top: 2em;}
.mgnTop1{margin-top: 1.2em;}
.pdg1{padding: 1em;}
.pdg2{padding: 2em;}

.flexCenter{display: flex;justify-content: center;align-items: center;text-align: center;}
.flexLeft{display: flex;justify-content: flex-start;align-items: center;}
.flexRight{display: flex;justify-content: flex-end;align-items: center;}
.flexCenterTop{display: flex;justify-content: center;align-items: flex-start;text-align: left;}

.tit2{display: block;margin: center;color: #000;text-align: center;font-weight: 600;font-size: 2.2em;}
.txtBlue{color: #336699;}
.txtWhilteBlue{color: #00A2DD;}

.bannerSlides{position: relative;}
.bannerGrpL{position: absolute;top: 0;left: 0;z-index: 1000;width: 50%;height: 100%;justify-content:center;display: flex;align-items: center;}
.bannerGrpR{position: absolute;top: 0;right: 0;z-index: 1000;width: 45%;height: 100%;justify-content:center;display: flex;align-items: center;}
.bannerGrp1{}
.bannerGrp1 .bannerTit{text-shadow: 0px 1px 0px rgb(255 255 255);color: #000;}
.bannerGrp1 .bannerTxt{font-weight: normal;}
.bannerGrp1 .btnDef{width: 150px;}

#main{position: relative;}

#emailBlock{display: none;}
#lineBlock{display: none;}
#chartBlock{display: none;}
#cooparationBlock{display: none;}
#calendarBlock{display: none;}
.colorWaterBlue{color: #4baca5}
.colorOrgRed{color: #f15a24;}
.colorGray{color: #707070;}

.navTop{position: fixed;top: 0;left: 0;z-index: 1000;width: 100%;padding: 15px;
    /* background: rgba(255, 255, 255,0.6); */
}
.ul{list-style-type: none;display: inline-flex;}
.ul li{list-style-type: none;display: inline-flex;
    padding: 5px 10px;}
.ul li a{font-family: 'Microsoft JhengHei','Raleway Light',Arial,sans-serif;
    color: #333;
    font-size: 1em;
    font-weight: bold;direction: none;text-decoration: none;}
.ul li a:hover{color: #F36A4E;}

.ul li a.pgclick{color: #F36A4E;}

.ulPath{list-style-type: none;display: block;}
.ulPath li{list-style-type: none;display: inline-flex;
    padding: 5px 0 5px 5px;}
.ulPath li a{font-family: 'Microsoft JhengHei','Raleway Light',Arial,sans-serif;
    color: rgb(102, 102, 102);
    font-size: 1em;
    font-weight: bold;direction: none;text-decoration: none;}
.ulPath li::after{content: ' / ';padding-left: 10px;}
.ulPath li:last-child:after{content: ' ';padding-left: 0px;}
.ulPath li a:hover{color: rgb(139, 139, 139);}

.navSubMenu{padding: 1.5em;}
.navSubMenu .img{width: 220px;margin: auto;}

.ulSubMenu{height: unset;margin: 0 10px;}
.ulSubMenu a{border-radius: 30px;margin: 0 5px;width: 170px;text-align: left;font-family:Microsoft JhengHei;
font-size: 1.2em;border: 1px solid #6CBCD4; color: #003366;line-height: 2.4em;display: block;
margin-bottom: 1em;padding-left: 20px;width:100%}
/* .ulSubMenu a:hover{background-image: linear-gradient(to bottom right, #005B97,#1ED3D7 , #00B1BE);color: #fff;
cursor: pointer;} */
.ulSubMenu a.subMenu1 .subMenu1Img{background: url(../images/subMenuCust.png) 100% center no-repeat;padding: 10px 20px;}
.ulSubMenu a.subMenu2 .subMenu2Img{background: url(../images/subMenuCalendar.png) 100% center no-repeat;padding: 10px 20px;}
.ulSubMenu a.subMenu3 .subMenu3Img{background: url(../images/subMenuMail.png) 100% center no-repeat;padding: 10px 20px;}
.ulSubMenu a.subMenu4 .subMenu4Img{background: url(../images/subMenuMessage_.png) 100% center no-repeat;padding: 10px 20px;}
.ulSubMenu a.subMenu5 .subMenu5Img{background: url(../images/subMenuChart.png) 100% center no-repeat;padding: 10px 20px;}
.ulSubMenu a.subMenu6 .subMenu6Img{background: url(../images/subMenuSetting.png) 100% center no-repeat;padding: 10px 20px;}
.ulSubMenu a.subMenu1:hover{background: linear-gradient(to bottom right, #005B97,#1ED3D7 , #00B1BE);color: #fff;cursor: pointer;}
.ulSubMenu a.subMenu2:hover{background: linear-gradient(to bottom right, #005B97,#1ED3D7 , #00B1BE);color: #fff;cursor: pointer;}
.ulSubMenu a.subMenu3:hover{background: linear-gradient(to bottom right, #005B97,#1ED3D7 , #00B1BE);color: #fff;cursor: pointer;}
.ulSubMenu a.subMenu4:hover{background: linear-gradient(to bottom right, #005B97,#1ED3D7 , #00B1BE);color: #fff;cursor: pointer;}
.ulSubMenu a.subMenu5:hover{background: linear-gradient(to bottom right, #005B97,#1ED3D7 , #00B1BE);color: #fff;cursor: pointer;}
.ulSubMenu a.subMenu6:hover{background: linear-gradient(to bottom right, #005B97,#1ED3D7 , #00B1BE);color: #fff;cursor: pointer;}

.ulSubMenu a.subMenu1:hover .subMenu1Img{background: url(../images/subMenuCust_1.png) 100% center no-repeat;padding: 10px 20px;cursor: pointer;}
.ulSubMenu a.subMenu2:hover .subMenu2Img{background: url(../images/subMenuCalendar_1.png) 100% center no-repeat;padding: 10px 20px;cursor: pointer;}
.ulSubMenu a.subMenu3:hover .subMenu3Img{background: url(../images/subMenuMail_1.png) 100% center no-repeat;padding: 10px 20px;cursor: pointer;}
.ulSubMenu a.subMenu4:hover .subMenu4Img{background: url(../images/subMenuMessage_1.png) 100% center no-repeat;padding: 10px 20px;cursor: pointer;}
.ulSubMenu a.subMenu5:hover .subMenu5Img{background: url(../images/subMenuChart_1.png) 100% center no-repeat;padding: 10px 20px;cursor: pointer;}
.ulSubMenu a.subMenu6:hover .subMenu6Img{background: url(../images/subMenuSetting_1.png) 100% center no-repeat;padding: 10px 20px;cursor: pointer;}

.ul2,.ul2 li{list-style-type: none;display: inline-block;}
.ul2 li a{border-radius: 30px;margin: 0 10px;
    display:block;width: 170px;text-align: center;line-height: 2.4em;font-family:'Microsoft JhengHei';
    font-size: 1.2em;position: relative;}
.ul2 li a:hover{text-decoration: none;}

.ul2 .ul2_1, .ul2 .ul2_1 li{list-style-type:disc;display: block;line-height: 2em;font-weight: normal;padding: 0;margin: 0;}
.ul2 .ul2_1 li::before{content: ' - ';}

a.Item1{border: 1px solid #DDC666; color: #DDC666;}
a.Item1:hover{background:#DDC666;color: #fff ;border: 1px solid #DDC666;}
a.Item2{border: 1px solid #9BC671; color: #9BC671;}
a.Item2:hover{background:#9BC671;color: #fff ;border: 1px solid #9BC671;}
a.Item3{border: 1px solid #6EC4C4; color: #6EC4C4;}
a.Item3:hover{background:#6EC4C4;color: #fff ;border: 1px solid #6EC4C4;}
a.Item4{border: 1px solid #837BBA; color: #837BBA;}
a.Item4:hover{background:#837BBA;color: #fff ;border: 1px solid #837BBA;}
a.Item5{border: 1px solid #ba7bb5; color: #ba7bb5;}
a.Item5:hover{background:#ba7bb5;color: #fff ;border: 1px solid #ba7bb5;}
a.Item6{border: 1px solid #da8383; color: #da8383;}
a.Item6:hover{background:#da8383;color: #fff ;border: 1px solid #da8383;}

a.Item1.Item1Click{background:#DDC666;color: #fff ;border: 1px solid #DDC666;}
a.Item2.Item2Click{background:#9BC671;color: #fff ;border: 1px solid #9BC671;}
a.Item3.Item3Click{background:#6EC4C4;color: #fff ;border: 1px solid #6EC4C4;}
a.Item4.Item4Click{background:#837BBA;color: #fff ;border: 1px solid #837BBA;}
a.Item5.Item5Click{background:#ba7bb5;color: #fff ;border: 1px solid #ba7bb5;}
a.Item6.Item6Click{background:#da8383;color: #fff ;border: 1px solid #da8383;}
.icon1Click{position: absolute;    bottom: -15px;    left: 65;display: none;}


a.ItemPinkRed{border: 1px solid #f4927f; color: #f4927f;}
a.ItemPinkRed:hover{background:#f4927f;color: #fff ;border: 1px solid #f4927f;}
a.ItemPinkRed.ItemPinkRedClick{background:#f4927f;color: #fff ;border: 1px solid #f4927f;}
.pinkRedGrp{border: 1px solid #f4927f; color: #000;border-radius: 10px;padding: 20px;}
.pinkRedGrp.pinkRedGrpClick{background:#f4927f; color: #fff;}
.pinkRedGrp.pinkRedGrpClick .hrPinkRed{border: 1px solid #fff;}
.hrPinkRed{border: 0;border: 1px solid #f4927f;}
.priceTxtGrp p{margin: 10px 0;}
.priceTxtGrp a.ItemPinkRed{width:100%;margin: 0;}
.priceTxtGrp h3{font-weight:600;font-size: 1.1em;}
.priceTxtGrp label{margin: 5px 0;padding-left: 5px;}
.priceTxtGrp label.checkProject, .checkProject{background: url('../images/iconCheck.svg') top left no-repeat;
    padding-left: 30px;}

.floatLeft{float: left;}
.floatRight{float: right;}
.clear::after{clear: both;content: '';display: table;width: 100%;}
.SaleGrp{padding: 5px;}
.SaleGrp img{width: 175px;}
.SaleGrp p{text-align: left;}
.defSaleGrp{width: 75%;margin: auto;}


.SaleGrpDesc{}

button.btnDef{
    font-family: 'Microsoft JhengHei',Arial,sans-serif;
    border: 0;border-radius: 20px;
    padding: 0.5em 1em;
    min-width: 120px;
}


button.btnBorder{
    border: 1px solid #597CE7;
    background: transparent;
    color: #597CE7;
}
button.btnBorder:hover{
    color: #FFF;
    background-image: #597CE7;
}

button.btnBgBlue{
    color: #fff;
    background-image: linear-gradient(to bottom, #597CE7, #5BADF7);
}
button.btnOrg{color: #fff;
    background-image: linear-gradient(to bottom, #FF8676, #FF6950);}
button.btnOrg:hover{background: #e74f34;cursor: pointer;border: 1px solid #fff;}

.featureBlock{position: relative;}
.defSaleFeature{padding: 1em;min-height: 500px;}
.bgYellow{background: #DDC666;color: #fff;}
.bgGreen{background: #9BC671;color: #fff;}
.bgBlue{background: #6EC4C4;color: #fff;}
.bgPupor{background: #837BBA;color: #fff;}

.proTxtBlock h2.proTit{margin: 1.5em 0;}
.proTit{text-shadow: 0px 1px 0px rgb(255 255 255);}
.proTxtBlock h3.proSubTit{margin-top: 1em;margin-bottom: 0.5em;font-weight:normal}



.footerGrp{
    /* background: linear-gradient(to bottom, rgba(255, 255, 255,0.5), #fff); */
    min-height: 300px;
    margin-top: 1em;
    display: block;
    width: 100%;
    text-align: left;
}
.footerGrp a{color: #fff;}
.footerGrp a:hover{color: #ffd902;}
.footerMenuGrp{background: #F36A4E;color: #fff;width: 100%;}
.footerItemGrp{margin: 0 2em;text-align: left;}
.copyright{color: rgba(255, 255, 255,0.6);display: block;margin: 2em 0;}

.proSysImg{width: 150px;}

.priceGrp .material-icons{font-size: 20px;}
.priceGrp .priceClick{color: #f15a24;font-weight: normal;}