@charset "UTF-8";
/* CSS Document */
/* headSection 
======================================================================================== */

.headSection{ position:relative; width:100%; background:#F7F7F7; height:350px;}
.banner{width:700px; position:relative;}
.control-nav{ text-align:center;display: table;position: absolute;bottom: 25px;height: 8%;width: 100%;}
.control-nav a {display: inline-block;width: 8px;height: 8px;border-radius: 50%;background: rgba(255, 255, 255, 0.8);margin-right: 15px;}
.prev{position: absolute;top: 45%; left: 10px;text-indent: -9999px; z-index: 5;}
.prev a{ background:url(../images/arrow_l.svg) 0 0 no-repeat; display:block; width:20px; height:25px;}
.next{position: absolute;top: 45%; right: 10px;text-indent: -9999px; z-index: 5;}
.next a{ background:url(../images/arrow_r.svg) 0 0 no-repeat; display:block; width:20px; height:25px;}
.news_sections{ width:299px; height:350px; background:#FFF; border-right:1px solid #CCC;border-bottom: 1px solid #CCC;}
.news_sections .block h3{ line-height:40px; padding: 0 12px; color:#227BBB; text-align:left; background:#EFEFEF; font-size:1.3em; position: relative;}
.news_sections .block h3 .ns-time{position: absolute; top: 0; right: 10px; color: #555; font-size: 13px; font-weight: bold;}
.news_sections .ns-linktxt{
	position: absolute;
	top: 0;
	right: 10px;
	color: #227BBB;
	font-size: 13px;
	font-weight: bold;
}
.block ul{ padding:5px 10px 0px 10px;}
.block ul li span{ display:inline-block; color:#333; margin: 0 0.6em 0 0; font-size:0.8em;}
.block ul li a{ font-size:1em;}


.block ul li a.news_txt{margin:0; display:inline-block; width:168px; font-size: 13px; vertical-align: -3px;  overflow:hidden; white-space: nowrap; text-overflow: ellipsis;}

.block a.more{ display:block; text-align:right; padding:0 21px 3px 0; background-position:279px 0px;}

/* 20240621 官網修正消息頁籤樣式(css 綁backgroundImage) */
/*.news ul li{background-image:url(../images/announcement_icon.png); background-position:-6px 0;background-repeat:no-repeat; padding:2px 0 2px 55px; line-height: 1.7;}
.news ul li.new{ background-image:url(../images/news_icon.png); background-position:-8px 0;}
.news ul li.system{background-image:url(../images/system_icon.png); background-position:-8px 0;}
.news ul li.maintain{ background:url(../images/maintain_icon.png) -8px 0 no-repeat;}
.news ul li span{ display:inline-block; color:#333; margin: 0 15px 0 15px; font-size: 12px;}
.news ul li a{ font-size:12px; line-height: 1.2;}
*/

/* 20240621 官網修正消息頁籤樣式(css 綁class) */
.news ul li{display:flex; justify-content: flex-start; align-items:center; }
.news ul li span{ display:inline-block; color:#333; margin: 0 15px 0 15px; font-size: 12px;}
.news ul li a{ font-size:12px; line-height: 1.2;}
.nl_td{position:relative;}
.news_tab{width:40px;height:20px;line-height:1.7;border-radius:2px;font-size:12px;color:#fff;margin:3px auto;text-align:center;}
.nt_announcement{background-color:#409bd6;}
.nt_announcement::before {content: "";width: 0;height: 0;border-style: solid;border-width: 5px 5px 5px 5px;border-color:  transparent transparent transparent #409bd6 ;position: absolute;right: -9px;top: 10px;}
.nt_news{background-color:#f29600;}
.nt_news::before {content: "";width: 0;height: 0;border-style: solid;border-width: 5px 5px 5px 5px;border-color:  transparent transparent transparent #f29600 ;position: absolute;right: -9px;top: 10px;}
.nt_system{background-color:#a4a4a4;}
.nt_system::before {content: "";width: 0;height: 0;border-style: solid;border-width: 5px 5px 5px 5px;border-color:  transparent transparent transparent #a4a4a4 ;position: absolute;right: -9px;top: 10px;}
.nt_maintain{background-color:#ba5c40;}
.nt_maintain::before {content: "";width: 0;height: 0;border-style: solid;border-width: 5px 5px 5px 5px;border-color:  transparent transparent transparent #ba5c40 ;position: absolute;right: -9px;top: 10px;}
.nt_event{background-color:#00a84f;}
.nt_event::before {content: "";width: 0;height: 0;border-style: solid;border-width: 5px 5px 5px 5px;border-color:  transparent transparent transparent #00a84f ;position: absolute;right: -9px;top: 10px;}

.ex-rate{display: table; width: 100%; font-size: 13px; color: #333; margin-bottom: 2px;}
.ex-rate dl{display: table-row; width: 100%; font-weight: bold;}
.ex-rate dt,.ex-rate dd{display: table-cell; width: 33.3333%; padding:6px 13px; text-align: right; vertical-align: middle;}
.ex-rate dt:first-child,.ex-rate dd:first-child{text-align: center;}
.ex-rate dt{background: #227BBB; color: white;}
.ex-rate dd{color: #227BBB;}
.ex-rate-more{clear: both;}
.ex-rate-more .time{float: left; color: #555; padding: 0 0 3px 10px; font-weight: bold;}
.ex-rate-more .erm-tip{float: left; color: #555; padding: 0 0 3px 10px; font-weight: bold;}
.ex-rate-more .more{float: right; background-repeat: repeat-x; background-position: 265px 0px !important;}

/* main
======================================================================================== */
.main { position: relative;}
.main ul{ width:100%; overflow: hidden;}
.main ul li{ float:left; border-bottom: 1px solid #ddd;}
.main ul li.no_border{ border-right:none;}
.main ul li.no_bottom{ border-bottom:none !important;}
.other-area ul li:nth-child(4), .other-area ul li:nth-child(5), .other-area ul li:nth-child(6){ margin-top:20px;}
.main ul li .feattitle{ display:inline-block;}
.main ul li .feattitle h3{ height:54px; line-height: 54px; font-size:1.1rem; display:inline-block; margin-left: 8px;}
.main ul li .feattitle span{ height:54px; line-height: 54px; font-size:0.9rem; display:inline-block; margin-left: 8px; color:#646464;}
.main ul li img.featimg{ float:left; display:inline-block; }
.main ul li .featBox{ padding:10px 0; width:100%;}
.main ul li .featBox p{ font-size:15px; line-height: 1.6;}
.main ul li .featlink{ clear:both; margin-left: -10px;}
.featlink a{ display:inline-block; font-size:15px; padding: 5px 10px; text-align:center;}
.featlink em.ui-separator{font-style: normal;font-weight: 500;font-size:13px;}
.featlink a.appstore{ background:url(../images/appstore_icon.png) 15px 0 no-repeat; padding:3px 10px 5px 40px !important; width:31px;}
.featlink a.googleplay{ background:url(../images/googleplay_icon.png) 13px 0 no-repeat;padding:3px 10px 5px 40px !important; width:60px;}
.featlink a.donate{ margin-left:15px;}
.appdl-icon-apple,.appdl-icon-android {width:120px; height:39px; text-indent:-9999px; display:inline-block;}
.appdl-icon-apple { background:url(../images/appstore_dl_icon.png) top no-repeat; padding:0 3px 0 9px;}
.appdl-icon-android { background:url(../images/googleplay_dl_icon.png) top no-repeat; padding:0 9px 0 3px;}
.appdl-icon-apple:hover, .appdl-icon-android:hover { background-position:bottom;}

/* present, shpcar
======================================================================================== */
.present{
	margin: 20px 0;
}
.present .float_r{
	float: right;
}
.present .float_l{
	float: left;
}
span.plus{
	position: relative;
	top: -7px;
}
.divider {
    border-top: 1px solid #d9dadc;
    display: block;
    line-height: 1px;
    margin: 20px 0;
    position: relative;
    text-align: center;
}
.title{
    background: #fff;
    font-size: 1.25rem;
    letter-spacing: 1px;
    padding: 0 20px;
    text-transform: uppercase;
    text-align: center;
	color: #1b6b9f;
	font-weight: 700;
}
.present .present-app{
	overflow: hidden;
	margin: 12px 0 50px;
	width: 1000px;
}
.present .present-app .left-box{
	width: 690px;
	margin: 20px 20px 0 0;
}
.present .present-app .right-box{
	width: 290px;
	margin-top: 40px;
}
.present .present-app .app-event{
	width: 290px;
	height: 400px;
	overflow: hidden;
	position: relative;
}
.present .present-app .app-event:after{
	content: '優惠活動';
	position: absolute;
	top: -24px;
	right: -64px;
	padding: 50px 50px 5px;
	background-color: #E23260;
	color: #fff;
	font-size: 1.6em;
	text-align: center;
	font-weight: bold;
	box-shadow: 0 1px rgba(255,255,255,.5),
				0 4px #E23260;
	-webkit-transform: rotate(32deg);
	-ms-transform: rotate(32deg);
	-o-transform: rotate(32deg);
	transform: rotate(32deg);
}
.present .present-app .app-event span{
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	padding: 10px;
	background-color: rgba(0,0,0,.6);
	color: #fff;
	font-size: 1.25em;
	line-height: 1.6;
	letter-spacing: .5px;
}
.present .present-app .app-QandA{
	width: 290px;
	height: 255px;
	margin-bottom: 10px;
	overflow: hidden;
}
.present .present-app .app-event2{
	width: 290px;
	position: relative;
	margin-top: 10px;
}

.present .present-app .app-event2 .slides-container{
	width: 290px;
	height: 120px;
	overflow: hidden;
	position: relative;
}

.present .present-app .app-event2 .slides-container + .slides-container {
	margin-top: 10px;
}

.present .present-app .app-event img,
.present .present-app .app-QandA img,
.present .present-app .app-event2 img{
	width: 100%;
	height: 100%;
}

.present .present-card{
	overflow: hidden;
	background-color: #2e4c74;
	color: #fff;
	width: 1000px;
	margin: 30px 0 70px;
}
.present .present-card .service-list{
	float: left;
	width: 310px;
	background-color: #fff;
	border-right: none;
	text-align: left;
}
.present .present-card .service-list.title{
	font-size: 1.6em;
    line-height: 60px;
    box-shadow: 0 .3px #ce98f7;
    position: relative;
    padding-left: 60px;
}
.present .present-card .service-list .title:before{
	content: '';
	position: absolute;
	left: 0;
	background: url(../images/cardgood_icon.png) no-repeat center right;
	top: 0;
	bottom: 0;
	width: 100px;
}
.present .present-card .service-list li{
	border: 1px solid #ddd;
	border-bottom: none;
	color: #666;
	cursor: pointer;
	font-size: 1rem;
	height: 65px;
	line-height: 65px;
	letter-spacing: 1px;
	position: relative;
	padding-left: 25px; 
}
.present .present-card .service-list li:last-child{
	border-bottom: 1px solid #ddd;
}
.present .present-card .service-list li:not(.current){
	color: #666;
}
.present .present-card .service-list li.current{
	background-color: #fff;
	color: #2e4c74;
	font-weight: bold;
	-webkit-transition: color .3s;
	-o-transition: color .3s;
	transition: color .3s;
}
.present .present-card .service-list li.current:before{
	content: '';
    display: block;
    width: 4px;
    height: 65px;
    background: #a8e2f9;
    position: absolute;
    top: 8px;
    left: -24px;
}
.present .present-card .service-list li:hover{
	color: #2e4c74;
	-webkit-transition: color .3s;
	-o-transition: color .3s;
	transition: color .3s;
}
.present .present-card .service-list li.current:after{
	content: '';
    position: absolute;
    right: 1.2em;
    top: 0;
    bottom: 0;
    border-left: 12px solid #2e4c74;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    height: 0;
    margin: auto;
    z-index: 1;
}
.present .present-card .service-list li.current:before{
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 1.8em;
	z-index: 1;
}
.present .present-card .service-default{
	float: left;
	width: 690px;
	position: relative;
	height: 260px;
	background-color: #2e4c74;
}
.present .present-card .service-default a{
	text-decoration: none;
}
.present .present-card .service-default dl{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
    padding: 30px 40px;
    z-index: 0;
    width: 0;
    /*overflow: hidden;*/
}
.present .present-card .service-default dl.default-1 span{
	font-size: 1rem;
	padding: 0 5px;
}

.present .present-card .service-default dl.current{
	opacity: 1;
	width: auto;
	-webkit-transition: opacity .3s ;
	-o-transition: opacity .3s ;
	transition: opacity .3s ;
}
.present .present-card .service-default dl dt{
	font-size: 1.1rem;
	font-weight: bold;
	line-height: 1.3em;
	margin-bottom: 10px;
}
.present .present-card .service-default dl dd,
.string dl.string-default dd,
.shpcar dl.shpcar-default dd,
.develop dl.develop-default dd{
	font-size: 1rem;
	line-height: 1.7em;
}
.present .present-card .service-default dl dd a.tool-tip{
	position: relative;
}
.present .present-card .service-default dl dd a.tool-tip:hover:before{
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	-webkit-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
	z-index: 5;
}
.present .present-card .service-default dl dd a.tool-tip:hover:after{
	-webkit-transform: rotate(45deg) scale(1);
	-ms-transform: rotate(45deg) scale(1);
	-o-transform: rotate(45deg) scale(1);
	transform: rotate(45deg) scale(1);
	-webkit-transition: all .3s .1s;
	-o-transition: all .3s .1s;
	transition: all .3s .1s;
	z-index: 5;
}
.present .present-card .service-default dl dd a.tool-tip:after{
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	border-left: 1px solid #FFCD14;
	border-top: 1px solid #FFCD14;
	background-color: #FFFBD7;
	bottom: -1.1em;
    left: 1em;
	-webkit-transform: rotate(45deg) scale(0);
	-ms-transform: rotate(45deg) scale(0);
	-o-transform: rotate(45deg) scale(0);
	transform: rotate(45deg) scale(0);
}
.present .present-card .service-default dl dd a.tool-tip:before{
	content: attr(data-tip);
	position: absolute;
	-webkit-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	-o-transform: scale(0);
	transform: scale(0);
	width: 200px;
	padding: 10px;
	border-radius: 5px;
	border: 1px solid #FFCD14;
	background-color: #FFFBD7;
	color: #000;
	top: 2em;
    left: -2em;
}
.present .present-card .service-default dl dd.icon-check{
	height: 32px;
	line-height: 32px;
}
.present .present-card .service-default dl dd.icon-check a{
	font-size: 1rem;
	line-height: 1.6rem;
}
.present .present-card .service-default dl dd.icon-check:before,
.shpcar dl.shpcar-default dd.icon-check:before,
.develop dl.develop-default dd.icon-check:before{
	content: url(../images/index/card_check.svg);
	display: inline-block;
	width: 20px;
	height: 20px;
	position: relative;
    top: 4px;
    left: 0;
}
.present .present-card .service-default .font-yellow,
.shpcar dl.shpcar-default .font-yellow,
.develop dl.develop-default .font-yellow{
	color: #fefb00;
}
.present .present-card .service-default .font-red{
	color: #f00;
}
.present .present-card .service-default dl dd.btn-box{
	width: 100%;
	position: absolute;
    bottom: 15px;
    left: 10px;
    text-align: center;   
}
.present .present-card .service-default dl dd.btn-box a,
.string dl.string-default dd.btn-box a,
.shpcar dl.shpcar-default dd.btn-box a{
	min-width: 120px;
	border: 1px solid #dedede;
	background-color: #fff;
	color: #444;
    display: inline-block;
    font-size: 1rem;
    line-height: 36px;
    margin: 0 3px;
    padding: 0 5px;
    text-decoration: none;
    text-align: center;  
}
.develop dl.develop-default dd.btn-box a{
	min-width: 68px;
	border: 1px solid #dedede;
	background-color: #fff;
	color: #444;
    display: inline-block;
    font-size: 1rem;
    line-height: 36px;
    margin: 0 3px;
    padding: 0 5px;
    text-decoration: none;
    text-align: center; 
}
.present .present-card .service-default dl dd.btn-box a:hover,
.string dl.string-default dd.btn-box a:hover,
.shpcar dl.shpcar-default dd.btn-box a:hover,
.develop dl.develop-default dd.btn-box a:hover{
	border: 1px solid #ccc;
	background-color: #e0e0e0;
	-webkit-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
}


/* string, shpcar, develop
======================================================================================== */
.col-3{
	overflow: hidden;
	margin-top: 50px;
}
.string, .shpcar, .develop{
	width: 494.99px;
	height: 250px;
	float: left;
	margin-bottom: 70px;
	position: relative;
}
.develop {
	margin-right: 10px;
}
.string-default{
	background-color: #8cbbd7;
}
.shpcar-default{
	background-color: #3f72a8;
}
.develop-default{
	background-color: #2e4c74;
}
.string .string-default,
.shpcar .shpcar-default,
.develop .develop-default{
	width: 100%;
	height: 100%;
	color: #fff;
	padding: 15px 20px;
	-webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
.string-default dt,
.shpcar-default dt,
.develop-default dt{
    display: inline-block;
}
.string dl.string-default dt img,
.shpcar dl.shpcar-default dt img,
.develop dl.develop-default dt img{
	float: left;
    display: inline-block;
    margin-left: 8px;
}
.col-title{
	display: inline-block;
	font-size: 1.1rem;
	font-weight: bold;
	height: 54px;
    line-height: 54px;   
    margin-left: 8px;
}
.string dl.string-default dd.btn-box,
.shpcar dl.shpcar-default dd.btn-box,
.develop dl.develop-default dd.btn-box{
	position: absolute;
    bottom: 25px;
    width: 100%;
    left: 0;
    right: 0;
    text-align: center;
}
.shpcar .shpcar-default dd.text-indent,
.develop .develop-default dd.text-indent{
	text-indent: 10px;
}
.develop dl.develop-default dd.btn-box a:last-child{
	font-size: 1rem;
}
.develop dl.develop-default dd.btn-box a:not(:first-child) {
    margin-left: 10px;
}
.develop dl.develop-default dd.btn-box a small{
	font-size: .5em;
}

/*b2b
======================================================================================== */
.b2b { width: 1000px; height: 130px; background: url(../images/index/b2b.jpg) no-repeat center center; position: relative; margin: 10px 0 70px; box-sizing: border-box; }
.b2b:after { content: "."; display: block; clear: both; height: 0; overflow: hidden; visibility: hidden; }
.b2b dl { color: #fff; position: absolute; top: 20px; left: 280px; }
.b2b dt { color: #fff; font-size: 1.1rem; font-weight: bold; line-height: 1.7em; margin-bottom: 5px; }
.b2b dd { font-size: 1rem; line-height: 1.7em; }
.b2b dd.btn-box { position: absolute; top: -5px; right: -180px; }

/*sns
======================================================================================== */
.forum { margin: 40px 0; }
.forum .col-3 { overflow: hidden; }
.forum dl[class^="sns-"] { float: left; width: 32%; margin-top: 25px; }
.forum dl[class^="sns-"]:not(:last-child) { margin-right: 20px; }
.forum dl[class^="sns-"] dt { background-color: #e4e4e4; color: #227BBB; text-align: center; position: relative; line-height: 40px; font-size: 1.4em; font-weight: bold; }
.forum dl[class^="sns-"] dt a { position: absolute; right: 10px; color: #227BBB; font-size: .8em; line-height: 1.2em; bottom: 10px; }
.forum dl[class^="sns-"] dd { line-height: 35px; font-size: 1.3em; height: 35px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.forum dl[class^="sns-"] dd a { color: #333; text-decoration: none; }

/*lightbox
======================================================================================== */

/*allPayLightBox_1 QRCODE
======================================================================================== */
#allPayLightBox_1 .contant{
	text-align: center;
	position: relative;
	width: 260px;
	height: 420px;
	margin: auto;
}
#allPayLightBox_1 .contant img[alt="qrcode"]{
	width: 260px;
	height: 420px;
	position: absolute;
	left: 0;
}
#allPayLightBox_1 .contant a[title="AppleStore"],
#allPayLightBox_1 .contant a[title="Googleplay"]{
	position: absolute;
	width: 240px;
	height: 70px;
	left: 10px;
	color: transparent;
}
#allPayLightBox_1 .contant a[title="AppleStore"]{
	bottom: 90px;
}
#allPayLightBox_1 .contant a[title="Googleplay"]{
	bottom: 10px;
}
#allPayLightBox_1 .contant a[title="AppleStore"]:hover,
#allPayLightBox_1 .contant a[title="Googleplay"]:hover{
	background-color: rgba(255,255,255,.2);
	-webkit-transition: background-color .3s;
	-o-transition: background-color .3s;
	transition: background-color .3s;
}
#allPayLightBox_1 .content-box .txt-r_b {
	color: #fff;
	font-size: 14px;
	letter-spacing: 1px;
	position: absolute;
	bottom: 10px;
	right: 20px;
}

/*allPayLightBox_2 行動支付-超商付款
======================================================================================== */
#allPayLightBox_2 .contant{
	width: 830px;
	margin: 0 auto;
}
#allPayLightBox_2 .contant ul li{
	display: inline-block;
	vertical-align: top;
	width: 240px;
}
#allPayLightBox_2 .contant ul li img{
	width: 100%;
}
#allPayLightBox_2 .contant ul li:not(:nth-child(3)){
	position: relative;
	margin-right: 50px;
}
#allPayLightBox_2 .contant ul li:not(:nth-child(3)):not(:nth-child(4)):before{
	content: '';
	border-left: 10px solid #227BBB;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	position: absolute;
	top: 0;
	bottom: 100px;
	margin: auto;
	right: -30px;
	height: 0;
}
#allPayLightBox_2 .contant ul dl dt{
	text-align: center;
	font-weight: bold;
	color: #227BBB;
	font-size: 1.4em;
	padding: 5px 0;
}
#allPayLightBox_2 .contant ul dl dd{
	font-size: 1.2em;	
	text-align: center;
}
#allPayLightBox_2 .contant ul dl dd:last-child{
	height: 50px;
}
#allPayLightBox_2 .contant .more{
	width: 100%;
	text-align: right;
	font-size: 1.4em;
}

/*allPayLightBox_3 行動支付-收款
/*allPayLightBox_7 行動支付-付款
======================================================================================== */
#allPayLightBox_3 .contant,
#allPayLightBox_7 .contant{
	width: 830px;
	margin: 0 auto;
}
#allPayLightBox_3 .contant ul li,
#allPayLightBox_7 .contant ul li{
	display: inline-block;
	vertical-align: top;
	width: 240px;
}
#allPayLightBox_3 .contant ul li img,
#allPayLightBox_7 .contant ul li img{
	width: 100%;
}
#allPayLightBox_3 .contant ul li:not(:nth-child(3)):not(:nth-child(5)),
#allPayLightBox_7 .contant ul li:not(:nth-child(3)):not(:nth-child(4)){
	position: relative;
	margin-right: 50px;
}
#allPayLightBox_3 .contant ul li:not(:nth-child(3)):not(:nth-child(5)):before,
#allPayLightBox_7 .contant ul li:not(:nth-child(3)):not(:nth-child(4)):before{
	content: '';
	border-left: 10px solid #227BBB;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	position: absolute;
	top: 0;
	bottom: 100px;
	margin: auto;
	right: -30px;
	height: 0;
}
#allPayLightBox_3 .contant ul dl dt,
#allPayLightBox_7 .contant ul dl dt{
	text-align: center;
	font-weight: bold;
	color: #227BBB;
	font-size: 1.4em;
	padding: 5px 0;
}
#allPayLightBox_3 .contant ul dl dd,
#allPayLightBox_7 .contant ul dl dd{
	font-size: 1.2em;	
	text-align: center;
}
#allPayLightBox_3 .contant ul dl,
#allPayLightBox_7 .contant ul dl{
	margin-bottom: 30px;
}
#allPayLightBox_3 .contant .more,
#allPayLightBox_7 .contant .more{
	width: 100%;
	text-align: right;
	font-size: 1.4em;
}

/*allPayLightBox_4 停車繳費
======================================================================================== */
#allPayLightBox_4 .contant{
	text-align: center;
}
#allPayLightBox_4 .contant ul li{
	display: inline-block;
	vertical-align: top;
	width: 25%;
}
#allPayLightBox_4 .contant ul li img{
	width: 100%;
}
#allPayLightBox_4 .contant ul li:not(:last-child){
	position: relative;
	margin-right: 5%;
}
#allPayLightBox_4 .contant ul li:not(:last-child):before{
	content: '';
	border-left: 10px solid #227BBB;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	position: absolute;
	top: 0;
	bottom: 100px;
	margin: auto;
	right: -30px;
	height: 0;
}
#allPayLightBox_4 .contant ul dl dt{
	text-align: center;
	font-weight: bold;
	color: #227BBB;
	font-size: 1.4em;
	padding: 5px 0;
}
#allPayLightBox_4 .contant ul dl dd{
	font-size: 1.2em;	
	text-align: center;
}
#allPayLightBox_4 .contant ul dl{
	height: 520px;
}
#allPayLightBox_4 .contant .more{
	width: 100%;
	text-align: right;
	font-size: 1.4em;
}

