@charset "utf-8";
/* ----- banner ----- */
#banner{
	width:100%;
	overflow:hidden;
	position:relative;
	background-color:#0b2b6c;
}
#banner .listshow {
	position:relative;
	z-index:2;
}
#banner .slick-prev,#banner .slick-next{
	text-align:center;
	align-content: center;
	z-index:2;
	border-radius:60px;
	transition:all 0.4s ease;
}
#banner .slick-prev{left:-10%;}
#banner .slick-next{right:-10%;}
#banner:hover .slick-prev,#banner:focus .slick-prev{left:3%;}
#banner:hover .slick-next,#banner:focus .slick-next{right:3%;}
#banner .slick-prev:before,
#banner .slick-next:before {
	display:none;
}
#banner .slick-prev:hover,
#banner .slick-prev:focus,
#banner .slick-next:hover,
#banner .slick-next:focus {
	background:rgba(0,0,0,0.6);
}
#banner .slick-prev:focus,
#banner .slick-next:focus {
	outline:2px dotted #FF6600 !important;
}
#banner .slick-prev span,
#banner .slick-next span {
	position:relative;
	display:inline-block;
	width:17px;
	height:17px;
    -webkit-border-radius:0%;
	   -moz-border-radius:0%;
			border-radius:0%;
	-webkit-transition:all 0.5s ease;
	   -moz-transition:all 0.5s ease;
	     -o-transition:all 0.5s ease;
	        transition:all 0.5s ease;
}
#banner .slick-prev span {
	margin-right:-5px;
    -webkit-transform:rotate(-45deg);
        -ms-transform:rotate(-45deg);
            transform:rotate(-45deg);
}
#banner .slick-next span {
	margin-left:-5px;
    -webkit-transform:rotate(45deg);
        -ms-transform:rotate(45deg);
            transform:rotate(45deg);
}
#banner .slick-prev span:before,
#banner .slick-next span:before {
	content:"";
	display:block;
	position:absolute;
	top:0;
    width:5px;
    height:100%;
	background:#FFF;
    z-index:2;
    -webkit-border-radius:50px;
	   -moz-border-radius:50px;
			border-radius:50px;
    -webkit-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
            transform:rotate(0deg);
}
#banner .slick-prev span:before {
	left:0;
}
#banner .slick-next span:before {
	right:0;
}
#banner .slick-prev span:after,
#banner .slick-next span:after {
	content:"";
    display:block;
	position:absolute;
	left:0;
	top:0;
    width:100%;
    height:5px;
	background:#FFF;
    z-index:2;
    -webkit-border-radius:50px;
	   -moz-border-radius:50px;
			border-radius:50px;
    -webkit-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
            transform:rotate(0deg);
}
/**/
.mainBox {
	display:block;
	position:relative;
	width:100%;
	z-index:1;
}
.mainBox::before{
	content:"";
	width:100%;
	height:100%;
	display:block;
	background-image:linear-gradient(0deg, #0b2b6c 0%, rgba(255,255,255,0) 100%);
	position:absolute;
	left:0%;bottom:0%;
	z-index:-1;
}
.mainBox .slogan {
	position: relative;
    z-index:3;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	flex-direction: column;
	font-family:"微軟正黑體", "Microsoft YaHei", "LiHei Pro Medium";
	font-weight:bold;
	text-align:center;
	padding:10vw 10%;
	min-height:16vw;
}
.mainBox .slogan h2{
	display:inline-block;
	font-family:"Noto Sans TC", sans-serif, "Microsoft YaHei";
	font-size:4.9vw;
	background:linear-gradient(to right, #46ebf5 0%, #6ccff2 60%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	line-height: 120%;
}
.mainBox .slogan h2 > strong{
	font-size:1.24em;
	display:inline-block;
	vertical-align: text-bottom;
}
.mainBox .slogan h2 > span{
	font-size:0.526em;
	display:inline-block;
	margin:0 0.5em;
	vertical-align:middle;
}
.mainBox .slogan .label{
	display:inline-block;
	font-size:2vw;
	font-weight:bold;
	color: #e6e664;
	line-height: 120%;
}
.mainBox .slogan .label > strong{
	font-size:1.2em;
	display:inline-block;
	vertical-align: text-bottom;
}
.mainBox .slogan > .tag{
	font-weight: normal;
	font-size:1.8em;
	line-height:130%;
	color: #e6e664;
	margin-top:0.5em;
}
.mainBox .slogan > p{
	font-weight: normal;
	font-size:1.8em;
	line-height:130%;
	color:#ffffff;
	margin-top:0.5em;
}
.MainBtnBox{
	margin-top:15px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.MainBtnBox a{
	background-color:#313131;
	color:#fff;
	font-size:1.8em;
	padding:10px 15px 10px 25px;
	border-radius:50px;
	display: flex;flex-wrap: wrap;
	align-items: center;
	justify-content:space-between;
	margin-right:15px;
	min-width:200px;
	box-sizing:border-box;
	margin:3px;
	line-height:150%;
	text-decoration:none;
	transition:all 0.4s ease;
}
.MainBtnBox a:hover{
	transform: translate3d(0, -3px, 0);
	background-color:#EA8100;}
.MainBtnBox a::after{
	content:""; display:inline-block;
	width:25px; height:25px;
	margin-left:15px;
	background-color:#EA8100;
	mask-image:url(../images/mainbtn1.svg);
	-webkit-mask-image: url(../images/mainbtn1.svg);
	mask-repeat:no-repeat;
	mask-position:center;
	mask-size:contain;
	-webkit-mask-repeat:no-repeat;
	-webkit-mask-position:center;
	-webkit-mask-size:contain;
}
.MainBtnBox a:hover::after{
	background-color:#313131;
}
.mainBox .mPic{
	width:85%;
	margin:4vw 0 -12vw 8%;
	mix-blend-mode: lighten;
}
.mainBox .mPic img{
	max-width:100%;
	height:auto;
	display:inline;
}
.slick-slide:not(.slick-current) .slogan > *,
.slick-slide:not(.slick-current) .mainBox .mPic{
	opacity:0;
}
@media screen and (max-width:989px) {
	#banner{ margin-top:70px;}
	.mainBox .mPic{
		width:100%;
		margin:4vw 0 -12vw 0;
	}
}
@media screen and (max-width:767px) {
	.mainBox .slogan h2{font-size:7.5vmin;}
	.mainBox .slogan .label{ font-size:5.5vmin;}
	.mainBox .slogan > {font-size:1.4em;}	
}
@media screen and (max-width:660px) {
	.MainBtnBox a{font-size:1.7em; min-width:auto;}
	.mainBox .mPic{width:95%; margin-left:4%;}	
}
@media screen and (max-width:360px) {
	.mainBox .slogan h2{font-size:9.5vmin;}
	.mainBox .slogan .label{ font-size:5.7vmin;}	
	.MainBtnBox a{font-size:1.6em; padding:8px 10px 8px 20px;}	
}
@media screen and (min-width:991px) {
	#banner .slick-prev, #banner .slick-next {width: 60px;height: 60px;}
	#banner .slick-prev span, #banner .slick-next span{width:24px;height:24px;}
	.mainBox .slogan {
		padding:65px 4% 105px 4%;
		max-width:43vw;
		text-align:left;
	}
	.mainBox .mPic {
		position:absolute;
		right:0;top:0%;
		z-index:2;
		max-width:580px;
		margin:0%;
		text-align:right;
	}
	.mainBox .slogan > p{ font-size:1.8em;}	
	.MainBtnBox{justify-content:flex-start;}			
}
@media screen and (min-width:1160px) {
	.mainBox .slogan {
		padding:8% 4%;
		max-width:45vw;
	}
	.mainBox .mPic {max-width:700px;}	
	.MainBtnBox{ margin-top:20px; }	
	.MainBtnBox a{ font-size:2em;}
}
@media screen and (min-width:1260px) {	
	.mainBox .slogan {
		padding:8%;
		margin-left: calc((84% - 1000px) / 2);
	}
	.mainBox .mPic { max-width:740px; }			
}
@media screen and (min-width:1460px) {								
	.mainBox .mPic { max-width:860px; margin-right:0;}	
}

/* ----- triangleHead ----- */
.triangleHead {
	width:100%;
	padding:30px 0 50px 0;
	margin:0 auto;
	position:relative;
	overflow:hidden;
	z-index:1;
}
.triangleHead::before{
	content:"";
	display:block;
	width:200%;
	height:100%;
	background-color:#0b2b6c;
	mask-image: url(../images/trianglebg.svg);
	-webkit-mask-image:url(../images/trianglebg.svg);
	mask-repeat:no-repeat;
	mask-position:50% bottom;
	mask-size:cover;
	-webkit-mask-repeat:no-repeat;
	-webkit-mask-position:50% bottom;
	-webkit-mask-size:cover;
	position:absolute;
	left:50%;bottom:0;
	transform: translate3d(-50%, 0, 0);
	z-index:-1;
}
.triangleHead .breadcrumbs {
	width:100%;
	margin-bottom:10px;
}
.triangleHead .breadcrumbs > a,
.triangleHead .breadcrumbs > span a  {
	color: #FFF;
	opacity:.5;
}
.triangleHead .breadcrumbs a:hover,
.triangleHead .breadcrumbs a:focus {
	color: #FFF;
	text-decoration:underline;
	opacity:1;
}
.triangleHead .breadcrumbs .btn-home {
	display:inline-block;
	width:15px;
	height:20px;
	font-size:0;
	text-indent:-9999px;
	vertical-align:middle;
	background:url(../images/icon-home.png) no-repeat 50% 50%;	
}
.triangleHead .breadcrumbs span {
	position:relative;
	display:inline-block;
	font-size: 1.3em;
	line-height:20px;
    color: #fff;
	padding:0 0 0 15px;
	margin-left: 3px;
	vertical-align:middle;
}
.triangleHead .breadcrumbs span:before{
	position: absolute;
    content: "";
    display: block;
    position: absolute;
    left:2px;
    top:7px;
    width: 5px;
    height: 5px;
    border-left: 1px solid rgba(255,255,255,.5);
    border-bottom: 1px solid rgba(255,255,255,.5);
    z-index: 2;
    -webkit-transform: rotate(-135deg);
		-ms-transform: rotate(-135deg);
			transform: rotate(-135deg);
}
.triangleHead .title {
	font-family: "微軟雅黑","Microsoft YaHei";
	color:#FFF;
	font-size:3.9em;
	font-weight:bold;
	text-align:center;
	line-height:135%;
	-webkit-text-shadow:0 2px 5px rgba(0,0,0,.5);
	   -moz-text-shadow:0 2px 5px rgba(0,0,0,.5);
        -ms-text-shadow:0 2px 5px rgba(0,0,0,.5);
			text-shadow:0 2px 5px rgba(0,0,0,.5);
}
.triangleHead .title strong {
	color:#FFFF4D;
}
.triangleHead .title + p{
	text-align:center;
	color:#FFF;
	font-size:1.6em;
	line-height:180%;
	margin-top:0.5em;
}
.triangleHead.headWhite::before{
	background-color:#ffffff;
}
.triangleHead.headWhite .title,
.triangleHead.headGrid .title{
	color:#000;
	text-shadow:none;
}
.triangleHead.headWhite .title + p,
.triangleHead.headGrid .title + p{
	color:#666;
}
.triangleHead.headGrid::before{
	background-image:url(../images/work-tag-bg.gif);
	background-repeat:repeat;
}
@media screen and (max-width: 520px) {
	.triangleHead .title {
		font-size:2.5em;
	}
}
@media screen and (max-width: 360px) {
	.triangleHead .title {
		font-size:2.4em;
	}
}
@media screen and (min-width: 991px) {
	.triangleHead {
		padding:30px 0 90px 0;
		margin:0 auto;
	}
	.triangleHead .breadcrumbs {
		text-align:right;
	}
	.triangleHead .title span {
		display:block;
	}
}
/* ----- hostingSec ----- */
.hostingSec{
	width:100%;
	padding:5vw 0;
	box-sizing:border-box;
}
.hospart2{
	background: url(../images/work-tag-bg.gif);
}
.hospart3{
	background: url(../images/dot-grid.png);
	background-color:#fff;
}
.hostingSec .icon{
	display:flex;
	align-items:center;
	justify-content:center;
}
.hostingSec .icon::before{
	content:"";
	display:block;
	width:40px;
	height:40px;
	background-color:#07449B;
	mask-repeat:no-repeat;
	mask-position:center;
	mask-size:contain;
}
.hospart1 .hostingSec .icon::before{
	width: 60px;
	height: 60px;
	mask-image: none;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.hospart3 .hostingSec .icon::before{
	background-color:#fff;
}
.hostingSec .icon.hco1::before{background-image:url(../images/h_ico1.svg);}
.hostingSec .icon.hco2::before{background-image:url(../images/h_ico2.svg);}
.hostingSec .icon.hco3::before{background-image:url(../images/h_ico3.svg);}
.hostingSec .icon.hco4::before{background-image:url(../images/h_ico4.svg);}
.hostingSec .icon.hco5::before{background-image:url(../images/h_ico5.svg);}
.hostingSec .icon.hco6::before{background-image:url(../images/h_ico6.svg);}
.hostingSec .icon.hco7::before{background-image:url(../images/h_ico7.svg);}
.hostingSec .icon.hco8::before{background-image:url(../images/h_ico8.svg);}
/**/
.hostingSec .icon.ico1::before{mask-image:url(../images/host_ico1.svg);}
.hostingSec .icon.ico2::before{mask-image:url(../images/host_ico2.svg);}
.hostingSec .icon.ico3::before{mask-image:url(../images/host_ico3.svg);}
.hostingSec .icon.ico4::before{mask-image:url(../images/host_ico4.svg);}
.hostingSec .icon.ico5::before{mask-image:url(../images/host_ico5.svg);}
.hostingSec .icon.ico6::before{mask-image:url(../images/host_ico6.svg);}
.hostingSec .icon.ico7::before{mask-image:url(../images/host_ico7.svg);}
.hostingSec .icon.ico8::before{mask-image:url(../images/host_ico8.svg);}
.hostingSec .icon.ico9::before{mask-image:url(../images/host_ico9.svg);}
.hostingSec .icon.ico10::before{mask-image:url(../images/host_ico10.svg);}
.hostingSec .icon.ico11::before{mask-image:url(../images/host_ico11.svg);}
.hostingSec .icon.ico12::before{mask-image:url(../images/host_ico12.svg);}
@media screen and (min-width:1260px) {
	.hostingSec .container{
		max-width:1000px;
	}
}

/* ----- hostingTabs ----- */
[role="tab"] {
	padding: 0.5em 1rem;
	border: none;
	background: lightgray;
	cursor: pointer;
	font-family:"Noto Sans TC", sans-serif, "Microsoft YaHei";
	font-size:180%;
	font-weight: bold;
	border-radius:3px;
	position: relative;
}
[role="tab"][aria-selected="true"] {
	background: #007bff;
	background-image:linear-gradient(90deg, #007bff 0%, #0b2b6c 100%);
	color: white;
}
[role="tab"][aria-selected="true"]::before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 2px;
	background-color: #064FAF;
	transform: rotate(45deg);
	position: absolute;
	left: 50%;bottom:-8px;
	z-index: -1;
	margin-left: -10px;
}
[role="tabpanel"] {
	padding: 1rem 0;
	margin-top: 0.5rem;
}
.hostingTabs *{box-sizing:border-box;}
.hostingTabs{
	display: flex;
	flex-wrap: wrap;
	gap: 20px 20px;
	justify-content: space-between;
}
.hostingTabs [role="tab"]{
	width:calc((100% - 40px) / 3);
}
.hostingTabs.hd2 [role="tab"]{
	width:calc((100% - 20px) / 2);
}
@media screen and (min-width: 991px) {
	[role="tab"] { font-size: 250%;}
}
/* ----- svcProcess ----- */
.svcProcess *{box-sizing:border-box;}
.svcProcess{
	width:100%;
	display: flex;
	flex-wrap: wrap;
	background-color: #edf7fc;
	border-radius:3px;
}
.svcProcess .fixLeft{
	width:calc(33.33% - 10px);
	background-color:#dcf0fa;
	border-radius:3px;
	padding:30px 20px;
}
.svcProcess .fixInfo{
	width:calc(66.66% - 10px);
	margin-left:20px;
	padding:30px 10px 30px 0;
}
.svcProcess .fixLeft h3{
	color:#007bff;
	font-size:2.2em;
	margin-bottom:0.35em;
	text-align:center;
}
.svcProcess .fixLeft .wd{
	font-size:1.5em;
	line-height:180%;
}
.svcProcess .infoHead{
	font-size:2.2em;
	font-weight:bold;
	margin-bottom:0.5em;
}
.svcProcess .infoBody{
	font-size:1.5em;
	line-height:180%;
}
.svcProcess .infoBody ul.sepLine{
	list-style-type:none;
	display: flex;
	flex-wrap: wrap;
	gap: 20px 20px;
	justify-content: space-between;
}
.svcProcess .infoBody ul.sepLine > li{
	width:calc((100% - 40px) / 3);
	position:relative;
	padding:10px;
}
.svcProcess .infoBody .sepLine .process_arrow{
	content:"";
	display:block;
	position:absolute;
	right:-30px;top:45px;
	width:40px; height:40px;
	background-image:url(../images/process_arrow.svg);
	background-color:#edf7fc;
	background-repeat:no-repeat;
	background-position:center;
	z-index:2;
}
.svcProcess .infoBody ul.sepLine > li:has(+li)::after{
	content:"";
	display:block;
	position:absolute;
}
.svcProcess .oneProcess .iconWrap{
	text-align:center;
	margin-bottom:20px;
}
.svcProcess .oneProcess .icon{
	width:100px;
	height:100px;
	border-radius:50px;
	background-color:#fff;
	border: 5px solid #b4c3da;
	margin:0 auto;
}
.svcProcess .oneProcess .iconWrap strong{
	margin-top:0.5em;
	display:block;
}
.svcProcess .oneProcess .botWd ul,
.svcProcess .oneProcess .botWd ol{
	margin-left:1.5em;
}
@media screen and (max-width: 767px) {
	.svcProcess .fixLeft,
	.svcProcess .fixInfo{
		width: 100%;
	}
	.svcProcess .fixInfo{
		margin-left: 0;
		padding-left: 0;
	}
}
@media screen and (max-width: 480px) {
	.svcProcess .fixInfo{
		padding: 15px;
	}
	.svcProcess .infoBody ul.sepLine > li{
		width:100%;
		position:relative;
		padding:10px;
	}
	.svcProcess .infoBody ul.sepLine > li:has(+li){
		padding-bottom: 30px;
	}
	.svcProcess .infoBody ul.sepLine > li:has(+li)::after{
		bottom: 0;right: 0;
		width: 100%;
		height: 1px;
		border-right: none;
		border-bottom: 1px dashed #ddd;
	}
	.svcProcess .infoBody .sepLine .process_arrow{
		right: 50%;
		top: auto;
		bottom: -20px;
		margin-right: -20px;
		background-image: url(../images/process_arrow2.svg);
	}
}
@media screen and (min-width: 481px) {
	.svcProcess .infoBody ul.sepLine > li:has(+li)::after{
		right:-10px;top:20px;
		width:1px; height:calc(100% - 40px);
		border-right:1px dashed #ddd;
	}
}
@media screen and (min-width: 991px) {
	.svcProcess .fixLeft{
		padding:3vw 20px;
	}
	.svcProcess .fixLeft h3{
		font-size:3em;
		margin-bottom:1em;
	}
	.svcProcess .fixLeft .wd{
		font-size:1.7em;
		line-height:200%;
	}
}
/* ----- moreBtn ----- */
.moreBtn{
	width:100%;
	text-align:center;
	margin-top:1.25em;
}
.solnsList .moreBtn{
	text-align:center;
}
.moreBtn a{
	text-decoration:none;
	background-color:#000;
	color:#fff;
	border-radius:30px;
	padding:8px 20px;
	font-size:1.5em;
	display:inline-block;
}
.moreBtn a:hover,
.moreBtn a:focus{
	background-color:#ff9900;
}
.moreBtn a span{
	display:flex;
	align-items: center;
}
.moreBtn a span::after{
	content:"";
	width:20px;
	height:20px;
	display:inline-block;
	border-radius:20px;
	background-image:url(../images/btn_plus.svg);
	background-repeat:no-repeat;
	background-position:center;
	margin-left:5px;
	box-sizing:border-box;
}
.moreBtn a span.arrow::after{
	background-image:url(../images/btn_arrow.svg);
}
/* ----- solnsList ----- */
.solnsList{
	width:100%;
}
.solnsList > ul{
	list-style-type:none;
	display: flex;
	flex-wrap: wrap;
	gap: 20px 20px;
	justify-content: space-between;
}
.solnsList > ul > li{
	width:calc((100% - 20px) / 2);
}
.solnsList .oneSolns{
	width:100%;
	min-height:100%;
	padding:15px;
	box-sizing:border-box;
	background-color:#fff;
	border-radius:12px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
	position:relative;
    display: flex;
	flex-wrap: wrap;
	flex-direction: column;
    justify-content:flex-start;
}
.solnsList .oneSolns:has(.inSolns){
	justify-content:space-between;
}
.solnsList .oneSolns:has(.moreBtn){
	padding-bottom: 25px;
}
.oneSolns .icon{
	width:60px;
	height:60px;
	border-radius:6px;
	background-color:#dcf0fa;
	position:absolute;
	top:20px;right:20px;
}
.oneSolns .soTop,
.oneSolns .soBot{
	font-size:1.6em;
	line-height:180%;
}
.oneSolns .soTop{
	width:calc(100% - 100px);
	min-height:120px;
	position: relative;
}
.oneSolns .soTop h3{
	font-size:1.25em;
	font-weight:bold;
	margin-bottom:0.25em;
}
.oneSolns .soBot{
	width:100%;
	margin-top:1em;
	padding:1em 0 0;
	border-top: 1px solid #dedede;
}
.oneSolns .soBot ul,
.oneSolns .soBot ol{
	margin-left:1.5em;
}
.oneSolns .soBot > ul{
	list-style-type:disc;
}
.oneSolns .soBot > ul > li::marker{
	color:#007bff;
}
@media screen and (max-width: 600px) {
	.solnsList > ul > li{
		width:100%;
	}
}
@media screen and (min-width: 991px) {
	.solnsList > ul > li{
		width:calc((100% - 40px) / 3);
	}
}

/**/
.flexWrap{
	width:100%;
	display: flex;
	flex-wrap: wrap;
}
.workNav{
	width:100%;
	align-content:center;
}
.workNav > ul{
	list-style-type:none;
	font-size: 1.6em;
    line-height: 180%;
}
.workNav > ul li{
	display: flex;
	flex-wrap: wrap;
}
.workNav > ul li:has(+li){
	margin-bottom:1.5em;
}
.workNav .icon{
	width:60px;
	height:60px;
	border-radius:6px;
	background-color:#007bff;
}
.workNav dl{
	width:calc(100% - 80px);
	margin-left:20px;
}
.workNav dl dt{
	font-size:1.25em;
	font-weight:bold;
	margin-bottom: 0.25em;
}
#workSlider{
	width: 100%;
	margin-top: 20px;
}
#workSlider .listshow{
	width: 100%;
	border-radius:30px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
#workSlider .listshow:has(+.slide_control){
	margin-bottom:20px;
}
.oneWork{
	width: 100%;
	box-sizing:border-box;
	padding:15px;
	background-color:#fff;
	border-radius:30px;
}
.oneWork .workBox{
	width: 100%;
	display: block;
}
.oneWork .wPic{
	width: 100%;
	background-color:#fff;
	border-radius:15px;
	overflow:hidden;
	position:relative;
	text-align:center;
}
.oneWork .wPic img{
	width:100%;
	height:auto;
	transition:all 0.4s ease;
}
.oneWork a:hover .wPic img{
	transform:scale(1.1);
}
/**/
.oneWork .wPic .cover{
	position:absolute;
	left:0%;top:0%;
	width:100%;
	height:50%;
	background-color:rgba(255,153,0,0.9);
	transition:all 0.4s ease;
	display:flex;flex-wrap:wrap;
	align-items:center;
	justify-content:center;	
	flex-direction: column;
	color:#fff;
	font-size:1.7em;
	opacity:0;
	border-radius:0%;
}
a:hover .wPic .cover,
a:focus .wPic .cover{
	height:100%;
	opacity:1;
}
.oneWork .wPic .cover strong{
	width:100%;
	display:block;
	font-size:1.25em;
}
.wPic .cover span{
	font-weight:normal;
}
.wPic .cover span:has(+strong){
	display:block;
	margin:0.5em 0 1em;
}
.wPic .cover span::before{
	content:"";
	display:block;
	width:45px;
	height:45px;
	margin:0 auto;
	border-radius:40px;
	background-color:#fff;
	background-image:url(../images/btn_read.svg);
	background-repeat:no-repeat;
	background-position:center;
	margin-bottom:8px;
}
a:hover .cover span::before,
a:focus .cover span::before{
	animation-name:flipInY;
	animation-duration:1s;
	animation-delay:0.4s;
}
.btn_Link .wPic .cover span::before{
	background-image:url(../images/btn_link.svg);
}
@-webkit-keyframes flipInY{
	0%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0;-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg)}
	40%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg)}
	60%{opacity:1;-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg)}
	80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}
	to{-webkit-transform:perspective(400px);transform:perspective(400px)}
}
@keyframes flipInY{
	0%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0;-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg)}
	40%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg)}
	60%{opacity:1;-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg)}
	80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}
	to{-webkit-transform:perspective(400px);transform:perspective(400px)}
}
@media screen and (min-width: 768px) {
	.hospart3 .flexWrap{
		justify-content:space-between;
	}
	.workNav{
		width:50%;
		padding-bottom:50px;
	}
	#workSlider{
		width:calc(50% - 40px);
		margin-top: 0;
	}
}

