@charset "utf-8";
*{ list-style: none; margin: 0; padding: 0; border: 0; box-sizing: border-box; text-decoration: none; font-family: "Afacad Flux", "Spoqa Han Sans Neo", sans-serif; font-weight: 400; line-height: 1; letter-spacing: -0.5px; color: #000;}
input{ outline: none; -webkit-appearance: none;}
select{ outline: none; -webkit-appearance: none;}
select::-ms-expand{ display: none;}
textarea{ outline: none; -webkit-appearance: none;}
html{ overflow-y: scroll; width: 100%; height: 100%; background: #282828;}
html.no_scroll{ overflow: hidden;}
body{ overflow: hidden; background: #FFF; -webkit-text-size-adjust: none;}

strong, b{ font-weight:bold !important; }

@media(max-width: 600px){
    html{ font-size: calc(100vw / 30);}
}




.popup_alarm{ position: fixed; z-index: 160; top: 0; right: -100%; bottom: 0; left: 100%; background: rgba(0 0 0/70%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity .2s;}
.popup_alarm .bg{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0 0 0/0.00001%);}
.popup_alarm .inner{ overflow: hidden; position: fixed; z-index: 1; top: 0; right: -400px; width: 400px; bottom: 0; background: #FFF; opacity: 0; transition: all .2s;}
.popup_alarm .inner > .head{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 9; top: 0; right: 0; left: 0; padding: 0 20px; height: 70px; background: #FFF; box-shadow: 0 1px 0 0 rgba(0 0 0/10%); font-size: 24px; font-weight: 700; color: #000;}

.popup_alarm .inner .body{ overflow: auto; position: absolute; top: 70px; right: 0; bottom: 100px; left: 0; padding: 0 30px 30px 30px;}
.popup_alarm .inner .body .menu{ display: flex; justify-content: center; align-items: center; margin: 20px 0 0 0; height: 50px; background: #f6f8fb;}
.popup_alarm .inner .body .menu a{ display: flex; justify-content: center; align-items: center; position: relative; margin: 0 20px; font-size: 15px; color: #666; cursor: pointer;}
.popup_alarm .inner .body .menu a.on{ font-weight: 700; color: #000;}
.popup_alarm .inner .body .menu a.red:before{ content: ""; display: block; position: absolute; top: -5px; right: -10px; width: 6px; height: 6px; border-radius: 50%; background: #F00;}

.popup_alarm .inner .body .list_alarm{}
.popup_alarm .inner .body .list_alarm ul{}
.popup_alarm .inner .body .list_alarm ul li{ border-bottom: 1px solid #ddd;}
.popup_alarm .inner .body .list_alarm ul li:last-child{ border-bottom: 0;}
.popup_alarm .inner .body .list_alarm ul li .wrap{ display: grid; grid-gap: 10px; padding: 30px 0; background: #FFF;}
.popup_alarm .inner .body .list_alarm ul li .wrap .head{ position: relative;}
.popup_alarm .inner .body .list_alarm ul li .wrap .head .txt{ display: flex; justify-content: space-between; align-items: center;}
.popup_alarm .inner .body .list_alarm ul li .wrap .head .txt p{ display: flex; align-items: center; font-size: 14px; font-weight: 500; color: #333; letter-spacing: 0;}
.popup_alarm .inner .body .list_alarm ul li .wrap .head .txt p:last-child{ font-size: 14px; color: #666;}
.popup_alarm .inner .body .list_alarm ul li .wrap .head .txt p .red{ display: block; margin: 0 5px 0 0; width: 6px; height: 6px; border-radius: 50%; background: #F00;}
.popup_alarm .inner .body .list_alarm ul li .wrap .text{ display: block; line-height: 1.4; font-size: 16px; color: #000;}
.popup_alarm .inner .body .list_alarm ul li .wrap .text span{ font-weight: 500; color: #F00; letter-spacing: 0;}
.popup_alarm .inner .body .list_alarm ul li .wrap .item{ display: flex; align-items: center; grid-gap: 10px; padding: 20px; background: #f6f8fb;}
.popup_alarm .inner .body .list_alarm ul li .wrap .item .img{ width: 50px; height: 50px; border-radius: 50%;}
.popup_alarm .inner .body .list_alarm ul li .wrap .item .txt{ flex: 1; padding-top: 5px;}
.popup_alarm .inner .body .list_alarm ul li .wrap .item .txt .t1{ line-height: 1; font-size: 16px; font-weight: 500; color: #000; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;}
.popup_alarm .inner .body .list_alarm ul li .wrap .item .txt .t2{ display: flex; align-items: flex-end; margin: 5px 0 0 0; font-size: 20px; color: #000;}
.popup_alarm .inner .body .list_alarm ul li .wrap .item .txt .t2 span{ padding-left: 2px; font-size: 24px; font-weight: 600; color: #F00;}
.popup_alarm .inner .body .list_alarm ul li.on .wrap{ opacity: 0.5; filter: grayscale(100%);}
.popup_alarm .inner .body .list_alarm ul li.on .wrap .head .red{ background: #DDD;}
.popup_alarm .inner .body .list_alarm.on{ display: block;}

.popup_alarm .inner > .foot{ position: absolute; z-index: 10; right: 0; bottom: 0; left: 0; padding: 20px 30px; background: #FFF; box-shadow: 0 -1px 0 0 rgba(0 0 0/10%);}
.popup_alarm .inner > .foot a{ display: flex; justify-content: center; align-items: center; height: 60px; border: 1px solid rgba(0 0 0/100%); background: rgba(0 0 0/1%); cursor: pointer; transition: all .2s;}
.popup_alarm .inner > .foot a i{ font-size: 20px; color: #000;}
.popup_alarm .inner > .foot a p{ margin: 0 0 0 10px; font-size: 16px; color: #000;}
.popup_alarm .inner > .foot a:hover{ background: #f5f5f5;}

.popup_alarm.on{ right: 0; left: 0; opacity: 1;}
.popup_alarm.on .inner{ right: 0; opacity: 1;}
@media(max-width: 600px){
    .popup_alarm .inner{ width: 300px;}
    .popup_alarm .inner > .head{ height: 60px;}
    .popup_alarm .inner .body{ top: 60px; bottom: 85px; padding: 0 20px 20px 20px;}

    .popup_alarm .inner .body .menu{ margin: 20px 0 0 0; height: 45px;}
    .popup_alarm .inner .body .menu a{ margin: 0 15px; font-size: 14px;}

    .popup_alarm .inner > .foot{ padding: 20px;}
    .popup_alarm .inner > .foot a{ height: 45px;}
    .popup_alarm .inner > .foot a i{ font-size: 14px;}
    .popup_alarm .inner > .foot a p{ font-size: 14px;}
}


/*.full_menu{ overflow: hidden; display: flex; justify-content: center; align-items: center; position: fixed; z-index: 200; top: 0; right: -100%; bottom: 0; left: 100%; background: rgba(0 0 0/70%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); opacity: 0; transition: all .3s;}*/
/*.full_menu .inner{ display: flex; justify-content: space-between; align-items: center; max-width: 1000px; width: 100%;}*/
/*.full_menu .inner .fl{ position: relative;}*/
/*.full_menu .inner .fl .menu{ display: flex; flex-direction: column; align-items: flex-start;}*/
/*.full_menu .inner .fl .menu a{ display: block; position: relative; font-size: 90px; font-weight: 900; color: #FFF; opacity: 0; transition: all .3s;}*/
/*.full_menu .inner .fl .menu a:nth-child(1){ transform: translate(100px,0); opacity: 0;}*/
/*.full_menu .inner .fl .menu a:nth-child(2){ transform: translate(150px,0); opacity: 0;}*/
/*.full_menu .inner .fl .menu a:nth-child(3){ transform: translate(200px,0); opacity: 0;}*/
/*.full_menu .inner .fl .menu a:nth-child(4){ transform: translate(250px,0); opacity: 0;}*/
/*.full_menu .inner .fl .menu a:nth-child(5){ transform: translate(300px,0); opacity: 0;}*/
/*.full_menu .inner .fl .menu a:nth-child(6){ transform: translate(350px,0); opacity: 0;}*/
/*.full_menu .inner .fl .menu a:after{ content: ""; display: block; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: #FFF; transition: all .3s;}*/
/*.full_menu .inner .fl .menu a:hover:after{ width: 100%;}*/
/*.full_menu .inner .fl .menu a.on{ color: #ffd448;}*/
/*.full_menu .inner .fl .menu a.on:after{ width: 100%; background: #ffd448;}*/
/*.full_menu .inner .fl .txt{ position: absolute; top: 0; left: 0; transform: translate(-120px,90px) rotate(-90deg); font-size: 16px; font-weight: 200; color: rgba(255 255 255/60%); letter-spacing: 0; transition: all .3s;}*/
/*.full_menu .inner .fr{ transform: translate(500px,0); opacity: 0; transition: all .3s;}*/
/*.full_menu .inner .fr .ft{ padding: 0 0 30px 0;}*/
/*.full_menu .inner .fr .ft .t1{ font-size: 16px; font-weight: 200; color: rgba(255 255 255/60%); letter-spacing: 0;}*/
/*.full_menu .inner .fr .ft .t2{}*/
/*.full_menu .inner .fr .ft .t2 a{ display: flex; align-items: center; padding: 10px 0; font-size: 30px; font-weight: 500; color: #FFF; transition: all .3s;}*/
/*.full_menu .inner .fr .ft .t2 a span{ display: flex; justify-content: center; align-items: center; margin-left: 10px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #ffd448; font-size: 20px; font-weight: 700; color: #ffd448;}*/
/*.full_menu .inner .fr .ft .t2 a:hover{ color: rgba(255 255 255/50%);}*/
/*.full_menu .inner .fr .fm{ display: flex; justify-content: flex-start; padding: 30px 0; border-top: 1px solid rgba(255 255 255/20%); border-bottom: 1px solid rgba(255 255 255/20%);}*/
/*.full_menu .inner .fr .fm a{ display: block; position: relative;}*/
/*.full_menu .inner .fr .fm a p{ font-size: 30px; font-weight: 500; color: #FFF; transition: all .3s;}*/
/*.full_menu .inner .fr .fm a p:hover{ color: rgba(255 255 255/50%);}*/
/*.full_menu .inner .fr .fb{ display: flex; flex-direction: column; align-items: flex-start; padding: 30px 0 0 0;}*/
/*.full_menu .inner .fr .fb .txt{}*/
/*.full_menu .inner .fr .fb .txt span{ display: block; margin: 20px 0 0 0;}*/
/*.full_menu .inner .fr .fb .txt span:first-child{ margin: 0;}*/
/*.full_menu .inner .fr .fb .txt span .t1{ font-size: 16px; font-weight: 200; color: rgba(255 255 255/60%);}*/
/*.full_menu .inner .fr .fb .txt span .t2{ padding: 5px 0 0 0; font-size: 24px; color: rgba(255 255 255/100%);}*/
/*.full_menu .inner .fr .fb .sns{ display: flex; align-items: center; grid-gap: 10px; margin: 20px 0 0 0;}*/
/*.full_menu .inner .fr .fb .sns a{ display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; border-radius: 50%; background: rgba(255 255 255/10%); cursor: pointer; transition: all .2s;}*/
/*.full_menu .inner .fr .fb .sns a i{ font-size: 20px; color: rgba(255 255 255/100%); transition: all .2s;}*/
/*.full_menu .inner .fr .fb .sns a:hover{ background: #ffd448;}*/
/*.full_menu .inner .fr .fb .sns a:hover i{ color: #000;}*/
/*.full_menu .close_btn{ display: flex; align-items: center; position: fixed; z-index: 300; top: 35px; right: 50px; width: 24px; height: 30px; cursor: pointer; transform: translate(0,-200px); opacity: 0; transition: all .3s;}*/
/*.full_menu .close_btn i{ font-size: 24px; color: #FFF; transition: all .3s;}*/
/*.full_menu .close_btn:hover i{ transform: rotate(180deg); color: rgba(255 255 255/50%);}*/

/*.full_menu.on{ right: 0; left: 0; opacity: 1;}*/
/*.full_menu.on .inner .fl .menu a:nth-child(1){ transform: translate(0,0); opacity: 1; transition: all 0.5s;}*/
/*.full_menu.on .inner .fl .menu a:nth-child(2){ transform: translate(0,0); opacity: 1; transition: all 0.8s;}*/
/*.full_menu.on .inner .fl .menu a:nth-child(3){ transform: translate(0,0); opacity: 1; transition: all 1.1s;}*/
/*.full_menu.on .inner .fl .menu a:nth-child(4){ transform: translate(0,0); opacity: 1; transition: all 1.4s;}*/
/*.full_menu.on .inner .fl .menu a:nth-child(5){ transform: translate(0,0); opacity: 1; transition: all 1.7s;}*/
/*.full_menu.on .inner .fl .menu a:nth-child(6){ transform: translate(0,0); opacity: 1; transition: all 2.0s;}*/
/*.full_menu.on .inner .fr{ transform: translate(0,0); opacity: 1; transition: all 1.7s;}*/
/*.full_menu.on .close_btn{ transform: translate(0,0); opacity: 1; transition: all 1.0s;}*/
/*@media(max-width: 1300px){*/
/*    .full_menu .inner{ max-width: 700px;}*/
/*    .full_menu .inner .fl .menu a{ font-size: 70px;}*/
/*    .full_menu .inner .fr{ transform: translate(400px,0);}*/
/*    .full_menu .inner .fr .ft{ padding: 0 0 20px 0;}*/
/*    .full_menu .inner .fr .ft .t2 a{ font-size: 24px;}*/
/*    .full_menu .inner .fr .fm{ padding: 20px 0;}*/
/*    .full_menu .inner .fr .fm a p{ font-size: 24px;}*/
/*    .full_menu .inner .fr .fb{ padding: 20px 0 0 0;}*/
/*    .full_menu .inner .fr .fb .txt span{ margin: 10px 0 0 0;}*/
/*    .full_menu .inner .fr .fb .txt span .t1{ font-size: 14px;}*/
/*    .full_menu .inner .fr .fb .txt span .t2{ padding: 5px 0 0 0; font-size: 16px;}*/
/*    .full_menu .inner .fr .fb .btn{ margin: 20px 0 0 0; height: 50px; font-size: 18px;}*/
/*    .full_menu .close_btn{ right: 30px;}*/
/*}*/
/*@media(max-width: 1000px){*/
/*    .full_menu .inner{ display: flex; flex-direction: column; justify-content: flex-end; grid-gap: 30px; max-width: 500px;}*/
/*    .full_menu .inner .fl{ width: 100%;}*/
/*    .full_menu .inner .fl .txt{ position: initial; padding-bottom: 5px; transform: translate(0,0); font-size: 12px; letter-spacing: 0;}*/
/*    .full_menu .inner .fl .menu a{ padding: 5px 0; font-size: 36px;}*/
/*    .full_menu .inner .fr{ width: 100%;}*/
/*    .full_menu .inner .fr .ft{ padding: 0 0 15px 0;}*/
/*    .full_menu .inner .fr .ft .t1{ padding-bottom: 5px; font-size: 12px;}*/
/*    .full_menu .inner .fr .ft .t2 a{ padding: 5px 0; font-size: 16px;}*/
/*    .full_menu .inner .fr .ft .t2 a span{ width: 20px; height: 20px; font-size: 14px;}*/
/*    .full_menu .inner .fr .fm{ padding: 15px 0;}*/
/*    .full_menu .inner .fr .fm a p{ font-size: 16px;}*/
/*    .full_menu .inner .fr .fb{ padding: 30px 0 0 0;}*/
/*    .full_menu .inner .fr .fb .txt{ display: flex; grid-gap: 30px;}*/
/*    .full_menu .inner .fr .fb .txt span{ margin: 0;}*/
/*    .full_menu .inner .fr .fb .txt span .t1{ font-size: 12px;}*/
/*    .full_menu .inner .fr .fb .txt span .t2{ padding: 5px 0 0 0; font-size: 18px;}*/
/*    .full_menu .inner .fr .fb .sns a{ width: 40px; height: 40px;}*/
/*    .full_menu .inner .fr .fb .sns a i{ font-size: 16px;}*/
/*}*/
/*@media(max-width: 600px){*/
/*    .full_menu{ align-items: flex-end; padding: 0 3rem !important;}*/
/*    .full_menu .inner{ grid-gap: 0; padding: 0 0 5rem 0;}*/
/*    .full_menu .inner .fl{ padding: 0 0 1.2rem 0; border-bottom: 1px solid rgba(255 255 255/20%);}*/
/*    .full_menu .inner .fl .txt{ padding-bottom: 0.5rem; font-size: 1rem;}*/
/*    .full_menu .inner .fl .menu a{ padding: 0.3rem 0; font-size: 2rem;}*/
/*    .full_menu .inner .fl .menu a:nth-child(1){ transform: translate(30px,0); opacity: 0;}*/
/*    .full_menu .inner .fl .menu a:nth-child(2){ transform: translate(40px,0); opacity: 0;}*/
/*    .full_menu .inner .fl .menu a:nth-child(3){ transform: translate(50px,0); opacity: 0;}*/
/*    .full_menu .inner .fl .menu a:nth-child(4){ transform: translate(60px,0); opacity: 0;}*/
/*    .full_menu .inner .fl .menu a:nth-child(5){ transform: translate(70px,0); opacity: 0;}*/
/*    .full_menu .inner .fl .menu a:nth-child(6){ transform: translate(80px,0); opacity: 0;}*/

/*    .full_menu .inner .fr{ padding: 1.2rem 0 0 0; transform: translate(90px,0);}*/
/*    .full_menu .inner .fr .ft{ padding: 0 0 1.2rem 0;}*/
/*    .full_menu .inner .fr .ft .t1{ font-size: 1rem;}*/
/*    .full_menu .inner .fr .ft .t2 a{ padding: 0.3rem 0; font-size: 1.2rem;}*/
/*    .full_menu .inner .fr .fm{ padding: 1.2rem 0;}*/
/*    .full_menu .inner .fr .fm a span{ width: 1.4rem; height: 1.4rem; font-size: 1rem;}*/
/*    .full_menu .inner .fr .fm a p{ font-size: 1.2rem;;}*/
/*    .full_menu .inner .fr .fb{ padding: 1.2rem 0 0 0;}*/
/*    .full_menu .inner .fr .fb .txt span .t1{ font-size: 1rem;}*/
/*    .full_menu .inner .fr .fb .txt span .t2{ padding: 0.3rem 0 0 0; font-size: 1.2rem;}*/

/*    .full_menu .inner .fr .fb .sns{ grid-gap: 0.5rem; margin: 1.2rem 0 0 0;}*/
/*    .full_menu .inner .fr .fb .sns a{ width: 2.4rem; height: 2.4rem;}*/
/*    .full_menu .inner .fr .fb .sns a i{ font-size: 1rem;}*/

/*    .full_menu .close_btn{ display: flex; justify-content: center; align-items: center; top: 1.6rem; right: 1rem; width: 1.6rem; height: 1.8rem;}*/
/*    .full_menu .close_btn i{ font-size: 1.6rem;}*/

/*    .full_menu.on .row .fl .menu a:nth-child(1){ transition: all 0.1s;}*/
/*    .full_menu.on .row .fl .menu a:nth-child(2){ transition: all 0.2s;}*/
/*    .full_menu.on .row .fl .menu a:nth-child(3){ transition: all 0.3s;}*/
/*    .full_menu.on .row .fl .menu a:nth-child(4){ transition: all 0.4s;}*/
/*    .full_menu.on .row .fl .menu a:nth-child(5){ transition: all 0.5s;}*/
/*    .full_menu.on .row .fl .menu a:nth-child(6){ transition: all 0.6s;}*/
/*    .full_menu.on .row .fr{ transition: all 0.7s;}*/
/*    .full_menu.on .close_btn{ transition: all 0.5s;}*/
/*}*/


.full_menu{ position: fixed; z-index: 200; top: 0; right: -100%; bottom: 0; left: 100%; background: rgba(0 0 0/0); transition: background .2s;}
.full_menu .inner{ display: flex; flex-direction: column; position: fixed; z-index: 10; top: 0; right: -300px; bottom: 0; width: 300px; background: #FFF; opacity: 1; transition: all .4s;}
.full_menu .close_btn{ display: flex; align-items: center; position: absolute; z-index: 10; top: calc(100px / 2 - 12px); right: 50px; height: 24px; cursor: pointer;}
.full_menu .close_btn i{ font-size: 24px; color: #000;}
.full_menu .gnb{ overflow: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 50px; border-top: 1px solid #e5e5e5;}
.full_menu .gnb > ul{ display: grid; grid-gap: 30px;}
.full_menu .gnb > ul > li{ display: flex; flex-direction: column; align-items: flex-start;}
.full_menu .gnb > ul > li > .head{ display: flex; justify-content: space-between; align-items: center; grid-gap: 20px; position: relative;}
.full_menu .gnb > ul > li > .head a{ display: block; position: absolute; z-index: 10; top: 0; right: 0; bottom: 0; left: 0;}
.full_menu .gnb > ul > li > .head p{ font-size: 32px; font-weight: 700; color: #000;}
.full_menu .gnb > ul > li > .head svg{ width: 12px; height: 12px; transition: all .2s;}
.full_menu .gnb > ul > li > .head svg path{ fill: #999;}
.full_menu .gnb > ul > li > ul{ display: flex; flex-direction: column; align-items: flex-start; margin: 15px 0 0 0;}
.full_menu .gnb > ul > li > ul li{}
.full_menu .gnb > ul > li > ul li a{ display: flex; align-items: center; position: relative; padding-left: 0; height: 45px; font-size: 18px; color: #666; cursor: pointer;}
.full_menu .gnb > ul > li > ul li a:hover{ color: #000;}
.full_menu .gnb > ul > li.on > .head p{ color: #ffd448;}
.full_menu .gnb > ul > li.on > .head svg path{ fill: #ffd448;}
.full_menu .gnb > ul > li > ul li.on a{ font-weight: 700; color: #ffd448;}
.full_menu .gnb > ul > li > ul li.on a:before{ color: #ffd448;}
.full_menu .close{ position: fixed; top: 0; right: 100%; bottom: 0; left: -100%; background: rgba(0 0 0/0.0001%);}
.full_menu.on{ right: 0; left: 0; background: rgba(0 0 0/70%);}
.full_menu.on .inner{ right: 0; opacity: 1;}
.full_menu.on .close{ right: 0; left: 0;}
@media(max-width: 1300px){
    .full_menu .close_btn{ right: 30px;}
}
@media(max-width: 600px){
    .full_menu .inner{ right: -20rem; width: 20rem;}
    .full_menu .close_btn{ top: calc(5rem / 2 - 0.9rem); right: 1rem; height: 1.8rem;}
    .full_menu .close_btn i{ font-size: 1.8rem;}
    .full_menu .gnb{ padding: 3rem 2rem;}
    .full_menu .gnb > ul{ grid-gap: 1rem;}
    .full_menu .gnb > ul > li > .head{ height: 3rem;}
    .full_menu .gnb > ul > li > .head p{ font-size: 2rem;}
    .full_menu .gnb > ul > li > .head svg{ width: 0.8rem; height: 0.8rem;}
    .full_menu .gnb > ul > li > ul{ margin: 0.4rem 0 0 0;}
    .full_menu .gnb > ul > li > ul li a{ height: 3rem; font-size: 1.2rem;}
}


.header{ display: flex; justify-content: space-between; align-items: center; position: fixed; z-index: 100; top: 0; right: 0; left: 0; padding: 0 50px; height: 100px; background: rgba(255 255 255/90%); backdrop-filter: blur(20px); transition: all .2s;}
.header .logo{ height: 24px;}
.header .logo img{ display: block; height: 100%;}
.header .fr{ display: flex; align-items: center; grid-gap: 30px;}
.header .menu{ display: flex; align-items: center; grid-gap: 50px;}
.header .menu .wrap{ position: relative;}
.header .menu .wrap > a{ display: flex; align-items: center; position: relative; height: 30px;}
.header .menu .wrap > a p{ font-size: 20px; font-weight: 500; color: #000;}
.header .menu .wrap.on > a p{ color: #ffd448;}
.header .menu .wrap .open{ position: absolute; top: 30px; left: -20px; padding: 10px 0; height: 0; border-radius: 10px; background: #FFF; opacity: 0; transition: all .2s;}
.header .menu .wrap .open a{ display: flex; align-items: center; padding: 0 20px; height: 0; font-size: 16px; color: #000; white-space: nowrap; opacity: 0; transition: all .2s;}
.header .menu .wrap .open a:hover{ background: #f5f5f5;}
.header .menu .wrap:hover > .open{ top: 30px; height: auto; opacity: 1; box-shadow: 0 3px 10px 0 rgba(0 0 0/10%);}
.header .menu .wrap:hover > .open a{ height: 35px; opacity: 1;}

.header .language{ margin-left: 30px;}
.header .language .inner{ position: relative;}
.header .language .head{ display: flex; align-items: center; grid-gap: 5px; height: 40px; cursor: pointer;}
.header .language .head img{ display: block; height: 24px;}
.header .language .head i{ font-size: 16px; color: #000; transition: all .2s;}
.header .language .body{ overflow: hidden; position: absolute; top: 30px; right: -25px; left: -25px; padding: 0; height: 0; transition: all .2s;}
.header .language .body:before{ content: ""; display: block; position: absolute; top: 0; left: calc(50% - 5px); width: 10px; height: 10px; background: #ffd448; transform: translate(0,4px) rotate(45deg); transition: all .2s;}
.header .language .body:after{ content: ""; display: block; position: absolute; top: 10px; right: 0; bottom: 0; left: 0; border-radius: 5px; background: #ffd448; transition: all .2s;}
.header .language .body a{ overflow: hidden; display: flex; align-items: center; position: relative; z-index: 10; margin: 1px 0; padding: 0 10px; height: 0; border-radius: 15px; transition: all .2s; cursor: pointer;}
.header .language .body a p{ font-size: 14px; font-weight: 500; color: #000; letter-spacing: 0;}
.header .language .body a:hover{ background: rgba(255 255 255/30%);}
.header .language .body a.on{ background: #FFF;}
.header .language .body a.on p{ color: #000;}
.header .language:hover .head i{ transform: rotate(180deg);}
.header .language:hover .body{ top: 40px; padding: 20px 10px 10px 10px; height: auto;}
.header .language:hover .body a{ height: 25px;}

.header .login{ display: flex; grid-gap: 30px;}
.header .login a{ display: flex; align-items: center; position: relative; width: 24px; height: 30px; cursor: pointer;}
.header .login a img{ display: block; width: 100%;}
.header .login a span{ display: flex; justify-content: center; align-items: center; position: absolute; top: -10px; right: -10px; padding: 0 5px; min-width: 18px; height: 18px; border-radius: 20px; background: #F00; font-size: 12px; color: #FFF;}

.header .full_menu_btn{ cursor: pointer;}
.header .full_menu_btn .icon{ position: relative; z-index: 10; width: 24px; height: 30px; transition: all .2s;}
.header .full_menu_btn .icon span{ display: block; position: absolute; width: 100%; height: 2px; background: #000; transition: all .2s;}
.header .full_menu_btn .icon span:nth-child(1){ top: 5px;}
.header .full_menu_btn .icon span:nth-child(2){ top: calc(50% - 1px);}
.header .full_menu_btn .icon span:nth-child(3){ bottom: 5px; width: 60%;}
.header .full_menu_btn.white .icon span{ background: #FFF;}
.header .full_menu_btn.on .icon{}
.header .full_menu_btn.on .icon span{ background: #FFF !important;}
.header .full_menu_btn.on .icon span:nth-child(1){ top: 50%; transform: rotate(45deg) translate(-6.25%,-6.25%);}
.header .full_menu_btn.on .icon span:nth-child(2){ opacity: 0;}
.header .full_menu_btn.on .icon span:nth-child(3){ bottom: 50%; transform: rotate(-45deg) translate(-6.25%,-6.25%);}
@media(max-width: 1300px){
    .header{ padding: 0 30px;}
    .header .menu{ grid-gap: 40px;}
}
@media(max-width: 1150px){
    .header .fr{ grid-gap: 30px;}
    .header .menu{ grid-gap: 30px;}
    .header .menu a p{ font-size: 18px;}
    .header .language{ margin-left: 10px;}
}
@media(max-width: 1000px){
    .header .menu{ display: none;}
}
@media(max-width: 600px){
    .header{ padding: 0 1rem; height: 5rem;}
    .header .logo{ height: 1.4rem;}

    .header .fr{ grid-gap: 1.5rem;}

    .header .language{ margin-left: 0;}
    .header .language .head{ grid-gap: 0.2rem; height: 1.8rem;}
    .header .language .head img{ height: 1.6rem;}
    .header .language .head i{ font-size: 1rem;}
    .header .language .body{ top: 1.2rem; right: -1.4rem; left: -1.4rem;}
    .header .language .body:before{ left: calc(50% - 0.2rem); width: 0.4rem; height: 0.4rem; transform: translate(0,0.2rem) rotate(45deg);}
    .header .language .body:after{ top: 0.4rem; border-radius: 0.4rem;}
    .header .language .body a{ padding: 0 0.6rem; border-radius: 2rem;}
    .header .language .body a p{ font-size: 1rem;}
    .header .language:hover .body{ top: 1.8rem; padding: 0.8rem 0.4rem 0.4rem 0.4rem;}
    .header .language:hover .body a{ height: 1.6rem;}

    .header .login a{ width: 1.6rem; height: 1.8rem;}
    
    .header .full_menu_btn .icon{ width: 1.6rem; height: 1.8rem; transition: all .2s;}
    .header .full_menu_btn .icon span:nth-child(1){ top: 0.3rem;}
    .header .full_menu_btn .icon span:nth-child(3){ bottom: 0.3rem;}
}


.footer{ margin: 120px 0 0 0; padding: 80px 0 100px 0; background: #282828;}
.footer .modle_min{ position: relative;}
.footer .ft{ display: flex; flex-direction: column; align-items: center; position: absolute; top: 0; right: 0;}
.footer .logo{ display: block; height: 120px; opacity: 0.6;}
.footer .logo img{ display: block; width: auto; height: 100%;}
.footer .sns{ display: flex; align-items: center; grid-gap: 10px; margin: 50px 0 0 0;}
.footer .sns a{ display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; border-radius: 50%; background: rgba(255 255 255/10%); cursor: pointer; transition: all .2s;}
.footer .sns a i{ font-size: 20px; color: rgba(255 255 255/60%); transition: all .2s;}
.footer .sns a:hover{ background: #ffd448;}
.footer .sns a:hover i{ color: #000;}
.footer .menu{ display: flex;grid-gap: 20px;}
.footer .menu a{ display: flex; align-items: center; grid-gap: 8px; position: relative; height: 14px; cursor: pointer;}
.footer .menu a p{ font-size: 14px; color: #FFF;}
.footer .menu a span{ display: flex; justify-content: center; align-items: center; width: 18px; height: 18px; transform: translate(0,-1px); border-radius: 50%; border: 1px solid #ffd448; font-size: 14px; color: #ffd448;}
.footer .menu .line{ display: block; width: 1px; height: 14px; background: rgba(255 255 255/20%);}
.footer .info{ display: flex; flex-wrap: wrap; grid-gap: 10px 20px; margin: 40px 0 0 0; max-width: 700px;}
.footer .info p{ line-height: 1.5; font-size: 14px; color: rgba(255 255 255/60%);}
.footer .info p b{ padding: 0 5px 0 0; font-weight: 400; color: #FFF;}
.footer .address{ display: flex; flex-wrap: wrap; grid-gap: 10px 20px; margin: 40px 0 0 0; max-width: 700px;}
.footer .address p{ width: 45%; line-height: 1.2; font-size: 14px; color: rgba(255 255 255/60%);}
.footer .address p b{ padding: 0 5px 0 0; font-weight: 400; color: #FFF;}
.footer .copy{ margin-top: 40px; font-size: 14px; color: rgba(255 255 255/60%); letter-spacing: 0;}
@media(max-width: 1300px){
}
@media(max-width: 1000px){
    .footer .ft{ align-items: center; position: initial;}
    .footer .menu{ justify-content: center; margin-top: 50px;}
    .footer .info{ justify-content: center; max-width: 100%;}
    .footer .address{ grid-gap: 1rem 0; max-width: 100%;}
    .footer .address p{ width: 50%; text-align: center;}
    .footer .address p b{ display: block; padding-bottom: 5px; text-align: center;}
    .footer .copy{ text-align: center;}
}
@media(max-width: 600px){
    .footer{ margin: 5rem 0 0 0; padding: 3rem 0 5rem 0;}
    .footer .logo{ height: 6rem;}
    .footer .sns{ grid-gap: 0.5rem; margin: 3rem 0 0 0;}
    .footer .sns a{ width: 3rem; height: 3rem;}
    .footer .sns a i{ font-size: 1.2rem;}
    .footer .menu{ flex-wrap: wrap; justify-content: center; grid-gap: 1rem; margin-top: 3rem; padding: 0 2rem;}
    .footer .menu a{ grid-gap: 0.5rem; height: 1rem;}
    .footer .menu a p{ font-size: 1rem;}
    .footer .menu a span{ width: 1rem; height: 1rem; transform: translate(0,0); font-size: 0.8rem;}
    .footer .menu .line{ display: none;}
    .footer .info{ grid-gap: 1rem; margin: 3rem 0 0 0;}
    .footer .info p{ font-size: 1rem;}
    .footer .info p b{ padding: 0 0.5rem 0 0;}
    .footer .info p.m_center{ text-align: center;}
    .footer .address{ grid-gap: 1rem 0; margin: 3rem 0 0 0;}
    .footer .address p{ font-size: 1rem;}
    .footer .address p b{ padding: 0 0 0.2rem 0;}
    .footer .copy{ margin-top: 3rem; font-size: 1rem;}
}


.quick{ display: flex; flex-direction: column; grid-gap: 10px; position: fixed; z-index: 120; bottom: 100px; right: 50px;}
.quick a{ display: flex; flex-direction: column; justify-content: center; align-items: center; width: 60px; height: 60px; border-radius: 50%; background: #ffd448; cursor: pointer;}
.quick a i{ font-size: 24px; color: #000;}
.quick a.scroll_top{ background: #FFF; box-shadow: 0 0 0 1px rgba(0 0 0/15%);}
@media(max-width: 1300px){
    .quick{ right: 20px;}
}
@media(max-width: 600px){
    .quick{ grid-gap: 0.5rem; right: 0.5rem; bottom: 3rem;}
    .quick a{ width: 3rem; height: 3rem;}
    .quick a i{ font-size: 1.2rem;}
}


.home_visual{ overflow: hidden; position: relative; height: 100vh;}
.home_visual .title{ position: absolute; z-index: 30; top: 200px; left: calc(50% - 960px); line-height: 1.2; font-size: 24px; font-weight: 700; color: #000; letter-spacing: 0; /*text-shadow: 2px 0 #FFF, -2px 0 #FFF, 0 2px #FFF, 0 -2px #FFF, 2px 2px #FFF, -2px -2px #FFF, 2px -2px #FFF, -2px 2px #FFF;*/}
.home_visual .scroll{ display: flex; justify-content: flex-start; align-items: center; grid-gap: 5px; position: absolute; z-index: 40; top: 300px; left: calc(50% - 960px); height: 2px; background: rgba(255 255 255/30%);}
.home_visual .scroll p{ font-size: 14px; font-weight: 400; color: #000; white-space: nowrap;}
.home_visual .scroll span{ overflow: hidden; display: block; position: relative; width: 140px; height: 1px; background: rgba(0 0 0 /10%);}
.home_visual .scroll span:before{ content: ""; display: block; position: absolute; top: 0; right: 100%; left: 0; height: 1px; background: #000; animation: scroll 1s infinite;}
.home_visual .scroll i{ font-size: 16px; color: #000;}
@keyframes scroll{
    0%   { left: 0; right: 100%; opacity: 0;}
    50%  { left: 0; right: 0; opacity: 1;}
    99%  { left: 100%; right: 0; opacity: 1;}
    100% { left: 0; right: 100%; opacity: 0;}
}

.home_visual .rolling{ overflow: hidden; position: absolute; top: 100px; right: 0; bottom: 100px; left: 0;}
.home_visual .rolling .swiper-wrapper{}
.home_visual .rolling .swiper-wrapper .swiper-slide{}
.home_visual .wrap{ overflow: hidden; display: flex; justify-content: center; align-items: center; position: relative; padding: 0 50px; height: 100%;}
.home_visual .wrap .text{ display: flex; flex-direction: column; align-items: flex-start; position: absolute; z-index: 20; left: calc(50% - 960px); opacity: 1; transform: translate(100px,0); transition: all .5s;}
.home_visual .wrap .text .t1{ font-size: 20px; font-weight: 300; color: #999;}
.home_visual .wrap .text .t2{ margin: 20px 0 0 0; line-height: 1.2; font-size: 80px; font-weight: 900; color: transparent; background: linear-gradient(90deg, #000, #f0f0f0); background-clip: text; -webkit-background-clip: text; /*text-shadow: 2px 0 #FFF, -2px 0 #FFF, 0 2px #FFF, 0 -2px #FFF, 2px 2px #FFF, -2px -2px #FFF, 2px -2px #FFF, -2px 2px #FFF;*/ transition: all .2s;}
.home_visual .wrap .text .btn{ display: flex; align-items: center; margin-top: 40px; padding: 0 20px; height: 40px; border-radius: 20px; border: 1px solid #000; font-size: 18px; font-weight: 400; color: #000; letter-spacing: 0; transition: all .2s; cursor: pointer;}
.home_visual .wrap .text .btn:hover{ background: rgba(0 0 0/100%); color: #ffd448;}
.home_visual .wrap .img{ display: flex; padding-left: 400px; max-width: 1920px; width: 100%; height: 100%;}
.home_visual .wrap .img .box{ overflow: hidden; display: flex; width: 100%; height: 100%;}
.home_visual .wrap .img .box .bg{ width: 100%; height: 100%; opacity: 1; transform: scale(1); transition: all .2s;}
.home_visual .wrap.on .text{ opacity: 1; transform: translate(0,0) scale(1); transition: all 2s;}
.home_visual .wrap.on .img .box .bg{ opacity: 1; transform: scale(1.1); transition: all 1s;}

.home_visual .control{ display: flex; justify-content: center; align-items: center; grid-gap: 20px; position: absolute; z-index: 30; bottom: calc(100px + 50px); left: calc(50% - 960px);}
.home_visual_prev{ cursor: pointer;}
.home_visual_prev i{ font-size: 20px; color: #000;}
.home_visual_next{ cursor: pointer;}
.home_visual_next i{ font-size: 20px; color: #000;}
.home_visual_page{ display: flex; align-items: center; grid-gap: 5px; width: auto !important; font-size: 14px; color: #ddd;}
.home_visual_page span{ display: flex; align-items: center; font-size: 14px; color: #999;}
.home_visual_page span.swiper-pagination-current{ font-size: 14px; font-weight: 500; color: #000;}
.home_visual_btn{ display: flex; justify-content: center; align-items: center; position: relative; width: 20px; height: 20px; border-radius: 50%; background: #000; cursor: pointer;}
.home_visual_btn a{ display: flex; justify-content: center; align-items: center; width: 20px; height: 20px;}
.home_visual_btn a i{ font-size: 12px; color: #FFF;}
.home_visual_btn #home_visual_start{ display: flex;}
.home_visual_btn #home_visual_stop{ display: none;}
.home_visual_btn.on #home_visual_start{ display: none;}
.home_visual_btn.on #home_visual_stop{ display: flex;}

.home_visual .scroll_down{ display: flex; align-items: center; grid-gap: 10px; position: absolute; z-index: 20; bottom: 120px; left: 50%; transform: translate(-50%,0);}
.home_visual .scroll_down svg{ width: auto; height: 18px; animation: home_visual_scroll_down 1s infinite;}
.home_visual .scroll_down svg path{ fill: #FFF;}
.home_visual .scroll_down p{ font-size: 18px; font-weight: 500; color: #FFF; letter-spacing: 0;}
@keyframes home_visual_scroll_down{
    0%   { transform: translate(0,-5px); opacity: 0;}
    50%  { transform: translate(0,5px); opacity: 1;}
    100% { transform: translate(0,-5px); opacity: 0;}
}

@media(max-width: 2020px){
    .home_visual .title{ left: 50px;}
    .home_visual .scroll{ left: 50px;}
    .home_visual .wrap .text{ left: 50px;}
    .home_visual .control{ left: 50px;}
}
@media(max-width: 1300px){
    .home_visual .title{ left: 30px;}
    .home_visual .wrap{ padding: 0 30px;}
    .home_visual .wrap .img{ padding-left: 300px;}
    .home_visual .control{ left: 30px;}
}
@media(max-width: 1000px){
    .home_visual .rolling{ top: 200px; bottom: 150px;}
    .home_visual .title{ top: 100px; right: 30px; text-align: center; line-height: 100px;}
    .home_visual .title br{ display: none;}
    .home_visual .wrap .img{ padding-left: 0;}
    .home_visual .control{ right: 30px; bottom: 100px; left: 30px; height: 50px;}
}
@media(max-width: 600px){
    .home_visual{ height: 100dvh;}
    .home_visual .rolling{ top: 10rem; bottom: 9rem;}
    .home_visual .title{ top: 5rem; right: 1rem; left: 1rem; line-height: 5rem; font-size: 1.2rem;}
    .home_visual .wrap{ padding: 0 1rem;}
    .home_visual .control{ justify-content: flex-start; right: 1rem; bottom: 6rem; left: 1rem; height: 3rem;}

    .home_visual .scroll_down{ grid-gap: 0.4rem; bottom: 11rem;}
    .home_visual .scroll_down svg{ height: 1.1rem;}
    .home_visual .scroll_down p{ font-size: 1.1rem;}
}


.home_about{ padding: 20px 0 0 0;}
.home_about .t1{ margin-bottom: 30px; font-size: 36px; font-weight: 700; color: #ffd448;}
.home_about .t2{ line-height: 1.5; font-size: 18px; color: #666;}
.home_about .t2 b{ font-weight: 700; color: #000;}
.home_about .img{ display: flex; grid-gap: 40px; margin-bottom: 60px;}
.home_about .img .wrap{ width: 25%;}
.home_about .img .wrap img{ display: block; width: 100%;}
.home_about .img .wrap:nth-child(1){ background: url(/images/na01.jpg) center/cover;}
.home_about .img .wrap:nth-child(2){ background: url(/images/na02.jpg) center/cover;}
.home_about .img .wrap:nth-child(3){ background: url(/images/na03.jpg) center/cover;}
.home_about .img .wrap:nth-child(4){ background: url(/images/na04.jpg) center/cover;}
.home_about .btn{ display: flex; justify-content: center; align-items: center; margin: 60px auto 0 auto; width: 300px; height: 60px; background: #ffd448; font-size: 18px; font-weight: 700; color: #000; cursor: pointer;}
@media(max-width: 1300px){
}
@media(max-width: 1000px){
}
@media(max-width: 600px){
    .home_about{ padding: 0;}
    .home_about .t1{ margin-bottom: 1rem; font-size: 1.8rem;}
    .home_about .t2{ font-size: 1.1rem;}
    .home_about .img{ display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 1rem; margin-bottom: 2rem;}
    .home_about .img .wrap{ width: 100%;}
    .home_about .btn{ margin: 2rem auto 0 auto; width: 14rem; height: 3.5rem; font-size: 1.2rem;}
}


.home_footer{ display: flex; justify-content: center; align-items: flex-end; position: fixed; z-index: 100; padding: 0 50px; right: 0; bottom: 0; left: 0; background: #FFF;}
.home_footer .inner{ display: flex; justify-content: space-between; align-items: center; grid-gap: 15px; position: relative; max-width: 1920px; width: 100%; height: 100px;}
.home_footer .menu{ display: flex; flex-wrap: wrap; grid-gap: 15px;}
.home_footer .menu a{ display: flex; align-items: center; grid-gap: 8px; position: relative; height: 14px;}
.home_footer .menu a p{ font-size: 13px; color: #000;}
.home_footer .menu a span{ display: flex; justify-content: center; align-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid #ffd448; font-size: 15px; color: #ffd448;}
.home_footer .menu a .head{ display: flex; align-items: center; grid-gap: 8px;}
.home_footer .menu a .body{ display: none; position: absolute; z-index: 10; left: 0; bottom: 25px; padding: 10px; border-radius: 10px; background: #333;}
.home_footer .menu a .body:before{ content: ""; display: block; position: absolute; bottom: -4px; left: 20px; width: 10px; height: 10px; background: #333; transform: translate(0,0) rotate(45deg); transition: all .2s;}
.home_footer .menu a .body .li{ display: flex; align-items: center; border-bottom: 1px solid rgba(0 0 0/10%);}
.home_footer .menu a .body .li p{ flex: 1; padding: 5px 5px; font-size: 13px; color: rgba(255 255 255/80%); white-space: nowrap;}
.home_footer .menu a .body .li p:first-child{ flex: 0 0 70px;}
.home_footer .menu a .body .li p b{ font-weight: 700; color: #ffd448;}
.home_footer .menu a .body .li:last-child{ border-bottom: 0;}
.home_footer .menu a:hover .body{ display: block;}
.home_footer .menu .line{ display: block; width: 1px; height: 14px; background: rgba(0 0 0/10%);}
.home_footer .sns{ display: flex; align-items: center; grid-gap: 10px; cursor: pointer;}
.home_footer .sns img{ display: block; height: 20px;}
.home_footer .sns p{ font-size: 13px; color: #000;}
.home_footer .copy{ font-size: 13px; color: #333;}
@media(max-width: 1300px){
    .home_footer{ padding: 0 30px;}
}
@media(max-width: 1000px){
    .home_footer .inner{ flex-direction: column; justify-content: center; align-items: center;}
}
@media(max-width: 600px){
    .home_footer{ padding: 0 1rem;}
    .home_footer .inner{ align-items: flex-start; grid-gap: 0.6rem; height: 6rem;}
    .home_footer .menu{ display: flex; flex-wrap: wrap; justify-content: flex-start; grid-gap: 0.3rem 1.2rem; max-width: 25rem;}
    .home_footer .menu a{ grid-gap: 0.5rem; height: 1rem;}
    .home_footer .menu a p{ font-size: 0.8rem;}
    .home_footer .menu a span{ width: 1rem; height: 1rem; font-size: 0.8rem;}
    .home_footer .menu .line{ height: 1rem;}
    .home_footer .menu .line:nth-child(6){ display: none;}
    .home_footer .sns{ grid-gap: 0.5rem;}
    .home_footer .sns img{ height: 1rem;}
    .home_footer .sns p{ font-size: 0.9rem;}
    .home_footer .copy{ font-size: 0.8rem;}
}



.sub_about_new{ display: grid; grid-gap: 120px;}
.sub_about_new .inner{}
.sub_about_new .inner .t1{ margin-bottom: 30px; font-size: 36px; font-weight: 700; color: #ffd448;}
.sub_about_new .inner .t2{ line-height: 1.5; font-size: 18px; color: #666;}
.sub_about_new .inner .t2 b{ font-weight: 700; color: #000;}
.sub_about_new .inner .t2 b.max{ font-size: 24px;}
.sub_about_new .inner .img_01{ display: flex; grid-gap: 40px; margin-bottom: 60px;}
.sub_about_new .inner .img_01 .wrap{ width: 25%;}
.sub_about_new .inner .img_01 .wrap img{ display: block; width: 100%;}
.sub_about_new .inner .img_01 .wrap:nth-child(1){ background: url(/images/na01.jpg) center/cover;}
.sub_about_new .inner .img_01 .wrap:nth-child(2){ background: url(/images/na02.jpg) center/cover;}
.sub_about_new .inner .img_01 .wrap:nth-child(3){ background: url(/images/na03.jpg) center/cover;}
.sub_about_new .inner .img_01 .wrap:nth-child(4){ background: url(/images/na04.jpg) center/cover;}
.sub_about_new .inner .img_02{ position: relative; margin-top: 60px; background: url(/images/na05_img.jpg) center/cover;}
.sub_about_new .inner .img_02 img{ display: block; width: 100%;}
.sub_about_new .inner .img_02 p{ position: absolute; z-index: 10; left: 0; bottom: 0; font-size: 18px; color: #ddd;}
@media(max-width: 1300px){
}
@media(max-width: 1000px){
}
@media(max-width: 600px){
    .sub_about_new{ grid-gap: 3rem;}
    .sub_about_new .inner .t1{ margin-bottom: 1rem; font-size: 1.8rem;}
    .sub_about_new .inner .t2{ font-size: 1.1rem;}
    .sub_about_new .inner .t2 b.max{ font-size: 1.3rem;}
    .sub_about_new .inner .img_01{ display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 1rem; margin-bottom: 2rem;}
    .sub_about_new .inner .img_01 .wrap{ width: 100%;}
    .sub_about_new .inner .img_02{ margin-top: 2rem;}
    .sub_about_new .inner .img_02 p{ font-size: 1.1rem;}
}




.sub_about{ position: relative;}
.sub_about .inner{ height: 700px;}
.sub_about .inner .contents{ position: absolute; top: 0; left: calc(50% - 50vw); padding: 0 50px; width: 100vw;}
.sub_about .inner .contents .logo{ position: absolute; z-index: 30; top: 50%; left: 50%; transform: translate(-50%,-50%); height: 200px;}
.sub_about .rolling{ overflow: hidden; margin: 0 auto; max-width: 1920px; width: 100%;}
.sub_about .swiper-wrapper{}
.sub_about .swiper-wrapper .swiper-slide{ display: flex; justify-content: center; background: #000;}
.sub_about .swiper-wrapper .swiper-slide .img{ max-width: 1920px; width: 100%; height: 700px; opacity: 0.6;}

.sub_about_page{ display: flex; justify-content: center; align-items: center; grid-gap: 10px; position: absolute; z-index: 30; right: 0; bottom: 30px !important; left: 0;}
.sub_about_page span{ display: block; margin: 0 !important; width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0 0 0/0); background: rgba(255 255 255/40%); opacity: 1;}
.sub_about_page span.swiper-pagination-bullet-active{ border-color: #ffd448; background: #ffd448;}
.sub_about_prev{ display: flex; justify-content: center; align-items: center; position: absolute; top: calc(50% - 25px); left: -100px; width: 50px; height: 50px; border-radius: 50%; border: 1px solid #ddd; cursor: pointer;}
.sub_about_prev i{ font-size: 18px; color: #000;}
.sub_about_next{ display: flex; justify-content: center; align-items: center; position: absolute; top: calc(50% - 25px); right: -100px; width: 50px; height: 50px; border-radius: 50%; border: 1px solid #ddd; cursor: pointer;}
.sub_about_next i{ font-size: 18px; color: #000;}

.sub_about .foot{ display: flex; grid-gap: 50px; padding: 60px 0 120px 0;}
.sub_about .foot .fl{ width: 50%;}
.sub_about .foot .fl .t1{ font-size: 24px; font-weight: 500; color: #000;}
.sub_about .foot .fl .t2{ margin-top: 10px; font-size: 40px; font-weight: 700; color: #000;}
.sub_about .foot .fr{ width: 50%; line-height: 1.4; font-size: 18px; color: #000;}
@media(max-width: 1300px){
    .sub_about .inner{ height: 600px;}
    .sub_about .inner .contents{ padding: 0 30px;}
    .sub_about .inner .contents .logo{ height: 120px;}
    .sub_about .swiper-wrapper .swiper-slide .img{ height: 600px;}
}
@media(max-width: 1000px){
    .sub_about .inner{ height: 500px;}
    .sub_about .swiper-wrapper .swiper-slide .img{ height: 500px;}
    .sub_about .foot{ display: grid;}
    .sub_about .foot .fl{ width: auto;}
    .sub_about .foot .fr{ width: auto;}
}
@media(max-width: 600px){
    .sub_about .inner{ height: 18rem;}
    .sub_about .inner .contents{ padding: 0 1rem;}
    .sub_about .inner .contents .logo{ height: 5rem;}
    .sub_about .swiper-wrapper .swiper-slide .img{ height: 18rem;}

    .sub_about_page{ grid-gap: 0.5rem; bottom: 1rem !important;}
    .sub_about_page span{ width: 0.6rem; height: 0.6rem;}

    .sub_about .foot{ grid-gap: 2rem; padding: 3rem 0 5rem 0;}
    .sub_about .foot .fl .t1{ font-size: 1.2rem;}
    .sub_about .foot .fl .t2{ margin-top: 0.5rem; font-size: 2rem;}
    .sub_about .foot .fr{ font-size: 1.1rem;}
    .br_mo{ display: block;}
}


.sub_location{ position: relative;}
.sub_location .inner{ position: relative; z-index: 10;}
.sub_location .inner .head{ font-size: 60px; font-weight: 700; color: #000;}
.sub_location .inner > .map{ padding: 10px; border: 1px solid #ddd; background: #FFF;}
.sub_location .inner > .map .box{ height: 500px; background: #FFF;}
.sub_location .inner .foot{ display: grid; margin-top: 30px;}
.sub_location .inner .foot .wrap{ display: flex; padding: 60px 0; border-bottom: 1px solid #ddd;}
.sub_location .inner .foot .wrap:last-child{ padding-bottom: 0; border-bottom: 0;}
.sub_location .inner .foot .wrap .ft{ flex: 0 0 300px; font-size: 24px; font-weight: 700; color: #000;}
.sub_location .inner .foot .wrap .fb{ flex: 1; display: grid; grid-gap: 30px;}
.sub_location .inner .foot .wrap .fb .row{}
.sub_location .inner .foot .wrap .fb .row .t1{ display: flex; align-items: center; margin-bottom: 10px; font-size: 22px; font-weight: 600; color: #000;}
.sub_location .inner .foot .wrap .fb .row .t1 i{ margin: 0 5px 5px 0; font-size: 30px;}
.sub_location .inner .foot .wrap .fb .row .t2{ position: relative; line-height: 1.4; font-size: 18px; color: #000;}
.sub_location .inner .foot .wrap .fb .row .t3{ margin-top: 10px; line-height: 1.4; font-size: 16px; color: #333;}
.sub_location .inner .foot .wrap .fb .row .t3 b{ font-weight: 700;}
.sub_location .inner .foot .wrap .fb .row .copy{ display: flex; align-items: center; grid-gap: 10px; margin-top: 10px;}
.sub_location .inner .foot .wrap .fb .row .copy p{ font-size: 18px; font-weight: 500; color: #333;}
.sub_location .inner .foot .wrap .fb .row .copy span{ display: flex; align-items: center; padding: 0 10px; height: 30px; border-radius: 5px; border: 1px solid #ddd; background: #FFF; font-size: 13px; color: #000; cursor: pointer; transition: all .2s;}
.sub_location .inner .foot .wrap .fb .row .copy span:hover{ border-color: #000; background: #000; color: #FFF;}
.sub_location .bg{ position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw;}
.sub_location.home{ padding: 120px 0 220px 0;}
@media(max-width: 1300px){
    .sub_location .inner > .map .box{ height: 400px;}
}
@media(max-width: 1000px){
}
@media(max-width: 600px){
    .sub_location .inner .head{ font-size: 3rem;}
    .sub_location .inner > .map{ padding: 0.5rem;}
    .sub_location .inner > .map .box{ height: 20rem;}
    .sub_location .inner .foot{ margin-top: 0;}
    .sub_location .inner .foot .wrap{ display: grid; padding: 3rem 0;}
    .sub_location .inner .foot .wrap:last-child{ padding-bottom: 0; border-bottom: 0;}
    .sub_location .inner .foot .wrap .ft{ flex: 1; padding-bottom: 1.5rem; font-size: 1.6rem;}
    .sub_location .inner .foot .wrap .fb{ grid-gap: 1.5rem;}
    .sub_location .inner .foot .wrap .fb .row .t1{ margin-bottom: 1rem; font-size: 1.4rem;}
    .sub_location .inner .foot .wrap .fb .row .t1 i{ margin: 0 0.2rem 0.1rem 0; font-size: 2rem;}
    .sub_location .inner .foot .wrap .fb .row .t2{ font-size: 1.1rem;}
    .sub_location .inner .foot .wrap .fb .row .t3{ margin-top: 1rem; font-size: 1.1rem;}
    .sub_location .inner .foot .wrap .fb .row .copy{ grid-gap: 0.5rem; margin-top: 1rem;}
    .sub_location .inner .foot .wrap .fb .row .copy p{ font-size: 1.1rem;}
    .sub_location .inner .foot .wrap .fb .row .copy span{ padding: 0 0.6rem; height: 2rem; border-radius: 0.5rem; font-size: 0.9rem;}
    .sub_location.home{ padding: 5rem 0 11rem 0;}
}


.sub_notice{}
.sub_notice .head{ font-size: 60px; font-weight: 700; color: #000;}
.sub_notice .modle_notice{}
@media(max-width: 1300px){
}
@media(max-width: 1000px){
}
@media(max-width: 600px){
    .sub_notice{}
    .sub_notice .head{ font-size: 3rem;}
    .sub_notice .modle_notice{}
}


.sub_rooms{}
.sub_rooms.sub{ margin-top: 120px;}
.sub_rooms .title{ padding-bottom: 40px; font-size: 60px; font-weight: 700; color: #000;}
.sub_rooms .inner{ display: flex; grid-gap: 5px; margin: 0 auto; max-width: 1920px; width: 100%;}
.sub_rooms .wrap{ overflow: hidden; position: relative; width: 33%; height: calc(100vh - 200px - 96px - 60px); transition: all .3s;}
.sub_rooms .wrap .text{ position: absolute; z-index: 10; top: 80px; left: 40px; right: 50px; transition: all .3s;}
.sub_rooms .wrap .text .t1{ font-size: 20px; color: #FFF;}
.sub_rooms .wrap .text .t2{ margin-top: 15px; font-size: 40px; font-weight: 700; color: #FFF; white-space: nowrap; transition: all .2s;}
.sub_rooms .wrap .text .t3{ margin-top: 30px; line-height: 1.4; font-size: 20px; font-weight: 400; color: #FFF; transition: all .3s;}
.sub_rooms .wrap .btn{ display: flex; justify-content: center; align-items: center; grid-gap: 20px; position: absolute; z-index: 20; bottom: 80px; left: 40px; width: 200px; height: 60px; border: 1px solid #FFF; backdrop-filter: blur(20px); opacity: 0; cursor: pointer; transition: all .2s;}
.sub_rooms .wrap .btn p{ font-size: 20px; font-weight: 700; color: #FFF; letter-spacing: 0; transition: all .2s;}
.sub_rooms .wrap .btn:hover{ border-color: #ffd448; background: #ffd448;}
.sub_rooms .wrap .btn:hover p{ color: #000;}
.sub_rooms .wrap .btn:hover svg path{ fill: #000;}
.sub_rooms .wrap .bg{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #000; transition: all .2s;}
.sub_rooms .wrap .bg .logo{ display: block; position: absolute; z-index: 1; top: 50px; right: 50px; opacity: 0; transition: all .2s;}
.sub_rooms .wrap .bg .img{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0.3; transition: all .2s;}
.sub_rooms .wrap.on{ width: 40%;}
.sub_rooms .wrap.on .text{ left: 80px;}
.sub_rooms .wrap.on .text .t2{ font-size: 50px;}
.sub_rooms .wrap.on .text .t3{ margin-top: 30px; opacity: 1;}
.sub_rooms .wrap.on .btn{ left: 80px; opacity: 1;}
.sub_rooms .wrap.on .bg .img{ opacity: 0.6;}
.sub_rooms.home{ margin-top: 120px;}
@media(max-width: 2020px){
    .sub_rooms .wrap .text .t2{ font-size: 30px;}
}
@media(max-width: 1500px){
    .sub_rooms .wrap .text .t2{ font-size: 24px;}
}
@media(max-width: 1300px){
    .sub_rooms .inner{ display: grid; grid-template-columns: repeat(1,1fr); grid-gap: 10px;}
    .sub_rooms .wrap{ width: 100% !important; height: 300px;}
    .sub_rooms .wrap .text{ top: 40px !important; left: 40px !important; right: 40px !important;}
    .sub_rooms .wrap .text .t1{ font-size: 16px;}
    .sub_rooms .wrap .text .t2{ font-size: 36px !important;}
    .sub_rooms .wrap .text .t3{ margin-top: 20px !important; font-size: 18px; font-weight: 400; opacity: 1;}
    .sub_rooms .wrap .bg .img{ opacity: 0.5 !important;}
    .sub_rooms .wrap .btn{ bottom: 40px; right: 40px; left: initial !important; width: 160px; height: 50px; opacity: 1;}
    .sub_rooms .wrap .btn p{ font-size: 18px; font-weight: 400;}
}
@media(max-width: 1000px){
    .sub_rooms .wrap{ height: 240px;}
}
@media(max-width: 600px){
    .sub_rooms.sub{ margin-top: 5rem;}
    .sub_rooms .title{ padding-bottom: 2rem; font-size: 3rem;}
    .sub_rooms .inner{ grid-gap: 0.4rem;}
    .sub_rooms .wrap{ height: 14rem;}
    .sub_rooms .wrap .text{ top: 1.5rem !important; left: 1.5rem !important; right: 1.5rem !important;}
    .sub_rooms .wrap .text .t1{ font-size: 1rem;}
    .sub_rooms .wrap .text .t2{ margin-top: 0.5rem; font-size: 2.4rem !important;}
    .sub_rooms .wrap .text .t3{ margin-top: 1rem !important; font-size: 0.9rem;}
    .sub_rooms .wrap .bg .img{ opacity: 0.5 !important;}
    .sub_rooms .wrap .btn{ bottom: 2rem; right: 2rem; width: 7rem; height: 2.4rem;}
    .sub_rooms .wrap .btn p{ font-size: 1rem;}
    .sub_rooms.home{ margin-top: 5rem;}
}


.sub_rooms_list_head_menu{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; grid-gap: 30px; padding-bottom: 60px;}
.sub_rooms_list_head_menu a{ display: block; padding-bottom: 10px; font-size: 24px; font-weight: 500; color: #999; cursor: pointer; transition: all .2s;}
.sub_rooms_list_head_menu a:hover{ color: #000;}
.sub_rooms_list_head_menu a.on{ border-bottom: 1px solid #ffd448; font-weight: 700; color: #ffd448;}
@media(max-width: 600px){
    .sub_rooms_list_head_menu{ grid-gap: 0.8rem; padding-bottom: 2rem;}
    .sub_rooms_list_head_menu a{ padding-bottom: 0.4rem; font-size: 1.2rem;}
}


.sub_rooms_list_head{}
.sub_rooms_list_head .inner{ position: relative;}
.sub_rooms_list_head .inner .contents{ display: flex; justify-content: center; align-items: center; /*position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw;*/}
.sub_rooms_list_head .title{ display: flex; flex-direction: column; justify-content: center; align-items: center; position: absolute; z-index: 10; top: 0; right: 0; bottom: 0; left: 0; padding: 0 100px;}
.sub_rooms_list_head .title .t1{ text-align: center; font-size: 24px; color: #FFF;}
.sub_rooms_list_head .title .t2{ margin-top: 20px; text-align: center; font-size: 60px; font-weight: 700; color: #FFF;}
.sub_rooms_list_head .title .t3{ margin-top: 30px; text-align: center; line-height: 1.2; font-size: 30px; font-weight: 400; color: #FFF;}
.sub_rooms_list_head .rolling{ overflow: hidden; position: relative; margin: 0 auto; /*max-width: 1920px;*/ width: 100%;}
.sub_rooms_list_head .rolling .swiper-wrapper{}
.sub_rooms_list_head .rolling .swiper-wrapper .swiper-slide{}
.sub_rooms_list_head .rolling .swiper-wrapper .swiper-slide .img{ position: relative;}
.sub_rooms_list_head .rolling .swiper-wrapper .swiper-slide .img:after{ content: ""; display: block; padding-top: 66.666%;}
.sub_rooms_list_head .rolling .swiper-wrapper .swiper-slide[data-swiper-slide-index="0"] .img:before{ content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0 0 0/50%);}
.sub_rooms_list_head_rolling_page{ display: flex; justify-content: center; align-items: center; grid-gap: 5px; position: absolute; z-index: 20; right: initial; bottom: 30px !important; left: 0; font-size: 20px; color: rgba(255 255 255/20%) !important;}
.sub_rooms_list_head_rolling_page span{ font-size: 20px; color: rgba(255 255 255/50%);}
.sub_rooms_list_head_rolling_page span.swiper-pagination-current{ color: #FFF;}
.sub_rooms_list_head_rolling_prev{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 30; bottom: 0; right: 50px; width: 50px; height: 50px; background: rgba(0 0 0/70%); cursor: pointer; transition: all .2s;}
.sub_rooms_list_head_rolling_prev i{ font-size: 18px; color: #FFF; transition: all .2s;}
.sub_rooms_list_head_rolling_prev:hover{ background: #ffd448;}
.sub_rooms_list_head_rolling_prev:hover i{ color: #000;}
.sub_rooms_list_head_rolling_next{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 30; bottom: 0; right: 0; width: 50px; height: 50px; background: rgba(0 0 0/70%); cursor: pointer; transition: all .2s;}
.sub_rooms_list_head_rolling_next i{ font-size: 18px; color: #FFF; transition: all .2s;}
.sub_rooms_list_head_rolling_next:hover{ background: #ffd448;}
.sub_rooms_list_head_rolling_next:hover i{ color: #000;}
.sub_rooms_list_head .text{ padding: 60px 0 0 0;}
.sub_rooms_list_head .text .t1{ font-size: 60px; font-weight: 700; color: #000;}
.sub_rooms_list_head .text .t2{ margin-top: 40px; line-height: 1.5; font-size: 18px; color: #666;}

.sub_rooms_list_head .info_wrap{ display: flex; grid-gap: 20px; margin-top: 20px;}
.sub_rooms_list_head .info_fl{ padding: 40px 50px; width: 50%; background: #f9f9f9;}
.sub_rooms_list_head .info_fl .tit{ font-size: 16px; font-weight: 400; color: #666;}
.sub_rooms_list_head .info_fl .txt{ margin-top: 20px; line-height: 1.8; font-size: 16px; font-weight: 400; color: #000;}
.sub_rooms_list_head .info_fl .btn{ display: flex; justify-content: center; align-items: center; margin: 40px auto 0 auto; width: 160px; height: 50px; background: #ffd448; font-size: 20px; font-weight: 700; color: #000; cursor: pointer;}

.sub_rooms_list_head .info{ display: grid; align-content: start; grid-gap: 20px; padding: 40px 50px; width: 50%; background: #f9f9f9;}
.sub_rooms_list_head .info .wrap{ display: flex;}
.sub_rooms_list_head .info .wrap .t1{ flex: 0 0 140px; line-height: 1.4; font-size: 16px; color: #666;}
.sub_rooms_list_head .info .wrap .t2{ flex: 1; line-height: 1.4; font-size: 16px; font-weight: 400; color: #000;}
@media(max-width: 1300px){
    .sub_rooms_list_head .title{ padding: 0 60px;}
}
@media(max-width: 1000px){

    .sub_rooms_list_head .info{ grid-template-columns: repeat(1,1fr);}
    .sub_rooms_list_head .info .wrap{ width: 100%;}
    .sub_rooms_list_head .info .wrap:last-child{ grid-column: 1/2;}
}
@media(max-width: 600px){
    .sub_rooms_list_head .title{ padding: 0 3rem;}
    .sub_rooms_list_head .title .t1{ font-size: 1rem;}
    .sub_rooms_list_head .title .t2{ margin-top: 1rem; font-size: 2.4rem;}
    .sub_rooms_list_head .title .t3{ margin-top: 1.5rem; font-size: 1.2rem;}

    .sub_rooms_list_head_rolling_page{ bottom: 1rem !important; left: 0; font-size: 1.1rem;}
    .sub_rooms_list_head_rolling_page span{ font-size: 1.1rem;}
    .sub_rooms_list_head_rolling_prev{ right: 3rem; width: 3rem; height: 3rem;}
    .sub_rooms_list_head_rolling_prev i{ font-size: 1.2rem;}
    .sub_rooms_list_head_rolling_next{ width: 3rem; height: 3rem;}
    .sub_rooms_list_head_rolling_next i{ font-size: 1.2rem;}

    .sub_rooms_list_head .text{ padding: 3rem 0 0 0;}
    .sub_rooms_list_head .text .t1{ font-size: 3rem;}
    .sub_rooms_list_head .text .t2{ margin-top: 2rem; font-size: 1.1rem;}

    .sub_rooms_list_head .info_wrap{ display: grid; grid-gap: 1rem; margin-top: 1rem;}
    .sub_rooms_list_head .info_fl{ padding: 2rem 1rem; width: 100%;}
    .sub_rooms_list_head .info_fl .tit{ font-size: 1rem;}
    .sub_rooms_list_head .info_fl .txt{ margin-top: 1rem; font-size: 1rem;}
    .sub_rooms_list_head .info_fl .btn{ margin: 2rem auto 0 auto; width: 100%; height: 3.5rem; font-size: 1.4rem;}

    .sub_rooms_list_head .info{ grid-gap: 1rem; padding: 2rem 1rem; width: 100%;}
    .sub_rooms_list_head .info .wrap{}
    .sub_rooms_list_head .info .wrap .t1{ flex: 0 0 5rem; padding-right: 1rem; font-size: 1rem;}
    .sub_rooms_list_head .info .wrap .t2{ font-size: 1.1rem;}
}


.sub_rooms_list{ position: relative; margin-top: 120px;}
.sub_rooms_list .title{ position: relative; z-index: 10; padding-bottom: 40px; border-bottom: 2px solid #000; font-size: 60px; font-weight: 700; color: #000;}
.sub_rooms_list .wrap{ display: flex; grid-gap: 40px; position: relative; z-index: 10; padding: 60px 0; border-bottom: 1px solid #ddd;}
.sub_rooms_list .fl{ display: block; flex: 0 0 400px; position: relative;}
.sub_rooms_list .fl iframe{ display: block; width: 400px; height: 280px;}

.sub_rooms_list_rolling{ overflow: hidden; position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
.sub_rooms_list_rolling .swiper-wrapper{}
.sub_rooms_list_rolling .swiper-wrapper .swiper-slide{}
.sub_rooms_list_rolling .swiper-wrapper .swiper-slide .img{ width: 100vw; height: 100vh;}

.sub_rooms_list_rolling_page{ display: flex; justify-content: center; align-items: center; grid-gap: 5px; position: absolute; z-index: 20; right: initial !important; bottom: 0 !important; left: 0 !important; width: 60px !important; height: 40px; background: rgba(0 0 0/0%); font-size: 14px; color: rgba(255 255 255/50%) !important;}
.sub_rooms_list_rolling_page span{ font-size: 14px; color: rgba(255 255 255/80%);}
.sub_rooms_list_rolling_page span.swiper-pagination-current{ color: #FFF;}

.sub_rooms_list_rolling_prev{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 30; bottom: 0; right: 40px; width: 40px; height: 40px; background: rgba(0 0 0/70%); cursor: pointer; transition: all .2s;}
.sub_rooms_list_rolling_prev i{ font-size: 16px; color: #FFF; transition: all .2s;}
.sub_rooms_list_rolling_prev:hover{ background: #ffd448;}
.sub_rooms_list_rolling_prev:hover i{ color: #000;}

.sub_rooms_list_rolling_next{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 30; bottom: 0; right: 0; width: 40px; height: 40px; background: rgba(0 0 0/70%); cursor: pointer; transition: all .2s;}
.sub_rooms_list_rolling_next i{ font-size: 16px; color: #FFF; transition: all .2s;}
.sub_rooms_list_rolling_next:hover{ background: #ffd448;}
.sub_rooms_list_rolling_next:hover i{ color: #000;}

.sub_rooms_list .fr{ flex: 1; display: flex; flex-direction: column; align-items: flex-start; position: relative; padding-right: 180px;}
.sub_rooms_list .fr .t1{ font-size: 30px; font-weight: 600; color: #000;}
.sub_rooms_list .fr .t2{ margin-top: 15px; font-size: 18px; color: #666;}
.sub_rooms_list .fr .t3{ display: flex; flex-direction: column; align-items: flex-start; margin-top: 20px;}
.sub_rooms_list .fr .t3 p{ line-height: 1.4; font-size: 18px; color: #333; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}
.sub_rooms_list .fr .t3 .btn{ display: flex; align-items: center; grid-gap: 5px; margin-top: 10px; font-size: 16px; color: #333; cursor: pointer;}
.sub_rooms_list .fr .t3 .btn i{ font-size: 16px; color: #333;}
.sub_rooms_list .fr .t3.on p{ -webkit-line-clamp: initial;}
.sub_rooms_list .fr .t3.on .btn i{ transform: rotate(180deg);}
.sub_rooms_list .fr .t4{ display: grid; grid-gap: 15px; margin-top: 40px;}
.sub_rooms_list .fr .t4 .row{}
.sub_rooms_list .fr .t4 .row p{ line-height: 1.4; font-size: 16px; color: #333;}
.sub_rooms_list .fr .t4 .row p span{ padding-right: 10px; font-size: 16px; font-weight: 500; color: #000; white-space: nowrap;}
.sub_rooms_list .fr .t4 .row p b{ line-height: 1.4; font-size: 16px; font-weight: 500; color: #000;}
.sub_rooms_list .fr .t4 .row font{ display: block; position: relative; margin: 8px 0 0 20px; padding-left: 15px; line-height: 1.4; font-size: 14px; color: #666;}
.sub_rooms_list .fr .t4 .row font:before{ content: ""; display: block; position: absolute; top: 5px; left: 0; width: 5px; height: 5px; border-radius: 50%; border: 1px solid #ccc;}
.sub_rooms_list .fr .button{ display: flex; justify-content: center; align-items: center; position: absolute; right: 0; bottom: 0; width: 160px; height: 50px; background: #ffd448; font-size: 20px; font-weight: 700; color: #000; cursor: pointer;}
@media(max-width: 1300px){
}
@media(max-width: 1000px){
    .sub_rooms_list .wrap{ display: block;}
    .sub_rooms_list .fl{ flex: initial;}
    .sub_rooms_list .fl iframe{ width: 100%; height: 500px;}

    .sub_rooms_list .fr{ padding: 50px 200px 0 0;}
}
@media(max-width: 600px){
    .sub_rooms_list{ margin-top: 5rem;}
    .sub_rooms_list .title{ padding-bottom: 2rem; font-size: 3rem;}
    .sub_rooms_list .wrap{ padding: 2rem 0;}
    .sub_rooms_list .fl iframe{ height: 240px;}

    .sub_rooms_list_rolling_page{ width: 5rem !important; height: 3rem; font-size: 1rem;}
    .sub_rooms_list_rolling_page span{ font-size: 1rem;}

    .sub_rooms_list_rolling_prev{ right: 3rem; width: 3rem; height: 3rem;}
    .sub_rooms_list_rolling_prev i{ font-size: 1.2rem;}

    .sub_rooms_list_rolling_next{ width: 3rem; height: 3rem;}
    .sub_rooms_list_rolling_next i{ font-size: 1.2rem;}

    .sub_rooms_list .fr{ padding: 2rem 0 0 0;}
    .sub_rooms_list .fr .t1{ font-size: 1.6rem;}
    .sub_rooms_list .fr .t2{ margin-top: 0.8rem; font-size: 1.2rem;}
    .sub_rooms_list .fr .t3{ margin-top: 1rem;}
    .sub_rooms_list .fr .t3 p{ line-height: 1.4; font-size: 18px; color: #333; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}
    .sub_rooms_list .fr .t3 .btn{ display: flex; align-items: center; grid-gap: 5px; margin-top: 10px; font-size: 16px; color: #333; cursor: pointer;}
    .sub_rooms_list .fr .t3 .btn i{ font-size: 16px; color: #333;}
    .sub_rooms_list .fr .t3.on p{ -webkit-line-clamp: initial;}
    .sub_rooms_list .fr .t3.on .btn i{ transform: rotate(180deg);}
    .sub_rooms_list .fr .t4{ grid-gap: 0.5rem; margin-top: 2rem;}
    .sub_rooms_list .fr .t4 p{ font-size: 1.1rem;}
    .sub_rooms_list .fr .t4 p span{ flex: 0 0 5rem; font-size: 1.1rem;}
    .sub_rooms_list .fr .t4 p b{ font-size: 1.1rem;}
    .sub_rooms_list .fr .button{ position: initial; margin-top: 2rem; width: 100%; height: 3.5rem; font-size: 1.4rem;}
}


/*.sub_rooms_list{ display: none; margin-top: 120px;}*/
/*.sub_rooms_list .menu{ display: flex; align-items: flex-end; grid-gap: 50px;}*/
/*.sub_rooms_list .menu a{ display: block; font-size: 24px; color: #999; letter-spacing: -1px; cursor: pointer; transition: all .2s;}*/
/*.sub_rooms_list .menu a:hover{ color: #000;}*/
/*.sub_rooms_list .menu a.on{ border-bottom: 1px solid #000; font-size: 36px; font-weight: 700; color: #000;}*/
/*.sub_rooms_list .rolling{ position: relative; margin-top: 60px;}*/
/*.sub_rooms_list .rolling .max{ overflow: hidden;}*/
/*.sub_rooms_list .rolling .max .swiper-wrapper{}*/
/*.sub_rooms_list .rolling .max .swiper-wrapper .swiper-slide{}*/
/*.sub_rooms_list .rolling .max .swiper-wrapper .swiper-slide .img{}*/
/*.sub_rooms_list .rolling .max .swiper-wrapper .swiper-slide .img:after{ content: ""; display: block; padding-top: 50%;}*/
/*.sub_rooms_list .rolling .min{ display: none; overflow: hidden; margin-top: 5px;}*/
/*.sub_rooms_list .rolling .min .swiper-wrapper{}*/
/*.sub_rooms_list .rolling .min .swiper-wrapper .swiper-slide{ width: auto;}*/
/*.sub_rooms_list .rolling .min .swiper-wrapper .swiper-slide .img{ opacity: 0.5; filter: grayscale(100%); cursor: pointer;}*/
/*.sub_rooms_list .rolling .min .swiper-wrapper .swiper-slide .img:after{ content: ""; display: block; padding-top: 50%; transition: all .2s;}*/
/*.sub_rooms_list .rolling .min .swiper-wrapper .swiper-slide.swiper-slide-thumb-active .img{ filter: grayscale(0); opacity: 1;}*/
/*.sub_rooms_list_rolling_page{ display: flex; justify-content: center; align-items: center; grid-gap: 10px; position: absolute; z-index: 30; right: 0; bottom: 30px !important; left: 0;}*/
/*.sub_rooms_list_rolling_page span{ display: block; margin: 0 !important; width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0 0 0/0); background: rgba(255 255 255/40%); opacity: 1;}*/
/*.sub_rooms_list_rolling_page span.swiper-pagination-bullet-active{ border-color: #ffd448; background: #ffd448;}*/
/*.sub_rooms_list_rolling_prev{ display: flex; justify-content: center; align-items: center; position: absolute; top: calc(50% - 25px); left: -100px; width: 50px; height: 50px; border-radius: 50%; border: 1px solid #ddd; cursor: pointer;}*/
/*.sub_rooms_list_rolling_prev i{ font-size: 18px; color: #000;}*/
/*.sub_rooms_list_rolling_next{ display: flex; justify-content: center; align-items: center; position: absolute; top: calc(50% - 25px); right: -100px; width: 50px; height: 50px; border-radius: 50%; border: 1px solid #ddd; cursor: pointer;}*/
/*.sub_rooms_list_rolling_next i{ font-size: 18px; color: #000;}*/
/*.sub_rooms_list .info{}*/
/*.sub_rooms_list .info .ft{ display: flex; justify-content: space-between; align-items: center; padding: 40px 0;}*/
/*.sub_rooms_list .info .ft .fl{}*/
/*.sub_rooms_list .info .ft .fl .t1{ font-size: 36px; font-weight: 700; color: #000;}*/
/*.sub_rooms_list .info .ft .fl .t2{ margin-top: 10px; line-height: 1.4; font-size: 18px; color: #666;}*/
/*.sub_rooms_list .info .ft .btn{ display: flex; align-items: center; padding: 0 80px; height: 80px; background: #ffd448; font-size: 24px; font-weight: 700; color: #000; cursor: pointer;}*/
/*.sub_rooms_list .info .fm{ display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 30px 0; padding: 40px 0; border-top: 1px solid #ddd;}*/
/*.sub_rooms_list .info .fm .wrap{}*/
/*.sub_rooms_list .info .fm .wrap .t1{ font-size: 18px; font-weight: 500; color: #ffd448;}*/
/*.sub_rooms_list .info .fm .wrap .t2{ margin-top: 10px; line-height: 1.4; font-size: 18px; color: #000;}*/
/*.sub_rooms_list .info .fm .wrap .t3{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 10px 0; margin-top: 10px;}*/
/*.sub_rooms_list .info .fm .wrap .t3 p{ position: relative; padding-left: 15px; line-height: 1.4; font-size: 18px; color: #000;}*/
/*.sub_rooms_list .info .fm .wrap .t3 p:before{ content: ""; display: block; position: absolute; top: 9px; left: 0; width: 4px; height: 4px; border-radius: 50%; background: #000;}*/
/*.sub_rooms_list .info .fm .wrap:nth-child(5){ grid-column: 1/5;}*/
/*.sub_rooms_list .info .fm:nth-child(3){ grid-template-columns: repeat(1,1fr);}*/
/*.sub_rooms_list .info .fm:nth-child(4){ grid-template-columns: repeat(1,1fr);}*/
/*@media(max-width: 1300px){*/
/*}*/
/*@media(max-width: 1000px){*/
/*}*/
/*@media(max-width: 600px){*/
/*}*/


.sub_service{ display: grid; border-top: 2px solid #000;}
.sub_service .wrap{ display: flex; grid-gap: 50px; padding: 60px 0; border-bottom: 1px solid #ddd;}
.sub_service .wrap .img{ width: 50%;}
.sub_service .wrap .img:after{ content: ""; display: block; padding-top: 60%;}
.sub_service .wrap .fl{ position: relative; width: 50%;}
.sub_service .wrap .fl:after{ content: ""; display: block; padding-top: 60%;}
.sub_service .wrap .fl iframe{ position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%;}
.sub_service .wrap .info{ flex: 1; padding-top: 40px;}
.sub_service .wrap .info .t1{ font-size: 20px; font-weight: 700; color: #ffd448;}
.sub_service .wrap .info .t2{ margin-top: 10px; font-size: 36px; font-weight: 700; color: #000;}
.sub_service .wrap .info .t3{ margin-top: 30px; line-height: 1.4; font-size: 18px; color: #666;}
.sub_service .wrap .info .tag{ display: flex; flex-wrap: wrap; grid-gap: 5px; margin-top: 20px;}
.sub_service .wrap .info .tag p{ display: flex; align-items: center; padding: 0 10px; height: 25px; border: 1px solid #000; font-size: 14px; color: #000;}
.sub_service .wrap .info .time{ margin-top: 20px; font-size: 16px; color: #000;}
.sub_service.home{ margin-top: 120px;}
@media(max-width: 1300px){
}
@media(max-width: 1000px){
    .sub_service .wrap .info{ padding-top: 0;}
}
@media(max-width: 600px){
    .sub_service .wrap{ display: grid; grid-gap: 1rem; padding: 2rem 0;}
    .sub_service .wrap .img{ width: auto;}
    .sub_service .wrap .fl{ width: auto;}
    .sub_service .wrap .info{ padding-top: 0;}
    .sub_service .wrap .info .t1{ font-size: 1.2rem;}
    .sub_service .wrap .info .t2{ margin-top: 0.5rem; font-size: 2.4rem;}
    .sub_service .wrap .info .t3{ margin-top: 1rem; font-size: 1.1rem;}
    .sub_service .wrap .info .tag{ grid-gap: 0.4rem; margin-top: 1.5rem;}
    .sub_service .wrap .info .tag p{ padding: 0 0.6rem; height: 1.6rem; font-size: 1rem;}
    .sub_service .wrap .info .time{ margin-top: 1.5rem; font-size: 1.1rem;}
    .sub_service.home{ margin-top: 5rem;}
}


.sub_reservation_terms{ display: flex; flex-direction: column; align-items: center;}
.sub_reservation_terms .logo{ display: none; height: 120px;}
.sub_reservation_terms .logo img{ display: block; height: 100%;}
.sub_reservation_terms .tit{ text-align: center; line-height: 1.4; font-size: 24px; font-weight: 500; color: #000;}
.sub_reservation_terms .btn_terms{ display: flex; justify-content: center; align-items: center; grid-gap: 5px; margin: 50px 0 0 0; cursor: pointer; transition: all .2s;}
.sub_reservation_terms .btn_terms i{ display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #000; font-size: 16px; color: #000;}
.sub_reservation_terms .btn_terms i.on{ border-color: #ffd448; background: #ffd448; color: #000;}
.sub_reservation_terms .btn_terms p{ font-size: 18px; font-weight: 500; color: #000; transition: all .2s;}
.sub_reservation_terms .btn_terms span{ display: flex; align-items: center; margin-left: 10px; padding: 0 10px; height: 30px; border-radius: 30px; border: 1px solid #000; font-size: 14px; color: #333; cursor: pointer;}
.sub_reservation_terms .btn_terms span:hover{ background: #f5f5f5;}
.sub_reservation_terms .btn_next{ display: flex; justify-content: center; align-items: center; grid-gap: 20px; margin: 50px 0 0 0; width: 460px; height: 70px; border-radius: 40px; background: #ffd448; cursor: pointer;}
.sub_reservation_terms .btn_next i{ font-size: 18px; color: #000;}
.sub_reservation_terms .btn_next p{ font-size: 18px; font-weight: 600; color: #000;}
.sub_reservation_terms .txt{ margin-top: 30px; text-align: center; line-height: 1.4; font-size: 18px; color: #333;}
.sub_reservation_terms .txt b{ font-weight: 500; color: #000;}
@media(max-width: 1300px){
}
@media(max-width: 1000px){
}
@media(max-width: 600px){
    .sub_reservation_terms{ width: auto;}
    .sub_reservation_terms .logo{ height: 6rem;}
    .sub_reservation_terms .tit{ font-size: 1.4rem;}
    .sub_reservation_terms .btn_terms{ margin-top: 2rem;}
    .sub_reservation_terms .btn_terms p{ font-size: 1.2rem;}
    .sub_reservation_terms .btn_next{ grid-gap: 1rem; margin-top: 2rem; width: 100%; height: 5rem;}
    .sub_reservation_terms .btn_next i{ font-size: 1.2rem;}
    .sub_reservation_terms .btn_next p{ font-size: 1.2rem;}
    .sub_reservation_terms .txt{ margin-top: 2rem; font-size: 1.1rem;}
}


.sub_reservation{}
.sub_reservation .menu{ display: grid; grid-template-columns: repeat(2,1fr); margin-bottom: 50px; padding-left: 2px;}
.sub_reservation .menu a{ display: flex; justify-content: center; align-items: center; position: relative; margin-left: -2px; height: 70px; border: 1px solid #ddd; border-bottom: 2px solid #000; background: #fafafa; cursor: pointer;}
.sub_reservation .menu a p{ font-size: 18px; color: #333;}
.sub_reservation .menu a.on{ position: relative; z-index: 1; border: 2px solid #000; background: #FFF;}
.sub_reservation .menu a.on:after{ content: ""; display: block; position: absolute; z-index: 2; right: 0; bottom: -2px; left: 0; height: 2px; background: #FFF;}
.sub_reservation .menu a.on p{ font-weight: 600; color: #000;}

.sub_reservation .title{ margin-bottom: 50px; font-size: 30px; font-weight: 700; color: #999;}
.sub_reservation .inner{}
.sub_reservation .inner p{}
@media(max-width: 1300px){
}
@media(max-width: 1000px){
}
@media(max-width: 600px){
    .sub_reservation .menu{ margin-bottom: 3rem;}
    .sub_reservation .menu a{ height: 3.5rem;}
    .sub_reservation .menu a p{ font-size: 1.1rem;}

    .sub_reservation .title{ margin-bottom: 2rem; text-align: center; font-size: 1.6rem;}
}


.sub_reservation_list{}
.sub_reservation_list .inner{ display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 20px; margin: 0 auto; max-width: 1200px;}
.sub_reservation_list .wrap{}
.sub_reservation_list .wrap .img{}
.sub_reservation_list .wrap .img:before{ content: ""; display: block; padding-top: 60%;}
.sub_reservation_list .wrap .fr{ padding: 40px; border: 1px solid #ddd; border-top: 0;}
.sub_reservation_list .wrap .fr .t1{ font-size: 16px; color: #666;}
.sub_reservation_list .wrap .fr .t2{ margin-top: 10px; font-size: 30px; font-weight: 600; color: #000;}
.sub_reservation_list .wrap .fr .t3{ margin-top: 15px; line-height: 1.2; font-size: 16px; font-weight: 400; color: #666;}
.sub_reservation_list .wrap .fr .t4{ margin-top: 15px; font-size: 14px; color: #666;}
.sub_reservation_list .wrap .fr .t4 b{ font-weight: 500; color: #666;}
.sub_reservation_list .wrap .fr .btn{ display: flex; grid-gap: 5px; margin-top: 30px;}
.sub_reservation_list .wrap .fr .btn a{ display: flex; justify-content: center; align-items: center; grid-gap: 10px; width: 100%; height: 50px; background: #ffd448; cursor: pointer; transition: all .3s;}
.sub_reservation_list .wrap .fr .btn a i{ font-size: 20px; color: #000; transition: all .3s;}
.sub_reservation_list .wrap .fr .btn a p{ font-size: 20px; color: #000; transition: all .3s;}
.sub_reservation_list .wrap .fr .btn a:hover{ background: #000;}
.sub_reservation_list .wrap .fr .btn a:hover i{ color: #FFF;}
.sub_reservation_list .wrap .fr .btn a:hover p{ color: #FFF;}
@media(max-width: 1600px){
    .sub_reservation_list .inner{ grid-template-columns: repeat(2,1fr);}
}
@media(max-width: 1300px){
}
@media(max-width: 1000px){
}
@media(max-width: 600px){
    .sub_reservation_list .inner{ grid-template-columns: repeat(1,1fr); grid-gap: 1rem;}
    .sub_reservation_list .wrap .fr{ padding: 2rem;}
    .sub_reservation_list .wrap .fr .t1{ font-size: 1rem;}
    .sub_reservation_list .wrap .fr .t2{ margin-top: 0.5rem; font-size: 1.8rem;}
    .sub_reservation_list .wrap .fr .t3{ margin-top: 1rem; font-size: 1.2rem;}
    .sub_reservation_list .wrap .fr .t4{ margin-top: 0.8rem; font-size: 1.1rem;}
    .sub_reservation_list .wrap .fr .btn{ margin-top: 1.5rem;}
    .sub_reservation_list .wrap .fr .btn a{ height: 3rem;}
    .sub_reservation_list .wrap .fr .btn a i{ font-size: 1.4rem;}
    .sub_reservation_list .wrap .fr .btn a p{ font-size: 1.4rem;}
}




.popup_sub_reservation_terms{ display: flex; justify-content: center; align-items: center; position: fixed; z-index: 300; top: -100%; right: 0; bottom: 100%; left: 0; padding: 50px;}
.popup_sub_reservation_terms .inner{ position: relative; z-index: 20; max-width: 500px; width: 100%; max-height: 600px; height: 100%; opacity: 0; transform: scale(.5); transition: opacity .5s, transform .5s;}
.popup_sub_reservation_terms .inner .close_btn{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 10; top: 10px; right: 10px; width: 40px; height: 40px; cursor: pointer;}
.popup_sub_reservation_terms .inner .close_btn i{ font-size: 24px; color: #000;}
.popup_sub_reservation_terms .inner .scroll{ overflow: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 50px; background: #FFF;}
.popup_sub_reservation_terms .inner .title{ margin: 0 0 30px 0; line-height: 1; font-size: 24px; font-weight: 700; color: #000;}
.popup_sub_reservation_terms .inner .tit{ margin-top: 40px; font-size: 20px; font-weight: 500; color: #000;}
.popup_sub_reservation_terms .inner .txt{ display: grid; grid-gap: 10px; margin-top: 15px;}
.popup_sub_reservation_terms .inner .txt p{ position: relative; padding-left: 15px; line-height: 1.4; font-size: 16px; color: #666;}
.popup_sub_reservation_terms .inner .txt p:after{ content: ""; display: block; position: absolute; top: 8px; left: 0; width: 4px; height: 4px; border-radius: 50%; background: #000;}
.popup_sub_reservation_terms .inner .modle_table{ margin-top: 15px;}
.popup_sub_reservation_terms .inner .modle_table table thead tr th{ padding: 15px 10px;}
.popup_sub_reservation_terms .inner .modle_table table tbody tr td{ padding: 15px 10px;}
.popup_sub_reservation_terms .bg{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0 0 0/70%); backdrop-filter: blur(20px);}
.popup_sub_reservation_terms.on{ top: 0; bottom: 0;}
.popup_sub_reservation_terms.on .inner{ opacity: 1; transform: scale(1);}
@media(max-width: 600px){
    .popup_sub_reservation_terms{ padding: 2rem;}
    .popup_sub_reservation_terms .inner .close_btn{ top: 0.5rem; right: 0.5rem; width: 3rem; height: 3rem;}
    .popup_sub_reservation_terms .inner .close_btn i{ font-size: 1.4rem;}
    .popup_sub_reservation_terms .inner .scroll{ padding: 2rem;}
    .popup_sub_reservation_terms .inner .title{ margin: 0 0 2rem 0; font-size: 1.6rem;}
    .popup_sub_reservation_terms .inner .tit{ margin-top: 2rem; font-size: 1.4rem;}
    .popup_sub_reservation_terms .inner .txt{ grid-gap: 1rem; margin-top: 1rem;}
    .popup_sub_reservation_terms .inner .txt p{ padding-left: 1rem; font-size: 1.1rem;}
    .popup_sub_reservation_terms .inner .txt p:after{ top: 0.5rem;}
    .popup_sub_reservation_terms .inner .modle_table{ margin-top: 1rem;}
    .popup_sub_reservation_terms .inner .modle_table table thead tr th{ padding: 1rem 0.5rem;}
    .popup_sub_reservation_terms .inner .modle_table table tbody tr td{ padding: 1rem 0.5rem;}
}




.sub_reservation_calendar{}
.sub_reservation_calendar .inner{ display: flex; grid-gap: 20px;}
.sub_reservation_calendar .inner .calendar{ display: flex; grid-gap: 50px; padding: 50px; border: 1px solid #ddd;}
.sub_reservation_calendar .inner .calendar .wrap{ width: 50%;}
.sub_reservation_calendar .inner .calendar .wrap .head{ position: relative; padding: 0 0 20px 0; border-bottom: 1px solid #DDD;}
.sub_reservation_calendar .inner .calendar .wrap .head .btn_l{ position: absolute; z-index: 10; top: 0; left: 0; line-height: 25px; font-size: 16px; color: #999; cursor: pointer;}
.sub_reservation_calendar .inner .calendar .wrap .head .btn_r{ position: absolute; z-index: 10; top: 0; right: 0; line-height: 25px; font-size: 16px; color: #999; cursor: pointer;}
.sub_reservation_calendar .inner .calendar .wrap .head .title{ text-align: center; line-height: 25px; font-size: 24px; color: #666;}
.sub_reservation_calendar .inner .calendar .wrap .head .title span{ font-weight: 700; color: #000;}
.sub_reservation_calendar .inner .calendar .wrap .head ul{ display: flex; justify-content: space-between; margin-top: 20px;}
.sub_reservation_calendar .inner .calendar .wrap .head ul li{ width: 14.285%; text-align: center; line-height: 20px; font-size: 16px;}
.sub_reservation_calendar .inner .calendar .wrap .head ul li.sun{ color: #F00;}
.sub_reservation_calendar .inner .calendar .wrap .head ul li.sat{ color: #00bef5;}
.sub_reservation_calendar .inner .calendar .wrap .body{ overflow: hidden; padding: 20px 0 0 0;}
.sub_reservation_calendar .inner .calendar .wrap .body .box{}
.sub_reservation_calendar .inner .calendar .wrap .body .box ul{ display: flex; flex-wrap: wrap;}
.sub_reservation_calendar .inner .calendar .wrap .body .box ul li{ display: flex; justify-content: center; align-items: center; width: 14.285%; height: 50px;}
.sub_reservation_calendar .inner .calendar .wrap .body .box ul li p{ display: flex; justify-content: center; align-items: center; width: 36px; height: 36px; border-radius: 50%; font-size: 16px; color: #666; opacity: 0.5;}
.sub_reservation_calendar .inner .calendar .wrap .body .box ul li.on p{ opacity: 1; cursor: pointer;}
.sub_reservation_calendar .inner .calendar .wrap .body .box ul li.on p:hover{ background: #f5f5f5;}
.sub_reservation_calendar .inner .calendar .wrap .body .box ul li.sun p{ color: #F00;}
.sub_reservation_calendar .inner .calendar .wrap .body .box ul li.sat p{ color: #00bef5;}
.sub_reservation_calendar .inner .calendar .wrap .body .box ul li.on.click p{ background: #ffd448; color: #000;}
.sub_reservation_calendar .inner .calendar .wrap .foot{ position: absolute; z-index: 10; right: 0; bottom: 0; left: 0; padding: 15px 25px; height: 80px; background: #FFF; border-radius: 0 0 16px 16px; box-shadow: 0 -1px 0 0 rgba(0 0 0/10%);}
.sub_reservation_calendar .inner .calendar .wrap .foot .btn{ display: flex; justify-content: center; align-items: center; height: 50px; border-radius: 8px; background: #275aa9; font-size: 16px; font-weight: 600; color: #FFF; letter-spacing: 0;}
.sub_reservation_calendar .inner .fr{ flex: 0 0 400px; display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 20px; align-content: flex-start; padding: 50px; border: 1px solid #ddd;}
.sub_reservation_calendar .inner .fr .wrap{ display: flex; flex-direction: column; align-items: flex-start;}
.sub_reservation_calendar .inner .fr .wrap:nth-child(1){ grid-column: 1/4;}
.sub_reservation_calendar .inner .fr .wrap:nth-child(2){ grid-column: 1/4;}
.sub_reservation_calendar .inner .fr .wrap:nth-child(6){ grid-column: 1/4;}
.sub_reservation_calendar .inner .fr .wrap .tit{ display: flex; align-items: center; position: relative; padding-bottom: 5px; line-height: 20px; font-size: 14px; color: #000;}
.sub_reservation_calendar .inner .fr .wrap .tit b{ display: flex; justify-content: center; align-items: center; margin: -1px 0 0 5px; width: 20px; height: 20px; border-radius: 50%; background: #000; font-size: 14px; color: #FFF;}
.sub_reservation_calendar .inner .fr .wrap .tit .open{ display: none; position: absolute; z-index: 10; bottom: 35px; right: -23px; padding: 10px 15px; border-radius: 10px; background: #000;}
.sub_reservation_calendar .inner .fr .wrap .tit .open:after{ content: ""; display: block; position: absolute; right: 30px; bottom: -3px; width: 6px; height: 6px; background: #000; transform: rotate(45deg);}
.sub_reservation_calendar .inner .fr .wrap .tit .open p{ line-height: 1.2; font-size: 12px; color: #FFF; white-space: nowrap;}
.sub_reservation_calendar .inner .fr .wrap .tit:hover .open{ display: block;}
.sub_reservation_calendar .inner .fr .wrap .date{ position: relative; width: 100%;}
.sub_reservation_calendar .inner .fr .wrap .date i{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 10; top: 0; left: 0; width: 50px; height: 50px; font-size: 24px; color: #000;}
.sub_reservation_calendar .inner .fr .wrap .date input{ display: flex; align-items: center; margin: 0; padding: 0 20px 0 50px; width: 100%; height: 50px; border: 1px solid #ddd; background: none; font-size: 16px; font-weight: 400; color: #000; outline:none; -webkit-appearance:none;}
.sub_reservation_calendar .inner .fr .wrap .date input:focus{ border: 1px solid #ffd448;}
.sub_reservation_calendar .inner .fr .wrap .in{ display: grid; grid-template-columns: repeat(3,1fr);}
.sub_reservation_calendar .inner .fr .wrap .in i{ display: flex; justify-content: center; align-items: center; position: relative; z-index: 10; width: 100%; height: 40px; border: 1px solid #ddd; font-size: 12px; cursor: pointer;}
.sub_reservation_calendar .inner .fr .wrap .in input{ display: flex; align-items: center; margin: 0 0 0 -1px; padding: 0; width: calc(100% + 2px); height: 40px; border: 1px solid #ddd; background: none; text-align: center; font-size: 16px; font-weight: 400; color: #000; outline:none; -webkit-appearance:none;}
.sub_reservation_calendar .inner .fr .wrap .in i:hover{ border-color: #ffd448;}
.sub_reservation_calendar .inner .fr .wrap .btn{ display: flex; justify-content: center; align-items: center; margin-top: 20px; width: 100%; height: 60px; background: #ffd448; font-size: 18px; font-weight: 700; color: #000; cursor: pointer;}
.sub_reservation_calendar .foot{ display: flex; justify-content: center; align-items: center; margin-top: 20px; padding: 30px; border: 1px solid #ddd;}
.sub_reservation_calendar .foot p{ font-size: 18px; color: #333;}
.sub_reservation_calendar .foot p b{ font-weight: 700; color: #000;}
.sub_reservation_calendar .foot .line{ margin: 0 20px; width: 1px; height: 30px; background: #ccc; transform: rotate(20deg);}
















.sub_neighbor_max{ position: relative;}
.sub_neighbor_max .rolling{ overflow: hidden;}
.sub_neighbor_max .rolling .swiper-wrapper{ margin: 0 !important;}
.sub_neighbor_max .rolling .swiper-wrapper .swiper-slide{}
.sub_neighbor_max .wrap{ position: relative;}
.sub_neighbor_max .wrap .text{ display: flex; flex-direction: column; align-items: flex-start; position: absolute; z-index: 20; right: 150px; bottom: 80px; left: 50px;}
.sub_neighbor_max .wrap .text .t1{ font-size: 36px; font-weight: 700; color: #FFF;}
.sub_neighbor_max .wrap .text .t2{ margin: 15px 0 0 0; line-height: 1.4; font-size: 18px; color: #FFF;}
.sub_neighbor_max .wrap .img{}
.sub_neighbor_max .wrap .img:before{ content: ""; display: block; position: absolute; z-index: 10; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(0 0 0/0), rgba(0 0 0/60%));}
.sub_neighbor_max .wrap .img:after{ content: ""; display: block; width: 100%; padding-top: 50%;}
.sub_neighbor_max_page{ display: flex; justify-content: center; align-items: center; grid-gap: 10px; position: absolute; z-index: 20; top: initial !important; bottom: 20px !important;}
.sub_neighbor_max_page span{ display: block; margin: 0 !important; width: 10px; height: 10px; border-radius: 50%; border: none; background: rgba(255 255 255/50%); opacity: 1;}
.sub_neighbor_max_page span.swiper-pagination-bullet-active{ border-color: #ffd448; background: #ffd448;}
.sub_neighbor_max_prev{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 20; bottom: 0; right: 50px; width: 50px; height: 50px; background: rgba(0 0 0/70%); cursor: pointer; transition: all .2s;}
.sub_neighbor_max_prev i{ font-size: 24px; color: #FFF; transition: all .2s;}
.sub_neighbor_max_prev:hover{ background: #ffd448;}
.sub_neighbor_max_prev i:hover{ color: #000;}
.sub_neighbor_max_next{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 20; bottom: 0; right: 0; width: 50px; height: 50px; background: rgba(0 0 0/70%); cursor: pointer; transition: all .2s;}
.sub_neighbor_max_next i{ font-size: 24px; color: #FFF; transition: all .2s;}
.sub_neighbor_max_next:hover{ background: #ffd448;}
.sub_neighbor_max_next i:hover{ color: #000;}
@media(max-width: 1300px){
}
@media(max-width: 1000px){
    .sub_neighbor_max .wrap .text{ bottom: 60px; left: 40px;}
    .sub_neighbor_max .wrap .img:after{ padding-top: 60%;}
}
@media(max-width: 600px){
    .sub_neighbor_max .wrap .text{ right: 2rem; bottom: 3rem; left: 2rem;}
    .sub_neighbor_max .wrap .text .t1{ font-size: 1.4rem;}
    .sub_neighbor_max .wrap .text .t2{ margin: 1rem 0 0 0; font-size: 1.1rem;}
    .sub_neighbor_max .wrap .img:after{ padding-top: 80%;}
    .sub_neighbor_max_page{ grid-gap: 0.5rem; bottom: 1rem !important;}
    .sub_neighbor_max_page span{ width: 0.5rem; height: 0.5rem;}
    .sub_neighbor_max_prev{ right: 3rem; width: 3rem; height: 3rem;}
    .sub_neighbor_max_prev i{ font-size: 1.2rem;}
    .sub_neighbor_max_next{ width: 3rem; height: 3rem;}
    .sub_neighbor_max_next i{ font-size: 1.2rem;}
}


.sub_neighbor_menu{ display: flex; flex-wrap: wrap; grid-gap: 5px; margin-top: 60px;}
.sub_neighbor_menu a{ display: flex; align-items: center; padding: 0 20px; height: 40px; border-radius: 20px; border: 1px solid #ddd; font-size: 16px; color: #000; cursor: pointer; transition: all .2s;}
.sub_neighbor_menu a:hover{ background: #f5f5f5;}
.sub_neighbor_menu a.on{ border-color: #ffd448; background: #ffd448; font-weight: 500;}
.sub_neighbor_menu.home{ margin-top: 120px;}
@media(max-width: 1300px){
}
@media(max-width: 1000px){
}
@media(max-width: 600px){
    .sub_neighbor_menu{ grid-gap: 0.4rem; margin-top: 2rem;}
    .sub_neighbor_menu a{ padding: 0 1rem; height: 2.5rem; border-radius: 3rem; font-size: 1rem;}
    .sub_neighbor_menu.home{ margin-top: 5rem;}
}


.sub_neighbor_list{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 40px 5px; margin: 40px 0 0 0;}
.sub_neighbor_list a{ display: block; transition: all .2s;}
.sub_neighbor_list a .img{ position: relative;}
.sub_neighbor_list a .img .logo{ display: flex; justify-content: flex-end; align-items: flex-end; position: absolute; z-index: 10; top: 0; right: 0; bottom: 0; left: 0; padding: 20px; background: rgba(0 0 0/0%); transition: all .3s;}
.sub_neighbor_list a .img .logo img{ display: block; height: 15px; opacity: 0; transition: all .3s;}
.sub_neighbor_list a .img:after{ content: ""; display: block; padding-top: 60%;}
.sub_neighbor_list a .info{ padding: 15px 40px 0 0;}
.sub_neighbor_list a .info .tit{ line-height: 1.4; font-size: 18px; font-weight: 500; color: #000;}
.sub_neighbor_list a:hover .img .logo{ background: rgba(0 0 0/50%);}
.sub_neighbor_list a:hover .img .logo img{ opacity: 1;}
@media(max-width: 1300px){
}
@media(max-width: 1000px){
    .sub_neighbor_list{ grid-template-columns: repeat(2,1fr);}
}
@media(max-width: 600px){
    .sub_neighbor_list{ grid-template-columns: repeat(2,1fr); grid-gap: 2rem 0.2rem; margin: 2rem 0 0 0;}
    .sub_neighbor_list a .img .logo{ padding: 1rem;}
    .sub_neighbor_list a .img .logo img{ height: 0.8rem;}
    .sub_neighbor_list a .info{ padding: 1rem 0 0 0;}
    .sub_neighbor_list a .info .tit{ font-size: 1.1rem;}
}















.member_login{ margin: 0 auto; max-width: 500px;}
.member_login .logo{ margin: 0 auto; width: 140px; height: auto;}
.member_login .logo img{ display: block; width: 100%; height: auto;}
.member_login .menu{ display: flex; align-items: flex-end; position: relative; margin-top: 50px; height: 60px; background: #f6f8fb;}
.member_login .menu:after{ content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: #000;}
.member_login .menu a{ display: flex; justify-content: center; align-items: center; width: 50%; height: 100%; cursor: pointer;}
.member_login .menu a p{ font-size: 18px; color: rgba(0 0 0/70%);}
.member_login .menu a.on{ position: relative; z-index: 10; border: 2px solid #000; background: #FFF;}
.member_login .menu a.on:before{ content: ""; position: absolute; right: 0; bottom: -2px; left: 0; height: 2px; background: #FFF;}
.member_login .menu a.on p{ font-weight: 700; color: #000;}

.member_login .text{ padding: 30px 0;}
.member_login .text p{ position: relative; padding: 0 0 0 15px; line-height: 1.2; font-size: 16px; color: #555;}
.member_login .text p:before{ content: ""; display: block; position: absolute; top: 8px; left: 0; width: 4px; height: 4px; border-radius: 50%; background: rgba(0 0 0/50%);}

.member_login .text_ok{ text-align: center;}
.member_login .text_ok .t1{ font-size: 18px; color: #333;}
.member_login .text_ok .t2{ margin-top: 10px; font-size: 30px; font-weight: 700; color: #000;}

.member_login .body{ display: grid; grid-gap: 20px; padding: 60px 0;}
.member_login .body .wrap{}
.member_login .body .wrap .tit{ padding: 0 0 10px 0; font-size: 14px; color: #666;}
.member_login .body .inner{ position: relative;;}
.member_login .body .inner i{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 10; top: 0; right: 0; bottom: 0; width: 60px; height: 60px; font-size: 24px; color: #000; cursor: pointer;}
.member_login .body .inner i.xi-eye{ display: none; color: #ffd448;}
.member_login .body .inner i.xi-eye-off{ display: flex;}
.member_login .body .inner input{ display: flex; align-items: center; margin: 0; padding: 0 20px; width: 100%; height: 60px; border: 1px solid #ddd; background: none; font-size: 16px; font-weight: 400; color: #000; outline:none; -webkit-appearance:none;}
.member_login .body .inner input:focus{ border: 1px solid #ffd448;}
.member_login .body .inner select{ display: flex; align-items: center; margin: 0; padding: 0 40px 0 20px; width: 100%; height: 60px; border: 1px solid #ddd; background:url(/images/icon_select_down.svg) no-repeat center right 20px #FFF; background-size: 12px auto; font-size: 16px; font-weight: 400; color: #000; outline: none; -webkit-appearance: none;}
.member_login .body .inner select:focus{ border: 1px solid #ffd448;}
.member_login .body .inner.tel{ display: flex; grid-gap: 10px;}
.member_login .body .inner.tel select{ flex: 0 0 120px;}
.member_login .body .inner.on i.xi-eye{ display: flex;}
.member_login .body .inner.on i.xi-eye-off{ display: none;}
.member_login .body .check{ display: flex; justify-content: flex-start;}
.member_login .body .check label{ display: flex; align-items: center; cursor: pointer;}
.member_login .body .check label i{ display: flex; justify-content: center; align-items: center; width: 25px; height: 25px; border-radius: 20px; border: 1px solid #ddd; font-size: 14px; color: #FFF;}
.member_login .body .check label p{ margin: 0 0 0 5px; font-size: 16px; color: #333;}
.member_login .body .check label.on i{ border-color: #ffd448; background: #ffd448; color: #000;}
.member_login .body .btn{ display: flex; justify-content: center; align-items: center; height: 60px; background: #ffd448; font-size: 18px; font-weight: 700; color: #000; cursor: pointer;}

.member_login .body .sub_tit{ margin-top: 40px; font-size: 18px; font-weight: 700; color: #333;}
.member_login .body .btn_id{ display: flex; grid-gap: 10px;}
.member_login .body .btn_id a{ display: flex; justify-content: center; align-items: center; width: 50%; height: 60px; border: 1px solid #ddd; font-size: 16px; font-weight: 500; color: #333; cursor: pointer;}
.member_login .body .btn_id a:hover{ background: #f6f8fb;}
.member_login .body .btn_join{ display: flex; justify-content: center; align-items: center; grid-gap: 10px; height: 60px; border: 1px solid #ddd;}
.member_login .body .btn_join p{ font-size: 16px; font-weight: 500; color: #333;}
.member_login .body .btn_join i{ font-size: 12px; color: #333;}
.member_login .body .btn_join:hover{ background: #f6f8fb;}

.member_login .foot{ padding: 50px; background: #f6f8fb;}
.member_login .foot .t1{ display: flex; align-items: center; position: relative; margin: 0 0 10px 0; padding-left: 30px; line-height: 30px; font-size: 20px; font-weight: 700; color: #000;}
.member_login .foot .t1 i{ position: absolute; top: 0; left: 0; line-height: 30px; font-size: 25px; color: #000;}
.member_login .foot .t2{ display: grid; grid-gap: 10px;}
.member_login .foot .t2 p{ position: relative; padding: 0 0 0 30px; line-height: 1.2; font-size: 15px; color: #333;}
.member_login .foot .t2 p:before{ content: ""; display: block; position: absolute; top: 7px; left: 10px; width: 4px; height: 4px; border-radius: 50%; background: rgba(0 0 0/50%);}
@media(max-width: 600px){
    .member_login .logo{ margin: 0 auto; width: 8rem;}
    .member_login .menu{ margin-top: 2rem; height: 4rem;}
    .member_login .menu a p{ font-size: 1.2rem;}

    .member_login .text{ padding: 30px 0;}
    .member_login .text p{ position: relative; padding: 0 0 0 15px; line-height: 1.2; font-size: 16px; color: #555;}
    .member_login .text p:before{ content: ""; display: block; position: absolute; top: 8px; left: 0; width: 4px; height: 4px; border-radius: 50%; background: rgba(0 0 0/50%);}

    .member_login .text_ok .t1{ font-size: 1.2rem;}
    .member_login .text_ok .t2{ margin-top: 1rem; font-size: 1.4rem;}

    .member_login .body{ grid-gap: 1.2rem; padding: 3rem 0;}
    .member_login .body .wrap .tit{ padding: 0 0 0.5rem 0; font-size: 1rem;}
    .member_login .body .inner i{ width: 3.5rem; height: 3.5rem; font-size: 1.4rem;}
    .member_login .body .inner input{ padding: 0 1.5rem; height: 3.5rem; font-size: 1.1rem;}
    .member_login .body .inner select{ padding: 0 3.5rem 0 1.5rem; height: 3.5rem; background:url(/images/icon_select_down.svg) no-repeat center right 1rem #FFF; background-size: 1rem auto; font-size: 1.1rem;}
    .member_login .body .inner.tel{ grid-gap: 0.5rem;}
    .member_login .body .inner.tel select{ flex: 0 0 7rem;}
    .member_login .body .check label i{ width: 1.6rem; height: 1.6rem; border-radius: 2rem; font-size: 1rem;}
    .member_login .body .check label p{ margin: 0 0 0 0.5rem; font-size: 1.1rem;}
    .member_login .body .btn{ height: 3.5rem; font-size: 1.2rem;}

    .member_login .body .sub_tit{ margin-top: 2rem; font-size: 1.2rem;}
    .member_login .body .btn_id{ display: flex; grid-gap: 10px;}
    .member_login .body .btn_id a{ width: 100%; height: 3.5rem; font-size: 1.1rem;}
    .member_login .body .btn_join{ grid-gap: 0.5rem; height: 3.5rem;}
    .member_login .body .btn_join p{ font-size: 1.1rem;}
    .member_login .body .btn_join i{ font-size: 1.1rem;}

    .member_login .foot{ padding: 2rem;}
    .member_login .foot .t1{ margin: 0 0 1rem 0; padding-left: 1.5rem; line-height: 1.5rem; font-size: 1.4rem;}
    .member_login .foot .t1 i{ line-height: 1.5rem; font-size: 1.4rem;}
    .member_login .foot .t2{ grid-gap: 0.5rem;}
    .member_login .foot .t2 p{ padding: 0 0 0 1.5rem; font-size: 1.1rem;}
    .member_login .foot .t2 p:before{ top: 0.4rem; left: 0.8rem;}
}


.member_join{}
.member_join .step{ display: flex; justify-content: center; position: relative; background: #f6f8fb;}
.member_join .step .wrap{ display: flex; flex-direction: column; align-items: center; position: relative; padding: 40px 0; width: 50%;}
.member_join .step .wrap .t1{ font-size: 18px; color: #ddd;}
.member_join .step .wrap .t2{ margin-top: 5px; font-size: 24px; font-weight: 700; color: #999;}
.member_join .step .wrap i{ display: flex; justify-content: center; align-items: center; position: absolute; top: calc(50% - 20px); right: -20px; width: 40px; height: 40px; font-size: 16px; color: rgba(0 0 0/40%);}
.member_join .step .wrap.on{}
.member_join .step .wrap.on .t1{ color: #000;}
.member_join .step .wrap.on .t2{ color: #000;}

.member_join .title{ margin: 60px 0 0 0; font-size: 24px; font-weight: 700; color: #000;}
.member_join .text{ display: grid; grid-gap: 10px; padding: 15px 0 0 0;}
.member_join .text p{ position: relative; padding: 0 0 0 15px; line-height: 1.2; font-size: 16px; color: #555;}
.member_join .text p:before{ content: ""; display: block; position: absolute; top: 7px; left: 0; width: 4px; height: 4px; border-radius: 50%; background: rgba(0 0 0/100%);}

.member_join .foot{ margin-top: 60px; padding: 50px; background: #f6f8fb;}
.member_join .foot .t1{ display: flex; align-items: center; position: relative; margin: 0 0 10px 0; padding-left: 30px; line-height: 30px; font-size: 20px; font-weight: 700; color: #000;}
.member_join .foot .t1 i{ position: absolute; top: 0; left: 0; line-height: 30px; font-size: 25px; color: #000;}
.member_join .foot .t2{ display: grid; grid-gap: 10px;}
.member_join .foot .t2 p{ position: relative; padding: 0 0 0 30px; line-height: 1.2; font-size: 15px; color: #333;}
.member_join .foot .t2 p:before{ content: ""; display: block; position: absolute; top: 7px; left: 10px; width: 4px; height: 4px; border-radius: 50%; background: rgba(0 0 0/50%);}
.member_join .foot .t2 p b{ font-weight: 600; color: #000;}

.member_join .join_terms{ margin: 60px 0 0 0;}
.member_join .join_terms .all_btn{ display: flex; align-items: center; grid-gap: 10px; cursor: pointer;}
.member_join .join_terms .all_btn i{ display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid #ddd; font-size: 14px; color: #FFF;}
.member_join .join_terms .all_btn p{ font-size: 24px; font-weight: 700; color: #000;}
.member_join .join_terms .all_btn.on i{ border-color: #ffd448; background: #ffd448; color: #000;}
.member_join .join_terms .list{ margin: 20px 0 0 0; padding: 20px 0; border-top: 1px solid #000; border-bottom: 1px solid #DDD;}
.member_join .join_terms .list .wrap{ display: flex; justify-content: space-between; align-items: center; padding: 10px 30px;}
.member_join .join_terms .list .wrap .check{ display: flex; align-items: center; grid-gap: 10px; cursor: pointer;}
.member_join .join_terms .list .wrap .check i{ display: flex; justify-content: center; align-items: center; width: 25px; height: 25px; border-radius: 50%; border: 1px solid #ddd; background: #FFF; font-size: 12px; color: #FFF;}
.member_join .join_terms .list .wrap .check p{ font-size: 16px; font-weight: 400; color: #000;}
.member_join .join_terms .list .wrap .check.on i{ border-color: #ffd448; background: #ffd448; color: #000;}
.member_join .join_terms .list .wrap .btn{ display: flex; justify-content: center; align-items: center; padding: 0 20px; height: 40px; border-radius: 20px; border: 1px solid #DDD; background: #FFF; font-size: 14px; color: #000; cursor: pointer;}
.member_join .join_terms .list .wrap .btn:hover{ border-color: #000; color: #000;}
.member_join .join_terms .list .wrap:hover{ background: #f6f8fb;}

.member_join .join_ok{ display: flex; flex-direction: column; justify-content: center; align-items: center;}
.member_join .join_ok .ok_id{ margin: 20px 0 0 0; font-size: 20px; line-height: 1.2; color: #000;}
.member_join .join_ok .ok_id span{ font-weight: 700; color: #ffd448;}
.member_join .join_ok .text{ margin: 40px 0 0 0;}
@media(max-width: 600px){
    .member_join .step .wrap{ padding: 2rem 0;}
    .member_join .step .wrap .t1{ font-size: 1.1rem;}
    .member_join .step .wrap .t2{ margin-top: 0.5rem; font-size: 1.4rem;}

    .member_join .title{ margin: 3rem 0 0 0; font-size: 1.4rem;}
    .member_join .text{ grid-gap: 0.5rem; padding: 1rem 0 0 0;}
    .member_join .text p{ padding: 0 0 0 1rem; font-size: 1.1rem;}
    .member_join .text p:before{ top: 0.5rem;}

    .member_join .foot{ padding: 2rem;}
    .member_join .foot .t1{ margin: 0 0 1rem 0; padding-left: 1.5rem; line-height: 1.5rem; font-size: 1.4rem;}
    .member_join .foot .t1 i{ line-height: 1.5rem; font-size: 1.4rem;}
    .member_join .foot .t2{ grid-gap: 0.5rem;}
    .member_join .foot .t2 p{ padding: 0 0 0 1.5rem; font-size: 1.1rem;}
    .member_join .foot .t2 p:before{ top: 0.4rem; left: 0.8rem;}

    .member_join .join_terms{ margin: 3rem 0 0 0;}
    .member_join .join_terms .all_btn{ grid-gap: 0.5rem;}
    .member_join .join_terms .all_btn i{ width: 1.8rem; height: 1.8rem; font-size: 1rem;}
    .member_join .join_terms .all_btn p{ font-size: 1.4rem;}
    .member_join .join_terms .list{ margin: 1rem 0 0 0; padding: 1rem 0;}
    .member_join .join_terms .list .wrap{ padding: 0.5rem 1rem;}
    .member_join .join_terms .list .wrap .check{ grid-gap: 0.5rem;}
    .member_join .join_terms .list .wrap .check i{ width: 1.6rem; height: 1.6rem; font-size: 0.8rem;}
    .member_join .join_terms .list .wrap .check p{ font-size: 1.1rem;}
    .member_join .join_terms .list .wrap .btn{ padding: 0 1rem; height: 2.5rem; border-radius: 2rem; font-size: 1rem;}

    .member_join .join_ok .ok_id{ margin: 1rem 0 0 0; font-size: 1.2rem; text-align: center;}
    .member_join .join_ok .text{ margin: 2rem 0 0 0; padding: 0;}
}


.popup_terms{ display: flex; justify-content: center; align-items: center; position: fixed; z-index: 300; top: -100%; right: 0; bottom: 100%; left: 0; padding: 50px;}
.popup_terms .inner{ position: relative; z-index: 20; max-width: 500px; width: 100%; max-height: 600px; height: 100%; opacity: 0; transform: scale(.5); transition: opacity .5s, transform .5s;}
.popup_terms .inner .close_btn{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 10; top: 10px; right: 10px; width: 40px; height: 40px; cursor: pointer;}
.popup_terms .inner .close_btn i{ font-size: 24px; color: #000;}
.popup_terms .inner .scroll{ overflow: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 50px; background: #FFF;}
.popup_terms .inner .title{ margin: 0 0 30px 0; line-height: 1; font-size: 24px; font-weight: 700; color: #000;}
.popup_terms .bg{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0 0 0/70%); backdrop-filter: blur(20px);}
.popup_terms.on{ top: 0; bottom: 0;}
.popup_terms.on .inner{ opacity: 1; transform: scale(1);}
@media(max-width: 600px){
    .popup_terms{ padding: 2rem;}
    .popup_terms .inner{ max-height: 40rem; height: 100%; opacity: 0; transform: scale(.5); transition: opacity .5s, transform .5s;}
    .popup_terms .inner .close_btn{ top: 0.5rem; right: 0.5rem; width: 3rem; height: 3rem;}
    .popup_terms .inner .close_btn i{ font-size: 1.6rem;}
    .popup_terms .inner .scroll{ padding: 2rem;}
    .popup_terms .inner .title{ margin: 0 0 1rem 0; font-size: 1.6rem;}
}














.mypage_section{}
.mypage_section .modle_min{ display: flex; align-items: flex-start; grid-gap: 60px;}
.mypage_section .fr_section{ flex: 1;}
@media(max-width: 1300px){
}
@media(max-width: 1000px){
    .mypage_section .modle_min{ display: block;}
    .mypage_section .fr_section{ margin-top: 60px;}
}
@media(max-width: 600px){
    .mypage_section .fr_section{ margin-top: 3rem;}
}


.mypage_head{ flex: 0 0 300px; position: relative; padding: 50px 0; background: #ffd448;}
.mypage_head .out_btn{ display: flex; justify-content: center; align-items: center; position: absolute; top: 10px; right: 10px; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; transition: all .2s;}
.mypage_head .out_btn i{ font-size: 24px; color: #000; transition: all .2s;}
.mypage_head .out_btn:hover{ background: #000;}
.mypage_head .out_btn:hover i{ color: #FFF;}
.mypage_head .user{ display: flex; flex-direction: column; align-items: center;}
.mypage_head .user .img{ display: flex; justify-content: center; align-items: center; width: 100px; height: 100px; border-radius: 50%;}
.mypage_head .user .name{ margin-top: 20px; font-size: 20px; color: rgba(0 0 0/60%);}
.mypage_head .user .name b{ font-weight: 700; color: #000;}
.mypage_head .menu{ display: grid; grid-gap: 5px; margin: 40px 30px 0 30px;}
.mypage_head .menu a{ display: flex; justify-content: space-between; align-items: center; padding: 0 30px; height: 50px; border-radius: 30px; transition: all .2s; cursor: pointer;}
.mypage_head .menu a p{ font-size: 18px; font-weight: 500; color: rgba(0 0 0/60%);}
.mypage_head .menu a i{ font-size: 12px; color: rgba(0 0 0/50%);}
.mypage_head .menu a:hover{ background: rgba(255 255 255/50%);}
.mypage_head .menu a.on{ border-color: #FFF; background: #FFF; color: #000;}
.mypage_head .menu a.on p{ font-weight: 700; color: #000;}
.mypage_head .menu a.on i{ font-size: 18px; color: #000;}
@media(max-width: 1300px){
}
@media(max-width: 1000px){
    .mypage_head{ flex: 1;}
    .mypage_head .menu{ display: flex;}
    .mypage_head .menu a{ width: 50%; background: rgba(255 255 255/50%); border-radius: 0;}
    .mypage_head .menu a i{ transform: rotate(90deg);}
}
@media(max-width: 600px){
    .mypage_head{ padding: 3rem 0;}
    .mypage_head .out_btn{ top: 1rem; right: 1rem; width: 3rem; height: 3rem;}
    .mypage_head .out_btn i{ font-size: 1.8rem;}
    .mypage_head .user .img{ width: 6rem; height: 6rem;}
    .mypage_head .user .name{ margin-top: 1rem; font-size: 1.4rem;}
    .mypage_head .menu{ grid-gap: 0.5rem; margin: 2rem 1rem 0 1rem;}
    .mypage_head .menu a{ padding: 0 1rem; height: 3.2rem;}
    .mypage_head .menu a p{ font-size: 1.1rem;}
    .mypage_head .menu a i{ font-size: 1rem;}
    .mypage_head .menu a.on i{ font-size: 1rem;}
}


.mypage_title{ display: flex; justify-content: space-between; align-items: center; margin: 0 0 20px 0;}
.mypage_title p{ font-size: 36px; font-weight: 700; color: #000;}
.mypage_title p font{ color: #F00;}
.mypage_title span{ font-size: 16px; color: #666;}
.mypage_title span font{ color: #F00;}
.mypage_title a{ display: flex; align-items: center; cursor: pointer;}
.mypage_title a p{ font-size: 16px; font-weight: 300; color: #999;}
.mypage_title a i{ margin: 0 0 4px 10px; font-size: 16px; color: #999;}
.mypage_title.two{ margin: 60px 0 20px 0;}
@media(max-width: 1300px){
}
@media(max-width: 1000px){
}
@media(max-width: 600px){
    .mypage_title{ margin: 0 0 1rem 0;}
    .mypage_title p{ font-size: 2rem;}
    .mypage_title span{ font-size: 1.1rem;}
    .mypage_title a{ display: flex; align-items: center; cursor: pointer;}
    .mypage_title a p{ font-size: 16px; font-weight: 300; color: #999;}
    .mypage_title a i{ margin: 0 0 4px 10px; font-size: 16px; color: #999;}
    .mypage_title.two{ margin: 3rem 0 1rem 0;}
}


.mypage_reservation_list{ display: grid; border-top: 2px solid #000;}
.mypage_reservation_list .wrap{ overflow: hidden; border-bottom: 1px solid #ddd; transition: all .2s;}
.mypage_reservation_list .wrap .ft{ display: flex; justify-content: space-between; align-items: center; padding: 30px 40px 0 40px;}
.mypage_reservation_list .wrap .ft .fl{ display: flex; align-items: center; grid-gap: 10px; cursor: pointer;}
.mypage_reservation_list .wrap .ft .fl .img{ width: 40px; height: 40px; border-radius: 50%;}
.mypage_reservation_list .wrap .ft .fl p{ font-size: 18px; font-weight: 500; color: #000;}
.mypage_reservation_list .wrap .ft .fr{ display: flex; align-items: center; grid-gap: 20px;}
.mypage_reservation_list .wrap .ft .fr p{ font-size: 16px; color: #666;}
.mypage_reservation_list .wrap .ft .fr span{ display: block; width: 1px; height: 16px; background: #ddd;}
.mypage_reservation_list .wrap .ft .fr img{ display: block; width: auto; height: 18px; opacity: 0.6; cursor: pointer; transition: all .2s;}
.mypage_reservation_list .wrap .ft .fr img:hover{ opacity: 1;}
.mypage_reservation_list .wrap .fb{ padding: 30px 40px 30px 40px;}
.mypage_reservation_list .wrap .tit{ margin: 0 0 15px 0; font-size: 24px; font-weight: 600; color: #000;}
.mypage_reservation_list .wrap .txt{ display: flex; align-items: center; margin-top: 10px; font-size: 16px; color: #666;}
.mypage_reservation_list .wrap .txt b{ padding-right: 5px; font-weight: 500; color: #000;}
.mypage_reservation_list .wrap .txt span{ display: block; width: 20px; height: 10px;}
.mypage_reservation_list .wrap .payment{ display: flex; align-items: flex-end; margin-top: 5px; font-size: 16px; font-weight: 500; color: #000;}
.mypage_reservation_list .wrap .payment b{ padding: 0 5px; font-size: 30px; font-weight: 700; color: #F00; transform: translate(0,4px); letter-spacing: -2px;}
.mypage_reservation_list .wrap .btn{ display: flex; justify-content: flex-end; grid-gap: 5px;}
.mypage_reservation_list .wrap .btn a{ display: flex; justify-content: center; align-items: center; padding: 0 30px; height: 45px; border-radius: 30px; border: 1px solid #ddd; background: #FFF; font-size: 16px; font-weight: 500; color: #333; transition: all .2s; cursor: pointer;}
.mypage_reservation_list .wrap .btn a:hover{ border-color: #000;}
.mypage_reservation_list .wrap:hover{ background: #f6f8fb;}
@media(max-width: 1300px){
}
@media(max-width: 1000px){
}
@media(max-width: 600px){
}


.reservation_text{ padding: 30px 40px; border-bottom: 1px solid #ddd;}
.reservation_text p{ position: relative; padding: 0 0 0 15px; line-height: 1.2; font-size: 16px; color: #333;}
.reservation_text p b{ font-size: 24px; font-weight: 600;}
.reservation_text p:before{ content: ""; display: block; position: absolute; top: 7px; left: 0; width: 4px; height: 4px; border-radius: 50%; background: rgba(0 0 0/100%);}
@media(max-width: 1300px){
}
@media(max-width: 1000px){
}
@media(max-width: 600px){
}


.no_data{ display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 20px 0 0 0; padding: 50px 30px; border: 1px solid #DDD;}
.no_data img{ display: block; margin: 0 0 20px 0; height: 60px;}
.no_data p{ font-size: 16px; color: #000;}
.no_data a{ display: flex; align-items: center; margin: 20px 0 0 0; padding: 0 30px; height: 50px; border-radius: 30px; background: #ffd448; font-size: 18px; font-weight: 500; color: #FFF;}
@media(max-width: 1300px){
}
@media(max-width: 1000px){
}
@media(max-width: 600px){
}


.mypage_reservation_write{}
.mypage_reservation_write ul{ display: flex; flex-wrap: wrap; border-top: 1px solid #000;}
.mypage_reservation_write ul li{ width: 100%; height: 100%; border-bottom: 1px solid #DDD;}
.mypage_reservation_write ul li .row{ position: relative; padding: 20px 20px 20px 180px;}
.mypage_reservation_write ul li .row .tit{ display: flex; align-items: center; position: absolute; top: 0; bottom: 0; left: 0; padding: 0 0 0 40px; width: 160px; background: #f6f8fb; line-height: 45px; font-size: 16px; font-weight: 500; color: rgba(0 0 0/60%);}
.mypage_reservation_write ul li .row .tit span{ color: #F00;}
.mypage_reservation_write ul li .row .txt{ font-size: 16px; color: #000;}
.mypage_reservation_write ul li .row .box{ flex: 1; width: 100%;}
.mypage_reservation_write ul li .row .text{ padding: 10px 0 0 0;}
.mypage_reservation_write ul li .row .text p{ position: relative; padding: 6px 0 0 15px; font-size: 14px; color: #333;}
.mypage_reservation_write ul li .row .text p:before{ content: ""; display: block; position: absolute; top: 16px; left: 0; width: 5px; height: 1px; background: rgba(0 0 0/50%);}

.mypage_reservation_write input{ display: flex; align-items: center; margin: 0; padding: 0 15px; width: 220px; height: 45px; border-radius: 8px; border: 1px solid #DDD; background: #FFF; font-size: 16px; font-weight: 400; color: #000; outline: none; -webkit-appearance: none;}
.mypage_reservation_write input:focus{ border: 1px solid #ffd448;}
.mypage_reservation_write select{ display: flex; align-items: center; margin: 0; padding: 0 40px 0 15px; width: 100%; height: 45px; border-radius: 8px; border: 1px solid #DDD; background:url(/images/basic_select_icon.png) no-repeat center right 15px #FFF; background-size: 10px auto; font-size: 16px; font-weight: 400; color: #000; outline: none; -webkit-appearance: none;}
.mypage_reservation_write select:focus{ border: 1px solid #ffd448;}
.mypage_reservation_write textarea{ display: block; margin: 0; padding: 15px 15px; width: 100%; height: 160px; max-height: 160px; min-height: 160px; border-radius: 8px; border: 1px solid #DDD; background: none; line-height: 1.5; font-size: 16px; color: #000; outline:none; -webkit-appearance:none;}
.mypage_reservation_write textarea:focus{ border: 1px solid #ffd448;}

.mypage_reservation_write .mail{ display: flex;}
.mypage_reservation_write .mail input{ margin: 0 10px 0 0; width: 30%;}
.mypage_reservation_write .mail select{ flex: 0 0 100px; width: 300px;}

.mypage_reservation_write .tel{ display: flex; width: 400px;}
.mypage_reservation_write .tel select{ flex: 0 0 100px; width: 100px;}
.mypage_reservation_write .tel input{ margin: 0 0 0 10px; width: 50%;}

.mypage_reservation_write .name_check{ display: flex; align-items: center;}
.mypage_reservation_write .name_check input{ margin: 0 20px 0 0;}
.mypage_reservation_write .name_check .btn{ display: flex; align-items: center; cursor: pointer;}
.mypage_reservation_write .name_check .btn i{ display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; border-radius: 8px; border: 1px solid #DDD; font-size: 12px; color: #666;}
.mypage_reservation_write .name_check .btn p{ margin: 0 0 0 8px; font-size: 14px; color: #666;}
.mypage_reservation_write .name_check .btn.on i{ border-color: #ffd448; background: #ffd448; color: #FFF;}
.mypage_reservation_write .name_check .btn.on p{ font-weight: 500; color: #000;}

.mypage_reservation_write .user{ display: flex; align-items: center;}
.mypage_reservation_write .user .u_row{ display: flex; align-items: center; margin: 0 20px 0 0;}
.mypage_reservation_write .user .u_row p{ margin: 0 10px 0 0; font-size: 16px; font-weight: 500; white-space: nowrap;}

.mypage_reservation_write .pay{ display: flex; align-items: center;}
.mypage_reservation_write .pay .btn{ display: flex; align-items: center; margin: 0 30px 0 0; cursor: pointer;}
.mypage_reservation_write .pay .btn i{ display: flex; justify-content: center; align-items: center; width: 25px; height: 25px; border-radius: 50%; border: 1px solid #DDD; font-size: 12px; color: #FFF;}
.mypage_reservation_write .pay .btn p{ margin: 0 0 0 8px; font-size: 16px; color: #666;}
.mypage_reservation_write .pay .btn.on i{ border-color: #ffd448; background: #ffd448; color: #000;}
.mypage_reservation_write .pay .btn.on p{ font-weight: 500; color: #000;}

.mypage_reservation_write .name{ display: flex; align-items: center; width: 100%;}
.mypage_reservation_write .name p{ display: flex; align-items: center; width: 50%; font-size: 20px; font-weight: 600; color: #000;}
.mypage_reservation_write .name p span{ padding: 0 10px 0 0; font-size: 16px; font-weight: 400; color: #666;}

.mypage_reservation_write .coupon{ display: flex; margin: 10px 0 0 0;}
.mypage_reservation_write .coupon:nth-child(2){ margin: 0;}
.mypage_reservation_write .coupon .fl{ flex: 1; display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; border-radius: 8px; border: 1px solid #DDD;}
.mypage_reservation_write .coupon .fl p{ flex: 1; font-size: 16px; color: #000;}
.mypage_reservation_write .coupon .fl p span{ color: #F00;}
.mypage_reservation_write .coupon .fl i{ width: 30px; text-align: right; font-size: 12px; color: #666;}
.mypage_reservation_write .coupon .btn{ display: flex; justify-content: center; align-items: center; margin: 0 0 0 10px; padding: 10px 0; width: 120px; border-radius: 8px; background: #f5f5f5; font-size: 16px; color: #999; cursor: pointer;}
.mypage_reservation_write .coupon .btn.on{ background: #ffd448; color: #FFF;}

.mypage_reservation_write .award{ display: flex; justify-content: center; align-items: center; width: 120px; height: 45px; border-radius: 8px; background: #000; font-size: 16px; font-weight: 600; color: #FFF;}
@media(max-width: 1300px){
}
@media(max-width: 1000px){
}
@media(max-width: 600px){
    .mypage_reservation_write ul li .row{ padding: 20px 0;}
    .mypage_reservation_write ul li .row .tit{ position: initial; padding: 0 0 15px 0; width: auto; background: none; line-height: 1; font-size: 16px;}
    .mypage_reservation_write ul li .row .txt{ padding: 5px 0; font-size: 16px; color: #000;}
    .mypage_reservation_write ul li .row .box{ flex: 1; width: 100%;}
    .mypage_reservation_write ul li .row .text{ padding: 10px 0 0 0;}
    .mypage_reservation_write ul li .row .text p{ position: relative; padding: 6px 0 0 15px; font-size: 14px; color: #333;}
    .mypage_reservation_write ul li .row .text p:before{ content: ""; display: block; position: absolute; top: 16px; left: 0; width: 5px; height: 1px; background: rgba(0 0 0/50%);}

    .mypage_reservation_write input{ width: 100%;}
    .mypage_reservation_write textarea{ height: 120px; max-height: 120px; min-height: 120px;}

    .mypage_reservation_write .mail{ display: block;}
    .mypage_reservation_write .mail input{ margin: 0 0 10px 0; width: 100%;}
    .mypage_reservation_write .mail .txt{ display: none;}
    .mypage_reservation_write .mail select{ flex: 1; margin: 0; width: 100%;}

    .mypage_reservation_write .tel{ display: flex; width: auto;}

    .mypage_reservation_write .name_check{ display: block;}
    .mypage_reservation_write .name_check input{ margin: 0 0 10px 0;}

    .mypage_reservation_write .user{ display: flex; align-items: center;}
    .mypage_reservation_write .user .u_row{ display: flex; align-items: center; margin: 0 20px 0 0;}
    .mypage_reservation_write .user .u_row p{ margin: 0 10px 0 0; font-size: 16px; font-weight: 500; white-space: nowrap;}

    .mypage_reservation_write .pay{ display: flex; align-items: center; padding: 10px 0;}
    .mypage_reservation_write .pay .btn{ display: flex; align-items: center; margin: 0 30px 0 0; cursor: pointer;}
    .mypage_reservation_write .pay .btn i{ display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid #DDD; font-size: 12px; color: #666;}
    .mypage_reservation_write .pay .btn p{ margin: 0 0 0 8px; font-size: 14px; color: #666;}
    .mypage_reservation_write .pay .btn.on i{ border-color: #ffd448; background: #ffd448; color: #FFF;}
    .mypage_reservation_write .pay .btn.on p{ font-weight: 500; color: #000;}

    .mypage_reservation_write .pay_info{ margin: 10px 0 0 0; padding: 20px; border-radius: 5px;}
    .mypage_reservation_write .pay_info .p_tit{ font-size: 16px;}
    .mypage_reservation_write .pay_info .number{ font-size: 30px;}
    .mypage_reservation_write .pay_info .name{ font-size: 16px;}

    .mypage_reservation_write .award{ width: auto;}

    .mypage_reservation_write .coupon .fl p{ font-size: 14px;}
    .mypage_reservation_write .coupon .btn{ width: 80px; font-size: 14px;}

    .mypage_reservation_write .name{ display: grid; grid-gap: 10px;}
    .mypage_reservation_write .name p{ font-size: 16px;}
    .mypage_reservation_write .name p span{ flex: 0 0 60px;}
}