/*allPayLightBox_5 收款工具介紹
/*allPayLightBox_8 費率&撥款天期
/*allPayLightBox_9 費率表
/*allPayLightBox_10 費用說明
======================================================================================== */
#allPayLightBox_5 .contant,
#allPayLightBox_8 .contant,
#allPayLightBox_9 .contant,
#allPayLightBox_10 .contant{
	text-align: center;
}
#allPayLightBox_5 .contant table ,
#allPayLightBox_8 .contant table ,
#allPayLightBox_9 .contant table ,
#allPayLightBox_10 .contant table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
}
#allPayLightBox_5 .contant table *,
#allPayLightBox_8 .contant table *,
#allPayLightBox_9 .contant table *,
#allPayLightBox_10 .contant table *{
	font-size: 16px;
	text-align: center;
	box-sizing: border-box;
}
#allPayLightBox_5 .contant table th ,
#allPayLightBox_8 .contant table th ,
#allPayLightBox_9 .contant table th ,
#allPayLightBox_10 .contant table th {
	padding: 10px;
    background-color: #227BBB;
    color: #FFF;
    border-right: #7EB3D8 solid 1px;
    text-align: center;
}
#allPayLightBox_5 .contant table td:first-of-type ,
#allPayLightBox_8 .contant table td:first-of-type ,
#allPayLightBox_9 .contant table td:first-of-type ,
#allPayLightBox_10 .contant table td:first-of-type {
    border-left: #999 solid 1px;
    background-color: #ebf5ff;
}
#allPayLightBox_5 .contant table td,
#allPayLightBox_8 .contant table td,
#allPayLightBox_9 .contant table td,
#allPayLightBox_10 .contant table td{
    padding: 10px;
    border-bottom: #999 solid 1px;
    border-right: #999 solid 1px;
    color: #666;
}
#allPayLightBox_5 .contant table td ol {
	list-style: inherit;
	margin-left: 15px;
}
#allPayLightBox_5 .contant table td li {
    color: #666;
    text-align: left;
    list-style-type: decimal;
}
#allPayLightBox_5 .contant table td:nth-of-type(4){
	text-align: left;
}
#allPayLightBox_5 .contant table td a.blue_btn ,
#allPayLightBox_8 .contant .btn-box a.blue_btn ,
#allPayLightBox_10 .contant .btn-box a.blue_btn {
    color: #fff;
    text-shadow: 0 -1px #00629c;
    background-color: #0079c1;
    background: -moz-linear-gradient(center bottom,#0079c1 0,#0079c1 20%,#00a1ff 100%);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0%,#0079c1),color-stop(20%,#0079c1),color-stop(100%,#00a1ff));
    background: -webkit-linear-gradient(bottom,#0079c1 0,#0079c1 20%,#00a1ff 100%);
    background: -ms-linear-gradient(bottom,#0079c1 0,#0079c1 20%,#00a1ff 100%);
    background: -o-linear-gradient(bottom,#0079c1 0,#0079c1 20%,#00a1ff 100%);
    background: linear-gradient(bottom,#0079c1 0,#0079c1 20%,#00a1ff 100%);
    -moz-box-shadow: 0 1px #4dbeff inset;
    -webkit-box-shadow: 0 1px #4dbeff inset;
    box-shadow: 0 1px #4dbeff inset;
    -webkit-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    border-color: #0079c1 #00588b #004b77;
    border-style: solid;
    border-width: 1px;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    cursor: pointer;
    padding: 5px;
    margin: 5px 0;
}
#allPayLightBox_5 .contant table th:nth-of-type(1){
	width: 110px;
}
#allPayLightBox_5 .contant table th:nth-of-type(2){
	width: 200px;
}
#allPayLightBox_5 .contant table th:nth-of-type(3){
	width: 124px;
}
#allPayLightBox_5 .contant table th:nth-of-type(4){
	width: 337px;
}
#allPayLightBox_5 .contant table th:nth-of-type(5){
	width: 122px;
}
#allPayLightBox_8 .contant p.text-r,
#allPayLightBox_10 .contant p.text-r{
	width: 100%;
	text-align: right;
}
#allPayLightBox_8 .contant .btn-box{
	margin-top: 20px;
}
#allPayLightBox_8 .contant .btn-box a.blue_btn,
#allPayLightBox_10 .contant .btn-box a.blue_btn{
	width: 130px;
	display: inline-block;
	margin: 0 10px;

}
#allPayLightBox_9 .contant p.text-l,
#allPayLightBox_10 .contant p.text-l{
	text-align: left;
}
/*allPayLightBox_6 批次授權操作流程
======================================================================================== */
#allPayLightBox_6 .contant{
	text-align: center;
}
#allPayLightBox_6 .contant ul li{
	
}
#allPayLightBox_6 .contant ul li:not(:last-child){
	position: relative;
	margin: 30px 0 60px;
}
#allPayLightBox_6 .contant ul li:not(:last-child):before{
	content: '';
	border-top: 15px solid #227BBB;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	position: absolute;
	bottom: -30px;
	right: 0;
	left: 0;
	margin: auto;
	height: 0;
	width: 0;
}
#allPayLightBox_6 .contant ul dl dt{
	text-align: center;
	font-weight: bold;
	color: #227BBB;
	font-size: 1.4em;
	padding: 5px 0;
}
#allPayLightBox_6 .contant ul dl dd{
	font-size: 1.2em;	
	text-align: center;
	padding: 5px 0;
}
#allPayLightBox_6 .contant ul dl{
	/* height: 520px; */
}
#allPayLightBox_6 .contant .more{
	width: 100%;
	text-align: right;
	font-size: 1.4em;
}

