@charset "utf-8";
*{ list-style: none; margin: 0; padding: 0; border: 0; box-sizing: border-box; text-decoration: none; font-family: "Pretendard GOV", sans-serif; -webkit-text-size-adjust: none; line-height: 1; font-weight: 400; letter-spacing: -0.25px; color: #000;}
select::-ms-expand{ display: none;}
html{ overflow-y: scroll; width: 100%; height: 100%; background: #FFF;}
body{ overflow: hidden; padding-top: 80px; background: #FFF;}
body::-moz-scrollbar{ width: 4px; background: #f0f0f0;}
body::-moz-scrollbar-thumb{ background-color: #67c5e3; border-radius: 0;}
body::-ms-scrollbar{ width: 4px; background: #f0f0f0;}
body::-ms-scrollbar-thumb{ background-color: #67c5e3; border-radius: 0;}
body::-webkit-scrollbar{ width: 4px; background: #f0f0f0;}
body::-webkit-scrollbar-thumb{ background-color: #67c5e3; border-radius: 0;}
@media(max-width: 1025px){
    body{ padding-bottom: 60px;}
}
@media(max-width: 767px){
    body{ padding-top: 60px;}
}

.material-symbols-outlined{
     font-variation-settings:
     'FILL' 0,
     'wght' 300,
     'GRAD' 0,
     'opsz' 24
 }


.w_max{ padding-right: 50px !important; padding-left: 50px !important;}
.w_min{ margin: 0 auto; max-width: 1200px; width: 100%;}
.type_sub{ margin: 50px 0 0 0;}
.flex{ display: flex; align-items: center;}
.jcs{ justify-content: flex-start;}
.jcc{ justify-content: center;}
.jce{ justify-content: flex-end;}
.jcsb{ justify-content: space-between;}
.ais{ align-items: flex-start;}
.aic{ align-items: center;}
.aie{ align-items: flex-end;}
.tac{ text-align: center;}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
}
@media(max-width: 767px){
    .w_max{ padding-right: 20px !important; padding-left: 20px !important;}
    .type_sub{ margin: 30px 0 0 0;}
}



.m_gnb{ display: none; position: fixed; z-index: 80; right: 0; bottom: 0; left: 0; background: rgba(255 255 255/90%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 -1px 0 0 rgba(0 0 0/10%);}
.m_gnb ul{ display: flex;}
.m_gnb ul li{ width: 25%;}
.m_gnb ul li a{ display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; height: 60px;}
.m_gnb ul li a .bg{ position: absolute; bottom: 0; left: 50%; margin: 0 0 0 -40px; width: 80px; height: 80px; border-radius: 50%; background: #FFF; box-shadow: 0 -5px 5px 0 rgba(0 0 0/10%);}
.m_gnb ul li a .tip{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 11; top: 5px; left: 50%; margin: 0 0 0 5px; width: 20px; height: 20px; border-radius: 20px; background: #F00; font-size: 11px; font-weight: 400; color: #FFF;}
.m_gnb ul li a .img{ position: relative; z-index: 10;}
.m_gnb ul li a .img img{ display: block; width: auto; height: 20px; filter: grayscale(100%); opacity: 1;}
.m_gnb ul li a p{ display: flex; align-items: flex-end; position: relative; z-index: 10; height: 18px; font-size: 10px; color: #000; letter-spacing: 0;}
.m_gnb ul li.on a .img img{ filter: grayscale(0); opacity: 1;}
.m_gnb ul li.on a p{ color: #000;}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
    .m_gnb{ display: block;}
}
@media(max-width: 769px){
}


.all_menu{ position: fixed; z-index: 800; top: 0; right: 100%; bottom: 0; left: 0; background: rgba(0 0 0/70%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); opacity: 0; transition: opacity .3s;}
.all_menu .row{ overflow: auto; position: fixed; z-index: 10; top: 0; bottom: 0; left: -600px; max-width: 600px; width: 100%; background: #FFF; transition: all .5s;}
.all_menu .row::-moz-scrollbar{ width: 0; background: #f0f0f0;}
.all_menu .row::-moz-scrollbar-thumb{ background-color: #67c5e3; border-radius: 0;}
.all_menu .row::-ms-scrollbar{ width: 0; background: #f0f0f0;}
.all_menu .row::-ms-scrollbar-thumb{ background-color: #67c5e3; border-radius: 0;}
.all_menu .row::-webkit-scrollbar{ width: 0; background: #f0f0f0;}
.all_menu .row::-webkit-scrollbar-thumb{ background-color: #67c5e3; border-radius: 0;}

.all_menu .scroll{ padding: 80px;}
.all_menu .ft{ display: flex; justify-content: space-between; align-items: flex-end; position: relative; z-index: 10;}
.all_menu .logo{ display: block;}
.all_menu .logo img{ display: block; height: 40px;}
.all_menu .btn_up{ display: flex; align-items: center; padding: 0 20px; height: 35px; border-radius: 20px; border: 1px solid #e5e5e5;}
.all_menu .btn_up p{ font-size: 14px;}
.all_menu .btn_up img{ display: block; margin: 0 0 0 10px; height: 10px;}

.all_menu .menu_ft{ margin: 30px 0 0 0; padding: 10px 30px; border-top: 1px solid #DDD; border-bottom: 1px solid #e5e5e5;}
.all_menu .menu_ft ul{ display: flex; justify-content: center; align-items: center; grid-gap: 0 50px;}
.all_menu .menu_ft ul li{}
.all_menu .menu_ft ul li a{ display: flex; justify-content: center; align-items: center; position: relative; height: 30px;}
.all_menu .menu_ft ul li a p{ font-size: 15px; color: #000;}

.all_menu .menu_fb{ padding: 30px 0;}
.all_menu .menu_fb > ul{}
.all_menu .menu_fb > ul > li{ position: relative; margin: 40px 0 0 0;}
.all_menu .menu_fb > ul > li:first-child{ margin: 0;}
.all_menu .menu_fb > ul > li > a{ display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 10; cursor: pointer;}
.all_menu .menu_fb > ul > li > a p{ font-size: 20px; font-weight: 700; color: #000;}
.all_menu .menu_fb > ul > li > a i{ font-size: 16px; color: #999; transition: all .2s;}
.all_menu .menu_fb > ul > li ul{ display: flex; flex-wrap: wrap; margin: 20px 0 0 0; padding: 20px 40px; border-radius: 5px; background: #f6f8fb;}
.all_menu .menu_fb > ul > li ul li{ width: 50%;}
.all_menu .menu_fb > ul > li ul li a{ display: flex; align-items: center; overflow: hidden; padding: 20px 0; font-size: 16px; color: rgba(0 0 0/80%); white-space: nowrap;}
.all_menu .menu_fb > ul > li:hover > a p{ color: #67c5e3;}
.all_menu .menu_fb > ul > li:hover > a i{ color: #67c5e3;}
.all_menu .menu_fb > ul > li ul:before{ background: rgba(255 255 255/10%);}
.all_menu .menu_fb > ul > li ul li a:hover{ font-weight: 700; color: #000;}
.all_menu .menu_fb > ul > li.on > a:before{ content: ""; position: absolute; bottom: -1px; right: 0; left: 0; height: 4px; border-radius: 4px; background: #67c5e3;}
.all_menu .menu_fb > ul > li.on > a p{ font-weight: 700; color: #67c5e3;}
.all_menu .menu_fb > ul > li.on > a i{ color: #67c5e3;}
.all_menu .menu_fb > ul > li ul li.on a{ font-weight: 700 !important; color: #FFF !important;}
.all_menu .close{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0 0 0/0.00001%);}
.all_menu .close i{ display: block; position: absolute; top: 50px; right: 50px; font-size: 24px; color: #FFF; cursor: pointer;}

.all_menu.on{ right: 0; left: 0; opacity: 1;}
.all_menu.on .row{ left: 0; opacity: 1;}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
}
@media(max-width: 767px){
    .all_menu .row{ left: -300px; max-width: 300px;}
    .all_menu .scroll{ padding: 30px;}
    .all_menu .ft{ display: flex; justify-content: space-between; align-items: flex-end; position: relative; z-index: 10;}
    .all_menu .logo img{ height: 30px;}

    .all_menu .menu_ft{ margin: 30px 0 0 0; padding: 10px 0;}
    .all_menu .menu_ft ul{ grid-gap: 0 30px;}
    .all_menu .menu_ft ul li a p{ font-size: 14px;}

    .all_menu .menu_fb > ul > li{ margin: 30px 0 0 0;}
    .all_menu .menu_fb > ul > li > a p{ font-size: 18px;}
    .all_menu .menu_fb > ul > li > a i{ font-size: 14px;}
    .all_menu .menu_fb > ul > li ul{ padding: 10px 20px;}
    .all_menu .menu_fb > ul > li ul li{ width: 33.333%;}
    .all_menu .menu_fb > ul > li ul li:last-child{ width: 100%;}
    .all_menu .menu_fb > ul > li ul li a{ font-size: 14px;}
    .all_menu .close i{ top: 20px; right: 20px; font-size: 24px;}
}


.header{ display: flex; justify-content: space-between; align-items: center; position: fixed; z-index: 100; top: 0; right: 0; left: 0; height: 80px; padding: 0 100px; background: rgba(255 255 255/100%); box-shadow: 0 0 0 1px rgba(0 0 0/10%); transition: all .3s;}
.header .fl{ display: flex; align-items: center; grid-gap: 50px;}
.header .fl .logo{ display: block;}
.header .fl .logo img{ display: block; height: 50px;}
.header .fl .menu{}
.header .fl .menu > ul{ display: flex; align-items: center; grid-gap: 40px;}
.header .fl .menu > ul > li{ position: relative;}
.header .fl .menu > ul > li > a{ display: flex; align-items: center; position: relative; height: 40px;}
.header .fl .menu > ul > li > a p{ font-size: 16px; font-weight: 700; color: #000;}
.header .fl .menu > ul > li > a i{ margin: 0 0 0 5px; font-size: 14px; color: #666; transition: all .2s;}
.header .fl .menu > ul > li.on > a p{ font-weight: 800; color: #67c5e3;}
.header .fl .menu > ul > li.on > a i{ color: #67c5e3;}
.header .fl .menu > ul > li.on > a:before{ content: ""; position: absolute; bottom: -5px; left: 50%; transform: translate(-50%,0); width: 6px; height: 6px; border-radius: 50%; background: #67c5e3;}

.header .fl .menu > ul > li ul{ overflow: hidden; position: absolute; z-index: 12; top: 20px; right: -70px; left: -20px; padding: 0; height: 0; border-radius: 5px; background: #FFF; opacity: 0; transition: all .2s;}
.header .fl .menu > ul > li ul li{}
.header .fl .menu > ul > li ul li a{ display: block; overflow: hidden; padding: 0 20px; height: 0; line-height: 35px; font-size: 15px; color: #000; white-space: nowrap; opacity: 0; transition: all .2s;}
.header .fl .menu > ul > li ul li a:hover{ background: #f6f8fb;}
.header .fl .menu > ul > li ul li.on a{ font-weight: 600; color: #67c5e3;}

.header .fl .menu > ul > li:hover > a i{ transform: rotate(180deg);}
.header .fl .menu > ul > li:hover > ul{ top: 35px; padding: 10px 0; height: auto; box-shadow: 0 0 0 1px rgba(0 0 0/10%); opacity: 1;}
.header .fl .menu > ul > li:hover > ul li a{ height: 35px; opacity: 1;}

.header .fr{ display: flex; align-items: center; grid-gap: 30px;}
.header .fr img{ display: block; width: 18px;}
.header .fr .btn_up{ display: flex; align-items: center; cursor: pointer;}
.header .fr .btn_up p{ font-size: 15px; color: #000;}
.header .fr .btn_up img{ display: block; margin: 0 0 0 5px; width: auto; height: 12px;}
.header .fr .btn_login{ display: flex; align-items: center; padding: 0 20px; height: 34px; border-radius: 20px; background: #67c5e3; cursor: pointer;}
.header .fr .btn_login p{ font-size: 13px; color: #FFF;}
.header .fr .btn_search{ cursor: pointer;}
.header .fr .btn_like{ cursor: pointer;}
.header .fr .all_menu_btn{ cursor: pointer;}
@media(max-width: 1301px){
    .header{ padding: 0 50px;}
}
@media(max-width: 1025px){
    .header .fl .menu{ display: none;}
    .header .fr .btn_up{ display: none;}
    .header .fr .btn_login{ display: none;}
}
@media(max-width: 767px){
    .header{ padding: 0 20px; height: 60px;}
    .header .fl .logo img{ height: 36px;}
    .header .fr{ grid-gap: 20px;}
}


.footer{ margin: 100px 0 0 0; border-top: 1px solid #e5e5e5;}
.footer .top{}
.footer .top .w_min{ display: flex; justify-content: space-between; padding: 60px 0;}
.footer .top .fr{ display: flex; grid-gap: 60px;}
.footer .top .logo{ width: 80px;}
.footer .top .logo img{ display: block; width: 100%;}
.footer .top .menu{}
.footer .top .menu .tit{ padding: 0 0 15px 0; font-size: 14px; color: #999;}
.footer .top .menu ul{ display: flex; grid-gap: 30px;}
.footer .top .menu ul li{}
.footer .top .menu ul li a{ font-size: 16px; font-weight: 600;}
.footer .top .tel{}
.footer .top .tel .tit{ padding: 0 0 15px 0; font-size: 14px; color: #999;}
.footer .top .tel .tel{ font-size: 26px; font-weight: 800;}
.footer .top .tel .time{ margin: 5px 0 0 0; font-size: 13px;}
.footer .bottom{}
.footer .bottom .w_min{ position: relative; padding: 60px 0 80px 0; border-top: 1px solid #e5e5e5;}
.footer .bottom .sns{ position: absolute; top: 60px; right: 0;}
.footer .bottom .sns ul{ display: flex; grid-gap: 15px;}
.footer .bottom .sns ul li{}
.footer .bottom .sns ul li a{ display: block; cursor: pointer;}
.footer .bottom .sns ul li a img{ width: 20px; filter: grayscale(100%);}
.footer .bottom .info{ display: flex; flex-wrap: wrap; grid-gap: 20px; max-width: 700px;}
.footer .bottom .info p{ font-size: 14px;}
.footer .bottom .info span{ display: block; width: 1px; height: 14px; background: #DDD;}
.footer .bottom .info span.pc_none{ display: none;}
.footer .bottom .menu{ margin: 40px 0 0 0;}
.footer .bottom .menu ul{ display: flex; align-items: center; grid-gap: 25px;}
.footer .bottom .menu ul li{}
.footer .bottom .menu ul li a{ font-size: 14px;}
.footer .bottom .menu ul li span{ display: block; width: 1px; height: 14px; background: #DDD;}
.footer .bottom .copy{ margin: 40px 0 0 0; font-size: 12px; color: #999; text-transform: uppercase;}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
    .footer .top .w_min{ flex-direction: column; align-items: center;}
    .footer .top .logo{ display: block; width: 70px;}
    .footer .top .logo img{ display: block; width: 100%;}
    .footer .top .fr{ margin: 50px 0 0 0;}
    .footer .bottom .sns{ position: initial;}
    .footer .bottom .info{ margin: 30px 0 0 0;}
}
@media(max-width: 767px){
    .footer{ margin: 60px 0 0 0;}
    .footer .top .w_min{ flex-direction: column; align-items: center; padding: 40px 0;}
    .footer .top .fr{ display: flex; flex-direction: column; align-items: center; grid-gap: 30px 0; margin: 0;}
    .footer .top .logo{ width: 70px;}
    .footer .top .logo img{ display: block; width: 100%;}
    .footer .top .menu{ margin: 30px 0 0 0;}
    .footer .top .menu .tit{ text-align: center;}
    .footer .top .menu ul{ grid-gap: 0 15px;}
    .footer .top .tel{ text-align: center;}
    .footer .bottom .w_min{ padding: 40px 0 60px 0;}
    .footer .bottom .sns ul{ justify-content: center;}
    .footer .bottom .info{ justify-content: center; grid-gap: 15px;}
    .footer .bottom .info p{ font-size: 14px;}
    .footer .bottom .info span{ display: none;}
    .footer .bottom .menu{ margin: 30px 0 0 0;}
    .footer .bottom .menu ul{ justify-content: center; grid-gap: 8px;}
    .footer .bottom .copy{ margin: 30px 0 0 0; text-align: center; font-size: 12px;}
}


.scroll_top{ position: fixed; z-index: 120; bottom: 100px; right: 50px; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 50px; height: 50px; border-radius: 5px; background: rgba(255 255 255/90%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 0 0 1px rgba(0 0 0/15%); cursor: pointer;}
.scroll_top i{ font-size: 18px;}
@media(max-width: 1301px){
    .scroll_top{ right: 25px; bottom: 30px;}
}
@media(max-width: 1025px){
    .scroll_top{ display: none;  position: initial; right: initial; bottom: initial; width: initial; height: initial; border-radius: initial; background: initial; backdrop-filter: initial; box-shadow: initial;}
}
@media(max-width: 767px){
}



/* .home_workshop_search{ position: relative; z-index: 50; background: linear-gradient(180deg, #ebf1fc , #FFF);} */
.home_workshop_search{ position: relative; z-index: 50; background: linear-gradient(180deg, #dff4fb , #FFF);}
.home_workshop_search .w_min{ position: relative; z-index: 10; padding: 80px 0;}
.home_workshop_search .title{ text-align: center; font-size: 26px; font-weight: 700; color: #000;}

.home_workshop_search .contents{ margin: 30px 0 0 0; position: relative;}
.home_workshop_search .menu{ position: relative; z-index: 30;}
.home_workshop_search .menu > ul{ display: flex; justify-content: center; grid-gap: 10px;}
.home_workshop_search .menu > ul > li{}
.home_workshop_search .menu > ul > li > .wrap{}
.home_workshop_search .menu > ul > li > .wrap > .head{ cursor: pointer;}
.home_workshop_search .menu > ul > li > .wrap > .head .icon{ display: flex; justify-content: center; align-items: center; width: 80px; height: 80px; border-radius: 5px; background: #FFF;}
.home_workshop_search .menu > ul > li > .wrap > .head .icon img{ display: block; width: 24px;}
.home_workshop_search .menu > ul > li > .wrap > .head p{ margin: 10px 0 0 0; text-align: center; font-size: 15px; color: #000;}

.home_workshop_search .popup{ position: absolute; z-index: 40; top: 50px; right: 0; left: 0; transition: all .2s;}
.home_workshop_search .popup .wrap{ overflow: hidden; position: relative; z-index: 10; height: 0; border-radius: 5px; background: #FFF; box-shadow: 0 5px 30px 1px rgba(0 0 0/20%); opacity: 0; transition: all .2s;}
.home_workshop_search .popup .wrap .head{ padding: 30px 50px; font-size: 26px; font-weight: 700; color: #000; transition: all .2s;}
.home_workshop_search .popup .wrap .scroll{ padding: 0 50px 0 50px; transition: all .2s;}
.home_workshop_search .popup .wrap .foot{ padding: 0 30px; border-top: 1px solid #e9e9e9; background: #f6f8fb; transition: all .2s;}
.home_workshop_search .popup .wrap .foot .type_btn_01{ margin: 0;}
.home_workshop_search .popup .wrap .foot .type_btn_01 a{ padding: 0 30px; height: 45px;}
.home_workshop_search .popup .wrap .foot .type_btn_01 a p{ font-size: 16px;}
.home_workshop_search .popup .close{ display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0 0 0/0.0000001%);}

.home_workshop_search .popup.on{ top: 80px;}
.home_workshop_search .popup.on .wrap{ height: auto; opacity: 1;}
.home_workshop_search .popup.on .wrap .head{ padding: 30px 50px;}
.home_workshop_search .popup.on .wrap .scroll{ padding: 0 50px 30px 50px;}
.home_workshop_search .popup.on .wrap .foot{ padding: 20px 30px;}
.home_workshop_search .popup.on .close{ display: block;}

.home_workshop_search .popup .checkbox{ flex: 1; display: flex; flex-wrap: wrap; grid-gap: 15px 0;}
.home_workshop_search .popup .checkbox label{ display: flex; align-items: center; width: 20%; cursor: pointer;}
.home_workshop_search .popup .checkbox label i{ display: flex; justify-content: center; align-items: center; width: 20px; height: 20px; border-radius: 5px; border: 1px solid #e5e5e5; background: #FFF; font-size: 12px; color: #FFF;}
.home_workshop_search .popup .checkbox label p{ margin: 0 0 0 5px; font-size: 14px; color: #000;}
.home_workshop_search .popup .checkbox label.on i{ border-color: #67c5e3; background: #67c5e3; color: #FFF;}
.home_workshop_search .popup .checkbox label.on p{ font-weight: 600;}

.home_workshop_search .popup .time{ position: relative; padding: 100px 0 0 0;}
.home_workshop_search .popup .time .line{ position: absolute; z-index: 10; top: 50px; right: 0; left: 0; height: 5px; background: #DDD;}
.home_workshop_search .popup .time .line .on{ position: relative; height: 5px; background: #67c5e3;}
.home_workshop_search .popup .time .line .on span{ display: block; position: absolute; z-index: 30; top: 50%; right: 0; transform: translate(50%,-50%); width: 20px; height: 20px; border-radius: 50%; background: #FFF; box-shadow: 0 1px 10px 0 rgba(0 0 0/50%); cursor: pointer;}
.home_workshop_search .popup .time .line .on p{ display: flex; align-items: center; position: absolute; z-index: 20; right: 0; transform: translate(50%,0); bottom: 30px; padding: 0 10px; height: 25px; border-radius: 5px; background: #67c5e3; font-size: 14px; color: #FFF;}
.home_workshop_search .popup .time ul{ display: flex; position: absolute; top: 50px; right: 0; left: 0; height: 5px;}
.home_workshop_search .popup .time ul:before{ content: ""; position: absolute; top: 5px; left: 0; width: 1px; height: 10px; background: #DDD;}
.home_workshop_search .popup .time ul li{ position: relative; width: 10%;}
.home_workshop_search .popup .time ul li:before{ content: ""; position: absolute; top: 5px; right: 0; width: 1px; height: 10px; background: #DDD;}
.home_workshop_search .popup .time ul li:first-child p{ position: absolute; top: 30px; left: 0; font-size: 12px; color: #666;}
.home_workshop_search .popup .time ul li:last-child p{ position: absolute; top: 30px; right: 0; font-size: 12px; color: #666;}
.home_workshop_search .popup .time .txt{ text-align: center; font-size: 16px;}


.home_workshop_search .search{ position: relative; margin: 30px auto 0 auto; max-width: 500px; width: 100%; min-height: 52px; border-radius: 5px; border: 2px solid #000;}
.home_workshop_search .search .btn{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 10; top: 50%; transform: translate(0,-50%); right: 0; width: 50px; height: 50px; cursor: pointer;}
.home_workshop_search .search .btn i{ font-size: 24px; color: #000;}
.home_workshop_search .search input{ display: flex; align-items: center; position: absolute; z-index: 1; top: 0; left: 0; margin: 0; padding: 0 50px 0 15px; width: 100%; height: 50px; border-radius: 0; border: 0; background: none; font-size: 15px; font-weight: 400; color: #000; outline: none; -webkit-appearance: none;}
.home_workshop_search .search input::placeholder{color:#666}
.home_workshop_search .fb{ display: flex; justify-content: space-between; margin: 20px auto 0 auto; max-width: 500px;}
.home_workshop_search .fb .fl{ flex: 1; display: flex;}
.home_workshop_search .fb .tit{ flex: 0 0 60px; line-height: 25px; font-size: 15px; font-weight: 500; color: #000;}
.home_workshop_search .fb .tag{ display: flex; flex-wrap: wrap; grid-gap: 5px;}
.home_workshop_search .fb .tag a{ display: flex; align-items: center; padding: 0 10px; height: 25px; border-radius: 5px; border: 1px solid rgba(0 0 0/10%); background: rgba(255 255 255/80%); cursor: pointer;}
.home_workshop_search .fb .tag a p{ font-size: 13px; color: #666; white-space: nowrap;}
.home_workshop_search .fb .tag a i{ margin: 0 0 0 5px; font-size: 12px; color: #666;}
.home_workshop_search .fb .all_close{ flex: 0 0 65px; display: flex; align-items: center; height: 25px; cursor: pointer;}
.home_workshop_search .fb .all_close i{ margin: 0 4px 0 0; font-size: 13px; color: #999;}
.home_workshop_search .fb .all_close p{ font-size: 13px; color: #999;}
.home_workshop_search .bg{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(/images/home_workshop_search_bg.png) no-repeat top center;}


@media(max-width: 1301px){
    .home_workshop_search .popup .checkbox label{ width: 25%;}
}
@media(max-width: 1025px){
}
@media(max-width: 767px){
    .home_workshop_search .w_min{ padding: 30px 0;}
    .home_workshop_search .title{ font-size: 20px;}

    .home_workshop_search .menu{ overflow: hidden; display: flex; justify-content: center; margin: 0 -20px; height: 85px;}
    .home_workshop_search .menu > ul{ overflow: auto; display: flex; justify-content: flex-start; grid-gap: 5px; padding: 0 20px; height: 100px;}
    .home_workshop_search .menu > ul > li > .wrap > .head .icon{ width: 60px; height: 60px;}
    .home_workshop_search .menu > ul > li > .wrap > .head .icon img{ width: 18px;}
    .home_workshop_search .menu > ul > li > .wrap > .head p{ margin: 10px 0 0 0; font-size: 12px; white-space: nowrap;}

    .home_workshop_search .search{ margin: 20px auto 0 auto; min-height: 47px;}
    .home_workshop_search .search .btn{ width: 45px; height: 45px;}
    .home_workshop_search .search .btn i{ font-size: 20px;}
    .home_workshop_search .search input{ padding: 0 45px 0 15px; height: 45px; font-size: 14px;}

    .home_workshop_search .popup{ top: 30px;}
    .home_workshop_search .popup .wrap .head{ font-size: 20px;}

    .home_workshop_search .popup.on{ top: 60px;}
    .home_workshop_search .popup.on .wrap .head{ padding: 20px 20px;}
    .home_workshop_search .popup.on .wrap .scroll{ padding: 0 20px 20px 20px;}
    .home_workshop_search .popup.on .wrap .foot{ padding: 20px 20px;}

    .home_workshop_search .popup .checkbox{ grid-gap: 15px 0;}
    .home_workshop_search .popup .checkbox label{ width: 50%;}

    .home_workshop_search .fb .tit{ flex: 0 0 60px; font-size: 13px;}
    .home_workshop_search .fb .tag{ display: flex; flex-wrap: wrap; grid-gap: 5px;}
    .home_workshop_search .fb .tag a p{ font-size: 12px;}
    .home_workshop_search .fb .tag a i{ margin: 0 0 0 10px; font-size: 10px;}
    .home_workshop_search .bg{ background: url(/images/home_workshop_search_bg.png) no-repeat top center; background-size: auto 50%;}

    .zui-slider ul li p{ font-size: 12px; white-space: nowrap;}
}


.home_banner_min{}
.home_banner_min .w_min{}
.home_banner_min ul{ display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 20px;}
.home_banner_min ul li{}
.home_banner_min ul li .wrap{ display: block; cursor: pointer; transition: all .2s;}
.home_banner_min ul li .wrap .img{ overflow: hidden; position: relative;}
.home_banner_min ul li .wrap .img .text{ position: absolute; z-index: 10; left: 30px; bottom: 30px;}
.home_banner_min ul li .wrap .img .text .en{ font-size: 15px; color: #FFF;}
.home_banner_min ul li .wrap .img .text .tit{ margin: 5px 0 0 0; font-size: 22px; font-weight: 700; color: #FFF;}
.home_banner_min ul li .wrap .img img{ display: block; width: 100%; border-radius: 5px; transition: all .2s;}
.home_banner_min ul li .wrap .txt{ margin: 10px 0 0 0; line-height: 1.2; font-size: 16px; color: #000;}
.home_banner_min ul li:nth-child(2) .wrap .img .text .en{ color: #000;}
.home_banner_min ul li:nth-child(2) .wrap .img .text .tit{ color: #000;}
.home_banner_min ul li .wrap:hover{ transform: scale(.96);}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
    .home_banner_min ul{ grid-template-columns: repeat(2,1fr); grid-gap: 40px 20px;}
}
@media(max-width: 767px){
    .home_banner_min ul{ grid-gap: 20px 10px;}
    .home_banner_min ul li .wrap .img .text{ left: 15px; bottom: 15px;}
    .home_banner_min ul li .wrap .img .text .en{ font-size: 12px;}
    .home_banner_min ul li .wrap .img .text .tit{ font-size: 18px;}
    .home_banner_min ul li .wrap .txt{ font-size: 14px;}
}


.home_banner{ margin: 80px 0 0 0;}
.home_banner .w_min{ position: relative; padding: 0 0 35px 0;}
.home_banner .rolling{ overflow: hidden;}
.home_banner .swiper-wrapper{}
.home_banner .swiper-wrapper .swiper-slide{}
.home_banner .swiper-wrapper .swiper-slide .wrap{ overflow: hidden; position: relative; height: 160px; border-radius: 5px;}
.home_banner .swiper-wrapper .swiper-slide .wrap .text{ display: flex; flex-direction: column; justify-content: center; position: absolute; z-index: 20; top: 0; bottom: 0; left: 100px;}
.home_banner .swiper-wrapper .swiper-slide .wrap .text .tit{ margin: 0 0 0 0; line-height: 1; font-size: 22px; font-weight: 700; color: #FFF; opacity: 0; transform: translate(30px,0); transition: all .3s;}
.home_banner .swiper-wrapper .swiper-slide .wrap .text .txt{ margin: 20px 0 0 0; line-height: 1.4; font-size: 15px; color: #FFF; opacity: 0; transform: translate(40px,0); transition: all .3s;}
.home_banner .swiper-wrapper .swiper-slide .wrap .img{ display: block; position: absolute; z-index: 10; right: 30%; bottom: 0; height: 90%; opacity: 0; transform: translate(-50px,0); transition: all .3s;}
.home_banner .swiper-wrapper .swiper-slide .wrap .bg{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 1; transform: scale(1);  transition: all .3s;}
.home_banner .swiper-wrapper .swiper-slide .wrap .bg_01{ background: url(/images/home_banner_bg_01.jpg) center/cover;}

.home_banner.on .swiper-wrapper .swiper-slide .wrap .text .tit{ opacity: 1; transform: translate(0,0) scale(1); transition: all 0.7s;}
.home_banner.on .swiper-wrapper .swiper-slide .wrap .text .txt{ opacity: 1; transform: translate(0,0) scale(1); transition: all 0.9s;}
.home_banner.on .swiper-wrapper .swiper-slide .wrap .img{ opacity: 1; transform: translate(0,0) scale(1); transition: all 1.1s;}
.home_banner.on .swiper-wrapper .swiper-slide .wrap .bg{ opacity: 1; transform: translate(0,0) scale(1.5); transition: all 10s;}

.home_banner .title{ position: absolute; left: 0; bottom: 0; line-height: 20px; font-size: 16px; color: #000;}

.home_banner .home_banner_btn{ display: flex; justify-content: center; align-items: center; position: absolute; bottom: 0; right: 30px; width: 20px; height: 20px; cursor: pointer;}
.home_banner .home_banner_btn .btn{ font-size: 18px; color: #000;}
.home_banner .home_banner_btn #home_banner_start{ display: block;}
.home_banner .home_banner_btn #home_banner_stop{ display: none;}
.home_banner .home_banner_btn.on #home_banner_start{ display: none;}
.home_banner .home_banner_btn.on #home_banner_stop{ display: block;}

.home_banner .home_banner_btn_prev{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 20; top: inherit; left: initial; right: 60px; bottom: 0; margin: 0; width: 20px; height: 20px; cursor: pointer;}
.home_banner .home_banner_btn_prev i{ font-size: 20px; color: #000;}
.home_banner .home_banner_btn_next{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 20; top: inherit; left: initial; right: 0; bottom: 0; margin: 0; width: 20px; height: 20px; cursor: pointer;}
.home_banner .home_banner_btn_next i{ font-size: 20px; color: #000;}

.home_banner .home_banner_pagination{ display: flex; justify-content: space-between; align-items: center; position: absolute; top: initial; left: initial; right: 100px; bottom: 0; margin: 0; width: 100px; height: 20px; font-size: 14px; color: rgba(0 0 0/0); transition: all .2s;}
.home_banner .home_banner_pagination:before{ content: ""; position: absolute; top: 50%; left: 20px; margin: -1px 0 0 0; width: 0; height: 2px; background: #000; transition: all 0s;}
.home_banner .home_banner_pagination:after{ content: ""; position: absolute; top: 50%; left: 20px; margin: -1px 0 0 0; width: 60px; height: 2px; background: rgba(0 0 0/20%);}
.home_banner .home_banner_pagination .swiper-pagination-current{ font-weight: 700; color: #000;}
.home_banner .home_banner_pagination .swiper-pagination-total{ color: rgba(0 0 0/60%);}
.home_banner.on .home_banner_pagination:before{ width: 60px; transition: all 5.5s;}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
    .home_banner .swiper-wrapper .swiper-slide .wrap .text{ left: 50px;}
    .home_banner .swiper-wrapper .swiper-slide .wrap .img{ right: 20%;}
}
@media(max-width: 767px){
    .home_banner{ margin: 40px 0 0 0;}
    .home_banner .swiper-wrapper .swiper-slide .wrap{ height: 140px;}
    .home_banner .swiper-wrapper .swiper-slide .wrap .text{ right: 40%; left: 30px;}
    .home_banner .swiper-wrapper .swiper-slide .wrap .text .tit{ font-size: 18px;}
    .home_banner .swiper-wrapper .swiper-slide .wrap .text .txt{ margin: 10px 0 0 0; font-size: 13px;}
    .home_banner .swiper-wrapper .swiper-slide .wrap .img{ right: 20px;}
    .home_banner .title{ font-size: 14px;}
}


.home_space{ margin: 80px 0 0 0;}
.home_space .head{ display: flex; justify-content: space-between; align-items: flex-end;}
.home_space .head .txt{ font-size: 15px; color: #999;}
.home_space .head .tit{ display: flex; align-items: center; margin: 5px 0 0 0; font-size: 22px; font-weight: 700;}
.home_space .head .more{ display: flex; align-items: center; grid-gap: 5px; cursor: pointer;}
.home_space .head .more span{ font-size: 16px; color: #999;}
.home_space .head .more p{ font-size: 15px; color: #999;}
.home_space .body{ position: relative;}
.home_space .rolling{ overflow: hidden; margin: 30px 0 0 0;}
.home_space .rolling .swiper-wrapper{}
.home_space .rolling .swiper-wrapper .swiper-slide{ height: initial;}
.home_space .rolling .swiper-wrapper .swiper-slide .wrap{ display: flex; flex-direction: column; overflow: hidden; height: 100%; transition: all .2s;}
.home_space .rolling .swiper-wrapper .swiper-slide .wrap .img{ display: block; position: relative; border-radius: 5px 5px 0 0;}
.home_space .rolling .swiper-wrapper .swiper-slide .wrap .img .tip{ display: flex; flex-wrap: wrap; grid-gap: 5px; position: absolute; z-index: 10; top: 10px; left: 10px;}
.home_space .rolling .swiper-wrapper .swiper-slide .wrap .img .tip div{ display: flex; align-items: center; padding: 0 10px; height: 25px; border-radius: 5px; font-size: 12px; font-weight: 500; color: #FFF;}
.home_space .rolling .swiper-wrapper .swiper-slide .wrap .img .tip div.sale{ background: #F00;}
.home_space .rolling .swiper-wrapper .swiper-slide .wrap .img .tip div.new{ background: #67c5e3;}
.home_space .rolling .swiper-wrapper .swiper-slide .wrap .img img{ display: block; width: 100%;}
.home_space .rolling .swiper-wrapper .swiper-slide .wrap .info{ flex: 1; position: relative; padding: 20px; border-radius: 0 0 5px 5px; border: 1px solid #e5e5e5; border-top: 0;}
.home_space .rolling .swiper-wrapper .swiper-slide .wrap .info .tit{ display: block; font-size: 18px; font-weight: 700; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;}
.home_space .rolling .swiper-wrapper .swiper-slide .wrap .info .txt{ display: block; margin: 10px 0 0 0; font-size: 14px; color: #999; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;}
.home_space .rolling .swiper-wrapper .swiper-slide .wrap .info .tag{ display: flex; flex-wrap: wrap; grid-gap: 5px; margin: 20px 0 0 0;}
.home_space .rolling .swiper-wrapper .swiper-slide .wrap .info .tag p{ display: flex; align-items: center; padding: 0 8px; height: 25px; border-radius: 5px; border: 1px solid rgba(0 0 0/5%); background: rgba(0 0 0/2%); font-size: 13px; color: rgba(0 0 0/80%); white-space: nowrap;}
.home_space .rolling .swiper-wrapper .swiper-slide .wrap .info .tag p i{ margin: 0 2px 0 0; color: #ffb000;}
.home_space .rolling .swiper-wrapper .swiper-slide .wrap .info .price{ display: flex; align-items: center; margin: 20px 0 0 0;}
.home_space .rolling .swiper-wrapper .swiper-slide .wrap .info .price p{ font-size: 18px; font-weight: 700; color: #F00;}
.home_space .rolling .swiper-wrapper .swiper-slide .wrap .info .price span{ margin: 0 0 -3px 2px; font-size: 14px; color: #999;}
.home_space .rolling .swiper-wrapper .swiper-slide .wrap .info .type_like_btn{ position: absolute; right: 20px; bottom: 20px; font-size: 20px; color: #000; cursor: pointer;}
.home_space .rolling .swiper-wrapper .swiper-slide .wrap .info .type_like_btn.on i{ color: #F00;}
.home_space .rolling .swiper-wrapper .swiper-slide .wrap:hover{ transform: scale(.96);}

.home_space .home_space_btn_prev{ position: absolute; top: 50%; left: -50px; width: 30px; height: 30px; transform: translate(0,-50%); cursor: pointer;}
.home_space .home_space_btn_prev i{ font-size: 24px; color: #000;}
.home_space .home_space_btn_next{ position: absolute; top: 50%; right: -50px; width: 30px; height: 30px; transform: translate(0,-50%); cursor: pointer;}
.home_space .home_space_btn_next i{ font-size: 24px; color: #000;}
@media(max-width: 1301px){
    .home_space .rolling .swiper-wrapper .swiper-slide .wrap:hover{ transform: scale(1);}
    .home_space .home_space_btn_prev{ left: -40px;}
    .home_space .home_space_btn_next{ right: -40px;}
}
@media(max-width: 1025px){
}
@media(max-width: 767px){
    .home_space{ margin: 40px 0 0 0;}
    .home_space .head .txt{ font-size: 13px;}
    .home_space .head .tit{ font-size: 18px;}
    .home_space .head .more span{ font-size: 13px;}
    .home_space .head .more p{ font-size: 13px;}
    .home_space .rolling{ margin: 20px -160px 0 -160px;}
    .home_space .rolling .swiper-wrapper .swiper-slide .wrap .info .tag{ flex-wrap: wrap;}

    .home_space .home_space_btn_prev{ display: none;}
    .home_space .home_space_btn_next{ display: none;}
}


.home_story{ margin: 80px 0 0 0;}
.home_story .head{ display: flex; justify-content: space-between; align-items: flex-end;}
.home_story .head .txt{ font-size: 15px; color: #999;}
.home_story .head .tit{ display: flex; align-items: center; margin: 5px 0 0 0; font-size: 22px; font-weight: 700;}
.home_story .head .more{ display: flex; align-items: center; grid-gap: 5px; cursor: pointer;}
.home_story .head .more span{ font-size: 16px; color: #999;}
.home_story .head .more p{ font-size: 15px; color: #999;}
.home_story .body{ position: relative;}
.home_story .rolling{ overflow: hidden; margin: 30px 0 0 0;}
.home_story .rolling .swiper-wrapper{}
.home_story .rolling .swiper-wrapper .swiper-slide{}
.home_story .rolling .swiper-wrapper .swiper-slide a{ display: block; position: relative; overflow: hidden; transition: all .2s;}
.home_story .rolling .swiper-wrapper .swiper-slide a .img{ border-radius: 5px 5px 0 0;}
.home_story .rolling .swiper-wrapper .swiper-slide a .img img{ display: block; width: 100%;}
.home_story .rolling .swiper-wrapper .swiper-slide a .info{ padding: 30px; border-radius: 0 0 5px 5px; border: 1px solid #e5e5e5; border-top: 0;}
.home_story .rolling .swiper-wrapper .swiper-slide a .info .tit{ font-size: 18px; font-weight: 700; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;}
.home_story .rolling .swiper-wrapper .swiper-slide a .info .txt{ margin: 10px 0 0 0; font-size: 14px; color: #999; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;}
.home_story .rolling .swiper-wrapper .swiper-slide a .info .fb{ display: flex; justify-content: space-between; align-items: center; margin: 20px 0 0 0;}
.home_story .rolling .swiper-wrapper .swiper-slide a .info .fb p{ display: flex; align-items: center; font-size: 13px; color: #666;}
.home_story .rolling .swiper-wrapper .swiper-slide a .info .fb p span{ margin: 0 3px 0 0; font-size: 18px; color: #999;}
.home_story .rolling .swiper-wrapper .swiper-slide a:hover{ transform: scale(.96);}

.home_story .home_story_btn_prev{ position: absolute; top: 50%; left: -50px; width: 30px; height: 30px; transform: translate(0,-50%); cursor: pointer;}
.home_story .home_story_btn_prev i{ font-size: 24px; color: #000;}
.home_story .home_story_btn_next{ position: absolute; top: 50%; right: -50px; width: 30px; height: 30px; transform: translate(0,-50%); cursor: pointer;}
.home_story .home_story_btn_next i{ font-size: 24px; color: #000;}
@media(max-width: 1301px){
    .home_story .rolling .swiper-wrapper .swiper-slide a:hover{ transform: scale(1);}
}
@media(max-width: 1025px){
    .home_story .rolling .swiper-wrapper .swiper-slide a .info{ padding: 20px 20px;}
}
@media(max-width: 767px){
    .home_story{ margin: 40px 0 0 0;}
    .home_story .head .txt{ font-size: 13px;}
    .home_story .head .tit{ font-size: 18px;}
    .home_story .head .more span{ font-size: 13px;}
    .home_story .head .more p{ font-size: 13px;}

    .home_story .rolling{ margin: 20px 0 0 0;}
    .home_story .rolling .swiper-wrapper .swiper-slide a .info .fb{ display: grid; grid-gap: 5px 0; margin: 15px 0 0 0;}
    .home_story .rolling .swiper-wrapper .swiper-slide a .info .fb p{ font-size: 12px;}
    .home_story .rolling .swiper-wrapper .swiper-slide a .info .fb p span{ font-size: 16px;}
}




.space_list{ margin: 30px 0 0 0;}
.space_list ul{ display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 20px;}
.space_list ul li{}
.space_list ul li .wrap{ overflow: hidden; display: flex; flex-direction: column; height: 100%; transition: all .2s;}
.space_list ul li .wrap .img{ display: block; position: relative; border-radius: 5px 5px 0 0;}
.space_list ul li .wrap .img .tip{ display: flex; flex-wrap: wrap; grid-gap: 5px; position: absolute; z-index: 10; top: 10px; left: 10px;}
.space_list ul li .wrap .img .tip div{ display: flex; align-items: center; padding: 0 10px; height: 25px; border-radius: 5px; font-size: 12px; font-weight: 500; color: #FFF;}
.space_list ul li .wrap .img .tip div.sale{ background: #F00;}
.space_list ul li .wrap .img .tip div.new{ background: #67c5e3;}
.space_list ul li .wrap .img img{ display: block; width: 100%;}
.space_list ul li .wrap .info{ flex: 1; position: relative; padding: 20px; border-radius: 0 0 5px 5px; border: 1px solid #e5e5e5; border-top: 0;}
.space_list ul li .wrap .info .tit{ display: block; font-size: 18px; font-weight: 700; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;}
.space_list ul li .wrap .info .txt{ display: block; margin: 10px 0 0 0; font-size: 14px; color: #999; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;}
.space_list ul li .wrap .info .tag{ display: flex; flex-wrap: wrap; grid-gap: 5px; margin: 20px 0 0 0;}
.space_list ul li .wrap .info .tag p{ display: flex; align-items: center; padding: 0 8px; height: 25px; border-radius: 5px; border: 1px solid rgba(0 0 0/5%); background: rgba(0 0 0/2%); font-size: 13px; color: rgba(0 0 0/80%);}
.space_list ul li .wrap .info .tag p i{ margin: 0 2px 0 0; color: #ffb000;}
.space_list ul li .wrap .info .price{ display: flex; align-items: center; margin: 20px 0 0 0;}
.space_list ul li .wrap .info .price p{ font-size: 18px; font-weight: 700; color: #F00;}
.space_list ul li .wrap .info .price span{ margin: 0 0 -3px 2px; font-size: 14px; color: #999;}
.space_list ul li .wrap .info .type_like_btn{ position: absolute; right: 20px; bottom: 20px; font-size: 20px; color: #000; cursor: pointer;}
.space_list ul li .wrap .info .type_like_btn.on i{ color: #F00;}
.space_list ul li .wrap:hover{ transform: scale(.96);}
@media(max-width: 1301px){
    .space_list ul li .wrap:hover{ transform: scale(1);}
}
@media(max-width: 1025px){
    .space_list ul{ grid-template-columns: repeat(2,1fr);}
}
@media(max-width: 767px){
    .space_list{ margin: 20px 0 0 0;}
    .space_list ul{ grid-template-columns: repeat(1,1fr); grid-gap: 10px;}
}


.space_detail_layout{ position: relative; padding: 0 400px 0 0;}
.space_detail_layout > .fl{}
.space_detail_layout > .fr{ position: absolute; top: 0; right: 0;}
.space_detail_layout > .fr .btn_open{ display: none;}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
    .space_detail_layout{ padding: 0;}
    .space_detail_layout > .fr{ position: fixed; z-index: 200; top: initial; right: 0; bottom: 60px; left: 0;}
    .space_detail_layout > .fr .btn_open{ display: flex; justify-content: center; align-items: center; grid-gap: 0 10px; height: 50px; background: #333;}
    .space_detail_layout > .fr .btn_open p{ font-size: 16px; color: #FFF;}
    .space_detail_layout > .fr .btn_open i{ transform: translate(0,-1px); font-size: 12px; color: #FFF; transition: all .2s;}
    .space_detail_layout > .fr.off .btn_open i{ transform: rotate(180deg);}
}
@media(max-width: 767px){
    .space_detail_layout > .fr .btn_open{ height: 40px;}
    .space_detail_layout > .fr .btn_open p{ font-size: 14px;}
}


.space_detail_head{ width: 370px;}
.space_detail_head > .ft{}
.space_detail_head > .fb{ margin: 10px 0 0 0; padding: 30px; border-radius: 5px; background: #FFF; border: 1px solid rgba(0 0 0/10%); box-shadow: 0 10px 50px 1px rgba(0 0 0/10%);}

.space_detail_head .btn{ display: flex; grid-gap: 0 10px;}
.space_detail_head .btn a{ display: flex; justify-content: center; align-items: center; grid-gap: 0 10px; width: 50%; height: 50px; border-radius: 5px; background: #FFF; border: 1px solid rgba(0 0 0/10%); border: 1px solid #e5e5e5; cursor: pointer; transition: all .2s;}
.space_detail_head .btn a i{ font-size: 18px; color: #000; transform: translate(0,-1px);}
.space_detail_head .btn a p{ font-size: 16px; color: #000;}
.space_detail_head .btn a:hover{ box-shadow: 0 5px 30px 0 rgba(0 0 0/5%);}
.space_detail_head .btn a.on{ border-color: #F00; background: #F00;}
.space_detail_head .btn a.on i{ color: #FFF;}
.space_detail_head .btn a.on p{ color: #FFF;}
.space_detail_head .type_like_btn{ cursor: pointer;}
.space_detail_head .type_like_btn i{ font-size: 24px; color: #000;}
.space_detail_head .type_like_btn.on i{ color: #F00;}

.space_detail_head .price{ display: flex; align-items: flex-end;}
.space_detail_head .price p{ font-size: 22px; font-weight: 700; color: #F00;}
.space_detail_head .price span{ padding: 0 0 1px 4px; font-size: 14px; color: #666;}

.space_detail_head .price_txt{ display: flex; justify-content: space-between; align-items: center; margin: 15px 0 0 0; padding: 10px 15px; border-radius: 5px; border: 1px solid #e5e5e5; background: #f6f8fb;}
.space_detail_head .price_txt p{ font-size: 14px; color: #999;}
.space_detail_head .price_txt span{ font-size: 14px; color: #666;}

.space_detail_head .info{ margin: 15px 0; padding: 10px 15px; border-radius: 5px; border: 1px solid #e5e5e5;}
.space_detail_head .info ul{}
.space_detail_head .info ul li{ display: flex; padding: 6px 0;}
.space_detail_head .info ul li .i_tit{ width: 80px; font-size: 14px; color: #666;}
.space_detail_head .info ul li .i_txt{ display: flex; align-items: center; flex: 1; width: 100%; font-size: 14px;}
.space_detail_head .info ul li .i_txt p{ font-size: 14px; color: #000;}
.space_detail_head .info ul li .i_txt p b{ font-weight: 500;}
.space_detail_head .info ul li .star{ display: flex; align-items: center; margin: 0 0 0 5px; padding: 0 0 4px 0;}
.space_detail_head .info ul li .star i{ margin: 0 0 -1px 1px; font-size: 16px; color: #DDD;}
.space_detail_head .info ul li .star i.on{ color: #ffb000;}
.space_detail_head .info ul li .link{ border-bottom: 1px solid #00bef5; color: #00bef5; cursor: pointer;}


.space_detail_head .in{ display: grid; grid-gap: 5px 0; margin: 15px 0 0 0;}
.space_detail_head .in .user{ position: relative;}
.space_detail_head .in .user .btn{ display: flex; flex-direction: column; justify-content: center; position: absolute; z-index: 10; top: 0; right: 15px; bottom: 0;}
.space_detail_head .in .user .btn i{ font-size: 14px; color: #000; cursor: pointer; transition: all .2s;}
.space_detail_head .in .user .btn i:hover{ background: #f5f5f5;}
.space_detail_head .in .user input{ display: flex; align-items: center; padding: 0 15px; width: 100%; height: 45px; border-radius: 5px; border: 1px solid #e5e5e5; font-size: 14px; color: #000; outline: none; -webkit-appearance: none;}
.space_detail_head .in .user input:focus{ border: 1px solid #67c5e3;}

.space_detail_head .price_ok{ margin: 20px 0 0 0;}
.space_detail_head .price_ok .tit{ display: flex; justify-content: space-between; align-items: flex-end; font-size: 14px; color: #666;}
.space_detail_head .price_ok .tit span{ font-size: 12px;}
.space_detail_head .price_ok .txt{ margin: 10px 0 0 0; padding: 10px 15px; border-radius: 5px; border: 1px solid #e5e5e5; background: #f6f8fb; text-align: center;}
.space_detail_head .price_ok .txt span{ display: block; padding: 0 0 5px 0; font-size: 14px; color: #000; text-decoration: line-through;}
.space_detail_head .price_ok .txt p{ font-size: 22px; font-weight: 700; color: #F00;}

.space_detail_head .button{ display: flex; grid-gap: 0 6px; margin: 15px 0 0 0;}
.space_detail_head .button a{ display: flex; justify-content: center; align-items: center; width: 100%; height: 50px; border-radius: 5px; cursor: pointer; transition: all .2s;}
.space_detail_head .button a{ background: #67c5e3;}
.space_detail_head .button a p{ font-weight: 700; color: #FFF;}
.space_detail_head .button a:hover{ box-shadow: 0 5px 30px 0 rgba(0 0 0/10%);}

.space_detail_head.on{ position: fixed; z-index: 10; top: 110px; right: 50%; margin: 0 -600px 0 0;}
@media(max-width: 1301px){
    .space_detail_head.on{ right: 50px; margin: 0;}
}
@media(max-width: 1025px){
    .space_detail_head{ width: auto;}
    .space_detail_head > .ft{}
    .space_detail_head > .fb{ margin: 0; padding: 30px; border-radius: 0; background: #FFF; border: 0; border-top: 1px solid #e5e5e5; box-shadow: 0;}

    .space_detail_head .btn{ grid-gap: 0;}
    .space_detail_head .btn a{ border-radius: 0; border: 0;}
    .space_detail_head .btn a:first-child{ border-right: 1px solid #e5e5e5;}

    .space_detail_head.on{ position: initial;}
}
@media(max-width: 767px){
    .space_detail_head > .fb{ padding: 20px;}
    .space_detail_head .btn a{ height: 40px;}
    .space_detail_head .btn a i{ font-size: 16px; transform: translate(0,-1px);}
    .space_detail_head .btn a p{ font-size: 14px;}

    .space_detail_head .price p{ font-size: 18px;}
    .space_detail_head .price span{ font-size: 12px;}
    .space_detail_head .price_txt{ margin: 10px 0 0 0;}
    .space_detail_head .price_txt p{ font-size: 12px;}
    .space_detail_head .price_txt span{ font-size: 12px;}

    .space_detail_head .info{ margin: 10px 0;}
    .space_detail_head .in{ margin: 10px 0 0 0;}

    .space_detail_head .price_ok .txt{ display: flex; justify-content: space-between; align-items: center;}
    .space_detail_head .price_ok .txt p{ font-size: 18px;}

    .space_detail_head .button a{ height: 45px;}
}


.space_detail_info{}
.space_detail_info .ft{ display: flex; grid-gap: 0 5px;}
.space_detail_info .ft .sale{ display: flex; align-items: center; padding: 0 20px; height: 35px; border-radius: 50px; background: #F00; font-size: 14px; font-weight: 500; color: #FFF;}
.space_detail_info .ft .new{ display: flex; align-items: center; padding: 0 20px; height: 35px; border-radius: 50px; background: #67c5e3; font-size: 14px; font-weight: 500; color: #FFF;}
.space_detail_info .ft .tag{ display: flex; align-items: center; padding: 0 20px; height: 35px; border-radius: 50px; border: 1px solid #000; font-size: 14px; font-weight: 500; color: #000;}
.space_detail_info .tit{ display: flex; margin: 20px 0 0 0; line-height: 36px; font-size: 26px; font-weight: 700; color: #000;}
.space_detail_info .address{ display: flex; justify-content: space-between; align-items: center; margin: 10px 0 0 0;}
.space_detail_info .address .txt{ display: flex; align-items: center;}
.space_detail_info .address .txt i{ margin: 0 3px 2px 0; font-size: 16px; color: #666;}
.space_detail_info .address .txt p{ font-size: 16px; color: #666;}
.space_detail_info .btn_map{ display: flex; align-items: center; grid-gap: 0 5px;}
.space_detail_info .btn_map a{ display: flex; justify-content: center; align-items: center; padding: 0 16px; height: 36px; border-radius: 20px; border: 1px solid #DDD; cursor: pointer; transition: all .3s;}
.space_detail_info .btn_map a img{ display: block; margin: 0 5px 0 0; height: 16px;}
.space_detail_info .btn_map a p{ padding: 0 0 0 0; font-size: 13px; color: #333;}
.space_detail_info .btn_map a:hover{ border-color: rgba(39 90 169/20%); background: rgba(39 90 169/10%);}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
}
@media(max-width: 767px){
    .space_detail_info .ft .sale{ padding: 0 15px; height: 30px; font-size: 12px;}
    .space_detail_info .ft .new{ padding: 0 15px; height: 30px; font-size: 12px;}
    .space_detail_info .ft .tag{ padding: 0 15px; height: 30px; font-size: 12px;}

    .space_detail_info .tit{ margin: 15px 0 0 0; line-height: 30px; font-size: 20px;}
    .space_detail_info .address{ display: block;}
    .space_detail_info .address .txt i{ margin: 0 3px 0 0; font-size: 14px;}
    .space_detail_info .address .txt p{ font-size: 14px;;}
    .space_detail_info .btn_map{ margin: 20px 0 0 0;}
    .space_detail_info .btn_map a{ width: 33.333%; padding: 0 0; height: 35px;}
    .space_detail_info .btn_map a img{ height: 12px;}
    .space_detail_info .btn_map a p{ font-size: 12px;}
}


.space_detail_rolling{ margin: 30px 0 0 0;}
.space_detail_rolling .max{ flex: 1; width: 100%; overflow: hidden; position: relative; border-radius: 5px 5px 0 0;}
.space_detail_rolling .max .swiper-wrapper{}
.space_detail_rolling .max .swiper-wrapper .swiper-slide{}
.space_detail_rolling .max .swiper-wrapper .swiper-slide .img{}
.space_detail_rolling .max .swiper-wrapper .swiper-slide .img img{ display: block; width: 100%;}
.space_detail_rolling .max .swiper-button-prev{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 50; top: 50%; transform: translate(0,-50%); left: 20px; margin: 0; opacity: 0; cursor: pointer; transition: all .3s;}
.space_detail_rolling .max .swiper-button-prev:after{ font-size: 30px; color: #FFF; transition: all .2s;}
.space_detail_rolling .max .swiper-button-next{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 50; top: 50%; transform: translate(0,-50%); right: 20px; margin: 0; opacity: 0; cursor: pointer; transition: all .3s;}
.space_detail_rolling .max .swiper-button-next:after{ font-size: 30px; color: #FFF; transition: all .2s;}
.space_detail_rolling .max:hover .swiper-button-prev{ opacity: 1;}
.space_detail_rolling .max:hover .swiper-button-next{ opacity: 1;}
.space_detail_rolling .min{ overflow: hidden; padding: 20px; border-radius: 0 0 5px 5px; border: 1px solid #e5e5e5; border-top: 0;}
.space_detail_rolling .min .swiper-wrapper{}
.space_detail_rolling .min .swiper-wrapper .swiper-slide{ cursor: pointer; width: auto; height: auto;}
.space_detail_rolling .min .swiper-wrapper .swiper-slide .img{ width: 80px; border-radius: 5px; opacity: 0.3; filter: grayscale(50%);}
.space_detail_rolling .min .swiper-wrapper .swiper-slide .img img{ display: block; width: 100%;}
.space_detail_rolling .min .swiper-wrapper .swiper-slide.swiper-slide-thumb-active .img{ opacity: 1; filter: grayscale(0);}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
}
@media(max-width: 767px){
    .space_detail_rolling .min{ padding: 10px;}
}


.space_detail_body{ margin: 60px 0 0 0;}
.space_detail_body .scroll_menu{}
.space_detail_body .scroll_menu ul{ display: flex; position: relative; border-radius: 5px 5px 0 0; background: #f6f8fb;}
.space_detail_body .scroll_menu ul li{ width: 25%;}
.space_detail_body .scroll_menu ul li a{ display: flex; justify-content: center; align-items: center; position: relative; height: 70px; border-bottom: 1px solid #e5e5e5; cursor: pointer;}
.space_detail_body .scroll_menu ul li a p{ font-size: 16px; font-weight: 500; color: #000;}
.space_detail_body .scroll_menu ul li.on a:before{ content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 3px; background: #67c5e3;}
.space_detail_body .scroll_menu ul li.on a p{ font-size: 16px; font-weight: 700; color: #67c5e3;}
.space_detail_body .scroll_body{ margin: 40px 0 0 0;}
.space_detail_body .scroll_body .title{ padding: 0 0 20px 0; font-size: 22px; font-weight: 700; color: #000;}
.space_detail_body .scroll_body .title.mt{ margin: 60px 0 0 0;}
.space_detail_body .scroll_body .title span{ font-weight: 700; color: #F00;}
.space_detail_body .scroll_body pre{ padding: 50px; border-radius: 16px; border: 1px solid rgba(0 0 0/15%); background: #; white-space: pre-line; line-height: 1.8; font-size: 17px;}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
}
@media(max-width: 767px){
    .space_detail_body{ margin: 40px 0 0 0;}
    .space_detail_body .scroll_menu ul{ border-radius: 5px;}
    .space_detail_body .scroll_menu ul li a{ height: 60px; border: 0;}
    .space_detail_body .scroll_menu ul li a p{ font-size: 16px;}
    .space_detail_body .scroll_menu ul li.on a:before{ display: none;}
    .space_detail_body .scroll_menu ul li.on a p{ font-size: 16px;}
    .space_detail_body .scroll_body .title{ padding: 0 0 15px 0; font-size: 20px;}
    .space_detail_body .scroll_body .title.mt{ margin: 40px 0 0 0;}
    .space_detail_body .scroll_body pre{ padding: 20px; border-radius: 5px; font-size: 14px;}
}


.space_detail_intro{}
.space_detail_intro img{ display: block; max-width: 100%; height: auto; border-radius: 5px;}
.space_detail_intro .t1{ margin: 20px 0 0 0; font-size: 18px; font-weight: 500; color: #000;}
.space_detail_intro .t2{ margin: 20px 0 0 0; line-height: 1.4; font-size: 16px; color: #000;}
.space_detail_intro .t3{ margin: 20px 0 0 0; line-height: 1.4; font-size: 14px; font-weight: 500; color: #F00;}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
}
@media(max-width: 767px){
}


.space_detail_intro_2{ margin: 60px 0 0 0;}
.space_detail_intro_2 > ul{}
.space_detail_intro_2 > ul > li{  border-top: 1px solid #e5e5e5;}
.space_detail_intro_2 > ul > li > .row{ padding: 40px 0;}
.space_detail_intro_2 > ul > li:last-child > .row{ padding-bottom: 0;}
.space_detail_intro_2 > ul > li > .row .head{ padding: 0 0 15px 0; font-size: 18px; font-weight: 600; color: #000;}
.space_detail_intro_2 > ul > li > .row .gallery{ flex: 1; width: 100%;}
.space_detail_intro_2 > ul > li > .row .gallery ul{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 20px 10px;}
.space_detail_intro_2 > ul > li > .row .gallery ul li{}
.space_detail_intro_2 > ul > li > .row .gallery ul li .row{}
.space_detail_intro_2 > ul > li > .row .gallery ul li .row .img{ border-radius: 5px;}
.space_detail_intro_2 > ul > li > .row .gallery ul li .row .img img{ display: block; width: 100%;}
.space_detail_intro_2 > ul > li > .row .gallery ul li .row .tit{ margin: 10px 0 0 0; padding: 0; text-align: center; line-height: 1; font-size: 14px; font-weight: 400; color: #000;}
.space_detail_intro_2 > ul > li > .row .text{ flex: 1; line-height: 1.4; font-size: 14px; color: #000;}
.space_detail_intro_2 > ul > li > .row .info{ margin: -10px 0 0 0;}
.space_detail_intro_2 > ul > li > .row .info .li{ display: flex; padding: 10px 0;}
.space_detail_intro_2 > ul > li > .row .info .li p{ display: flex; align-items: center; width: 120px; height: 30px; font-size: 14px; color: #666;}
.space_detail_intro_2 > ul > li > .row .info .li span{ flex: 1; width: 100%; display: flex; flex-wrap: wrap; grid-gap: 5px;}
.space_detail_intro_2 > ul > li > .row .info .li font{ display: flex; align-items: center; padding: 0 15px; height: 30px; border-radius: 5px; background: #f5f5f5; font-size: 14px; font-weight: 400; color: #000;}
.space_detail_intro_2 > ul > li > .row .map iframe{ width: 100% !important;}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
}
@media(max-width: 767px){
    .space_detail_intro_2{ margin: 40px 0 0 0;}
    .space_detail_intro_2 > ul > li > .row{ padding: 30px 0;}
    .space_detail_intro_2 > ul > li > .row .gallery ul{ grid-template-columns: repeat(2,1fr);}
    .space_detail_intro_2 > ul > li > .row .text{ flex: 1; line-height: 1.4; font-size: 14px; color: #000;}
    .space_detail_intro_2 > ul > li > .row .info{ margin: -10px 0 0 0;}
    .space_detail_intro_2 > ul > li > .row .info .li p{ width: 100px;}
    .space_detail_intro_2 > ul > li > .row .map iframe{ height: 200px;}
}



.space_detail_guide{ display: grid; grid-gap: 20px 0;}
.space_detail_guide .top_tit{ display: flex; align-items: center; margin: 40px 0 0 0;}
.space_detail_guide .top_tit i{ font-size: 24px; color: #67c5e3;}
.space_detail_guide .top_tit p{ margin: 0 0 0 5px; font-size: 18px; font-weight: 700; color: #67c5e3;}
.space_detail_guide .top_tit:first-child{ margin-top: 0;}
.space_detail_guide .wrap{ display: flex; align-items: center; padding: 30px 30px 30px 0; border-radius: 5px; border: 1px solid #e5e5e5;}
.space_detail_guide .wrap .fl{ flex: 0 0 200px; text-align: center;}
.space_detail_guide .wrap .fl p{ line-height: 1.2; font-size: 18px; font-weight: 500; color: #000;}
.space_detail_guide .wrap .fr{ flex: 1;}
.space_detail_guide .wrap .fr .txt_01{ display: grid; grid-gap: 10px 0;}
.space_detail_guide .wrap .fr .txt_01 li{ display: flex;}
.space_detail_guide .wrap .fr .txt_01 li i{ line-height: 1.4; font-size: 18px; color: #67c5e3; transform: translate(0,-2px);}
.space_detail_guide .wrap .fr .txt_01 li p{ margin: 0 0 0 10px; line-height: 1.4; font-size: 16px; color: #000;}
.space_detail_guide .wrap .fr .txt_02{ line-height: 1.4; font-size: 16px; color: #000;}
.space_detail_guide .wrap .fr .txt_02 i{ margin: 0 10px 0 0; line-height: 1.4; font-size: 20px; color: #67c5e3; transform: translate(0,2px);}
.space_detail_guide .wrap .fr .txt_03{ display: grid; grid-template-columns: repeat(4,1fr);}
.space_detail_guide .wrap .fr .txt_03 li{ display: flex; flex-direction: column; align-items: center;}
.space_detail_guide .wrap .fr .txt_03 li i{ display: flex; justify-content: center; align-items: center; width: 80px; height: 80px; border-radius: 50%; border: 1px solid #e5e5e5; font-size: 30px; color: #67c5e3;}
.space_detail_guide .wrap .fr .txt_03 li p{ margin: 10px 0 0 0; font-size: 16px; color: #000;}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
}
@media(max-width: 767px){
    .space_detail_guide{ grid-gap: 10px 0;}
    .space_detail_guide .top_tit i{ font-size: 20px;}
    .space_detail_guide .top_tit p{ font-size: 16px;}
    .space_detail_guide .wrap{ padding: 20px 20px 20px 0;}
    .space_detail_guide .wrap .fl{ flex: 0 0 120px;}
    .space_detail_guide .wrap .fl p{ font-size: 16px;}
    .space_detail_guide .wrap .fr .txt_01 li i{ font-size: 16px;}
    .space_detail_guide .wrap .fr .txt_01 li p{ font-size: 14px;}
    .space_detail_guide .wrap .fr .txt_02{ font-size: 14px;}
    .space_detail_guide .wrap .fr .txt_02 i{ font-size: 16px;}
    .space_detail_guide .wrap .fr .txt_03{ grid-template-columns: repeat(2,1fr); grid-gap: 20px 10px;}
    .space_detail_guide .wrap .fr .txt_03 li i{ width: 60px; height: 60px; font-size: 24px;}
    .space_detail_guide .wrap .fr .txt_03 li p{ font-size: 14px;}
}


.space_detail_refund{ display: grid; grid-gap: 20px 0;}
.space_detail_refund .wrap{}
.space_detail_refund .wrap{ display: flex; align-items: center; padding: 30px 30px 30px 0; border-radius: 5px; border: 1px solid #e5e5e5;}
.space_detail_refund .wrap .fl{ flex: 0 0 200px; text-align: center;}
.space_detail_refund .wrap .fl p{ line-height: 1.2; font-size: 18px; font-weight: 500; color: #000;}
.space_detail_refund .wrap .fr{ flex: 1;}
.space_detail_refund .wrap .fr ul{ display: grid; grid-gap: 10px 0;}
.space_detail_refund .wrap .fr ul li{ display: flex; position: relative; padding: 0 0 0 15px; line-height: 1.4; font-size: 16px; color: #000;}
.space_detail_refund .wrap .fr ul li:before{ content: ""; display: block; position: absolute; top: 8px; left: 0; width: 4px; height: 4px; border-radius: 50%; background: #CCC;}
.space_detail_refund .wrap .fr ul li.tit{ padding: 0; font-size: 18px; font-weight: 700;}
.space_detail_refund .wrap .fr ul li.tit:before{ display: none;}
.space_detail_refund .wrap .fr ul li i{ margin: 0 10px 0 0; font-size: 16px; color: #000; transform: translate(0,2px);}
.space_detail_refund .footer-wrapper{}
.space_detail_refund .footer-wrapper .fl{}
.space_detail_refund .footer-wrapper .fl .tit{}
.space_detail_refund .footer-wrapper .fr{}
.space_detail_refund .footer-wrapper .fr ul{}
.space_detail_refund .footer-wrapper .fr ul li{}
.space_detail_refund .footer-wrapper .fr ul li a{}
.space_detail_refund .footer-wrapper .fr ul li a .xi-call{}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
}
@media(max-width: 767px){
    .space_detail_refund{ display: grid; grid-gap: 20px 0;}
    .space_detail_refund .wrap{ display: block; padding: 20px;}
    .space_detail_refund .wrap .fl{ flex: initial; padding: 0 0 15px 0; text-align: left;}
    .space_detail_refund .wrap .fl p{ font-size: 16px; font-weight: 700;}
    .space_detail_refund .wrap .fr{ flex: 1;}
    .space_detail_refund .wrap .fr ul li{ font-size: 14px;}
    .space_detail_refund .wrap .fr ul li.tit{ font-size: 16px; font-weight: 500;}
    .space_detail_refund .wrap .fr ul li i{ font-size: 14px;}
}


.space_detail_review_head{ display: grid; grid-gap: 20px 0;}
.space_detail_review_head .wrap{ display: flex; align-items: center;}
.space_detail_review_head .wrap .fl{ flex: 0 0 60px; margin: 0 50px 0 0;}
.space_detail_review_head .wrap .fl img{ display: block; width: 100%;}
.space_detail_review_head .wrap .fr{ flex: 1; padding: 30px; border-radius: 5px; background: #f6f8fb;}
.space_detail_review_head .wrap .fr .t1{ font-size: 18px; font-weight: 700; color: #000;}
.space_detail_review_head .wrap .fr .t2{ margin: 10px 0 0 0; line-height: 1.4; font-size: 16px; color: #000;}
.space_detail_review_head .wrap:nth-child(2){ flex-direction: row-reverse;}
.space_detail_review_head .wrap:nth-child(2) .fl{ margin: 0 0 0 50px;}
.space_detail_review_head .wrap:nth-child(4){ flex-direction: row-reverse;}
.space_detail_review_head .wrap:nth-child(4) .fl{ margin: 0 0 0 50px;}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
}
@media(max-width: 767px){
    .space_detail_review_head{ grid-gap: 10px 0;}
    .space_detail_review_head .wrap .fl{ flex: 0 0 40px; margin: 0 20px 0 0;}
    .space_detail_review_head .wrap .fr{ padding: 20px;}
    .space_detail_review_head .wrap .fr .t1{ font-size: 16px;}
    .space_detail_review_head .wrap .fr .t2{ font-size: 14px;}
    .space_detail_review_head .wrap:nth-child(2) .fl{ margin: 0 0 0 20px;}
    .space_detail_review_head .wrap:nth-child(4) .fl{ margin: 0 0 0 20px;}
}


.space_detail_review_list{ border-radius: 5px; border: 1px solid #e5e5e5;}
.space_detail_review_list .head{ display: flex; border-bottom: 1px solid #e5e5e5;}
.space_detail_review_list .head .fl{ display: flex; justify-content: center; align-items: center; width: 50%;}
.space_detail_review_list .head .fl .star{ display: flex; flex-direction: column; align-items: center;}
.space_detail_review_list .head .fl .star p{ margin: 0 0 0 5px; font-size: 16px; color: #000;}
.space_detail_review_list .head .fl .star p span{ font-size: 20px; font-weight: 700;}
.space_detail_review_list .head .fl .star .icon{ margin: 10px 0 0 0;}
.space_detail_review_list .head .fl .star i{ font-size: 24px; color: #CCC;}
.space_detail_review_list .head .fl .star i.on{ color: #ffb000;}
.space_detail_review_list .head .fr{ display: grid; grid-gap: 20px 0; padding: 50px; width: 50%; border-left: 1px solid #e5e5e5;}
.space_detail_review_list .head .fr .row{}
.space_detail_review_list .head .fr .row p{ font-size: 16px; color: #000;}
.space_detail_review_list .head .fr .row span{ overflow: hidden; display: flex; justify-content: center; align-items: center; position: relative; margin: 5px 0 0 0; height: 20px; border-radius: 5px; background: #CCC;}
.space_detail_review_list .head .fr .row span b{ display: block; position: absolute; z-index: 10; font-size: 12px; color: #FFF;}
.space_detail_review_list .head .fr .row span font{ display: block; position: absolute; top: 0; bottom: 0; left: 0; background: #67c5e3;}

.space_detail_review_list .type_info{ margin: 0; padding: 30px; border-bottom: 1px solid #e5e5e5;}

.space_detail_review_list .check{ display: flex; justify-content: flex-end; grid-gap: 0 30px; padding: 15px 30px; border-bottom: 1px solid #e5e5e5; background: #f6f8fb;}
.space_detail_review_list .check label{ display: flex; align-items: center; cursor: pointer;}
.space_detail_review_list .check label i{ display: flex; justify-content: center; align-items: center; width: 20px; height: 20px; border-radius: 5px; border: 1px solid #e5e5e5; background: #FFF; font-size: 12px; color: #FFF;}
.space_detail_review_list .check label p{ margin: 0 0 0 5px; font-size: 14px; color: #000;}
.space_detail_review_list .check label.on i{ border-color: #67c5e3; background: #67c5e3;}
.space_detail_review_list .check label.on p{ font-weight: 500;}

.space_detail_review_list .wrap{ display: flex; align-items: center; padding: 30px 30px 30px 0; border-bottom: 1px solid #e5e5e5;}
.space_detail_review_list .wrap .fl{ flex: 0 0 160px; text-align: center;}
.space_detail_review_list .wrap .fl .tit{ font-size: 18px; color: #000;}
.space_detail_review_list .wrap .fr{}
.space_detail_review_list .wrap .fr .star{ display: flex; align-items: center;}
.space_detail_review_list .wrap .fr .star i{ font-size: 16px; color: #CCC;}
.space_detail_review_list .wrap .fr .star i.on{ color: #ffb000;}
.space_detail_review_list .wrap .fr .star p{ margin: 0 0 0 5px; font-size: 14px; color: #000;}
.space_detail_review_list .wrap .fr .tit{ margin: 20px 0 0 0; font-size: 18px; font-weight: 700; color: #000;}
.space_detail_review_list .wrap .fr .txt{ margin: 10px 0 0 0; line-height: 1.4; font-size: 16px; color: #000;}
.space_detail_review_list .wrap .fr .img{ display: flex; flex-wrap: wrap; grid-gap: 10px; margin: 15px 0 0 0;}
.space_detail_review_list .wrap .fr .img a{ display: block; width: 80px; border-radius: 5px; cursor: pointer;}
.space_detail_review_list .wrap .fr .img a img{ display: block; width: 100%;}
.space_detail_review_list .wrap .fr .info{ display: flex; align-items: center; grid-gap: 0 30px; margin: 15px 0 0 0;}
.space_detail_review_list .wrap .fr .info p{ display: flex; align-items: center; font-size: 14px; color: #666;}
.space_detail_review_list .wrap .fr .info p i{ margin: 0 5px 0 0; font-size: 16px; color: #999;}
.space_detail_review_list .type_page{ margin: 30px 0;}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
}
@media(max-width: 767px){
    .space_detail_review_list .head .fl .star p{ font-size: 14px;}
    .space_detail_review_list .head .fl .star p span{ font-size: 16px;}
    .space_detail_review_list .head .fl .star i{ font-size: 18px;}
    .space_detail_review_list .head .fr{ padding: 30px 20px;}
    .space_detail_review_list .head .fr .row p{ font-size: 14px;}
    .space_detail_review_list .type_info{ padding: 20px;}

    .space_detail_review_list .wrap{ display: block; padding: 20px;}
    .space_detail_review_list .wrap .fl{ flex: initial; text-align: left;}
    .space_detail_review_list .wrap .fl .tit{ font-size: 16px; color: #000;}
    .space_detail_review_list .wrap .fr{ margin: -16px 0 0 0;}
    .space_detail_review_list .wrap .fr .star{ justify-content: flex-end;}
    .space_detail_review_list .wrap .fr .tit{ font-size: 16px;}
    .space_detail_review_list .wrap .fr .txt{ font-size: 14px;}
    .space_detail_review_list .wrap .fr .img{ grid-gap: 5px;}
    .space_detail_review_list .wrap .fr .img a{ width: 60px;}
    .space_detail_review_list .type_page{ margin: 20px 0;}
}


.space_detail_review_list_img_popup{ display: none; justify-content: center; align-items: center; position: fixed; z-index: 200; top: 0; right: 0; bottom: 0; left: 0; padding: 50px; background: rgba(0 0 0/70%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);}
.space_detail_review_list_img_popup .row{ position: relative; z-index: 10; max-width: 800px; width: 100%;}
.space_detail_review_list_img_popup .row > i{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 10; top: -20px; right: -20px; width: 40px; height: 40px; border-radius: 50%; background: #F00; font-size: 14px; color: #FFF; cursor: pointer;}
.space_detail_review_list_img_popup .row .img{}
.space_detail_review_list_img_popup .row .img .rolling{ overflow: hidden; position: relative; border-radius: 5px;}
.space_detail_review_list_img_popup .row .img .rolling .swiper-wrapper{}
.space_detail_review_list_img_popup .row .img .rolling .swiper-wrapper .swiper-slide{ background: #FFF;}
.space_detail_review_list_img_popup .row .img .rolling .swiper-wrapper .swiper-slide a{ display: block;}
.space_detail_review_list_img_popup .row .img .rolling .swiper-wrapper .swiper-slide a img{ display: block; width: 100%; height: auto;}

.space_detail_review_list_img_popup .row .img .rolling .swiper-button-prev{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 50; top: 50%; transform: translate(0,-50%); left: 20px; margin: 0; opacity: 0; cursor: pointer; transition: all .3s;}
.space_detail_review_list_img_popup .row .img .rolling .swiper-button-prev:after{ font-size: 30px; color: #FFF; transition: all .2s;}
.space_detail_review_list_img_popup .row .img .rolling .swiper-button-next{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 50; top: 50%; transform: translate(0,-50%); right: 20px; margin: 0; opacity: 0; cursor: pointer; transition: all .3s;}
.space_detail_review_list_img_popup .row .img .rolling .swiper-button-next:after{ font-size: 30px; color: #FFF; transition: all .2s;}
.space_detail_review_list_img_popup .row .img .rolling:hover .swiper-button-prev{ opacity: 1;}
.space_detail_review_list_img_popup .row .img .rolling:hover .swiper-button-next{ opacity: 1;}

.space_detail_review_list_img_popup_pagination{ display: flex; justify-content: center; align-items: center; grid-gap: 0 5px; position: absolute; z-index: 10; top: initial; left: 0; right: 0; bottom: 0 !important; margin: 0; height: 40px; background: linear-gradient(180deg, rgba(0 0 0/0), rgba(0 0 0/50%)); font-size: 14px; color: rgba(255 255 255/100%) !important; transition: all .2s;}
.space_detail_review_list_img_popup_pagination .swiper-pagination-current{ font-weight: 500; color: #FFF;}
.space_detail_review_list_img_popup_pagination .swiper-pagination-total{ color: rgba(255 255 255/60%);}

.space_detail_review_list_img_popup .close{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0 0 0/0.000001%) center/cover;}
.space_detail_review_list_img_popup.on{ display: flex;}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
}
@media(max-width: 769px){
}


.space_detail_review_login{ padding: 50px 30px; border-radius: 5px; border: 1px solid #e5e5e5; text-align: center;}
.space_detail_review_login .tit{ font-size: 18px; font-weight: 700; color: #000;}
.space_detail_review_login .txt{ margin: 10px 0 0 0; font-size: 14px; color: #666;}
.space_detail_review_login .btn{ display: flex; justify-content: center; align-items: center; margin: 30px auto 0 auto; width: 200px; height: 50px; border-radius: 5px; background: #67c5e3;}
.space_detail_review_login .btn p{ font-size: 16px; font-weight: 700; color: #FFF;}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
}
@media(max-width: 769px){
    .space_detail_review_login .btn{ margin: 20px auto 0 auto; width: 160px; height: 45px;}
}


.space_detail_review_write{ display: grid; grid-gap: 20px 0; padding: 30px; border-radius: 5px; border: 1px solid #e5e5e5;}
.space_detail_review_write .wrap{ display: flex; align-items: center;}
.space_detail_review_write .wrap .tit{ flex: 0 0 80px; font-size: 14px; color: #000;}
.space_detail_review_write .wrap .star{ flex: 1; display: flex; align-items: center; grid-gap: 0 5px;}
.space_detail_review_write .wrap .star i{ font-size: 18px; color: #CCC; transform: translate(0,-1px); cursor: pointer;}
.space_detail_review_write .wrap .star i.on{ color: #ffb000;}
.space_detail_review_write .wrap .star p{ margin: 0 0 0 5px; font-size: 16px; color: #000;}
.space_detail_review_write .wrap textarea{ padding: 15px; width: 100%; height: 140px; border-radius: 5px; border: 1px solid #e5e5e5; background: #f6f8fb; line-height: 1.4; font-size: 16px; outline: none;  -webkit-appearance: none;}
.space_detail_review_write .wrap .img{ display: flex; grid-gap: 0 10px;}
.space_detail_review_write .wrap .img a{ display: flex; justify-content: center; align-items: center; position: relative; width: 60px; height: 60px; border-radius: 5px; border: 1px solid #e5e5e5; cursor: pointer;}
.space_detail_review_write .wrap .img a i{ font-size: 14px; color: #000;}
.space_detail_review_write .wrap .img a:hover{ background: #f6f8fb;}
.space_detail_review_write .wrap .img a.up{ border: 0;}
.space_detail_review_write .wrap .img a.up i{ display: none;}
.space_detail_review_write .wrap .btn{ display: flex; justify-content: center; align-items: center; width: 120px; height: 50px; border-radius: 5px; background: #67c5e3;}
.space_detail_review_write .wrap .btn p{ font-size: 16px; font-weight: 700; color: #FFF;}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
}
@media(max-width: 769px){
    .space_detail_review_write{ grid-gap: 15px 0; padding: 20px;}
    .space_detail_review_write .wrap .tit{ flex: 0 0 60px;}
    .space_detail_review_write .wrap .star{ flex: 1; display: flex; align-items: center; grid-gap: 0 5px;}
    .space_detail_review_write .wrap .star i{ font-size: 18px; color: #CCC; transform: translate(0,-1px); cursor: pointer;}
    .space_detail_review_write .wrap .star i.on{ color: #ffb000;}
    .space_detail_review_write .wrap .star p{ margin: 0 0 0 5px; font-size: 16px; color: #000;}
    .space_detail_review_write .wrap textarea{ height: 120px; font-size: 14px;}
    .space_detail_review_write .wrap .img{ grid-gap: 5px;}
    .space_detail_review_write .wrap .img a{ display: flex; width: 40px; height: 40px;}
    .space_detail_review_write .wrap .btn{ width: 100px; height: 45px;}
    .space_detail_review_write .wrap .btn p{ font-size: 16px;}
}











































.workshop_list{}
.workshop_list ul{ display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 20px;}
.workshop_list ul li{}
.workshop_list ul li .wrap{ display: block; overflow: hidden; transition: all .2s;}
.workshop_list ul li .wrap .img{ display: block; position: relative; border-radius: 5px 5px 0 0;}
.workshop_list ul li .wrap .img .tip{ display: flex; flex-wrap: wrap; grid-gap: 5px; position: absolute; z-index: 10; top: 10px; left: 10px;}
.workshop_list ul li .wrap .img .tip div{ display: flex; align-items: center; padding: 0 10px; height: 25px; border-radius: 50px; font-size: 12px; font-weight: 500; color: #FFF;}
.workshop_list ul li .wrap .img .tip div.sale{ background: #F00;}
.workshop_list ul li .wrap .img .tip div.new{ background: #67c5e3;}
.workshop_list ul li .wrap .img img{ display: block; width: 100%;}
.workshop_list ul li .wrap .info{ overflow: hidden; position: relative; padding: 20px 20px 0 20px; border-radius: 0 0 5px 5px; border: 1px solid #e5e5e5; border-top: 0;}
.workshop_list ul li .wrap .info .txt{ display: block; font-size: 14px; color: #999; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;}
.workshop_list ul li .wrap .info .tit{ display: block; margin: 10px 0 0 0; font-size: 18px; font-weight: 700; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;}
.workshop_list ul li .wrap .info .ft{ display: flex; justify-content: space-between; align-items: center; margin: 20px 0 0 0;}
.workshop_list ul li .wrap .info .tag{ display: flex; grid-gap: 5px;}
.workshop_list ul li .wrap .info .tag p{ display: flex; align-items: center; padding: 0 12px; height: 25px; border-radius: 5px; border: 1px solid rgba(0 0 0/5%); background: rgba(0 0 0/2%); font-size: 13px; color: rgba(0 0 0/80%);}
.workshop_list ul li .wrap .info .fr{ display: flex; grid-gap: 0 15px;}
.workshop_list ul li .wrap .info .fr p{ display: flex; align-items: center; font-size: 13px; color: #999;}
.workshop_list ul li .wrap .info .fr i{ margin: 0 2px 0 0; font-size: 16px; color: #666;}
.workshop_list ul li .wrap .info .fb{ margin: 20px -20px 0 -20px; padding: 20px 20px; border-top: 1px solid #e5e5e5;}
.workshop_list ul li .wrap .info .price{ display: flex; align-items: center;}
.workshop_list ul li .wrap .info .price p{ font-size: 18px; font-weight: 700; color: #F00;}
.workshop_list ul li .wrap .info .price span{ margin: 0 0 -3px 2px; font-size: 14px; color: #999;}
.workshop_list ul li .wrap .info .type_like_btn{ position: absolute; right: 20px; bottom: 20px; font-size: 20px; color: #000; cursor: pointer;}
.workshop_list ul li .wrap .info .type_like_btn.on i{ color: #F00;}
.workshop_list ul li .wrap:hover{ transform: scale(.96);}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
    .workshop_list ul{ grid-template-columns: repeat(2,1fr);}
}
@media(max-width: 767px){
    .workshop_list ul{ grid-template-columns: repeat(1,1fr); grid-gap: 10px;}
}


.workshop_detail_layout{ position: relative; padding: 0 400px 0 0;}
.workshop_detail_layout > .fl{}
.workshop_detail_layout > .fr{ position: absolute; top: 0; right: 0;}
.workshop_detail_layout > .fr .btn_open{ display: none;}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
    .workshop_detail_layout{ padding: 0;}
    .workshop_detail_layout > .fr{ position: fixed; z-index: 200; top: initial; right: 0; bottom: 60px; left: 0;}
    .workshop_detail_layout > .fr .btn_open{ display: flex; justify-content: center; align-items: center; grid-gap: 0 10px; height: 50px; background: #333;}
    .workshop_detail_layout > .fr .btn_open p{ font-size: 16px; color: #FFF;}
    .workshop_detail_layout > .fr .btn_open i{ transform: translate(0,-1px); font-size: 12px; color: #FFF; transition: all .2s;}
    .workshop_detail_layout > .fr.off .btn_open i{ transform: rotate(180deg);}
}
@media(max-width: 767px){
    .workshop_detail_layout > .fr .btn_open{ height: 40px;}
    .workshop_detail_layout > .fr .btn_open p{ font-size: 14px;}
}


.workshop_detail_head{ width: 370px;}
.workshop_detail_head > .ft{}
.workshop_detail_head > .fb{ margin: 10px 0 0 0; padding: 30px; border-radius: 5px; background: #FFF; border: 1px solid rgba(0 0 0/10%); box-shadow: 0 10px 50px 1px rgba(0 0 0/10%);}

.workshop_detail_head .btn{ display: flex; grid-gap: 0 10px;}
.workshop_detail_head .btn a{ display: flex; justify-content: center; align-items: center; grid-gap: 0 10px; width: 50%; height: 50px; border-radius: 5px; background: #FFF; border: 1px solid rgba(0 0 0/10%); border: 1px solid #e5e5e5; cursor: pointer; transition: all .2s;}
.workshop_detail_head .btn a i{ font-size: 18px; color: #000; transform: translate(0,-1px);}
.workshop_detail_head .btn a p{ font-size: 16px; color: #000;}
.workshop_detail_head .btn a:hover{ box-shadow: 0 5px 30px 0 rgba(0 0 0/5%);}
.workshop_detail_head .btn a.on{ border-color: #F00; background: #F00;}
.workshop_detail_head .btn a.on i{ color: #FFF;}
.workshop_detail_head .btn a.on p{ color: #FFF;}
.workshop_detail_head .type_like_btn{ cursor: pointer;}
.workshop_detail_head .type_like_btn i{ font-size: 24px; color: #000;}
.workshop_detail_head .type_like_btn.on i{ color: #F00;}

.workshop_detail_head .price{ display: flex; align-items: flex-end;}
.workshop_detail_head .price p{ font-size: 22px; font-weight: 700; color: #F00;}
.workshop_detail_head .price span{ padding: 0 0 1px 4px; font-size: 14px; color: #666;}

.workshop_detail_head .price_txt{ display: flex; justify-content: space-between; align-items: center; margin: 15px 0 0 0; padding: 10px 15px; border-radius: 5px; border: 1px solid #e5e5e5; background: #f6f8fb;}
.workshop_detail_head .price_txt p{ font-size: 14px; color: #999;}
.workshop_detail_head .price_txt span{ font-size: 14px; color: #666;}

.workshop_detail_head .info{ overflow: hidden; position: relative; margin: 15px 0 0 0; border-radius: 5px; border: 1px solid #e5e5e5;}
.workshop_detail_head .info .ft{ display: flex; justify-content: center; align-items: center; height: 30px; border-bottom: 1px solid #e5e5e5; font-size: 12px; color: #000;}
.workshop_detail_head .info .fb{ display: flex;}
.workshop_detail_head .info .row{ width: 25%; border-left: 1px solid #e5e5e5;}
.workshop_detail_head .info .row:first-child{ border-left: 0;}
.workshop_detail_head .info .row .tit{ display: flex; justify-content: center; align-items: center; height: 30px; border-bottom: 1px solid #e5e5e5; font-size: 12px; color: rgba(0 0 0/60%);}
.workshop_detail_head .info .row .txt{ padding: 10px 10px; text-align: center; font-size: 14px; color: #000;}

.workshop_detail_head .in{ display: grid; grid-gap: 5px 0; margin: 15px 0 0 0;}
.workshop_detail_head .in .user{ position: relative;}
.workshop_detail_head .in .user .btn{ display: flex; flex-direction: column; justify-content: center; position: absolute; z-index: 10; top: 0; right: 15px; bottom: 0;}
.workshop_detail_head .in .user .btn i{ font-size: 14px; color: #000; cursor: pointer; transition: all .2s;}
.workshop_detail_head .in .user .btn i:hover{ background: #f5f5f5;}
.workshop_detail_head .in .user input{ display: flex; align-items: center; padding: 0 15px; width: 100%; height: 45px; border-radius: 5px; border: 1px solid #e5e5e5; font-size: 14px; color: #000; outline: none; -webkit-appearance: none;}
.workshop_detail_head .in .user input:focus{ border: 1px solid #67c5e3;}
.workshop_detail_head .in select{ display: flex; align-items: center; margin: 0; padding: 0 30px 0 15px; width: 100%; height: 45px; border-radius: 5px; border:1px solid #e5e5e5; background:url(/images/icon_select.png) no-repeat center right 15px #FFF; background-size: 14px auto; font-size: 14px; color: #000; outline: none; -webkit-appearance: none;}
.workshop_detail_head .in select:focus{ border: 1px solid #67c5e3;}

.workshop_detail_head .price_ok{ margin: 20px 0 0 0;}
.workshop_detail_head .price_ok .tit{ display: flex; justify-content: space-between; align-items: flex-end; font-size: 14px; color: #666;}
.workshop_detail_head .price_ok .tit span{ font-size: 12px;}
.workshop_detail_head .price_ok .txt{ margin: 10px 0 0 0; padding: 10px 15px; border-radius: 5px; border: 1px solid #e5e5e5; background: #f6f8fb; text-align: center;}
.workshop_detail_head .price_ok .txt span{ display: block; padding: 0 0 5px 0; font-size: 14px; color: #000; text-decoration: line-through;}
.workshop_detail_head .price_ok .txt p{ font-size: 22px; font-weight: 700; color: #F00;}

.workshop_detail_head .button{ display: flex; grid-gap: 0 6px; margin: 15px 0 0 0;}
.workshop_detail_head .button a{ display: flex; justify-content: center; align-items: center; width: 100%; height: 50px; border-radius: 5px; cursor: pointer; transition: all .2s;}
.workshop_detail_head .button a:nth-child(1){ border: 1px solid #e5e5e5;}
.workshop_detail_head .button a:nth-child(1) p{ color: #000;}
.workshop_detail_head .button a:nth-child(2){ background: #67c5e3;}
.workshop_detail_head .button a:nth-child(2) p{ font-weight: 700; color: #FFF;}
.workshop_detail_head .button a:hover{ box-shadow: 0 5px 30px 0 rgba(0 0 0/10%);}

.workshop_detail_head.on{ position: fixed; z-index: 10; top: 110px; right: 50%; margin: 0 -600px 0 0;}
@media(max-width: 1301px){
    .workshop_detail_head.on{ right: 50px; margin: 0;}
}
@media(max-width: 1025px){
    .workshop_detail_head{ width: auto;}
    .workshop_detail_head > .ft{}
    .workshop_detail_head > .fb{ margin: 0; padding: 30px; border-radius: 0; background: #FFF; border: 0; border-top: 1px solid #e5e5e5; box-shadow: 0;}

    .workshop_detail_head .btn{ grid-gap: 0;}
    .workshop_detail_head .btn a{ border-radius: 0; border: 0;}
    .workshop_detail_head .btn a:first-child{ border-right: 1px solid #e5e5e5;}

    .workshop_detail_head.on{ position: initial;}
}
@media(max-width: 767px){
    .workshop_detail_head > .fb{ padding: 20px;}
    .workshop_detail_head .btn a{ height: 40px;}
    .workshop_detail_head .btn a i{ font-size: 16px; transform: translate(0,-1px);}
    .workshop_detail_head .btn a p{ font-size: 14px;}

    .workshop_detail_head .price p{ font-size: 18px;}
    .workshop_detail_head .price span{ font-size: 12px;}
    .workshop_detail_head .price_txt{ margin: 10px 0 0 0;}
    .workshop_detail_head .price_txt p{ font-size: 12px;}
    .workshop_detail_head .price_txt span{ font-size: 12px;}

    .workshop_detail_head .info{ margin: 10px 0;}
    .workshop_detail_head .in{ margin: 10px 0 0 0;}

    .workshop_detail_head .price_ok .txt{ display: flex; justify-content: space-between; align-items: center;}
    .workshop_detail_head .price_ok .txt p{ font-size: 18px;}

    .workshop_detail_head .button a{ height: 45px;}
}


.workshop_detail_info{}
.workshop_detail_info .ft{ display: flex; grid-gap: 0 5px;}
.workshop_detail_info .ft .sale{ display: flex; align-items: center; padding: 0 20px; height: 35px; border-radius: 50px; background: #F00; font-size: 14px; font-weight: 500; color: #FFF;}
.workshop_detail_info .ft .new{ display: flex; align-items: center; padding: 0 20px; height: 35px; border-radius: 50px; background: #67c5e3; font-size: 14px; font-weight: 500; color: #FFF;}
.workshop_detail_info .ft .tag{ display: flex; align-items: center; padding: 0 20px; height: 35px; border-radius: 50px; border: 1px solid #000; font-size: 14px; font-weight: 500; color: #000;}
.workshop_detail_info .tit{ display: flex; margin: 20px 0 0 0; line-height: 36px; font-size: 26px; font-weight: 700; color: #000;}
.workshop_detail_info .txt{ margin: 10px 200px 0 0; line-height: 1.4; font-size: 16px; color: #666;}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
    .workshop_detail_info .txt{ margin: 10px 0 0 0;}
}
@media(max-width: 767px){
    .workshop_detail_info .ft .sale{ padding: 0 15px; height: 30px; font-size: 12px;}
    .workshop_detail_info .ft .new{ padding: 0 15px; height: 30px; font-size: 12px;}
    .workshop_detail_info .ft .tag{ padding: 0 15px; height: 30px; font-size: 12px;}

    .workshop_detail_info .tit{ margin: 15px 0 0 0; line-height: 30px; font-size: 20px;}
    .workshop_detail_info .address{ display: block;}
    .workshop_detail_info .address .txt i{ margin: 0 3px 0 0; font-size: 14px;}
    .workshop_detail_info .address .txt p{ font-size: 14px;;}
    .workshop_detail_info .btn_map{ margin: 20px 0 0 0;}
    .workshop_detail_info .btn_map a{ width: 33.333%; padding: 0 0; height: 35px;}
    .workshop_detail_info .btn_map a img{ height: 12px;}
    .workshop_detail_info .btn_map a p{ font-size: 12px;}
}


.workshop_detail_rolling{ margin: 30px 0 0 0;}
.workshop_detail_rolling .max{ flex: 1; width: 100%; overflow: hidden; position: relative; border-radius: 5px 5px 0 0;}
.workshop_detail_rolling .max .swiper-wrapper{}
.workshop_detail_rolling .max .swiper-wrapper .swiper-slide{}
.workshop_detail_rolling .max .swiper-wrapper .swiper-slide .img{}
.workshop_detail_rolling .max .swiper-wrapper .swiper-slide .img img{ display: block; width: 100%;}
.workshop_detail_rolling .max .swiper-button-prev{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 50; top: 50%; transform: translate(0,-50%); left: 20px; margin: 0; opacity: 0; cursor: pointer; transition: all .3s;}
.workshop_detail_rolling .max .swiper-button-prev:after{ font-size: 30px; color: #FFF; transition: all .2s;}
.workshop_detail_rolling .max .swiper-button-next{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 50; top: 50%; transform: translate(0,-50%); right: 20px; margin: 0; opacity: 0; cursor: pointer; transition: all .3s;}
.workshop_detail_rolling .max .swiper-button-next:after{ font-size: 30px; color: #FFF; transition: all .2s;}
.workshop_detail_rolling .max:hover .swiper-button-prev{ opacity: 1;}
.workshop_detail_rolling .max:hover .swiper-button-next{ opacity: 1;}
.workshop_detail_rolling .min{ overflow: hidden; padding: 20px; border-radius: 0 0 5px 5px; border: 1px solid #e5e5e5; border-top: 0;}
.workshop_detail_rolling .min .swiper-wrapper{}
.workshop_detail_rolling .min .swiper-wrapper .swiper-slide{ cursor: pointer; width: auto; height: auto;}
.workshop_detail_rolling .min .swiper-wrapper .swiper-slide .img{ width: 80px; border-radius: 5px; opacity: 0.3; filter: grayscale(50%);}
.workshop_detail_rolling .min .swiper-wrapper .swiper-slide .img img{ display: block; width: 100%;}
.workshop_detail_rolling .min .swiper-wrapper .swiper-slide.swiper-slide-thumb-active .img{ opacity: 1; filter: grayscale(0);}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
}
@media(max-width: 767px){
    .workshop_detail_rolling .min{ padding: 10px;}
}


.workshop_detail_body{ margin: 60px 0 0 0;}
.workshop_detail_body .scroll_menu{}
.workshop_detail_body .scroll_menu ul{ display: flex; position: relative; border-radius: 5px 5px 0 0; background: #f6f8fb;}
.workshop_detail_body .scroll_menu ul li{ width: 20%;}
.workshop_detail_body .scroll_menu ul li a{ display: flex; justify-content: center; align-items: center; position: relative; height: 70px; border-bottom: 1px solid #e5e5e5; cursor: pointer;}
.workshop_detail_body .scroll_menu ul li a p{ font-size: 16px; font-weight: 500; color: #000;}
.workshop_detail_body .scroll_menu ul li.on a:before{ content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 3px; background: #67c5e3;}
.workshop_detail_body .scroll_menu ul li.on a p{ font-size: 16px; font-weight: 700; color: #67c5e3;}
.workshop_detail_body .scroll_body{ margin: 40px 0 0 0;}
.workshop_detail_body .scroll_body .title{ padding: 0 0 20px 0; font-size: 22px; font-weight: 700; color: #000;}
.workshop_detail_body .scroll_body .title.mt{ margin: 60px 0 0 0;}
.workshop_detail_body .scroll_body .title span{ font-weight: 700; color: #F00;}
.workshop_detail_body .scroll_body pre{ padding: 50px; border-radius: 16px; border: 1px solid rgba(0 0 0/15%); background: #; white-space: pre-line; line-height: 1.8; font-size: 17px;}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
}
@media(max-width: 767px){
    .workshop_detail_body{ margin: 40px 0 0 0;}
    .workshop_detail_body .scroll_menu ul{ flex-wrap: wrap; padding: 10px 0; border-radius: 5px;}
    .workshop_detail_body .scroll_menu ul li{ width: 33.333%;}
    .workshop_detail_body .scroll_menu ul li a{ height: 40px; border: 0;}
    .workshop_detail_body .scroll_menu ul li a p{ font-size: 16px;}
    .workshop_detail_body .scroll_menu ul li.on a:before{ display: none;}
    .workshop_detail_body .scroll_menu ul li.on a p{ font-size: 16px;}
    .workshop_detail_body .scroll_body .title{ padding: 0 0 15px 0; font-size: 20px;}
    .workshop_detail_body .scroll_body .title.mt{ margin: 40px 0 0 0;}
    .workshop_detail_body .scroll_body pre{ padding: 20px; border-radius: 5px; font-size: 14px;}
}


.workshop_detail_step{ margin: 40px 0 0 0;}
.workshop_detail_step .title{ padding: 0 0 20px 0; font-size: 22px; font-weight: 700; color: #000;}
.workshop_detail_step ul{ display: grid; grid-template-columns: repeat(3,1fr); border-radius: 5px; border: 1px solid #e5e5e5;}
.workshop_detail_step ul li{ position: relative;}
.workshop_detail_step ul li .wrap{ display: flex; flex-direction: column; align-items: center; padding: 30px;}
.workshop_detail_step ul li .wrap img{ display: block; height: 40px;}
.workshop_detail_step ul li .wrap span{ display: block; margin: 20px 0 5px 0; font-size: 12px; font-weight: 700; color: #67c5e3;}
.workshop_detail_step ul li .wrap .tit{ font-size: 18px; font-weight: 500; color: #000;}
.workshop_detail_step ul li i{ display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; right: -15px; margin: -15px 0 0 0; width: 30px; height: 30px; font-size: 14px; color: #999;}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
}
@media(max-width: 767px){
}


.workshop_detail_intro{}
.workshop_detail_intro img{ display: block; max-width: 100%; height: auto; border-radius: 5px;}
.workshop_detail_intro .t1{ margin: 20px 0 0 0; font-size: 18px; font-weight: 500; color: #000;}
.workshop_detail_intro .t2{ margin: 20px 0 0 0; line-height: 1.4; font-size: 16px; color: #000;}
.workshop_detail_intro .t3{ margin: 20px 0 0 0; line-height: 1.4; font-size: 14px; font-weight: 500; color: #F00;}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
}
@media(max-width: 767px){
}


.workshop_detail_curriculum{ display: flex; flex-direction: column; align-items: flex-start;}
.workshop_detail_curriculum .top_time{ display: flex; align-items: center; padding: 0 30px; height: 40px; border-radius: 5px; background: #f6f8fb; font-size: 14px; font-weight: 500; color: #67c5e3;}
.workshop_detail_curriculum ul{ display: grid; grid-gap: 40px 0; position: relative; margin: 20px 0 0 0; padding: 50px; width: 100%; border-radius: 5px; border: 1px solid #e5e5e5;}
.workshop_detail_curriculum ul:after{ content: ""; position: absolute; top: 50px; left: 90px; bottom: 160px; width: 1px; background: #e5e5e5;}
.workshop_detail_curriculum ul li{}
.workshop_detail_curriculum ul li .wrap{ display: flex;}
.workshop_detail_curriculum ul li .wrap .time{ flex: 0 0 80px; display: flex; justify-content: center; align-items: center; position: relative; z-index: 10; grid-gap: 0 5px; margin: 0 30px 0 0; height: 30px; border-radius: 5px; background: #67c5e3;}
.workshop_detail_curriculum ul li .wrap .time i{ font-size: 14px; color: #FFF;}
.workshop_detail_curriculum ul li .wrap .time p{ font-size: 14px; color: #FFF;}
.workshop_detail_curriculum ul li .wrap .fr{}
.workshop_detail_curriculum ul li .wrap .fr .tit{ margin: 10px 0 0 0; line-height: 1.4; font-size: 18px; font-weight: 700; color: #000;}
.workshop_detail_curriculum ul li .wrap .fr .txt{ margin: 10px 0 0 0;}
.workshop_detail_curriculum ul li .wrap .fr .txt p{ position: relative; padding: 8px 0 0 15px; line-height: 1.4; font-size: 16px; color: #000;}
.workshop_detail_curriculum ul li .wrap .fr .txt p:before{ content: ""; display: block; position: absolute; top: 18px; left: 0; width: 5px; height: 1px; background: #000;}
.workshop_detail_curriculum ul li .wrap .fr .tip{ margin: 10px 0 0 0; line-height: 1.4; font-size: 14px; color: #67c5e3;}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
}
@media(max-width: 767px){
    .workshop_detail_curriculum .top_time{ padding: 0 20px; height: 35px;}
    .workshop_detail_curriculum ul{ grid-gap: 20px 0; margin: 10px 0 0 0; padding: 20px;}
    .workshop_detail_curriculum ul:after{ top: 40px; left: 50px; bottom: 120px;}
    .workshop_detail_curriculum ul li .wrap .time{ flex: 0 0 60px; margin: 0 20px 0 0; height: 25px;}
    .workshop_detail_curriculum ul li .wrap .time i{ font-size: 12px;}
    .workshop_detail_curriculum ul li .wrap .time p{ font-size: 12px;}
    .workshop_detail_curriculum ul li .wrap .fr .tit{ margin: 5px 0 0 0; font-size: 16px;}
    .workshop_detail_curriculum ul li .wrap .fr .txt{ margin: 5px 0 0 0;}
    .workshop_detail_curriculum ul li .wrap .fr .txt p{ font-size: 14px;}
    .workshop_detail_curriculum ul li .wrap .fr .txt p:before{ top: 16px;}
}


.workshop_detail_instructor{ display: grid; grid-gap: 20px 0;}
.workshop_detail_instructor .wrap{ display: flex; align-items: flex-start; border-radius: 5px; padding: 50px; border: 1px solid #e5e5e5;}
.workshop_detail_instructor .wrap .img{ flex: 0 0 200px; margin: 0 50px 0 0;}
.workshop_detail_instructor .wrap .img img{ display: block; width: 100%; border-radius: 5px;}
.workshop_detail_instructor .wrap ul{}
.workshop_detail_instructor .wrap ul li{ position: relative; padding: 8px 0 0 15px; line-height: 1.4; font-size: 16px; color: #000;}
.workshop_detail_instructor .wrap ul li:before{ content: ""; display: block; position: absolute; top: 16px; left: 0; width: 4px; height: 4px; border-radius: 50%; background: #CCC;}
.workshop_detail_instructor .wrap ul li.tit{ padding: 20px 0 5px 0; font-size: 18px; font-weight: 700; color: #000;}
.workshop_detail_instructor .wrap ul li.tit:before{ display: none;}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
}
@media(max-width: 767px){
    .workshop_detail_instructor{ grid-gap: 10px 0;}
    .workshop_detail_instructor .wrap{ display: block; padding: 20px;}
    .workshop_detail_instructor .wrap .img{ flex: initial; margin: 0; padding: 0 80px;}
    .workshop_detail_instructor .wrap ul li{ font-size: 14px;}
    .workshop_detail_instructor .wrap ul li:before{ top: 14px;}
    .workshop_detail_instructor .wrap ul li.tit{ font-size: 16px;}
}


.workshop_detail_guide{ display: grid; grid-gap: 20px 0;}
.workshop_detail_guide .top_tit{ display: flex; align-items: center; margin: 40px 0 0 0;}
.workshop_detail_guide .top_tit i{ font-size: 24px; color: #67c5e3;}
.workshop_detail_guide .top_tit p{ margin: 0 0 0 5px; font-size: 18px; font-weight: 700; color: #67c5e3;}
.workshop_detail_guide .top_tit:first-child{ margin-top: 0;}
.workshop_detail_guide .wrap{ display: flex; align-items: center; padding: 30px 30px 30px 0; border-radius: 5px; border: 1px solid #e5e5e5;}
.workshop_detail_guide .wrap .fl{ flex: 0 0 200px; text-align: center;}
.workshop_detail_guide .wrap .fl p{ line-height: 1.2; font-size: 18px; font-weight: 500; color: #000;}
.workshop_detail_guide .wrap .fr{ flex: 1;}
.workshop_detail_guide .wrap .fr .txt_01{ display: grid; grid-gap: 10px 0;}
.workshop_detail_guide .wrap .fr .txt_01 li{ display: flex;}
.workshop_detail_guide .wrap .fr .txt_01 li i{ line-height: 1.4; font-size: 18px; color: #67c5e3; transform: translate(0,-2px);}
.workshop_detail_guide .wrap .fr .txt_01 li p{ margin: 0 0 0 10px; line-height: 1.4; font-size: 16px; color: #000;}
.workshop_detail_guide .wrap .fr .txt_02{ line-height: 1.4; font-size: 16px; color: #000;}
.workshop_detail_guide .wrap .fr .txt_02 i{ margin: 0 10px 0 0; line-height: 1.4; font-size: 20px; color: #67c5e3; transform: translate(0,2px);}
.workshop_detail_guide .wrap .fr .txt_03{ display: grid; grid-template-columns: repeat(4,1fr);}
.workshop_detail_guide .wrap .fr .txt_03 li{ display: flex; flex-direction: column; align-items: center;}
.workshop_detail_guide .wrap .fr .txt_03 li i{ display: flex; justify-content: center; align-items: center; width: 80px; height: 80px; border-radius: 50%; border: 1px solid #e5e5e5; font-size: 30px; color: #67c5e3;}
.workshop_detail_guide .wrap .fr .txt_03 li p{ margin: 10px 0 0 0; font-size: 16px; color: #000;}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
}
@media(max-width: 767px){
    .workshop_detail_guide{ grid-gap: 10px 0;}
    .workshop_detail_guide .top_tit i{ font-size: 20px;}
    .workshop_detail_guide .top_tit p{ font-size: 16px;}
    .workshop_detail_guide .wrap{ padding: 20px 20px 20px 0;}
    .workshop_detail_guide .wrap .fl{ flex: 0 0 120px;}
    .workshop_detail_guide .wrap .fl p{ font-size: 16px;}
    .workshop_detail_guide .wrap .fr .txt_01 li i{ font-size: 16px;}
    .workshop_detail_guide .wrap .fr .txt_01 li p{ font-size: 14px;}
    .workshop_detail_guide .wrap .fr .txt_02{ font-size: 14px;}
    .workshop_detail_guide .wrap .fr .txt_02 i{ font-size: 16px;}
    .workshop_detail_guide .wrap .fr .txt_03{ grid-template-columns: repeat(2,1fr); grid-gap: 20px 10px;}
    .workshop_detail_guide .wrap .fr .txt_03 li i{ width: 60px; height: 60px; font-size: 24px;}
    .workshop_detail_guide .wrap .fr .txt_03 li p{ font-size: 14px;}
}


.workshop_detail_faq{ border-radius: 5px; border: 1px solid #e5e5e5;}
.workshop_detail_faq ul{}
.workshop_detail_faq ul li{ border-top: 1px solid #e5e5e5;}
.workshop_detail_faq ul li:first-child{ border-top: 0;}
.workshop_detail_faq ul li a{ display: block; position: relative; padding: 30px; cursor: pointer;}
.workshop_detail_faq ul li a .q{ display: flex; align-items: center; position: relative; padding: 0 60px 0 60px;}
.workshop_detail_faq ul li a .q .t1{ display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; transform: translate(0,-50%); left: 0; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #CCC; background: #FFF; font-size: 20px; font-weight: 800; color: #000; transition: all .3s;}
.workshop_detail_faq ul li a .q .t2{ flex: 1; line-height: 1.4; font-size: 16px; font-weight: 400; color: #000;}
.workshop_detail_faq ul li a .q i{ display: block; position: absolute; top: 50%; right: 0; transform: translate(0,-50%); font-size: 14px; color: #DDD; transition: all .3s;}
.workshop_detail_faq ul li a .a{ display: none; position: relative; margin: 30px 0 0 0; padding: 10px 60px 10px 60px;}
.workshop_detail_faq ul li a .a .t1{ display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%; background: #67c5e3; font-size: 18px; font-weight: 600; color: #FFF; transition: all .3s;}
.workshop_detail_faq ul li a .a .t2 p{ line-height: 1.4; font-size: 16px; color: #000;}
.workshop_detail_faq ul li a:hover{ background: #f6f8fb;}
.workshop_detail_faq ul li.on a .q .t1{ border-color: #000; background: #000; color: #FFF;}
.workshop_detail_faq ul li.on a .q i{ transform: rotate(180deg);}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
}
@media(max-width: 767px){
    .workshop_detail_faq ul li a{ padding: 20px;}
    .workshop_detail_faq ul li a .q{ padding: 0 50px 0 50px;}
    .workshop_detail_faq ul li a .q .t1{ width: 30px; height: 30px; font-size: 16px;}
    .workshop_detail_faq ul li a .q .t2{ font-size: 14px;}
    .workshop_detail_faq ul li a .a{ margin: 20px 0 0 0; padding: 10px 50px 10px 50px;}
    .workshop_detail_faq ul li a .a .t1{ width: 30px; height: 30px; font-size: 16px;}
    .workshop_detail_faq ul li a .a .t2 p{ font-size: 14px;}
}


.workshop_detail_refund{ display: grid; grid-gap: 20px 0;}
.workshop_detail_refund .wrap{}
.workshop_detail_refund .wrap{ display: flex; align-items: center; padding: 30px 30px 30px 0; border-radius: 5px; border: 1px solid #e5e5e5;}
.workshop_detail_refund .wrap .fl{ flex: 0 0 200px; text-align: center;}
.workshop_detail_refund .wrap .fl p{ line-height: 1.2; font-size: 18px; font-weight: 500; color: #000;}
.workshop_detail_refund .wrap .fr{ flex: 1;}
.workshop_detail_refund .wrap .fr ul{ display: grid; grid-gap: 10px 0;}
.workshop_detail_refund .wrap .fr ul li{ display: flex; position: relative; padding: 0 0 0 15px; line-height: 1.4; font-size: 16px; color: #000;}
.workshop_detail_refund .wrap .fr ul li:before{ content: ""; display: block; position: absolute; top: 8px; left: 0; width: 4px; height: 4px; border-radius: 50%; background: #CCC;}
.workshop_detail_refund .wrap .fr ul li.tit{ padding: 0; font-size: 18px; font-weight: 700;}
.workshop_detail_refund .wrap .fr ul li.tit:before{ display: none;}
.workshop_detail_refund .wrap .fr ul li i{ margin: 0 10px 0 0; font-size: 16px; color: #000; transform: translate(0,2px);}
.workshop_detail_refund .footer-wrapper{}
.workshop_detail_refund .footer-wrapper .fl{}
.workshop_detail_refund .footer-wrapper .fl .tit{}
.workshop_detail_refund .footer-wrapper .fr{}
.workshop_detail_refund .footer-wrapper .fr ul{}
.workshop_detail_refund .footer-wrapper .fr ul li{}
.workshop_detail_refund .footer-wrapper .fr ul li a{}
.workshop_detail_refund .footer-wrapper .fr ul li a .xi-call{}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
}
@media(max-width: 767px){
    .workshop_detail_refund{ display: grid; grid-gap: 20px 0;}
    .workshop_detail_refund .wrap{ display: block; padding: 20px;}
    .workshop_detail_refund .wrap .fl{ flex: initial; padding: 0 0 15px 0; text-align: left;}
    .workshop_detail_refund .wrap .fl p{ font-size: 16px; font-weight: 700;}
    .workshop_detail_refund .wrap .fr{ flex: 1;}
    .workshop_detail_refund .wrap .fr ul li{ font-size: 14px;}
    .workshop_detail_refund .wrap .fr ul li.tit{ font-size: 16px; font-weight: 500;}
    .workshop_detail_refund .wrap .fr ul li i{ font-size: 14px;}
}


.workshop_detail_review_head{ display: grid; grid-gap: 20px 0;}
.workshop_detail_review_head .wrap{ display: flex; align-items: center;}
.workshop_detail_review_head .wrap .fl{ flex: 0 0 60px; margin: 0 50px 0 0;}
.workshop_detail_review_head .wrap .fl img{ display: block; width: 100%;}
.workshop_detail_review_head .wrap .fr{ flex: 1; padding: 30px; border-radius: 5px; background: #f6f8fb;}
.workshop_detail_review_head .wrap .fr .t1{ font-size: 18px; font-weight: 700; color: #000;}
.workshop_detail_review_head .wrap .fr .t2{ margin: 10px 0 0 0; line-height: 1.4; font-size: 16px; color: #000;}
.workshop_detail_review_head .wrap:nth-child(2){ flex-direction: row-reverse;}
.workshop_detail_review_head .wrap:nth-child(2) .fl{ margin: 0 0 0 50px;}
.workshop_detail_review_head .wrap:nth-child(4){ flex-direction: row-reverse;}
.workshop_detail_review_head .wrap:nth-child(4) .fl{ margin: 0 0 0 50px;}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
}
@media(max-width: 767px){
    .workshop_detail_review_head{ grid-gap: 10px 0;}
    .workshop_detail_review_head .wrap .fl{ flex: 0 0 40px; margin: 0 20px 0 0;}
    .workshop_detail_review_head .wrap .fr{ padding: 20px;}
    .workshop_detail_review_head .wrap .fr .t1{ font-size: 16px;}
    .workshop_detail_review_head .wrap .fr .t2{ font-size: 14px;}
    .workshop_detail_review_head .wrap:nth-child(2) .fl{ margin: 0 0 0 20px;}
    .workshop_detail_review_head .wrap:nth-child(4) .fl{ margin: 0 0 0 20px;}
}


.workshop_detail_review_list{ border-radius: 5px; border: 1px solid #e5e5e5;}
.workshop_detail_review_list .head{ display: flex; border-bottom: 1px solid #e5e5e5;}
.workshop_detail_review_list .head .fl{ display: flex; justify-content: center; align-items: center; width: 50%;}
.workshop_detail_review_list .head .fl .star{ display: flex; flex-direction: column; align-items: center;}
.workshop_detail_review_list .head .fl .star p{ margin: 0 0 0 5px; font-size: 16px; color: #000;}
.workshop_detail_review_list .head .fl .star p span{ font-size: 20px; font-weight: 700;}
.workshop_detail_review_list .head .fl .star .icon{ margin: 10px 0 0 0;}
.workshop_detail_review_list .head .fl .star i{ font-size: 24px; color: #CCC;}
.workshop_detail_review_list .head .fl .star i.on{ color: #ffb000;}
.workshop_detail_review_list .head .fr{ display: grid; grid-gap: 20px 0; padding: 50px; width: 50%; border-left: 1px solid #e5e5e5;}
.workshop_detail_review_list .head .fr .row{}
.workshop_detail_review_list .head .fr .row p{ font-size: 16px; color: #000;}
.workshop_detail_review_list .head .fr .row span{ overflow: hidden; display: flex; justify-content: center; align-items: center; position: relative; margin: 5px 0 0 0; height: 20px; border-radius: 5px; background: #CCC;}
.workshop_detail_review_list .head .fr .row span b{ display: block; position: absolute; z-index: 10; font-size: 12px; color: #FFF;}
.workshop_detail_review_list .head .fr .row span font{ display: block; position: absolute; top: 0; bottom: 0; left: 0; background: #67c5e3;}

.workshop_detail_review_list .type_info{ margin: 0; padding: 30px; border-bottom: 1px solid #e5e5e5;}

.workshop_detail_review_list .check{ display: flex; justify-content: flex-end; grid-gap: 0 30px; padding: 15px 30px; border-bottom: 1px solid #e5e5e5; background: #f6f8fb;}
.workshop_detail_review_list .check label{ display: flex; align-items: center; cursor: pointer;}
.workshop_detail_review_list .check label i{ display: flex; justify-content: center; align-items: center; width: 20px; height: 20px; border-radius: 5px; border: 1px solid #e5e5e5; background: #FFF; font-size: 12px; color: #FFF;}
.workshop_detail_review_list .check label p{ margin: 0 0 0 5px; font-size: 14px; color: #000;}
.workshop_detail_review_list .check label.on i{ border-color: #67c5e3; background: #67c5e3;}
.workshop_detail_review_list .check label.on p{ font-weight: 500;}

.workshop_detail_review_list .wrap{ display: flex; align-items: center; padding: 30px 30px 30px 0; border-bottom: 1px solid #e5e5e5;}
.workshop_detail_review_list .wrap .fl{ flex: 0 0 160px; text-align: center;}
.workshop_detail_review_list .wrap .fl .tit{ font-size: 18px; color: #000;}
.workshop_detail_review_list .wrap .fr{}
.workshop_detail_review_list .wrap .fr .star{ display: flex; align-items: center;}
.workshop_detail_review_list .wrap .fr .star i{ font-size: 16px; color: #CCC;}
.workshop_detail_review_list .wrap .fr .star i.on{ color: #ffb000;}
.workshop_detail_review_list .wrap .fr .star p{ margin: 0 0 0 5px; font-size: 14px; color: #000;}
.workshop_detail_review_list .wrap .fr .tit{ margin: 20px 0 0 0; font-size: 18px; font-weight: 700; color: #000;}
.workshop_detail_review_list .wrap .fr .txt{ margin: 10px 0 0 0; line-height: 1.4; font-size: 16px; color: #000;}
.workshop_detail_review_list .wrap .fr .img{ display: flex; flex-wrap: wrap; grid-gap: 10px; margin: 15px 0 0 0;}
.workshop_detail_review_list .wrap .fr .img a{ display: block; width: 80px; border-radius: 5px; cursor: pointer;}
.workshop_detail_review_list .wrap .fr .img a img{ display: block; width: 100%;}
.workshop_detail_review_list .wrap .fr .info{ display: flex; align-items: center; grid-gap: 0 30px; margin: 15px 0 0 0;}
.workshop_detail_review_list .wrap .fr .info p{ display: flex; align-items: center; font-size: 14px; color: #666;}
.workshop_detail_review_list .wrap .fr .info p i{ margin: 0 5px 0 0; font-size: 16px; color: #999;}
.workshop_detail_review_list .type_page{ margin: 30px 0;}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
}
@media(max-width: 767px){
    .workshop_detail_review_list .head .fl .star p{ font-size: 14px;}
    .workshop_detail_review_list .head .fl .star p span{ font-size: 16px;}
    .workshop_detail_review_list .head .fl .star i{ font-size: 18px;}
    .workshop_detail_review_list .head .fr{ padding: 30px 20px;}
    .workshop_detail_review_list .head .fr .row p{ font-size: 14px;}
    .workshop_detail_review_list .type_info{ padding: 20px;}

    .workshop_detail_review_list .wrap{ display: block; padding: 20px;}
    .workshop_detail_review_list .wrap .fl{ flex: initial; text-align: left;}
    .workshop_detail_review_list .wrap .fl .tit{ font-size: 16px; color: #000;}
    .workshop_detail_review_list .wrap .fr{ margin: -16px 0 0 0;}
    .workshop_detail_review_list .wrap .fr .star{ justify-content: flex-end;}
    .workshop_detail_review_list .wrap .fr .tit{ font-size: 16px;}
    .workshop_detail_review_list .wrap .fr .txt{ font-size: 14px;}
    .workshop_detail_review_list .wrap .fr .img{ grid-gap: 5px;}
    .workshop_detail_review_list .wrap .fr .img a{ width: 60px;}
    .workshop_detail_review_list .type_page{ margin: 20px 0;}
}


.workshop_detail_review_list_img_popup{ display: none; justify-content: center; align-items: center; position: fixed; z-index: 200; top: 0; right: 0; bottom: 0; left: 0; padding: 50px; background: rgba(0 0 0/70%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);}
.workshop_detail_review_list_img_popup .row{ position: relative; z-index: 10; max-width: 800px; width: 100%;}
.workshop_detail_review_list_img_popup .row > i{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 10; top: -20px; right: -20px; width: 40px; height: 40px; border-radius: 50%; background: #F00; font-size: 14px; color: #FFF; cursor: pointer;}
.workshop_detail_review_list_img_popup .row .img{}
.workshop_detail_review_list_img_popup .row .img .rolling{ overflow: hidden; position: relative; border-radius: 5px;}
.workshop_detail_review_list_img_popup .row .img .rolling .swiper-wrapper{}
.workshop_detail_review_list_img_popup .row .img .rolling .swiper-wrapper .swiper-slide{ background: #FFF;}
.workshop_detail_review_list_img_popup .row .img .rolling .swiper-wrapper .swiper-slide a{ display: block;}
.workshop_detail_review_list_img_popup .row .img .rolling .swiper-wrapper .swiper-slide a img{ display: block; width: 100%; height: auto;}

.workshop_detail_review_list_img_popup .row .img .rolling .swiper-button-prev{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 50; top: 50%; transform: translate(0,-50%); left: 20px; margin: 0; opacity: 0; cursor: pointer; transition: all .3s;}
.workshop_detail_review_list_img_popup .row .img .rolling .swiper-button-prev:after{ font-size: 30px; color: #FFF; transition: all .2s;}
.workshop_detail_review_list_img_popup .row .img .rolling .swiper-button-next{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 50; top: 50%; transform: translate(0,-50%); right: 20px; margin: 0; opacity: 0; cursor: pointer; transition: all .3s;}
.workshop_detail_review_list_img_popup .row .img .rolling .swiper-button-next:after{ font-size: 30px; color: #FFF; transition: all .2s;}
.workshop_detail_review_list_img_popup .row .img .rolling:hover .swiper-button-prev{ opacity: 1;}
.workshop_detail_review_list_img_popup .row .img .rolling:hover .swiper-button-next{ opacity: 1;}

.workshop_detail_review_list_img_popup_pagination{ display: flex; justify-content: center; align-items: center; grid-gap: 0 5px; position: absolute; z-index: 10; top: initial; left: 0; right: 0; bottom: 0 !important; margin: 0; height: 40px; background: linear-gradient(180deg, rgba(0 0 0/0), rgba(0 0 0/50%)); font-size: 14px; color: rgba(255 255 255/100%) !important; transition: all .2s;}
.workshop_detail_review_list_img_popup_pagination .swiper-pagination-current{ font-weight: 500; color: #FFF;}
.workshop_detail_review_list_img_popup_pagination .swiper-pagination-total{ color: rgba(255 255 255/60%);}

.workshop_detail_review_list_img_popup .close{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0 0 0/0.000001%) center/cover;}
.workshop_detail_review_list_img_popup.on{ display: flex;}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
}
@media(max-width: 769px){
}


.workshop_detail_review_login{ padding: 50px 30px; border-radius: 5px; border: 1px solid #e5e5e5; text-align: center;}
.workshop_detail_review_login .tit{ font-size: 18px; font-weight: 700; color: #000;}
.workshop_detail_review_login .txt{ margin: 10px 0 0 0; font-size: 14px; color: #666;}
.workshop_detail_review_login .btn{ display: flex; justify-content: center; align-items: center; margin: 30px auto 0 auto; width: 200px; height: 50px; border-radius: 5px; background: #67c5e3;}
.workshop_detail_review_login .btn p{ font-size: 16px; font-weight: 700; color: #FFF;}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
}
@media(max-width: 769px){
    .workshop_detail_review_login .btn{ margin: 20px auto 0 auto; width: 160px; height: 45px;}
}


.workshop_detail_review_write{ display: grid; grid-gap: 20px 0; padding: 30px; border-radius: 5px; border: 1px solid #e5e5e5;}
.workshop_detail_review_write .wrap{ display: flex; align-items: center;}
.workshop_detail_review_write .wrap .tit{ flex: 0 0 80px; font-size: 14px; color: #000;}
.workshop_detail_review_write .wrap .star{ flex: 1; display: flex; align-items: center; grid-gap: 0 5px;}
.workshop_detail_review_write .wrap .star i{ font-size: 18px; color: #CCC; transform: translate(0,-1px); cursor: pointer;}
.workshop_detail_review_write .wrap .star i.on{ color: #ffb000;}
.workshop_detail_review_write .wrap .star p{ margin: 0 0 0 5px; font-size: 16px; color: #000;}
.workshop_detail_review_write .wrap textarea{ padding: 15px; width: 100%; height: 140px; border-radius: 5px; border: 1px solid #e5e5e5; background: #f6f8fb; line-height: 1.4; font-size: 16px; outline: none;  -webkit-appearance: none;}
.workshop_detail_review_write .wrap .img{ display: flex; grid-gap: 0 10px;}
.workshop_detail_review_write .wrap .img a{ display: flex; justify-content: center; align-items: center; position: relative; width: 60px; height: 60px; border-radius: 5px; border: 1px solid #e5e5e5; cursor: pointer;}
.workshop_detail_review_write .wrap .img a i{ font-size: 14px; color: #000;}
.workshop_detail_review_write .wrap .img a:hover{ background: #f6f8fb;}
.workshop_detail_review_write .wrap .img a.up{ border: 0;}
.workshop_detail_review_write .wrap .img a.up i{ display: none;}
.workshop_detail_review_write .wrap .btn{ display: flex; justify-content: center; align-items: center; width: 120px; height: 50px; border-radius: 5px; background: #67c5e3;}
.workshop_detail_review_write .wrap .btn p{ font-size: 16px; font-weight: 700; color: #FFF;}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
}
@media(max-width: 769px){
    .workshop_detail_review_write{ grid-gap: 15px 0; padding: 20px;}
    .workshop_detail_review_write .wrap .tit{ flex: 0 0 60px;}
    .workshop_detail_review_write .wrap .star{ flex: 1; display: flex; align-items: center; grid-gap: 0 5px;}
    .workshop_detail_review_write .wrap .star i{ font-size: 18px; color: #CCC; transform: translate(0,-1px); cursor: pointer;}
    .workshop_detail_review_write .wrap .star i.on{ color: #ffb000;}
    .workshop_detail_review_write .wrap .star p{ margin: 0 0 0 5px; font-size: 16px; color: #000;}
    .workshop_detail_review_write .wrap textarea{ height: 120px; font-size: 14px;}
    .workshop_detail_review_write .wrap .img{ grid-gap: 5px;}
    .workshop_detail_review_write .wrap .img a{ display: flex; width: 40px; height: 40px;}
    .workshop_detail_review_write .wrap .btn{ width: 100px; height: 45px;}
    .workshop_detail_review_write .wrap .btn p{ font-size: 16px;}
}


.workshop_reservation{ margin: 0 auto; max-width: 500px;}
.workshop_reservation .title{ padding: 40px 0 15px 0; font-size: 20px; font-weight: 700; color: #000;}
.workshop_reservation .title:first-child{ padding-top: 0;}

.workshop_reservation .select{ display: flex; align-items: center; padding: 30px; border-radius: 5px; border: 1px solid #e5e5e5;}
.workshop_reservation .select .img{ flex: 0 0 100px; margin: 0 15px 0 0; border-radius: 5px;}
.workshop_reservation .select .img img{ display: block; width: 100%;}
.workshop_reservation .select .fr{ flex: 1;}
.workshop_reservation .select .fr .tit{ font-size: 18px; font-weight: 700; color: #000;}
.workshop_reservation .select .fr .txt{ margin: 10px 0 0 0; font-size: 14px; color: #666;}

.workshop_reservation .write{ padding: 10px 30px; border-radius: 5px; border: 1px solid #e5e5e5;}
.workshop_reservation .write ul{}
.workshop_reservation .write ul li{ border-bottom: 1px solid #e5e5e5;}
.workshop_reservation .write ul li:last-child{ border-bottom: 0;}
.workshop_reservation .write ul li .wrap{ display: flex; align-items: flex-start; padding: 20px 0;}
.workshop_reservation .write ul li .wrap .tit{ flex: 0 0 100px; display: flex; align-items: center; line-height: 45px; font-size: 14px; color: #000;}
.workshop_reservation .write ul li .wrap .tit span{ padding: 0 0 0 5px; color: #F00;}
.workshop_reservation .write ul li .wrap .txt{ margin: 10px 0 0 0; line-height: 1.2; font-size: 13px; color: #F00;}

.workshop_reservation .write input{ display: flex; align-items: center; margin: 0; padding: 0 15px; width: 100%; height: 45px; border-radius: 5px; border: 1px solid #e5e5e5; background: #f6f8fb; font-size: 14px; font-weight: 400; color: #000; outline: none; -webkit-appearance: none;}
.workshop_reservation .write input:focus{ border: 1px solid #67c5e3;}
.workshop_reservation .write select{ display: flex; align-items: center; margin: 0; padding: 0 30px 0 15px; width: 100%; height: 45px; border-radius: 5px; border: 1px solid #e5e5e5; background:url(/images/icon_select.png) no-repeat center right 15px #f6f8fb; background-size: 16px auto; font-size: 14px; font-weight: 400; color: #000; outline: none; -webkit-appearance: none;}
.workshop_reservation .write select:focus{ border: 1px solid #67c5e3;}
.workshop_reservation .write textarea{ display: block; margin: 0; padding: 15px; width: 100%; height: 200px; max-height: 200px; min-height: 200px; border-radius: 5px; border: 1px solid #e5e5e5; background: none; line-height: 1.4; font-size: 14px; color: #000; outline:none; -webkit-appearance:none;}
.workshop_reservation .write textarea:focus{ border: 1px solid #67c5e3;}

.workshop_reservation .write .mail{ flex: 1; display: grid; grid-gap: 5px 0;}
.workshop_reservation .write .mail .fl{ display: flex;}
.workshop_reservation .write .mail .fl input{ width: 100%;}
.workshop_reservation .write .mail .fl p{ flex: 0 0 20px; text-align: center; line-height: 50px; font-size: 12px; color: #666;}
.workshop_reservation .write .mail select{}

.workshop_reservation .write .tel{ flex: 1; display: flex; grid-gap: 0 5px;}
.workshop_reservation .write .tel select{ flex: 0 0 90px;}
.workshop_reservation .write .tel input{ width: 50%;}

.workshop_reservation .write .date{ flex: 1; position: relative;}
.workshop_reservation .write .date i{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 10; top: 0; right: 0; width: 45px; height: 45px; font-size: 20px; color: #000; cursor: pointer;}

.workshop_reservation .write .time{ flex: 1; display: flex; grid-gap: 0 5px;}
.workshop_reservation .write .time select{ width: 50%;}
.workshop_reservation .write .time select:first-child{ flex: 0 0 90px;}

.workshop_reservation .write .user{ flex: 1; position: relative;}
.workshop_reservation .write .user .btn{ display: flex; flex-direction: column; justify-content: center; position: absolute; z-index: 10; top: 0; right: 15px; bottom: 0;}
.workshop_reservation .write .user .btn i{ font-size: 14px; color: #000; cursor: pointer; transition: all .2s;}
.workshop_reservation .write .user .btn i:hover{ background: #f5f5f5;}

.workshop_reservation .write .checkbox{ flex: 1; display: flex; flex-wrap: wrap; grid-gap: 15px 0; padding: 12.5px 0;}
.workshop_reservation .write .checkbox label{ display: flex; align-items: center; width: 50%; cursor: pointer;}
.workshop_reservation .write .checkbox label i{ display: flex; justify-content: center; align-items: center; width: 20px; height: 20px; border-radius: 5px; border: 1px solid #e5e5e5; background: #FFF; font-size: 12px; color: #FFF;}
.workshop_reservation .write .checkbox label p{ margin: 0 0 0 5px; font-size: 14px; color: #000;}
.workshop_reservation .write .checkbox label.on i{ border-color: #67c5e3; background: #67c5e3; color: #FFF;}
.workshop_reservation .write .checkbox label.on p{ font-weight: 600;}

.workshop_reservation .terms{}
.workshop_reservation .terms .all_btn{ display: flex; align-items: center; padding: 40px 0 15px 0; cursor: pointer;}
.workshop_reservation .terms .all_btn i{ display: flex; justify-content: center; align-items: center; margin: 0 10px 0 0; width: 20px; height: 20px; border-radius: 5px; border: 1px solid #e5e5e5; font-size: 12px; color: #FFF;}
.workshop_reservation .terms .all_btn p{ font-size: 20px; font-weight: 700; color: #000;}
.workshop_reservation .terms .all_btn p span{ padding: 0 0 0 10px; font-size: 14px; color: #666;}
.workshop_reservation .terms .all_btn.on i{ border-color: #67c5e3; background: #67c5e3; color: #FFF;}
.workshop_reservation .terms .list{ padding: 15px 30px; border-radius: 5px; border: 1px solid #e5e5e5;}
.workshop_reservation .terms .list ul{}
.workshop_reservation .terms .list ul li{ display: flex; justify-content: space-between; align-items: center; padding: 5px 0;}
.workshop_reservation .terms .list ul li .check{ display: flex; align-items: center; cursor: pointer;}
.workshop_reservation .terms .list ul li .check i{ display: flex; justify-content: center; align-items: center; margin: 0 10px 0 0; width: 20px; height: 20px; border-radius: 5px; border: 1px solid #e5e5e5; background: #FFF; font-size: 12px; color: #FFF;}
.workshop_reservation .terms .list ul li .check p{ font-size: 14px; font-weight: 400; color: #000;}
.workshop_reservation .terms .list ul li .check.on i{ border-color: #67c5e3; background: #67c5e3; color: #FFF;}
.workshop_reservation .terms .list ul li .btn{ display: flex; justify-content: center; align-items: center; padding: 0 15px; height: 35px; border-radius: 20px; border: 1px solid #e5e5e5; background: #FFF; font-size: 12px; color: #000; cursor: pointer;}
.workshop_reservation .terms .list ul li .btn:hover{ border-color: #67c5e3; color: #67c5e3;}

.workshop_reservation .reservation_info{ overflow: hidden; border-radius: 5px; border: 1px solid #e5e5e5;}
.workshop_reservation .reservation_info table{ border-collapse: collapse; border-spacing: 0; width: 100%;}
.workshop_reservation .reservation_info table tbody{}
.workshop_reservation .reservation_info table tbody tr{ border-bottom: 1px solid #e5e5e5;}
.workshop_reservation .reservation_info table tbody tr:last-child{ border-bottom: 0;}
.workshop_reservation .reservation_info table tbody tr th{ border-right: 1px solid #e5e5e5; background: #f6f8fb; padding: 0 10px; font-size: 14px; font-weight: 500; color: #000;}
.workshop_reservation .reservation_info table tbody tr td{ padding: 20px; font-size: 14px; color: #000;}
.workshop_reservation .reservation_info table tbody tr td dl{ display: flex; align-items: center;}
.workshop_reservation .reservation_info table tbody tr td dl dt{ margin: 0 10px 0 0; color: #666;}
.workshop_reservation .reservation_info table tbody tr td dl dd{ font-weight: 500; color: #000;}
.workshop_reservation .reservation_info table tbody tr td i{ margin: 0 20px;}

.workshop_reservation .reservation_ok{ display: flex; flex-direction: column; align-items: center; padding: 50px 30px; border-radius: 5px; background: #f4f7fb; text-align: center;}
.workshop_reservation .reservation_ok i{ font-size: 100px; color: #67c5e3;}
.workshop_reservation .reservation_ok .tit{ margin: 20px 0 0 0; line-height: 1.2; font-size: 20px; font-weight: 700; color: #000;}
.workshop_reservation .reservation_ok .tit br{ display: none;}
.workshop_reservation .reservation_ok .txt{ margin: 10px 0 0 0; line-height: 1.4; font-size: 16px; color: #333;}

.workshop_reservation .pay{ display: flex; align-items: center; padding: 10px 0;}
.workshop_reservation .pay .btn{ display: flex; justify-content: flex-start; align-items: center; margin: 0 20px 0 0; cursor: pointer;}
.workshop_reservation .pay .btn i{ display: flex; justify-content: center; align-items: center; margin: 0; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #e5e5e5; font-size: 12px; color: #FFF;}
.workshop_reservation .pay .btn p{ margin: 0 0 0 5px; font-size: 14px; color: #666;}
.workshop_reservation .pay .btn.on i{ border-color: #67c5e3; background: #67c5e3; color: #FFF;}
.workshop_reservation .pay .btn.on p{ font-weight: 500; color: #000;}

.workshop_reservation .pay_info{ display: grid; grid-gap: 10px 0; margin: 20px 0 0 0; padding: 20px; border-radius: 5px; border: 1px solid #DDD;}
.workshop_reservation .pay_info .p_tit{ font-size: 14px; color: #666;}
.workshop_reservation .pay_info .number{ font-size: 22px; font-weight: 700; color: #000;}
.workshop_reservation .pay_info .name{ font-size: 16px; color: #000;}
.workshop_reservation .award{ display: flex; justify-content: center; align-items: center; width: 120px; height: 45px; border-radius: 50px; background: #000; font-size: 16px; font-weight: 600; color: #FFF;}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
}
@media(max-width: 767px){
    .workshop_reservation .select{ padding: 20px;}

    .workshop_reservation .pay{ flex-direction: column; align-items: flex-start; grid-gap: 10px 0;}

    .workshop_reservation .terms .list{ padding: 15px 20px;}

    .workshop_reservation .write{ padding: 10px 20px;}
    .workshop_reservation .write ul li .wrap{ display: block;}
    .workshop_reservation .write ul li .wrap .tit{ padding: 0 0 10px 0; line-height: 1;}

    .workshop_reservation .reservation_ok{ padding: 30px 15px;}
    .workshop_reservation .reservation_ok i{ font-size: 60px;}
    .workshop_reservation .reservation_ok .tit{ font-size: 18px;}
    .workshop_reservation .reservation_ok .txt{ font-size: 14px;}
}































.instructor_list{}
.instructor_list ul{ display: grid; grid-template-columns: repeat(5,1fr); grid-gap: 20px;}
.instructor_list ul li{}
.instructor_list ul li .wrap{ display: block; overflow: hidden; transition: all .2s;}
.instructor_list ul li .wrap .img{ display: block; position: relative; border-radius: 5px 5px 0 0;}
.instructor_list ul li .wrap .img .tip{ display: flex; flex-wrap: wrap; grid-gap: 5px; position: absolute; z-index: 10; top: 10px; left: 10px;}
.instructor_list ul li .wrap .img .tip div{ display: flex; align-items: center; padding: 0 10px; height: 25px; border-radius: 5px; font-size: 12px; font-weight: 500; color: #FFF;}
.instructor_list ul li .wrap .img .tip div.hot{ background: #F00;}
.instructor_list ul li .wrap .img img{ display: block; width: 100%;}
.instructor_list ul li .wrap .info{ position: relative; padding: 20px; border-radius: 0 0 5px 5px; border: 1px solid #e5e5e5; border-top: 0;}
.instructor_list ul li .wrap .info .name{}
.instructor_list ul li .wrap .info .name p{ font-size: 14px; color: #000; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;}
.instructor_list ul li .wrap .info .name p:nth-child(1){ font-size: 18px; font-weight: 700;}
.instructor_list ul li .wrap .info .name p:nth-child(3){ margin: 10px 0 0 0;}
.instructor_list ul li .wrap .info .name span{ display: none; width: 1px; height: 12px; background: #DDD;}
.instructor_list ul li .wrap .info .btn{ display: flex; justify-content: space-between; align-items: center; margin: 15px 0 0 0;}
.instructor_list ul li .wrap .info .btn a:nth-child(1){ display: flex; justify-content: center; align-items: center; cursor: pointer;}
.instructor_list ul li .wrap .info .btn a:nth-child(1) i{ font-size: 20px; color: #000;}
.instructor_list ul li .wrap .info .btn a.on:nth-child(1) i{ color: #F00;}
.instructor_list ul li .wrap .info .btn a:nth-child(2){ display: flex; align-items: center; padding: 0 10px; height: 35px; border-radius: 5px; border: 1px solid #e5e5e5; background: #f6f8fb; cursor: pointer;}
.instructor_list ul li .wrap .info .btn a:nth-child(2) p{ font-size: 14px; color: #000;}
.instructor_list ul li .wrap .info .type_like_btn.on i{ color: #F00;}
.instructor_list ul li .wrap:hover{ transform: scale(.96);}
@media(max-width: 1301px){
    .instructor_list ul li .wrap .info .name{ display: block;}
    .instructor_list ul li .wrap .info .name p:nth-child(3){ margin: 10px 0 0 0;}
    .instructor_list ul li .wrap .info .name span{ display: none;}
    .instructor_list ul li .wrap:hover{ transform: scale(1);}
}
@media(max-width: 1025px){
    .instructor_list ul{ grid-template-columns: repeat(3,1fr);}
}
@media(max-width: 767px){
    .instructor_list ul{ grid-template-columns: repeat(2,1fr); grid-gap: 10px;}
}


.instructor_detail_layout{ position: relative; padding: 0 400px 0 0;}
.instructor_detail_layout > .fl{}
.instructor_detail_layout > .fr{ position: absolute; top: 0; right: 0;}
.instructor_detail_layout > .fr .btn_open{ display: none;}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
    .instructor_detail_layout{ padding: 0;}
    .instructor_detail_layout > .fr{ position: fixed; z-index: 200; top: initial; right: 0; bottom: 60px; left: 0;}
    .instructor_detail_layout > .fr .btn_open{ display: flex; justify-content: center; align-items: center; grid-gap: 0 10px; height: 50px; background: #333;}
    .instructor_detail_layout > .fr .btn_open p{ font-size: 16px; color: #FFF;}
    .instructor_detail_layout > .fr .btn_open i{ transform: translate(0,-1px); font-size: 12px; color: #FFF; transition: all .2s;}
    .instructor_detail_layout > .fr.off .btn_open i{ transform: rotate(180deg);}
}
@media(max-width: 767px){
    .instructor_detail_layout > .fr .btn_open{ height: 40px;}
    .instructor_detail_layout > .fr .btn_open p{ font-size: 14px;}
}


.instructor_detail_head{ width: 370px;}
.instructor_detail_head > .ft{}
.instructor_detail_head > .fb{ margin: 10px 0 0 0; padding: 30px; border-radius: 5px; background: #FFF; border: 1px solid rgba(0 0 0/10%); box-shadow: 0 10px 50px 1px rgba(0 0 0/10%);}

.instructor_detail_head .btn{ display: flex; grid-gap: 0 10px;}
.instructor_detail_head .btn a{ display: flex; justify-content: center; align-items: center; grid-gap: 0 10px; width: 50%; height: 50px; border-radius: 5px; background: #FFF; border: 1px solid rgba(0 0 0/10%); border: 1px solid #e5e5e5; cursor: pointer; transition: all .2s;}
.instructor_detail_head .btn a i{ font-size: 18px; color: #000; transform: translate(0,-1px);}
.instructor_detail_head .btn a p{ font-size: 16px; color: #000;}
.instructor_detail_head .btn a:hover{ box-shadow: 0 5px 30px 0 rgba(0 0 0/5%);}
.instructor_detail_head .btn a.on{ border-color: #F00; background: #F00;}
.instructor_detail_head .btn a.on i{ color: #FFF;}
.instructor_detail_head .btn a.on p{ color: #FFF;}
.instructor_detail_head .type_like_btn{ cursor: pointer;}
.instructor_detail_head .type_like_btn i{ font-size: 24px; color: #000;}
.instructor_detail_head .type_like_btn.on i{ color: #F00;}

.instructor_detail_head .price{ display: flex; align-items: flex-end;}
.instructor_detail_head .price p{ font-size: 22px; font-weight: 700; color: #F00;}
.instructor_detail_head .price span{ padding: 0 0 1px 4px; font-size: 14px; color: #666;}

.instructor_detail_head .price_txt{ display: flex; justify-content: space-between; align-items: center; margin: 15px 0 0 0; padding: 10px 15px; border-radius: 5px; border: 1px solid #e5e5e5; background: #f6f8fb;}
.instructor_detail_head .price_txt p{ font-size: 14px; color: #999;}
.instructor_detail_head .price_txt span{ font-size: 14px; color: #666;}

.instructor_detail_head .info{ overflow: hidden; position: relative; margin: 15px 0 0 0; border-radius: 5px; border: 1px solid #e5e5e5;}
.instructor_detail_head .info .ft{ display: flex; justify-content: center; align-items: center; height: 30px; border-bottom: 1px solid #e5e5e5; font-size: 12px; color: #000;}
.instructor_detail_head .info .fb{ display: flex;}
.instructor_detail_head .info .row{ width: 25%; border-left: 1px solid #e5e5e5;}
.instructor_detail_head .info .row:first-child{ border-left: 0;}
.instructor_detail_head .info .row .tit{ display: flex; justify-content: center; align-items: center; height: 30px; border-bottom: 1px solid #e5e5e5; font-size: 12px; color: rgba(0 0 0/60%);}
.instructor_detail_head .info .row .txt{ padding: 10px 10px; text-align: center; font-size: 14px; color: #000;}

.instructor_detail_head .in{ display: grid; grid-gap: 5px 0; margin: 15px 0 0 0;}
.instructor_detail_head .in .user{ position: relative;}
.instructor_detail_head .in .user .btn{ display: flex; flex-direction: column; justify-content: center; position: absolute; z-index: 10; top: 0; right: 15px; bottom: 0;}
.instructor_detail_head .in .user .btn i{ font-size: 14px; color: #000; cursor: pointer; transition: all .2s;}
.instructor_detail_head .in .user .btn i:hover{ background: #f5f5f5;}
.instructor_detail_head .in .user input{ display: flex; align-items: center; padding: 0 15px; width: 100%; height: 45px; border-radius: 5px; border: 1px solid #e5e5e5; font-size: 14px; color: #000; outline: none; -webkit-appearance: none;}
.instructor_detail_head .in .user input:focus{ border: 1px solid #67c5e3;}
.instructor_detail_head .in select{ display: flex; align-items: center; margin: 0; padding: 0 30px 0 15px; width: 100%; height: 45px; border-radius: 5px; border:1px solid #e5e5e5; background:url(/images/icon_select.png) no-repeat center right 15px #FFF; background-size: 14px auto; font-size: 14px; color: #000; outline: none; -webkit-appearance: none;}
.instructor_detail_head .in select:focus{ border: 1px solid #67c5e3;}

.instructor_detail_head .price_ok{ margin: 20px 0 0 0;}
.instructor_detail_head .price_ok .tit{ display: flex; justify-content: space-between; align-items: flex-end; font-size: 14px; color: #666;}
.instructor_detail_head .price_ok .tit span{ font-size: 12px;}
.instructor_detail_head .price_ok .txt{ margin: 10px 0 0 0; padding: 10px 15px; border-radius: 5px; border: 1px solid #e5e5e5; background: #f6f8fb; text-align: center;}
.instructor_detail_head .price_ok .txt span{ display: block; padding: 0 0 5px 0; font-size: 14px; color: #000; text-decoration: line-through;}
.instructor_detail_head .price_ok .txt p{ font-size: 22px; font-weight: 700; color: #F00;}

.instructor_detail_head .button{ display: flex; grid-gap: 0 6px; margin: 15px 0 0 0;}
.instructor_detail_head .button a{ display: flex; justify-content: center; align-items: center; width: 100%; height: 50px; border-radius: 5px; cursor: pointer; transition: all .2s;}
.instructor_detail_head .button a:nth-child(1){ border: 1px solid #e5e5e5;}
.instructor_detail_head .button a:nth-child(1) p{ color: #000;}
.instructor_detail_head .button a:nth-child(2){ background: #67c5e3;}
.instructor_detail_head .button a:nth-child(2) p{ font-weight: 700; color: #FFF;}
.instructor_detail_head .button a:hover{ box-shadow: 0 5px 30px 0 rgba(0 0 0/10%);}

.instructor_detail_head.on{ position: fixed; z-index: 10; top: 110px; right: 50%; margin: 0 -600px 0 0;}
@media(max-width: 1301px){
    .instructor_detail_head.on{ right: 50px; margin: 0;}
}
@media(max-width: 1025px){
    .instructor_detail_head{ width: auto;}
    .instructor_detail_head > .ft{}
    .instructor_detail_head > .fb{ margin: 0; padding: 30px; border-radius: 0; background: #FFF; border: 0; border-top: 1px solid #e5e5e5; box-shadow: 0;}

    .instructor_detail_head .btn{ grid-gap: 0;}
    .instructor_detail_head .btn a{ border-radius: 0; border: 0;}
    .instructor_detail_head .btn a:first-child{ border-right: 1px solid #e5e5e5;}

    .instructor_detail_head.on{ position: initial;}
}
@media(max-width: 767px){
    .instructor_detail_head > .fb{ padding: 20px;}
    .instructor_detail_head .btn a{ height: 40px;}
    .instructor_detail_head .btn a i{ font-size: 16px; transform: translate(0,-1px);}
    .instructor_detail_head .btn a p{ font-size: 14px;}

    .instructor_detail_head .price p{ font-size: 18px;}
    .instructor_detail_head .price span{ font-size: 12px;}
    .instructor_detail_head .price_txt{ margin: 10px 0 0 0;}
    .instructor_detail_head .price_txt p{ font-size: 12px;}
    .instructor_detail_head .price_txt span{ font-size: 12px;}

    .instructor_detail_head .info{ margin: 10px 0;}
    .instructor_detail_head .in{ margin: 10px 0 0 0;}

    .instructor_detail_head .price_ok .txt{ display: flex; justify-content: space-between; align-items: center;}
    .instructor_detail_head .price_ok .txt p{ font-size: 18px;}

    .instructor_detail_head .button a{ height: 45px;}
}


.instructor_detail_info{}
.instructor_detail_info .ft{ display: flex; grid-gap: 0 5px;}
.instructor_detail_info .ft .hot{ display: flex; align-items: center; padding: 0 20px; height: 35px; border-radius: 50px; background: #F00; font-size: 14px; font-weight: 500; color: #FFF;}
.instructor_detail_info .name{ display: flex; align-items: flex-end; grid-gap: 0 20px; margin: 20px 0 0 0;}
.instructor_detail_info .name p{ font-size: 26px; font-weight: 700; color: #000;}
.instructor_detail_info .name span{ font-size: 20px; color: #666;}
.instructor_detail_info .txt{ margin: 15px 200px 0 0; line-height: 1.4; font-size: 16px; color: #666;}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
    .instructor_detail_info .txt{ margin: 10px 0 0 0;}
}
@media(max-width: 767px){
    .instructor_detail_info .ft .hot{ padding: 0 15px; height: 30px; font-size: 12px;}

    .instructor_detail_info .name{ display: block; margin: 15px 0 0 0;}
    .instructor_detail_info .name p{ line-height: 30px; font-size: 20px;}
    .instructor_detail_info .name span{ display: block; margin: 10px 0 0 0; font-size: 16px;}
    .instructor_detail_info .txt{ margin: 15px 0 0 0; font-size: 14px;}
}


.instructor_detail_rolling{ margin: 30px 0 0 0;}
.instructor_detail_rolling .max{ flex: 1; width: 100%; overflow: hidden; position: relative;}
.instructor_detail_rolling .max .swiper-wrapper{}
.instructor_detail_rolling .max .swiper-wrapper .swiper-slide{}
.instructor_detail_rolling .max .swiper-wrapper .swiper-slide .img{ border-radius: 5px 5px 0 0;}
.instructor_detail_rolling .max .swiper-wrapper .swiper-slide .img img{ display: block; width: 100%;}
.instructor_detail_rolling .max .swiper-button-prev{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 50; top: 50%; transform: translate(0,-50%); left: 20px; margin: 0; opacity: 0; cursor: pointer; transition: all .3s;}
.instructor_detail_rolling .max .swiper-button-prev:after{ font-size: 30px; color: #FFF; transition: all .2s;}
.instructor_detail_rolling .max .swiper-button-next{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 50; top: 50%; transform: translate(0,-50%); right: 20px; margin: 0; opacity: 0; cursor: pointer; transition: all .3s;}
.instructor_detail_rolling .max .swiper-button-next:after{ font-size: 30px; color: #FFF; transition: all .2s;}
.instructor_detail_rolling .max:hover .swiper-button-prev{ opacity: 1;}
.instructor_detail_rolling .max:hover .swiper-button-next{ opacity: 1;}
.instructor_detail_rolling .min{ overflow: hidden; padding: 20px; border-radius: 0 0 5px 5px; border: 1px solid #e5e5e5; border-top: 0;}
.instructor_detail_rolling .min .swiper-wrapper{}
.instructor_detail_rolling .min .swiper-wrapper .swiper-slide{ cursor: pointer; width: auto; height: auto;}
.instructor_detail_rolling .min .swiper-wrapper .swiper-slide .img{ width: 80px; border-radius: 5px; opacity: 0.3; filter: grayscale(50%);}
.instructor_detail_rolling .min .swiper-wrapper .swiper-slide .img img{ display: block; width: 100%;}
.instructor_detail_rolling .min .swiper-wrapper .swiper-slide.swiper-slide-thumb-active .img{ opacity: 1; filter: grayscale(0);}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
}
@media(max-width: 767px){
    .instructor_detail_rolling .min{ padding: 10px;}
    .instructor_detail_rolling .min .swiper-wrapper .swiper-slide .img{ width: 40px;}
}


.instructor_detail_body{ margin: 60px 0 0 0;}
.instructor_detail_body .scroll_menu{}
.instructor_detail_body .scroll_menu ul{ display: flex; position: relative; border-radius: 5px 5px 0 0; background: #f6f8fb;}
.instructor_detail_body .scroll_menu ul li{ width: 25%;}
.instructor_detail_body .scroll_menu ul li a{ display: flex; justify-content: center; align-items: center; position: relative; height: 70px; border-bottom: 1px solid #e5e5e5; cursor: pointer;}
.instructor_detail_body .scroll_menu ul li a p{ font-size: 16px; font-weight: 500; color: #000;}
.instructor_detail_body .scroll_menu ul li.on a:before{ content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 3px; background: #67c5e3;}
.instructor_detail_body .scroll_menu ul li.on a p{ font-size: 16px; font-weight: 700; color: #67c5e3;}
.instructor_detail_body .scroll_body{ margin: 40px 0 0 0;}
.instructor_detail_body .scroll_body .title{ padding: 0 0 20px 0; font-size: 22px; font-weight: 700; color: #000;}
.instructor_detail_body .scroll_body .title.mt{ margin: 60px 0 0 0;}
.instructor_detail_body .scroll_body .title span{ font-weight: 700; color: #F00;}
.instructor_detail_body .scroll_body pre{ padding: 50px; border-radius: 16px; border: 1px solid rgba(0 0 0/15%); background: #; white-space: pre-line; line-height: 1.8; font-size: 17px;}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
}
@media(max-width: 767px){
    .instructor_detail_body{ margin: 40px 0 0 0;}
    .instructor_detail_body .scroll_menu ul{ border-radius: 5px;}
    .instructor_detail_body .scroll_menu ul li{ width: 25%;}
    .instructor_detail_body .scroll_menu ul li a{ border: 0;}
    .instructor_detail_body .scroll_menu ul li a p{ font-size: 16px;}
    .instructor_detail_body .scroll_menu ul li.on a:before{ display: none;}
    .instructor_detail_body .scroll_menu ul li.on a p{ font-size: 16px;}
    .instructor_detail_body .scroll_body .title{ padding: 0 0 15px 0; font-size: 20px;}
    .instructor_detail_body .scroll_body .title.mt{ margin: 40px 0 0 0;}
    .instructor_detail_body .scroll_body pre{ padding: 20px; border-radius: 5px; font-size: 14px;}
}


.instructor_detail_instructor{ display: grid; grid-gap: 20px 0; border-radius: 5px; padding: 50px; border: 1px solid #e5e5e5; line-height:1.4; }
.instructor_detail_instructor ul{}
.instructor_detail_instructor ul li{ position: relative; padding: 8px 0 0 15px; line-height: 1.4; font-size: 16px; color: #000;}
.instructor_detail_instructor ul li:before{ content: ""; display: block; position: absolute; top: 16px; left: 0; width: 4px; height: 4px; border-radius: 50%; background: #CCC;}
.instructor_detail_instructor ul li.tit{ padding: 20px 0 5px 0; font-size: 18px; font-weight: 700; color: #000;}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
}
@media(max-width: 767px){
    .instructor_detail_instructor{ grid-gap: 10px 0; padding: 20px;}
    .instructor_detail_instructor ul li{ font-size: 14px;}
    .instructor_detail_instructor ul li:before{ top: 14px;}
    .instructor_detail_instructor ul li.tit{ font-size: 16px;}
}






























.region_list{}
.region_list ul{}
.region_list ul li{ margin: 20px 0 0 0;}
.region_list ul li .wrap{ padding: 30px; border-radius: 5px; border: 1px solid #e5e5e5; transition: all .2s;}
.region_list ul li .wrap .head{ display: flex;}
.region_list ul li .wrap .head .fl{ flex: 1;}
.region_list ul li .wrap .head .fl .ft{ display: grid; grid-gap: 15px 0;}
.region_list ul li .wrap .head .fl .ft .tit{ margin: 0 20px 0 0; font-size: 18px; font-weight: 700; color: #000;}
.region_list ul li .wrap .head .fl .ft .txt{ display: flex; flex-wrap: wrap; grid-gap: 10px 20px;}
.region_list ul li .wrap .head .fl .ft .txt p{ display: flex; font-size: 14px; color: #000;}
.region_list ul li .wrap .head .fl .ft .txt p i{ margin: 0 5px 0 0; font-size: 14px; color: #CCC;}
.region_list ul li .wrap .head .fl .ft .txt p:nth-child(3){ width: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;}
.region_list ul li .wrap .head .btn{ display: flex; align-items: flex-start; grid-gap: 0 15px;}
.region_list ul li .wrap .head .btn a:nth-child(1){ display: flex; justify-content: center; align-items: center; cursor: pointer;}
.region_list ul li .wrap .head .btn a:nth-child(1) i{ font-size: 20px; color: #000;}
.region_list ul li .wrap .head .btn a.on:nth-child(1) i{ color: #F00;}
.region_list ul li .wrap .head .btn a:nth-child(2){ display: flex; align-items: center; padding: 0 10px; height: 35px; border-radius: 5px; border: 1px solid #e5e5e5; background: #f6f8fb; cursor: pointer;}
.region_list ul li .wrap .head .btn a:nth-child(2) p{ font-size: 14px; color: #000;}
.region_list ul li .wrap .list{ position: relative; margin: 30px 0 0 0;}
.region_list ul li .wrap .list .rolling{ overflow: hidden;}
.region_list ul li .wrap .list .rolling .swiper-wrapper{}
.region_list ul li .wrap .list .rolling .swiper-wrapper .swiper-slide{}
.region_list ul li .wrap .list .rolling .swiper-wrapper .swiper-slide .img{ display: block; border-radius: 5px;}
.region_list ul li .wrap .list .rolling .swiper-wrapper .swiper-slide .img img{ display: block; width: 100%;}
.region_list ul li .wrap .list .region_rolling_btn_prev{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 10; top: 50%; transform: translate(0,-50%); left: -30px; width: 30px; height: 30px; border-radius: 50%; background: #FFF; box-shadow: 0 0 0 1px rgba(0 0 0/10%); opacity: 0; transition: all .2s; cursor: pointer;}
.region_list ul li .wrap .list .region_rolling_btn_prev i{ font-size: 12px; color: #000;}
.region_list ul li .wrap .list .region_rolling_btn_next{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 10; top: 50%; transform: translate(0,-50%); right: -30px; width: 30px; height: 30px; border-radius: 50%; background: #FFF; box-shadow: 0 0 0 1px rgba(0 0 0/10%); opacity: 0; transition: all .2s; cursor: pointer;}
.region_list ul li .wrap .list .region_rolling_btn_next i{ font-size: 12px; color: #000;}
.region_list ul li .wrap:hover{ transform: scale(.96);}
.region_list ul li .wrap:hover .list .region_rolling_btn_prev{ left: -15px; opacity: 1;}
.region_list ul li .wrap:hover .list .region_rolling_btn_next{ right: -15px; opacity: 1;}
@media(max-width: 1301px){
    .region_list ul li .wrap:hover{ transform: scale(1);}
    .region_list ul li .wrap .list .region_rolling_btn_prev{ left: -15px; opacity: 1;}
    .region_list ul li .wrap .list .region_rolling_btn_next{ right: -15px; opacity: 1;}
}
@media(max-width: 1025px){
}
@media(max-width: 767px){
    .region_list ul li .wrap{ padding: 20px;}
}


.region_layout{ position: relative; padding: 0 0 0 50%;}
.region_layout > .fl{ position: absolute; top: 0; left: 0; padding: 0 15px 0 0; width: 50%;}
.region_layout > .fr{ padding: 0 0 0 15px; width: 100%;}
.region_layout .scroll_height{}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
    .region_layout{ padding: 0;}
    .region_layout > .fl{ position: initial; padding: 0; width: auto;}
    .region_layout > .fr{ margin: 40px 0 0 0; padding: 0; width: auto;}
    .region_layout .scroll_height{ height: 0 !important;}
}
@media(max-width: 767px){
    .region_layout > .fr{ margin: 30px 0 0 0;}
}


.region_map{ overflow: hidden; width: 100%; height: 70vh; border-radius: 5px; background: #000;}
.region_map iframe{ width: 100% !important; height: 100% !important;}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
    .region_map{ height: 400px;}
}
@media(max-width: 767px){
    .region_map{ height: 300px;}
}


.region_menu{ position: relative; z-index: 10; margin: 0 0 60px 0;}
.region_menu ul{ display: flex; border-radius: 5px 5px 0 0; background: #f6f8fb;}
.region_menu ul li{ width: 50%;}
.region_menu ul li a{ display: flex; justify-content: center; align-items: center; position: relative; height: 60px; border-bottom: 1px solid #e5e5e5; font-size: 18px; color: #000; cursor: pointer;}
.region_menu ul li.on a{ font-weight: 700; color: #67c5e3;}
.region_menu ul li.on a:before{ content: ""; position: absolute; z-index: 10; right: 0; bottom: -1px; left: 0; border-bottom: 2px solid #67c5e3;}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
}
@media(max-width: 767px){
}



















.tour_list{ margin: 30px 0 0 0;}
.tour_list ul{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 20px;}
.tour_list ul li{}
.tour_list ul li .wrap{ display: block; overflow: hidden; transition: all .2s;}
.tour_list ul li .wrap .img{ display: block; position: relative; border-radius: 5px 5px 0 0;}
.tour_list ul li .wrap .img .tip{ display: flex; flex-wrap: wrap; grid-gap: 5px; position: absolute; z-index: 10; top: 10px; left: 10px;}
.tour_list ul li .wrap .img .tip div{ display: flex; align-items: center; padding: 0 10px; height: 25px; border-radius: 5px; font-size: 12px; font-weight: 500; color: #FFF;}
.tour_list ul li .wrap .img .tip div.sale{ background: #F00;}
.tour_list ul li .wrap .img .tip div.new{ background: #67c5e3;}
.tour_list ul li .wrap .img img{ display: block; width: 100%;}
.tour_list ul li .wrap .info{ position: relative; padding: 20px 20px 25px 20px; border-radius: 0 0 5px 5px; border: 1px solid #e5e5e5; border-top: 0;}
.tour_list ul li .wrap .info .tit{ display: block; font-size: 18px; font-weight: 700; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;}
.tour_list ul li .wrap .info .txt{ display: flex; flex-wrap: wrap; grid-gap: 10px 20px; margin: 15px 50px 0 0;}
.tour_list ul li .wrap .info .txt p{ display: flex; font-size: 14px; color: #000;}
.tour_list ul li .wrap .info .txt p i{ margin: 0 5px 0 0; font-size: 14px; color: #CCC;}
.tour_list ul li .wrap .info .txt p:nth-child(3){ width: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;}
.tour_list ul li .wrap .info .type_like_btn{ position: absolute; right: 20px; bottom: 20px; font-size: 20px; color: #000; cursor: pointer;}
.tour_list ul li .wrap .info .type_like_btn.on i{ color: #F00;}
.tour_list ul li .wrap:hover{ transform: scale(.96);}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
    .tour_list ul{ grid-template-columns: repeat(2,1fr);}
}
@media(max-width: 767px){
    .tour_list ul{ grid-template-columns: repeat(1,1fr); grid-gap: 10px;}
}







.search_gpt{ position: relative; background: linear-gradient(180deg, #ebf1fc , #FFF);}
.search_gpt .w_min{ position: relative; z-index: 10; padding: 80px 0;}
.search_gpt .title{ text-align: center; font-size: 26px; font-weight: 700; color: #000;}
.search_gpt .search{ position: relative; margin: 30px auto 0 auto; max-width: 600px; width: 100%;}
.search_gpt .search > 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; transform: rotate(-90deg);}
.search_gpt .search .btn{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 10; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; background: #67c5e3; cursor: pointer;}
.search_gpt .search .btn i{ font-size: 16px; color: #FFF;}
.search_gpt .search input{ display: flex; align-items: center; margin: 0; padding: 0 50px 0 50px; width: 100%; height: 50px; border-radius: 50px; border: 1px solid #67c5e3; background: #FFF; font-size: 16px; font-weight: 400; color: #000; outline: none; -webkit-appearance: none;}
.search_gpt .hot{ display: flex; justify-content: center; margin: 20px 0 0 0; grid-gap: 10px;}
.search_gpt .hot .tit{ flex: 0 0 60px; line-height: 25px; font-size: 15px; font-weight: 500; color: #000;}
.search_gpt .hot .tag{ display: flex; flex-wrap: wrap; grid-gap: 5px;}
.search_gpt .hot .tag a{ display: flex; align-items: center; padding: 0 10px; height: 25px; border-radius: 5px; border: 1px solid rgba(0 0 0/10%); background: rgba(255 255 255/80%); font-size: 13px; color: #666; cursor: pointer;}
.search_gpt .bg{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(/images/home_workshop_search_bg.png) no-repeat top center;}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
}
@media(max-width: 767px){
    .search_gpt .w_min{ padding: 30px 0;}
    .search_gpt .title{ font-size: 20px;}
    .search_gpt .search > i{ width: 45px; height: 45px; font-size: 20px;}
    .search_gpt .search .btn{ width: 25px; height: 25px;}
    .search_gpt .search .btn i{ font-size: 14px;}
    .search_gpt .search input{ padding: 0 45px 0 45px; height: 45px; font-size: 14px;}
    .search_gpt .bg{ background: url(/images/home_workshop_search_bg.png) no-repeat top center; background-size: auto 100%;}
}


.search_gpt_list{}
.search_gpt_list ul{ display: grid; grid-gap: 40px;}
.search_gpt_list ul li{}
.search_gpt_list ul li .wrap{ display: flex; grid-gap: 0 20px;}
.search_gpt_list ul li .wrap .img{ flex: 0 0 40px; display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #e5e5e5; background: #FFF;}
.search_gpt_list ul li .wrap .img img{ display: block; width: 20px;}
.search_gpt_list ul li .wrap .text{ padding: 5px 0 0 0;}
.search_gpt_list ul li .wrap .text .t1{ margin: 40px 0 0 0; line-height: 1.4; font-size: 22px; font-weight: 700; color: #000;}
.search_gpt_list ul li .wrap .text .t1:first-child{ margin: 0;}
.search_gpt_list ul li .wrap .text .t2{ margin: 20px 0 0 0;}
.search_gpt_list ul li .wrap .text .t2 ol{ display: grid; grid-gap: 10px 0;}
.search_gpt_list ul li .wrap .text .t2 ol li{ list-style-type: decimal; margin: 0 0 0 30px; line-height: 1.4; font-size: 16px; font-weight: 400; color: #000;}
.search_gpt_list ul li .wrap .text .t3{ margin: 20px 0 0 0; line-height: 1.4; font-size: 16px; font-weight: 400; color: #000;}
.search_gpt_list ul li .wrap .text .btn{ display: flex; grid-gap: 0 10px; margin: 20px 0 0 0;}
.search_gpt_list ul li .wrap .text .btn a{ display: block; padding: 5px; width: 30px; height: 30px; border-radius: 5px; transition: all .2s; cursor: pointer;}
.search_gpt_list ul li .wrap .text .btn a img{ width: 20px;}
.search_gpt_list ul li .wrap .text .btn a:hover{ background: #f5f5f5;}

.search_gpt_list ul li.my{ display: flex; justify-content: flex-end;}
.search_gpt_list ul li.my .wrap{}
.search_gpt_list ul li.my .wrap .text{}
.search_gpt_list ul li.my .wrap .text .t1{ padding: 10px 30px; border-radius: 30px; background: rgba(0 0 0/5%); font-size: 18px; font-weight: 400;}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
}
@media(max-width: 767px){
    .search_gpt_list ul{ grid-gap: 30px;}
    .search_gpt_list ul li .wrap{ grid-gap: 0 10px;}
    .search_gpt_list ul li .wrap .img{ flex: 0 0 30px; width: 30px; height: 30px;}
    .search_gpt_list ul li .wrap .img img{ width: 18px;}
    .search_gpt_list ul li .wrap .text{ padding: 5px 0 0 0;}
    .search_gpt_list ul li .wrap .text .t1{ margin: 30px 0 0 0; font-size: 18px;}
    .search_gpt_list ul li .wrap .text .t2 ol li{ margin: 0 0 0 20px; font-size: 14px;}
    .search_gpt_list ul li .wrap .text .t3{ font-size: 14px;}

    .search_gpt_list ul li.my .wrap .text .t1{ padding: 10px 20px; font-size: 15px;}
}





















.popup_contact{ display: flex; justify-content: center; align-items: center; position: fixed; z-index: 300; top: -100%; right: 0; bottom: 100%; left: 0; padding: 20px;}
.popup_contact > .row{ overflow: hidden; position: relative; z-index: 10; width: 800px; height: 700px; border-radius: 20px; opacity: 0; transform: scale(.5); transition: opacity .5s, transform .5s;}
.popup_contact > .row .xi-close{ position: absolute; z-index: 4; top: 50px; right: 50px; line-height: 30px; font-size: 20px; color: #666; cursor: pointer; transition: all .3s;}
.popup_contact > .row .xi-close:hover{ transform: scale(1.1) rotate(90deg); color: #000;}
.popup_contact > .row .box{ overflow: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 50px; background: #FFF; transition: all .3s;}
.popup_contact > .close{ position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0 0 0/0.0000001%);}
.popup_contact > .bg{ position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0 0 0/70%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); opacity: 0; transition: opacity .5s;}

.popup_contact .write{}
.popup_contact .write h3{ position: relative; margin: 0 0 50px 0; line-height: 30px; font-size: 30px; font-weight: 800; color: #000;}
.popup_contact .write ul{ display: flex; flex-wrap: wrap; margin: -30px -10px 0 -10px;}
.popup_contact .write ul li{ margin: 30px 0 0 0; width: 100%;}
.popup_contact .write ul li.w50{ width: 50%;}
.popup_contact .write ul li .row{ padding: 0 10px;}
.popup_contact .write .tit{ padding: 0 0 15px 0; line-height: 20px; font-size: 16px; font-weight: 600; color: #000;}
.popup_contact .write .tit span{ padding: 0 0 0 5px; color: #F00;}

.popup_contact .write input{ display: flex; align-items: center; margin: 0; padding: 0 20px; width: 100%; height: 45px; border-radius: 0; border: 1px solid #DDD; background: #FFF; font-size: 15px; color: #000; outline: none; -webkit-appearance: none;}
.popup_contact .write input:focus{ border: 1px solid #000;}
.popup_contact .write select{ display: flex; align-items: center; margin: 0; padding: 0 40px 0 20px; width: 100%; height: 45px; border-radius: 0; border:1px solid #DDD; background:url(/images/basic_select_icon.png) no-repeat center right 20px #FFF; background-size: 10px auto; font-size: 15px; color: #000; outline: none; -webkit-appearance: none;}
.popup_contact .write select::-ms-expand{ display: none;}
.popup_contact .write select:focus{ border: 1px solid #000;}
.popup_contact .write textarea{ display: flex; align-items: center; margin: 0; padding: 20px 20px; width: 100%; height: 140px; border-radius: 0; border: 1px solid #DDD; background: #FFF; font-size: 15px; color: #000; outline: none; -webkit-appearance: none;}
.popup_contact .write textarea:focus{ border: 1px solid #000;}

.popup_contact .inquiry_type{ display: flex; margin: 0 -5px;}
.popup_contact .inquiry_type .type{ display: flex; justify-content: center; align-items: center; margin: 0 5px; width: 33.333%; height: 45px; border: 1px solid #DDD; cursor: pointer;}
.popup_contact .inquiry_type .type i{ display: none; margin: 0 10px 0 0; font-size: 20px; color: #999;}
.popup_contact .inquiry_type .type p{ font-size: 16px; color: #666;}
.popup_contact .inquiry_type .type:hover{ background: #f5f5f5;}
.popup_contact .inquiry_type .type.on{ border: 2px solid #000; background: #000;}
.popup_contact .inquiry_type .type.on i{ display: block; font-size: 24px; color: #FFF;}
.popup_contact .inquiry_type .type.on p{ font-weight: 600; color: #FFF;}

.popup_contact .write .file{ display: flex;}
.popup_contact .write .file input{ border-right: 0;}
.popup_contact .write .file .btn{ display: flex; justify-content: center; align-items: center; width: 45px; height: 45px; background: #333; cursor: pointer;}
.popup_contact .write .file .btn i{ font-size: 18px; color: #FFF;}

.popup_contact .write .check{ display: flex; flex-direction: column; align-items: center; margin: 50px 0 0 0;}
.popup_contact .write .check .txt{ text-align: center; font-size: 16px; color: #000;}
.popup_contact .write .check .fb{ display: flex; align-items: center; margin: 20px 0 0 0;}
.popup_contact .write .check .btn{ display: flex; align-items: center; cursor: pointer;}
.popup_contact .write .check .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: #666;}
.popup_contact .write .check .btn p{ margin: 0 0 0 5px; font-size: 16px; color: #666;}
.popup_contact .write .check span{ margin: 0 0 0 10px; font-size: 16px; font-weight: 600; color: #000; cursor: pointer;}
.popup_contact .write .check .btn.on i{ border-color: #000; background: #000; color: #FFF;}
.popup_contact .write .check .btn.on p{ font-weight: 600; color: #000;}

.popup_contact .box > .btn{ display: flex; justify-content: center; align-items: center; margin: 50px 0 0 0;}
.popup_contact .box > .btn a{ display: flex; justify-content: center; align-items: center; margin: 0 5px; padding: 0 30px; height: 50px; border-radius: 30px; background: #000; font-size: 16px; font-weight: 600; color: #FFF; transition: all .3s; cursor: pointer;}
.popup_contact .box > .btn a:first-child{ border: 1px solid #000; background: #FFF; color: #000;}
.popup_contact .box > .btn a:first-child:hover{ background: #f5f5f5;}

.popup_contact.on{ top: 0; bottom: 0;}
.popup_contact.on > .row{ opacity: 1; transform: scale(1);}
.popup_contact.on > .bg{ opacity: 1;}

.popup_contact .row .box::-moz-scrollbar{ width: 5px; background: #f0f0f0;}
.popup_contact .row .box::-moz-scrollbar-thumb{ background-color: #CCC; border-radius: 10px;}
.popup_contact .row .box::-ms-scrollbar{ width: 5px; background: #f0f0f0;}
.popup_contact .row .box::-ms-scrollbar-thumb{ background-color: #CCC; border-radius: 10px;}
.popup_contact .row .box::-webkit-scrollbar{ width: 5px; background: #f0f0f0;}
.popup_contact .row .box::-webkit-scrollbar-thumb{ background-color: #CCC; border-radius: 10px;}
@media(max-width: 1401px){
    .popup_contact > .row{ height: 400px;}
}
@media(max-width: 1025px){
    .popup_contact > .row{ width: 600px; height: 600px;}
}
@media(max-width: 767px){
    .popup_contact > .row{ width: 100%; height: 600px;}
    .popup_contact > .row .xi-close{ top: 30px; right: 30px;}
    .popup_contact > .row .xi-close:hover{ transform: scale(1) rotate(0deg);}
    .popup_contact > .row .box{ padding: 30px;}

    .popup_contact .write h3{ position: relative; margin: 0 0 30px 0; line-height: 30px; font-size: 30px; font-weight: 800; color: #000;}
    .popup_contact .write ul{ margin: -20px -10px 0 -10px;}
    .popup_contact .write ul li{ margin: 15px 0 0 0;}
    .popup_contact .write ul li.w50{ width: 100%;}
    .popup_contact .write .tit{ padding: 0 0 10px 0; font-size: 15px;}

    .popup_contact .write input{ padding: 0 15px; height: 40px;}
    .popup_contact .write select{ padding: 0 40px 0 15px; height: 40px;}
    .popup_contact .write textarea{ padding: 15px 15px; height: 100px;}

    .popup_contact .inquiry_type .type{ height: 40px;}
    .popup_contact .inquiry_type .type i{ display: none !important;}
    .popup_contact .inquiry_type .type p{ font-size: 14px;}

    .popup_contact .write .file .btn{ width: 40px; height: 40px;}
    .popup_contact .write .file .btn i{ font-size: 16px;}

    .popup_contact .write .check{ margin: 30px 0 0 0;}
    .popup_contact .write .check .txt{ font-size: 15px;}
    .popup_contact .write .check .fb{ margin: 10px 0 0 0;}
    .popup_contact .write .check .btn p{ font-size: 15px;}
    .popup_contact .write .check span{ font-size: 15px;}

    .popup_contact .box > .btn{ margin: 30px 0 0 0;}
    .popup_contact .box > .btn a{ padding: 0 20px; height: 40px; font-size: 15px;}
}




.popup_privacy{ display: flex; justify-content: center; align-items: center; position: fixed; z-index: 310; top: -100%; right: 0; bottom: 100%; left: 0; padding: 20px;}
.popup_privacy .row{ overflow: hidden; position: relative; z-index: 20; width: 600px; height: 600px; border-radius: 20px; opacity: 0; transform: scale(.5); transition: opacity .5s, transform .5s;}
.popup_privacy .row .xi-close{ position: absolute; z-index: 4; top: 50px; right: 50px; line-height: 30px; font-size: 20px; color: #666; cursor: pointer; transition: all .3s;}
.popup_privacy .row .xi-close:hover{ transform: scale(1.1) rotate(90deg); color: #000;}
.popup_privacy .row .box{ overflow: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 50px; background: #FFF; transition: all .3s;}
.popup_privacy .close{ position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0 0 0/0.0000001%);}
.popup_privacy .bg{ position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0 0 0/70%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); opacity: 0; transition: opacity .5s;}

.popup_privacy .text{}
.popup_privacy .text h3{ position: relative; margin: 0 0 50px 0; line-height: 30px; font-size: 30px; font-weight: 800; color: #000;}
.popup_privacy .text h4{ display: block; position: relative; width: auto; margin-top: 30px; font-size: 20px; font-weight: 600; color: #333; line-height: 30px;}
.popup_privacy .text h4:first-child{ margin-top: 0;}
.popup_privacy .text p{ margin-top: 10px; font-size: 16px; font-weight: 400; color: #666; line-height: 24px;}
.popup_privacy .text ul{ display: block; position: relative; width: auto; margin-top: 10px; margin-left: 10px;}
.popup_privacy .text ul li{ position: relative; margin: 5px 0; padding-left: 10px; line-height: 24px; font-size: 14px; color: #666;}
.popup_privacy .text ul li:before{ content: ""; position: absolute; left: 0; top: 12px; width: 3px; height: 3px; border-radius: 50%; background-color: #999; transform: translate(0,-50%);}
.popup_privacy .btn{ display: flex; justify-content: center; align-items: center; margin: 50px auto 0 auto; width: 140px; height: 45px; border-radius: 30px; border: 1px solid #000; font-size: 16px; font-weight: 600; color: #000; transition: all .3s; cursor: pointer;}
.popup_privacy .btn:hover{ background: #f5f5f5;}

.popup_privacy.on{ top: 0; bottom: 0;}
.popup_privacy.on .row{ opacity: 1; transform: scale(1);}
.popup_privacy.on .bg{ opacity: 1;}

.popup_privacy .row .box::-moz-scrollbar{ width: 5px; background: #f0f0f0;}
.popup_privacy .row .box::-moz-scrollbar-thumb{ background-color: #CCC; border-radius: 10px;}
.popup_privacy .row .box::-ms-scrollbar{ width: 5px; background: #f0f0f0;}
.popup_privacy .row .box::-ms-scrollbar-thumb{ background-color: #CCC; border-radius: 10px;}
.popup_privacy .row .box::-webkit-scrollbar{ width: 5px; background: #f0f0f0;}
.popup_privacy .row .box::-webkit-scrollbar-thumb{ background-color: #CCC; border-radius: 10px;}
@media(max-width: 1401px){
    .popup_privacy .row{ height: 400px;}
}
@media(max-width: 1025px){
    .popup_privacy .row{ height: 600px;}
}
@media(max-width: 767px){
    .popup_privacy .row{ width: 100%; height: 400px;}
    .popup_privacy .row .xi-close{ top: 30px; right: 30px;}
    .popup_privacy .row .xi-close:hover{ transform: scale(1) rotate(0deg);}
    .popup_privacy .row .box{ padding: 30px;}

    .popup_privacy .text h3{ margin: 0 0 30px 0; line-height: 30px; font-size: 24px;}
    .popup_privacy .text h4{ margin-top: 20px; font-size: 18px;}
    .popup_privacy .text p{ font-size: 15px;}
    .popup_privacy .btn{ margin: 30px auto 0 auto; width: 120px; height: 40px; font-size: 15px;}
}


.popup_mail{ display: flex; justify-content: center; align-items: center; position: fixed; z-index: 310; top: -100%; right: 0; bottom: 100%; left: 0; padding: 20px;}
.popup_mail .row{ overflow: hidden; position: relative; z-index: 20; width: 600px; height: 600px; border-radius: 20px; opacity: 0; transform: scale(.5); transition: opacity .5s, transform .5s;}
.popup_mail .row .xi-close{ position: absolute; z-index: 4; top: 50px; right: 50px; line-height: 30px; font-size: 20px; color: #666; cursor: pointer; transition: all .3s;}
.popup_mail .row .xi-close:hover{ transform: scale(1.1) rotate(90deg); color: #000;}
.popup_mail .row .box{ overflow: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 50px; background: #FFF; transition: all .3s;}
.popup_mail .close{ position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0 0 0/0.0000001%);}
.popup_mail .bg{ position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0 0 0/70%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); opacity: 0; transition: opacity .5s;}

.popup_mail .text{}
.popup_mail .text h3{ position: relative; margin: 0 0 50px 0; line-height: 30px; font-size: 30px; font-weight: 800; color: #000;}
.popup_mail .text p{ margin-top: 30px; font-size: 16px; font-weight: 400; color: #000; line-height: 24px;}
.popup_mail .btn{ display: flex; justify-content: center; align-items: center; margin: 50px auto 0 auto; width: 140px; height: 45px; border-radius: 30px; border: 1px solid #000; font-size: 16px; font-weight: 600; color: #000; transition: all .3s; cursor: pointer;}
.popup_mail .btn:hover{ background: #f5f5f5;}

.popup_mail.on{ top: 0; bottom: 0;}
.popup_mail.on .row{ opacity: 1; transform: scale(1);}
.popup_mail.on .bg{ opacity: 1;}

.popup_mail .row .box::-moz-scrollbar{ width: 5px; background: #f0f0f0;}
.popup_mail .row .box::-moz-scrollbar-thumb{ background-color: #CCC; border-radius: 10px;}
.popup_mail .row .box::-ms-scrollbar{ width: 5px; background: #f0f0f0;}
.popup_mail .row .box::-ms-scrollbar-thumb{ background-color: #CCC; border-radius: 10px;}
.popup_mail .row .box::-webkit-scrollbar{ width: 5px; background: #f0f0f0;}
.popup_mail .row .box::-webkit-scrollbar-thumb{ background-color: #CCC; border-radius: 10px;}
@media(max-width: 1401px){
    .popup_mail .row{ height: 400px;}
}
@media(max-width: 1025px){
    .popup_mail .row{ height: 600px;}
}
@media(max-width: 767px){
    .popup_mail .row{ width: 100%; height: 400px;}
    .popup_mail .row .xi-close{ top: 30px; right: 30px;}
    .popup_mail .row .xi-close:hover{ transform: scale(1) rotate(0deg);}
    .popup_mail .row .box{ padding: 30px;}

    .popup_mail .text h3{ margin: 0 0 20px 0; line-height: 30px; font-size: 24px;}
    .popup_mail .text p{ margin-top: 20px; font-size: 15px;}
    .popup_mail .btn{ margin: 30px auto 0 auto; width: 120px; height: 40px; font-size: 15px;}
}


.popup_terms{ display: flex; justify-content: center; align-items: center; position: fixed; z-index: 300; top: -100%; right: 0; bottom: 100%; left: 0; padding: 20px; background: rgba(0 0 0/70%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);}
.popup_terms > .close_btn{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0 0 0/0.00001%);}
.popup_terms .row{ position: relative; z-index: 20; max-width: 600px; width: 100%; max-height: 400px; height: 100%; border-radius: 20px; opacity: 0; transform: scale(.5); transition: opacity .5s, transform .5s;}
.popup_terms .row > .close_btn:first-child{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 10; top: -20px; right: -20px; width: 40px; height: 40px; border-radius: 50%; background: #F00; cursor: pointer;}
.popup_terms .row > .close_btn:first-child i{ font-size: 16px; color: #FFF;}
.popup_terms .row .scroll{ overflow: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 50px; background: #FFF;}
.popup_terms .row .scroll::-moz-scrollbar{ width: 4px; background: #FFF;}
.popup_terms .row .scroll::-moz-scrollbar-thumb{ background-color: #67c5e3;}
.popup_terms .row .scroll::-ms-scrollbar{ width: 4px; background: #FFF;}
.popup_terms .row .scroll::-ms-scrollbar-thumb{ background-color: #67c5e3;}
.popup_terms .row .scroll::-webkit-scrollbar{ width: 4px; background: #FFF;}
.popup_terms .row .scroll::-webkit-scrollbar-thumb{ background-color: #67c5e3;}
.popup_terms .title{ margin: 0 0 30px 0; line-height: 1; font-size: 20px; font-weight: 700; color: #000;}
.popup_terms .tit{ margin: 30px 0 20px 0; line-height: 1.4; font-size: 18px; font-weight: 500; color: #000;}
.popup_terms .txt{ margin: 15px 0 20px 0; line-height: 1.8; font-size: 14px; color: #000;}
.popup_terms .table{ border: 1px solid #DDD; border-bottom: 0;}
.popup_terms .table table{ border-collapse: collapse; border-spacing: 0; width: 100%;}
.popup_terms .table table thead{}
.popup_terms .table table thead tr{}
.popup_terms .table table thead tr th{ padding: 0; height: 60px; border-bottom: 1px solid #DDD; border-left: 1px solid #DDD; background: #f5f5f5; text-align: center; font-size: 14px; font-weight: 600; color: #000;}
.popup_terms .table table thead tr th:first-child{ border-left: 0;}
.popup_terms .table table tbody{}
.popup_terms .table table tbody tr{}
.popup_terms .table table tbody tr td{ padding: 20px 10px; border-left: 1px solid #DDD; border-bottom: 1px solid #DDD; text-align: center; line-height: 1.4; font-size: 14px; color: #000;}
.popup_terms .table table tbody tr td:first-child{ border-left: 0;}
.popup_terms.on{ top: 0; bottom: 0;}
.popup_terms.on .row{ opacity: 1; transform: scale(1);}
@media(max-width: 767px){
    .popup_terms{ padding: 30px 15px;}
    .popup_terms .row{ max-height: 400px;}
    .popup_terms .row > .close_btn:first-child{ top: -10px; right: -10px; width: 35px; height: 35px;}
    .popup_terms .row > .close_btn:first-child i{ font-size: 12px;}
    .popup_terms .row .scroll{ padding: 30px;}
    .popup_terms .title{ margin: 0 0 30px 0; font-size: 22px;}
    .popup_terms .tit{ margin: 30px 0 15px 0; font-size: 19px;}
    .popup_terms .txt{ margin: 15px 0 15px 0; font-size: 15px;}
    .popup_terms .table table thead tr th{ height: 50px; font-size: 14px;}
    .popup_terms .table table tbody tr td{ padding: 15px 5px; font-size: 14px;}
}


.popup_calendar{ display: none; position: absolute; z-index: 90; border-radius: 0;}
.popup_calendar .row{ position: relative; z-index: 10; padding: 0 15px 15px 15px; border-radius: 8px; background: #FFF; border: 1px solid #DDD;}
.popup_calendar .row .xi-close{ display: flex; justify-content: center; align-items: center; position: absolute; top: -15px; right: -15px; width: 30px; height: 30px; border-radius: 50%; background: #F00; font-size: 12px; color: #FFF; cursor: pointer;}
.popup_calendar .menu{ display: flex; justify-content: space-between; align-items: center; height: 50px;}
.popup_calendar .menu .btn{}
.popup_calendar .menu .btn i{ font-size: 18px; color: #999; cursor: pointer;}
.popup_calendar .menu p{ font-size: 18px; font-weight: 500; color: #000;}
.popup_calendar .head{ display: flex; align-items: center; padding: 10px 0; border-top: 1px solid #DDD; border-bottom: 1px solid #DDD;}
.popup_calendar .head p{ width: 14.285%; text-align: center; font-size: 14px; color: #666;}
.popup_calendar .head p.sun{ color: #F00;}
.popup_calendar .head p.sat{ color: #0e90d2;}
.popup_calendar .body{ display: flex; flex-wrap: wrap; margin: 10px 0 0 0; width: 245px;}
.popup_calendar .body p{ display: flex; justify-content: center; align-items: center; margin: 1px 0; width: 35px; height: 35px; font-size: 14px; font-weight: 300; color: #CCC; cursor: pointer;}
.popup_calendar .body p.on{ font-weight: 400; color: #000;}
.popup_calendar .body p.on.sun{ color: #F00;}
.popup_calendar .body p.on.sat{ color: #0e90d2;}
.popup_calendar .body p.on.click{ border-radius: 50%; background: #67c5e3; color: #FFF;}
.popup_calendar .close{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0 0 0/0.000001%);}
.popup_calendar.on{ display: block;}
@media(max-width: 767px){
}








.type_sub_title{ padding: 0 0 50px 0; text-align: center; font-size: 26px; font-weight: 700; color: #000;}
@media(max-width: 1501px){
}
@media(max-width: 1025px){
}
@media(max-width: 769px){
    .type_sub_title{ padding: 0 0 30px 0; font-size: 20px;}
}


.type_table table{ border-collapse: collapse; border-spacing: 0; width: 100%; border-top: 2px solid #000;}
.type_table table thead{}
.type_table table thead tr{}
.type_table table thead tr td{ padding: 0 10px; height: 60px; border-bottom: 1px solid #DDD; border-left: 1px solid #DDD; background: #f5f5f5; text-align: center; font-size: 16px; font-weight: 700; color: #000;}
.type_table table thead tr td:first-child{ border-left: 0;}
.type_table table tbody{}
.type_table table tbody tr{}
.type_table table tbody tr th{ padding: 25px 10px; border-bottom: 1px solid #DDD; line-height: 1.4; font-size: 16px; font-weight: 600;}
.type_table table tbody tr td{ padding: 25px 10px; border-left: 1px solid #DDD; border-bottom: 1px solid #DDD; text-align: center; line-height: 1.4; font-size: 16px; color: #000;}
.type_table table tbody tr td:first-child{ border-left: 0;}
@media(max-width: 767px){
}


.type_btn_01{ display: flex; justify-content: center; align-items: center; margin: 40px 0 0 0;}
.type_btn_01 a{ display: flex; justify-content: center; align-items: center; margin: 0 5px; padding: 0 40px; height: 55px; border-radius: 5px; border: 1px solid #e5e5e5; cursor: pointer;}
.type_btn_01 a p{ font-size: 18px; font-weight: 500; color: #000;}
.type_btn_01 a:hover{ background: #f6f8fb;}
.type_btn_01 a.on{ border-color: #67c5e3; background: #67c5e3;}
.type_btn_01 a.on p{ color: #FFF;}
@media(max-width: 767px){
    .type_btn_01{ margin: 40px 0 0 0;}
    .type_btn_01 a{ padding: 0 30px; height: 50px;}
    .type_btn_01 a p{ font-size: 16px;}
}


.type_sub_menu{ margin: 0 0 40px 0;}
.type_sub_menu ul{ display: flex; align-items: flex-end; position: relative; height: 70px; border-radius: 8px 8px 0 0; background: #f6f8fb;}
.type_sub_menu ul:after{ content: ""; position: absolute; right: -1px; bottom: 0; left: -1px; height: 2px; background: #67c5e3;}
.type_sub_menu ul li{ width: 50%; height: 100%;}
.type_sub_menu ul li a{ display: flex; justify-content: center; align-items: center; height: 100%; cursor: pointer;}
.type_sub_menu ul li a p{ font-size: 20px; font-weight: 500; color: #000;}
.type_sub_menu ul li.on a{ position: relative; z-index: 10; margin: 0 -1px 0 -1px; border-radius: 8px 8px 0 0; border: 2px solid #67c5e3; background: #FFF;}
.type_sub_menu ul li.on a:before{ content: ""; position: absolute; right: 0; bottom: -2px; left: 0; height: 2px; background: #FFF;}
.type_sub_menu ul li.on a p{ font-size: 20px; font-weight: 700; color: #67c5e3;}
@media(max-width: 767px){
    .type_sub_menu{ margin: 0 0 30px 0;}
    .type_sub_menu ul{ height: 55px;}
    .type_sub_menu ul li a p{ font-size: 17px;}
    .type_sub_menu ul li.on a p{ font-size: 17px;}
}


.type_option{ display: flex; justify-content: space-between; align-items: flex-end; margin: 0 0 40px 0; padding: 20px; border-radius: 5px; background: #f6f8fb;}
.type_option .fl{ display: flex; grid-gap: 0 5px;}
.type_option .fr{ display: flex; grid-gap: 0 5px;}
.type_option select{ display: flex; align-items: center; margin: 0; padding: 0 45px 0 15px; width: auto; height: 45px; border-radius: 5px; border: 1px solid #e5e5e5; background:url(/images/icon_select.png) no-repeat center right 15px #FFF; background-size: 12px auto; font-size: 14px; font-weight: 400; color: #000; outline: none; -webkit-appearance: none;}
.type_option select:focus{ border: 1px solid #67c5e3;}
.type_option .search{ position: relative;}
.type_option .search i{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 10; top: 0; right: 0; bottom: 0; width: 50px; font-size: 20px; color: #000; cursor: pointer;}
.type_option .search input{ display: flex; align-items: center; margin: 0; padding: 0 45px 0 15px; width: 100%; height: 45px; border-radius: 5px; border: 1px solid #e5e5e5; background: #FFF; font-size: 14px; font-weight: 400; color: #000; outline: none; -webkit-appearance: none;}
.type_option .search input:focus{ border: 1px solid #67c5e3;}
.type_option .btn{ display: flex; justify-content: center; align-items: center; padding: 0 30px; height: 45px; border-radius: 5px; background: #67c5e3; font-size: 16px; font-weight: 600; color: #FFF; cursor: pointer;}
@media(max-width: 767px){
    .type_option{ display: block; margin: 0 0 30px 0; padding: 20px;}
    .type_option .fl{ flex-wrap: wrap;}

    .type_option select{ padding: 0 45px 0 15px; width: auto; height: 45px; font-size: 14px; background:url(/images/icon_select.png) no-repeat center right 15px #FFF; background-size: 12px auto;}
    .type_option .search{ flex: 1;}
    .type_option .search i{ width: 45px; height: 45px; font-size: 20px;}
    .type_option .search input{ padding: 0 45px 0 15px; height: 45px; font-size: 14px;}
    .type_option .btn{ margin: 5px 0 0 0; width: 100%; height: 45px;}

}


.type_info{ display: flex; justify-content: space-between; align-items: center; margin: 0 0 40px 0;}
.type_info .fl{ font-size: 16px; color: #000;}
.type_info .fl span{ margin: 0 4px; font-weight: 700; color: #67c5e3;}
.type_info .fr{ display: flex; align-items: center; grid-gap: 0 40px;}
.type_info .fr .number{ display: flex; align-items: center;}
.type_info .fr .number .tit{ font-size: 15px; font-weight: 700; color: #000;}
.type_info .fr .number select{ display: flex; align-items: center; margin: 0 0 0 15px; padding: 0 18px 0 0; width: auto; height: 20px; border-radius: 0; border: 0; background:url(/images/icon_select.png) no-repeat center right 0; background-size: 12px auto; line-height: 20px; font-size: 15px; font-weight: 400; color: #000; outline: none; -webkit-appearance: none;}
.type_info .fr .sort{ display: flex; align-items: center;}
.type_info .fr .sort .tit{ font-size: 15px; font-weight: 700; color: #000;}
.type_info .fr .sort .btn{ display: flex; align-items: center;}
.type_info .fr .sort .btn a{ margin: 0 0 0 15px; font-size: 15px; color: #666; cursor: pointer;}
.type_info .fr .sort .btn a.on{ font-weight: 700; color: #67c5e3;}
@media(max-width: 767px){
    .type_info{ margin: 0 0 30px 0;}
    .type_info .fl{ font-size: 14px;}
    .type_info .fr{ grid-gap: 0 20px;}
    .type_info .fr .number .tit{ font-size: 14px;}
    .type_info .fr .number select{ margin: 0 0 0 10px; font-size: 14px;}
    .type_info .fr .sort .tit{ font-size: 14px;}
    .type_info .fr .sort .btn a{ margin: 0 0 0 10px;}
    .type_info .fr .sort .btn a{ margin: 0 0 0 10px; font-size: 14px;}
    .type_info.type2{ display: block;}
    .type_info.type2 .fr{ display: flex; justify-content: space-between; margin: 10px 0 0 0;}
}


.type_page{ display: flex; justify-content: center; align-items: center; margin: 60px 0 0 0;}
.type_page .btn{ display: flex; align-items: center; padding: 0 10px; height: 30px; border-radius: 20px; cursor: pointer;}
.type_page .btn i{ padding: 0 4px 1px 4px; font-size: 12px; color: #999;}
.type_page .btn p{ padding: 0 4px; font-size: 12px; color: #666;}
.type_page .btn:hover{ background: rgba(0 0 0/5%);}
.type_page .page{ display: flex; align-items: center;}
.type_page .page > * { margin: 0 2px;}
.type_page .page span{ font-size: 12px; color: #999;}
.type_page .page p{ display: flex; justify-content: center; align-items: center; padding: 0 10px; min-width: 30px; height: 30px; border-radius: 20px; font-size: 14px; color: #000; cursor: pointer;}
.type_page .page p:hover{ background: rgba(0 0 0/5%);}
.type_page .page p.on{ border: 1px solid #67c5e3; background: #67c5e3 !important; color: #FFF;}
@media(max-width:767px){
    .type_page{ margin: 40px 0 0 0;}
    .type_page .btn{ padding: 0 4px; height: 32px;}
    .type_page .btn i{ padding: 0 2px 1px 2px;}
    .type_page .btn p{ padding: 0 2px;}
    .type_page .btn:hover{ background: #FFF;}
    .type_page .page > * { margin: 0;}
    .type_page .page span{ font-size: 14px;}
    .type_page .page p{ padding: 0 6px; min-width: 32px; height: 32px; font-size: 14px;}
    .type_page .page p:hover{ background: #FFF;}
}


.type_faq_menu{ display: flex; flex-wrap: wrap; margin: -10px 0 40px 0;}
.type_faq_menu a{ display: flex; align-items: center; margin: 10px 10px 0 0; padding: 0 30px; height: 50px; border: 1px solid rgba(0 0 0/10%); border-radius: 30px; font-size: 18px; color: #666; cursor: pointer;}
.type_faq_menu a:hover{ background: #f6f8fb;}
.type_faq_menu a.on{ border-color: #67c5e3; background: #67c5e3; color: #FFF; font-weight: 600;}
@media(max-width:767px){
    .type_faq_menu{ margin: -5px 0 30px 0;}
    .type_faq_menu a{ margin: 5px 5px 0 0; padding: 0 15px; height: 35px; font-size: 14px;}
}


.type_faq{ border-top: 2px solid #67c5e3;}
.type_faq ul{}
.type_faq ul li{ border-bottom: 1px solid #DDD;}
.type_faq ul li a{ display: block; position: relative; padding: 30px; cursor: pointer;}
.type_faq ul li a .q{ display: flex; position: relative; padding: 0 60px 0 80px;}
.type_faq ul li a .q .t1{ display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; transform: translate(0,-50%); left: 0; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #CCC; background: #FFF; font-size: 20px; font-weight: 800; color: #000; transition: all .3s;}
.type_faq ul li a .q .t2{ padding: 5px 0 0 0; width: 100px; line-height: 1.4; font-size: 18px; font-weight: 500; color: #67c5e3;}
.type_faq ul li a .q .t3{ flex: 1; padding: 5px 0 0 0; line-height: 1.4; font-size: 18px; font-weight: 500; color: #000;}
.type_faq ul li a .q i{ display: block; position: absolute; top: 50%; right: 0; transform: translate(0,-50%); font-size: 20px; color: #999; transition: all .3s;}
.type_faq ul li a .a{ display: none; position: relative; margin: 30px 0 0 0; padding: 10px 60px 10px 80px;}
.type_faq ul li a .a .t1{ display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%; background: #67c5e3; font-size: 18px; font-weight: 600; color: #FFF; transition: all .3s;}
.type_faq ul li a .a .t2{ line-height: 1.6; font-size: 18px; font-weight: 500; color: #000;}
.type_faq ul li a:hover{ background: #f6f8fb;}
.type_faq ul li.on a .q .t1{ border-color: #000; background: #000; color: #FFF;}
.type_faq ul li.on a .q .t3{ font-weight: 600; color: #000;}
.type_faq ul li.on a .q i{ transform: rotate(180deg);}
@media(max-width: 1025px){
    .type_faq ul li a .q{ display: block;}
    .type_faq ul li a .q .t2{ padding: 0 0 5px 0;}
}
@media(max-width: 767px){
    .type_faq ul li a{ padding: 20px 0;}
    .type_faq ul li a:hover{ background: #FFF;}
    .type_faq ul li a .q{ padding: 0 50px 0 50px;}
    .type_faq ul li a .q .t1{ width: 35px; height: 35px; font-size: 16px;}
    .type_faq ul li a .q .t2{ padding: 0; font-size: 14px;}
    .type_faq ul li a .q .t3{ line-height: 1.2; font-size: 15px;}
    .type_faq ul li a .q i{ font-size: 16px;}
    .type_faq ul li a .a{ margin: 20px 0 0 0; padding: 10px 0 10px 50px;}
    .type_faq ul li a .a .t1{ width: 35px; height: 35px; font-size: 16px;}
    .type_faq ul li a .a .t2{ font-size: 15px;}
}


.type_notice{}
.type_notice .head{ display: flex; border-top: 1px solid #e5e5e5; border-bottom: 2px solid #67c5e3;}
.type_notice .head li{ display: flex; justify-content: center; align-items: center; height: 60px;}
.type_notice .head li p{ font-size: 16px; font-weight: 700; color: #000;}
.type_notice .body{}
.type_notice .body li{}
.type_notice .body li .row{ display: flex; flex-wrap: wrap; align-items: center; position: relative; padding: 24px 0; border-bottom: 1px solid #DDD;}
.type_notice .body li .row .number{ width: 10%; display: flex; justify-content: center; align-items: center; font-size: 15px; color: #666;}
.type_notice .body li .row .tit{ flex: 1; display: flex; align-items: center; padding: 0 15px;}
.type_notice .body li .row .tit a{ line-height: 30px; font-size: 16px; font-weight: 600; color: #000; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; cursor: pointer;}
.type_notice .body li .row .tit a span{ display: inline-block; margin: 0 10px 0 0; transform: translate(0,-2px); padding: 0 10px; border-radius: 4px; border: 1px solid #67c5e3; background: #FFF; line-height: 20px; font-size: 12px; color: #67c5e3;}
.type_notice .body li .row .date{ width:15%; display:flex; justify-content:center; align-items:center; font-size: 15px; font-weight: 400; color:#666;}
.type_notice .body li .row .click{ width:15%; display:flex; justify-content:center; align-items:center; font-size: 15px; font-weight: 400; color:#666;}
.type_notice .body li .row .answer{ width:15%; display:flex; justify-content:center; align-items:center;}
.type_notice .body li .row .answer p{ display:flex; justify-content:center; align-items:center; padding: 0 16px; height: 36px; border-radius: 20px; border:1px solid #DDD; background: #FFF; font-size: 16px; color:#666;}
.type_notice .body li .row .answer.on p{ border:1px solid #67c5e3; background:#67c5e3; color:#FFF; font-weight: 600;}
.type_notice .body li .row:hover{ background: #f6f8fb;}
.type_notice .body li .row:hover .tit a{ color: #67c5e3;}
@media(max-width: 767px){
    .type_notice{ margin: 30px 0 0 0; border-top: 2px solid #67c5e3;}
    .type_notice .head{ display: none;}
    .type_notice .body{}
    .type_notice .body li .row{ padding: 20px 10px;}
    .type_notice .body li .row .number{ justify-content: flex-start; padding: 0 0 6px 0; width: 16%; font-weight: 600; color: #67c5e3;}
    .type_notice .body li .row .tit{ flex: initial; padding: 0 0 6px 0; width: 84%;}
    .type_notice .body li .row .user{ justify-content: flex-start; margin: 0 20px 0 0; width: auto; font-size: 14px;}
    .type_notice .body li .row .date{ justify-content: flex-start; margin: 0 20px 0 0; width: auto; font-size: 14px;}
    .type_notice .body li .row .click{ justify-content: flex-start; margin: 0 20px 0 0; width: auto; font-size: 14px;}
    .type_notice .body li .row .answer{ width: auto;}
    .type_notice .body li .row .answer p{ padding: 0 12px; height: 30px; font-size: 14px;}
}


.type_qna{ overflow: hidden; margin: 20px 0 0 0; border-radius: 15px; border: 1px solid #e5e5e5;}
.type_qna .head{ display: flex; background: #f5f5f5;}
.type_qna .head li{ display:flex; justify-content:center; align-items:center; height: 50px;}
.type_qna .head li p{ font-size: 14px; font-weight: 300; color: #000;}
.type_qna .body{}
.type_qna .body li{}
.type_qna .body li .row{ display:flex; flex-wrap:wrap; align-items:center; position:relative; padding: 30px 0; border-top: 1px solid #e5e5e5;}
.type_qna .body li .row .number{ width:10%; display:flex; justify-content:center; align-items:center; font-size: 14px; color:#666;}
.type_qna .body li .row .tit{ width:45%; display:flex; align-items:center; padding:0 15px;}
.type_qna .body li .row .tit a{ max-width: 90%; font-size: 14px; font-weight: 300; color:#000; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; cursor:pointer;}
.type_qna .body li .row .tit i{ margin:0 0 0 5px; font-size: 2em; color:#666; cursor:pointer;}
.type_qna .body li .row .user{ width:15%; display:flex; justify-content:center; align-items:center; font-size: 14px; font-weight: 200; color:#666;}
.type_qna .body li .row .date{ width:15%; display:flex; justify-content:center; align-items:center; font-size: 14px; font-weight: 200; color:#666;}
.type_qna .body li .row .click{ width:15%; display:flex; justify-content:center; align-items:center; font-size: 14px; font-weight: 200; color:#666;}
.type_qna .body li .row .answer{ width:15%; display:flex; justify-content:center; align-items:center;}
.type_qna .body li .row .answer p{ display:flex; justify-content:center; align-items:center; padding: 0 15px; height: 35px; border-radius: 20px; border: 1px solid #e5e5e5; background: #fafafa; font-size: 14px; color:#666;}
.type_qna .body li .row .answer.on p{ border: 1px solid #67c5e3; background:#67c5e3; color: #FFF;}
@media(max-width:767px){
    .type_qna .head{ display: none;}
    .type_qna .body li:first-child .row{ border-top: 0;}
    .type_qna .body li .row{ padding: 20px 15px 20px 60px;}
    .type_qna .body li .row .number{ position:absolute; top:50%; transform: translate(0,-50%); left: 15px; width:35px; height:35px; border-radius:50%; background: #742790; color:#FFF;}
    .type_qna .body li .row .tit{ margin: -1px 0 0 0; padding: 0 0 5px 0; width: 100%; line-height: 20px;}
    .type_qna .body li .row .user{ justify-content:flex-start; width:20%; font-size:12px;}
    .type_qna .body li .row .date{ justify-content:flex-start; width:30%; font-size:12px;}
    .type_qna .body li .row .click{ justify-content:flex-start; width:20%; font-size:12px;}
    .type_qna .body li .row .answer{ width:auto;}
    .type_qna .body li .row .answer p{ padding: 0 10px; height: 30px; font-size: 11px;}
}


.type_event{}
.type_event ul{ display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 40px 20px;}
.type_event ul li{}
.type_event ul li a{ display: block; transition: all .2s;}
.type_event ul li a .img{ border-radius: 5px;}
.type_event ul li a .img img{ display: block; width: 100%;}
.type_event ul li a .info{ padding: 15px 0 0 0;}
.type_event ul li a .info .tag{ display: flex; flex-wrap: wrap; grid-gap: 5px;}
.type_event ul li a .info .tag p{ display: flex; align-items: center; padding: 0 10px; height: 25px; border-radius: 5px; border: 1px solid #e5e5e5; font-size: 12px; color: #000;}
.type_event ul li a .info .tit{ margin: 15px 0 0 0; font-size: 18px; font-weight: 600; color: #000; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;}
.type_event ul li a .info .time{ display: flex; align-items: center; grid-gap: 5px; margin: 15px 0 0 0;}
.type_event ul li a .info .time p{ font-size: 14px; color: #666;}
.type_event ul li a .info .time span{ font-size: 14px; font-weight: 500; color: #000;}
.type_event ul li a:hover{ transform: scale(.96);}
@media(max-width: 1301px){
    .type_event ul li a:hover{ transform: scale(1);}
}
@media(max-width: 1025px){
    .type_event ul{ grid-template-columns: repeat(3,1fr);}
}
@media(max-width: 767px){
    .type_event ul{ grid-template-columns: repeat(2,1fr); grid-gap: 30px 10px;}
    .type_event ul li a .info .tit{ font-size: 16px;}
}


.type_story{}
.type_story ul{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 40px 20px;}
.type_story ul li{}
.type_story ul li a{ display: block; position: relative; overflow: hidden; transition: all .2s;}
.type_story ul li a .img{ border-radius: 5px 5px 0 0;}
.type_story ul li a .img img{ display: block; width: 100%;}
.type_story ul li a .info{ padding: 30px; border-radius: 0 0 5px 5px; border: 1px solid #e5e5e5; border-top: 0;}
.type_story ul li a .info .tit{ font-size: 18px; font-weight: 700; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;}
.type_story ul li a .info .txt{ margin: 10px 0 0 0; font-size: 14px; color: #999; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;}
.type_story ul li a .info .fb{ display: flex; justify-content: space-between; align-items: center; margin: 20px 0 0 0;}
.type_story ul li a .info .fb p{ display: flex; align-items: center; font-size: 13px; color: #666;}
.type_story ul li a .info .fb p span{ margin: 0 3px 0 0; font-size: 18px; color: #999;}
.type_story ul li a:hover{ transform: scale(.96);}
@media(max-width: 1301px){
    .type_story ul li a:hover{ transform: scale(1);}
}
@media(max-width: 1025px){
    .type_story ul{ grid-template-columns: repeat(2,1fr);}
}
@media(max-width: 767px){
    .type_story ul{ grid-gap: 30px 10px;}
    .type_story ul li a .info{ padding: 20px;}
    .type_story ul li a .info .fb{ flex-direction: column; align-items: flex-start; grid-gap: 5px 0; margin: 15px 0 0 0;}
    .type_story ul li a .info .fb p{ font-size: 12px;}
    .type_story ul li a .info .fb p span{ font-size: 16px;}
}


.type_view{}
.type_view .head{ border-top: 1px solid #e5e5e5;}
.type_view .head .tit{ padding: 30px; line-height: 1.2; font-size: 20px; font-weight: 700; color: #000;}
.type_view .head ul{ display: flex; flex-wrap: wrap; align-items: center; grid-gap: 15px 30px; padding: 20px 30px; border-top: 1px solid #e5e5e5; border-bottom: 2px solid #67c5e3;}
.type_view .head ul li{ display: flex; align-items: center; grid-gap: 0 10px;}
.type_view .head ul li p{ display: block; font-size: 14px; color: #999;}
.type_view .head ul li font{ display: block; font-size: 15px; font-weight: 500; color: #000;}
.type_view .head ul li .file{ display: flex; justify-content: center; align-items: center; padding: 0 15px; height: 40px; border-radius: 5px; border: 1px solid #e5e5e5; cursor: pointer;}
.type_view .head ul li .file p{ margin: 0; padding: 0; border: 0; font-size: 14px; color: #000;}
.type_view .head ul li .file i{ margin: 0 0 0 10px; font-size: 14px; color:#000;}
.type_view .head ul li .file:hover{ background: #f6f8fb;}
.type_view .head ul li .answer{ display: flex; justify-content: center; align-items: center; padding: 0 24px; height: 48px; border-radius: 30px; border: 1px solid #666; font-size: 16px; color: #000; cursor: pointer;}
.type_view .head ul li .answer.on{ border: 1px solid #67c5e3; background: #67c5e3; color: #FFF; font-weight: 600;}
.type_view .body{ padding: 50px 30px;}
.type_view .body *{ line-height: 1.8; font-size: 16px; font-weight: 400; color: #000;}
.type_view .body iframe{ display: block; margin: 0 0 30px 0; width: 100% !important; height: 500px !important;}
.type_view .body img{ display: block; margin: 0 0 30px 0; max-width: 100%;}

.type_view .body .qna{ border-radius: 8px;}
.type_view .body .qna .head{ display: flex; align-items: center; margin: 0 0 40px 0; font-size: 19px; font-weight: 700; color: #000;}
.type_view .body .qna .head span{ display: flex; justify-content: center; align-items: center; margin: 0 12px 0 0; width: 40px; height: 40px; border-radius: 50%; background: #000; color: #FFF;}
.type_view .body .qna .q{}
.type_view .body .qna .a{ margin: 40px 0 0 0; padding: 40px 0 0 0; border-top: 1px solid #000;}
.type_view .body .qna .a .head span{ background: #67c5e3;}

.type_view .page{ display: grid; grid-gap: 10px 0;}
.type_view .page li{ display: flex; align-items: center; padding: 20px 30px; border-radius: 5px; border: 1px solid #e5e5e5;}
.type_view .page li p{ flex: 0 0 70px; font-size: 15px; color: rgba(0 0 0/60%);}
.type_view .page li .tit{ flex: 1; display: flex; align-content: center; width: 100%;}
.type_view .page li .tit a{ line-height: 30px; font-size: 16px; font-weight: 500; color: #000; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;}
.type_view .page li .tit a span{ display: inline-block; margin: 0 10px 0 0; transform: translate(0,-1px); padding: 0 10px; border-radius: 5px; border: 1px solid #67c5e3; background: #FFF; line-height: 20px; font-size: 12px; color: #67c5e3;}
.type_view .page li:hover{ background: #f6f8fb;}
.type_view .page li:hover .tit a{ color: #67c5e3;}

.type_view.home{ margin: 0 380px 0 0;}
@media(max-width: 1025px){
    .type_view.home{ margin: 0;}
}
@media(max-width: 767px){
    .type_view .head .tit{ padding: 20px 0; font-size: 18px;}
    .type_view .head ul{ flex-direction: column; align-items: flex-start; grid-gap: 5px 0; padding: 15px 0;}
    .type_view .head ul li{ flex-wrap: wrap; grid-gap: 0 5px; position: relative; margin: 0; padding: 0 0 0 80px; min-height: 30px;}
    .type_view .head ul li:last-child{ margin-bottom: 0;}
    .type_view .head ul li > p{ position: absolute; top: 0; left: 0; margin: 0; line-height: 30px; font-size: 14px;}
    .type_view .head ul li font{ display: block; line-height: 24px; font-size: 15px;}
    .type_view .head ul li .file{ padding: 0 10px; height: 30px;}
    .type_view .head ul li .file p{ font-size: 12px;}
    .type_view .head ul li .file i{ margin: 0 0 0 5px; font-size: 12px;}
    .type_view .head ul li .answer{ padding: 0 10px; height: 35px; font-size: 14px; font-weight: 500;}

    .type_view .body{ padding: 30px 0;}
    .type_view .body *{ font-size: 16px;}
    .type_view .body iframe{ height: 250px !important;}
    .type_view .body img{ margin: 0 0 20px 0;}

    .type_view .body .qna{ border-radius: 8px;}
    .type_view .body .qna .head{ margin: 0 0 20px 0; font-size: 16px;}
    .type_view .body .qna .head span{ margin: 0 10px 0 0; width: 30px; height: 30px;}
    .type_view .body .qna .a{ margin: 30px 0 0 0; padding: 30px 0 0 0;}

    .type_view .page li{ padding: 15px 20px;}
    .type_view .page li p{ flex: 0 0 60px; font-size: 14px;}
    .type_view .page li .tit a{ padding: 2px 0 0 0; font-size: 14px;}

    .type_view .answer{ flex-direction:column; padding:15px;}
    .type_view .answer .fl{ margin:0 0 15px 0; font-size:18px;}
    .type_view .answer .fr{ padding:20px;}
    .type_view .answer .fr *{ font-size: 14px;}
}


.type_write{ margin: 60px 0 0 0;}
.type_write:first-child{ margin: 0;}
.type_write .head_tit{ display: flex; justify-content: space-between; align-items: flex-end; padding: 0 0 15px 0;}
.type_write .head_tit p{ font-size: 20px; font-weight: 600; color: #000;}
.type_write .head_tit font{ font-size: 14px; color: #F00;}
.type_write ul{ display: flex; flex-wrap: wrap; border-top: 1px solid #000;}
.type_write ul li{ width: 100%; height: 100%; border-bottom: 1px solid #DDD;}
.type_write ul li .row{ display: flex; align-items: flex-start; padding: 20px 0;}
.type_write ul li .row .tit{ flex: 0 0 100px; display: flex; align-items: center; line-height: 45px; font-size: 14px; color: #666;}
.type_write ul li .row .tit span{ color: #F00;}
.type_write ul li .row .txt{ margin: 10px 0 0 0; font-size: 12px; color: #F00;}
.type_write ul li .row .text{ flex: 1; padding: 10px 0; width: 100%; line-height: 25px; font-size: 16px; color: #000;}
.type_write ul li .row .box{ flex: 1; width: 100%;}

.type_write input{ display: flex; align-items: center; margin: 0; padding: 0 15px; width: 100%; height: 45px; border-radius: 5px; border: 1px solid #e5e5e5; background: #f6f8fb; font-size: 14px; font-weight: 400; color: #000; outline: none; -webkit-appearance: none;}
.type_write input:focus{ border: 1px solid #67c5e3;}
.type_write select{ display: flex; align-items: center; margin: 0; padding: 0 30px 0 15px; width: 100%; height: 45px; border-radius: 5px; border: 1px solid #e5e5e5; background:url(/images/icon_select.png) no-repeat center right 15px #f6f8fb; background-size: 16px auto; font-size: 14px; font-weight: 400; color: #000; outline: none; -webkit-appearance: none;}
.type_write select:focus{ border: 1px solid #67c5e3;}
.type_write textarea{ display: block; margin: 0; padding: 15px; width: 100%; height: 200px; max-height: 200px; min-height: 200px; border-radius: 5px; border: 1px solid #e5e5e5; background: #f6f8fb; line-height: 1.4; font-size: 14px; color: #000; outline:none; -webkit-appearance:none;}
.type_write textarea:focus{ border: 1px solid #67c5e3;}

.type_write .check_id{ display: flex; grid-gap: 0 5px;}
.type_write .check_id input{ flex: 1;}
.type_write .check_id .btn{ display: flex; justify-content: center; align-items: center; padding: 0 15px; border-radius: 5px; border: 1px solid #e5e5e5; font-size: 14px; color: #000; cursor: pointer;}
.type_write .check_id .btn:hover{ background: #f6f8fb;}

.type_write .userid{ display: flex; grid-gap: 0 5px;}
.type_write .userid input{ width: 50%;}

.type_write .radio{ display: flex; flex-wrap: wrap;}
.type_write .radio label{ display: flex; align-items: center; margin: 10px 30px 0 0; cursor: pointer;}
.type_write .radio label i{ display: flex; justify-content: center; align-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #CCC; background: #FFF; font-size: 12px; color: #FFF;}
.type_write .radio label p{ margin: 0 0 0 5px; font-size: 16px; color: #000;}
.type_write .radio label.on i{ border-color: #67c5e3; background: #67c5e3; color: #FFF;}
.type_write .radio label.on p{ font-weight: 600;}

.type_write .in_name{ display: flex; align-items: center;}
.type_write .in_name .radio{ margin: -10px 0 0 30px;}

.type_write .birthday{ display: block;}
.type_write .birthday .ft{ display: flex; align-items: center;}
.type_write .birthday .ft .radio{ margin: -10px 0 0 30px;}

.type_write .tel{ display: flex; grid-gap: 0 5px; max-width: 500px;}
.type_write .tel select{ flex: 0 0 90px;}
.type_write .tel input{ width: 50%;}

.type_write .mail{ flex: 1; display: grid; grid-gap: 5px 0;}
.type_write .mail .fl{ display: flex;}
.type_write .mail .fl input{ width: 100%;}
.type_write .mail .fl p{ flex: 0 0 20px; text-align: center; line-height: 50px; font-size: 12px; color: #666;}
.type_write .mail select{}

.type_write .tour_user{ display: flex;}
.type_write .tour_user .fl{ display: flex; align-items: center; width: 50%;}
.type_write .tour_user .fl .flex{ margin: 0 30px 0 0;}
.type_write .tour_user .fr{ display: flex; align-items: center; width: 50%;}
.type_write .tour_user .fr .flex{ flex: 1;}
.type_write .tour_user .flex p{ font-size: 16px; font-weight: 600; color: #000; white-space: nowrap;}
.type_write .tour_user .flex input{ margin: 0 0 0 10px; width: 100%;}
.type_write .tour_user .flex select{ margin: 0 0 0 10px; width: 100%;}
.type_write .tour_user .radio{ display: flex; flex-wrap: initial;}
.type_write .tour_user .radio > p{ margin: 0 10px 0 0; font-size: 16px; font-weight: 600; color: #000;}
.type_write .tour_user .radio label{ margin-top: 0;}
.type_write .tour_user .radio label i{ flex: 0 0 20px;}
.type_write .tour_user .radio label p{ white-space: nowrap;}
.type_write .tour_user .close{ margin: 0 0 0 15px;}
.type_write .tour_user .close i{ font-size: 18px; color: #F00; cursor: pointer;}

.type_write .tour_user_plus{ display: flex;}
.type_write .tour_user_plus .btn{ display: flex; align-items: center; padding: 0 30px; height: 50px; border-radius: 8px; border: 1px solid #DDD; cursor: pointer;}
.type_write .tour_user_plus .btn p{ font-size: 18px; font-weight: 600; color: #000;}
.type_write .tour_user_plus .btn i{ margin: 0 0 0 10px; font-size: 16px; color: #000;}
.type_write .tour_user_plus .btn:hover{ border-color: #67c5e3; background: #f6f8fb;}

.type_write .tour_date{}
.type_write .tour_date .ft{ display: flex; align-items: center;}
.type_write .tour_date .ft .fl{ display: flex; align-items: center;}
.type_write .tour_date .ft .fr{ display: flex; align-items: center; margin: 0 0 0 10px;}
.type_write .tour_date .fb{ display: flex; align-items: center; margin: 20px 0 0 0;}
.type_write .tour_date .fb .f_row{ display: flex; align-items: center;}
.type_write .tour_date p{ margin: 0 0 0 10px; font-size: 16px; color: #000; white-space: nowrap;}
.type_write .tour_date p:first-child{ margin-left: 0;}
.type_write .tour_date input{ margin: 0 0 0 10px; width: 100%;}
.type_write .tour_date input:first-child{ margin-left: 0;}
.type_write .tour_date select{ margin: 0 0 0 10px; width: auto;}

.type_write .tour_city{ display: flex; align-items: center; margin: 20px 0 0 0;}
.type_write .tour_city .box{ overflow: hidden; width: 50%; border-radius: 8px; border: 1px solid #DDD;}
.type_write .tour_city .box .head{ display: flex; align-items: center; padding: 0 20px; height: 60px; border-bottom: 1px solid #DDD; font-size: 18px; font-weight: 600; color: #000;}
.type_write .tour_city .box .body{ overflow: auto; height: 200px;}
.type_write .tour_city .box .body ul{ border: 0;}
.type_write .tour_city .box .body ul li{ display: flex; align-items: center; padding: 10px 20px; border: 0; cursor: pointer;}
.type_write .tour_city .box .body ul li p{ font-size: 16px; color: #000;}
.type_write .tour_city .box .body ul li i{ margin: 0 0 0 10px; padding: 5px; border-radius: 4px; border: 1px solid #DDD; background: #FFF; font-size: 12px; color: #000;}
.type_write .tour_city .box .body ul li:hover{ background: #f6f8fb;}
.type_write .tour_city .box .body::-moz-scrollbar{ width: 4px; background: #f0f0f0;}
.type_write .tour_city .box .body::-moz-scrollbar-thumb{ background-color: #67c5e3; border-radius: 0;}
.type_write .tour_city .box .body::-ms-scrollbar{ width: 4px; background: #f0f0f0;}
.type_write .tour_city .box .body::-ms-scrollbar-thumb{ background-color: #67c5e3; border-radius: 0;}
.type_write .tour_city .box .body::-webkit-scrollbar{ width: 4px; background: #f0f0f0;}
.type_write .tour_city .box .body::-webkit-scrollbar-thumb{ background-color: #67c5e3; border-radius: 0;}
.type_write .tour_city > i{ padding: 0 10px; font-size: 20px; color: #000;}

.type_write .tour_airline{ display: flex; flex-wrap: wrap; margin: -10px 0 0 0;}
.type_write .tour_airline label{ display: flex; align-items: center; margin: 10px 30px 0 0; cursor: pointer;}
.type_write .tour_airline label i{ display: flex; justify-content: center; align-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #CCC; background: #FFF; font-size: 12px; color: #FFF;}
.type_write .tour_airline label p{ margin: 0 0 0 5px; font-size: 18px; color: #000;}
.type_write .tour_airline label.on i{ border-color: #67c5e3; background: #67c5e3; color: #FFF;}
.type_write .tour_airline label.on p{ font-weight: 600;}
.type_write .tour_airline .fr{ display: flex; margin: 10px 0 0 0;}
.type_write .tour_airline .fr .box{ display: flex; align-items: center;}
.type_write .tour_airline .fr .box p{ margin: 0 10px; font-size: 16px; color: #000; white-space: nowrap;}
.type_write .tour_airline .fr .box p:first-child{ margin-left: 0;}
.type_write .tour_airline .fr .box:nth-child(2){ margin: 0 0 0 10px;}

.type_write .file{ display: flex; grid-gap: 0 5px; width: 100%;}
.type_write .file input{ flex: 1;}
.type_write .file .btn{ display: flex; justify-content: center; align-items: center; padding: 0 15px; height: 45px; border-radius: 5px; border: 1px solid #e5e5e5; background: #fafafa; font-size: 14px; color: #000; cursor: pointer;}

.type_write .out_text{ padding: 25px 30px; border-radius: 5px; border: 1px solid #e5e5e5; background: #f6f8fb;}
.type_write .out_text p{ padding: 5px 0; font-size: 14px;}


.type_write .star{ flex: 1; display: flex; align-items: center; grid-gap: 0 5px; height: 45px;}
.type_write .star i{ font-size: 18px; color: #CCC; transform: translate(0,-1px); cursor: pointer;}
.type_write .star i.on{ color: #ffb000;}
.type_write .star p{ margin: 0 0 0 5px; font-size: 16px; color: #000;}
.type_write .img{ display: flex; grid-gap: 0 10px;}
.type_write .img a{ display: flex; justify-content: center; align-items: center; position: relative; width: 60px; height: 60px; border-radius: 5px; border: 1px solid #e5e5e5; cursor: pointer;}
.type_write .img a i{ font-size: 14px; color: #000;}
.type_write .img a:hover{ background: #f6f8fb;}
.type_write .img a.up{ border: 0;}
.type_write .img a.up i{ display: none;}
@media(max-width: 1301px){
    .type_write .tour_user{ display: block;}
    .type_write .tour_user .fl{ width: auto;}
    .type_write .tour_user .fl .flex{ width: 50%;}
    .type_write .tour_user .fl .flex:last-child{ margin: 0;}
    .type_write .tour_user .fr{ margin: 20px 0 0 0; width: auto;}
}
@media(max-width: 1025px){
    .type_write ul li{ width: 100% !important;}

    .type_write .in_name{ display: block;}
    .type_write .in_name .radio{ margin: 10px 0 0 0;}

    .type_write .tour_user .fl{ display: block;}
    .type_write .tour_user .fl .flex{ margin: 10px 0 0 0 !important; width: auto;}
    .type_write .tour_user .fl .flex:first-child{ margin: 0 !important;}
    .type_write .tour_user .fr{ display: block; margin: 20px 0 0 0;}
    .type_write .tour_user .fr .flex{ margin: 20px 0 0 0;}
    .type_write .tour_user .flex p{ flex: 0 0 70px; margin: 0;}
    .type_write .tour_user .flex input{ margin: 0;}
    .type_write .tour_user .flex select:nth-child(2){ margin: 0;}
    .type_write .tour_user .radio > p{ flex: 0 0 70px; margin: 0;}

    .type_write .tour_date .fb{ flex-wrap: wrap; margin: 15px 0 0 -10px;}
    .type_write .tour_date .fb p:first-child{ margin: 0 0 10px 10px; width: 100%;}
}
@media(max-width: 767px){
    .type_write{ margin: 40px 0 0 0;}
    .type_write .head_tit{ padding: 0 0 15px 0;}
    .type_write .head_tit p{ line-height: 1; font-size: 22px;}
    .type_write .head_tit font{ font-size: 14px;}

    .type_write ul li .row{ display: block; padding: 20px 0;}
    .type_write ul li .row .tit{ padding: 0 0 10px 0; width: auto; line-height: 1; font-size: 14px;}

    .type_write input{ padding: 0 15px; width: 100% !important; height: 45px; font-size: 15px;}
    .type_write select{ padding: 0 25px 0 15px; height: 45px; background:url(/images/basic_select_icon.png) no-repeat center right 10px #FFF; background-size: 10px auto; font-size: 15px;}
    .type_write textarea{ padding: 15px; height: 140px; max-height: 140px; min-height: 140px; font-size: 15px;}

    .type_write .radio label{ margin: 10px 20px 0 0;}
    .type_write .radio label p{ font-size: 15px;}

    .type_write .mail{ display: block;}
    .type_write .mail .fl p{ line-height: 45px;}
    .type_write .mail select{ flex: initial; margin: 10px 0 0 0;}

    .type_write .tour_user .flex select{ margin: 0 0 0 5px;}
    .type_write .tour_user .flex select:nth-child(2){ flex: 0 0 100px;}

    .type_write .tour_user_plus .btn{ justify-content: center; padding: 0; width: 100%; height: 45px;}
    .type_write .tour_user_plus .btn p{ font-size: 15px;}
    .type_write .tour_user_plus .btn i{ margin: 0 0 2px 10px; font-size: 15px;}

    .type_write .tour_date .ft{ display: block;}
    .type_write .tour_date .ft .fr{ margin: 10px 0 0 0;}
    .type_write .tour_date .fb{ margin: 10px 0 0 0;}
    .type_write .tour_date .fb > p{ margin: 0 !important; font-size: 15px;}
    .type_write .tour_date .fb .f_row{ margin: 10px 0 0 0; width: 100%;}
    .type_write .tour_date select{ margin: 0 0 0 0; min-width: 160px;}

    .type_write .tour_city{ margin: 10px 0 0 0;}
    .type_write .tour_city > i{ padding: 0 5px; font-size: 12px;}
    .type_write .tour_city .box .head{ height: 45px; font-size: 15px;}

    .type_write .birthday .ft{}
    .type_write .birthday .ft .radio{ flex: 0 0 140px; margin: -10px 0 0 10px;}

    .type_write .file .btn{ height: 45px;}
    .type_write .file .btn p{ font-size: 15px;}

    .type_write .out_text{ padding: 20px;}
    .type_write .out_text p{ line-height: 1.2; font-size: 13px;}
}


.type_terms{ line-height: 1.8;}
.type_terms .box > div{ margin: 40px 0 0 0;}
.type_terms .box > div:first-child{ margin: 0;}
.type_terms h1{ padding: 0 0 10px 0; line-height: 1.8; font-size: 18px;}
.type_terms p{ line-height: 1.8; font-size: 14px;}
@media(max-width: 767px){
    .type_terms .box > div{ margin: 30px 0 0 0;}
    .type_terms h1{ font-size: 18px;}
    .type_terms p{ font-size: 15px;}
}


.type_terms_privacy{ line-height: 1.8; font-size: 16px; color: #000;}
.type_terms_privacy .box1{ padding: 30px; border-radius: 5px; background: #f6f8fb;}
.type_terms_privacy .box1 ul{ display: grid; grid-gap: 10px 0; margin: 30px 0 0 0; line-height: 1.6; font-size: 14px;}
.type_terms_privacy .box2{ padding: 0;}
.type_terms_privacy .table_wrap{ margin: 20px 0 0 0;}
.type_terms_privacy .table_box{ margin: 20px 0 0 0; border-collapse: collapse; border-spacing: 0; width: 100%;}
.type_terms_privacy .table_box table{ border-collapse: collapse; border-spacing: 0; width: 100%;}
.type_terms_privacy .table_box table a{ cursor: pointer;}
.type_terms_privacy h1{ padding: 60px 0 10px 0; font-size: 18px; font-weight: 500;}
.type_terms_privacy h3{ padding: 60px 0 10px 0; font-size: 18px;}
.type_terms_privacy p{ line-height: 1.6; font-size: 14px;}
.type_terms_privacy div.box2 ul { margin-top:1rem}
.type_terms_privacy div.box2 ul li{color:#000; line-height: 1.8; margin-bottom: 20px; font-size: 14px;}
.type_terms_privacy div.box2 ul li h2{font-size:1rem; margin-top:1rem}
.type_terms_privacy div.box2 table td, .type_terms_privacy div.box2 table th{border:1px solid #cdcdcd; padding: 10px; line-height: 1.4; font-size: 14px;}
.type_terms_privacy div.box2 table thead th{background-color:#f3f3f3;}
.type_terms_privacy div.box2 table td{text-align:left;}
.type_terms_privacy div.box2 table td > a{color:#1d9fe6;text-decoration:underline}
@media(max-width: 767px){
    .type_terms_privacy{ font-size: 15px;}
    .type_terms_privacy .box1{ padding: 30px; border-radius: 10px;}
    .type_terms_privacy .box1 ul{ margin: 20px 0 0 0;}
    .type_terms_privacy .box2{ padding: 0;}
    .type_terms_privacy .table_wrap{ margin: 20px 0 0 0;}
    .type_terms_privacy .table_box{ margin: 0;}
    .type_terms_privacy h1{ padding: 30px 0 10px 0; font-size: 18px;}
    .type_terms_privacy h3{ padding: 30px 0 10px 0; font-size: 18px;}
    .type_terms_privacy p{ margin-bottom: 10px; font-size: 15px;}
    .type_terms_privacy div.box2 ul { margin-top: 0;}
    .type_terms_privacy div.box2 ul li{ line-height: 1.8; margin-bottom: 0;}
    .type_terms_privacy div.box2 table td, .type_terms_privacy div.box2 table th{ border: 1px solid #e5e5e5; padding: 10px 5px; line-height: 1.4; font-size: 14px;}
}


.customer_inquiry_terms{ margin: 60px 0 0 0;}
.customer_inquiry_terms .head{ padding: 0 0 30px 0;}
.customer_inquiry_terms .head p{ font-size: 26px; font-weight: 700; color: #000;}
.customer_inquiry_terms .body{ padding: 40px; border-top: 2px solid #67c5e3; background: #f6f8fb;}
.customer_inquiry_terms .body .text{}
.customer_inquiry_terms .body .text .tit{ font-size: 20px; font-weight: 700; color: #000;}
.customer_inquiry_terms .body .text .tit span{ color: #F00;}
.customer_inquiry_terms .body .text .table{ margin: 20px 0 0 0; border-radius: 8px; border: 1px solid rgba(0 0 0/15%); background: #FFF;}
.customer_inquiry_terms .body .text .table table{ border-collapse: collapse; border-spacing: 0; width: 100%;}
.customer_inquiry_terms .body .text .table table thead{}
.customer_inquiry_terms .body .text .table table thead tr{ border-bottom: 1px solid rgba(0 0 0/10%);}
.customer_inquiry_terms .body .text .table table thead tr th{ padding: 20px 10px; border-left: 1px solid rgba(0 0 0/10%); text-align: center; font-size: 16px; font-weight: 500; color: #000; white-space: nowrap;}
.customer_inquiry_terms .body .text .table table thead tr th:first-child{ border-left: 0;}
.customer_inquiry_terms .body .text .table table thead tr th span{ color: #F00;}
.customer_inquiry_terms .body .text .table table tbody{}
.customer_inquiry_terms .body .text .table table tbody tr{}
.customer_inquiry_terms .body .text .table table tbody tr td{ padding: 20px 10px; border-left: 1px solid rgba(0 0 0/10%); text-align: center; font-size: 16px; color: #000;}
.customer_inquiry_terms .body .text .table table tbody tr td:first-child{ border-left: 0;}
.customer_inquiry_terms .body .text .table table tbody tr td span{ color: #F00;}
.customer_inquiry_terms .body .text .txt{ margin: 15px 0 0 0; font-size: 14px; color: #F00;}
.customer_inquiry_terms .body .btn{ display: flex; align-items: center; margin: 30px 0 0 0; font-size: 18px; font-weight: 500; color: #000; cursor: pointer;}
.customer_inquiry_terms .body .btn i{ display: flex; justify-content: center; align-items: center; margin: 0 5px 0 0; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(0 0 0/15%); background: #FFF; font-size: 14px; color: #CCC;}
.customer_inquiry_terms .body .btn span{ padding: 0 0 0 5px; color: #F00;}
.customer_inquiry_terms .body .btn.on{ font-weight: 700;}
.customer_inquiry_terms .body .btn.on i{ border-color: #67c5e3; background: #67c5e3; color: #FFF;}
.customer_inquiry_terms .info{ display: flex; padding: 20px 40px; border-top: 1px solid rgba(0 0 0/10%); border-bottom: 1px solid rgba(0 0 0/10%); background: #FFF;}
.customer_inquiry_terms .info font{ font-size: 16px; font-weight: 600; color: #000;}
.customer_inquiry_terms .info ul{ display: flex; align-items: center;}
.customer_inquiry_terms .info ul li{ display: flex; align-items: center; margin: 0 0 0 40px;}
.customer_inquiry_terms .info ul li p{ font-size: 16px; color: rgba(0 0 0/50%);}
.customer_inquiry_terms .info ul li span{ margin: 0 0 0 10px; font-size: 16px; font-weight: 500; color: #000;}
@media(max-width: 1025px){
    .customer_inquiry_terms .info{ display: block;}
    .customer_inquiry_terms .info ul{ display: block;}
    .customer_inquiry_terms .info ul li{ margin: 10px 0 0 0;}
    .customer_inquiry_terms .info ul li p{ flex: 0 0 60px;}
}
@media(max-width: 767px){
    .customer_inquiry_terms{ margin: 30px 0 0 0;}
    .customer_inquiry_terms .head{ padding: 0 0 15px 0;}
    .customer_inquiry_terms .body{ padding: 20px;}
    .customer_inquiry_terms .body .text .tit{ font-size: 18px;}
    .customer_inquiry_terms .body .text .table{ margin: 10px 0 0 0; border-radius: 5px;}
    .customer_inquiry_terms .body .text .table table thead tr th{ padding: 15px 10px; font-size: 15px;}
    .customer_inquiry_terms .body .text .table table tbody tr td{ padding: 15px 10px; font-size: 14px;}
    .customer_inquiry_terms .body .text .txt{ margin: 10px 0 0 0; font-size: 12px;}
    .customer_inquiry_terms .body .btn{ margin: 15px 0 0 0; font-size: 15px;}
    .customer_inquiry_terms .body .btn i{ width: 20px; height: 20px; font-size: 12px;}
    .customer_inquiry_terms .info{ padding: 15px 20px;}
    .customer_inquiry_terms .info font{ font-size: 15px;}
    .customer_inquiry_terms .info ul li{ margin: 5px 0 0 0;}
    .customer_inquiry_terms .info ul li p{ width: 50px; font-size: 14px;}
    .customer_inquiry_terms .info ul li span{ margin: 0; font-size: 14px;}
}


.customer_inquiry_head{ display: flex; flex-direction: column; align-items: center; padding: 60px; border-radius: 8px; background: #f4f7fb; text-align: center;}
.customer_inquiry_head .txt{ font-size: 20px; font-weight: 500; color: #000;}
.customer_inquiry_head .txt br{ display: none;}
.customer_inquiry_head .type_btn_01{ margin: 30px 0 0 0;}
@media(max-width: 767px){
    .customer_inquiry_head{ padding: 30px 15px; border-radius: 5px;}
    .customer_inquiry_head .txt{ font-size: 18px;}
    .customer_inquiry_head .txt br{ display: block;}
    .customer_inquiry_head .type_btn_01{ margin: 20px 0 0 0;}
}

















.member_login{ margin: 0 auto; max-width: 500px;}
.member_login .menu{}
.member_login .menu ul{ display: flex; align-items: flex-end; position: relative; border-radius: 5px 5px 0 0; background: #f6f8fb;}
.member_login .menu ul li{ width: 50%;}
.member_login .menu ul li a{ display: flex; justify-content: center; align-items: center; position: relative; height: 60px; border-bottom: 1px solid #e5e5e5; cursor: pointer;}
.member_login .menu ul li a p{ font-size: 18px; color: #000;}
.member_login .menu ul li.on a:before{ content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: #67c5e3;}
.member_login .menu ul li.on a p{ font-weight: 700; color: #67c5e3;}

.member_login .text{ margin: 0 0 20px 0; padding: 30px; border-radius: 5px; border: 1px solid #e5e5e5;}
.member_login .text p{ position: relative; padding: 5px 0 5px 15px; line-height: 1.4; font-size: 14px; color: #000;}
.member_login .text p:before{ content: ""; display: block; position: absolute; top: 12px; 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: 16px; color: #000;}
.member_login .text_ok .t2{ margin: 10px 0 0 0; font-size: 26px; font-weight: 700; color: #000;}

.member_login .body{}
.member_login .body .box{ padding: 50px 0;}
.member_login .body .box:last-child{ border-top: 1px solid #DDD;}
.member_login .body .box .form{ margin: 0 0 20px 0;}
.member_login .body .form_tit{ font-size: 14px;}
.member_login .body .form_in{ position: relative; margin: 10px 0 0 0;}
.member_login .body .form_in i{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 10; top: 0; right: 0; bottom: 0; width: 50px; height: 50px; font-size: 20px; color: #000; cursor: pointer;}
.member_login .body .form_in i.xi-eye{ display: none; color: #67c5e3;}
.member_login .body .form_in i.xi-eye-off{ display: flex;}
.member_login .body .form_in input{ display: flex; align-items: center; margin: 0; padding: 0 15px; width: 100%; height: 50px; border-radius: 5px; border: 1px solid #e5e5e5; background: none; font-size: 16px; font-weight: 400; color: #000; outline:none; -webkit-appearance:none;}
.member_login .body .form_in input:focus{ border: 1px solid #67c5e3;}
.member_login .body .form_in select{ display: flex; align-items: center; margin: 0; padding: 0 30px 0 15px; width: 100%; height: 50px; border-radius: 5px; border: 1px solid #e5e5e5; background:url(/images/icon_select.png) no-repeat center right 15px #FFF; background-size: 16px auto; font-size: 16px; font-weight: 400; color: #000; outline: none; -webkit-appearance: none;}
.member_login .body .form_in select:focus{ border: 1px solid #67c5e3;}
.member_login .body .form_in.tel{ display: flex;}
.member_login .body .form_in.tel select{ flex: 0 0 120px;}
.member_login .body .form_in.tel input{ margin: 0 0 0 10px;}
.member_login .body .form_in.on i.xi-eye{ display: flex;}
.member_login .body .form_in.on i.xi-eye-off{ display: none;}
.member_login .body .form.check{ display: flex; justify-content: flex-start;}
.member_login .body .form label{ display: flex; align-items: center; cursor: pointer;}
.member_login .body .form label i{ display: flex; justify-content: center; align-items: center; width: 20px; height: 20px; border-radius: 5px; border: 1px solid #e5e5e5; font-size: 12px; color: #FFF;}
.member_login .body .form label p{ margin: 0 0 0 5px; font-size: 16px; color: #333;}
.member_login .body .form label.on i{ border-color: #67c5e3; background: #67c5e3;}
.member_login .body .btn{ display: flex; justify-content: center; align-items: center; height: 60px; border-radius: 5px; background: #67c5e3; font-size: 18px; font-weight: 700; color: #FFF; cursor: pointer;}

.member_login .body .sub_tit{ font-size: 16px; color: #333;}
.member_login .body .btn_id{ margin: 20px 0 0 0;}
.member_login .body .btn_id a{ display: flex; justify-content: center; align-items: center; margin: 10px 0 0 0; height: 50px; border-radius: 5px; border: 1px solid #000; background: none; font-size: 16px; color: #000; cursor: pointer;}
.member_login .body .btn_id a:first-child{ margin: 0;}
.member_login .body .btn_id a:hover{ background: #f6f8fb;}
.member_login .body .btn_join{ display: flex; justify-content: center; align-items: center; margin: 10px 0 0 0; height: 60px; border-radius: 5px; border: 1px solid #67c5e3;}
.member_login .body .btn_join p{ display: flex; justify-content: center; align-items: center; font-size: 18px; font-weight: 700; color: #67c5e3; transition: all .3s;}
.member_login .body .btn_join p i{ display: flex; justify-content: center; align-items: center; margin: 0 0 0 10px; font-size: 18px; color: #67c5e3; transition: all .3s;}
.member_login .body .btn_join:hover{ background: #f6f8fb;}

.member_login .body .login_other{ display: flex; flex-direction: column; align-items: center; margin: 50px 0 0 0;}
.member_login .body .login_other h1{ font-size: 26px; font-weight: 700; color: #000;}
.member_login .body .login_other .fb{ display: flex; grid-gap: 0 20px; margin: 20px 0 0 0;}
.member_login .body .login_other .fb > div{ width: 50px; height: 50px; position:relative; z-index:5; overflow:hidden;}
.member_login .body .login_other .fb > div img{ display: block; width: 100%;}

.member_login .banner{ position: relative; margin: 0 0 40px 0;}
.member_login .banner .rolling{ overflow: hidden; border-radius: 8px;}
.member_login .banner .rolling a img{ display: block; width: 100%;}
.member_login .banner .rolling .swiper-button-prev{ opacity: 0;}
.member_login .banner .rolling .swiper-button-next{ opacity: 0;}
.member_login .banner .btn-prev{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 50; top: 50%; transform: translate(0,-50%); left: -25px; width: 50px; height: 50px; border-radius: 50%; background: rgba(255 255 255/100%); box-shadow: 0 0 0 1px rgba(0 0 0/15%); cursor: pointer;}
.member_login .banner .btn-prev i{ position: relative; z-index: 9; font-size: 20px; color: #000; transition: all .2s;}
.member_login .banner .btn-next{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 50; top: 50%; transform: translate(0,-50%); right: -25px; width: 50px; height: 50px; border-radius: 50%; background: rgba(255 255 255/100%); box-shadow: 0 0 0 1px rgba(0 0 0/15%); cursor: pointer;}
.member_login .banner .btn-next i{ position: relative; z-index: 9; font-size: 20px; color: #000; transition: all .2s;}
.member_login .banner .btn-prev:hover i{ color: #67c5e3;}
.member_login .banner .btn-next:hover i{ color: #67c5e3;}

.member_login .foot{ padding: 30px; border-radius: 5px; background: #f6f8fb;}
.member_login .foot .t1{ display: flex; align-items: center; margin: 0 0 10px 0; font-size: 18px; font-weight: 700; color: #67c5e3;}
.member_login .foot .t1 i{ margin: 0 5px 0 0; font-size: 20px; color: #67c5e3;}
.member_login .foot .t2{ position: relative; padding: 5px 0 5px 25px; line-height: 1.4; font-size: 14px; color: #333;}
.member_login .foot .t2:before{ content: ""; display: block; position: absolute; top: 12px; left: 10px; width: 4px; height: 4px; border-radius: 50%; background: rgba(0 0 0/50%);}
@media(max-width: 767px){
    .member_login .menu ul{ border-radius: 5px 5px 0 0;}
    .member_login .menu ul li a p{ font-size: 16px;}
    .member_login .menu ul li.on a{ border-radius: 5px 5px 0 0;}

    .member_login .text{ padding: 20px;}
    .member_login .text p{ font-size: 14px;}

    .member_login .text_ok{ padding: 20px 0 0 0;}
    .member_login .text_ok .t1{ font-size: 15px;}
    .member_login .text_ok .t2{ font-size: 20px;}

    .member_login .body .box{ padding: 30px 0;}
    .member_login .body .box.my_padding{ padding: 30px 20px;}
    .member_login .body .box .form{ margin: 0 0 20px 0;}
    .member_login .body .form_tit{ font-size: 13px;}
    .member_login .body .form_in{ margin: 5px 0 0 0;}
    .member_login .body .form_in i{ width: 45px; height: 45px; font-size: 20px;}
    .member_login .body .form_in input{ padding: 0 15px; height: 45px; border-radius: 5px; font-size: 15px;}
    .member_login .body .form_in select{ padding: 0 30px 0 15px; height: 45px; border-radius: 5px; background:url(/images/basic_select_icon.png) no-repeat center right 15px #FFF; background-size: 10px auto; font-size: 15px;}
    .member_login .body .form_in.tel{ display: flex;}
    .member_login .body .form_in.tel select{ flex: 0 0 90px;}
    .member_login .body .form_in.tel input{ margin: 0 0 0 10px;}
    .member_login .body .form label p{ font-size: 15px;}
    .member_login .body .btn{ height: 50px; border-radius: 5px; font-size: 16px;}

    .member_login .body .sub_tit{ font-size: 16px;}
    .member_login .body .btn_id{ margin: 10px 0 0 0;}
    .member_login .body .btn_id a{ height: 45px; border-radius: 5px; font-size: 15px;}
    .member_login .body .btn_join{ margin: 10px 0 0 0; padding: 15px; border-radius: 5px;}
    .member_login .body .btn_join .t1{ font-size: 15px;}
    .member_login .body .btn_join .t2{ font-size: 20px;}
    .member_login .body .btn_join .t2 i{ margin: 0 0 0 5px; width: 20px; height: 20px;}

    .member_login .body .login_other{ margin: 30px 0 0 0;}
    .member_login .body .login_other h1{ font-size: 20px;}
    .member_login .body .login_other .fb{ grid-gap: 0 10px; margin: 15px 0 0 0;}
    .member_login .body .login_other .fb > div{ width: 40px; height: 40px;}

    .member_login .banner .rolling{ border-radius: 5px;}
    .member_login .banner .btn-prev{ display: none;}
    .member_login .banner .btn-next{ display: none;}

    .member_login .foot{ padding: 20px 20px; border-radius: 5px;}
    .member_login .foot .t1{ font-size: 18px;}
    .member_login .foot .t1 i{ font-size: 24px;}
    .member_login .foot .t2{ font-size: 14px;}
    .member_login .foot .t2:before{ top: 12px;}
}


.member_join{ margin: 0 auto; max-width: 500px;}
.member_join .menu{}
.member_join .menu ul{ display: flex; align-items: flex-end; position: relative; border-radius: 5px 5px 0 0; background: #f6f8fb;}
.member_join .menu ul li{ width: 50%;}
.member_join .menu ul li a{ display: flex; justify-content: center; align-items: center; position: relative; height: 60px; border-bottom: 1px solid #e5e5e5; cursor: pointer;}
.member_join .menu ul li a p{ font-size: 18px; color: #000;}
.member_join .menu ul li.on a:before{ content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: #67c5e3;}
.member_join .menu ul li.on a p{ font-weight: 700; color: #67c5e3;}

.member_join .step{}
.member_join .step ul{ display: flex; justify-content: center; position: relative;}
.member_join .step ul li{ display: flex; flex-direction: column; align-items: center; position: relative; padding: 40px 0; width: 33.333%; border-bottom: 1px solid #e5e5e5;}
.member_join .step ul li .t1{ font-size: 12px; color: #666;}
.member_join .step ul li .t2{ margin: 5px 0 0 0; font-size: 20px; font-weight: 700; color: #000;}
.member_join .step ul li .right{ display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; right: -10px; margin: -15px 0 0 0; width: 20px; height: 20px;}
.member_join .step ul li .right i{ font-size: 12px; color: #CCC;}
.member_join .step ul li.on .t1{ color: #000;}
.member_join .step ul li.on .t2{ color: #67c5e3;}

.member_join .title{ margin: 40px 0 0 0; font-size: 18px; font-weight: 700; color: #000;}
.member_join .text{ padding: 10px 0 0 0;}
.member_join .text p{ position: relative; padding: 5px 0 5px 10px; line-height: 1.2; font-size: 14px; color: #555;}
.member_join .text p:before{ content: ""; display: block; position: absolute; top: 11px; left: 0; width: 4px; height: 4px; border-radius: 50%; background: rgba(0 0 0/50%);}

.member_join .foot{ margin: 40px 0 0 0; padding: 30px; border-radius: 5px; background: #f6f8fb;}
.member_join .foot .t1{ display: flex; align-items: center; margin: 0 0 10px 0; font-size: 18px; font-weight: 700; color: #67c5e3;}
.member_join .foot .t1 i{ margin: 0 5px 0 0; font-size: 20px; color: #67c5e3;}
.member_join .foot .t2{ position: relative; padding: 5px 0 5px 20px; line-height: 1.2; font-size: 14px; color: #333;}
.member_join .foot .t2:before{ content: ""; display: block; position: absolute; top: 11px; left: 10px; width: 4px; height: 4px; border-radius: 50%; background: rgba(0 0 0/50%);}

.member_join .join_terms{ margin: 40px 0 0 0;}
.member_join .join_terms .all_btn{ display: flex; align-items: center; cursor: pointer;}
.member_join .join_terms .all_btn i{ display: flex; justify-content: center; align-items: center; margin: 0 10px 0 0; width: 20px; height: 20px; border-radius: 5px; border: 1px solid #e5e5e5; font-size: 12px; color: #FFF;}
.member_join .join_terms .all_btn p{ font-size: 20px; font-weight: 700; color: #000;}
.member_join .join_terms .all_btn.on i{ border-color: #67c5e3; background: #67c5e3; color: #FFF;}
.member_join .join_terms .list{ margin: 15px 0 0 0; padding: 10px 0; border-top: 2px solid #67c5e3; border-bottom: 1px solid #DDD;}
.member_join .join_terms .list ul{}
.member_join .join_terms .list ul li{ display: flex; justify-content: space-between; align-items: center; padding: 5px 0;}
.member_join .join_terms .list ul li .check{ display: flex; align-items: center; cursor: pointer;}
.member_join .join_terms .list ul li .check i{ display: flex; justify-content: center; align-items: center; margin: 0 10px 0 0; width: 20px; height: 20px; border-radius: 5px; border: 1px solid #e5e5e5; background: #FFF; font-size: 12px; color: #FFF;}
.member_join .join_terms .list ul li .check p{ font-size: 14px; color: #000;}
.member_join .join_terms .list ul li .check.on i{ border-color: #67c5e3; background: #67c5e3; color: #FFF;}
.member_join .join_terms .list ul li .btn{ display: flex; justify-content: center; align-items: center; padding: 0 15px; height: 35px; border-radius: 40px; border: 1px solid #DDD; background: #FFF; font-size: 12px; color: #000; cursor: pointer;}
.member_join .join_terms .list ul li .btn:hover{ border-color: #67c5e3; color: #67c5e3;}

.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: 16px; color: #000;}
.member_join .join_ok .ok_id span{ font-weight: 600; color: #67c5e3;}
.member_join .join_ok .text{ margin: 40px 0 0 0;}

.member_join .type_write{ margin: 40px 0 0 0;}
@media(max-width: 1025px){
    .member_join .join_box{ display: block;}
    .member_join .join_box .box{ padding: 0; width: auto;}
    .member_join .join_box .box:last-child{ margin: 40px 0 0 0; padding: 40px 0 0 0; border-left: 0; border-top: 1px solid #DDD;}
}
@media(max-width: 769px){
    .member_join .menu ul li a p{ font-size: 16px;}

    .member_join .step ul li{ padding: 30px 0;}
    .member_join .step ul li .t1{ font-size: 12px;}
    .member_join .step ul li .t2{ font-size: 18px;}
    .member_join .step ul li .right i{ font-size: 14px;}

    .member_join .title{ margin: 30px 0 0 0; font-size: 20px;}
    .member_join .text{ padding: 5px 0 0 0;}
    .member_join .text p{ font-size: 15px;}
    .member_join .text p:before{ top: 12px;}

    .member_join .foot{ margin: 40px 0 0 0; padding: 30px;}
    .member_join .foot .t1{ margin: 0 0 5px 0; font-size: 18px;}
    .member_join .foot .t1 i{ margin: 0 5px 0 0; font-size: 20px;}
    .member_join .foot .t2{ padding: 4px 0 4px 24px; font-size: 14px;}
    .member_join .foot .t2:before{ top: 12px;}

    .member_join .join_terms{ margin: 40px 0 0 0;}

    .member_join .type_write{ margin: 40px 0 0 0;}
}


.member_join_write{ margin: 40px 0 0 0;}
.member_join_write .head_tit{ display: flex; justify-content: space-between; align-items: flex-end; padding: 0 0 15px 0;}
.member_join_write .head_tit p{ font-size: 20px; font-weight: 600; color: #000;}
.member_join_write .head_tit font{ font-size: 14px; color: #F00;}
.member_join_write ul{ display: flex; flex-wrap: wrap; border-top: 1px solid #000;}
.member_join_write ul li{ width: 100%; height: 100%; border-bottom: 1px solid #DDD;}
.member_join_write ul li .row{ display: flex; align-items: flex-start; padding: 20px 0;}
.member_join_write ul li .row .tit{ flex: 0 0 100px; display: flex; align-items: center; line-height: 45px; font-size: 14px; color: #666;}
.member_join_write ul li .row .tit span{ color: #F00;}
.member_join_write ul li .row .txt{ margin: 10px 0 0 0; font-size: 12px; color: #F00;}
.member_join_write ul li .row .box{ flex: 1; width: 100%;}

.member_join_write input{ display: flex; align-items: center; margin: 0; padding: 0 15px; width: 100%; height: 45px; border-radius: 5px; border: 1px solid #e5e5e5; background: #f6f8fb; font-size: 14px; font-weight: 400; color: #000; outline: none; -webkit-appearance: none;}
.member_join_write input:focus{ border: 1px solid #67c5e3;}
.member_join_write select{ display: flex; align-items: center; margin: 0; padding: 0 30px 0 15px; width: 100%; height: 45px; border-radius: 5px; border: 1px solid #e5e5e5; background:url(/images/icon_select.png) no-repeat center right 15px #f6f8fb; background-size: 16px auto; font-size: 14px; font-weight: 400; color: #000; outline: none; -webkit-appearance: none;}
.member_join_write select:focus{ border: 1px solid #67c5e3;}
.member_join_write textarea{ display: block; margin: 0; padding: 15px; width: 100%; height: 200px; max-height: 200px; min-height: 200px; border-radius: 5px; border: 1px solid #e5e5e5; background: #f6f8fb; line-height: 1.4; font-size: 14px; color: #000; outline:none; -webkit-appearance:none;}
.member_join_write textarea:focus{ border: 1px solid #67c5e3;}

.member_join_write .check_id{ flex: 1; display: flex; grid-gap: 0 5px;}
.member_join_write .check_id input{ flex: 1;}
.member_join_write .check_id .btn{ display: flex; justify-content: center; align-items: center; padding: 0 15px; border-radius: 5px; border: 1px solid #e5e5e5; font-size: 14px; color: #000; cursor: pointer;}
.member_join_write .check_id .btn:hover{ background: #f6f8fb;}

.member_join_write .userid{ display: flex; grid-gap: 0 5px;}
.member_join_write .userid input{ width: 50%;}

.member_join_write .tel{ display: flex; grid-gap: 0 5px; max-width: 500px;}
.member_join_write .tel select{ flex: 0 0 90px;}
.member_join_write .tel input{ width: 50%;}

.member_join_write .mail{ flex: 1; display: grid; grid-gap: 5px 0;}
.member_join_write .mail .fl{ display: flex;}
.member_join_write .mail .fl input{ width: 100%;}
.member_join_write .mail .fl p{ flex: 0 0 20px; text-align: center; line-height: 50px; font-size: 12px; color: #666;}
.member_join_write .mail select{}

.member_join_write .file{ display: flex; grid-gap: 0 5px; width: 100%;}
.member_join_write .file input{ flex: 1;}
.member_join_write .file .btn{ display: flex; justify-content: center; align-items: center; padding: 0 15px; height: 45px; border-radius: 5px; border: 1px solid #e5e5e5; background: #fafafa; font-size: 14px; color: #000; cursor: pointer;}

.member_join_write .profile_img{ display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 10px; padding: 20px 0; border-top: 1px solid #000; border-bottom: 1px solid #e5e5e5;}
.member_join_write .profile_img a{ display: flex; justify-content: center; align-items: center; position: relative; border-radius: 5px; border: 1px solid #e5e5e5; cursor: pointer;}
.member_join_write .profile_img a i{ position: absolute; font-size: 14px; color: #000;}
.member_join_write .profile_img a img{ display: block; width: 100%;}
.member_join_write .profile_img a:hover{ background: #f6f8fb;}
.member_join_write .profile_img a.up{ border: 0;}
.member_join_write .profile_img a.up i{ display: none;}
@media(max-width: 767px){
}


.member_out_ok{ padding: 50px; border-radius: 5px; border: 1px solid #e5e5e5; text-align: center;}
.member_out_ok i{ font-size: 80px; color: #F00;}
.member_out_ok .tit{ margin: 10px 0 0 0; font-size: 18px; font-weight: 600; color: #000;}
.member_out_ok .txt{ margin: 10px 0 0 0; line-height: 1.4; font-size: 14px; color: #666;}
@media(max-width: 767px){
}



.mypage_head{}
.mypage_head .user{ display: flex; justify-content: center; align-items: center; padding: 30px 0; border-radius: 10px; background: #f6f8fb;}
.mypage_head .user .img{ display: flex; justify-content: center; align-items: center; width: 120px; height: 120px; border-radius: 50%; background: #FFF; box-shadow: 0 3px 30px 0 rgba(0 0 0/5%);}
.mypage_head .user .img img{ display: block; height: 30px;}
.mypage_head .user .fr{ display: flex; flex-direction: column; align-items: flex-start; margin: 0 0 0  20px;}
.mypage_head .user .fr .name{ font-size: 20px; color: #000;}
.mypage_head .user .fr .name span{ font-weight: 700; color: #000;}
.mypage_head .user .fr .vip{ margin: 10px 0 0 0; font-size: 14px; color: #999;}
.mypage_head .user .fr .out{ display: flex; align-items: center; margin: 10px 0 0 0; padding: 0 30px; height: 35px; border-radius: 20px; border: 1px solid rgba(0 0 0/10%); background: rgba(255 255 255/50%); font-size: 14px; color: #666; cursor: pointer;}
.mypage_head .menu{ margin: 10px 0 0 0;}
.mypage_head .menu ul{ display: grid; grid-template-columns: repeat(5,1fr); grid-gap: 10px;}
.mypage_head .menu ul li{}
.mypage_head .menu ul li a{ display: flex; justify-content: center; align-items: center; height: 60px; border-radius: 5px; border: 1px solid rgba(0 0 0/10%); background: #FFF; transition: all .2s; cursor: pointer;}
.mypage_head .menu ul li a p{ font-size: 18px; font-weight: 500; color: #000;}
.mypage_head .menu ul li a:hover{ transform: scale(.9);}
.mypage_head .menu ul li.on a{ border-color: #67c5e3;}
.mypage_head .menu ul li.on a p{ color: #67c5e3;}
@media(max-width: 1301px){
    .mypage_head .menu ul li a:hover{ transform: scale(1);}
}
@media(max-width: 1025px){
}
@media(max-width: 767px){
    .mypage_head .user{ padding: 20px 0; border-radius: 5px;}
    .mypage_head .user .img{ width: 80px; height: 80px;}
    .mypage_head .user .img img{ height: 20px;}
    .mypage_head .user .fr{ margin: 0 0 0 15px;}
    .mypage_head .user .fr .name{ font-size: 18px;}
    .mypage_head .user .fr .vip{ margin: 5px 0 0 0; font-size: 12px;}
    .mypage_head .user .fr .out{ margin: 10px 0 0 0; padding: 0 15px; height: 25px; font-size: 12px;}
    .mypage_head .menu{ margin: 5px 0 0 0;}
    .mypage_head .menu ul{ grid-gap: 5px;}
    .mypage_head .menu ul li a{ height: 45px;}
    .mypage_head .menu ul li a p{ font-size: 14px;}
}


.mypage_title{ display: flex; justify-content: space-between; align-items: center; margin: 60px 0 20px 0;}
.mypage_title p{ font-size: 26px; font-weight: 600; 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;}
@media(max-width: 1301px){
}
@media(max-width: 1025px){
}
@media(max-width: 767px){
    .mypage_title{ margin: 30px 0 15px 0;}
    .mypage_title p{ font-size: 20px;}
    .mypage_title span{ font-size: 12px;}
}


.mypage_options{ display: flex; flex-wrap: wrap; grid-gap: 20px 30px; padding: 30px; border-radius: 5px; border: 1px solid #e5e5e5; background: #f6f8fb;}
.mypage_options label{ display: flex; align-items: center; cursor: pointer;}
.mypage_options label i{ display: flex; justify-content: center; align-items: center; width: 20px; height: 20px; border-radius: 5px; border: 1px solid #e5e5e5; background: #FFF; font-size: 12px; color: #FFF;}
.mypage_options label p{ margin: 0 0 0 10px; font-size: 14px; color: #000;}
.mypage_options label span{ margin: 0 0 0 5px; font-size: 14px; color: #666;}
.mypage_options label.on i{ border-color: #67c5e3; background: #67c5e3; color: #FFF;}
.mypage_options label.on p{ font-weight: 600;}
@media(max-width: 767px){
    .mypage_options{ grid-gap: 15px 0; padding: 20px;}
    .mypage_options label{ width: 33.333%;}
    .mypage_options label p{ margin: 0 0 0 5px;}
}


.mypage_order{ display: grid; grid-gap: 20px 0; margin: 20px 0 0 0;}
.mypage_order .wrap{ border-radius: 5px; border: 1px solid #e5e5e5; transition: all .2s;}
.mypage_order .wrap .ft{ display: flex; padding: 30px;}
.mypage_order .wrap .fb{ flex: 1; display: flex; justify-content: flex-end; padding: 30px; border-top: 1px solid #e5e5e5; background: #f6f8fb;}
.mypage_order .wrap .fl{ flex: 0 0 280px; display: flex; align-items: center; margin: 0 30px 0 0;}
.mypage_order .wrap .fr{ flex: 1; display: flex; justify-content: space-between; align-items: center; width: 100%;}
.mypage_order .wrap .class{ flex: 0 0 80px; font-size: 16px; font-weight: 700; color: #000;}
.mypage_order .wrap .img{ display: block; position: relative; width: 200px; border-radius: 5px;}
.mypage_order .wrap .img .tip{ display: flex; flex-wrap: wrap; grid-gap: 5px; position: absolute; z-index: 10; top: 10px; left: 10px;}
.mypage_order .wrap .img .tip div{ display: flex; align-items: center; padding: 0 10px; height: 25px; border-radius: 5px; font-size: 12px; font-weight: 500; color: #FFF;}
.mypage_order .wrap .img .tip div.sale{ background: #F00;}
.mypage_order .wrap .img .tip div.hot{ background: #F00;}
.mypage_order .wrap .img .tip div.new{ background: #67c5e3;}
.mypage_order .wrap .img img{ display: block; width: 100%;}
.mypage_order .wrap .info{ flex: 1;}
.mypage_order .wrap .info .tit{ display: block; font-size: 18px; font-weight: 700; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;}
.mypage_order .wrap .info .txt{ display: block; margin: 10px 0 0 0; font-size: 14px; color: #999; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;}
.mypage_order .wrap .info .ttt{ display: block; margin: 20px 200px 0 0; line-height: 1.4; font-size: 14px; color: #666; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;}
.mypage_order .wrap .info .tag{ display: flex; flex-wrap: wrap; grid-gap: 5px; margin: 15px 0 0 0;}
.mypage_order .wrap .info .tag p{ display: flex; align-items: center; padding: 0 10px; height: 30px; border-radius: 5px; font-size: 14px; color: rgba(0 0 0/80%);}
.mypage_order .wrap .info .tag p.box{ border: 1px solid rgba(0 0 0/5%); background: rgba(0 0 0/2%);}
.mypage_order .wrap .info .tag p i{ margin: 0 4px 0 0; color: #ffb000;}
.mypage_order .wrap .info .price{ display: flex; align-items: center; margin: 15px 0 0 0;}
.mypage_order .wrap .info .price p{ font-size: 18px; font-weight: 700; color: #F00;}
.mypage_order .wrap .info .price span{ margin: 0 0 -3px 2px; font-size: 14px; color: #999;}
.mypage_order .wrap .btn{ margin: 0 0 0 50px;}
.mypage_order .wrap .btn a{ display: flex; justify-content: center; align-items: center; margin: 10px 0; width: 140px; height: 45px; border-radius: 50px; background: #FFF; font-size: 16px; font-weight: 500; color: #FFF; transition: all .2s; cursor: pointer;}
.mypage_order .wrap .btn a:nth-child(1){ border: 1px solid #DDD; color: #000;}
.mypage_order .wrap .btn a:nth-child(2){ border: 1px solid #DDD; color: #000;}
.mypage_order .wrap .btn a:nth-child(3){ border: 1px solid #DDD; color: #000;}
.mypage_order .wrap .btn a:hover{ box-shadow: 0 5px 30px 0 rgba(0 0 0/5%);}
.mypage_order .wrap .date{ display: flex; grid-gap: 0 40px;}
.mypage_order .wrap .date .box{ display: flex;}
.mypage_order .wrap .date .box .t1{ font-size: 14px; color: #999;}
.mypage_order .wrap .date .box .t2{ margin: 0 0 0 10px; font-size: 14px; font-weight: 500; color: #000;}
@media(max-width: 1301px){
    .mypage_order .wrap .info .ttt{ margin: 20px 0 0 0;}
}
@media(max-width: 1025px){
    .mypage_order .wrap .fl{ flex: 0 0 240px; margin: 0 20px 0 0;}
    .mypage_order .wrap .class{ flex: 0 0 60px;}
    .mypage_order .wrap .img{ width: 180px;}
    .mypage_order .wrap .btn a{ margin: 5px 0; width: 80px; height: 35px; font-size: 14px;}
}
@media(max-width: 767px){
    .mypage_order{ grid-gap: 10px 0; margin: 10px 0 0 0;}
    .mypage_order .wrap{ overflow: hidden;}
    .mypage_order .wrap .ft{ display: block; padding: 20px;}
    .mypage_order .wrap .fb{ display: block; padding: 20px;}
    .mypage_order .wrap .fl{ flex: initial; display: block; margin: 0;}
    .mypage_order .wrap .fr{ flex: initial; display: block;}
    .mypage_order .wrap .class{ flex: initial; font-size: 20px;}
    .mypage_order .wrap .img{ margin: 20px 0 0 0; width: auto;}
    .mypage_order .wrap .info{ margin: 20px 0 0 0;}
    .mypage_order .wrap .btn{ display: flex; grid-gap: 0 5px; margin: 20px 0 0 0;}
    .mypage_order .wrap .btn a{ margin: 0; width: 50%; height: 40px; font-size: 14px;}
    .mypage_order .wrap .date{ display: grid; grid-gap: 10px 0;}
    .mypage_order .wrap .date .box .t1{ flex: 0 0 60px; line-height: 1.2;}
    .mypage_order .wrap .date .box .t2{ margin: 0; line-height: 1.2;}
}


.mypage_like_list{ display: grid; grid-gap: 20px 0; margin: 20px 0 0 0;}
.mypage_like_list .wrap{ display: flex; padding: 30px; border: 1px solid #e5e5e5; transition: all .2s;}
.mypage_like_list .wrap .fl{ flex: 0 0 280px; display: flex; align-items: center; margin: 0 30px 0 0;}
.mypage_like_list .wrap .fr{ flex: 1; display: flex; justify-content: space-between; align-items: center; width: 100%;}
.mypage_like_list .wrap .class{ flex: 0 0 80px; font-size: 16px; font-weight: 700; color: #000;}
.mypage_like_list .wrap .img{ display: block; position: relative; width: 200px; border-radius: 5px;}
.mypage_like_list .wrap .img .tip{ display: flex; flex-wrap: wrap; grid-gap: 5px; position: absolute; z-index: 10; top: 10px; left: 10px;}
.mypage_like_list .wrap .img .tip div{ display: flex; align-items: center; padding: 0 10px; height: 25px; border-radius: 5px; font-size: 12px; font-weight: 500; color: #FFF;}
.mypage_like_list .wrap .img .tip div.sale{ background: #F00;}
.mypage_like_list .wrap .img .tip div.hot{ background: #F00;}
.mypage_like_list .wrap .img .tip div.new{ background: #67c5e3;}
.mypage_like_list .wrap .img img{ display: block; width: 100%;}
.mypage_like_list .wrap .info{ flex: 1;}
.mypage_like_list .wrap .info .tit{ display: block; font-size: 18px; font-weight: 700; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;}
.mypage_like_list .wrap .info .txt{ display: block; margin: 10px 0 0 0; font-size: 14px; color: #999; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;}
.mypage_like_list .wrap .info .ttt{ display: block; margin: 20px 200px 0 0; line-height: 1.4; font-size: 14px; color: #666; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;}
.mypage_like_list .wrap .info .tag{ display: flex; flex-wrap: wrap; grid-gap: 5px; margin: 15px 0 0 0;}
.mypage_like_list .wrap .info .tag p{ display: flex; align-items: center; padding: 0 10px; height: 30px; border-radius: 5px; line-height: 1.2; font-size: 14px; color: rgba(0 0 0/80%);}
.mypage_like_list .wrap .info .tag p.box{ border: 1px solid rgba(0 0 0/5%); background: rgba(0 0 0/2%);}
.mypage_like_list .wrap .info .tag p i{ margin: 0 4px 0 0; color: #ffb000;}
.mypage_like_list .wrap .info .price{ display: flex; align-items: center; margin: 15px 0 0 0;}
.mypage_like_list .wrap .info .price p{ font-size: 18px; font-weight: 700; color: #F00;}
.mypage_like_list .wrap .info .price span{ margin: 0 0 -3px 2px; font-size: 14px; color: #999;}
.mypage_like_list .wrap .type_like_btn{ margin: 0 0 0 30px;}
.mypage_like_list .wrap .type_like_btn{ display: flex; justify-content: center; align-items: center; grid-gap: 0 10px; padding: 0 30px; height: 50px; border-radius: 50px; background: #FFF; border: 1px solid #e5e5e5; cursor: pointer; transition: all .2s;}
.mypage_like_list .wrap .type_like_btn i{ font-size: 18px; color: #000; transform: translate(0,-1px);}
.mypage_like_list .wrap .type_like_btn p{ font-size: 16px; color: #000;}
.mypage_like_list .wrap .type_like_btn:hover{ box-shadow: 0 5px 30px 0 rgba(0 0 0/5%);}
.mypage_like_list .wrap .type_like_btn.on{ border-color: #F00; background: #F00;}
.mypage_like_list .wrap .type_like_btn.on p{ color: #FFF;}
.mypage_like_list .wrap .type_like_btn.on i{ color: #FFF;}
@media(max-width: 1025px){
    .mypage_like_list .wrap .fl{ flex: 0 0 240px;}
    .mypage_like_list .wrap .class{ flex: 0 0 60px;}
    .mypage_like_list .wrap .img{ width: 180px;}
    .mypage_like_list .wrap .info .ttt{ margin: 20px 0 0 0;}
}
@media(max-width: 767px){
    .mypage_like_list{ grid-gap: 10px 0; margin: 10px 0 0 0;}
    .mypage_like_list .wrap{ display: block; padding: 20px;}
    .mypage_like_list .wrap .fl{ flex: initial; display: block; margin: 0;}
    .mypage_like_list .wrap .fr{ flex: initial; display: block;}
    .mypage_like_list .wrap .class{ flex: initial; font-size: 20px;}
    .mypage_like_list .wrap .img{ margin: 20px 0 0 0; width: auto;}
    .mypage_like_list .wrap .info{ margin: 20px 0 0 0;}
    .mypage_like_list .wrap .type_like_btn{ margin: 20px 0 0 0;}
    .mypage_like_list .wrap .type_like_btn{ height: 40px;}
    .mypage_like_list .wrap .type_like_btn i{ font-size: 16px;}
    .mypage_like_list .wrap .type_like_btn p{ font-size: 14px;}
}


.mypage_no_data{ display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 20px 0 0 0; padding: 50px; border-radius: 5px; border: 1px solid #e5e5e5;}
.mypage_no_data img{ display: block; margin: 0 0 20px 0; height: 80px;}
.mypage_no_data p{ font-size: 18px; color: #000;}
.mypage_no_data a{ display: flex; align-items: center; margin: 20px 0 0 0; padding: 0 30px; height: 50px; border-radius: 30px; background: #67c5e3; font-size: 18px; font-weight: 500; color: #FFF;}
@media(max-width: 767px){
}


.mypage_text{ margin: 20px 0 0 0; padding: 30px; border-radius: 5px; background: #f6f8fb;}
.mypage_text p{ position: relative; padding: 4px 0 4px 24px; line-height: 1.4; font-size: 14px; color: #333;}
.mypage_text p:before{ content: ""; display: block; position: absolute; top: 10px; left: 10px; width: 4px; height: 4px; border-radius: 50%; background: rgba(0 0 0/50%);}
@media(max-width: 767px){
    .mypage_text{ padding: 20px;}
}


.sub_brand_visual{ display: flex; align-items: center; position: relative; padding: 0 100px; height: 600px; background: url(/images/sub_brand_bg.jpg) center/cover;}
.sub_brand_visual:after{ content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(-90deg, rgba(0 0 0/0%), rgba(0 0 0/40%));}
.sub_brand_visual .type_row{ display: flex; flex-direction: column; align-items: flex-start; position: relative; z-index: 10;}
.sub_brand_visual .t1{ line-height: 1; font-size: 100px; font-weight: 800; color: #FFF;}
.sub_brand_visual .t2{ line-height: 1; margin: 20px 0 0 5px; font-size: 40px; font-weight: 500; color: #FFF;}

.sub_brand_planning{ padding: 100px 0 100px 0;}
.sub_brand_planning .type_row{ display: flex;}
.sub_brand_planning .head{ width: 500px;}
.sub_brand_planning .head .t1{ line-height: 1; font-size: 20px; font-weight: 600; color: #67c5e3; text-transform: uppercase;}
.sub_brand_planning .head .t2{ margin: 10px 0 0 0; line-height: 1.2; font-size: 60px; font-weight: 800; color: #000;}
.sub_brand_planning .list{ flex: 1;}
.sub_brand_planning .list ul{ display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 20px;}
.sub_brand_planning .list ul li{ display: flex; align-items: center; position: relative; padding: 50px; border-radius: 10px; border: 1px solid #e5e5e5;}
.sub_brand_planning .list ul li:after{ display: none; content: ""; position: absolute; top: -10px; left: 40px; width: 30px; height: 30px; border-radius: 50%; background: #67c5e3; filter: blur(10px); opacity: .2;}
.sub_brand_planning .list ul li img{ display: block; position: relative; z-index: 10; margin: 0 30px 0 0; height: 60px;}
.sub_brand_planning .list ul li p{ line-height: 1.4; font-size: 18px; color: #000;}
.sub_brand_planning .list ul li p br{ display: none;}

.sub_brand_work{ padding: 100px 0 100px 0; background: #f6f8fb;}
.sub_brand_work .type_row{ display: flex;}
.sub_brand_work .head{ width: 500px;}
.sub_brand_work .head .t1{ line-height: 1; font-size: 20px; font-weight: 600; color: #67c5e3; text-transform: uppercase;}
.sub_brand_work .head .t2{ margin: 10px 0 0 0; line-height: 1.2; font-size: 60px; font-weight: 800; color: #000;}
.sub_brand_work .list{ flex: 1;}
.sub_brand_work .list ul{ display: flex; flex-wrap: wrap; margin: -60px -10px 0 -10px;}
.sub_brand_work .list ul li{ position: relative; margin: 60px 0 0 0; width: 50%;}
.sub_brand_work .list ul li .row{ margin: 0 10px;}
.sub_brand_work .list ul li .row .img{ height: 300px; border-radius: 10px; background: #000;}
.sub_brand_work .list ul li .row p{ margin: 20px 0 0 0; line-height: 1.4; font-size: 18px; color: #000;}

.sub_brand_vision{ padding: 100px 0 100px 0;}
.sub_brand_vision .type_row{ display: flex;}
.sub_brand_vision .head{ width: 500px;}
.sub_brand_vision .head .t1{ line-height: 1; font-size: 20px; font-weight: 600; color: #67c5e3; text-transform: uppercase;}
.sub_brand_vision .head .t2{ margin: 10px 0 0 0; line-height: 1.2; font-size: 60px; font-weight: 800; color: #000;}
.sub_brand_vision .list{ flex: 1;}
.sub_brand_vision .list ul{ display: grid; grid-row-gap: 60px;}
.sub_brand_vision .list ul li{ display: flex; align-items: flex-start;}
.sub_brand_vision .list ul li span{ position: relative; margin: -10px 0 0 0; width: 150px; line-height: 1; font-size: 80px; font-weight: 700; color: #67c5e3;}
.sub_brand_vision .list ul li div{ flex: 1;}
.sub_brand_vision .list ul li p{ line-height: 1.4; font-size: 20px; font-weight: 600; color: #000;}
.sub_brand_vision .list ul li dl{ padding: 10px 0 0 0;}
.sub_brand_vision .list ul li dl dd{ position: relative; padding: 0 0 0 15px; margin: 10px 0 0 0; line-height: 1.4; font-size: 16px; color: #666;}
.sub_brand_vision .list ul li dl dd:before{ content: ""; position: absolute; top: 8px; left: 0; width: 4px; height: 4px; border-radius: 50%; background: #CCC;}

.sub_brand_about{ display: flex; align-items: center; padding: 100px 0 0 0; border-top: 1px solid #DDD;}
.sub_brand_about .type_row{ display: flex;}
.sub_brand_about .head{ width: 500px;}
.sub_brand_about .head .t1{ line-height: 1; font-size: 20px; font-weight: 600; color: #67c5e3; text-transform: uppercase;}
.sub_brand_about .head .t2{ margin: 10px 0 0 0; line-height: 1.2; font-size: 60px; font-weight: 800; color: #000;}
.sub_brand_about .fr{ flex: 1; width: 100%;}
.sub_brand_about .fr ul{ display: flex; flex-wrap: wrap; border-top: 2px solid #67c5e3;}
.sub_brand_about .fr ul li{ display: flex; padding: 30px 20px; width: 50%; border-bottom: 1px solid #DDD;}
.sub_brand_about .fr ul li:last-child{ width: 100%;}
.sub_brand_about .fr ul li strong{ flex: 0 0 160px; font-size: 18px; font-weight: 600; color: #000;}
.sub_brand_about .fr ul li span{ font-size: 16px; color: #000;}
.sub_brand_about .fr ul li div{ display: flex; flex-wrap: wrap; margin: -10px 0 0 -10px;}
.sub_brand_about .fr ul li div p{ margin: 10px 0 0 10px; padding: 10px 20px; border: 1px solid #DDD; font-size: 16px; color: #666;}
.sub_brand_about .fr ul li div p b{ display: block; font-size: 18px; font-weight: 500; color: #000;}
@media(max-width: 1301px){
    .sub_brand_planning .head{ width: 350px;}
    .sub_brand_planning .head .t2{ font-size: 50px;}
    .sub_brand_planning .list ul li p br{ display: none;}

    .sub_brand_work .head{ width: 350px;}
    .sub_brand_work .head .t2{ font-size: 50px;}

    .sub_brand_vision .head{ width: 350px;}
    .sub_brand_vision .head .t2{ font-size: 50px;}

    .sub_brand_about .head{ width: 350px;}
    .sub_brand_about .head .t2{ font-size: 50px;}
}
@media(max-width: 1025px){
    .sub_brand_planning .type_row{ display: block;}
    .sub_brand_planning .head{ width: auto;}
    .sub_brand_planning .head .t2 br{ display: none;}
    .sub_brand_planning .list{ margin: 60px 0 0 0;}

    .sub_brand_work .type_row{ display: block;}
    .sub_brand_work .head{ width: auto;}
    .sub_brand_work .list{ margin: 60px 0 0 0;}

    .sub_brand_vision .type_row{ display: block;}
    .sub_brand_vision .head{ width: auto;}
    .sub_brand_vision .list{ margin: 60px 0 0 0;}

    .sub_brand_about .type_row{ display: block;}
    .sub_brand_about .head{ width: auto;}
    .sub_brand_about .fr{ margin: 60px 0 0 0;}
}
@media(max-width: 767px){
    .sub_brand_visual{ padding: 0 30px !important; height: 200px;}
    .sub_brand_visual .t1{ font-size: 40px;}
    .sub_brand_visual .t2{ margin: 10px 0 0 3px; font-size: 16px;}

    .sub_brand_planning{ padding: 40px 0;}
    .sub_brand_planning .head .t1{ font-size: 14px;}
    .sub_brand_planning .head .t2{ margin: 10px 0 0 0; line-height: 1; font-size: 26px;}
    .sub_brand_planning .list{ margin: 30px 0 0 0;}
    .sub_brand_planning .list ul{ grid-template-columns: repeat(1,1fr); grid-gap: 10px;}
    .sub_brand_planning .list ul li{ padding: 30px;}
    .sub_brand_planning .list ul li img{ margin: 0 30px 0 0; height: 40px;}
    .sub_brand_planning .list ul li p{ font-size: 15px;}

    .sub_brand_work{ padding: 40px 0;}
    .sub_brand_work .head .t1{ font-size: 14px;}
    .sub_brand_work .head .t2{ margin: 10px 0 0 0; line-height: 1; font-size: 26px;}
    .sub_brand_work .list{ margin: 20px 0 0 0;}
    .sub_brand_work .list ul{ margin: -20px -5px 0 -5px;}
    .sub_brand_work .list ul li{ margin: 20px 0 0 0;}
    .sub_brand_work .list ul li .row{ margin: 0 5px;}
    .sub_brand_work .list ul li .row .img{ height: 120px;}
    .sub_brand_work .list ul li .row p{ margin: 10px 0 0 0; font-size: 15px;}
    .sub_brand_work .list ul li .row p br{ display: none;}

    .sub_brand_vision{ padding: 40px 0;}
    .sub_brand_vision .head .t1{ font-size: 14px;}
    .sub_brand_vision .head .t2{ margin: 10px 0 0 0; font-size: 26px;}
    .sub_brand_vision .list{ margin: 20px 0 0 0;}
    .sub_brand_vision .list ul{ grid-row-gap: 20px;}
    .sub_brand_vision .list ul li{ display: flex; align-items: flex-start;}
    .sub_brand_vision .list ul li span{ margin: 0; padding: 5px 0 0 0; width: 40px; font-size: 20px; color: #67c5e3;}
    .sub_brand_vision .list ul li p{ font-size: 18px;}
    .sub_brand_vision .list ul li dl{ padding: 5px 0 0 0;}
    .sub_brand_vision .list ul li dl dd{ font-size: 14px;}

    .sub_brand_about{ padding: 40px 0 0 0;}
    .sub_brand_about .head .t1{ font-size: 14px;}
    .sub_brand_about .head .t2{ margin: 10px 0 0 0; font-size: 26px;}
    .sub_brand_about .fr{ margin: 20px 0 0 0;}
    .sub_brand_about .fr ul li{ padding: 20px 10px; width: 100%;}
    .sub_brand_about .fr ul li strong{ flex: 0 0 130px; font-size: 15px;}
    .sub_brand_about .fr ul li span{ font-size: 15px;}
    .sub_brand_about .fr ul li div p{ font-size: 14px;}
    .sub_brand_about .fr ul li div p b{ font-size: 16px;}
}













/* Ä«µå°áÁ¦ */
.card_payment{ margin: 0 auto; max-width:500px;}
.card_payment .head_tit{ display: flex; justify-content: space-between; align-items: flex-end; padding: 0 0 15px 0;}
.card_payment .head_tit p{ font-size: 20px; font-weight: 600; color: #000;}
.card_payment .head_tit font{ font-size: 14px; color: #F00;}
.card_payment ul{ display: flex; flex-wrap: wrap; border-top: 1px solid #000;}
.card_payment ul li{ width: 100%; height: 100%; border-bottom: 1px solid #DDD;}
.card_payment ul li .row{ display: flex; align-items: flex-start; padding: 20px 0;}
.card_payment ul li .row .tit{ flex: 0 0 100px; display: flex; align-items: center; line-height: 45px; font-size: 14px; color: #666;}
.card_payment ul li .row .tit span{ color: #F00;}
.card_payment ul li .row .txt{ margin: 10px 0 0 0; font-size: 12px; color: #F00;}
.card_payment ul li .row .box{ flex: 1; width: 100%;}

.card_payment input{ display: flex; align-items: center; margin: 0; padding: 0 15px; width: 100%; height: 45px; border-radius: 5px; border: 1px solid #e5e5e5; background: #f6f8fb; font-size: 14px; font-weight: 400; color: #000; outline: none; -webkit-appearance: none;}
.card_payment input:focus{ border: 1px solid #67c5e3;}
.card_payment select{ display: flex; align-items: center; margin: 0; padding: 0 30px 0 15px; width: 100%; height: 45px; border-radius: 5px; border: 1px solid #e5e5e5; background:url(/images/icon_select.png) no-repeat center right 15px #f6f8fb; background-size: 16px auto; font-size: 14px; font-weight: 400; color: #000; outline: none; -webkit-appearance: none;}
.card_payment select:focus{ border: 1px solid #67c5e3;}
.card_payment textarea{ display: block; margin: 0; padding: 15px; width: 100%; height: 200px; max-height: 200px; min-height: 200px; border-radius: 5px; border: 1px solid #e5e5e5; background: #f6f8fb; line-height: 1.4; font-size: 14px; color: #000; outline:none; -webkit-appearance:none;}
.card_payment textarea:focus{ border: 1px solid #67c5e3;}

/* Ä«µå°áÁ¦È®ÀÎ */
.card_payment_chk{ margin: 0 auto; max-width:500px;}
.card_payment_chk{ margin: 0 auto; max-width:500px;}
.card_payment_chk .head_tit{ display: flex; justify-content: space-between; align-items: flex-end; padding: 0 0 15px 0;}
.card_payment_chk .head_tit p{ font-size: 20px; font-weight: 600; color: #000;}
.card_payment_chk .head_tit font{ font-size: 14px; color: #F00;}
.card_payment_chk ul{ display: flex; flex-wrap: wrap; border-top: 1px solid #000;}
.card_payment_chk ul li{ width: 100%; height: 100%; border-bottom: 1px solid #DDD;}
.card_payment_chk ul li .row{ display: flex; align-items: flex-start; padding: 20px 0; align-items:center;}
.card_payment_chk ul li .row .tit{ flex: 0 0 100px; display: flex; align-items: center; line-height: 45px; font-size: 14px; color: #666;}
.card_payment_chk ul li .row .tit span{ color: #F00;}
.card_payment_chk ul li .row .txt{ margin: 10px 0 0 0; font-size: 12px; color: #F00;}
.card_payment_chk ul li .row .box{ flex: 1; width: 100%;}

.card_payment_chk input{ display: flex; align-items: center; margin: 0; padding: 0 15px; width: 100%; height: 45px; border-radius: 5px; border: 1px solid #e5e5e5; background: #f6f8fb; font-size: 14px; font-weight: 400; color: #000; outline: none; -webkit-appearance: none;}
.card_payment_chk input:focus{ border: 1px solid #67c5e3;}
.card_payment_chk select{ display: flex; align-items: center; margin: 0; padding: 0 30px 0 15px; width: 100%; height: 45px; border-radius: 5px; border: 1px solid #e5e5e5; background:url(/images/icon_select.png) no-repeat center right 15px #f6f8fb; background-size: 16px auto; font-size: 14px; font-weight: 400; color: #000; outline: none; -webkit-appearance: none;}
.card_payment_chk select:focus{ border: 1px solid #67c5e3;}
.card_payment_chk textarea{ display: block; margin: 0; padding: 15px; width: 100%; height: 200px; max-height: 200px; min-height: 200px; border-radius: 5px; border: 1px solid #e5e5e5; background: #f6f8fb; line-height: 1.4; font-size: 14px; color: #000; outline:none; -webkit-appearance:none;}
.card_payment_chk textarea:focus{ border: 1px solid #67c5e3;}


/* instructor.new */
.instructor_wrap{max-width:1200px; margin:0 auto;}
.instructor_top{display:flex; justify-content:center; align-items:center;}
.instructor_top > h2{font-size:30px; font-weight:600; margin:0 50px 0 0}
.instructor_top > p{font-weight:300; font-size:19px; line-height:1.2}
.instructor_content{display:flex; gap:20px; margin-top:50px; flex-wrap:wrap;}
.instructor_content > div{width:calc((100% / 3) - 14px); border:3px solid #000; border-radius:20px; padding:30px;}
.instructor_content > div > h3{font-weight:700; font-size:24px; display:flex; align-items:center;}
.instructor_content > div > h3 > img{margin:0 0 0 10px;}
.instructor_content > div > p{margin:40px 0 15px;font-size:15px;font-weight:300; line-height:1.2}
.instructor_content > div > button{border:1px solid #454545; border-radius:50px; padding:10px 25px 9px; font-weight:600; background-color:#fff; font-size:15px; cursor:pointer; transition:0.2s}
.instructor_content > div > button:hover{background-color:#000; color:#fff;}
@media(max-width:1023px){
	.instructor_top > h2{font-size:25px}
	.instructor_top > p{font-size:16px;}
	.instructor_content > div{width:calc(50% - 10px)}
	.instructor_content > div > h3{font-size:22px}
	.instructor_content > div > h3 > img{width:25px}
	.instructor_content > div > p{margin:20px 0 15px;}
}
@media(max-width:767px){
	.instructor_top{flex-direction:column;}
	.instructor_top > h2{margin:0 0 10px 0; font-size:18px;}
	.instructor_top > p{text-align:center; font-size:14px;word-break:keep-all; }
	.instructor_content{margin-top:30px; gap:10px;}
	.instructor_content > div{padding:20px 25px; width:100%; border:2px solid #000; }
	.instructor_content > div > h3{font-size:18px; }
	.instructor_content > div > h3 > img{width:22px; padding-bottom:3px}
	
	.instructor_content > div > p{font-size:15px; word-break:keep-all; margin:10px 0; }
	.instructor_content > div > button{font-size:13px; padding:7px 15px 8px;}
}

.instructor_form{display:none; width:100%; height:100vh; background-color:rgba(0,0,0,0.5); position:fixed; left:0; top:0; z-index:99; justify-content:center; align-items:center; padding-top:80px;}
.instructor_form.on{display:flex; }
.instructor_form > div > .close{position:absolute; right:50px; top:30px; background:transparent; cursor:pointer;}
.instructor_form > div > .close > img{width:30px;}
.instructor_form > div{background-color:#fff; padding:50px; border-radius:5px; width:50%; max-width:1000px; min-width:1000px; height:90%; overflow-y:scroll;position:relative;}
.instructor_form > div > h3{text-align:center; font-size:30px; font-weight:600; margin-bottom:30px}
.instructor_form > div ul > li.write_list{display:flex; align-items:baseline; margin-bottom:30px}
.instructor_form > div ul > li.write_list > h4{width:13%; font-size:17px;}
.instructor_form > div ul > li.write_list > h4 > span{font-weight:600}
.instructor_form > div ul > li.write_list > h4.essential > span{position:relative; padding-right:15px;}
.instructor_form > div ul > li.write_list > h4.essential > span:after{content:'*'; display:block; color:#f00; position:absolute; top:0; right:0}
.instructor_form > div ul > li.write_list > div{width:87%}
.instructor_form > div ul > li.write_list > div > input{width:100%;border:1px solid #e5e5e5; height:50px; padding:0 15px; font-size:17px}
.instructor_form > div ul > li.write_list > div > textarea{width:100%;border:1px solid #e5e5e5; padding:15px; font-size:17px; display:block;}
.instructor_form > div ul > li.write_list > div.request_info input{margin-bottom:10px;}
.instructor_form > div ul > li.write_list > div.request_info input:last-child{margin-bottom:0}
.instructor_form > div ul > li.write_list > div.schedule{display:flex; gap:10px}
.instructor_form > div ul > li.write_list > div.schedule > input{width:auto; flex:1; cursor:pointer; }
.instructor_form > div ul > li.write_list > div.schedule > ul{ height:50px;  font-size:17px; flex:1; position:relative}
.instructor_form > div ul > li.write_list > div.schedule > ul > li.select_txt{padding:0 15px; border:1px solid #e5e5e5; width:100%; height:100%; display:flex; align-items:center; cursor:pointer; background-image: url(../../images/arrow-solid_bottom.svg); background-repeat:no-repeat; background-position:90% center; background-size:12px;}
.instructor_form > div ul > li.write_list > div.schedule > ul > li.option_list{position:absolute; top:55px; left:0; border:1px solid #e5e5e5; width:100%; background-color:#fff; padding:5px 0; display:none}
.instructor_form > div ul > li.write_list > div.schedule > ul > li.option_list.on{display:block}
.instructor_form > div ul > li.write_list > div.schedule > ul > li.option_list > p{cursor:pointer; padding:10px 15px 10px}
.instructor_form > div ul > li.write_list > div.schedule > ul > li.option_list > p:hover{background-color:#eee}
.instructor_form > div ul > li.confirm_li{justify-content:center;}
.instructor_form > div ul > li.confirm_li > button{cursor:pointer; font-size:17px; background-color:#67c5e3; color:#fff; padding:15px 30px; border-radius:50px; transition:0.2s}
.instructor_form > div ul > li.confirm_li > button:hover{background-color:#44a9c9}
@media(max-width:1200px){
	.instructor_form > div{max-width:90%; min-width:90%;}
}
@media(max-width:1023px){
	.instructor_form > div ul > li.write_list:not(.confirm_li){flex-direction:column;}
	.instructor_form > div ul > li.write_list > h4{width:100%; margin-bottom:10px}
	.instructor_form > div ul > li.write_list > div{width:100%;}
}
@media(max-width:767px){
	.instructor_form > div{padding:20px;}
	.instructor_form > div > .close{ right:20px; top:20px; }
	.instructor_form > div > .close > img{width:20px;}

	.instructor_form > div > h3{font-size:21px; margin-bottom:20px}
	.instructor_form > div ul > li.write_list{margin-bottom:20px;}
	.instructor_form > div ul > li.write_list > h4{font-size:15px; margin-bottom:5px;}
	.instructor_form > div ul > li.write_list > div > input{font-size:14px; height:45px; padding:0 10px}
	.instructor_form > div ul > li.write_list > div.request_info input{margin-bottom:5px}
	.instructor_form > div ul > li.write_list > div.schedule{flex-wrap:wrap}
	.instructor_form > div ul > li.write_list > div.schedule > input{width:100%; flex:auto}
	.instructor_form > div ul > li.write_list > div.schedule > select{font-size:14px; height:45px; background-size:10px; padding:0 10px}
	.instructor_form > div ul > li.write_list > div > textarea{font-size:14px}
	.instructor_form > div ul > li.write_list > div.schedule > ul > li.select_txt{font-size:14px}
	.instructor_form > div ul > li.write_list > div.schedule > ul > li.option_list.on{position:fixed; bottom:0; z-index:999; top:auto; height:30%; overflow-y:scroll; border-radius:10px 10px 0 0; padding:20px 30px}
	.instructor_form > div ul > li.write_list > div.schedule > ul > li.option_list > p{text-align:center;}
	.instructor_form > div ul > li.confirm_li > button{font-size:14px}
}