/*通用標題文字敘述 斜體*/
.deformed{position: relative;padding-bottom:35%;}
.deformed article{position: absolute;top:calc(50% - 20px);left: 0;z-index: 10}
.deformed article h3{font-size: 18px;color: #fff;letter-spacing:.5em;font-style:italic;margin-bottom: 1em;font-weight: 300}
.deformed article h2{text-transform:uppercase;font-style:italic;color:#fff;margin-bottom: 1em;letter-spacing:.5em;font-size: 25px;font-weight: bold;border-bottom:1px #e1ab72 solid;padding-bottom: .5em}

/*通用白色梯形區塊*/
.deformed aside{max-width:500px;width: 100%;height: 270px;position: absolute;bottom:0;left: 0;background-color:rgba(255,255,255,0.2) ;-webkit-clip-path: polygon(0 0, 75% 0, 100% 100%, 0% 100%);clip-path: polygon(0 0, 75% 0, 100% 100%, 0% 100%);transform:translateX(-5%)}

dl{display: table;width: 100%;}
dt{display: table-cell;vertical-align: middle;font-weight:500}
dd{display: table-cell;vertical-align: middle;font-weight:500}

.maintitle{font-size: 30px;font-weight: bold;color: #3c3737;padding-left: 10px;}

/*分隔線*/
.Separatehr{border-top:3px solid #fff;width: 98%;margin:40px 1%}

/*更改系統字顏色*/
input::-webkit-input-placeholder { /* WebKit browsers */ color: #3c3737;font-size: 15px;font-weight: bold} 
input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */ color: #3c3737;font-size: 15px ;font-weight: bold} 
input::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #3c3737;font-size: 15px;font-weight: bold } 
input:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #3c3737;font-size: 15px;font-weight: bold } 


/*****************************Index*****************************************/

/*選單2*/
.menubox{background-color: #fff;padding: 25px 40px;text-align: center;}
.menubtn{text-align: center;margin:20px auto;width: 100%;max-width: 1200px;}
.menubtn li{margin: 1%}

.menubtn li aside{width:110px;display:table-cell;}
.menubtn li p{display:table-cell;padding:0 10px;color: #3c3737;font-size:17px;font-weight: bold}
.menubtn li a:hover aside{transition: all 0.7s}
.menubtn li a:hover p{color:#6b81a6;transition: all 0.7s;}

.menustyle{top:25%;position:relative;background-color: #fff;}

/*友善連結*/
.Linkmain{background-color: #fff;padding: 50px 40px;text-align: center}
.Linkmain h6{font-size: 15px;color: #3c3737;font-weight: bold;}

.linkbox{text-align: center;margin:20px auto;width: 100%;max-width: 1200px;}
.linkbox li{margin: 1%}
.linkbox li a{line-height:3em;background-color: #e7e7e7;padding: 0 25px;color:#3c3737;font-weight: bold;font-size: 19px }
.linkbox li a:hover{color: #fff;letter-spacing: 1px;background-color: #6b81a6;transition: all 0.7s}

.linkbtn{margin: 20px auto 0;display: block;}
.linkbtn i{font-size: 30px}

.vision .container{max-width: 1600px;}
.txetmain dl{height: 47px;margin: 0}
.txetmain dt{width: 110px;text-align: right;font-size: 17px;color:#4e526c;font-weight: bold;}
.txetmain dt b{font-size: 21px}
.txetmain dd{font-size: 15px;padding-left:15px}
.txetmain dd b{margin: 0 5px;font-size: 20px;font-weight: bold}

/*路況顏色訊息*/
.normal{color:#96d1db}
.slow{color:#a1ce83}
.crowded{color:#eb837e}

/*news*/

.news{background-color: rgba(219,229,234,0.75);padding:70px 0;position: relative;z-index: 10}
.news.mt{margin-top: -183px}

.meunbtn{position: absolute;top:15px;right:0px;}
.meunbtn li{padding: 0 30px;border-left: 1px solid #fff;}
.meunbtn li:first-child{border: none}
.meunbtn li a{font-size: 17px;color: #3c3737;font-weight:500;line-height: 0.7}
.meunbtn li a:hover,.meunbtn li.active a{color:#6b81a6 }

.mainlinkbox{padding: 20px 0}
.mainlinkbox dl{background-color:#fff;margin:0 1% 1%;width: 47.7%;padding:20px 0;display: inline-block}
.mainlinkbox dt{width: 120px;font-size: 12px;color:#3c3737;padding:0 20px}
.mainlinkbox dt span{font-size:30px;font-weight: bold;}
.mainlinkbox dd{font-size: 16px;color:#3c3737;border-left: 1px #cecdcd solid;padding: 0 2em;font-weight: 600;word-break: break-all;height:4.5em}
.mainlinkbox dd p{;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}

.mainlinkbox dl:hover{background-color:#4e526c}
.mainlinkbox dl:hover a dt,.mainlinkbox dl:hover a dt span,.mainlinkbox dl:hover a dd{color: #fff}

.guidebtn{width:200px;border: 2px solid #fff;background-color: #6b81a6;display: block;margin:20px auto;text-align: center;font-size:16px;color: #fff;line-height: 2.7}
.guidebtn:hover{border-color: #fff;background-color:#f3837f;color:#fff;transition: a11 0.7s}
.guidebtn i{font-size: 20px;margin-right:7px;}


/*about*/
.MT200{margin-top: -200px;}
.about{}
.about .bg{max-width:1360px;background: url(../images/kv/aboutbg.png) center top no-repeat;background-size: cover;padding:300px 0 180px;width: 100%;}
.about figure{background: url(../images/kv/[]-3.png) center center no-repeat;background-size: contain;max-width: 950px;height: 211px;width: 100%;margin: auto;padding: 15px;}
.about figure h1{font-size: 45px;color: #4e526c;font-weight: bold;text-align: center;padding: 12px 0 25px;border-radius: 15px;;line-height: 1.4;background-color: rgba(255,255,255,0.6)}


/*service*/
.service{margin-top: -205px;}
.service .bg{max-width:1360px;padding:0 15px;width: 100%;}
.servicemain{margin: auto} 
.servicemain .box01{width: 47%;margin: 1%;height: 290px}
.servicemain .box02{width: 30.6%;margin: 1%}

.subbox{background:left center no-repeat;background-size: contain;text-align: left}
.subbox2{background:right center no-repeat;}
.subbox h1{font-size: 30px;color: #3c3737;font-weight: bold;margin-bottom: 20px}
.subbox p{font-size: 17px;color: #3c3737;font-weight: 500;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height: 1.5}
.bg01{background-image: url(../images/kv/img01.png);padding:15% 5% 15% 40%}
.bg02{background-image: url(../images/kv/img02.png);padding:15% 5% 15% 40%}
.bg03{background-image: url(../images/kv/img03.png);padding:60% 5% 15% 15%}
.bg04{background-image: url(../images/kv/img04.png);padding:60% 5% 15% 15%}
.bg05{background-image: url(../images/kv/img05.png);padding:60% 5% 15% 15%}


.abtn{width:125px;color:#3c3737;font-size:16px;display: block;margin:20px 0;text-align:center;line-height: 2.7;background-color: #fff}
.abtn:hover span{color:#6b81a6;transition: all 0.7s}
.abtn i{color: rgba(0,0,0,0.5);font-size: 20px;margin-right:7px;}
.abtn i.color01{color:#a5ebee}
.abtn i.color02{color:#c5dcb6}
.abtn i.color03{color:#f1dfac}
.abtn i.color04{color:#f2c1a7}
.abtn i.color05{color:#f0a9a6}

/*===========================================  about  ===========================================================*/

.textbox2{padding: 60px 15px;background-color: #fff;margin-bottom: 20px;width: 98%;margin:3% 1%}
.textbox2 h1,.textbox2 p{max-width: 950px;margin:0 auto}
.textbox2 h1{font-size: 30px;color:#3c3737;margin-bottom: 25px;position: relative}
.textbox2 h1 span{position: absolute;right: 0;font-size: 17px;bottom:0 }
.textbox2 h1 span i{font-style: normal;color:#6b81a6;border-bottom: 1px solid;padding-bottom: 2px; }
.textbox2 hr{max-width: 950px;margin:40px auto}
.textbox2 p{font-size: 19px;color:#3c3737}
.textbox2 p>span{border: none} 
.textbox2 p span a{color:#6b81a6;border-bottom: 1px solid;padding-bottom: 2px;}
.textbox2 p span a:hover{color:#6b81a6}
.textbox2 p a{color:#6b81a6;border-bottom: 1px solid;padding-bottom: 2px}
.textbox2 p a:hover{color:#FFAE00}
.textbox2 aside{margin:0 auto;text-align: center}
.boxlink{padding:40px 0 20px;position: relative}
.boxlink a{position: absolute;top:0;left:0;width: 250px;height:55px;background-color:rgba(0,0,0,0.0);display: block}
.boxlink .A01{left: calc(50% - 125px);top: 46px;}
.boxlink .A02{left: calc(50% - 125px);top: 121px;}
.boxlink .A03{left: calc(50% - 125px);top: 198px;}
.boxlink .B00{width:78px;height: 250px;top: 330px;}
.boxlink .B01{left: calc(40% - 94px);}
.boxlink .B02{left: calc(50% - 94px);}
.boxlink .B03{left: calc(60% - 94px);height:310px}
.boxlink .B04{left: calc(70% - 94px);}

.textbox2 h1 b{background: url(../images/about/icon.png) center center no-repeat;width: 40px;height: 40px;background-size: contain;transform:translatey(8px);margin-right: 10px;display: inline-block;}

.textbox2 dl{display: block}
.textbox2 dt {width:400px}
.textbox2 dt aside{background: center center no-repeat;border-radius: 50%;width: 230px;height: 230px;background-size: cover}

.textbox2 .li-style1{margin: 2em 0 2em 2em;}
.textbox2 .li-style1 li:before{content: "-";padding: 0 .5em;margin-left: -1.2em;}

.ulstyle{max-width: 950px;margin:auto !important;width: 100%;padding: 0 15px;}
.ulstyle li{width: 32%;margin: 0.5%}


/*===========================================  news  ===========================================================*/
.newsbg{background-color: rgba(219,229,234,0.75);padding-top: 20px}
.news.bg{background:url(../images/kv/newsbg.png) center top no-repeat;background-size:cover;width: 100%;}
.Collapsemenu{text-align: center} 

.Collapsemenu li{margin: 10px;background:url(../images/kv/[]-4.png) center center no-repeat;background-size: cover;min-width: 227px;
;padding: 10px 17px;}
.Collapsemenu li input[type=text]{background:none;padding: 0.1em 0.5em;display: inline-block;width: 84%;}
.Collapsemenu li a{display: inline-block;width: 20px;}
.Collapsemenu li select{padding: 0.1em 1em;background: url(../images/ico/down.png) no-repeat 95% center;font-weight: bold;color: #3c3737;}
.Collapsemenu li {}

.boxdata dl{width: 97.7%;margin-bottom: 20px}
.boxdata dl:hover{background-color:#4e526c}
.boxdata dd{font-size: 25px;word-break: break-all;}
.boxdata dl:hover dd,.boxdata dl:hover dt,.boxdata dl:hover dd,.boxdata dl:hover a{color:#fff}
.boxdata dd:last-child{border: none;width: 15%;padding: 0 10px;}
.boxdata dd span{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;margin: 2em 0;line-height: 1.8;font-size: 13px;}

.mainbtn{display: block;line-height: 2;color: #3c3737;font-size: 17px;border: 1px solid #cecdcd;padding:0 10px;margin-top:70px;text-align: center}
.mainbtn:hover{color:#fff;background-color:#f3837f;border-color:#4e526c;transition: all 0.7s}

/*===========================================  news_contant  ===========================================================*/
.newsdata{padding: 55px 100px;background-color: #fff;width: 98%;margin: 1%}
.newsdata h6{font-size: 12px;color: #3c3737}
.newsdata h1{font-size: 30px;color: #3c3737;font-weight: bold;line-height: 1.5;}
.newsdata h2{font-size: 23px;color: #6b81a6;font-weight: bold;margin: 20px 0}
.newsdata h3{font-size: 17px;color: #3c3737;margin-bottom: 20px}
.newsdata p{font-size: 15px;word-break: break-all}
.newsdata p a{border-bottom: 1px solid;padding-bottom: 2px}

.newsdata ul{list-style: outside;padding-left: 20px;margin: 20px auto;}
.newsdata li{line-height: 2.5;}
.newsdata li b{font-weight: bold;}
.newsdata ol{list-style: none;}

.newsbtn{margin: 0;max-width: 120px;position: relative;left: calc(100% - 120px);}

/*video*/
.video{margin: 20px auto}
.video>a{padding-bottom: 50%;;display:block;background:no-repeat center center;background-size:cover;position:relative;opacity:1}
.video>a:hover{opacity:1}
.video>a.various:before {background-color: rgba(0,0,0,0.4);width: 100%;height: 100%;}
.video>a:before {content: "";background:url(../images/vedio/icon_play.png) no-repeat center center;width: 60px;height: 60px;position: absolute;z-index: 999;left: 0;}

/*===========================================  Infodisclosure  ===========================================================*/
.boxdata2 dl{padding: 20px 40px 20px 20px}
.boxdata2 dl:hover{}

.boxdata2 dl:hover dt,.boxdata2 dl:hover dt span,.boxdata2 dl:hover dd{color: #fff}
.boxdata2 dl:hover .mainbtn{color:#fff}
.boxdata2 dt{width: 110px}
.boxdata2 span{font-size:20px;}
.boxdata2 dd{font-size: 21px}
.boxdata2 dd:nth-child(2){width: 15%;color: #3c3737;font-size: 15px;padding: 0 20px;}
.boxdata2 dd:nth-child(3){border: none;;width: 44%;padding: 0 5px;}
.boxdata2 dd.linkbox{border: none;width: 15%;padding:0 10px}
.boxdata2 .mainbtn{margin-top: 0}
.boxdata2 .mainbtn:hover{border-color: #fff;background-color: #f4847f}


/*===========================================  load  ===========================================================*/
.menustyle2{position: absolute;right: 0;top: 0;}

.linkbox2 li{background-color: #fff;padding: 25px 35px;margin: 1%;vertical-align: middle}
.externallink{display:inline-block;background: url(../images/ico/icon.png) center center no-repeat;width: 30px;height: 26px;margin-right: 20px;transform:translatey(7px);background-size: contain;}
.linkbox2 li a{font-size: 21px;color: #3c3737;font-weight: bold;}
.linkbox2 li p{position: relative;padding-right: 6px;}
.linkbox2 li p i{position: absolute;right: 0;top:13px;color: #c7d2e3}
.linkbox2 li:hover{background-color: #4e526c;}
.linkbox2 li:hover a{color: #fff}
.linkbox2 li:hover i{color: #f4847f}

/*===========================================  phone  ===========================================================*/

.phonebox li{padding: 15px 35px;margin: 3% 1%;}
.phonebox .fa-phone-alt{background: url(../images/ico/phone_icon.png) center center no-repeat;width: 40px;height: 40px;background-size: contain;transform:translatey(-15px);}
.phonebox li:hover .fa-phone-alt{background-image:url(../images/ico/phone_icon_h.png)}

.ico01{background-image:url(../images/ico/icon01.png) !important}
.ico02{background-image:url(../images/ico/icon02.png) !important}
.ico03{background-image:url(../images/ico/icon03.png) !important}
.ico04{background-image:url(../images/ico/icon04.png) !important}

.linkbox2 span{text-align: center;width: 50%;margin:0 5px;display: inline-block;font-size: 15px;color: #3c3737;font-weight: bold}
.linkbox2 span b{color: #6b81a6;border-bottom: 1px solid;padding-bottom:3px}
.linkbox2 li:hover span{color: #fff}
.linkbox2 li:hover span b{color: #fff;border-bottom: 1px solid #fff;}

.linkbox2 li small {font-size: 90%;width: 11em;display: inline-block}


/*===========================================  service  ===========================================================*/
.news .servicemain li{height:auto;width:48%;margin: 1% 0.9%}
.news .subbox {background-size: cover;}

.bg06{background-image: url(../images/kv/img06.png);padding:10% 9% 10% 30%}
.bg07{background-image: url(../images/kv/img07.png);padding:10% 9% 10% 30%}
.bg08{background-image: url(../images/kv/img08.png);padding:10% 9% 10% 30%}
.bg09{background-image: url(../images/kv/img09.png);padding:10% 9% 10% 30%}
.bg10{background-image: url(../images/kv/img10.png);padding:10% 9% 10% 30%}
.bg11{background-image: url(../images/kv/img11.png);padding:10% 9% 10% 30%}

.abtn i.color06{color:#55d9df}
.abtn i.color07{color:#c5dcb6}
.abtn i.color08{color:#f3c4ab}
.abtn i.color09{color:#f0a9a6}
.abtn i.color10{color:#f4cab4}
.abtn i.color11{color:#b1b8e6}

/*===========================================  qa  ===========================================================*/

.qa dt span{font-family:'Arial';font-size: 60px;color: #4e526c;font-weight: 500}
.qa dl:hover{background-color: #fff}
.qa dl:hover dt,.qa dl:hover dd{color:#4e526c}
.qa dt small{font-size: 24px;margin-left: 2px;color: #4e526c}
.qa .ddmain span{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;margin: 1em 0;
line-height: 1.8;font-size: 13px;width: 82%;padding-left: 160px;}
.qa .ddmain{display: none;padding-left: 154px}
.qa dl.active .ddmain{display:block;width: 100%;}
/*.qa dl.active dd span{display:block}*/
.qa dl dd{position: relative}
.qa dl dd b{background:url(../images/arrow_0.png) center center no-repeat;width: 100%;height: 20px;position: absolute;top:55px;right: 0;display: block}
.qa dl.active dd b{background-image: url(../images/arrow_0h.png)}
.qa dd:nth-child(3){border: none;}


.datafill{max-width:400px;margin: auto}
.datafill li{background:none;margin:1% 0;padding: 0}
.datafill li p{color:#6b81a6;font-weight: bold;font-size: 15px;text-align: left;margin-bottom: 5px;position: relative}
.datafill li p a{display: block;position: absolute;right: 0;top:0;color: #6b81a6;border-bottom: 1px solid;width: 3em}
.datafill li select {padding: 0.25em 1em;background: url(../images/ico/down.png) no-repeat 95% center;}

.datafill li {width: 100%;max-width: 300px}
.datafill li input[type=text] {width: 95%;}
.datafill li div:before {content: "";background:url(../images/kv/]-a.png) no-repeat left center;width:15px;height:57px;display:block;position: absolute;bottom:0;left:-15px}

.datafill li div:after{content: "";background:url(../images/kv/]-c.png) no-repeat right center;width:15px;height:57px;display:block;position: absolute;bottom:0;right:-15px}
.datafill li div{background: url(../images/kv/]-b.png) center center repeat-x;width: 300px;height: 57px;padding: 15px 0;background-size: contain;line-height: 1;position: relative;}
.datafill li .area:before{background:url(../images/kv/]-d.png);height: 167px;width: 15px}
.datafill li .area:after{background:url(../images/kv/]-f.png);height: 167px;width: 23px;}
.datafill li .area{background: url(../images/kv/]-e.png);height: 167px;}
.datafill li .area textarea{background: none;height: 135px;overflow: auto;}

.datafill li .verification{width: 60%;display: inline-block;vertical-align: top;}
.datafill li span{display: inline-block;height: 48px;width: 33%;margin: 1% 0 0 5%;background: center center no-repeat}

.typa .guidebtn{width: 330px}


/* 2020/05/14 */
.mainlinkbox dl{
	padding: 0;
}
.mainlinkbox dl > a{
	display: block;
	padding: 20px 0;
}
.boxdata dl{
	padding: 20px 0;
}