/* ads
======================================================================================== */
.ads{ margin-bottom:0;}
.ads ul{background:#EFEFEF; overflow:hidden; margin-bottom:25px; padding:15px 10px 10px 15px;}
.ads ul li{height: 165px; width:470px; float:left; padding: 0; background-color:#FFF; margin:0 7px 8px;}
.ads .featlink{ margin-top:5px; background:url(../images/ads_arrows.png) 440px 4px no-repeat;}
.adsp{height:98px !important; }
.appnote{display:block; width:21px; height:16px; background:url(../images/appnote.png) no-repeat; position:absolute; right:0px; top:12px;}
.count_down{font-weight:bold; position:absolute; font-size:36px; left:30px; bottom:35px; z-index:200;}
.expect{position:absolute; right:12px; bottom:30px; font-size:13px; z-index:200; text-align:right;}
.join_btn{position:absolute; right:10px; bottom:9px; z-index:200; width:72px;  height:14px; line-height:16px !important; border-radius:5px; font-size:14px; background-color:#C00; text-align:center; color:#fff;}
.join_btn:hover{background-color:#900; text-decoration:none; color:#fff;}
/* messenger  ========================================================================================*/
.mesngr, .mesngr2{ z-index:999; position: fixed;bottom: 0px;right: 20px; width:250px;}
.mesngr{height:45px;}
.mesngr2{height:160px;}
a.msgr_none, .msgr_login{padding:0.9em; display:block; font-weight:bold; font-size:15px;text-decoration:none; border-top-left-radius:8px; border-top-right-radius:8px;}
a.msgr_none{background-color:#ddd; color:#444;}
a.msgr_none:hover{background-color:#227bbb; color:#fff;}
a.msgr_login{background-color:#227bbb; color:#fff;}
.msgr_cont{background-color:#fff; padding:15px; font-size:14px; border:#227bbb 2px solid;}
.help_box {position: absolute;top:-100px;left:50px;background-color: rgba(255, 255, 255, 0.8);background: rgba(255, 255, 255, 0.8);border: 4px solid #227bbb;border-radius:10px;padding:0.5em 1.4em;}
.help_box:after, .help_box:before {top: 100%;left: 50%;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none;}
.help_box:after {border-color: rgba(255, 255, 255, 0);border-top-color: #fff;border-width: 12px;margin-left: -12px;}
.help_box:before {border-color: rgba(34, 123, 187, 0);border-top-color: #227bbb;border-width: 18px;margin-left: -18px;}
.help_box > p{text-align:center; font-size:22px; font-weight:bold;}
.help_box a.go_login{ display:block; text-align:center;}
.msgr_none span.arrow_t, .msgr_login span.arrow_b, .go_top span.arrow_b{display:block; width:18px; height:15px; float:right;}
.msgr_none span.arrow_t, .msgr_login span.arrow_t{background:url(../images/arr_t.png) no-repeat;}
.msgr_none span.arrow_b, .msgr_login span.arrow_b{background:url(../images/arr_b.png) no-repeat;}

/*-----------提示------------*/
.ti_box, .ti_box_r, .ti_box_l, .ti_box_b {
	position: absolute;
	line-height: 20px;
	padding: 0.5em;
	font-size: 13px;
	color: #555;
	text-shadow: 0 1px 0 #fff;
	text-align: left;
	background: #FEFFD3;
	border: 1px solid #FFCC00;
	z-index: 100;
}
.ti_box {width: 170px; top: 110px; left: 300px;}
.ti_box_r {width: 170px; top: 110px; left: 300px;}
.ti_box_l {width: 210px; top: 110px;	left:30px;}
.ti_box_l {width: 210px;}
.ti_box:after,.ti_box:before {content: " ";position: absolute;pointer-events: none;width: 0;height: 0;bottom: 100%;left: 20%;border: solid transparent;}
.ti_box:after  {margin-left: -5px;border-bottom-color: #FFFFFF;border-width: 5px;}
.ti_box:before {margin-left: -6px;border-bottom-color: #FFCC00;border-width: 6px;}

.ti_box_l:after, .ti_box_l:before {content: " ";position:absolute; pointer-events:none;width:0;height:0; border:solid transparent;}
.ti_box_l:after  {margin-left:-4px; top:8px; left:-6px; border-right-color:#FFFFFF; border-width:5px;}
.ti_box_l:before {margin-left:-6px; left:-6px; border-right-color:#FFCC00; border-width:6px;}

.ti_box_r:after, .ti_box_r:before { content:" "; position:absolute; pointer-events:none; width:0; height:0; bottom:100%; left:80%;border:solid transparent;}
.ti_box_r:after  {margin-left:-5px; border-bottom-color:#FFFFFF; border-width:5px;}
.ti_box_r:before {margin-left:-6px; border-bottom-color:#FFCC00; border-width:6px;}

.ti_box_b:after,.ti_box_b:before {content: " ";position: absolute;pointer-events: none;width: 0;height: 0;top: 100%;left: 80%;border: solid transparent;}
.ti_box_b:after  {margin-left: -5px;border-top-color: #FFFFFF;border-width: 5px;}
.ti_box_b:before {margin-left: -6px;border-top-color: #FFCC00;border-width: 6px;}

/* 彈出視窗
======================================================================================== */
.window_wrap { position:fixed; width:350px; top:50%; left:50%; margin:-255px 0 0 -185px; padding:20px; background:#FFF; border:1px solid #000; text-align:center; z-index:201;}
.windowheight { height:350px;}
.closebtn { display:block; width:28px; padding-left:320px;}
.headbars{background-color:#028af3; font-size:16px; color:#FFF; padding:10px 8px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}
.qrcode { position:relative; width:165px; height:165px; padding:15px; border:#666 solid 1px; margin:0 auto;}
.scan_sucess { position: absolute; width: 169px; height: 169px; text-indent:-9999px; background:url(../images/qrcode_check.png) no-repeat; z-index: 202; left: 14px; top: 14px;}
.rescan { position: absolute; width: 169px; height: 169px; text-indent:-9999px;
	background:url(../images/qrcode_rescan.png) no-repeat; z-index: 202; left: 14px; top: 14px;}
.window_wrap h3 { margin:0 0 20px; font-size:1.8em; font-weight:normal; line-height:normal; color:#227BBB;}
.window_wrap h4 { margin:20px 0 5px; font-size:16px; font-weight:normal; line-height :normal;}
.window_wrap span { color:#227BBB;}
.tip { color:#009; cursor:pointer;}
.overlay { position:fixed; top:0; right:0; bottom:0; left:0; background:#FFF; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; -moz-opacity:0.5; opacity:0.5; z-index:200;}
.close_btn { position:absolute; top:15px; right:15px;}
.close_btn2 { position:absolute; top:35px; right:32px;}
table.turn>tbody>tr>th, table.turn>tbody>tr>td { padding: 10px 5px; text-align:center;font-size:16px; line-height:24px;}
table.turn>tbody>tr>td.borwhite {border-color:#FFF; padding:0;}
table.turn img { width:auto;}
.turn-box{padding:30px;}
.turn-box p{ font-size:16px; margin:10px 0;}
.turn-box h4{ font-size:20px; margin-bottom:10px; padding-top:20px;}
.turn-box p.check_stuff{font-size:14px!important; margin-bottom:0;}
.allpay-qrcode, .parking-qrcode { position:relative; width:198px; height:198px; padding:20px; border:#666 solid 1px; margin:0 auto;}
.turn tr>th.ecpay {padding: 5px 3px;background-color: #267252;color: #FFF;border-right: #7EB3D8 solid 1px;}
.ecpay, .ecpay-color, .popbox h2.ecpay, a.ecpay:hover {color: #267252;}
.turn-ecpay th:first-child {border-left: 1px solid #267252;}
.turn-ecpay th:last-child {border-right: 1px solid #267252;}
.turn-ecpay tr>th {background-color: #267252;border-top: 1px solid #267252;}
.turn-ecpay td { font-size: 16px; line-height: 28px;}
.turn-ecpay td:first-of-type {border-left: #ccc solid 1px; background-color: #E6FDF7; color: #267252; text-align:center;}
h3.ecpay {font-size: 20px;font-weight: bold; text-shadow:none;color: #FFF;background-color: #267252;padding: 10px 15px;border-top-left-radius: 3px;border-top-right-radius: 3px;}
.gw-term > h3 {font-size: 18px;color: #267252;margin-bottom: 10px;font-weight: bold;padding-top: 10px;}
.ecpay-btn {
    background: #40bd87;
    background-image: -webkit-linear-gradient(top, #40bd87, #267252);
    background-image: -moz-linear-gradient(top, #40bd87, #267252);
    background-image: -ms-linear-gradient(top, #40bd87, #267252);
    background-image: -o-linear-gradient(top, #40bd87, #267252);
    background-image: linear-gradient(to bottom, #40bd87, #267252);
    -webkit-border-radius: 5;
    -moz-border-radius: 5;
    border-radius: 5px;
    border: solid #26633b 1px;
    text-decoration: none;
}
p.check {text-indent: -23px;text-align: justify; margin:0 0 0 23px; padding-bottom:20px;}
.text-small { font-size:12px;}
.keep ol { margin-left:20px;}
.keep ol li { font-size:16px; list-style:decimal;}

/* 法令宣導
======================================================================================== */
.term, .gw-term {height:200px;overflow-x:hidden;}
.term {width:580px;padding:5px;}
.gw-term li {margin-left:30px; padding-right:5px; font-size:14px!important; list-style: decimal !important;}
.gw-term { box-sizing:border-box; width:100%;padding:10px 10px 10px 15px; background:#efefef;}
.gw-term > p{font-size:14px!important;}
.term li {margin-left:30px; padding-right:5px;}
.term ul li {list-style:outside disc !important;}
.term h4 {padding:10px 0 5px;font-size:15px;text-align:left;color:#227BBB;}
.border_gray{border:1px #ccc solid;}

/* 行銷版位
======================================================================================== */
.red_envlp{margin-top:15px;}
.fl{float:left;}
.m_counts{ background-color:#660000; width:203px; height:180px;}
.yellow{color:#ffcc00;}
.ts1{margin:20px 0 0px 15px; font-size:18px;}
.ts2{margin:0px 20px 0px; font-size:26px; text-align:right;}
.ts3{margin:0px 0 0px 15px; font-size:18px;}

/*superslides.css*/
.slides-navigation { margin: 0 auto; position: absolute; z-index: 3; top: 46%; width: 100%; }
.slides-navigation a { position: absolute; display: block; }
.slides-navigation a.prev { left: 0; }
.slides-navigation a.next { right: 0; }
.slides-pagination { position: absolute; z-index: 3; bottom: 0; text-align: center; width: 100%; }
.slides-pagination a { border: 1px solid #CCC; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; width: 10px; height: 10px; display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; margin: 6px 4px; overflow: hidden; text-indent: -100%; background: white; opacity: 0.9; filter: Alpha(opacity = 90); }
.slides-pagination a.current { background: #111; }

/*討論區
================================================================================================================*/
.tabs > ul.horizontal { margin: -15px 0 15px; }
.tabs > ul.horizontal > li { width: 95.1px; border-bottom: none; display: inline-block; font-size: 0.91rem; float: none; margin-right: 15px; padding: 5px 0; text-align: center; }
.tabs > ul.horizontal > li:last-child { margin-right: 0; }
.tabs > ul.horizontal > li.active { border-bottom: 4px solid #a8e2f9; }
.tabs > ul.horizontal > li.active a { color: #2e4c74; font-weight: bold; }
.tabs > ul.horizontal > li a { color: #666; font-size: 0.91rem; }
.tabs > ul.horizontal > li a:hover { color: #2e4c74; text-decoration: none; }

/* table */
.table_wrap { width: 1000px; height: 475px; border: 1px solid #ddd; background-color: #fff; color: #222; margin-top: 10px; }
.table_blue, .table_white { width: 1000px; border-collapse: collapse; display: table; font-size: 0.91rem; line-height: 1.2rem; }
.table_box { height: 435px; overflow-y: scroll; overflow-x: hidden; }
.table_colgroup { display: table-column-group; }
.table_col:nth-child(1), .table_col:nth-child(3) { display: table-column; width: 120px; }
.table_col:nth-child(2) { display: table-column; width: 580px; }
.table_col:nth-child(4) { display: table-column; width: 160px; }

/* th */
.table_theader { display: table-header-group; color: #fff; background-color: #2e4c74; }
.table_th { display: table-cell; color: #fff; text-align: center; vertical-align: middle; height: 40px; }

/* tr */
.table_tr { display: table-row; border-bottom: 1px solid #ddd; }

/* td  */
.table_td { display: table-cell; height: 50px; text-align: center; vertical-align: middle; }
.table_tr > .table_td:nth-child(2) { text-align: left; padding-left: 15px; }
.table_td span { color: #999; }

/* scrollbar */
::-webkit-scrollbar { width: 12px; background: #fff; }
::-webkit-scrollbar-track { border-radius: 10px; background: #fff; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); }
::-webkit-scrollbar-thumb { border-radius: 10px; background: #ddd; }
::-webkit-scrollbar-bottom { border-radius: 10px; background: #fff; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); }

/*btn
========================================================================================================*/
.new-btn { width: 120px; height: 36px; display: block; font-size: 1rem; line-height: 36px; padding: 0 5px; text-align: center; margin: 30px auto; }
.new-btn a { text-decoration: none; }
.btn-blue { border: 1px solid #243b5a; background-color: #2e4c74; color: #fff; }
.btn-blue:hover { background-color: #1e324e; border: 1px solid #041f44; color: #fff; text-decoration: none; }
.btn-white { border: 1px solid #dedede; background-color: #fff; color: #444; }
.btn-white:hover { border: 1px solid #ccc; background-color: #e0e0e0; color: #444; text-decoration: none; }

/*距離
================================================================================================================*/
.p-10 { padding: 10px; }
.w-33 { width: 33.33%; }
.w-50 { width: 50%; }
.margin-b15 { margin-bottom: 15px;}
.margin-t10 { margin-top: 10px;}
.margin-t20 { margin-top: 20px;}

/*合作商店
==================================================================================================*/
.cooperation { width: 100%; margin-bottom: 70px; }
.slider { position: relative; width: 1000px; margin: 30px auto 0; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: -moz-none; -o-user-select: none; user-select: none; }
.multislides .frame { position: relative; width: 1000px; margin: 0 auto; font-size: 0; line-height: 0; overflow: hidden; white-space: nowrap; }
.slides { display: inline-block; }
.js_slide { width: 160px; border: 1px solid #eee; color: #fff; display: inline-block; font-size: 14px; margin-right: 5px; line-height: 26px; text-align: center; }
.js_slide a { display: block; text-decoration: none;}
.js_slide a:hover img, .js_slide a:hover .store_name { opacity: 0.8; }
.store_name { width: 150px; background-color: #bbb; color: #fff; padding: 0 5px; overflow: hidden; }
.multislides .prev, .multislides .next { display: block; width: 20px; height: 25px; cursor: pointer; }
.multislides .next { background: url(../images/index/arrow_r_black.svg) 0 0 no-repeat; position: absolute; top: 55px; right: -40px; }
.multislides .prev { background: url(../images/index/arrow_l_black.svg) 0 0 no-repeat; position: absolute; top: 55px; left: -40px; }
.cooper-title{background: #F7F7F7;}
.cooper-bg {
	/*display: none;*/
	background: #F7F7F7;
	width: 100%;
    height: 315px;
    position: absolute;
    top: 768px;
    left: 0;
    z-index: 1;
}

/*--TWQR 介紹區塊--*/
.op-intro-box {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 40px;
}
.oib-content {
	width: 100%;
}
.oib-content + .oib-img {
	margin-left: 20px;
}
.oib-content .oc-logo {
	width: 300px;
	margin-bottom: 14px;
}
.oib-content .oc-logo img {
	width: 100%;
}
.oc-title {
	font-size: 20px;
	font-weight: bold;
	color: #000;
	line-height: 1.4;
	margin-bottom: 5px;
}
.oc-txt {
	font-size: 15px;
	color: #333;
	line-height: 1.6;
	margin-bottom: 16px;
}
.oc-link-box {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.oc-link {
	display: block;
	height: 20px;
	padding: 0 17px;
	font-size: 15px;
	line-height: 1.4;
	color: #333;
	position: relative;
}
.oc-link:after {
	content: '|';
	display: block;
	font-size: 13px;
	color: #333;
	position: absolute;
	right: -2px;
	top: 1px;
}
.oc-link:last-child:after {
	display: none;
}
.oc-link:first-child {
	padding-left: 0;
}
.oc-link:last-child {
	border-right: none;
}
.oib-img {
	width: 348px;
	flex-shrink: 0;
}
/*----*/


/*--歐付寶電子發票開立服務--*/
.op-intro-box2 {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 40px;
	padding: 30px 0 0 20px;
	box-sizing: border-box;
}
.op-intro-box2 .oib2-content {
	width: 100%;
	height: 280px;
	border-radius: 20px;
	background-color: #227cbb;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
}
.op-intro-box2 .oib2-content .o2c-img {
	width: 490px;
	flex-shrink: 0;
	position: relative;
	top: -30px;
	left: -20px;
	border-radius: 20px;
	overflow: hidden;
	margin-right: 40px;
}
.op-intro-box2 .oib2-content .o2c-box {
	padding: 40px 20px 0 0;
}
.op-intro-box2 .oib2-content .o2c-title {
	font-size: 28px;
	font-weight: bold;
	color: #FFF;
	line-height: 1.4;
	margin-bottom: 20px;
}
.op-intro-box2 .oib2-content .o2c-txt {
	font-size: 15px;
	color: #FFF;
	line-height: 1.5;
	margin-bottom: 20px;
}
.op-intro-box2 .oib2-content .o2c-link-box {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.op-intro-box2 .oib2-content .o2c-link {
	display: block;
	height: 20px;
	padding: 0 17px;
	font-size: 15px;
	line-height: 1.4;
	color: #FFF;
	position: relative;
}
.op-intro-box2 .oib2-content .o2c-link:after {
	content: '|';
	display: block;
	font-size: 13px;
	color: #FFF;
	position: absolute;
	right: -2px;
	top: 1px;
}
.op-intro-box2 .oib2-content .o2c-link:last-child:after {
	display: none;
}
.op-intro-box2 .oib2-content .o2c-link:first-child {
	padding-left: 0;
}
.op-intro-box2 .oib2-content .o2c-link:last-child {
	border-right: none;
}

/*----*/