@charset "big5";
/* CSS Document */
body {min-width: 1200px; color: #333; font: 15px/1.6em "Century Gothic", Arial, 'Microsoft JhengHei', "蘋果儷中黑", "儷黑 Pro", "新細明體", "sans-serif";}
a {display: block;  text-decoration: none; transition: linear .3s;}
:focus {outline: none;}
i {font-style: normal;}
.header, .footer {text-align: center; background: #fff;}
.display_pc, .news_pc {display: block;}
.display_m, .news_m {display: none;}
.tag_wfe {display: none;}

.main_wrapper {margin: auto; position: relative; width: 100%; overflow: hidden; background: url("../images/main_bg.jpg") center top #f5ece3;}

/**kv**/
.kv_wrapper {background: url("../images/kv_bg.png") no-repeat center top;}
.kv_container {position: relative; z-index: 999; margin: auto; width: 1200px; height: 570px;}
.kv_slogan {position: absolute; top: 94px; left: 192px; z-index: 4;}
.kv_box {position: absolute; top: 145px; left: -83px; z-index: 3;}
.kv_btn {position: absolute; top: 371px; left: 300px; z-index: 3;}
.kv_btn a:hover {transform:scale(.96); filter: brightness(110%);}

/*prod_rota*/
.prod_rota {position: absolute; width: 347px; height: 435px; top: 30px; right: 42px; overflow: hidden; z-index: 4; transition: .3s ease-in-out;}
.prod_rota .swiper-pagination {margin: auto; left: 0; right: 0; bottom: 0px !important;}
.swiper-pagination-bullet {background: #fefefe;}
@media (hover:hover) {
.prod_rota:hover {filter: brightness(110%); transform: scale(0.98);}
}

/**group**/
.group {position: relative; margin: 20px 0 60px 0; padding-bottom: 20px;}
.group:before {content:''; position: absolute; top: 92px; bottom: 0; left: -25px; right: 0; z-index: -1; margin: auto; width: 1200px; height: auto; 
    background: #8093c1;}

/**title***/
.tit {display: none; margin: auto;}
.group .tit {display: block!important; width: 1150px; height: 115px; text-align: center;}
.group .tit:before {content:''; position: absolute; top:58px; bottom:0; left: -25px; right: 0; z-index: -1;  width: 1200px; height: 30px; 
    background: url(../images/title_bg.png) no-repeat center top;}

#group_1 .tit, #group_2 .tit, #group_3 .tit {height: auto;}
#group_1 .tit:before, #group_2 .tit:before, #group_3 .tit:before, #group_1:before, #group_2:before, #group_3:before {
    background: none;}


/**prod**/
.pro_temp {display: none;}
.prod_wrapper {position: relative; padding-top: 0;}
.prod_container {position: relative; z-index: 100;}
.ProductList {position: relative; z-index: 500; margin: auto; width: 1150px;}
.ProductList:after {clear: both; display: table; content: '';}
.ProductList .item {position: relative; float: left; width: 220px; margin-left: 5px; margin-right: 5px; margin-bottom: 15px; text-align: center;}
.ProductList .item > a {position: relative; display: block; border-radius: 5px; overflow: hidden;
    -webkit-box-shadow: 0px 2px 2px 0px rgb(0 0 0 / 45%);
    -moz-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.45);
    box-shadow: 0px 2px 2px 0px rgb(0 0 0 / 45%);
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s;}
.ProductList .ProductImg {position: relative; overflow: hidden; margin: 0 auto; width: 220px; height: 220px;}
.ProductList .ProductImg img {position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; max-width: 100%; max-height: 100%;}
.ProductList .item > a {background: #fff;}
.ProductList .item > a:hover, .ProductList .item > a:focus, .ProductList .item > a:active {transform: translateY(-5px);}
.ProductList .ProductDesc {overflow: hidden; padding: 0 5px; height: 36px; color: #fff; font-weight: bold; font-size: 15px; line-height: 36px; background: #e98049; width: 90%; margin: 2px auto; border-radius: 50px;}
.item .ProductName {overflow: hidden; padding: 4px 5px; height: 38px; color: #000; text-align: center; font-size: 16px; line-height: 21px;}
.item .ProducPrice, .item .Event_Condition {position: relative; padding: 5px; height: 41px; color: #e34357; line-height: 1.2em; margin-top: 3px;}
.item .ProducPrice label {cursor: pointer;}
.item .ProducPrice i em span {font-size: 13px;}
.item .ProducPrice i {display: flex; flex-direction: column-reverse;}
.item .ProducPrice span, .item .Event_Condition i span {margin: 0 2px; font-weight: 500; font-size: 33px;}
.item .ProducPrice i em {color: #747474; font-style: normal; font-size: 13px;}

/*採購流程*/
.step_main, .news_main, .proposal_main {
    position: relative;
    width: 100%;
    margin: auto;
    padding-bottom: 80px;}
.tit_step {
    text-align: center;
    padding-bottom: 20px;}
.step_wrapper {width: 1000px; margin: auto; padding-top: 20px;
    display: flex;
    justify-content: space-around;}
.step {text-align: center;}
.step h3 {font-size: 28px; line-height: 1.2em; font-weight: bold; color: #b8503c; letter-spacing: 2px; font-family: 'Noto Sans TC', sans-serif;}
.step p {width: 180px; font-size: 18px; line-height: 1.2em; font-weight: bold; padding-top: 5px;}
.step_go {padding-top: 75px;}

/*成功案例*/
.tit_news {text-align: center; padding-bottom: 20px;}
.news_wrapper {width: 860px; margin: auto;
    display: flex;
    justify-content: space-around;}
.swiper_bank {position: relative; width: 860px; height: 233px; overflow: hidden; margin: auto;}
.swiper-pagination.swp2 {bottom: 15px;}


/*商品提案*/
.tit_proposal {text-align: center; padding-bottom: 20px;}
.proposal_wrapper {width: 788px; margin: auto;}

/*表單*/
.tofrom {width: 964px; margin: auto; padding-top: 40px;}

/*.consultFormContainer .consultFormWrape .consultForm .v-form .btn-consult {background: #ec7946;}*/
.consultFormContainer {padding: 30px 0; background: url("../images/bg_contact_all.jpg")no-repeat center top;}
/*.consultFormContainer .consultFormWrape {background: url("../images/bg_contact.png")no-repeat left bottom;}
.consultFormContainer .consultFormWrape .consultForm {width: 45%;}
.consultForm h3 {display: none;}
.consultFormContainer .consultFormWrape .consultForm h4 {font-size: 18px; color: #333;}
.consultFormContainer .consultFormWrape .consultForm .v-form .btn-consult {font-size: 24px; font-weight: bold;}*/

.consultForm-wrapper {width: 1170px; margin: auto; padding: 15px 0;
    display: flex;}
.contact_form {width: 580px;}

/*bg_wrapper*/
.bg_wrapper {display: none; position: absolute; width: 100%; height: 100%; top: 0; z-index:1; pointer-events: none;}
.bg_fly {top: 0; width: 100%; height: 100%; background: url("../images/float.png")center top;}

/**表單**/
.form_wrapper {width: 100%; margin: auto; height: auto; text-align: center;}

@media screen and (min-width: 1025px) {
.NavArea {display: none; width: 110px; position: fixed; top: 150px; right: 8px; z-index: 999;}
.Nav-slide.active {background-color: #6b81b9;}
.Nav-slide.active a {color: #fff;}
.Nav {position: relative;}	

.float_tit {position: absolute; top:-43px; left: -5px;}
.float_main {width: 110px; opacity: 0.9; filter: alpha(opacity=90);}
.go_top {display: block; cursor: pointer;}
.Nav-wrapper {background: #d4c3aa; width: 110px; margin: -45px auto 0; padding-top: 20px; border-radius: 10px; overflow: hidden;}
.Nav-wrapper li {position: relative; font-size: 15px;text-align: center; background: transparent; margin: auto; padding: 3px 0 3px;}
.Nav-wrapper li.highlight_gotop {font-size: 24px; border-radius: 0 0 20px 20px; padding-bottom: 20px; padding-left: 2px;}
.Nav-wrapper li a {position: relative; z-index: 500; color: #5b3629; font-weight: bold; cursor: pointer; text-decoration: none;}
.Nav-wrapper li a:hover {color: #bc453d;}
.Nav-wrapper li:after {content: ""; position: absolute; z-index: 1; right: 51%; left: 51%; bottom: 0; background: #6b81b9; height: 2px;
	-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;}
.Nav-wrapper li:hover:after {right: 10%; left: 10%;}
    
.Nav-wrapper li.best a {background: #bc453d; width: 90%; margin: auto; color: #fff; border-radius: 4em; padding: 2px 0;}
.Nav-wrapper li.best.active {background: none;}
.Nav-wrapper li.best.active a{background: #6b81b9;}
    
.Nav-wrapper li.proposal {font-size: 15px; line-height: 18px; font-weight: bold; border-radius: 0px; background: #faeee0; margin: 3px 5px; margin-top: 10px;}
.Nav-wrapper li.proposal a {color: #bc453d;}
.Nav-wrapper li.proposal.active {background: #6b81b9;}
.Nav-wrapper li.proposal.active a {color: #fff;}
.Nav-wrapper li.proposal:after {background: transparent;}
    
li.Nav-slide.goform {
        position: absolute;
        left: 22px;
        bottom: -62px;
        background: #c00;
        border-radius: 4em;
        padding: 16px;}
li.Nav-slide.goform a {color: #fff;
    font-size: 20px; line-height: 1em;}
li.Nav-slide.goform span {display: block;}
li.Nav-slide.goform:hover {background: #6b81b9;}
li.Nav-slide.goform:after {background: transparent;}
    
li.highlight_gotop:after {background: none;}
}

@media screen and (max-width:1024px) {
body {width: 100vw; min-width: inherit; background: url("../images/main_bg.jpg") center top #f5ece3;}
.gotop {background: url(//www.payeasy.com.tw/pay_event/pezlib/images/icon_top.png) no-repeat;  height: 36px; position: fixed; right: 10px; width: 36px; bottom: 15px; z-index: 900; display: none;}
.gotop a {display: block; width: 48px; height: 36px; }
.header {width: 100vw; }
.display_m {display: block;}
.display_pc {display: none;}
	
.main_wrapper {width: 100vw; background-size: 100%;}
    
.kv_wrapper {width: 100vw; background-size: 171%;}
.kv_container {width: 100vw; height: 51vw; margin: 0;}
.kv_container img {width: 100%;}
.kv_slogan {width: 48vw; left: 14vw; top: 8vw;}
.kv_box {width: 17vw; left: -11vw; top: 12vw;}
.kv_btn {width: 30vw; left: 23vw; top: 32vw;}
    
.prod_rota {width: 30.5vw; right: 5vw; top: 2.5vw; height: 40vw;} 

/**group**/
.group:before {top: 9.3vw; left: 0; bottom: 10px; background-size: 100vw;}
.group .tit {width: 100vw; margin: auto; height: 11vw;} 	
.group .tit img {width: 100%;}
.group .tit:before {top:6.4vw; left: 0; width: 100vw; height: 10vw;  background-size: 100%;}
    
.tit_01, .tit_02, .tit_03, .tit_04, .tit_05, .tit_06, .tit_07, .tit_08, .tit_09 {
    width: 50vw;
    margin: auto;
}
    
/**prod_m**/
.prod_wrapper{ }  
.ProductList {width: 100vw; right: 0;}
.ProductList .item {width: 19vw; margin: 0 .5vw; margin-bottom: 10px;}  
.ProductList .ProductImg {width: 19vw; height: 19vw; border: 0;}
.ProductList .ProductDesc {height: 36px; overflow: hidden; line-height: 36px; font-size: 14px; padding: 0 3px;}
.item .ProductName {height: 34px; font-size: 14px; line-height: 18px;}
    
.step_wrapper {width: 96vw; margin: auto;}
.step_wrapper img {width: 100%;}
.step h3 {font-size: 22px;}
.step p {width: 16vw; font-size: 14px; padding-top: 3px;}
.step_go {padding-top: 7vw; padding-left: 0.5vw; padding-right: 0.5vw;}
    
.news_wrapper {width: 100%; margin: auto;}
.news_wrapper img {width: 100%;}
.swiper_bank {width: 96vw; height: auto;}
    
.proposal_wrapper { width: 96vw; margin: auto;}
.proposal_wrapper img {width: 100%;}

/*.tofrom {width: 70vw; margin: auto; padding-top: 20px;}
.tofrom img {width: 100%;}
    
.consultFormContainer .consultFormWrape {width: 100vw; background-size: 55%;}*/
    
.consultFormContainer {background-size: cover;}
.consultForm-wrapper {width: 94vw; padding-right: 2vw;
        display: flex;
        flex-direction: column;}
.contact {width: 100%;}
.contact img {width: 100%;}
.contact_form {width: 100%;}

   
/**NavArea-top**/ 
.NavArea {display: none; position: fixed; top: 0; left: 0; right: 0;z-index: 998;}
.NavArea .Nav {position: relative; margin: 0; padding: 0; overflow-x: scroll; background: #000; border-bottom: 2px solid #ccc;}
.NavArea .Nav ul {display: flex;}
.NavArea .Nav li {z-index: 10;flex: none;}
.NavArea .Nav a {color: #fff; padding: 0 15px; height: 50px; font-size: 15px; line-height: 50px; font-weight: bold;}
.NavArea li.highlight0 {display: none;}
.Nav-slide.active a {color: yellow; font-weight: bold; border-bottom: 2px solid yellow; background: #525252;}
}

@media screen and (max-width:768px) {
.news_m {display: block;}
.news_pc {display: none;}
    
/**prod_m**/
.group .tit img {width: 100%;} 
.ProductList .item {width: 49vw;}  
.ProductList .ProductImg {width: 49vw; height: 49vw;}
.item .ProducPrice, .item .Event_Condition {margin-top: 0;}
.item .ProducPrice span, .item .Event_Condition i span {font-size: 30px;}
	
.group {margin: 20px 0;}
.group:before {top: 17.5vw;}
.group .tit {width: 100vw; height: 21vw;}
.group .tit:before {height: 18vw; top: 14.2vw;}
    
.tit_01, .tit_02, .tit_03 {
        width: 60vw;
    }
.tit_04, .tit_05, .tit_06, .tit_07, .tit_08, .tit_09 {
        width: 100vw;
    }

.consultFormContainer {padding: 2vw;}
.consultFormContainer {background-size: 300% 100%;}	
.consultFormContainer .consultFormWrape {
    background: url(/beshop/pages/events/EasyPayEasy/images/bg_contact_m.png)no-repeat top center;
    background-size: 90%;
	justify-content: center;}	
.consultFormContainer .consultFormWrape .consultForm {width: 100%; margin-top: 40vw;}	
    
}

@media screen and (max-width:576px) {
.kv_container {height: 48vw;}
.tit_01, .tit_02, .tit_03 {width: 70vw;}
    
.step_main, .news_main, .proposal_main {padding-bottom: 40px;} 
    
.step_wrapper {padding-left: 7vw; padding-top: 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;}
.step {text-align: center; width: 40%; padding-bottom: 10px;}
.step_go {width: 6%; padding-top: 17vw;}
.step h3 {font-size: 22px;}
.step p {width: 100%; font-size: 15px;}
    
.news_wrapper {
    display: flex;
    flex-wrap: wrap;}
 
.tit_proposal {padding-bottom: 0;}
    
 .tofrom {width: 100vw; margin: auto; padding-top: 10px;}   
    
}

@media screen and (max-width:375px) {
.consultFormContainer .consultFormWrape {background-size: 85vw;}
.consultFormContainer .consultFormWrape .consultForm h3 {font-size: 30px}
.consultFormContainer .consultFormWrape .consultForm label h4 {margin: 0;}
.consultFormContainer .consultFormWrape .consultForm .v-form .btn-consult {font-size: 24px;}
}


@media screen and (max-width:320px) {
.item .ProducPrice i em span { font-size: 11px;}
.item .ProducPrice .price_txt { font-size: 13px;}
.item .ProducPrice span, .item .Event_Condition i span {font-size: 27px;}

}