/* ----- slick_control ----- */
div[class$="_control"] {
	display:none;
	width:100%;
	text-align:center;
	margin-top:15px;
}
div[class$="_control"] .total {
	display:inline-block;
	min-height:44px;
	vertical-align:middle;
	margin:0;
}
div[class$="_control"] .total span {
	display:inline-block;
	vertical-align:middle;
	color:#59493f;
	font-family:"Noto Serif TC", "微軟雅黑", "Microsoft YaHei";
	font-size:2em;
	line-height:44px;
	letter-spacing:0;
	font-weight:bold;
	text-align:center;
	min-width:1.5em;
}
div[class$="_control"] .total .line {
	position:relative;
	display:inline-block;
	min-width:inherit;
	width:20px;
	text-indent:-9999px;
	margin:0;
}
div[class$="_control"] .total .line::before {
	position:absolute;
	display:block;
	content:'';
	left:50%;top:50%;
	width:22px;
	height:2px;
	background:#666666;
	margin-top:-1px;
	margin-left:-11px;
	transform: rotate(110deg);
}
div[class$="_control"] .button {
	display:inline-block;
	width:44px;
	height:44px;
	letter-spacing:0;
	border:none;
	background:none;
	cursor:pointer;
	box-sizing:border-box;
	vertical-align:middle;
	padding:0;
	margin:0 2.5px;
	border-radius:30px;
	-webkit-transition:all 0.5s ease;
	   -moz-transition:all 0.5s ease;
	     -o-transition:all 0.5s ease;
	        transition:all 0.5s ease;
}
div[class$="_control"] .stop,
div[class$="_control"] .play{
	border:1px solid #666666;
}
div[class$="_control"] .button span {
	position:relative;
	display:block;
	width:100%;
	height:100%;
}
div[class$="_control"] .play span::before {
	position:absolute;
	content:"";
    display:block;
	top:50%;
	left:50%;
    width:0;
	height:0;
	border-style:solid;
	border-width:6px 0 6px 9px;
	border-color:transparent transparent transparent #666666;
	box-sizing:border-box;
	margin:-6px 0 0 -3px; 
	-webkit-transition:all 0.5s ease;
	   -moz-transition:all 0.5s ease;
	     -o-transition:all 0.5s ease;
	        transition:all 0.5s ease;
}
div[class$="_control"] .play:hover span::before,
div[class$="_control"] .play:focus span::before {
	border-color:transparent transparent transparent #ff9900;
}
div[class$="_control"] .stop span::before,
div[class$="_control"] .stop span::after {
	position:absolute;
	content:"";
    display:block; 
	top:50%;  
	left:50%;
    width:3px;
    height:16px;
	background:#666666;
	margin:-8px 0 0 0;   
    z-index:2;
	-webkit-transition:all 0.5s ease;
	   -moz-transition:all 0.5s ease;
	     -o-transition:all 0.5s ease;
	        transition:all 0.5s ease;
}
div[class$="_control"] .stop span::before {
	margin-left:-5px;
}
div[class$="_control"] .stop span::after {
	margin-left:2px;
}
div[class$="_control"] .stop:hover span::before,
div[class$="_control"] .stop:focus span::before,
div[class$="_control"] .stop:hover span::after,
div[class$="_control"] .stop:focus span::after {
	background:#ff9900;
}
div[class$="_control"] .prev span::before,
div[class$="_control"] .prev span::after,
div[class$="_control"] .next span::before,
div[class$="_control"] .next span::after {
	position:absolute;
	content:"";
    display:block;   
    width:4px;
    height:16px;    
    z-index:2;
	box-sizing:border-box;
	left:50%;top:50%;
	margin-left:-2px;
	border-radius:2px;
	background-color:#2c2e35;
	transition:all 0.5s ease;
}
div[class$="_control"] .prev span::before,
div[class$="_control"] .next span::after{
	transform: rotate(45deg);
}
div[class$="_control"] .prev span::after,
div[class$="_control"] .next span::before{
	transform: rotate(-45deg);
}
div[class$="_control"] .prev span::before,
div[class$="_control"] .next span::before {
	margin-top:-13px;
}
div[class$="_control"] .prev span::after,
div[class$="_control"] .next span::after{
	margin-top:-4px;
}
div[class$="_control"] .prev:hover span::before,
div[class$="_control"] .prev:focus span::before,
div[class$="_control"] .prev:hover span::after ,
div[class$="_control"] .prev:focus span::after ,
div[class$="_control"] .next:hover span::before,
div[class$="_control"] .next:focus span::before,
div[class$="_control"] .next:hover span::after ,
div[class$="_control"] .next:focus span::after  {
	background-color:#ff9900;
}
div[class$="_control"] .dot {
	position:relative;
	display:inline-block;
	max-width:calc(100% - 55px);
	vertical-align:middle;
}
div[class$="_control"] .dot .slick-dots {
	position:relative;
	bottom:0;
}
div[class$="_control"] .dot .slick-dots li {
    display:inline-block;
	width:15px;
	height:15px;
	margin:0 5px;
	padding:0;
	vertical-align:top;
}
div[class$="_control"] .dot .slick-dots li button {
	position:relative;
	display:inline-block;
	width:15px;
	height:15px;
	font-size:0;
	line-height:0;
	padding:0;
	margin:0;
	vertical-align:top;
}
div[class$="_control"] .dot .slick-dots li button:before {
	position:absolute;
	left:0;
	bottom:0;	
	content:"";
	display:block;
	width:15px;
	height:15px;
	text-indent:-9999px;
	line-height:15px;
	filter:alpha(opacity=100);
	opacity:1;
	background:none;
	border:2px solid rgba(102,102,102,.6);
	box-sizing:border-box;
	overflow:hidden; 
    transition:opacity .2s ease;
    -webkit-border-radius:50%;
	   -moz-border-radius:50%;
			border-radius:50%;
}
div[class$="_control"] .dot .slick-dots li.slick-active button:before {
	border:none;
    background:rgba(102,102,102,.6);
}
div[class$="_control"] .dot .slick-dots li button:focus {
	outline:2px solid #F06400;
	border-radius:100%;	
}
div[class$="_control"] .play,
div[class$="_control"] .dot{display:none;}
@media screen and (min-width:991px) {
	div[class$="_control"]{
		width:auto;
		margin-top:0;
	}
}