@charset "utf-8";
/* CSS Document */
@import url("jquery.mmenu.all.css");
@import url("swiper.min.css");
body {font:normal 1rem/1.5 Arial, Helvetica, "微軟正黑體"; color:#333333; background-color:#fafafa; margin:0; padding:0;}
a {text-decoration:none; color: #209cff; transition: color 0.3s, background-color 0.3s;}
a:hover {text-decoration:underline;}
a.current, a.Current, a:hover {color: #209cff;}
div, p, span, ul, ol, li, h1, h2, h3, h4, h5, h6, input, table, td, th, img, .h1 {margin: 0;padding: 0;border: none;}
img {border: none;display:block;}
img.hcenter {border: none; display:block; margin:auto;}
ul, li {list-style: none;}
.fL {float:left;}
.fR {float:right;}
.tL {text-align:left;}
.tR {text-align:right;}
.tC {text-align:center;}
.tC img{ margin:0 auto;}
.tB { font-weight:bold;}
.clr {clear:both;}
.red{ color:#cc0000;}
h1{font-weight: normal;}
h2{font-size:2.250rem; font-weight: normal;}
h3{font-size:1.625rem; font-weight: normal;}
h4{font-size:1.250rem; font-weight: normal;}
h5{font-size:1.250rem;}
h6{font-size:1rem;font-weight: bold;}
p{ line-height:24px;}
a.close{ width: 20px; height:20px; display:inline-block; background:url("../images/close.svg") center no-repeat;}
*, *:before, *:after{ box-sizing: border-box; }
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #d2d2d2;
    opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #d2d2d2;
}
::-ms-input-placeholder { /* Microsoft Edge */
    color: #d2d2d2;
}
input[type="checkbox"]{ display:none;}
input[type="checkbox"]+ label{ height:18px; line-height:18px; display:inline-block; background:url(../images/check_normal.svg) 0 no-repeat; background-size:18px 18px; cursor:pointer; padding: 0px 0px 0px 22px; margin:0 0 5px 0; width:auto;}
input[type="checkbox"]:checked + label{ display:inline-block; background:url(../images/check_checked.svg) 0 center no-repeat; background-size:18px 18px;}
input[type="radio"]{ display:none;}
input[type="radio"]+ label{ height:18px; line-height:18px; display:inline-block; background:url(../images/radio_normal.svg) 0 center no-repeat; background-size:18px 18px; cursor:pointer; padding: 0px 0px 0px 22px; margin:0 0 5px 0; width:auto;}
input[type="radio"]:checked + label{ display:inline-block; background:url(../images/radio_checked.svg) 0 center no-repeat; background-size:18px 18px;}
.pagesize{ position: relative;}
.breakN_bar{position: relative; width:100%; min-height:5px; max-height: 35px; padding: 0 30px 0 10px; display:block;  box-sizing:border-box; font-size:0.875rem; color:#fff; line-height: 2.5; text-align: center; background:-webkit-gradient(linear, left top, right top, color-stop(60%, #209CFF), color-stop(80%, #47D382), color-stop(100%, #FF874D));background:-webkit-linear-gradient(left, #209CFF 60%, #47D382 80%, #FF874D 100%);background:-o-linear-gradient(left, #209CFF 60%, #47D382 80%, #FF874D 100%);background:linear-gradient(90deg, #209CFF 60%, #47D382 80%, #FF874D 100%);}
.breakN_bar marquee{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.breakN_bar a, header .breakN_bar a:hover{ color:#fff;}
.breakN_bar a.close{ position: absolute; top:7px; right: 10px;}
/*header*/
header{ position: relative; height:95px; background: #fff;}
header .in{ position: relative;  width:1142px; height:95px; margin: 0 auto; display: flex; justify-content: space-between;  }
header .h1{position: absolute; top: 25px; padding: 0 9px 0 0;  }
header .h1 a{ width: 141px; height: 46px;display: block; background-size:cover;}
header ul.mix{ position: absolute; top: 15px; right: 0;}
header ul.mix li{ position: relative;display: inline-block; padding: 0 5px;  font-size:0.875rem; vertical-align: middle;}
header ul.mix li a{ color:#666666;}
header ul.mix li.searchArea{ position: absolute; right: 46px; z-index:39; width: 20px;padding: 0 0 0 10px;}
/*search */
.sb-search {
 position: relative; width: 0%; min-width: 30px; height: 36px; float: right;  /*overflow: hidden;*/
-webkit-transition: width 0.3s; -moz-transition: width 0.3s; transition: width 0.3s; -webkit-backface-visibility: hidden;}
.sb-search-input { position: absolute; top: 0; right: 0; width: 100%; height: 36px; margin: 0; z-index: 10; padding: 0px 36px 0px 0px;color: #686868;  background:rgba(0, 0, 0, 0);  box-sizing:border-box;}
.sb-search-input::-webkit-input-placeholder {color: #686868;}
.sb-search-input:-moz-placeholder { color: #686868;}
.sb-search-input::-moz-placeholder { color: #686868;}
.sb-search-input:-ms-input-placeholder { color: #686868;}
.sb-icon-search, .sb-search-submit { width: 24px; height: 20px; display: block; position: absolute; right: 0; top: 10px; padding: 0; margin: 0; line-height: 36px;color: #fff; text-align: center; cursor: pointer; }
.sb-search-submit { background:rgba(0, 0, 0, 0); border: none; outline: none; z-index: -1; }
.sb-search-close{ width: 25px; height: 20px; display: none; position: absolute; right: 55px; top: 8px; padding: 0; margin: 0; line-height: 36px; background:url("../images/close_grey.svg") center no-repeat; text-align: center; cursor: pointer; z-index: 11; }

.sb-icon-search {z-index: 90; background:url(../images/search.svg) center center no-repeat; transition: all 0.3s;}
.sb-opt{position: absolute; top:36px; left:0; right:0px; /*width:calc(100% - 30px);*/ width:100%; line-height: 2.5; padding: 15px; background-color: #fff; border-radius: 8px; box-sizing: border-box; box-shadow: 0px 0px 2rem rgba(0, 0, 0, 0.1);display: none; opacity: 0; transition: opacity 0.1s;}
.sb-opt li{ padding: 0; display: block; overflow: hidden;}
/*search Open state */
.sb-search.sb-search-open, .no-js .sb-search { background-color: #fff;}
.sb-search.sb-search-open .sb-icon-search, .no-js .sb-search .sb-icon-search {  z-index: 11;background:url(../images/search.svg) center center no-repeat; background-color: #fff;}
.sb-search.sb-search-open .sb-search-submit, .no-js .sb-search .sb-search-submit { z-index: 90; }
.sb-search.sb-search-open .sb-search-input{ border: 1px solid #cbcbcb; border-radius: 4px;padding: 0 10px;}
.sb-search.sb-search-open .sb-search-submit{ width:48px; height:36px; line-height: 30px;  background-color:#7e7e7e; color:#fff; top:0; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-top:1px solid #6b6b6b;border-bottom:1px solid #6b6b6b;border-left:1px solid #6b6b6b; }
.sb-search.sb-search-open .sb-icon-search{ left:-30px;}
.sb-search.sb-search-open .sb-opt{display: block; opacity: 1;}
.sb-search.sb-search-open .sb-search-close{display: block;}
.sb-search2 {
 position: relative; width: 60%; margin:0px auto; height: 36px; /*overflow: hidden;*/ background-color: #fff;
-webkit-transition: width 0.3s; -moz-transition: width 0.3s; transition: width 0.3s; -webkit-backface-visibility: hidden;
}
.sb-search2 .sb-search-submit, .no-js .sb-search2 .sb-search-submit { z-index: 90; }
.sb-search2 .sb-search-input{ border: 1px solid #cbcbcb; border-radius: 4px;padding: 0 10px;}
.sb-search2 .sb-search-submit{ width:48px; height:36px; line-height: 30px;  background-color:#7e7e7e; color:#fff; top:0; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-top:1px solid #6b6b6b;border-bottom:1px solid #6b6b6b;border-left:1px solid #6b6b6b; }

header ul.mix li.avatar{ position: relative; padding: 0 0 0 0; margin: 0 0 0 40px;}
header ul.mix li.avatar a.trig{  width:36px; height:36px; display:block;  background:url("../images/profile.svg") left center no-repeat; }

	.icon_menu {}
	.icon_menu { width: 20px;}
	.icon_menu::after, .icon_menu::before, .icon_menu span { background-color: #888888; border-radius: 2px; content: ''; display: block; height: 2px; margin: 5px 0;transition: all .2s ease-in-out;}
	.icon_menu::before { transform: translateY(0) rotate(0);}
	.icon_menu::after { transform: translateY(0) rotate(0);}
	.mm-wrapper_opening .icon_menu::before { transform: translateY(8px) rotate(135deg);}
	.mm-wrapper_opening .icon_menu::after { transform: translateY(-6px) rotate(-135deg);}
	.mm-wrapper_opening .icon_menu span { transform: scale(0);}
/*avBox*/
.avBox { z-index: 33; position: absolute; top: 36px; right:-14px;  padding: 16px 0 0; display: none; }
header ul li.avatar:hover >.avBox {display: block; }
.avBox .ar{position: absolute; top: -1px; right:20px; width: 27px;height: 18px; display: block;background:url("../images/ar.png")  no-repeat;}

header ul.mix .avBox ul{background-color: #f8f8f8; width:324px; padding:20px 10px 10px 20px; font-size:0.875rem; border-radius: 24px;box-shadow: 0px 0px 2rem rgba(0, 0, 0, 0.1); }
header ul.mix .avBox ul li{ position: relative; padding: 0 0 20px 0;  margin: 0 10px 10px 0;}
header ul.mix .avBox ul li:nth-child(1)::after{ display:none;}
header ul.mix .avBox ul li a{ position: absolute; top: 0; left: 0; width: 58px; height: 100%; padding: 64px 0 0 ; text-align: center;box-sizing: border-box; display: block;}
header ul.mix .avBox ul li a:hover{color:#1f9afb;}
header ul.mix .avBox ul li .ico{ width: 60px; height: 60px; display: block; border-radius: 6px; border:1px solid #e0e0e0; transition:all 0.3s; }
header ul.mix .avBox ul li:hover > .ico{ width: 60px; height: 60px; display: block; border-radius: 6px; border:1px solid #1f9afb; }
header ul.mix .avBox ul li .search{background:url("../images/tool_search.svg")  no-repeat;}
header ul.mix .avBox ul li .bill{background:url("../images/tool_bill.svg")  no-repeat;}
header ul.mix .avBox ul li .pay{background:url("../images/tool_pay.svg")  no-repeat;}
header ul.mix .avBox ul li .contract{background:url("../images/tool_contract.svg")  no-repeat;}
header ul.mix .avBox ul li .calc{background:url("../images/tool_calc.svg")  no-repeat;}
header ul.mix .avBox ul li .collect{background:url("../images/tool_collect.svg")  no-repeat;}
header ul.mix .avBox ul li .logOut{background:url("../images/tool_logOut.svg")  no-repeat;}
header ul.mix .avBox ul li .logIn{background:url("../images/tool_logIn.svg")  no-repeat;}
header ul.mix .avBox ul li:hover > .search{background:url("../images/tool_search_on.svg")  no-repeat;}
header ul.mix .avBox ul li:hover > .bill{background:url("../images/tool_bill_on.svg")  no-repeat;}
header ul.mix .avBox ul li:hover > .pay{background:url("../images/tool_pay_on.svg")  no-repeat;}
header ul.mix .avBox ul li:hover > .contract{background:url("../images/tool_contract_on.svg")  no-repeat;}
header ul.mix .avBox ul li:hover > .calc{background:url("../images/tool_calc_on.svg")  no-repeat;}
header ul.mix .avBox ul li:hover > .collect{background:url("../images/tool_collect_on.svg")  no-repeat;}
header ul.mix .avBox ul li:hover > .logOut{background:url("../images/tool_logOut_on.svg")  no-repeat;}
header ul.mix .avBox ul li:hover > .logIn{background:url("../images/tool_logIn_on.svg")  no-repeat;}

/*nav*/
nav{ font-size: 1rem; }
.first{ position: relative; width: 1142px; margin: 0 auto; box-sizing: border-box;}
.first ul{ position: absolute; top:-44px;  right: 0; width: calc(100% - 150px); display: flex; justify-content: flex-end; box-sizing: border-box; }
.first ul li{ position: relative; display:inline-block; margin: 0;}
.first ul li a{display:block;padding:10px 0 10px 30px;}
.second{ width:100%; background-color: #f1f1f1;z-index: 99;}
.second ul{  width:1142px; margin: 0 auto; box-sizing: border-box; display: flex; justify-content: flex-end; }
.second ul li{position: relative; margin: 0;}
.second ul li a{display:block;padding:10px 0 10px 30px;}
.second ul li a.current::after { z-index: 1; position: absolute;	bottom: 0;	right:50%; margin: 0 -10px; width: 0;	height: 0;	border: solid transparent;	border-width: 10px;	border-bottom-color: #fff;	content: '';	pointer-events: none;}
.third{ position: absolute; top:44px; left: 0;  width:100%;  display: block; font-size:0.875em; line-height: 1; background-color:rgba(255,255,255,0);z-index: 99; }
.third .coverbox{max-width:1142px; position:relative; margin:0px auto;}
.third .coverbox .box{position:absolute; right:0px; width:768px; overflow: hidden; border-bottom-left-radius: 15px;border-bottom-right-radius: 15px;box-shadow: 0 0 2rem rgba(0,0,0,0.2); border-top-style:none; border-bottom-style:solid; border-left-style:solid; border-right-style:solid; border-color:#C1C1C1; border-width:1px;}
.third .coverbox .unbox{position:absolute; right:0px; width:768px; overflow: hidden; border-bottom-left-radius: 15px;border-bottom-right-radius: 15px;box-shadow: 0 0 2rem rgba(0,0,0,0.2); border-top-style:none; border-bottom-style:solid; border-left-style:solid; border-right-style:solid; border-color:#C1C1C1; border-width:1px;}
.third .coverbox .unbox .ad{display: none;}
.third ul{  width:100%; margin: 0 auto; box-sizing: border-box; background-color: #fff; display: flex; justify-content: flex-end; flex-wrap: wrap;}
.third ul li{position: relative; margin-left: 5px;}
.third ul li a{display:block;padding:15px 10px; color: #888888; font-size:1rem;}
.third ul li a.current{color: #209cff;}
.third ul li a:hover{color: #209cff; text-decoration: underline;}
.third .ad{ width:100%; height: auto;display: block;}
.third .ad img{ width:100%; height: auto;}
/* Header styles and animations */
.ha-header {position:absolute; left:0; width:100%; box-shadow: 2px 2px 5px rgba(0,0,0,0.1); z-index: 1;}
.ha-waypoint{ width:100%; height:1px; display:block;background-color: #f8f8f8; }
.ha-header-normal {position:absolute;  left:0; width:100%;  }
.ha-header-scroll {position:fixed; top:0; right:0; width:100%; z-index: 11; }
.ha-header-scroll .first{ width: 100%; height: 44px; background-color: #f8f8f8;}
.ha-header-scroll .first ul{ position: static; width:1142px; margin: 0 auto; padding: 0 15px;}
.ha-header-scroll .second ul{ padding: 0 15px;}
.ha-header-scroll .third{ top:88px;}




/*main*/
.main{ padding:0; background-color: #fafafa;}
/*footer*/
footer{ background-color:#eaeaea; border-top: 1px solid rgba(0,0,0,.1); }
footer a{ font-size: 0.875rem; color: rgba(0,0,0,0.5);}
footer a:hover{ color:rgba(0,0,0,.5); text-decoration: underline;}
footer .in{ width:1142px;  margin: 0 auto; padding: 20px 20px 50px 20px;}
footer .in .route{ padding:0 0 10px 0; margin: 0 auto; border-bottom: 1px solid #d2d2d2; display: flex; flex-wrap: wrap;}
footer .in .route li{ position: relative;  line-height: 21px; margin-right: 10px; }
footer .in .route li a{ padding: 2px 25px 2px 0;display:block; transition: all 0.3s ease;}
footer .in .route li a:hover{ color:#209cff; text-decoration: none; }
footer .in .route li:first-child a{ padding: 2px 25px 2px 40px; background:url("../images/logo-ft.svg") left center no-repeat; background-size:auto 20px;}
footer .in .route li::after{ position: absolute; top: 2px; right: 0; width: 20px; height: 20px; vertical-align: middle; display: inline-block;content: '';background:url("../images/arrow-right.svg") no-repeat; opacity:.3; background-size:cover; }
footer .in .route li:last-child::after{  display:none; }
.serviceBox{ width:100%;display:inline-flex;justify-content: space-around; margin: 0 0 30px;}
.serviceBox li{ width:calc(100%/5); display: block;padding:20px 0 0 ; vertical-align: top; box-sizing: border-box;}
.serviceBox li h3{font-size:.875rem; font-weight:bold; line-height: 2; margin-bottom:.8rem;}
.serviceBox li ul.service{}
.serviceBox li ul.service li{ width: 100%;padding: 0; }
.mAuto{ display: block;}
.underLink{ float:left; }
.underLink li{ display: inline-block; vertical-align: middle; }
.underLink li a{ color:rgba(0,0,0,.5); font-size: .875rem; border-right:1px solid rgba(0,0,0,.1); padding-right: 1rem; margin-right: 1rem;}
.underLink li:last-child a{ border-right: 0; }
.underLink li a:hover{ text-decoration: underline; }
footer .license{ float:right; font-size: .75rem; color:rgba(0,0,0,.5); }
.comunity{ }
.comunity li{ padding:0 0 0 0; }
.comunity img{ width: auto; height: 20px; }
.officialLink{ margin-top:40px; display: flex; }
.officialLink li{ margin-right:20px; }
.officialLink li a{ display: block; width: 100px;}
.officialLink li a img{ width:auto; height: 30px; margin: 0 auto;}

/*pop*/
.popOverlay{ position: fixed; top:0; left:0; width:100%; height:100%; display:block;background-color:rgba(0,0,0,0.6); z-index:111; }
.pop{ position:absolute; top:50px; left:50%; width:540px; padding:30px 20px 50px; margin:0 -270px; background-color:#fff; transition:all 0.3s; z-index:112; border-radius: 30px; box-sizing: border-box;}
.pop a.close{position:absolute; top:20px; right:20px; width:20px; height:20px; display:block; background: url(../images/close_pop.svg) no-repeat; background-size:20px 20px;}
.pop h2{font-size:1.250rem; text-align:center; margin:10px 0 20px; color: #209cff;}
.pop h2.bk{ font-weight: bold; border-bottom:4px solid #fafafa;  text-align:center;  color:#333333; padding: 0 0 10px;}
.pop p{ color:#666666; line-height: 2; margin: 0 0 30px;}
.pop .squareInfo{ display: flex; justify-content:space-between; margin: 0 0 20px;}
.pop .squareInfo img{ width:140px; height:140px; margin:0 10px 0 0; border: 1px solid #dddddd;}
.pop  ul.dot li{ list-style:disc ; margin: 0 0 20px 40px; color:#888888; text-align: left;}
.pop.media{width:960px;margin:0 -480px; padding:30px 40px 50px; }
.pop.media h4{font-size:1.875rem; text-align:left; margin:10px 0 0; color: #209cff;}
.pop.media .upDateL{ margin:0 0 20px;}
.pop.media .vedio{ position: relative; width:100%; height: auto; display: block; margin: 0 auto 20px; overflow: hidden;}
.pop.media .vedio img{ width: 100%; height: auto;}

@media screen and (max-width: 1142px){
	header .in{width:100%; padding: 0 15px; box-sizing: border-box;}
	header ul.mix{right: 15px;}
	header ul li.searchArea{  right: 61px;}
	/*search Open state */
	.sb-search.sb-search-open, .no-js .sb-search { width:490px;}
	/*nav*/
	nav{ font-size: 1rem; }
	.first{ width: 100%; }
	.first ul{ width: calc(100% - 160px); padding: 0 15px; }	
	.first ul li{ margin: 0;}
	.second ul{ width: 100%;padding: 0 15px; }
	.second ul li{ margin: 0;}
	.third .box{width: 100%; }
    .third .unbox{width: 100%; }
	.third .ad{ width:100%; height: auto;}
	.ha-header-scroll .first ul{  width:100%;}
	/*footer*/
	footer{ padding: 0 0 30px;}
	footer .in{ width:100%; padding: 1rem 1rem 0 1rem; box-sizing: border-box;}
	/*pop*/
	.pop.media{width:718px;margin:0 -354px; padding:30px 40px 50px; }
	.pop.media .vedio{width:540px;height: 304px;}
}

@media screen and (max-width: 767px){
	header{ position: relative; height:auto;}
	header .in{ position: relative; top: 0; width:100%;  height:60px; margin: 0; padding:0; box-sizing: border-box;background-color: #fff;}
	header .h1{ z-index:2;position: absolute; top:10px; left:50%; width:36px; height:36px; margin: 0 -18px;}
	header .h1 a{ width: 36px; height: 36px; display: block; }
	header ul.mix{  position: absolute; top:10px; right:15px; padding:0; width:calc(100% - 30px); display: block;}
	header ul.mix li{ display:none;}
	header ul.mix li.searchArea{ position: static; display: block; right: 0; top: 0; width:100%; height:auto; padding: 0; background-color: #fafafa;}
	.sb-search{ background-color: #fff;}
	.sb-search.sb-search-open .sb-search-input{ width: 100%;  padding: 0 10px 0 30px;}
	.sb-search.sb-search-open .sb-icon-search{ left:5px;}
	.ha-header{ display: none;}
	/*search Open state */
	.sb-search.sb-search-open, .no-js .sb-search {  width:100%;}
	.sb-search-open{z-index: 199;}
	
	/*mmenu*/
	#menu{  padding:0; position: fixed; top: 0; left: 0; right: 0; width:100%;}
	.menu{ display: block;}
	.menu a{ display: block;}
	.mm-navbar{ display: none;}
	.mm-panel::after, .mm-panel::before{display: none;}
	.se .mm-listitem::after{border-bottom-width:0;}
	.mm-listitem_selected{ background-color: #209cff; color:#fff;}
	.se{ background-color: #fafafa;}
	.se a{padding:10px 10px 10px 38px;}
	.th{ background-color: #f5f5f5;font-size:0.875rem;}
	.th a{padding:10px 10px 10px 72px; background:url("../images/li_ar.svg")  55px  16px no-repeat;background-size:16px 16px;}
	.th .mm-listitem_selected{background:#209cff url("../images/li_ar_wh.svg")  55px  16px no-repeat;background-size:16px 16px;}
	.mm-listitem.sectionlink a, .mm-listitem.av a{padding:12px 10px 12px 50px; height: 48px;box-sizing:border-box;}
	.sectionlink a{width: 100%; height:24px; display:block;  background:url("../images/sectionlink.svg") 20px center no-repeat; background-size:24px 24px;}
	.sectionlink.mm-listitem_selected{background:#209cff url("../images/sectionlink_wh.svg") 20px center no-repeat; background-size:24px 24px;}
	.av a{width: 100%; height:24px; display:block;  background:url("../images/profile.svg") 20px center no-repeat; background-size:24px 24px;}
	.av .se a{padding:10px 10px 10px 80px;}
	.av .user a{background:url("../images/li_ar.svg") 30px center no-repeat; background-size:50px 30px; }	
	.av .user.mm-listitem_selected a{background:url("../images/li_ar_wh.svg") 30px center no-repeat; background-size:50px 30px; }
	.ad, .ad a{ padding: 0;width: 100%; height: 100%; display: block;}
	.ad, .ad img{width: 100%; height: 100%; display: block;}
	.main{ width: 100%; overflow: hidden;padding:0;}
	
	/*footer*/
	.serviceBox{ width:100%; display:block; margin:10px 0 30px 0;}
	.serviceBox li{ width:100%; display: block; vertical-align: top; box-sizing: border-box; padding: 0; margin-bottom: .5rem;}
	.serviceBox li h3{ position: relative;cursor: pointer; font-size:.7rem; line-height:2; border-bottom: 1px solid rgba(0,0,0,0.1); margin-bottom: 0; padding:.5rem 0;}
	.serviceBox li h3::after{ position: absolute; content: ""; width:24px; height: 25px; display: block; top: .5rem; right: 0; background:url("../images/arrow-right.svg") right no-repeat; transform: rotate(90deg); -ms-transform: rotate(90deg);/* IE 9 */ -webkit-transform: rotate(90deg);	/* Safari and Chrome */ -o-transform: rotate(90deg); /* Opera */ -moz-transform: rotate(90deg);	/* Firefox */}
	.serviceBox li h3.close::after{background:url("../images/arrow-right.svg")  right no-repeat; transform:rotate(-90deg); -webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);}
	.serviceBox li ul.service{ display: none; padding: 10px 0;}
	.serviceBox li ul.service li{ width: 100%; }
	.serviceBox li ul.service li a{ display: block;}
	.mAuto{ display: inline;}
	.underLink{ float:none; margin: 0 0 10px 0;}
	.underLink li{ text-align: center; line-height: 1; display: inline-block; vertical-align: middle; }
	.underLink li:nth-child(1){}
	.underLink li:nth-child(1)::after{  display: none;}
	.underLink li:nth-child(2)::after{ display: none;}
	.underLink li a{ font-size: .7rem; }
	.underLink li img{ width:auto; height:40px; margin: 5px auto;}
	footer .license{ float: none; }
	.comunity{ float:none;}
	.comunity li{display:inline-block; margin-bottom: 0;}
	.comunity img{ width: auto; height: 20px; }
	footer .in .route{ padding: 0 0 5px 0; }
	footer a{ font-size: .7rem; }
	footer .in .route li:first-child a{ background-size: auto 15px; }
    .officialLink{ display: block; }
	.officialLink li{ display: inline-block; margin-right: 0;}
	
	/*pop*/
	.pop .squareInfo{ display: block; margin: 0 0 20px;}
	.pop .squareInfo img{ margin:0 auto 10px; }
	.pop, .pop.media{ position:absolute; top:10px; left:50%; width:300px; padding:30px 20px ; margin:0 -150px; /*overflow-y: scroll; */background-color:#fff; transition:none;}
	.pop.media .vedio, .pop.media .vedio img{width:100%;height: auto;}
	.pop.media .vedio{ padding: 35px 0 0;}
	.pop.media h4{font-size:1.875rem; line-height: 1.2;}
}

@media screen and (min-width:768px) {
	#menu{display: none;}
}

.neko-spacer {
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
}

.iconic {
	width: 24px;
	height: 24px;
	vertical-align: middle;
	-webkit-transform: translateY(-5%);
	-ms-transform: translateY(-5%);
	transform: translateY(-5%);
}

.breakN_bar {
	z-index: 99;
}

input {
	outline: none;
}

a {
	cursor: pointer;
}

header {
	position: relative;
}

section#header {
	background: white;
	padding: 0;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

section#header header.scrolling-down {
	margin-top: -100px;
}

section#header:before {
	content: '';
	width: 100%;
	height: 5px;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
	background: -webkit-gradient(linear, left top, right top, color-stop(60%, #209CFF), color-stop(80%, #47D382), color-stop(100%, #FF874D));
	background: -webkit-linear-gradient(left, #209CFF 60%, #47D382 80%, #FF874D 100%);
	background: -o-linear-gradient(left, #209CFF 60%, #47D382 80%, #FF874D 100%);
	background: linear-gradient(90deg, #209CFF 60%, #47D382 80%, #FF874D 100%);
}

.is-regular {
	font-weight: 400 !important;
}

header nav a {
	color: #333;
}

header nav a:hover {
	color: #209cff;
	text-decoration: none;
}

header nav .logo-section {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	padding-left: 1rem;
	margin: 0;
}

header nav .logo-section a.logo {
	display: block;
	background: url(https://web-eshop.cdn.hinet.net/eshop/img/logo/logo.svg) left center no-repeat;
	width: 141px;
	height: 46px;
	background-size: cover;
}

header nav .menu-section {
	-webkit-transition: all .36s ease-in-out;
	-o-transition: all .36s ease-in-out;
	transition: all .36s ease-in-out;
	height: 74px;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	padding-left: .5rem;
	margin-top: 3px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

header nav .drop-down-menu {
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-flow: 1;
	flex-flow: 1;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	margin: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

header nav .drop-down-menu .menu-list-mobile:first-child {
	margin-left: 1rem;
}

header nav .drop-down-menu li {
	margin-left: 0;
	list-style: none;
	/* position: relative; */
}

header nav .drop-down-menu li a {
	padding: 0.6rem 1rem;
	white-space: nowrap;
}

header nav .drop-down-menu li .sub-menu {
	border: none;
	position: absolute;
	top: 4.85rem;
	left: 10.6rem;
	padding: .4rem .8rem;
	width: 160px;
	border-radius: .8rem;
	background: white;
	-webkit-box-shadow: 0px 0px 2rem rgba(0, 0, 0, 0.1);
	box-shadow: 0px 0px 2rem rgba(0, 0, 0, 0.1);
	-webkit-transition: all .2s;
	-o-transition: all .2s;
	transition: all .2s;
	z-index: -2;
	display: none;
	height: 0;
	opacity: 0;
	-webkit-transform: scale(0.95);
	-ms-transform: scale(0.95);
	transform: scale(0.95);
	overflow: hidden;
	width: 70%;
	max-width: 836px;
	padding: 20px 26px;
}

header nav .drop-down-menu li:hover a.menu-list-title {
	color: #209cff;
}

header nav .drop-down-menu li:hover .sub-menu {
	display: block;
	height: auto;
	opacity: 1;
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	overflow: visible;
	z-index: 2000;
}

header nav .drop-down-menu li .sub-menu li {
	padding: 0;
	border: none;
}

/* 180822改版 - 往下滾動時submenu不顯示 */

header.scrolling-down nav .drop-down-menu li:hover .sub-menu {
	display: none;
}

header nav .extra-section {
	margin-top: 7px;
	padding-right: .5rem;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	text-align: right;
	box-sizing: inherit;
}

header nav .extra-section .search {
	position: relative;
}

header nav .extra-section .profile {
	padding: 0 .5rem 1.5rem .5rem;
	margin-top: 1.5rem;
	position: relative;
}

header nav .extra-section .profile .sub-menu {
	text-align: left;
	position: absolute;
	top: 2.5rem;
	right: 0rem;
	padding: .4rem .8rem;
	background: white;
	width: 160px;
	border-radius: .4rem;
	background: white;
	-webkit-box-shadow: 0px 0px 2rem rgba(0, 0, 0, 0.1);
	box-shadow: 0px 0px 2rem rgba(0, 0, 0, 0.1);
	-webkit-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
	z-index: 4;
	display: none;
}

header nav .extra-section .profile .sub-menu a {
	display: block;
	padding: .5em 0;
	line-height: 1.5;
}

header nav .extra-section .profile:hover .sub-menu {
	display: block;
	z-index: 5;
}

header nav .extra-section .profile-button,
header nav .extra-section .search-button {
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 44px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	height: 44px;
	color: #333;
}

header nav .extra-section .profile-button img {
	width: 32px;
	height: 32px;
}

header nav .extra-section .search .search-field {
	display: none;
	position: relative;
}

header nav .extra-section .search .search-field.active {
	display: inline;
}

header nav .extra-section .search .search-field input {
	padding: 6px 187px 6px 8px;
	height: 36px;
	font-size: 14px;
	background: white;
	border: 1px solid #d6d6d6;
	border-radius: 4px;
	max-width: 0;
	-webkit-transition: initial;
	-o-transition: initial;
	transition: initial;
}

header nav .extra-section .search-button {
	position: absolute;
	z-index: 1;
	left: 4px;
	display: block;
	text-align: left;
	top: 6px;
	height: auto;
	width: 100%;
	cursor: text;
}

header nav.show-mobile-search .extra-section .search-button {
	left: 6px;
	top: 11px;
	width: auto;
}

header nav .extra-section .search-button span {
	position: absolute;
	top: 1px;
	left: 26px;
	font-size: 15px;
	color: #aaa;
	right: 4px;
	white-space: nowrap;
}

header nav.show-mobile-search .extra-section .search .search-button span {
	display: none;
}

header nav .extra-section .search .search-go {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	padding: 0 12px;
	line-height: 36px;
	font-size: 12px;
	color: white;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 0 6px 6px 0;
	cursor: pointer;
	z-index: 1;
	display: none !important;
}

header nav .extra-section .search .active .search-go {
	right: 0;
	top: 0;
	bottom: 0;
	display: block !important;
}

header nav .extra-section .search .search-field .close-button {
	display: none;
}

header nav .extra-section .search .search-field.active input {
	max-width: 100%;
	padding: 6px 52px 6px 35px;
}

header nav .extra-section .search .search-field .close-button {
	display: none;
}

header nav.show-mobile-search .extra-section {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
}

header nav.show-mobile-search .extra-section .search {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

header nav.show-mobile-search .extra-section .search input {
	width: 100%;
}

header nav.show-mobile-search .extra-section .search .search-field input {
	transition: all .2s;
	-webkit-transition: all .2s;
	-o-transition: all .2s;
}

header nav.show-mobile-search .extra-section .search .search-field.active {
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
	height: auto;
	overflow: visible;
	width: 100%;
	opacity: 1;
}

header nav.show-mobile-search .menu-section {
	display: none;
}

header .close-button-desktop-only {
	display: none;
}

header nav.show-mobile-search .neko-spacer.desktop-only {
	width: 40px;
	-webkit-box-flex: 0;
	-ms-flex-positive: 0;
	flex-grow: 0;
}

header nav.show-mobile-search .close-button-desktop-only {
	display: block;
	width: 44px;
	height: 44px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin-left: 20px;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0.5;
}

header nav .extra-section .search ul.recommend-results {
	position: absolute;
	text-align: left;
	left: -.8rem;
	padding: 10px 20px;
	border-radius: .2rem;
	position: absolute;
	top: 36px;
	left: 0;
	right: 0;
	width: 100%;
	height: auto;
	margin: 0;
	background: white;
	z-index: 1;
	-webkit-box-shadow: 0px 15px 1.5rem rgba(0, 0, 0, 0.1);
	box-shadow: 0px 15px 1.5rem rgba(0, 0, 0, 0.1);
	-webkit-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
	opacity: 0;
	background: white;
	visibility: hidden;
}

header nav .extra-section .search .search-field {
	display: block;
}

header nav .extra-section .search .search-field.active .recommend-results {
	display: block;
	opacity: 1;
	visibility: visible;
	z-index: 3;
}

header nav .extra-section .search ul.recommend-results li {
	line-height: 1.2;
	padding: .5rem 0;
	margin: 0;
	list-style: none;
}

header nav .extra-section .search ul.recommend-results li.search-seperator {
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	padding: 10px 0;
}

header nav .extra-section .search ul.recommend-results li.search-seperator small {
	padding-top: 0.5rem;
	color: rgba(0, 0, 0, 0.5);
}

.header-spacer {
	display: block !important;
	height: 102px;
}

.sub-menu .sub-menu-item {
	margin-top: 5px;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}

.sub-menu>li>label {
	padding-right: 10px;
	line-height: 42px;
	color: #000;
	font-weight: bold;
	width: 122px;
	float: left;
}

.sub-menu .sub-menu-item {
	position: relative;
	line-height: 42px;
	padding-left: 10px;
	margin: 5px 0;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	vertical-align: middle;
}

.sub-menu .sub-menu-item:before {
	position: absolute;
	content: '';
	width: 3px;
	height: calc(100% - 1.2rem);
	left: 0;
	top: 0.6rem;
	bottom: 0;
	vertical-align: middle;
	background: #209cff;
	display: inline-block;
}

.sub-menu .sub-menu-item li a {
	padding: 0 0.4rem !important;
	/*color: #333;*/
	/*add*/
}

.sub-menu .sub-menu-item li a:hover {
	color: #209cff;
}

.sub-menu>li .item-outline {
	width: 60px;
	height: 60px;
	display: block;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	margin-bottom: 4px;
	border-radius: 6px;
	border: 1px solid #e0e0e0;
	transition: all 0.3s;
}

.sub-menu>li a:hover>.item-outline {
	border-color: #1f9afb;
}

.corporate-switcher {
	position: absolute !important;
	font-size: 0.9rem;
	right: 0.7rem;
	top: 0.8rem;
}

.corporate-switcher ul>li {
	display: inline-block;
	vertical-align: middle;
}

.corporate-switcher ul>li>a {
	padding: 0.4rem 0.6rem;
}

.corporate-current a {
	font-weight: bold;
	color: #000;
}

header nav .extra-section .profile .sub-menu {
	background-color: #fff;
	width: 324px;
	padding: 20px 10px 10px 20px;
	font-size: 0.875rem;
	border-radius: 0.4rem;
	box-shadow: 0px 0px 2rem rgba(0, 0, 0, 0.1);
}

header nav .extra-section .profile .sub-menu li {
	position: relative;
	padding: 0;
	margin: 0 10px 10px 0;
	display: inline-block;
	vertical-align: middle;
}

header nav .extra-section .profile .sub-menu li .ico {
	width: 60px;
	height: 60px;
	display: block;
	border-radius: 6px;
	border: 1px solid #e0e0e0;
	transition: all 0.3s;
}

header nav .extra-section .profile .sub-menu li a {
	position: relative;
	background-repeat: no-repeat !important;
	/*top: 0;
    left: 0;
    width: 58px;
    height: 100%;*/
	padding: 0;
	text-align: center;
	box-sizing: border-box;
	display: block;
}

.mobile-only {
	display: none;
}

.desktop-only {
	display: block !important;
}

.officialLink {
	margin-top: 0;
	display: inline-block;
	vertical-align: top;
}

.officialLink li {
	margin-right: 20px;
	display: inline-block;
	vertical-align: top;
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	header nav .logo-section a.logo {
		width: 50px;
	}
	header nav .menu-section {
		padding-left: 0;
	}
	header nav .drop-down-menu .menu-list-mobile:first-child {
		margin-left: 0;
	}
	header nav .drop-down-menu li .sub-menu {
		left: 4.6rem;
	}
	header nav .drop-down-menu li a {
		padding: 0.6rem;
	}
	header nav .extra-section {
		margin-top: 0;
	}
	header nav .extra-section .search .search-field input {
		padding: 6px 115px 6px 8px;
		height: 32px;
	}
	.threeBox ul li h2 {
		font-size: 2rem;
	}
}

@media screen and (max-width: 767px) {
	.desktop-only {
		display: none !important;
	}
	.mobile-only {
		display: block !important;
	}
	/* 180903 修正小網搜尋input未展開會出現|的問題 */
	.sb-opt {
		display: none;
	}
	.sb-search.sb-search-open {
		position: absolute;
		right: 0;
	}
	.sb-search.sb-search-open .sb-opt {
		width: calc(100% - 42px);
		box-shadow: 0px 10px 1.5rem rgba(0, 0, 0, 0.1);
		-webkit-box-shadow: 0px 10px 1.5rem rgba(0, 0, 0, 0.1);
		display: block;
	}
	/* 180822 修正小網搜尋建議不出現*/
	.sb-search.sb-search-open .sb-opt li {
		display: block;
	}
	.sb-search.sb-search-open .sb-search-input {
		padding: 0 10px 0 36px;
		font-size: 16px;
		width: calc(100% - 82px);
		right: 86px;
		border-radius: 4px 0 0 4px;
		-webkit-appearance: none;
	}
	.sb-icon-search,
	.sb-search-close {
		right: 0;
	}
	.sb-search.sb-search-open .sb-search-submit {
		right: 40px;
		border-radius: 0 4px 4px 0;
		-webkit-appearance: none;
	}
	section#header header {
		max-width: 1142px;
		height: auto;
		margin: 0 auto;
		padding-top: 5px;
		-webkit-transition: margin .2s linear;
		-o-transition: margin .2s linear;
		transition: margin .2s linear;
	}
	section#header header nav {
		height: 60px;
		padding-top: 5px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}
	section#header header .iconic {
		width: 24px;
		height: 24px;
	}
	section#header header nav .logo-section {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-flex: 1;
		-ms-flex-positive: 1;
		flex-grow: 1;
		margin: 0;
		padding: 0;
		-webkit-box-ordinal-group: 1;
		-ms-flex-order: 0;
		order: 0;
	}
	section#header header nav .logo-section a.logo {
		display: block;
		background: url(../images/logo-text.svg) left center no-repeat;
		width: 34px;
		height: 34px;
		background-size: cover;
	}
	section#header header nav .menu-section .menu-button {
		display: block;
		width: 44px;
		height: 44px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		color: #333;
	}
	section#header header nav .menu-section .menu-button .icon-close {
		display: none;
	}
	section#header header nav .menu-section .menu.active .icon-close {
		display: block;
	}
	section#header header nav .menu-section .menu.active .icon-menu {
		display: none;
	}
	section#header ul.drop-down-menu>li {
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	}
	section#header ul.drop-down-menu li,
	section#header ul.drop-down-menu ul {
		margin-bottom: 0;
		margin-left: 0;
		list-style: none;
		padding-left: 0;
	}
	section#header ul.drop-down-menu {
		overflow: hidden;
		width: 100vw;
		background: white;
		position: absolute;
		z-index: -3;
		-webkit-transform: translateY(-300px);
		-ms-transform: translateY(-300px);
		transform: translateY(-300px);
		opacity: 0;
		left: 0;
		right: 0;
		max-height: 0;
		-webkit-transition: max-height ease-in-out .35s;
		-o-transition: max-height ease-in-out .35s;
		transition: max-height ease-in-out .35s;
		-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
		margin-left: 0;
		padding-left: 0;
	}
	section#header ul.drop-down-menu.active {
		top: 55px;
		opacity: 1;
		max-height: calc( 100vh - 60px);
		overflow: auto;
		-webkit-transform: translateY(0px);
		-ms-transform: translateY(0px);
		transform: translateY(0px);
	}
	section#header header nav .menu-section {
		position: relative;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
		width: 30%;
		padding-left: 0;
		height: auto;
		z-index: 50;
		display: -webkit-box;
		display: -ms-flexbox;
		-webkit-box-ordinal-group: 0;
		-ms-flex-order: -1;
		order: -1;
	}
	section#header header nav .menu-section .menu {
		position: relative;
		top: inherit;
		left: inherit;
		width: auto;
		height: auto;
	}
	section#header header nav .extra-section {
		width: 30%;
		padding: 0;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: end;
		-ms-flex-pack: end;
		justify-content: flex-end;
		text-align: right;
		-webkit-box-ordinal-group: 2;
		-ms-flex-order: 1;
		order: 1;
	}
	section#header header nav .extra-section .profile {
		display: none;
	}
	section#header header nav.show-mobile-search .extra-section {
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
		width: 100%;
		padding: 0;
		margin: 0;
		visibility: visible;
	}
	section#header header nav.show-mobile-search .logo-section,
	section#header header nav.show-mobile-search .menu-section {
		display: none;
	}
	.header-spacer {
		height: 69px;
	}
	.officialLink {
		display: block;
		margin: 20px 0;
	}
	.officialLink li {
		margin: 0;
		width: 30%;
		overflow: hidden;
		display: inline-block;
		vertical-align: middle;
	}
}
/*190507修正公司網Seachresult篩選文字*/
a.switchCategoryTab{
    color: #333;
}
a.switchCategoryTab.current{
    color:#209cff;
}
/*190507修正公司網Seachresult篩選文字*/