/* 탭 전체 스타일 */
.plan_tab {margin:0 auto 50px auto; padding-bottom: 40px; display: flex; flex-wrap: wrap; justify-content: center;}

/* 탭 스타일 */
.plan_tab_item {font-size: 16px; text-align: center; color: #333333; background: url('../img/event/plan_tab_off.png') no-repeat; width: 207px; min-height: 207px; transition: all 0.3s; cursor: pointer; position:relative; display: flex; justify-content: center; align-items: center; margin-left: 50px !important; background-position: center !important; background-repeat: no-repeat !important;}
.plan_tab_item a {display: flex; width: 100%; height: 100%; align-items: center; justify-content: center;}
.plan_tab_item a >p{padding-top: 20px; font-size: 22px; line-height: 1.3; font-weight: 700}
.hover_arrow{display: none; padding-top: 30px; position: absolute; bottom: -30%;}
.plan_tab_item:hover .hover_arrow{display: block;}
.plan_tab_item01{margin-left: 0 !important;}
.plan_tab_item01:hover{background: url('../img/event/plan_tab_on01.png')}
.plan_tab_item02:hover{background: url('../img/event/plan_tab_on02.png')}
.plan_tab_item03:hover{background: url('../img/event/plan_tab_on03.png')}

/* 선택된 탭 스타일 */
.plan_tab_item01.on {background: url('../img/event/plan_tab_on01.png')}
.plan_tab_item02.on {background: url('../img/event/plan_tab_on02.png')}
.plan_tab_item03.on {background: url('../img/event/plan_tab_on03.png')}
.tab_logo{position:absolute; top: -10px; left:-10px;}
.tab_logo strong{font-size: 25px; border-bottom: 2px solid #000;}
/*
.plan01_bg.sub-bg{background: url('../img/event/plan01_back.png') center top no-repeat !important;}
.plan02_bg.sub-bg{background: url('../img/event/plan02_back.png') center top no-repeat !important;}
.plan03_bg.sub-bg{background: url('../img/event/plan03_back.png') center top no-repeat !important;}
*/

.spec01{display: flex; justify-content:center; margin-top: 30px; flex-wrap: wrap;}
.spec01 > ul{display: flex; align-items: center; margin-right: 50px; color:#fff;}
.spec01 > ul:last-child{margin-right: 0;}
.spec01 > ul li img{display: block;}
.spec01 > ul li{margin-right: 15px; font-size: 24px; font-weight: 600}
.spec01 > ul li:last-child{margin-right: 0px; font-weight: 300; font-size: 18px; border-left: 1px solid #fff; line-height:1; padding-left: 15px;}

.event .visual.plan_visual{background: url('../img/event/visual_back.png') center center no-repeat !important; height: auto; padding:100px 0}


.event-title .yag_logo{background:#000; padding: 15px 35px; border-radius: 50px; display: inline-block; margin: 0 auto}
.event-title .yag_logo img{display: block;}
.sub_title{text-align: center; font-size: 40px; margin: 20px 0 60px 0}

.event_section{background: url('../img/event/plan_back_section2.png') center center no-repeat; padding: 170px 0;}
.event_section .es_top{display: flex; align-items: center;}
.event_section .es_top span{width: 100%; height: 1px; background:#000; margin-left: 20px;}

.coupon_box{display: flex; justify-content: space-between;}
.coupon_box .coupon_list h2{font-size:60px; margin:10px 0 30px 0; padding-left: 50px;}
.coupon_box .coupon_list h2 span{font-weight: 500}
.coupon_box .coupon_list ul li{margin-bottom: 15px; display: flex; align-items: center; flex-wrap: wrap; cursor: pointer;}
.coupon_box .coupon_list ul li:last-child{margin-bottom: 0px;}
.coupon_box .coupon_list ul li .cp_logo_box{width: 70px;height: 70px; background: #fff; border-radius: 70px; display: flex; overflow: hidden;}
.coupon_box .coupon_list ul li .cp_logo_box img{object-fit: none; width: 100%; margin-left: 15px;}
.coupon_box .coupon_list ul li span{font-size: 20px; font-weight: 900; margin-left: 15px;}
.coupon_box .coupon_list ul li span br{display: none;}
.coupon_box .coupon_list:last-child{text-align: right;}
.coupon_box .coupon_list:last-child h2{padding-right: 50px;}

.pick_img{position: relative;}
.pick_img:after{position: absolute; left: -70px; top: -50px; content: ''; display: block; background:url('../img/event/yag_pick.png'); width: 23px; height: 370px;}


@media all and (max-width:1280px) {
    .event .visual.plan_visual{background-size: contain !important; padding: 70px 0;}
    .event-title>h2{font-size: 55px}
    .event-title .yag_logo{padding: 10px 25px;}
    
    .sub_title{font-size: 35px;}
    
    .spec01 > ul{width: 100%; justify-content: center;}
    .spec01 > ul li:first-child{width: 50px;}
    
    .coupon_box .coupon_list h2{font-size: 45px;}
}

@media all and (max-width:770px) {
    .event .visual.plan_visual{padding: 20px; background-position: center bottom !important; margin-bottom: 50px;}
    .event-title>h2{font-size: 30px;}
    
    .sub_title{font-size: 25px; margin: 0 0 30px 0}
    
    .plan_tab{padding: 0 20px; justify-content: space-between;}
    .plan_tab li{width: calc(100%/3 - 20px); margin: 0 !important; background-size: 100%; max-width: 207px;}
    .plan_tab li.on{background-size:100%;}
    
    .tab_logo{top: 0; left: 0;}
    .tab_logo > div{width: 60px;}
    .tab_logo > div img{width:100%;}
    .tab_logo strong{font-size: 19px;}
    .plan_tab_item a >p{padding:0; font-size: 17px;}
    
    .spec01 > ul li{font-size: 20px;}
    .spec01 > ul li:first-child{width: 45px;}
    .spec01 > ul li:last-child{font-size: 15px;}
    
    .coupon_box .coupon_list h2{font-size: 30px;}
    .coupon_box .coupon_list ul li span{font-size: 16px; margin-left: 10px;}
    .coupon_box .coupon_list ul li img{width: 40px;}
    .event_section .es_top{width: 120px;}
}

@media all and (max-width:600px) {
    .event_section .es_top{width: 90px; margin: 0 auto;}
    .coupon_box{display: flex; justify-content: space-between;}
    .coupon_box .coupon_list h2{font-size: 20px; padding: 0 !important; text-align: center;}
    .coupon_box .coupon_list{width: calc(100%/2 - 5px);}
    .coupon_box .coupon_list ul{display: flex; align-items: center; flex-wrap: wrap;}
    .coupon_box .coupon_list ul li{display: flex; flex-wrap: wrap; justify-content: center; text-align: center; background:rgba(255,255,255,0.7); padding: 10px; border-radius: 10px; position: relative; width: 100%; margin-bottom: 30px;}
    .coupon_box .coupon_list ul li span{width: 100%; display: block; padding-top: 10px;}
    .coupon_box .coupon_list ul li span br{display: block;}
}

@media all and (max-width:500px) {
    .sub_title{margin: 0}
    
    .plan_tab li{width: calc(100%/3 - 10px);}
    .plan_tab_item a >p{font-size: 14px;}
    .tab_logo{transform: translateY(60%);}
    .tab_logo > div{width: 40px;}
    .tab_logo strong{font-size: 17px; transform: translateY(-5px); display: block;}
    
    .spec01 > ul li{font-size: 16px; margin-right: 10px;}
    .spec01 > ul li:first-child{width: 35px;}
    .spec01 > ul li:last-child{font-size: 14px; padding-left: 10px;}
}



/* 레이어팝업 */
.layer_style{position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; z-index: 10000000}
.layer_style .mask{width: 100%; height: 100%; position: absolute; background:rgba(0,0,0,0.3)}
.layer_style .layer_inner{max-width: 600px; max-height: 80vh; width: 100%; margin: 10px auto; background: #fff; z-index: 10; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); padding: 30px 30px 50px 30px;}
.layer_style .layer_inner .layer_head{display: flex; justify-content: space-between; margin-bottom: 20px;}
.layer_style .layer_inner .layer_head h3{font-size:20px;}

.coupon_layer{text-align: center;}
.coupon_layer.layer_style .layer_inner{background: #e3e3e3;}
.coupon_name{font-size: 30px; margin-bottom: 15px;}
.coupon_txt{ display: inline-block}
.coupon_txt li{position: relative; text-align: left; padding-left: 10px; width: 100%;}
.coupon_txt li span{width: 3px; height: 3px; border-radius: 50px; background:#000; display: inline-block; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}

@media all and (max-width:770px) {
    .coupon_name{font-size: 20px;}
    .layer_style .layer_inner{padding: 20px 20px 40px 20px; width: calc(100% - 20px); margin: 0 auto;}
    .layer_style .layer_inner .layer_head{margin-bottom: 20px;}
    .layer_style .layer_inner .layer_head button img{width: 20px;}
}

@media all and (max-width:600px) {
}
/* //레이어팝업 */