@charset "big5";
/* CSS Document */
@import url('https://fonts.googleapis.com/earlyaccess/notosanstc.css');
body {min-width: 1200px; color: #000; font: 13px/1.6em "Century Gothic", Arial, 'Microsoft JhengHei', "蘋果儷中黑", "儷黑 Pro", "新細明體", "sans-serif";}
a {display: block; text-decoration: none; transition: .3s ease-in-out;}
:focus {outline: none;}
i {font-style: normal;}
.footer {width: 100%; margin: auto}
.display_pc, .event_pc {display: block;}
.display_m, .event_m {display: none;}
.tag_wfe {display: none;}

/*main*/
.main { position: relative; width: 100%; overflow: hidden; 
background: url("../images/kv_bg.png")no-repeat center top, url("https://www.payeasy.com.tw/pay_event/event_09/2025_21anniversary/images/main_bg.png")center top #fff;}

/*kv*/
.kv_container { position: relative; margin: auto; max-width: 1200px; height: 1000px;}
.kv_slogan { position: absolute; top: 5%; left: 25%; pointer-events:none; z-index: 4;}
.kv_but { position: absolute; top: 8%;  right: 17%; z-index: 5;}
.kv_swiper { position: absolute; top: 43%; right: 27%; z-index: 6;}
/**kv_text**/
.kv_event { position: absolute; top: 26%; left: 24%; pointer-events:none;}
.kv_left { position: absolute; top: 20.5%; left: -7.5%; z-index: 2; pointer-events:none;}
.kv_deco{ position: absolute; top: 0; left: -22%; z-index: 1; pointer-events:none; }
.kv_table{ position: absolute; top: 22%; left: -8%; z-index: 3; pointer-events:none; }
.kv_logo{ position: absolute; top: 3.5%; left: 8%; filter: drop-shadow(0px 0px 3px #4e9cff); z-index: 6;}
.kv_logo a img, .kv_event a img, .kv_but a img { transition: .3s all ease-in-out;}
.kv_pro{position: absolute; width: 505px; height: 420px; top: 390px; right: 340px; overflow: hidden; z-index: 4; transition: .3s ease-in-out;}
@media(hover:hover) {
.kv_logo a img:hover, .kv_event a img:hover{ transform: translateY(-8%); filter: brightness(1.2);}
}
.kv_but a img:hover{ transform: translateY(-3%); filter: brightness(1.2);}
.kv_logo, .kv_slogan, .kv_event{ --animate-duration: 2s;}
.kv_but{ --animate-duration: 2.5s;}

/*logo*/
.logo_wrapper {position: relative; width: 100%; height: 324px; background: url("../../all/images/logo_bg.png") no-repeat center top; display: flex;}
.logo_container {position: relative; width: 1100px; margin: auto;}
.logo_item_rota {width: 1000px; margin: 10px auto 0; overflow: hidden;}
.logo_item_rota li {text-align: center; width: 20%;  float: left; transition: .2s ease-in-out;}
.logo_item_rota a {display: block; /*border: 2px solid #ccc;*/ font-size: 17px; line-height: 40px; color: #000; border-radius: 20px; text-align: center; background: #fff;}
.logo_item_rota li:hover{transform: scale(0.97);}
.logo_item_rota a:hover {border: 2px solid #bb9a72;}
.logo_item_rota p {font-size: 15px; height: 40px; overflow: hidden;}
.logo_item_rota li.swiper-slide img {width: 80%; padding-top: 10px; }
.logo_container .swiper-button-prev, .logo_container .swiper-button-next {top: calc(10% + 80px);}
.swiper_logo .swiper-pagination {margin: auto; left: 0; right: 0; bottom: -25px;}
.swiper-pagination-bullet {background: #77cfff  !important;}

/*event*/
.event_main {position: relative; width: 1110px; margin: 30px auto; 
	display: flex;
	flex-wrap: wrap;}
.event_btn {padding: 5px;}
.swiper_card {position: relative; width: 360px; height: 240px; overflow: hidden; background: url("../images/event_card_border.png")no-repeat center top; background-size: contain;}
.swiper_card .swiper-pagination.swp2 {bottom: 7px;}
.swiper_bank {position: relative; width: 360px; height: 240px; overflow: hidden; background: url("../images/event_bank_border.png")no-repeat center top; background-size: contain;}
.swiper_bank .swiper-pagination.swp3 {bottom: 7px;}
@media (hover:hover) {
.event_btn a:hover {filter: brightness(110%); transform: scale(0.97);}
}

/**bn輪播**/
.banner_wrapper {background: url(../../all/images/bn_bg.png)no-repeat center top; width: 1224px; height: 503px; margin: auto; padding-top: 50px;}
.banner {position: relative; width: 1100px; margin: auto;}
.prod_rota_bn {width: 1000px; overflow: hidden; margin: auto;}
.prod_rota_bn img {width: 100%;}
.prod_rota_bn li a{transition: .2s ease-in-out; cursor: pointer;}
.prod_rota_bn li a:hover, .prod_rota_bn li a:visited, .prod_rota_bn li a:focus, .prod_rota_bn li a:active {transform:scale(.98); filter: brightness(110%);}
.banner_wrapper .swiper-pagination {margin: auto; left: 0; right: 0; bottom: -28px;}

/**prod**/
.pro_temp {display: none;}
.prod_wrapper {position: relative; padding-top: 70px;}
.prod_container {position: relative; z-index: 100;}
.ProductList {position: relative; z-index: 500; margin: auto; max-width: 1180px; width: 98%;}
.ProductList:after {clear: both; display: table; content: '';}
.ProductList .item {position: relative; width: 100%; text-align: center;}
.ProductList .item > a {position: relative; display: block; background: #fff; border-radius: 10px; 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: 100%; padding-bottom: 100%;}
.ProductList .ProductImg img {position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; max-width: 100%; max-height: 100%;}
@media (hover:hover) {
.ProductList .item a {transition: .3s ease-in-out;}
.ProductList .item a:hover {transform: translateY(-5px);}
}
.ProductList .ProductDesc {width: 96%; overflow: hidden; padding: 0 5px; height: 36px; color: #fff; font-weight: bold; font-size: 15px; line-height: 36px; background: linear-gradient(90deg, #f89734 0%, #ff6554 100%); margin: 2px auto; border-radius: 50px;}
.item .ProductName {overflow: hidden; padding: 4px 5px; height: 44px; color: #000; text-align: center; font-size: 15px; line-height: 20px;}
.item .ProducPrice, .item .Event_Condition {padding: 3px 2px 0 2px; color: #F00; height: 60px;}
.item .ProducPrice label {cursor: pointer;}
.item .ProducPrice i{
	display: flex;
	flex-direction: column-reverse;}
.item .ProducPrice i em span {margin: 0 10px 0 0; color: #747474;}
.item .ProducPrice .prePrice span, .item .Event_Condition i span {margin: 0 2px 0 2px; font-weight: 500; font-size: 34px; line-height: 30px;}
.item .ProducPrice i em {color: #747474; font-style: normal; font-size: 13px;}
.item .ProducPrice .price_txt {color: #F00; font-size: 15px; line-height: 26px;}

.tit_icon {padding-top: 30px; padding-bottom: 15px;}
.tit_prod_content a {font-size: 70px; line-height: 1.1em; /*letter-spacing: -2px;*/ text-align: center; font-family: 'Noto Sans TC', sans-serif; font-weight: 700; color: transparent;
    background-image: linear-gradient(to bottom, #ffffff 40%, #ffe16b 80%);
    background-clip: text;
    -webkit-filter: drop-shadow(1px 1px 4px #ee380e);}
@media (hover:hover) {
  .tit_prod_content a {transition: all .4s;}
  .tit_prod_content a:hover {transform: scale(0.97);}
}
.tit_prod_content a span.en {
    font-size: 50px;
    letter-spacing: -2px;}
.tit_prod_content a span.tc {
    font-size: 55px;
    letter-spacing: -2px;}
span.tit_havefun {
    font-size: 50px;
    line-height: 1.2;}

.tit_prod_btn {width: 150px; height: 75px; margin: auto;
    background: url(https://www.payeasy.com.tw/pay_event/event_09/2025_21anniversary/images/title/more.png) no-repeat center 15px;
    background-size: contain;}

/*主打商品*/
.ProductList .item_1, .ProductList .item_2, .ProductList .item_3, .ProductList .item_4 {margin-top: 50px; width: 25%; padding-left: 0.5em; padding-right: 0.5em;}
.tit_01 {text-align: center;}
#group_1 {padding: 0 6% 70px;}
#group_1:before {content: ''; position: absolute; top: 80px; bottom: 0; left: -10px; right: 0; margin: auto; background: url(../../all/images/hotsale-bg.png) no-repeat; width: 1200px; height: 527px; z-index: -1;}
#group_1 .ProductImg {width: calc(100% - 10px); margin-left: 5px; margin-right: 5px; margin-top: 5px; margin-bottom: 5px;}
#group_1 .item > a {border-radius: 10px;}
#group_1 .ProductDesc {background: linear-gradient(90deg, #ff8179 0%, #bb2f5c 100%);}

/**group**/
.group {position: relative; margin-bottom: 70px; padding: 20px;
  display: flex;
  flex-wrap: wrap;}

.group:nth-child(2), .group:nth-child(3), .group:nth-child(4), .group:nth-child(5), 
.group:nth-child(6), .group:nth-child(7), .group:nth-child(8) {
  display: grid;
  grid-template-columns: 19% 19% 19% 19% 19%;
  justify-content: space-evenly;
  grid-row-gap: 10px;}

.group:nth-child(3) .tit_prod, .group:nth-child(5) .tit_prod, .group:nth-child(7) .tit_prod {
  grid-column-start:5;
  grid-column-end:6;}

.group:before {content:''; display: block; position: absolute; top: 0; bottom: 6px; left: 0; right: 0; z-index: -1; margin: auto; width: 1170px; height: 797px; 
    background: url(https://www.payeasy.com.tw/pay_event/event_09/2025_21anniversary/subline/all/images/prod_bg.png) no-repeat center top;}

#group_2:before, #group_4:before, #group_6:before, #group_8:before {
    background: url(https://www.payeasy.com.tw/pay_event/event_09/2025_21anniversary/subline/all/images/prod_bg2.png) no-repeat center top;}

/**title***/
.tit {display: none; margin: auto;}
.group .tit {width: 100%; display: block;}
.group .tit_prod {position: relative; width: 100%; height: 100%;
  grid-row: 1 / 3;}

/***/
.brand_wrapper {width: 1230px; height: 660px; margin: auto; overflow: hidden; background: url("https://www.payeasy.com.tw/pay_event/event_09/2025_21anniversary/images/icon_bg.png")no-repeat center 65px;}
.brand_item {text-align: center; margin-bottom: 43px;}
.brand-main {width: 74%; margin: auto;}
.brand-slide {float: left; width: 25%;}
.brand-slide a {transition: .3s ease-in-out;}
.brand-slide a:hover {transform: scale(0.95);filter: brightness(110%);}

/*float-right*/
.float_wrapper {display: none; position: fixed; top: 120px; right: 0px; z-index: 999;}
.float_main {position: relative; width: 100px; background: rgb(0 0 0 / 64%); border-radius: 20px; padding: 20px 8px 8px; right: 7px;}
.float_tit {position: absolute; top: -60px; left: -10px;}
.go_top {display: block; cursor: pointer;}
.float_main li {color: #fff; text-align: center; font-size: 15px; line-height: 20px;}
.float_main li.highlight0 {padding-top: 3px; background:rgb(255 210 0 / 100%); border-radius: 3px; color: #272727; margin-top: 5px;}
.float_main li.highlight0 > ul {border-top: 1px dotted;}
.float_main li.highlight2 {font-size: 24px; padding-bottom: 5px; padding-left: 2px;}
.float_main li.goback a {color:yellow; margin: 5px 0; background: #b91212; border-radius: 20px;}
.float_main li a {position: relative; z-index: 500; color: #fff; cursor: pointer; font-weight: 600; padding: 4px 0;}
.float_main li a:hover {color: yellow;}
.float_main li a:after {position: absolute;  right: 51%;  bottom: 0;  left: 51%;  z-index: 1;  height: 2px;  background: yellow;  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;}
.float_main a:hover:after {right: 10%; left: 10%;}
.float_main li.catagory {width: 100%; border-bottom: 1px dotted #040333;}
.float_main li.catagory.on {background-color: #fff95a;}
.float_main li.catagory:nth-child(1n) {border-left: 1px dotted #040333;}
.float_main li.catagory a {color: #272727; background:rgb(255 255 255 / 80%);}
.float_main li.content {border-radius: 15px; background: #fd5f24; margin: 7px 0; font-size: 15px;}
.float_main li.best {border-radius: 15px; background: #1f8ec7; margin: 7px 0; font-size: 15px;}
.float_main  li.highlight {font-size: 24px;}

/*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("https://www.payeasy.com.tw/pay_event/event_09/2025_21anniversary/images/float.png") center top;}

@media screen and (max-width:1300px) {
.float_wrapper {position: fixed; top: 20px; left: -6px; z-index: 999;}     
}

@media screen and (min-width: 1025px) {
.NavArea {display: none; position: fixed; top: 0px; z-index: 999; text-align: center; font-size: 0px; width: 100%; background-color: #000; overflow-x: hidden;  
   box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.5);}
.Nav-slide.active a {/*background-color: #ffd622; border-radius: 30px;*/color:yellow;}
.Nav-wrapper {width: 1200px; margin: 0 auto; text-align: center; padding: 5px 0;
        display: flex;
        justify-content: center;
        align-items: center;}   
.Nav-wrapper li{/*width: 100%;*/ color: floralwhite; text-decoration: none; font-size: 16px; line-height: 35px; font-weight: bold; cursor: pointer; border-left: 1px solid #fff; transition: background-color 0.5s 0s ease;
    flex: auto;}
.Nav-wrapper li:last-child {border-right: 1px solid #fff;}    
.Nav-wrapper li a {position: relative; z-index: 500; color: #fff; cursor: pointer; font-weight: bold;}
.Nav-wrapper li a:hover {color: yellow; /*background-color: #ffd622; border-radius: 30px;*/ }
}


@media screen and (max-width:1024px) {
body {min-width: inherit;}
* {box-sizing: border-box;}
.gotop {background: url(https://www.payeasy.com.tw/travel/event/img/icon_top.png) no-repeat; height: 36px; position: fixed; right: 5px; width: 36px; bottom: 105px; z-index: 900; display: none;}
.gotop a {display: block; width: 48px; height: 36px;}
.header {width: 100vw}
.display_pc {display: none;}
.display_m{display: block}
	
.main {background: url("https://www.payeasy.com.tw/pay_event/event_09/2025_21anniversary/images/kv_bg_m.png")no-repeat center -2vw, url("https://www.payeasy.com.tw/pay_event/event_09/2025_21anniversary/images/main_bg.png")center top #000; padding-bottom: 100px;}

.kv_wrapper{ }
.kv_wrapper img {width: 100%;}
.kv_container {width: 100vw; height: 95vw;}
.kv_slogan {width: 75vw; top: 8vw; left: 3vw;}
.kv_but {width: 20vw; top: 7vw; left: 69vw;}
.kv_logo{display: none;}
.kv_float {display: none;}
.kv_event {display: none;}
.kv_left {display: none;}
.kv_deco{display: none;}
.kv_table{display: none;}
.kv_pro {width: 49vw; right:29vw; top: 43.4vw; height: 50vw;}
    
.logo_wrapper {width: 100vw; margin: auto; height: 27vw; background-size: 100%;}
.logo_container {width: 92vw; /*top: 4.5vw;*/}
.logo_item_rota {width: 82vw; margin: 0 auto;}
.logo_container .swiper-button-prev, .logo_container .swiper-button-next {top: calc(10% + 80px); justify-content: center;}
.swiper_logo .swiper-pagination {margin: auto; left: 0; right: 0; bottom: -17px;}	
	 
.event_main {width: 100vw; margin: 2vw auto; padding-bottom: 1vw; display: flex;  flex-wrap: nowrap; justify-content: center;}
.event_btn {padding: 0;}
.event_btn img {width: 100%;}
.swiper_card {width: 252px; height: 295px; background: url("../images/event_card_border_m.png")no-repeat center top; background-size: contain; }
.swiper_card .swiper-pagination.swp2 {}
.swiper_bank {width: 252px; height: 295px; background: url("../images/event_bank_border_m.png")no-repeat center top; background-size: contain;}
.swiper_bank .swiper-pagination.swp3 {}
	
.banner_wrapper {width: 100vw; height: 42vw; background-size: 100%; padding-top: 3.8vw;}	
.banner {width: 92vw;}
.prod_rota_bn {width: 82vw;}
.prod_rota_bn img {width: 100%;}  
	
/**prod_m**/ 
.prod_wrapper {padding-top: 20px;}
.ProductList {width: 100%}
/*.ProductList .item {width: 24vw; margin: auto;}*/
.ProductList .item {width: 23vw; margin: 0.5vw; left: 2vw;}
.ProductList .ProductImg {width: 24vw; height: 24vw; border: 0; overflow: hidden;}
.ProductList .ProductDesc {height: 36px; overflow: hidden; line-height: 36px; font-size: 14px; padding: 0 3px;}
.item .ProductName {color: #000; height: 38px; overflow: hidden; font-size: 14px; text-align: center; padding: 4px 5px; line-height: 18px;}

.group {padding: 0; margin-bottom: 50px;}
	
/**group**/
.group:nth-child(2),.group:nth-child(3), .group:nth-child(4),.group:nth-child(5),  
.group:nth-child(6),.group:nth-child(7), .group:nth-child(8), .group:nth-child(9) {
    grid-template-columns: 25% 25% 25% 25%; 
	grid-row-gap: 1vw;
    padding-bottom: 1vw;}
.group:nth-child(3) .tit_prod, .group:nth-child(5) .tit_prod, .group:nth-child(7) .tit_prod {
    grid-column-start: 1; grid-column-end: 5;}
	
.group:before {width: 100vw; height: auto; 
	background: url(/pay_event/event_09/2025_21anniversary/subline/all/images/prod_bg_m2.jpg) no-repeat center top #ffb02f; background-size: 100vw; 
	border-top: 3px solid #ffb02f; border-bottom: 3px solid #ffb02f; 
	top: -1vw; bottom: 0;}
#group_2:before, #group_4:before, #group_6:before, #group_8:before {
	background: url(/pay_event/event_09/2025_21anniversary/subline/all/images/prod_bg_m2.jpg) no-repeat center top #ffb02f; background-size: 100vw;}

	
.group .tit img {width: 100%;}	
.group .tit_prod {padding-top: 1vw; height: 18vw;
    grid-row: auto;
    grid-column: 1 / 5;}  
.tit_prod_content {width: 100vw; padding-right: 10vw;
    display: flex;
    justify-content: center;}	
.tit_icon {width: 16vw; padding-top: 1vw; padding-bottom: 0;}
.tit_prod_content img {width: 100%;}
.tit_prod_content a {position: relative; font-size: 7vw;
    display: flex;
	align-items: center;}
.tit_prod_btn {position: absolute; bottom: 1vw; right: -13vw; width: 14vw; height: 8vw;}
.tit_prod_content a span.en {display: contents;
    font-size: inherit;
    letter-spacing: 0;}
.tit_prod_content a span.tc {display: contents;
    font-size: inherit;
    letter-spacing: 0;}
.tit_prod_btn.center {bottom: 0; top: 0;}
.tit_prod_content a span.tit_havefun {font-size: inherit; line-height: 1.1em;}
 
#group_1 {padding: 0; margin-bottom: 80px;}
#group_1:before {width: 100%; height: auto; top: 11vw; left: 0; bottom: -3vw;
	background: url(https://www.payeasy.com.tw/pay_event/event_09/2025_21anniversary/images/limited_bg_m_01.png) no-repeat center top, url(https://www.payeasy.com.tw/pay_event/event_09/2025_21anniversary/images/limited_bg_m_02.png) center, url(https://www.payeasy.com.tw/pay_event/event_09/2025_21anniversary/images/limited_bg_m_03.png) no-repeat center bottom #fff;
	background-size: 100%, 100%;
	/*border-top: none; border-bottom: none;*/}
.tit_01 {width: 80vw; margin: auto;}
.ProductList .item_1, .ProductList .item_2, .ProductList .item_3, .ProductList .item_4 {margin-top: 30px; padding: 0;}
	
/***/
.brand_wrapper {width: 98vw; margin: auto; height: 50vw; background: url(../images/icon_bg.png) no-repeat center 6vw; background-size: 100%;}
.brand_wrapper img {width: 100%;}
.brand_item {width: 70vw; margin: auto;}
.brand-slide a:hover {transform: scale(1);filter: brightness(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 {white-space: nowrap; width: max-content;}
.NavArea .Nav li {z-index: 10; position: relative; float: left; padding: 0; overflow: hidden; width: auto; font-weight: inherit; text-align: center; }
.NavArea .Nav a {color: #fff; text-decoration: none; position: relative; padding: 0 12px; height: 50px; font-size: 15px; line-height: 50px; font-weight: bold; }
.Nav-slide.active a {color: yellow;}
.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) {
.main {background: url(https://www.payeasy.com.tw/pay_event/event_09/2025_21anniversary/images/kv_bg_m.png) no-repeat center top, url(https://www.payeasy.com.tw/pay_event/event_09/2025_21anniversary/images/main_bg2.png) center top #fff;
        background-size: 100%, 130%;
        padding-bottom: 100px;}
.kv_container {width: 100vw;height: 82vw;}
.kv_slogan {width: 63vw; top: 7vw; left: 9vw;}
.kv_but {width: 18vw; top: 2vw; left: 65vw;}
.kv_pro {width: 45vw; right: 29vw; top: 34.4vw; height: 50vw;}
.prod_rota {width: 48vw; right: 26vw; top: 37.4vw; height: 37.5vw;}   

.logo_wrapper {width: 100vw; background-size: cover; height: 52vw;}		
.logo_item_rota {width: 74vw;}	

.event_pc {display: none;}
.event_m {display: block;}
    
.prod_rota_bn {width: 80vw;}
.banner_wrapper .swiper-button {display: none;}
.banner_wrapper .swiper-pagination {margin: auto; left: 0; right: 0; bottom: -12px;}
	
.prod_wrapper {padding-top: 20px;}

/***/
#group_1 {margin-bottom: 70px;}
.tit_01 {width: 100vw; padding-bottom: 3vw;}
.ProductList .item_1, .ProductList .item_2, .ProductList .item_3, .ProductList .item_4 {
        margin-top: 0.5%;
        margin-bottom: 0.5%;}	
/*#group_1:before {top: 14vw; bottom: -4vw;}*/
	
.ProductList .item {width: 47vw;}  
.ProductList .ProductImg {width: 49vw; height: 49vw;}	
.item .ProducPrice .prePrice span, .item .Event_Condition i span {font-size: 24px;}
	
.group {margin-bottom: 30px;}	
.group:before, #group_2:before, #group_4:before, #group_6:before, #group_8:before {
	background: url(/pay_event/event_09/2025_21anniversary/subline/all/images/prod_bg_m2.jpg) no-repeat center top #ffb02f; background-size: 115vw;}

/**group**/
.group:nth-child(2), .group:nth-child(3), .group:nth-child(4), .group:nth-child(5), 
.group:nth-child(6), .group:nth-child(7), .group:nth-child(8), .group:nth-child(9) {
    grid-template-columns: 49% 49%;
    padding-bottom: 2vw;
    justify-content: flex-start;}
  
.group .tit_prod {
    grid-row: auto;
    grid-column: 1 / 3;
    height: 24vw;} 
	
.group:nth-child(3) .tit_prod, .group:nth-child(5) .tit_prod, .group:nth-child(7) .tit_prod {
    grid-column-start: 1; grid-column-end: 3;}

.tit_icon {width: 22vw; padding-top: 1.5vw;}
.tit_prod_content {padding-right: 13vw;}
.tit_prod_content a {font-size: 10vw;}
.tit_prod_btn {bottom: 3vw; right: -16vw; width: 17vw; height: 8vw;}
	
}

@media screen and (max-width:576px) {
.logo_wrapper {height: 62vw;}
.logo_container {width: 100vw;}
	
.event_main {margin: 4vw auto; padding-bottom: 0; height: 38vw;}
.event_btn img {width: 32vw; }
.swiper_card {width: 32vw; height: 42vw;}
.swiper_bank {width: 32vw; height: 42vw;}
  
#group_1 {margin-bottom: 40px;}	
.group .tit_prod {padding-top: 1.8vw;}	
.tit_prod_content a {font-size: 9.4vw;}
.tit_prod_btn {bottom: 2vw; right: -18vw; width: 19vw; height: 11vw;}
	
.brand_wrapper {background: none; height: auto;}	
.brand_item {width: 98vw;}
.brand-main {width: 96%;}
.brand-slide {width: 33.3%;}
	
}


@media screen and (max-width:375px) {

}

@media screen and (max-width:320px) {
.logo_container .swiper-button-prev, .logo_container .swiper-button-next {top: calc(0% + 80px);} 
.logo_item_rota p {font-size: 13px;}
.item .ProducPrice, .item .Event_Condition { padding: 0;letter-spacing: -1px;}

}