body { font: 20px 'Century Gothic', Arial, 'Microsoft JhengHei', '蘋果儷中黑', '儷黑 Pro', 'sans-serif'; color: #000; }
a { text-decoration: none; }
:focus { outline: none; }
i { font-style: normal; }
.header, .footer { width: 100%; margin: auto;}
.hd_pc { width: 100%; }
.hd_m, footer { display: none; }
.M_menu_wrap { display: none; }

/* Main */
.main {
	background: url('../images/kv_bg.png') no-repeat top center; background-size: contain;
	width: 100%;
	position: relative; z-index: 1; overflow: hidden;
}
/** container **/
.container {width:1100px; margin: 0 auto; padding-top: 20px;}
h1 { border-bottom:solid 5px #939393; padding: 10px; font-size: 40px; font-weight: bold; color:#000; margin: 0 auto; }
h1 span { font-size: 25px; color: #939393; font-weight: lighter; }
.flip span { font-size: 18px; color: #939393; }
.flip::after { content: ' '; display: block; width: 100%; height: 1px; clear: both; }
.container li {  padding-bottom: 20px; }

/** KV **/

	.kv { width: 100%; max-width: 1920px; margin: auto; position: relative; }
	
	.kv_head_wrap { width: 92%; max-width: 1440px; margin: auto; position: absolute; left: 0; right: 0; top: 23px; z-index: 9; }
		.kv_head {
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}
		.kv_head a { display: block; background-color: #fff; }
		.kv_head a img { width: 100%; max-width: 100%; }
		.kv_head a.logo-standard { width: 20%; max-width: 250px; }
		.kv_head a.logo-payeasy { width: 17.5%; max-width: 210px; }

	.kv::before /* kv icons  */ {
		content: ' '; display: block;
		background: url('../images/kv_icons.png') no-repeat top center; background-size: 100%;
		width: 100%; height: 100%;
		position: absolute; top: 0; bottom: 0; left: 0; right: 0;
		z-index: 1;
	}
	.kv::after /* kv ribbon  */ {
		content: ' '; display: block;
		background: url('../images/kv_ribbon.png') no-repeat top center;
		/* background-size: contain; */
		background-size: cover;
		width: 108%; height: 100%;
		position: absolute; top: 0; bottom: 0; left: 0; right: 0;
		z-index: 3;
	}

	.kv_photo {
		display: flex;
		justify-content: space-between;
		/* align-items: flex-end; */
		align-items: stretch;
		/* height: 100vh; */
		height: 50vw;
		position: relative;
	}

	.kv_photo .kv_slogan {
		display: flex;
		justify-content: center;
		align-content: space-around;
		flex-direction: column;
		align-items: center;
		width: 32%;
		max-width: 621px;
		position: relative;
		z-index: 9;
		border-bottom: 5px solid #bbe9f5;
	}

	.kv_photo .kv_slogan .kv_btn { margin-top: 10%; }

	.kv_photo img/*,
	.kv_pepole01 img, .kv_pepole02 img, .kv_pepole03 img*/ { width: 100%; max-width: 100%; }

	.kv_photo .kv_left {
		width: 43%;
		max-width: 873px;
		position: relative;
	}
		.kv_photo .kv_left::before {
			content: ' ';
			display: block;
			background: url('../images/kv_bg2.png') no-repeat center right;
			width: 100%; height: 100%;
			position: absolute;
			right: 0;
			bottom: -55%;
			z-index: 9;
		}
		.kv_pepole01 {
			/* width: 55%; */
			width: 64%;
			max-width: 550px;
			position: absolute;
			left: 0;
			/* bottom: 0; */
			bottom: 7%;
			z-index: 2;
		}
		.kv_pepole02 {
			/* width: 41.5%; */
			width: 50%;
			max-width: 415px;
			position: absolute;
			/* right: 0; */
			right: -6%;
			bottom: 0;
			z-index: 6;
		}

	.kv_photo .kv_right {
		width: 25%;
		max-width: 508px;
		position: relative;
		border-bottom: 5px solid #bbe9f5;
	}
		.kv_pepole03 {
			width: 100%;
			max-width: 455px;
			position: absolute;
			/* right: 0; */
			right: 9%;
			bottom: 0;
			z-index: 2;
		}

.block_01, .block_02, .block_03 {
	width: 1200px;
	margin: auto;
	position: relative;
	margin-top: 0px;
	z-index: 10;
}

.block_01 img, .block_02 img, .block_03 img {
	width: 100%;
	max-width: 100%;
}

.main_01tit {
	position: absolute;
	left: 0;
	top: -15%;
}

.step {
	position: relative;
	width: 1200px;
	margin: auto;
}

	/** but **/
		.but{
			text-align: center;
			width: 1200px;
			margin: auto;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 8%;
			z-index: 100;
		}

		.but ul li a {
			display: inline-block;
			transition: .3s linear;	
		}

		.but ul li a:hover{
			/**filter: brightness(120%);**/
			transform: translateY(-8px);
			cursor: pointer;	
		}

/*標題hover*/
.flip { 
	width:1070px;	
	margin:0 auto;
	padding:15px;
	text-align:left;
	border-bottom:dotted 2px #39414d; 
	font-size: 25px;
	font-weight: 700;
	color: #39414d;	
	position: relative;
	transition: .2s ease-in-out;
	z-index: 1;
	cursor: pointer
}


.flip:hover, .flip:focus, .flip:active {
	color: #2f2f2f;
}

/*隱藏內容*/
div.panel{ 
	width:960px;
	height:0; 
	overflow: hidden;
	background-color: #fff;
    transition: .5s linear height;
}
.active div.panel{
    height: 500px;
    overflow-y: auto;
    padding: 50px;
    margin: 20px;
}

/*展開收合的按鈕*/
.open, .close, .open01, .close01{
	border-radius: 30px;	
	border: 1px solid #2f2f2f;
	color: #2f2f2f;
	display: inline-block;/*可以設定長寬*/
	padding: 6px 10px;
	font-size: 10px;
	line-height: 12px;
	position: relative;
	float: right;
	left: 0px;	
	transition: .3s ease-in-out;
	cursor: pointer;	
}

.close {
	display: none;
}

.open01 {
	display: none;
}

.flip:hover .open, .flip:hover .close{
	background-color: #2f2f2f;	
	color: white;
}


/**js有添加active的時候open要關起來**/
.active .open01{
	display: block;
}

/**js有添加active的時候close要開起來**/
.active .close01{
	display: none;
}

/**js有添加active的時候open要關起來**/
.active .open{
	display: none;
}

/**js有添加active的時候close要開起來**/
.active .close{
	display: block;
}


.panel h2, .panel01 h2 { text-align: center; font-size: 30px; font-weight: bold; }

.panel h3, .panel01 h3{ 
	border-radius:30px; 
	border: 1px solid #bb0000; 
	color: #bb0000; 
	display: inline-block; 
	margin-bottom: 10px; 
	margin-top: 35px;
	padding: 5px 15px; 
	font-size: 22px;
	font-weight: 600;	
	line-height: 26px;	
}

.panel p, .panel01 p { text-align: left; font-size: 18px; line-height: 25px; }
.panel ol, .panel01 ol { padding-left: 50px; }
.panel li, .panel01 li { 
	font-size: 18px; 
	color: #333;
	line-height: 32px;
	list-style: disc;
	margin-left: -25px;	
}
 
.panel .list li, .panel01 .list li{
	list-style: decimal;
	margin-left: -25px;	
}

.panel .list02 li, .panel01 .list02 li{
	list-style-type: lower-alpha; 
	margin-left: -25px;	
}

.panel .list02 li, .panel01 .list02 li{
	list-style-type: circle; 
	margin-left: -25px;	
}

.panel span, .panel01 span { font-size: 18px; color:#000; }

/**footer-bg**/
.footer-bg{
	width: 100%;
	height: 190px;
	background-image: url('../images/bottom.png');
	background-position: center;
	
}

.pc_mode{ display: block;}
.m_mode{ display: none;}

/***prod***/
.prod_wrapper {
	position: relative;
	padding: 10px 0 0px;
}
.prod_container {
	position: relative;
	z-index: 100;
	overflow: hidden
}

/**rule**/
.rule .prod_wrapper {
	margin-top: 0;
}
.rule_wrapper {
	margin: auto;
	padding: 24px;
	width: 1122px;
	border-radius: 20px;
	background: #b9ecf9;
	font-size: 18px;
	line-height: 26px;
    margin-bottom: 100px;
}

.rule_wrapper h2 {
	display: inline-block;
	margin: 10px 0px 10px 20px;
	padding: 5px 20px;
	border-radius: 20px;
	background: #007998;
	color: #fff;
	text-align: center;
	font-weight: bold;
	font-size: 18px;
}

.rule_wrapper p {
	margin-left: 26px;
}

.rule_wrapper h3 {
	color: #e46255;
	font-weight: bold;
	font-size: 18px;
	font-size: 20px;
	color: #000;
}

.check{
	display: block;
	margin: auto;
	width: 280px;
	padding: 10px 20px;
}

a.btn_back {
	display: block;
	margin: auto;
	padding: 10px 20px;
	width: 300px;
	border-radius: 20px;
	/* background-color: darkred; */
	background-color: #007998;
	color: #fff;
	text-align: center;
	text-decoration: none;
	font-size: 20px;
	transition: linear .2s;
}
a.btn_back:hover, a.btn_back:focus, a.btn_back:active {
	/* background-color: tomato; */
	background-color: #6bd6ff;
}


/**float**/
.float_wrapper { position: fixed; top: 250px; right: 30px; z-index: 250; display: none; }
.float_hd{position: relative; top: 20px; right: -5px; z-index: 99;}
.group_leftmenu { margin: auto;}
.group_leftmenu:after { content: '';display: table;clear: both;}
.group_leftmenu li { position: relative; padding: 13px 13px; text-align: center; font-size: 20px; background-color: #2f2f2f; margin: 8px auto; border-radius: 50px; line-height: 20px; }
.group_leftmenu li a { position: relative; z-index: 500; color: #fff; cursor: pointer; font-weight: bold; transition: .3s ease-in-out;}
.group_leftmenu li.highlight { border-radius: 50px; line-height: 40px; background-color: #7e8488; }
.group_leftmenu li a:hover, .group_leftmenu li a:focus, .group_leftmenu li a:active { color:#6bd6ff; }

/**float
.float_wrapper { position: fixed; top: 250px; right:0; z-index: 250; display: block; }
.float_main { width: 138px; opacity: 0.6; filter: alpha(opacity=90);}
.go_top { display: block;cursor: pointer;}
.group_leftmenu { margin: auto; border: 15px solid #275493; border-radius: 30px 0 0 30px; opacity: 0.95; }
.group_leftmenu:after { content: '';display: table;clear: both;}
.group_leftmenu li { position: relative; padding: 10px 0 10px; text-align: center; font-size: 17px;  }
.group_leftmenu li { background: #275493; }
.group_leftmenu li a { position: relative; z-index: 500; color: #fff; cursor: pointer; font-weight: bold; }
.group_leftmenu li { padding-left: 2px; color: yellow; font-weight: bold; border-bottom: 1px dotted #fff; }
.group_leftmenu li.highlight0 {padding-left: 2px; border-bottom: 1px dotted #fff; }
.group_leftmenu li.highlight0 a {color: #ff726b; font-weight: bold;}
.group_leftmenu li.highlight1 {padding-left: 2px; border-bottom: 1px dotted #fff; }
.group_leftmenu li.highlight2 {font-size: 22px; padding: 12px 0 0 2px;  border-bottom:none;}
.group_leftmenu li a:hover, .group_leftmenu li a:focus, .group_leftmenu li a:active {color:#fbc900;}
.group_leftmenu li:after {position: absolute;right: 51%;bottom: 0;left: 51%;z-index: 1;height: 2px;background: #fbc900;content: ';-webkit-transition-timing-function: ease-out;transition-timing-function: ease-out;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;-webkit-transition-property: left, right;transition-property: left, right;}
.group_leftmenu li:hover:after, .type_leftmenu li:focus:after, .type_leftmenu li:active:after {right: 0%;left: 0%;}
.triangle-up { margin-left: 28px;  height: 7px;  width: 7px; border-width: 2px 0 0 2px; border-color: #fff; border-style: solid; transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);}
**/

/*others*/
#doyoo_panel { display: none!important; }

@media screen and (max-width:1440px) {
	.kv_head_wrap { top: 0; }
	.block_01, .block_02, .block_03,
	.step,
	.but {
		width: 98%;
		max-width:1200px;
	}

	.flip { 
		width: 90%;
		max-width:1070px;
	}

	/*隱藏內容*/
	div.panel{
		width: 80%;
		max-width: 960px;
	}
	.active div.panel{
		padding: 50px 2.7em;
		margin: 20px auto;
	}

	/**rule**/
	.prod_wrapper {}
	.rule_wrapper {
		padding: 24px 1.3em;
		width: 93.5%;
		max-width: 1122px;
	}
	.check{
		width: 88%;
		max-width: 280px;
		padding: 10px 1.1em;
	}
	a.btn_back {
		width: 88%;
		max-width: 300px;
		padding: 10px 1.1em;
	}
}

@media screen and (max-width:767px) {
	body { width: 100vw; min-width: inherit; font-size: 14px; }
	* { box-sizing: border-box;  }
	#doyoo_panel { display: none!important; }
	.header, .footer { width: 100vw;}
	.footer, .hd_pc { display: none; }
	.hd_m, footer { display: block; }
	/* main */
	.main { background: url('../images/kv_bg_mobile.png') no-repeat top center; background-size: contain; padding-bottom: 50px; }
	/**container**/
	/**kv**/
	.kv { width: 100vw; height: 50vw; }
	/* .kv, */
	.kv_photo { width: 100vw; height: 65vw; }
	/* .kv_photo { height: 250px; } */
	.kv img{ width:100%; }	
	.kv_head { display: none; }
	.kv_photo .kv_slogan,
	.kv_photo .kv_right { border-bottom: none; }
	.kv_photo .kv_left::before {
		animation: none !important;
		background: url('../images/kv_bg2.png') no-repeat center right;
		background-size: cover;
	}
	.kv_photo .kv_slogan {
		box-sizing: border-box;
		width: 45%;
		padding-left: 3%;
		order: 1;
	}
	.kv_photo .kv_left {
		width: 55%;
		order: 2;
	}
	.kv_photo .kv_right { display: none; }

	/* .kv::before kv icons , */
	.kv::after /* kv ribbon  */ { top: -10%; }
	.kv_photo .kv_left::before {
		-moz-transform:scaleX(-1);
		-webkit-transform:scaleX(-1);
		-o-transform:scaleX(-1);
		transform:scaleX(-1);
	}
	.kv_photo .kv_left::before {
		-moz-transform:scaleX(-1) rotate(-10deg);
		-webkit-transform:scaleX(-1) rotate(-10deg);
		-o-transform:scaleX(-1) rotate(-10deg);
		transform:scaleX(-1) rotate(-10deg);
		right: -10%;
	}
		
	.block_01, .block_02, .block_03{
		width: 100vw;
		margin-top: 20px;
		margin-bottom: 20px;
	}
		
	.step {
		width: 100vw;
	}    
	.step img {
		width: 100%;    
	}    
		
	.block_01 img,.block_02 img ,.block_03 img{
		width: 100%;
	}	
		
	/**but**/
	.block_02 .but{}

	.block_02 .but ul li a{
		width: 37vw;    
		margin-right: 10px;	
	}
		
	.block_02 .but ul li a img{
		width: 100%; 
	}    

	/*標題hover*/
	.flip { /*width:90vw;*/width:100%; font-size: 16px; padding: 7px;}
	/* .text_wrapper{ width:95vw!important;} */
	.text_wrapper li { list-style-type: none; }
	.container { width: 100%; margin-bottom: 20px; margin-top: 10px; }
	.active div.panel {
		width: 100%;
		padding: 0.5em;
		margin: 0 auto;
	}
	.panel li, .panel01 li {
		font-size: 14px;
		line-height: 24px;
	}
	/*展開收合的按鈕*/
	.open, .close, .open01, .close01{
		left: 0vw;	
	}	
	/**footer-bg**/
	.footer-bg {
		display: none;
	}
		
	.rule_wrapper {
		padding: 10px;
		border-radius: 15px;
		font-size: 14px;
		line-height: 24px;
	}
	.rule_wrapper h2 {
		font-size: 16px;
		margin: 10px 0px 10px 10px;
	}
		
	.rule_wrapper p {
		margin-left: 4.5vw;
	}	
		
	.rule_wrapper a {
		word-wrap: break-word;
	}	
		
	.float_wrapper {
		display: none; 
		left: 100%;
	}
		
	/**M_menu_wrap**/    
	.M_menu_wrap { 
		position: fixed; 
		bottom: 0; 
		z-index: 200; 
		display: block; 
		font-size: 15px; 
	}
	.M_menu_block { 
		width: 100vw; 
		height: 110px; 
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #555), color-stop(100%, #111)); 
		box-shadow: 0px -1px 1px #333; 
	}
	.M_menu_block:after { 
		clear: both; 
		display: table; 
		content: '';
	}
		
	.M_menu_block ul { 
		overflow: hidden; 
		list-style: none;
	}
	.M_menu_block li { 
		float: left;  
		padding-top: 7px; 
		width: 25vw; 
		height: 55px; 
		border-top: 1px solid #999; 
		border-right: 1px solid #666; 
		border-left: 1px solid #222; 
		text-align: center; 
	}
		
	.M_menu_block li.highlight{
		width: 100vw;
	}    
		
	.M_menu_block li a { 
		color: #fff; 
		display: inline-block; 
		font-size: 18px; 
		line-height: 20px; 
		font-weight: 700;
	}
	.M_menu_block li.highlight a { 
		color: #ff726b;
		line-height: 37px;
	}	
	.m_but {
		background-color: #910002;
	}
	.bk_mask { 
		position: fixed; 
		top: 0; 
		z-index: 100; 
		display: none; 
		width: 100vw; 
		height: 100vh; 
		background: rgba(0,0,0,.8); 
	}

	.pc_mode { display: none; }
	.m_mode { display: block; }	
	
}

@media screen and (max-width:321px) {
	.kv_photo { max-height: 200px; }
}