@charset "utf-8";
*{ list-style: none; margin: 0; padding: 0; border: 0; box-sizing: border-box; text-decoration: none; font-family: "Pretendard GOV Variable", "Pretendard GOV", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;}
select::-ms-expand{ display: none;}
html{ overflow-y: scroll; width: 100%; height: 100%; background: #FFF;}
body{ overflow: hidden; padding: 0; background: #FFF; -webkit-text-size-adjust: none; word-break: keep-all; line-height: 1; font-weight: 400; letter-spacing: -0.5px; color: #000;}
body::-moz-scrollbar{ width: 4px; background: #FFF;}
body::-moz-scrollbar-thumb{ background-color: #000; border-radius: 0;}
body::-ms-scrollbar{ width: 4px; background: #FFF;}
body::-ms-scrollbar-thumb{ background-color: #000; border-radius: 0;}
body::-webkit-scrollbar{ width: 4px; background: #FFF;}
body::-webkit-scrollbar-thumb{ background-color: #000; border-radius: 0;}
@media(max-width: 1501px){
}
@media(max-width: 1025px){
}
@media(max-width: 769px){
}


.type_full{ padding-right: 50px !important; padding-left: 50px !important;}
.type_row{ margin: 0 auto; max-width: 1400px; width: 100%;}
@media(max-width: 1501px){
}
@media(max-width: 1025px){
}
@media(max-width: 769px){
    .type_full{ padding-right: 20px !important; padding-left: 20px !important;}
}


.all_menu{ position: fixed; z-index: 110; top: 0; right: 100%; bottom: 0; left: -100%; background: rgba(0 0 0/50%); opacity: 0; transition: opacity .3s;}
.all_menu .row{ overflow: auto; display: flex; flex-direction: column; position: fixed; z-index: 10; top: 0; left: -400px; bottom: 0; width: 400px; padding: 60px; background: #000; opacity: 0; transition: all .5s;}
.all_menu .row::-moz-scrollbar{ width: 0; background: #000;}
.all_menu .row::-moz-scrollbar-thumb{ background-color: #000; border-radius: 0;}
.all_menu .row::-ms-scrollbar{ width: 0; background: #000;}
.all_menu .row::-ms-scrollbar-thumb{ background-color: #000; border-radius: 0;}
.all_menu .row::-webkit-scrollbar{ width: 0; background: #000;}
.all_menu .row::-webkit-scrollbar-thumb{ background-color: #000; border-radius: 0;}
.all_menu .close{ position: fixed; top: 0; right: 100%; bottom: 0; left: -100%; background: rgba(0 0 0/0.0001%);}
.all_menu .logo{ display: block; height: 54px;}
.all_menu .logo img{ display: block; width: auto; height: 100%;}
.all_menu .gnb{ margin: 40px 0 0 0; width: 100%;}
.all_menu .gnb > ul{}
.all_menu .gnb > ul > li{ padding: 20px 0; cursor: pointer;}
.all_menu .gnb > ul > li > a{ display: flex; justify-content: space-between; align-items: center; position: relative;}
.all_menu .gnb > ul > li > a p{ font-size: 20px; font-weight: 500; color: rgba(255 255 255/90%);}
.all_menu .gnb > ul > li > a i{ font-size: 16px; color: rgba(255 255 255/60%); transition: all .2s;}
.all_menu .gnb > ul > li.hover > a i{ transform: rotate(180deg);}
.all_menu .gnb > ul > li > ul{ display: none; margin: 20px 0 -20px 0; padding: 15px 20px; background: rgba(255 255 255/10%);}
.all_menu .gnb > ul > li > ul li{}
.all_menu .gnb > ul > li > ul li a{ display: flex; justify-content: space-between; align-items: center; position: relative; padding: 15px 20px; font-size: 16px; color: rgba(255 255 255/80%); cursor: pointer;}
.all_menu .gnb > ul > li.on > a:before{ content: ""; display: block; position: absolute; left: -60px; top: 50%; margin: -10px 0 0 0; width: 4px; height: 20px; background: #FFF; opacity: 1;}
.all_menu .gnb > ul > li.on > a p{ font-weight: 700; color: #FFF;}
.all_menu .gnb > ul > li.on > a i{ color: #FFF; transform: rotate(180deg);}
.all_menu .gnb > ul > li > ul li.on a{ font-weight: 700; color: #FFF;}
.all_menu .gnb > ul > li > ul li.on a i{ color: #FFF;}
.all_menu .tel{ margin: 30px 0 0 0; padding: 30px 0 0 0; border-top: 1px solid rgba(255 255 255/20%);}
.all_menu .tel p{ font-size: 36px; font-weight: 800; color: #FFF;}
.all_menu .tel span{ display: block; margin: 10px 0 0 0; font-size: 15px; font-weight: 300; color: rgba(255 255 255/80%);}
.all_menu.on{ right: 0; left: 0; opacity: 1; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);}
.all_menu.on .row{ left: 0; opacity: 1;}
.all_menu.on .close{ right: 0; left: 0;}
@media(max-width: 1501px){
}
@media(max-width: 769px){
    .all_menu .row{ left: -300px; width: 300px; padding: 40px;}
    .all_menu .logo{ height: 30px;}
    .all_menu .gnb > ul > li{ padding: 15px 0;}
    .all_menu .gnb > ul > li > a p{ font-size: 20px;}
    .all_menu .gnb > ul > li > a i{ font-size: 12px;}
    .all_menu .gnb > ul > li > ul{ margin: 15px 0 -15px 0;  padding: 15px 15px;}
    .all_menu .gnb > ul > li > ul li a{ padding: 10px 15px; font-size: 16px;}
    .all_menu .gnb > ul > li.on > a:before{ left: -40px;}
    .all_menu .gnb > ul > li.on > a p{ font-weight: 800; color: #FFF;}
    .all_menu .gnb > ul > li.on > a i{ color: #1774d0; transform: rotate(180deg);}
    .all_menu .gnb > ul > li > ul li.on a{ font-weight: 700; color: #FFF;}
    .all_menu .gnb > ul > li > ul li.on a:before{ content: ""; display: block; position: absolute; left: -5px; top: 50%; margin: -6px 0 0 0; width: 12px; height: 12px; border-radius: 50%; background: #FFF; opacity: 1;}
    .all_menu .gnb > ul > li > ul li.on a i{ color: #1774d0;}
    .all_menu .btn{ height: 50px;}
    .all_menu .btn p{ font-size: 16px;}
}


.header{ display: flex; justify-content: space-between; align-items: center; position: fixed; z-index: 100; top: 0; right: 0; left: 0; height: 120px; transition: all .3s;}
.header:after{ content: ""; position: fixed; top: 0; right: 0; left: 0; height: 120px; 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%); opacity: 1; transition: all .3s;}
.header .fr{ display: flex; align-items: center; position: relative; z-index: 10;}

.header .logo{ display: block; position: relative; z-index: 10; height: 54px; transition: all .3s;}
.header .logo img{ display: block; position: absolute; width: auto; height: 100%; transition: all .3s;}
.header .logo img.bai{ opacity: 0;}
.header .logo img.hei{ opacity: 1;}

.header .gnb{ position: absolute; z-index: 20; top: 0; left: 50%; transform: translate(-50%,0);}
.header .gnb > ul{ display: flex; align-items: center;}
.header .gnb > ul > li{ display: flex; align-items: center; position: relative; margin: 0 25px;}
.header .gnb > ul > li > a{ display: flex; align-items: center; position: relative; z-index: 10; height: 120px; cursor: pointer;}
.header .gnb > ul > li > a:before{ content: ""; display: none; position: absolute; bottom: -5px; left: 50%; margin: 0 0 0 -5px; width: 10px; height: 10px; background: #000; opacity: 1; transition: all .2s;}
.header .gnb > ul > li > a p{ position: relative; z-index: 1; font-size: 20px; font-weight: 500; color: #000; white-space: nowrap; transition: all .2s;}
.header .gnb > ul > li > ul{ overflow: hidden; position: absolute; z-index: 10; top: 80px; left: 50%; transform: translate(-50%,0); padding: 0; height: 0; background: #000; opacity: 0; transition: all .2s;}
.header .gnb > ul > li > ul li{}
.header .gnb > ul > li > ul li a{ display: flex; align-items: center; position: relative; padding: 0 25px; height: 0; font-size: 16px; color: #FFF; white-space: nowrap; opacity: 0; transition: all .2s;}
.header .gnb > ul > li:hover > ul{ top: 90px; padding: 15px 0; height: auto; opacity: 1;}
.header .gnb > ul > li:hover > ul li a{ height: 40px; opacity: 1;}
.header .gnb > ul > li > ul li a:hover{ color: rgba(255 255 255/60%);}
.header .gnb > ul > li.on > a p{ font-weight: 800; color: #000;}
.header .gnb > ul > li.on > a:before{ display: block;}
.header .gnb > ul > li > ul li.on a{ font-weight: 800; color: #FFF;}

.header .menu{ display: flex; align-items: center; position: relative; z-index: 10;}
.header .menu a{ display: flex; justify-content: center; align-items: center; margin: 0 0 0 50px; cursor: pointer;}
.header .menu a p{ font-size: 18px; color: #000; transition: all .2s;}

.header .btn_all_menu{ position: relative; margin: 0 0 0 50px; width: 20px; height: 20px; cursor: pointer;}
.header .btn_all_menu img{ display: block; position: absolute; top: 0; right: 0; width: 100%; transition: all .2s;}
.header .btn_all_menu img.bai{ opacity: 0;}
.header .btn_all_menu img.hei{ opacity: 1;}

.header.home:after{ top: -130px; opacity: 0;}
.header.home .logo img.bai{ opacity: 1;}
.header.home .logo img.hei{ opacity: 0;}
.header.home .gnb > ul > li > a:before{ background: #FFF;}
.header.home .gnb > ul > li > a p{ color: #FFF;}
.header.home .menu a p{ color: #FFF;}
.header.home .btn_all_menu img.bai{ opacity: 1;}
.header.home .btn_all_menu img.hei{ opacity: 0;}

.header.on:after{ top: 0; opacity: 1;}
.header.on .logo img.bai{ opacity: 0;}
.header.on .logo img.hei{ opacity: 1;}
.header.on .gnb > ul > li > a:before{ background: #000;}
.header.on .gnb > ul > li > a p{ color: #000;}
.header.on .menu a p{ color: #000;}
.header.on .btn_all_menu img.bai{ opacity: 0;}
.header.on .btn_all_menu img.hei{ opacity: 1;}
@media(max-width: 1501px){
    .header .logo{ height: 50px;}
    .header .gnb > ul > li{ margin: 0 20px;}
    .header .gnb > ul > li > a p{ font-size: 18px;}
    .header .menu a{ margin: 0 0 0 30px;}
    .header .menu a p{ font-size: 16px;}
    .header .btn_all_menu{ margin: 0 0 0 40px;}
}
@media(max-width: 1025px){
    .header .gnb{ display: none;}
}
@media(max-width: 769px){
    .header{ height: 70px;}
    .header:after{ height: 70px;}
    .header .logo{ height: 30px;}
    .header .menu a{ margin: 0 0 0 20px;}
    .header .menu a p{ font-size: 14px;}
    .header .btn_all_menu{ margin: 0 0 0 20px; width: 18px; height: 18px;}
}


.footer{ margin: 160px 0 0 0;}
.footer .top{ border-top: 1px solid #DDD;}
.footer .top .type_row{ display: flex; justify-content: space-between; align-items: center; padding: 40px 0;}
.footer .top .menu{ display: flex; align-items: center;}
.footer .top .menu a{ margin: 0 40px 0 0; font-size: 18px; color: #666; cursor: pointer;}
.footer .top select{ display: flex; align-items: center; margin: 0; padding: 0 40px 0 0; width: 240px; height: 50px; border-radius: 0; border: 0; border-bottom: 2px solid #000; background:url(/images/basic_select_icon.png) no-repeat center right 0 #FFF; background-size: 12px auto; font-size: 18px; font-weight: 600; color: #000; outline: none; -webkit-appearance: none;}
.footer .bottom{ border-top: 1px solid #DDD;}
.footer .bottom .type_row{ display: flex; flex-direction: column; align-items: flex-start; position: relative; padding: 60px 0 80px 0;}
.footer .bottom .logo{ height: 54px;}
.footer .bottom .logo img{ display: block; width: auto; height: 100%;}
.footer .bottom .tel{ position: absolute; top: 60px; right: 0; text-align: right;}
.footer .bottom .tel p{ font-size: 40px; font-weight: 800; color: #000;}
.footer .bottom .tel span{ display: block; margin: 10px 0 0 0; font-size: 16px; color: #666;}
.footer .bottom .txt{ display: flex; flex-wrap: wrap; margin: 40px 0 0 0; max-width: 400px;}
.footer .bottom .txt p{ margin: 10px 0 0 0; font-size: 16px; color: #666;}
.footer .bottom .txt p:nth-child(2){ margin-left: 40px;}
.footer .bottom .txt p:nth-child(4){ margin-left: 40px;}
.footer .bottom .txt p:nth-child(6){ margin-left: 40px;}
.footer .bottom .copy{ margin: 20px 0 0 0; font-size: 14px; font-weight: 300; color: #999; text-transform: uppercase;}
@media(max-width: 1501px){
}
@media(max-width: 1025px){
    .footer{ margin: 100px 0 0 0;}
}
@media(max-width: 769px){
    .footer{ margin: 80px 0 0 0;}
    .footer .top .type_row{ display: block; padding: 30px 0;}
    .footer .top .menu{ justify-content: space-between; margin: 0 -15px;}
    .footer .top .menu a{ margin: 0 15px; font-size: 15px;}
    .footer .top select{ margin: 10px 0 0 0; width: 100%;}
    .footer .bottom{ border-top: 0;}
    .footer .bottom .type_row{ align-items: center; padding: 20px 0 60px 0;}
    .footer .bottom .logo{ height: 40px;}
    .footer .bottom .tel{ position: initial; margin: 30px 0 0 0; text-align: center;}
    .footer .bottom .tel p{ font-size: 40px;}
    .footer .bottom .tel span{ margin: 5px 0 0 0; font-size: 14px;}
    .footer .bottom .txt{ justify-content: center; margin: 30px -15px 0 -15px; text-align: center;}
    .footer .bottom .txt p{ margin: 10px 15px 0 15px !important; font-size: 14px;}
    .footer .bottom .copy{ margin: 30px 0 0 0; font-size: 12px;}
}


.quick{ position: fixed; z-index: 120; right: 50px; bottom: 100px;}
.quick .btn{ display: flex; justify-content: center; align-items: center; position: relative; margin: 10px 0 0 0; width: 60px; height: 60px; background: #000; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); opacity: 0; transform: translate(0,50px);  transition: .3s; cursor: pointer;}
.quick .btn i{ font-size: 18px; color: #FFF;}
.quick.on .btn{ transform: translate(0,0); opacity: 1;}
@media(max-width: 1501px){
}
@media(max-width: 769px){
    .quick{ right: 20px; bottom: 40px;}
    .quick .btn{ width: 40px; height: 40px;}
    .quick .btn i{ font-size: 14px;}
}


.home_visual{ overflow: hidden; position: relative; background: none;}
.home_visual .swiper-wrapper{}
.home_visual .swiper-wrapper .swiper-slide{}
.home_visual .swiper-wrapper .swiper-slide .row{ overflow: hidden; position: relative; height: 100vh;}
.home_visual .swiper-wrapper .swiper-slide .row .text{ display: flex; align-items: center; position: absolute; z-index: 20; top: 0; right: 0; bottom: 0; left: 0;}
.home_visual .swiper-wrapper .swiper-slide .row .text .type_row{ padding: 0 0 100px 0; text-align: right;}
.home_visual .swiper-wrapper .swiper-slide .row .text .t1{ margin: 0 0 0 0; line-height: 1; font-size: 50px; font-weight: 700; color: #FFF; opacity: 0; transform: translate(50px,0); transition: all .3s;}
.home_visual .swiper-wrapper .swiper-slide .row .text .t2{ position: relative; margin: 40px 0 0 0; line-height: 1; font-size: 140px; font-weight: 900; color: #FFF; opacity: 0; transform: translate(60px,0); transition: all .3s;}
.home_visual .swiper-wrapper .swiper-slide .row .text .t2 span{ display: block; line-height: 1; font-size: 40px;}
.home_visual .swiper-wrapper .swiper-slide .row .text .t3{ margin: 10px 0 0 0; line-height: 1; font-size: 26px; font-weight: 500; color: #FFF;  opacity: 0; transform: translate(70px,0); transition: all .3s;}
.home_visual .swiper-wrapper .swiper-slide .row .text .btn{ display: flex; justify-content: flex-end; align-items: center; margin: 60px 0 0 0;}
.home_visual .swiper-wrapper .swiper-slide .row .text .btn .tel{ font-size: 60px; font-weight: 700; color: #FFF; transform: translate(90px,0); opacity: 0; transition: all .3s;}
.home_visual .swiper-wrapper .swiper-slide .row .text .btn a{ display: flex; justify-content: center; align-items: center; width: 240px; height: 70px; margin: 0 0 0 30px; border: 1px solid rgba(255 255 255/100%); transform: translate(110px,0); opacity: 0; transition: transform .3s, opacity .3s;}
.home_visual .swiper-wrapper .swiper-slide .row .text .btn a p{ font-size: 20px; font-weight: 500; color: #FFF;}
.home_visual .swiper-wrapper .swiper-slide .row .text .btn a:hover{ background: #FFF;}
.home_visual .swiper-wrapper .swiper-slide .row .text .btn a:hover p{ color: #000; font-weight: 700;}
.home_visual .swiper-wrapper .swiper-slide .row .img{ display: flex; justify-content: center; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: scale(1); transition: all .3s;}
.home_visual .swiper-wrapper .swiper-slide .row .img:before{ content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(0 0 0/0%), rgba(0 0 0/100%)); opacity: .6;}
.home_visual.on .swiper-wrapper .swiper-slide .row .text .t1{ opacity: 1; transform: translate(0,0) scale(1); transition: all 0.5s;}
.home_visual.on .swiper-wrapper .swiper-slide .row .text .t2{ opacity: 1; transform: translate(0,0) scale(1); transition: all 0.7s;}
.home_visual.on .swiper-wrapper .swiper-slide .row .text .t3{ opacity: 1; transform: translate(0,0) scale(1); transition: all 0.9s;}
.home_visual.on .swiper-wrapper .swiper-slide .row .text .btn .tel{ opacity: 1; transform: translate(0,0) scale(1); transition: all 1.1s;}
.home_visual.on .swiper-wrapper .swiper-slide .row .text .btn a{ opacity: 1; transform: translate(0,0) scale(1); transition: transform 1.3s, opacity 1.3s;;}
.home_visual.on .swiper-wrapper .swiper-slide .row .img{ opacity: 1; transform: scale(1.1); transition: all 1.5s;}

.home_visual .swiper-button-prev{ display: flex; justify-content: flex-start; align-items: center; position: absolute; z-index: 50; top: inherit; right: 50%; bottom: 100px; left: inherit; margin: 0 -550px 0 0; width: 30px; height: 30px; color: #FFF; transition: all .2s; cursor: pointer;}
.home_visual .swiper-button-prev:after{ font-size: 24px;}
.home_visual .swiper-button-next{ display: flex; justify-content: flex-end; align-items: center; position: absolute; z-index: 50; top: inherit; right: 50%; bottom: 100px; margin: 0 -700px 0 0; width: 30px; height: 30px; color: #FFF; transition: all .2s; cursor: pointer;}
.home_visual .swiper-button-next:after{ font-size: 24px;}

.home_visual .swiper-pagination{ display: flex; justify-content: space-between; align-items: center; right: 50%; bottom: 100px; left: inherit; margin: 0 -660px 0 0; width: 100px; height: 30px; font-size: 18px; color: rgba(255 255 255/0); transition: all .2s;}
.home_visual .swiper-pagination:before{ content: ""; position: absolute; top: 50%; left: 20px; width: 0; height: 1px; background: #FFF; transition: all 0s;}
.home_visual .swiper-pagination:after{ content: ""; position: absolute; top: 50%; left: 20px; width: 60px; height: 1px; background: rgba(255 255 255/40%);}
.home_visual .swiper-pagination .swiper-pagination-current{ font-weight: 700; color: #FFF;}
.home_visual .swiper-pagination .swiper-pagination-total{ color: rgba(255 255 255/60%);}
.home_visual.on .swiper-pagination:before{ width: 60px; transition: all 5.5s;}

.home_visual .scroll_down{ display: block; position: absolute; z-index: 40; left: 50%; bottom: 100px; margin: 0 0 0 -700px;}
.home_visual .scroll_down .box{ position: relative; width: 40px; height: 60px; border-radius: 30px; border: 2px solid #FFF;}
.home_visual .scroll_down .box span{ display: block; position: absolute; top: 50%; left: 50%; margin: -5px 0 0 -5px; width: 10px; height: 10px; border-radius: 50%; background: #FFF; animation: scroll_down .8s infinite;}
.home_visual .scroll_down p{ margin: 5px 0 0 0; text-align: center; font-size: 14px; font-weight: 300; color: #FFF;}
@keyframes scroll_down{
    0%   { transform: translate(0,-10px); opacity: 1;}
    50%  { transform: translate(0,10px); opacity: .5;}
    100% { transform: translate(0,-10px); opacity: 1;}
}
@media(max-width: 1501px){
    .home_visual .swiper-wrapper .swiper-slide .row .text .type_row{ padding: 0;}
    .home_visual .swiper-wrapper .swiper-slide .row .text .t1{ font-size: 30px;}
    .home_visual .swiper-wrapper .swiper-slide .row .text .t2{ margin: 30px 0 0 0; font-size: 100px;}
    .home_visual .swiper-wrapper .swiper-slide .row .text .t3{ font-size: 20px;}
    .home_visual .swiper-wrapper .swiper-slide .row .text .btn{ margin: 40px 0 0 0;}
    .home_visual .swiper-wrapper .swiper-slide .row .text .btn .tel{ font-size: 40px;}
    .home_visual .swiper-wrapper .swiper-slide .row .text .btn a{ width: 180px;}
    .home_visual .swiper-button-prev{ bottom: 50px; right: 200px; margin: 0;}
    .home_visual .swiper-button-next{ bottom: 50px; right: 50px; margin: 0;}
    .home_visual .swiper-pagination{ bottom: 50px; right: 90px; margin: 0;}
    .home_visual .scroll_down{ bottom: 50px; left: 50px; margin: 0;}
}
@media(max-width: 1025px){
}
@media(max-width: 769px){
    .home_visual .swiper-wrapper .swiper-slide .row{ height: auto;}
    .home_visual .swiper-wrapper .swiper-slide .row .img{ position: inherit; height: 370px;}
    .home_visual .swiper-wrapper .swiper-slide .row .text{ position: inherit;}
    .home_visual .swiper-wrapper .swiper-slide .row .text .type_row{ padding: 40px 0 0 0;}
    .home_visual .swiper-wrapper .swiper-slide .row .text .t1{ font-size: 26px; color: #000;}
    .home_visual .swiper-wrapper .swiper-slide .row .text .t1 br{ display: none;}
    .home_visual .swiper-wrapper .swiper-slide .row .text .t2{ margin: 20px 0 0 0; font-size: 64px; color: #000;}
    .home_visual .swiper-wrapper .swiper-slide .row .text .t2 span{ font-size: 30px;}
    .home_visual .swiper-wrapper .swiper-slide .row .text .t3{ margin: 10px 0 0 0; font-size: 18px; color: #000;}
    .home_visual .swiper-wrapper .swiper-slide .row .text .btn{ margin: 40px 0 0 0;}
    .home_visual .swiper-wrapper .swiper-slide .row .text .btn .tel{ font-size: 36px; color: #000;}
    .home_visual .swiper-wrapper .swiper-slide .row .text .btn a{ margin: 0 0 0 20px; width: 120px; height: 50px; border: 1px solid rgba(0 0 0/100%);}
    .home_visual .swiper-wrapper .swiper-slide .row .text .btn a p{ font-size: 16px; color: #000;}
    .home_visual.on .swiper-wrapper .swiper-slide .row .img{ transform: scale(1);}

    .home_visual .swiper-button-prev{ bottom: inherit; top: 310px; right: 170px;}
    .home_visual .swiper-button-prev:after{ font-size: 20px;}
    .home_visual .swiper-button-next{ bottom: inherit; top: 310px; right: 20px;}
    .home_visual .swiper-button-next:after{ font-size: 20px;}
    .home_visual .swiper-pagination{ bottom: inherit; top: 310px; right: 60px; font-size: 16px;}
    .home_visual .scroll_down{ bottom: inherit; top: 290px; left: 20px; margin: 0;}
    .home_visual .scroll_down .box{ width: 30px; height: 40px;}
    .home_visual .scroll_down .box span{ margin: -3px 0 0 -3px; width: 6px; height: 6px;}
    .home_visual .scroll_down p{ line-height: 1; font-size: 10px;}
}


.home_news{ padding: 160px 0;}
.home_news .type_row{ display: flex; position: relative;}
.home_news .tit{ width: 320px;}
.home_news .tit .t1{ font-size: 70px; font-weight: 800; color: #000;}
.home_news .tit .t2{ margin: 30px 0 0 0; font-size: 30px; color: #000;}
.home_news .fb{ position: absolute; top: 260px; left: 0; width: 320px;}
.home_news .more{ display: flex; justify-content: center; align-items: center; height: 70px; background: #000;}
.home_news .more p{ font-size: 20px; color: #FFF;}
.home_news .more i{ margin: 0 0 0 20px; font-size: 20px; color: #FFF;}
.home_news .menu{ margin: 60px 0 0 0;}
.home_news .menu a{ display: flex; justify-content: space-between; align-items: center; margin: 30px 100px 0 0;}
.home_news .menu a p{ font-size: 30px; color: #000; transition: all .2s;}
.home_news .menu a i{ font-size: 24px; color: #000; transform: translate(-100px,0); opacity: 0; transition: all .2s;}
.home_news .menu a:hover p{ font-weight: 700;}
.home_news .menu a:hover i{ transform: translate(0,0); opacity: 1;}
.home_news .list{ flex: 1; padding: 0 0 0 150px; width: 100%;}
.home_news .list ul{ border-top: 2px solid #000;}
.home_news .list ul li{ border-bottom: 1px solid #DDD;}
.home_news .list ul li a{ display: flex; align-items: center; padding: 50px 60px;}
.home_news .list ul li a .date{ width: 120px;}
.home_news .list ul li a .date p{ font-size: 46px; font-weight: 700; color: #000;}
.home_news .list ul li a .date span{ margin: 5px 0 0 0; font-size: 14px; color: #666;}
.home_news .list ul li a .fc{ flex: 1;}
.home_news .list ul li a .fc .txt{ font-size: 18px; color: #666;}
.home_news .list ul li a .fc .tit{ margin: 15px 0 0 0; width: 100%; text-align: left; font-size: 26px; font-weight: 600; color: #000; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;}
.home_news .list ul li a i{ width: 60px; text-align: right; font-size: 24px; color: #DDD; transition: all .2s;}
.home_news .list ul li a:hover i{ font-size: 30px; color: #000;}
@media(max-width: 1501px){
    .home_news .list{ padding: 0 0 0 80px;}
    .home_news .list ul li a{ padding: 50px 20px;}
}
@media(max-width: 1025px){
    .home_news{ padding: 100px 0;}
    .home_news .type_row{ display: block;}
    .home_news .tit{ width: auto; text-align: center;}
    .home_news .tit .t1{ font-size: 50px;}
    .home_news .tit .t1 br{ display: none;}
    .home_news .tit .t2{ font-size: 26px;}
    .home_news .more{ margin: 60px 0 0 0;}
    .home_news .menu{ display: flex; margin: 40px -10px 0 -10px;}
    .home_news .menu a{ display: flex; justify-content: center; align-items: center; margin: 0 10px; width: 33.333%; height: 70px; border: 1px solid #DDD;}
    .home_news .menu a p{ font-size: 20px;}
    .home_news .menu a i{ display: none;}
    .home_news .fb{ position: initial; width: auto;}
    .home_news .list{ margin: 60px 0 0 0; padding: 0;}
    .home_news .list ul li a{ padding: 30px 20px;}
    .home_news .list ul li a .fc .tit{ margin: 10px 0 0 0; font-size: 20px;}
}
@media(max-width: 769px){
    .home_news{ margin: 60px 0 0 0; padding: 60px 0; border-top: 1px solid #DDD;}
    .home_news .tit .t1{ font-size: 36px;}
    .home_news .tit .t2{ margin: 15px 0 0 0; font-size: 20px;}
    .home_news .more{ margin: 40px 0 0 0; height: 50px;}
    .home_news .more p{ font-size: 16px;}
    .home_news .more i{ font-size: 16px;}
    .home_news .menu{ margin: 20px -5px 0 -5px;}
    .home_news .menu a{ margin: 0 5px; height: 50px;}
    .home_news .menu a p{ font-size: 16px;}
    .home_news .list{ margin: 40px 0 0 0;}
    .home_news .list ul li a{ padding: 25px 0;}
    .home_news .list ul li a .date{ width: 70px;}
    .home_news .list ul li a .date p{ font-size: 30px;}
    .home_news .list ul li a .date span{ margin: 0; font-size: 10px;}
    .home_news .list ul li a .fc .txt{ font-size: 14px;}
    .home_news .list ul li a .fc .tit{ margin: 10px 0 0 0; text-align: left; font-size: 18px;}
    .home_news .list ul li a i{ width: 40px; font-size: 16px;}
}


.home_duklass{ padding: 0 0 160px 0;}
.home_duklass .head{ padding: 160px 0 460px 0; background: url(/images/hd_bg.jpg) center/cover;}
.home_duklass .head .type_row{ text-align: center;}
.home_duklass .head .t1{ font-size: 70px; font-weight: 800; color: #FFF;}
.home_duklass .head .t2{ margin: 30px 0 0 0; font-size: 30px; color: #FFF;}
.home_duklass .head .t2 br{ display: none;}
.home_duklass .body{ position: relative; z-index: 10; margin: -300px 0 0 0;}
.home_duklass .body .type_row{ position: relative;}
.home_duklass .body a:nth-child(1){ overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; margin: 0 50% 0 0; height: 600px; background: url(/images/hd_01.jpg) center/cover;}
.home_duklass .body a:nth-child(1) .text{ padding: 0 0 140px 0; text-align: center;}
.home_duklass .body a:nth-child(1) .text .t1{ font-size: 36px; font-weight: 700; color: #FFF;}
.home_duklass .body a:nth-child(1) .text .t2{ margin: 20px 0 0 0; line-height: 1.4; font-size: 20px; color: #FFF;}
.home_duklass .body a:nth-child(1) .hover{ display: flex; align-items: flex-end; position: absolute; left: 0; bottom: 0; padding: 20px; width: 100px; height: 100px; background: #FFF; transform: translate(-100px,100px); opacity: 0; transition: all .2s;}
.home_duklass .body a:nth-child(1) .hover img{ display: block; transform: translate(-50px,50px); opacity: 0; transition: all .3s;}
.home_duklass .body a:nth-child(1):hover .hover{ transform: translate(0,0); opacity: 1;}
.home_duklass .body a:nth-child(1):hover .hover img{ transform: translate(0,0); opacity: 1;}
.home_duklass .body a:nth-child(2){ overflow: hidden; display: flex; flex-direction: column; justify-content: center; position: absolute; top: 0; right: 0; left: 50%; padding: 0 0 0 80px; height: 300px; background: url(/images/hd_02.jpg) center/cover;}
.home_duklass .body a:nth-child(2) .hover{ display: flex; justify-content: flex-end; align-items: flex-end; position: absolute; right: 0; bottom: 0; padding: 20px; width: 100px; height: 100px; background: #FFF; transform: translate(100px,100px); opacity: 0; transition: all .2s;}
.home_duklass .body a:nth-child(2) .hover img{ display: block; transform: rotate(-90deg) translate(-50px,50px); opacity: 0; transition: all .3s;}
.home_duklass .body a:nth-child(2):hover .hover{ transform: translate(0,0); opacity: 1;}
.home_duklass .body a:nth-child(2):hover .hover img{ transform: rotate(-90deg) translate(0,0); opacity: 1;}
.home_duklass .body a:nth-child(2) .text{}
.home_duklass .body a:nth-child(2) .text .t1{ font-size: 36px; font-weight: 700; color: #FFF;}
.home_duklass .body a:nth-child(2) .text .t2{ margin: 20px 0 0 0; line-height: 1.4; font-size: 20px; color: #FFF;}
.home_duklass .body a:nth-child(3){ overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; position: absolute; top: 300px; right: 0; left: 50%; padding: 0 80px 0 0; height: 300px; background: url(/images/hd_03.jpg) center/cover;}
.home_duklass .body a:nth-child(3) .text{ text-align: right;}
.home_duklass .body a:nth-child(3) .text .t1{ font-size: 36px; font-weight: 700; color: #000;}
.home_duklass .body a:nth-child(3) .text .t2{ margin: 20px 0 0 0; line-height: 1.4; font-size: 20px; color: #000;}
.home_duklass .body a:nth-child(3) .hover{ display: flex; align-items: flex-end; position: absolute; left: 0; bottom: 0; padding: 20px; width: 100px; height: 100px; background: #FFF; transform: translate(-100px,100px); opacity: 0; transition: all .2s;}
.home_duklass .body a:nth-child(3) .hover img{ display: block; transform: translate(-50px,50px); opacity: 0; transition: all .3s;}
.home_duklass .body a:nth-child(3):hover .hover{ transform: translate(0,0); opacity: 1;}
.home_duklass .body a:nth-child(3):hover .hover img{ transform: translate(0,0); opacity: 1;}
@media(max-width: 1501px){
    .home_duklass .body a:nth-child(1) .hover{ display: none;}
    .home_duklass .body a:nth-child(2) .hover{ display: none;}
    .home_duklass .body a:nth-child(3) .hover{ display: none;}
}
@media(max-width: 1025px){
    .home_duklass{ padding: 0 0 100px 0;}
    .home_duklass .head{ padding: 100px 0 300px 0;}
    .home_duklass .head .t1{ font-size: 50px;}
    .home_duklass .head .t2{ font-size: 26px;}
    .home_duklass .body{ margin: -200px 0 0 0;}
    .home_duklass .body a:nth-child(1){ height: 400px;}
    .home_duklass .body a:nth-child(1) .text{ padding: 0 0 100px 0;}
    .home_duklass .body a:nth-child(1) .text .t1{ font-size: 26px;}
    .home_duklass .body a:nth-child(1) .text .t2{ margin: 15px 0 0 0; font-size: 16px;}
    .home_duklass .body a:nth-child(2){ padding: 0 0 0 40px; height: 200px;}
    .home_duklass .body a:nth-child(2) .text .t1{ font-size: 26px;}
    .home_duklass .body a:nth-child(2) .text .t2{ margin: 15px 0 0 0; font-size: 16px;}
    .home_duklass .body a:nth-child(3){ top: 200px; padding: 0 40px 0 0; height: 200px;}
    .home_duklass .body a:nth-child(3) .text .t1{ font-size: 26px;}
    .home_duklass .body a:nth-child(3) .text .t2{ margin: 15px 0 0 0; font-size: 16px;}
}
@media(max-width: 769px){
    .home_duklass{ padding: 0 0 60px 0;}
    .home_duklass .head{ padding: 60px 0 160px 0;}
    .home_duklass .head .t1{ font-size: 36px;}
    .home_duklass .head .t2{ margin: 15px 0 0 0; line-height: 1.2; font-size: 20px;}
    .home_duklass .head .t2 br{ display: block;}
    .home_duklass .body{ margin: -100px 0 0 0;}
    .home_duklass .body a:nth-child(1){ justify-content: center; margin: 0; height: 200px;}
    .home_duklass .body a:nth-child(1) .text{ padding: 0;}
    .home_duklass .body a:nth-child(2){ position: initial;}
    .home_duklass .body a:nth-child(3){ position: initial;}
}


.home_room{ padding: 160px 0; background: url(/images/hr_bg.jpg) fixed center/cover;}
.home_room .type_row{ display: flex; justify-content: space-between; align-items: center;}
.home_room .head{ width: 500px;}
.home_room .head .t1{ font-size: 70px; font-weight: 800; color: #FFF;}
.home_room .head .t2{ margin: 30px 0 0 0; font-size: 30px; color: #FFF;}
.home_room .body{ display: flex;}
.home_room .body .row{ margin: 0 0 0 80px; text-align: center;}
.home_room .body .row img{ display: block; margin: 0 auto;}
.home_room .body .row .t1{ margin: 20px 0 0 0; font-size: 26px; color: #FFF;}
.home_room .body .row .t2{ margin: 10px 0 0 0; font-size: 60px; font-weight: 800; color: #FFF;}
.home_room .body .row .t2 span{ font-weight: 100;}
@media(max-width: 1501px){
    .home_room .body .row{ margin: 0 0 0 60px;}
    .home_room .body .row img{ height: 50px;}
    .home_room .body .row .t1{ font-size: 20px;}
    .home_room .body .row .t2{ font-size: 40px;}
}
@media(max-width: 1025px){
    .home_room{ padding: 100px 0;}
    .home_room .type_row{ display: block;}
    .home_room .head{ width: auto; text-align: center;}
    .home_room .head .t1{ font-size: 50px;}
    .home_room .head .t1 br:nth-child(2){ display: none;}
    .home_room .head .t2{ font-size: 26px;}
    .home_room .body{ margin: 60px 0 0 0;}
    .home_room .body .row{ margin: 0; width: 33.333%;}
}
@media(max-width: 769px){
    .home_room{ padding: 60px 0;}
    .home_room .head .t1{ font-size: 36px;}
    .home_room .head .t1 br:nth-child(2){ display: block;}
    .home_room .head .t2{ margin: 15px 0 0 0; font-size: 20px;}
    .home_room .body{ margin: 40px 0 0 0;}
    .home_room .body .row img{ height: 40px;}
    .home_room .body .row .t1{ font-size: 16px;}
    .home_room .body .row .t2{ font-size: 26px;}
}


.home_link{ padding: 160px 0 0 0;}
.home_link .type_row{ display: flex;}
.home_link .video{ margin: 0 80px 0 0; width: 600px;}
.home_link .video .img{ display: flex; flex-direction: column; justify-content: center; align-items: center; height: 450px; background: url(/images/h_video.jpg) center/cover;}
.home_link .video .img img{ display: block;}
.home_link .video .img p{ margin: 20px 0 0 0; line-height: 1.2; text-align: center; font-size: 26px; color: #FFF;}
.home_link .video .t1{ margin: 40px 0 0 0; font-size: 60px; font-weight: 800; color: #000; text-transform: uppercase;}
.home_link .video .t2{ margin: 20px 0 0 0; font-size: 30px; color: #666;}
.home_link .link{ flex: 1; display: flex; flex-wrap: wrap; margin: 0 -40px; height: 450px;}
.home_link .link .row{ width: 50%;}
.home_link .link .row a{ display: flex; flex-direction: column; justify-content: center; position: relative; margin: 0 40px; height: 225px; border-bottom: 2px solid #000;}
.home_link .link .row a .t1{ font-size: 40px; font-weight: 800; color: #000;}
.home_link .link .row a .t2{ margin: 20px 0 0 0; line-height: 1.2; font-size: 20px; color: #666;}
.home_link .link .row a img{ display: block; position: absolute; right: 0; transition: all .2s;}
.home_link .link .row:nth-child(1) a{ border-top: 1px solid #DDD;}
.home_link .link .row:nth-child(2) a{ border-top: 1px solid #DDD;}
.home_link .link .row:nth-child(3){ width: 100%;}
.home_link .link .row a:hover img{ transform: translate(-10px,0) scale(1.5);}
@media(max-width: 1501px){
    .home_link .video{ margin: 0 50px 0 0; width: 500px;}
    .home_link .link{ margin: 0 -25px;}
    .home_link .link .row a{ margin: 0 25px;}
    .home_link .link .row a .t1{ font-size: 36px;}
    .home_link .link .row a .t2{ font-size: 18px;}
    .home_link .link .row a img{ height: 20px;}
}
@media(max-width: 1025px){
    .home_link{ padding: 100px 0 0 0;}
    .home_link .type_row{ display: block;}
    .home_link .video{ display: flex; flex-direction: column-reverse; margin: 0; width: auto;}
    .home_link .video .t1{ margin: 0; text-align: center; font-size: 50px;}
    .home_link .video .t2{ text-align: center; font-size: 26px;}
    .home_link .video .img{ margin: 60px 0 0 0;}
    .home_link .link .row:nth-child(1) a{ border-top: 0;}
    .home_link .link .row:nth-child(2) a{ border-top: 0;}
}
@media(max-width: 769px){
    .home_link{ padding: 60px 0 0 0;}
    .home_link .video .t1{ font-size: 36px;}
    .home_link .video .t2{ margin: 15px 0 0 0; font-size: 20px;}
    .home_link .video .img{ margin: 40px 0 0 0; height: 220px;}
    .home_link .video .img img{ height: 40px;}
    .home_link .video .img p{ font-size: 20px;}
    .home_link .link{ display: block !important; margin: 0 !important; height: auto;}
    .home_link .link .row{ width: 100% !important;}
    .home_link .link .row a{ margin: 0 !important; padding: 30px 0 !important; height: auto !important;}
    .home_link .link .row a .t1{ font-size: 26px !important;}
    .home_link .link .row a .t2{ margin: 15px 0 0 0 !important; font-size: 16px !important;}
    .home_link .link .row a .t2 br{ display: none;}
}












.type_guide{ display: flex; flex-direction: column; align-items: flex-start; padding: 220px 0 100px 0;}
.type_guide .tit{ padding: 0 0 20px 0; font-size: 30px; color: #000;}
.type_guide .btn{ position: relative;}
.type_guide .btn .head{ display: flex; align-items: center; cursor: pointer;}
.type_guide .btn .head p{ margin: 0 15px 0 0; font-size: 60px; font-weight: 800; color: #000;}
.type_guide .btn .head i{ display: flex; justify-content: center; align-items: center; padding: 3px 0 0 0; width: 60px; height: 60px; border-radius: 50%; border: 1px solid #DDD; font-size: 18px; color: #666; transition: all .2s;}
.type_guide .btn .body{ overflow: hidden; position: absolute; z-index: 10; top: 50px; left: 0; padding: 0; width: 400px; height: 0; background: #FFF; box-shadow: 0 0 0 1px rgba(0 0 0/15%); opacity: 0; transition: all .2s;}
.type_guide .btn .body ul{}
.type_guide .btn .body ul li{}
.type_guide .btn .body ul li a{ display: flex; align-items: center; position: relative; padding: 0 50px; height: 0; font-size: 26px; color: #000; white-space: nowrap; opacity: 0; transition: all .2s;}
.type_guide .btn .body ul li a:hover{ background: #f9f9f9;}
.type_guide .btn:hover .head i{ transform: rotate(180deg);}
.type_guide .btn:hover .body{ top: 90px; padding: 20px 0; height: auto; opacity: 1;}
.type_guide .btn:hover .body li a{ height: 60px; opacity: 1;}
.type_guide .btn .body ul li.on a{ font-weight: 800;}
.type_guide .btn .body ul li.on a:before{ content: ""; position: absolute; top: 0; left: -1px; width: 5px; height: 60px; background: #000;}
.type_guide .txt{ margin: 40px 0 0 0; font-size: 30px; color: #000;}
.type_guide.tac{ justify-content: center; align-items: center;}
.type_guide.tac .btn .head p{ margin: 0;}
@media(max-width: 1501px){
}
@media(max-width: 1025px){
}
@media(max-width: 769px){
    .type_guide{ padding: 110px 0 40px 0;}
    .type_guide .tit{ padding: 0 0 10px 0; font-size: 18px;}
    .type_guide .btn .head p{ margin: 0 10px 0 0; font-size: 30px;}
    .type_guide .btn .head i{ padding: 0 0 0 0; width: 35px; height: 35px; font-size: 12px;}
    .type_guide .btn .body{ top: 20px; width: 300px;}
    .type_guide .btn .body ul li a{ padding: 0 30px; font-size: 18px;}
    .type_guide .btn:hover .head i{ transform: rotate(180deg);}
    .type_guide .btn:hover .body{ top: 45px; padding: 15px 0; height: auto; opacity: 1;}
    .type_guide .btn:hover .body li a{ height: 45px; opacity: 1;}
    .type_guide .btn .body ul li.on a:before{ height: 45px;}
    .type_guide .txt{ margin: 40px 0 0 0; font-size: 30px; color: #000;}
    .type_guide.tac{ justify-content: center; align-items: center;}
    .type_guide.tac .btn .head p{ margin: 0;}
}


.sub_visual{ display: flex; align-items: center; position: relative; margin: 0 0 80px 0; height: 600px;}
.sub_visual:before{ content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0 0 0/50%);}
.sub_visual .type_row{ position: relative; z-index: 10; text-align: center;}
.sub_visual .t1{ font-size: 60px; font-weight: 700; color: #FFF;}
.sub_visual .t2{ margin: 30px 0 0 0; font-size: 26px; font-weight: 300; color: #FFF;}
@media(max-width: 1501px){
}
@media(max-width: 1025px){
}
@media(max-width: 769px){
    .sub_visual{ margin: 0 0 40px 0; height: 220px;}
    .sub_visual .t1{ font-size: 36px;}
    .sub_visual .t2{ margin: 15px 0 0 0; line-height: 1.4; font-size: 18px;}
}






.sub_duklass_intro{}
.sub_duklass_intro ul{ display: flex; margin: 0 -25px;}
.sub_duklass_intro ul li{ width: 33.333%;}
.sub_duklass_intro ul li .row{ margin: 0 25px;}
.sub_duklass_intro ul li .row .img{ display: block; width: 100%;}
.sub_duklass_intro ul li .row .info{ position: relative; margin: 30px 0 0 0;}
.sub_duklass_intro ul li .row .info .t1{ font-size: 36px; font-weight: 700; color: #000;}
.sub_duklass_intro ul li .row .info .t2{ margin: 10px 0 0 0; line-height: 1.2; font-size: 20px; color: #666;}
.sub_duklass_intro ul li .row .info img{ display: block; position: absolute; top: 0; right: 0;}
@media(max-width: 1501px){
}
@media(max-width: 1025px){
    .sub_duklass_intro ul li .row .info .t2 br{ display: none;}
}
@media(max-width: 769px){
    .sub_duklass_intro{ margin: 40px 0 0 0;}
    .sub_duklass_intro ul{ display: block; margin: 0;}
    .sub_duklass_intro ul li{ margin: 10px 0 0 0; width: auto;}
    .sub_duklass_intro ul li:first-child{ margin: 0;}
    .sub_duklass_intro ul li .row{ display: flex; align-items: center; margin: 0;}
    .sub_duklass_intro ul li .row .img{ margin: 0 20px 0 0; width: 140px; height: 140px;}
    .sub_duklass_intro ul li .row .info{ margin: 0;}
    .sub_duklass_intro ul li .row .info .t1{ font-size: 26px;}
    .sub_duklass_intro ul li .row .info .t2{ margin: 10px 0 0 0; font-size: 16px;}
    .sub_duklass_intro ul li .row .info img{ height: 16px;}
}


.sub_duklass_overview{}
.sub_duklass_overview .title{ margin: 80px 0 30px 0; padding: 0 0 30px 0; border-bottom: 2px solid #000; font-size: 36px; font-weight: 700; color: #000;}
.sub_duklass_overview .banner{ display: flex; align-items: center;}
.sub_duklass_overview .banner .fl{ width: 500px;}
.sub_duklass_overview .banner .fl .row{ margin: 40px 0 0 0; padding: 0 0 0 50px;}
.sub_duklass_overview .banner .fl .row:first-child{ margin: 0;}
.sub_duklass_overview .banner .fl .row .t1{ position: relative; font-size: 26px; font-weight: 700; color: #000;}
.sub_duklass_overview .banner .fl .row .t1:before{ content: ""; position: absolute; top: 50%; left: -20px; margin: -3px 0 0 0; width: 6px; height: 6px; border-radius: 50%; background: #000;}
.sub_duklass_overview .banner .fl .row .t2{ margin: 10px 0 0 0; line-height: 1.2; font-size: 20px; color: #666;}
.sub_duklass_overview .banner .fr{ flex: 1; width: 100%;}
.sub_duklass_overview .banner .fr img{ display: block; max-width: 100%;}
.sub_duklass_overview .type_table{ margin: 60px 0 0 0;}
.sub_duklass_overview .img{}
.sub_duklass_overview .img ul{}
.sub_duklass_overview .img ul li{ display: flex; margin: 50px 0 0 0; padding: 50px 0 0 0; border-top: 1px solid #DDD;}
.sub_duklass_overview .img ul li:first-child{ padding: 0; border-top: 0;}
.sub_duklass_overview .img ul li .tit{ width: 300px; font-size: 80px; font-weight: 700; color: #000;}
.sub_duklass_overview .img ul li .fr{ flex: 1;}
.sub_duklass_overview .img ul li .fr img{ display: block; max-width: 100%;}
.floor_plan{display:flex; gap:2rem;}
.floor_plan > div{flex:1; position:relative; overflow:hidden;}
.floor_plan > div:after{content:''; display:block; position:absolute; bottom:0; right:0; width:50px; height:50px; background-image:url('../../images/ico_zoom.png'); background-size:60%; cursor:pointer; box-sizing:border-box; background-position:center; background-repeat:no-repeat; border-radius:5px 0 0 0; background-color:rgba(0,0,0,0.8); transition:0.4s;}

.floor_plan > div img{border:1px solid #ddd; transition:0.2s;}
.img_view_box{position:fixed; width:100%; height:100%; background:rgba(0,0,0,0.5); top:0; left:0; z-index:101; overflow-y:scroll; display:none;}
.img_view_box.on{display:block;}
.img_view_box article{max-width:70%; margin:0 auto; padding:100px 0; position:relative}
.img_view_box .click_img{max-width:100%;}
.img_view_box button.close_img{text-align:right; position:absolute; top:70px; right:-30px; height:60px; width:60px; background:rgba(0,0,0,0.8); padding:15px; border-radius:50px; box-sizing:border-box; display:flex; justify-content:center; align-items:center; cursor:pointer;}
.img_view_box button.close_img img{max-width:70%;}

@media (hover: hover) {
	.floor_plan > div:hover:after{width:100%; height:100%; background-size:50px; border-radius:0}
}

@media(max-width: 1501px){
}
@media(max-width:1200px){
	.floor_plan > div:after{width:35px; height:35px}
	.sub_duklass_overview .img ul li .tit{font-size:50px}
	.sub_duklass_overview .banner .fl{ width: 200px;}
    .sub_duklass_overview .img ul li .tit{ width: 200px;}
}
@media(max-width: 1023px){
	.floor_plan{gap:1rem}
	.sub_duklass_overview .img ul li .tit{width:100px; font-size: 26px;}
	.img_view_box article{width:100%; min-height:100%;}
    
}

@media(max-width: 767px){
    .sub_duklass_overview .title{ margin: 60px 0 30px 0; padding: 0 0 15px 0; font-size: 26px;}
    .sub_duklass_overview .banner{ display: block;}
    .sub_duklass_overview .banner .fl{ width: auto;}
    .sub_duklass_overview .banner .fl .row{ margin: 20px 0 0 0; padding: 0 0 0 20px;}
    .sub_duklass_overview .banner .fl .row .t1{ font-size: 20px;}
    .sub_duklass_overview .banner .fl .row .t2{ font-size: 16px;}
    .sub_duklass_overview .banner .fr{ margin: 40px 0 0 0;}
    .sub_duklass_overview .type_table{ margin: 40px 0 0 0;}
    .sub_duklass_overview .img ul li{ margin: 40px 0 0 0; padding: 40px 0 0 0;}
	.sub_duklass_overview .img ul li .fr{flex-direction:column}
    .sub_duklass_overview .img ul li .tit{ width: 60px; }
	.img_view_box article{ position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); min-height:auto; max-width:90%;}
	.img_view_box button.close_img{width:40px; height:40px; right:0; padding:10px; border-radius:0; top:60px}
	
}


.sub_duklass_orgaization{}
.sub_duklass_orgaization .title{ display: block; margin: 80px 0 30px 0; font-size: 36px; font-weight: 700; color: #000;}
.sub_duklass_orgaization .title span{ font-weight: 200;}
.sub_duklass_orgaization .co_01{}
.sub_duklass_orgaization .co_01 .ft{ display: flex; justify-content: center;}
.sub_duklass_orgaization .co_01 .ft .row{ position: relative;}
.sub_duklass_orgaization .co_01 .ft .row .t1{ display: flex; justify-content: center; align-items: center; position: relative; z-index: 9; width: 300px; height: 80px; background: #000; font-size: 24px; font-weight: 600; color: #FFF;}
.sub_duklass_orgaization .co_01 .ft .row .t2{ margin: 10px 0 0 0; padding: 15px 0; width: 300px; border: 1px solid #DDD; text-align: center; line-height: 1.4; font-size: 16px; color: #333;}
.sub_duklass_orgaization .co_01 .ft .row:before{ content: ""; display: block; position: absolute; bottom: -40px; left: 50%; width: 1px; height: 40px; background: #CCC;}

.sub_duklass_orgaization .co_01 .fm{ padding: 80px 0 0 0;}
.sub_duklass_orgaization .co_01 .fm ul{ position: relative; display: flex; margin: 0 -10px;}
.sub_duklass_orgaization .co_01 .fm ul:before{ content: ""; display: block; position: absolute; top: -40px; right: 25%; left: 25%; height: 1px; background: #CCC;}
.sub_duklass_orgaization .co_01 .fm ul li{ display: flex; flex-direction: column; align-items: center; position: relative; margin: 0 10px; width: 50%;}
.sub_duklass_orgaization .co_01 .fm ul li:before{ content: ""; display: block; position: absolute; top: -40px; left: 50%; width: 1px; height: 40px; background: #CCC;}
.sub_duklass_orgaization .co_01 .fm ul li .t1{ display: flex; justify-content: center; align-items: center; position: relative; z-index: 9; width: 300px; height: 60px; background: #333; font-size: 18px; font-weight: 600; color: #FFF;}
.sub_duklass_orgaization .co_01 .fm ul li .t2{ margin: 10px 0 0 0; padding: 15px 0; width: 300px; border: 1px solid #DDD; text-align: center; line-height: 1.4; font-size: 16px; color: #333;}
.sub_duklass_orgaization .co_01 .fm ul li .t2:before{ content: ""; display: block; position: absolute; bottom: -40px; left: 50%; width: 1px; height: 40px; background: #CCC;}

.sub_duklass_orgaization .co_01 .fb{ padding: 80px 0 0 0;}
.sub_duklass_orgaization .co_01 .fb ul{ position: relative; display: flex; margin: 0 -10px;}
.sub_duklass_orgaization .co_01 .fb ul:before{ content: ""; display: block; position: absolute; top: -40px; right: 62.5%; left: 12.5%; height: 1px; background: #CCC;}
.sub_duklass_orgaization .co_01 .fb ul:after{ content: ""; display: block; position: absolute; top: -40px; right: 12.5%; left: 62.5%; height: 1px; background: #CCC;}
.sub_duklass_orgaization .co_01 .fb ul li{ position: relative; margin: 0 10px; width: 25%;}
.sub_duklass_orgaization .co_01 .fb ul li:before{ content: ""; display: block; position: absolute; top: -40px; left: 50%; width: 1px; height: 40px; background: #CCC;}
.sub_duklass_orgaization .co_01 .fb ul li .t3{ display: flex; justify-content: center; align-items: center; height: 50px; background: #666; text-align: center; line-height: 1.4; font-size: 16px; font-weight: 600; color: #FFF;}
.sub_duklass_orgaization .co_01 .fb ul li .t3 br{ display: none;}
.sub_duklass_orgaization .co_01 .fb ul li .t4{ margin: 10px 0 0 0; padding: 15px 0; border: 1px solid #DDD; text-align: center; line-height: 1.4; font-size: 16px; color: #333;}
@media(max-width: 1501px){
}
@media(max-width: 1025px){
    .sub_duklass_orgaization .co_01 .fb ul li .t4 span{ font-size: 12px;}
}
@media(max-width: 769px){
    .sub_duklass_orgaization .title{ margin: 60px 0 20px 0; font-size: 26px;}
    .sub_duklass_orgaization .co_01 .ft .row .t1{ width: 200px; height: 60px; font-size: 18px;}
    .sub_duklass_orgaization .co_01 .ft .row .t2{ width: 200px; font-size: 14px;}

    .sub_duklass_orgaization .co_01 .fm ul{ margin: 0 -5px;}
    .sub_duklass_orgaization .co_01 .fm ul li{ margin: 0 5px;}
    .sub_duklass_orgaization .co_01 .fm ul li .t1{ width: 100%; height: 50px; font-size: 16px;}
    .sub_duklass_orgaization .co_01 .fm ul li .t2{ width: 100%; font-size: 14px;}
    .sub_duklass_orgaization .co_01 .fm ul li .t2 span{ font-size: 12px;}

    .sub_duklass_orgaization .co_01 .fb ul{ margin: 0;}
    .sub_duklass_orgaization .co_01 .fb ul li{ margin: 0; width: 25%;}
    .sub_duklass_orgaization .co_01 .fb ul li .t3{ margin: 0 1px; height: 45px; font-size: 12px;}
    .sub_duklass_orgaization .co_01 .fb ul li .t3 br{ display: block;}
    .sub_duklass_orgaization .co_01 .fb ul li .t4{ margin: 10px 1px 0 1px; padding: 10px 5px; font-size: 12px; word-wrap: break-word;}
}


.sub_duklass_location{ display: flex; align-items: center;}
.sub_duklass_location .map{ flex: 1; height: 600px; background: #000;}
.sub_duklass_location .fr{ margin: 0 0 0 80px; width: 400px;}
.sub_duklass_location .title{}
.sub_duklass_location .title span{ font-size: 30px; font-weight: 700; color: #000;}
.sub_duklass_location .title p{ font-size: 80px; font-weight: 700; color: #000;}
.sub_duklass_location .row{ margin: 30px 0 0 0;}
.sub_duklass_location .row .t1{ margin: 0 0 10px 0; font-size: 26px; font-weight: 700; color: #000;}
.sub_duklass_location .row .t2{ line-height: 1.8; font-size: 16px; color: #666;}
.sub_duklass_location .btn{ margin: 50px 0 0 0;}
.sub_duklass_location .btn a{ display: flex; justify-content: center; align-items: center; margin: 10px 0 0 0; height: 60px; border: 1px solid #DDD;}
.sub_duklass_location .btn a img{ display: block; height: 20px;}
.sub_duklass_location .btn a p{ margin: 0 0 0 10px; width: 100px; font-size: 16px; color: #666;}
.sub_duklass_location .btn a:hover{ background: #f6f8fb;}
@media(max-width: 1501px){
}
@media(max-width: 1025px){
    .sub_duklass_location{ display: block;}
    .sub_duklass_location .map{ height: 400px;}
    .sub_duklass_location .fr{ margin: 60px 0 0 0; width: auto;}
}
@media(max-width: 769px){
    .sub_duklass_location .map{ height: 200px;}
    .sub_duklass_location .fr{ margin: 40px 0 0 0;}
    .sub_duklass_location .title span{ font-size: 18px;}
    .sub_duklass_location .title p{ font-size: 36px;}
    .sub_duklass_location .row{ margin: 30px 0 0 0;}
    .sub_duklass_location .row .t1{ font-size: 20px; }
    .sub_duklass_location .row .t2{ font-size: 16px;}
    .sub_duklass_location .btn{ margin: 30px 0 0 0;}
    .sub_duklass_location .btn a{ height: 50px;}
}




.sub_in_guide_detail{ display: flex;}
.sub_in_guide_detail .img{ display: flex; justify-content: center; align-items: center; width: 600px; background: rgba(0 0 0/3%); border: 1px solid rgba(0 0 0/5%);}
.sub_in_guide_detail .fr{ flex: 1; padding: 50px; width: 100%; border: 1px solid #DDD; border-left: 0;}
.sub_in_guide_detail .tit{ display: flex; align-items: center; line-height: 1.2; font-size: 36px; font-weight: 700; color: #000;}
.sub_in_guide_detail .info{ margin: 40px 0 0 0; padding: 40px 0 0 0; border-top: 1px solid #DDD;}
.sub_in_guide_detail .info ul{}
.sub_in_guide_detail .info ul li{ display: flex; margin: 20px 0 0 0;}
.sub_in_guide_detail .info ul li:first-child{ margin: 0;}
.sub_in_guide_detail .info ul li .i_tit{ width: 140px; line-height: 1.4; font-size: 18px; color: #666;}
.sub_in_guide_detail .info ul li .i_txt{ display: flex; align-items: center; flex: 1; width: 100%;}
.sub_in_guide_detail .info ul li .i_txt p{ line-height: 1.4; font-size: 18px; color: #000;}
.sub_in_guide_detail .info ul li .i_txt a{ line-height: 1.4; font-size: 18px; color: #2c8dfb; text-decoration: underline;}
@media(max-width: 1501px){
}
@media(max-width: 1025px){
    .sub_in_guide_detail{ display: block;}
    .sub_in_guide_detail .img{ width: auto; height: 300px;}
    .sub_in_guide_detail .fr{ border-top: 0; border-left: 1px solid #DDD;}
}
@media(max-width: 769px){
    .sub_in_guide_detail .img{ height: 160px;}
    .sub_in_guide_detail .img img{ display: block; max-width: 50%; max-height: 30%;}
    .sub_in_guide_detail .fr{ padding: 30px;}
    .sub_in_guide_detail .tit{ font-size: 22px;}
    .sub_in_guide_detail .info{ margin: 30px 0 0 0; padding: 30px 0 0 0;}
    .sub_in_guide_detail .info ul li{ margin: 10px 0 0 0;}
    .sub_in_guide_detail .info ul li .i_tit{ width: 80px; font-size: 16px;}
    .sub_in_guide_detail .info ul li .i_txt p{ font-size: 16px;}
    .sub_in_guide_detail .info ul li .i_txt a{ font-size: 16px;}
}


.sub_in_live{ margin: 80px 0 0 0;}
.sub_in_live > ul{}
.sub_in_live > ul > li{}
.sub_in_live > ul > li > .row{ display: flex; padding: 50px 0; border-top: 1px solid #DDD;}
.sub_in_live > ul > li:first-child > .row{ padding-top: 0; border-top: 0;}
.sub_in_live > ul > li:last-child > .row{ padding-bottom: 0;}
.sub_in_live > ul > li > .row .head{ width: 200px;}
.sub_in_live > ul > li > .row .head p{ font-size: 80px; font-weight: 700; color: #000;}
.sub_in_live > ul > li > .row .list{ flex: 1;}
.sub_in_live > ul > li > .row .list ul{ display: flex; flex-wrap: wrap; padding: 1px 0 0 1px;}
.sub_in_live > ul > li > .row .list ul li{ width: 20%;}
.sub_in_live > ul > li > .row .list ul li .row{ position: relative; padding: 40px 30px; height: 100%;}
.sub_in_live > ul > li > .row .list ul li .row:hover{ background: #f6f8fb;}
.sub_in_live > ul > li > .row .list ul li .row:before{ content: ""; position: absolute; top: -1px; right: 0; bottom: 0; left: -1px; border: 1px solid #DDD;}
.sub_in_live > ul > li > .row .list ul li .row .t1{ font-size: 16px; color: #666;}
.sub_in_live > ul > li > .row .list ul li .row .t2{ margin: 15px 0 0 0; line-height: 1.2; font-size: 20px; font-weight: 500; color: #000; word-break: break-all;}
@media(max-width: 1501px){
}
@media(max-width: 1025px){
    .sub_in_live > ul > li > .row .list ul li{ width: 33.333%;}
}
@media(max-width: 769px){
    .sub_in_live{ margin: 40px 0 0 0;}
    .sub_in_live > ul > li > .row{ padding: 40px 0;}
    .sub_in_live > ul > li > .row .head{ width: 80px;}
    .sub_in_live > ul > li > .row .head p{ font-size: 36px;}
    .sub_in_live > ul > li > .row .list ul li{ width: 50%;}
    .sub_in_live > ul > li > .row .list ul li .row{ padding: 20px 15px;}
    .sub_in_live > ul > li > .row .list ul li .row .t1{ font-size: 12px;}
    .sub_in_live > ul > li > .row .list ul li .row .t2{ margin: 10px 0 0 0; font-size: 16px;}
}




.sub_room_guide{}
.sub_room_guide .title{ margin: 80px 0 30px 0; font-size: 36px; font-weight: 700; color: #000;}
.sub_room_guide .text{ margin: 20px 0 0 0; text-align: right; font-size: 18px; color: #666;}

.sub_room_guide .room_list{}
.sub_room_guide .room_list ul{ display: flex; flex-wrap: wrap; margin: 0 -15px;}
.sub_room_guide .room_list ul li{ width: 33.333%;}
.sub_room_guide .room_list ul li .row{ margin: 0 15px;}
.sub_room_guide .room_list ul li .row .img{}
.sub_room_guide .room_list ul li .row .img img{ display: block; width: 100%;}
.sub_room_guide .room_list ul li .row .info{ display: flex; align-items: center; margin: 20px 0 0 0;}
.sub_room_guide .room_list ul li .row .info .fl{ display: flex; justify-content: center; align-items: center; margin: 0 15px 0 0; width: 60px; height: 70px; border: 1px solid #DDD; font-size: 20px; font-weight: 500; color: #000;}
.sub_room_guide .room_list ul li .row .info .fr{}
.sub_room_guide .room_list ul li .row .info .fr .t1{ font-size: 24px; font-weight: 700; color: #000;}
.sub_room_guide .room_list ul li .row .info .fr .t2{ margin: 10px 0 0 0; font-size: 18px; color: #666;}

.sub_room_guide .room_step{}
.sub_room_guide .room_step .ft{ padding: 50px 0; border-top: 2px solid #000;}
.sub_room_guide .room_step .ft ul{ display: flex;}
.sub_room_guide .room_step .ft ul li{ width: 25%;}
.sub_room_guide .room_step .ft ul li .row{ position: relative; text-align: center;}
.sub_room_guide .room_step .ft ul li .row .t1{ font-size: 16px; color: #999;}
.sub_room_guide .room_step .ft ul li .row .t2{ margin: 15px 0 0 0; font-size: 24px; font-weight: 700;}
.sub_room_guide .room_step .ft ul li .row i{ display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; right: -20px; margin: -20px 0 0 0; width: 40px; height: 40px; font-size: 20px; color: #CCC;}
.sub_room_guide .room_step .fb{ display: flex; flex-direction: column; align-items: center; padding: 50px; background: #f6f8fb;}
.sub_room_guide .room_step .fb ol{ margin: -10px 0 0 0; width: 100%;}
.sub_room_guide .room_step .fb ol li{ display: flex; margin: 10px 0 0 0; line-height: 1.6; font-size: 16px; color: #000;}
.sub_room_guide .room_step .fb ol li span{ width: 30px; font-weight: 700;}
.sub_room_guide .room_step .fb ol li p{ flex: 1;}
.sub_room_guide .room_step .fb .tip{ display: block;}
.sub_room_guide .room_step .fb .tip b{ font-weight: 500; color: #F00;}
.sub_room_guide .room_step .fb .btn{ display: flex; justify-content: center; align-items: center; margin: 40px 0 0 0; padding: 0 40px; height: 60px; background: #000; cursor: pointer;}
.sub_room_guide .room_step .fb .btn p{ font-size: 18px; color: #FFF;}
.sub_room_guide .room_step .fb .btn i{ margin: 0 0 0 10px; font-size: 18px; color: #FFF;}

.sub_room_guide .foot{ margin: 20px 0 0 0; padding: 50px; background: #f6f8fb;}
.sub_room_guide .foot .t1{ display: flex; align-items: center; margin: 0 0 10px 0; font-size: 20px; font-weight: 700; color: #000;}
.sub_room_guide .foot .t1 i{ margin: 0 5px 0 0; font-size: 30px; color: #000;}
.sub_room_guide .foot .t2{ position: relative; padding: 6px 0 6px 35px; line-height: 1.4; font-size: 16px; color: #333;}
.sub_room_guide .foot .t2:before{ content: ""; display: block; position: absolute; top: 15px; left: 14px; width: 4px; height: 4px; border-radius: 50%; background: rgba(0 0 0/30%);}
@media(max-width: 1501px){
}
@media(max-width: 1025px){
    .sub_room_guide .room_list ul{ margin: 0 -5px;}
    .sub_room_guide .room_list ul li .row{ margin: 0 5px;}
    .sub_room_guide .room_list ul li .row .info .fl{ margin: 0 10px 0 0; width: 50px; font-size: 18px;}
    .sub_room_guide .room_list ul li .row .info .fr .t1{ font-size: 20px;}
    .sub_room_guide .room_list ul li .row .info .fr .t2{ font-size: 16px;}
    .sub_room_guide .room_step .ft ul li .row .t2{ font-size: 20px;}
}
@media(max-width: 769px){
    .sub_room_guide .title{ margin: 60px 0 20px 0; line-height: 1.2; font-size: 26px;}
    .sub_room_guide .text{ margin: 15px 0 0 0; line-height: 1.2; font-size: 14px;}

    .sub_room_guide .room_list ul{ display: block; margin: 0;}
    .sub_room_guide .room_list ul li{ margin: 10px 0 0 0; width: auto;}
    .sub_room_guide .room_list ul li:first-child{ margin: 0;}
    .sub_room_guide .room_list ul li .row{ display: flex; align-items: center; margin: 0;}
    .sub_room_guide .room_list ul li .row .img{ width: 110px;}
    .sub_room_guide .room_list ul li .row .info{ flex: 1; margin: 0 0 0 15px;}
    .sub_room_guide .room_list ul li .row .info .fl{ margin: 0 10px 0 0; width: 45px; height: 60px; font-size: 14px;}
    .sub_room_guide .room_list ul li .row .info .fr{ flex: 1;}
    .sub_room_guide .room_list ul li .row .info .fr .t1{ font-size: 20px;}
    .sub_room_guide .room_list ul li .row .info .fr .t2{ font-size: 16px;}

    .sub_room_guide .room_step .ft{ padding: 0 0 30px 0;}
    .sub_room_guide .room_step .ft ul{ flex-wrap: wrap;}
    .sub_room_guide .room_step .ft ul li{ margin: 30px 0 0 0; width: 50%;}
    .sub_room_guide .room_step .ft ul li .row .t1{ font-size: 14px;}
    .sub_room_guide .room_step .ft ul li .row .t2{ margin: 5px 0 0 0; font-size: 20px;}
    .sub_room_guide .room_step .ft ul li .row i{ font-size: 14px;}
    .sub_room_guide .room_step .ft ul li:nth-child(2) i{ display: none;}
    .sub_room_guide .room_step .fb{ padding: 30px;}
    .sub_room_guide .room_step .fb ol{ margin: -10px 0 0 0; width: 100%;}
    .sub_room_guide .room_step .fb .btn{ margin: 30px 0 0 0; padding: 0; width: 100%; height: 50px;}
    .sub_room_guide .room_step .fb .btn p{ font-size: 16px;}
    .sub_room_guide .room_step .fb .btn i{ font-size: 16px;}

    .sub_room_guide .foot{ margin: 20px 0 0 0; padding: 30px 15px;}
    .sub_room_guide .foot .t1 i{ font-size: 24px;}
    .sub_room_guide .foot .t2{ padding: 6px 0 6px 30px;}
    .sub_room_guide .foot .t2:before{ left: 11px;}
}


.sub_room_reservation_list{}
.sub_room_reservation_list ul{ border-top: 2px solid #000;}
.sub_room_reservation_list ul li{ padding: 50px; border-bottom: 1px solid #DDD;}
.sub_room_reservation_list ul li .row{ display: flex; align-items: center; position: relative;}
.sub_room_reservation_list ul li .row .img{ margin: 0 50px 0 0; width: 400px;}
.sub_room_reservation_list ul li .row .img img{ display: block; width: 100%;}
.sub_room_reservation_list ul li .row .fr{ flex: 1;}
.sub_room_reservation_list ul li .row .fr .tit{ display: flex; align-items: center; font-size: 30px; font-weight: 700; color: #000;}
.sub_room_reservation_list ul li .row .fr .tit span{ display: flex; align-items: center; margin: 0 15px 0 0; padding: 0 15px; height: 50px; border: 1px solid #DDD; font-size: 18px; font-weight: 500;}
.sub_room_reservation_list ul li .row .fr .txt{ margin: 20px 0 0 0;}
.sub_room_reservation_list ul li .row .fr .txt p{ display: flex; margin: 10px 0 0 0; line-height: 1.4; font-size: 18px; color: #000;}
.sub_room_reservation_list ul li .row .fr .txt p span{ flex: 0 0 80px; display: block; color: #666;}
.sub_room_reservation_list ul li .row .fr .txt p font{ font-weight: 700; color: #F00;}
.sub_room_reservation_list ul li .row .fr .btn{ display: flex; justify-content: center; align-items: center; margin: 30px 0 0 0; width: 200px; height: 60px; background: #000;}
.sub_room_reservation_list ul li .row .fr .btn p{ font-size: 20px; font-weight: 500; color: #FFF;}
@media(max-width: 1501px){
}
@media(max-width: 1025px){
    .sub_room_reservation_list ul li .row{ display: block;}
    .sub_room_reservation_list ul li .row .img{ margin: 0 0 40px 0; width: auto;}
}
@media(max-width: 769px){
    .sub_room_reservation_list{}
    .sub_room_reservation_list ul li{ padding: 30px 0;}
    .sub_room_reservation_list ul li .row{}
    .sub_room_reservation_list ul li .row .img{ margin: 0 0 20px 0;}
    .sub_room_reservation_list ul li .row .fr .tit{ font-size: 26px;}
    .sub_room_reservation_list ul li .row .fr .tit span{ margin: 0 10px 0 0; padding: 0 15px; height: 40px; font-size: 16px;}
    .sub_room_reservation_list ul li .row .fr .txt{ margin: 15px 0 0 0;}
    .sub_room_reservation_list ul li .row .fr .txt p{ font-size: 16px;}
    .sub_room_reservation_list ul li .row .fr .txt p span{ flex: 0 0 70px;}
    .sub_room_reservation_list ul li .row .fr .btn{ margin: 20px 0 0 0; height: 50px;}
    .sub_room_reservation_list ul li .row .fr .btn p{ font-size: 18px;}
}


.sub_room_reservation_detail{ display: flex;}
.sub_room_reservation_detail .fl{ width: 600px;}
.sub_room_reservation_detail .fr{ flex: 1; padding: 50px; width: 100%; border: 1px solid #DDD; border-left: 0;}

.sub_room_reservation_detail .rolling{ position: relative;}
.sub_room_reservation_detail .rolling .max{ overflow: hidden; position: relative;}
.sub_room_reservation_detail .rolling .max .swiper-wrapper{}
.sub_room_reservation_detail .rolling .max .swiper-wrapper .swiper-slide{}
.sub_room_reservation_detail .rolling .max .swiper-wrapper .swiper-slide .img{}
.sub_room_reservation_detail .rolling .max .swiper-wrapper .swiper-slide .img img{ display: block; width: 100%;}

.sub_room_reservation_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;}
.sub_room_reservation_detail .rolling .max .swiper-button-prev:after{ font-size: 30px; color: #FFF; transition: all .2s;}
.sub_room_reservation_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;}
.sub_room_reservation_detail .rolling .max .swiper-button-next:after{ font-size: 30px; color: #FFF; transition: all .2s;}
.sub_room_reservation_detail .rolling:hover .max .swiper-button-prev{ opacity: 1;}
.sub_room_reservation_detail .rolling:hover .max .swiper-button-next{ opacity: 1;}

.sub_room_reservation_detail .rolling .min{ overflow: hidden; padding: 25px; border: 1px solid #DDD; border-top: 0;}
.sub_room_reservation_detail .rolling .min .swiper-wrapper{}
.sub_room_reservation_detail .rolling .min .swiper-wrapper .swiper-slide{ cursor: pointer;}
.sub_room_reservation_detail .rolling .min .swiper-wrapper .swiper-slide .img{ opacity: 0.3; filter: grayscale(50%);}
.sub_room_reservation_detail .rolling .min .swiper-wrapper .swiper-slide .img img{ display: block; width: 100%;}
.sub_room_reservation_detail .rolling .min .swiper-wrapper .swiper-slide.swiper-slide-thumb-active .img{ opacity: 1; filter: grayscale(0);}

.sub_room_reservation_detail .tit{ display: flex; align-items: center; line-height: 1.2; font-size: 36px; font-weight: 700; color: #000;}
.sub_room_reservation_detail .tit span{ display: flex; align-items: center; margin: 0 15px 0 0; padding: 0 15px; height: 50px; border: 1px solid #DDD; font-size: 18px; font-weight: 500;}
.sub_room_reservation_detail .info{ margin: 40px 0 0 0; padding: 40px 0 0 0; border-top: 1px solid #DDD;}
.sub_room_reservation_detail .info ul{}
.sub_room_reservation_detail .info ul li{ display: flex; margin: 20px 0 0 0;}
.sub_room_reservation_detail .info ul li:first-child{ margin: 0;}
.sub_room_reservation_detail .info ul li .i_tit{ width: 140px; line-height: 1.4; font-size: 18px; color: #666;}
.sub_room_reservation_detail .info ul li .i_txt{ display: flex; align-items: center; flex: 1; width: 100%;}
.sub_room_reservation_detail .info ul li .i_txt p{ line-height: 1.4; font-size: 18px; color: #000;}
.sub_room_reservation_detail .info ul li .i_txt p b{ font-weight: 700;}
.sub_room_reservation_detail .info ul li .i_price{}
.sub_room_reservation_detail .info ul li .i_price p{ display: flex; margin: 20px 0 0 0; font-size: 18px;}
.sub_room_reservation_detail .info ul li .i_price p:first-child{ margin: 0;}
.sub_room_reservation_detail .info ul li .i_price p span{ display: block; width: 80px; color: #000;}
.sub_room_reservation_detail .info ul li .i_price p font{ font-weight: 700; color: #F00;}
@media(max-width: 1501px){
}
@media(max-width: 1025px){
    .sub_room_reservation_detail{ display: block;}
    .sub_room_reservation_detail .fl{ width: auto;}
    .sub_room_reservation_detail .fr{ padding: 50px; border-top: 0; border-left: 1px solid #DDD;}
}
@media(max-width: 769px){
    .sub_room_reservation_detail .rolling .min{ padding: 15px;}
    .sub_room_reservation_detail .fr{ padding: 30px 15px;}

    .sub_room_reservation_detail .tit{ font-size: 22px;}
    .sub_room_reservation_detail .tit span{ margin: 0 10px 0 0; padding: 0 10px; height: 40px; font-size: 16px;}
    .sub_room_reservation_detail .info{ margin: 30px 0 0 0; padding: 30px 0 0 0;}
    .sub_room_reservation_detail .info ul li{ margin: 15px 0 0 0;}
    .sub_room_reservation_detail .info ul li .i_tit{ width: 100px; font-size: 16px;}
    .sub_room_reservation_detail .info ul li .i_txt p{ font-size: 16px;}
    .sub_room_reservation_detail .info ul li .i_price p{ margin: 15px 0 0 0; font-size: 16px;}
    .sub_room_reservation_detail .info ul li .i_price p span{ width: 70px;}
}


.sub_room_reservation_title{ display: flex; justify-content: space-between; align-items: center; margin: 80px 0 30px 0;}
.sub_room_reservation_title p{ line-height: 1.2; font-size: 36px; font-weight: 700; color: #000;}
.sub_room_reservation_title span{ line-height: 1.2; font-size: 16px; color: #666;}
@media(max-width: 1501px){
}
@media(max-width: 1025px){
}
@media(max-width: 769px){
    .sub_room_reservation_title{ margin: 40px 0 15px 0;}
    .sub_room_reservation_title p{ font-size: 22px;}
}


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

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

.sub_room_reservation_write .date{}
.sub_room_reservation_write .date .date_head{ display: flex; justify-content: space-between; align-items: center; padding: 0 15px; width: 300px; height: 50px; border: 1px solid #DDD;}
.sub_room_reservation_write .date .date_head p{ font-size: 16px; color: #000;}
.sub_room_reservation_write .date .date_head i{ font-size: 12px; color: #CCC;}

.sub_room_reservation_write .time{}
.sub_room_reservation_write .time .btn{ display: flex; flex-wrap: wrap; margin: -10px 0 0 -10px;}
.sub_room_reservation_write .time .btn a{ display: flex; align-items: center; margin: 10px 0 0 10px; padding: 0 30px; height: 50px; border: 1px solid #000; font-size: 16px; font-weight: 500; color: #000; cursor: pointer;}
.sub_room_reservation_write .time .btn a.on{ border-color: #000; background: #000; color: #FFF; font-weight: 500;}
.sub_room_reservation_write .time .btn a.off{ border-color: #DDD; background: #FFF; color: #999; font-weight: 300; cursor: initial;}
.sub_room_reservation_write .time .info{ display: flex; margin: 20px 0 0 0;}
.sub_room_reservation_write .time .info p{ display: flex; align-items: center; margin: 0 0 0 30px;}
.sub_room_reservation_write .time .info p:first-child{ margin: 0;}
.sub_room_reservation_write .time .info p span{ display: block; width: 20px; height: 20px; border: 1px solid #DDD;}
.sub_room_reservation_write .time .info p font{ padding: 0 0 0 5px; font-size: 15px; color: #000;}
.sub_room_reservation_write .time .info p:nth-child(1) span{ border-color: #000; background: #000;}
.sub_room_reservation_write .time .info p:nth-child(2) span{ border-color: #000;}

.sub_room_reservation_write .user{ display: flex; align-items: center;}
.sub_room_reservation_write .user input{ width: 80px;}
.sub_room_reservation_write .user p{ margin: 0  0 0 10px; font-size: 16px;}

.sub_room_reservation_write .pw{ display: flex; align-items: center;}
.sub_room_reservation_write .pw input{ width: 300px;}
.sub_room_reservation_write .pw p{ margin: 0  0 0 10px; font-size: 16px;}

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

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

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

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

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

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

    .sub_room_reservation_write input{ width: 100%;}
    .sub_room_reservation_write select{ width: 100% !important;}
    .sub_room_reservation_write textarea{ height: 120px; max-height: 120px; min-height: 120px;}

    .sub_room_reservation_write .date .date_head{ width: 100%;}

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

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

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

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

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

    .sub_room_reservation_write .award{ width: auto;}

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


.sub_room_reservation_foot{ margin: 40px 0 0 0; padding: 50px; background: #f6f8fb;}
.sub_room_reservation_foot .t1{ display: flex; align-items: center; margin: 0 0 10px 0; font-size: 20px; font-weight: 700; color: #000;}
.sub_room_reservation_foot .t1 i{ margin: 0 5px 0 0; font-size: 24px; color: #000;}
.sub_room_reservation_foot .t2{ position: relative; padding: 4px 0 4px 24px; line-height: 1.4; font-size: 16px; color: #333;}
.sub_room_reservation_foot .t2:before{ content: ""; display: block; position: absolute; top: 50%; left: 10px; transform: translate(0,-50%); width: 4px; height: 4px; border-radius: 50%; background: rgba(0 0 0/50%);}
.sub_room_reservation_foot .btn{ display: inline-block; margin: 0 0 0 10px; padding: 6px 15px; background: #000; cursor: pointer;}
.sub_room_reservation_foot .btn p{ display: inline-block; font-size: 14px; color: #FFF;}
.sub_room_reservation_foot .btn i{ display: inline-block; margin: 0 0 0 5px; font-size: 14px; color: #FFF;}
@media(max-width: 1501px){
}
@media(max-width: 1025px){
}
@media(max-width: 769px){
    .sub_room_reservation_foot{ margin: 30px 0 0 0; padding: 30px;}
}



















.member_login{ margin: 0 auto; max-width: 600px;}
.member_login .text{ padding: 0 0 40px 0;}
.member_login .text p{ position: relative; padding: 5px 0 5px 15px; line-height: 1.4; font-size: 16px; color: #555;}
.member_login .text p:before{ content: ""; display: block; position: absolute; top: 13px; left: 0; width: 4px; height: 4px; border-radius: 50%; background: rgba(0 0 0/50%);}
.member_login .text_ok{ text-align: center;}
.member_login .text_ok .t1{ font-size: 18px; color: #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: 60px; border-top: 1px solid #DDD;}
.member_login .body .box .form{ margin: 0 0 24px 0;}
.member_login .body .form_tit{ font-size: 15px;}
.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: 60px; height: 60px; font-size: 24px; color: #000; cursor: pointer;}
.member_login .body .form_in i.xi-eye{ display: none; color: #000;}
.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 20px; width: 100%; height: 60px; border-radius: 0; border: 1px solid #CCC; background: none; font-size: 18px; font-weight: 400; color: #000; outline:none; -webkit-appearance:none;}
.member_login .body .form_in input:focus{ border: 1px solid #000;}
.member_login .body .form_in select{ display: flex; align-items: center; margin: 0; padding: 0 50px 0 20px; width: 100%; height: 60px; border-radius: 0; border: 1px solid #CCC; background:url(/images/basic_select_icon.png) no-repeat center right 20px #FFF; background-size: 14px auto; font-size: 17px; font-weight: 400; color: #000; outline: none; -webkit-appearance: none;}
.member_login .body .form_in select:focus{ border: 1px solid #000;}
.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: 24px; height: 24px; border: 1px solid #CCC; font-size: 12px; color: #FFF;}
.member_login .body .form label p{ margin: 0 0 0 10px; font-size: 16px; color: #333;}
.member_login .body .form label.on i{ border-color: #000; background: #000;}
.member_login .body .btn{ display: flex; justify-content: center; align-items: center; height: 60px; background: #000; font-size: 20px; font-weight: 500; color: #FFF; cursor: pointer;}

.member_login .body .sub_tit{ font-size: 18px; font-weight: 700; 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: 60px; border-radius: 0; border: 1px solid #666; background: none; font-size: 18px; font-weight: 400; 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: block; margin: 20px 0 0 0; padding: 30px 0; border-radius: 0; border: 1px solid #000;}
.member_login .body .btn_join .t1{ margin: 0 0 5px 0; text-align: center; font-size: 16px; font-weight: 500; color: #000;}
.member_login .body .btn_join .t2{ display: flex; justify-content: center; align-items: center; font-size: 24px; font-weight: 700; color: #000; transition: all .3s;}
.member_login .body .btn_join .t2 i{ display: flex; justify-content: center; align-items: center; margin: 0 0 0 10px; width: 24px; height: 24px; border-radius: 50%; background: #000; font-size: 12px; color: #FFF; transition: all .3s;}
.member_login .body .btn_join:hover{ background: #f6f8fb;}

.member_login .banner{ position: relative; margin: 0 0 40px 0;}
.member_login .banner .rolling{ overflow: hidden; border-radius: 0;}
.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: #000;}
.member_login .banner .btn-next:hover i{ color: #000;}

.member_login .foot{ padding: 50px; background: #f6f8fb;}
.member_login .foot .t1{ display: flex; align-items: center; margin: 0 0 10px 0; font-size: 20px; font-weight: 700; color: #000;}
.member_login .foot .t1 i{ margin: 0 5px 0 0; font-size: 24px; color: #000;}
.member_login .foot .t2{ position: relative; padding: 4px 0 4px 24px; line-height: 1.4; font-size: 16px; 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: 1025px){
}
@media(max-width: 769px){
    .member_login .menu ul{ height: 55px;}
    .member_login .menu ul li a p{ font-size: 16px;}

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

    .member_login .text_ok .t1{ font-size: 16px;}
    .member_login .text_ok .t2{ font-size: 22px;}

    .member_login .body .box{ padding: 40px 0;}
    .member_login .body .box.my_padding{ padding: 40px 30px;}
    .member_login .body .box .form{ margin: 0 0 20px 0;}
    .member_login .body .form_tit{ font-size: 14px;}
    .member_login .body .form_in{ margin: 5px 0 0 0;}
    .member_login .body .form_in input{ padding: 0 15px; height: 50px; font-size: 16px;}
    .member_login .body .form_in select{ padding: 0 30px 0 15px; height: 50px; font-size: 16px; background: url(/images/basic_select_icon.png) no-repeat center right 15px #FFF; background-size: 12px auto;}
    .member_login .body .form_in i{ width: 50px; height: 50px; font-size: 20px;}
    .member_login .body .form label i{ width: 24px; height: 24px;}
    .member_login .body .btn{ height: 50px; font-size: 18px;}
    .member_login .body .sub_tit{ font-size: 16px;}
    .member_login .body .btn_id{ margin: 15px 0 0 0;}
    .member_login .body .btn_id a{ height: 50px; font-size: 16px;}
    .member_login .body .btn_join{ margin: 15px 0 0 0; padding: 15px 0;}
    .member_login .body .btn_join .t1{ font-size: 14px;}
    .member_login .body .btn_join .t2{ font-size: 18px;}
    .member_login .body .btn_join .t2 i{ width: 20px; height: 20px; font-size: 10px;}

    .member_login .foot{ padding: 30px 20px;}
    .member_login .foot .t1 i{ font-size: 20px;}
    .member_login .foot .t1{ margin: 0 0 5px 0; font-size: 18px;}
    .member_login .foot .t2{ font-size: 14px;}

    .member_login .banner .btn-prev{ display: none;}
    .member_login .banner .btn-next{ display: none;}
}


.member_join{}
.member_join .step{}
.member_join .step ul{ display: flex; justify-content: center; position: relative; border: 1px solid #DDD;}
.member_join .step ul li{ display: flex; flex-direction: column; align-items: center; position: relative; padding: 60px 0; width: 33.333%; opacity: 0.2;}
.member_join .step ul li .t1{ font-size: 16px; color: #666;}
.member_join .step ul li .t2{ margin: 10px 0 0 0; font-size: 26px; font-weight: 700; color: #000;}
.member_join .step ul li .right{ display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; right: -20px; margin: -20px 0 0 0; width: 40px; height: 40px;}
.member_join .step ul li .right i{ font-size: 20px; color: #000;}
.member_join .step ul li.on{ opacity: 1;}

.member_join .title{ margin: 60px 0 0 0; text-align: center; line-height: 1.2; font-size: 26px; font-weight: 700; color: #000;}
.member_join .text{ padding: 10px 0 0 0;}
.member_join .text p{ position: relative; padding: 5px 0 5px 15px; line-height: 1.4; font-size: 16px; color: #555;}
.member_join .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_join .foot{ margin: 60px 0 0 0; padding: 50px; background: #f6f8fb;}
.member_join .foot .t1{ display: flex; align-items: center; margin: 0 0 10px 0; font-size: 20px; font-weight: 700; color: #000;}
.member_join .foot .t1 i{ margin: 0 5px 0 0; font-size: 24px; color: #000;}
.member_join .foot .t2{ position: relative; padding: 4px 0 4px 24px; line-height: 1.4; font-size: 16px; color: #333;}
.member_join .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%);}

.member_join .join_terms{ margin: 60px 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: 30px; height: 30px; border: 1px solid #CCC; font-size: 14px; color: #CCC;}
.member_join .join_terms .all_btn p{ font-size: 26px; font-weight: 700; color: #000;}
.member_join .join_terms .all_btn.on i{ border-color: #000; background: #000; color: #FFF;}
.member_join .join_terms .list{ margin: 30px 0 0 0; padding: 20px 0; border-top: 2px solid #000; 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: 10px 30px;}
.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: 24px; height: 24px; border: 1px solid #CCC; background: #FFF; font-size: 12px; color: #CCC;}
.member_join .join_terms .list ul li .check p{ font-size: 18px; font-weight: 400; color: #000;}
.member_join .join_terms .list ul li .check.on i{ border-color: #000; background: #000; color: #FFF;}
.member_join .join_terms .list ul li .btn{ display: flex; justify-content: center; align-items: center; padding: 0 20px; height: 40px; border: 1px solid #DDD; background: #FFF; font-size: 14px; color: #000; cursor: pointer;}
.member_join .join_terms .list ul li .btn:hover{ border-color: #000; color: #000;}
.member_join .join_terms .list ul li:hover{ background: #f6f8fb;}

.member_join .join_ok{ display: flex; flex-direction: column; justify-content: center; align-items: center;}
.member_join .join_ok .ok_id{ margin: 20px 0 0 0; font-size: 20px; color: #000;}
.member_join .join_ok .ok_id span{ font-weight: 600; color: #000;}
.member_join .join_ok .text{ margin: 40px 0 0 0;}

.member_join .type_write{ margin: 60px 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 .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: 40px 0 0 0; font-size: 22px;}
    .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 .join_terms .all_btn i{ width: 24px; height: 24px; font-size: 12px;}
    .member_join .join_terms .all_btn p{ font-size: 20px;}
    .member_join .join_terms .list{ margin: 15px 0 0 0; padding: 15px 0;}
    .member_join .join_terms .list ul{}
    .member_join .join_terms .list ul li{ padding: 5px 0;}
    .member_join .join_terms .list ul li .check i{ width: 24px; height: 24px; font-size: 12px;}
    .member_join .join_terms .list ul li .check p{ font-size: 16px;}
    .member_join .join_terms .list ul li .btn{ padding: 0 15px; height: 35px; font-size: 13px;}

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

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


















.mypage_head{ display: flex; justify-content: space-between; align-items: center; padding: 50px; background: #f6f8fb;}
.mypage_head .user{ display: flex; align-items: center;}
.mypage_head .user .img{ display: flex; justify-content: center; align-items: center; width: 140px; height: 140px; border-radius: 50%; border: 1px solid rgba(0 0 0/10%); background: #FFF;}
.mypage_head .user .img img{ display: block; height: 50px; opacity: .2;}
.mypage_head .user .fr{ margin: 0 0 0  20px;}
.mypage_head .user .fr .name{ font-size: 32px; color: #000;}
.mypage_head .user .fr .name span{ font-weight: 700; color: #000;}
.mypage_head .user .fr .txt{ margin: 20px 0 0 0; font-size: 18px; color: #666;}
.mypage_head .user .fr .txt span{ font-weight: 500; color: #000;}
.mypage_head .menu{}
.mypage_head .menu .tit{ font-size: 22px; font-weight: 600; color: #000;}
.mypage_head .menu ul{ display: flex; margin: 10px 0 0 0;}
.mypage_head .menu ul li{ margin: 0 0 0 10px;}
.mypage_head .menu ul li:first-child{ margin: 0;}
.mypage_head .menu ul li a{ display: flex; justify-content: center; align-items: center; width: 200px; height: 70px; border: 1px solid rgba(0 0 0/10%); background: #FFF; transition: all .2s; cursor: pointer;}
.mypage_head .menu ul li a p{ font-size: 20px; font-weight: 500; color: #000;}
.mypage_head .menu ul li a:hover{ border-color: #000;}
@media(max-width: 1501px){
    .mypage_head{ display: block;}
    .mypage_head .menu{ margin: 40px 0 0 0; padding: 40px 0 0 0; border-top: 1px solid rgba(0 0 0/10%);}
}
@media(max-width: 1025px){
    .mypage_head{ padding: 40px;}
    .mypage_head .menu ul li a{ width: 180px;}
}
@media(max-width: 769px){
    .mypage_head{ padding: 30px;}
    .mypage_head .user .img{ width: 70px; height: 70px;}
    .mypage_head .user .img img{ height: 24px;}
    .mypage_head .user .fr{ margin: 0 0 0 10px;}
    .mypage_head .user .fr .name{ font-size: 20px;;}
    .mypage_head .user .fr .txt{ margin: 10px 0 0 0; font-size: 12px;}
    .mypage_head .menu{ margin: 0; padding: 0; border-top: 0;}
    .mypage_head .menu .tit{ font-size: 22px; font-weight: 600; color: #000;}
    .mypage_head .menu ul{ margin: 20px -2.5px 0 -2.5px;}
    .mypage_head .menu ul li{ margin: 0; width: 33.333%;}
    .mypage_head .menu ul li a{ margin: 0 2.5px; width: auto; height: 50px;}
    .mypage_head .menu ul li a p{ font-size: 16px;}
}


.mypage_title{ display: flex; justify-content: space-between; align-items: center; margin: 80px 0 30px 0;}
.mypage_title p{ font-size: 36px; font-weight: 700; color: #000;}
.mypage_title p font{ color: #F00;}
.mypage_title span{ font-size: 16px; color: #666;}
.mypage_title span font{ color: #F00;}
.mypage_title a{ display: flex; align-items: center; cursor: pointer;}
.mypage_title a p{ font-size: 16px; font-weight: 300; color: #999;}
.mypage_title a i{ margin: 0 0 4px 10px; font-size: 16px; color: #999;}
@media(max-width: 1501px){
}
@media(max-width: 1025px){
}
@media(max-width: 769px){
    .mypage_title{ margin: 40px 0 20px 0;}
    .mypage_title p{ font-size: 22px;}
    .mypage_title span{ font-size: 14px;}
    .mypage_title a p{ font-size: 14px;}
    .mypage_title a i{ margin: 0 0 3px 10px; font-size: 14px;}
}


.mypage_room_reservation_list{}
.mypage_room_reservation_list ul{}
.mypage_room_reservation_list ul li{ margin: 30px 0 0 0;}
.mypage_room_reservation_list ul li:first-child{ margin: 0;}
.mypage_room_reservation_list ul li .row{ display: flex; flex-wrap: wrap; border: 1px solid #DDD;}
.mypage_room_reservation_list ul li .row .room{ display: flex; align-items: center; position: relative; padding: 50px; width: 100%;}
.mypage_room_reservation_list ul li .row .room .img{ width: 300px;}
.mypage_room_reservation_list ul li .row .room .img img{ display: block; width: 100%;}
.mypage_room_reservation_list ul li .row .room .fr{ flex: 1; padding: 0 50px;}

.mypage_room_reservation_list ul li .row .room .fr .tit{ display: flex; align-items: center; font-size: 30px; font-weight: 700; color: #000;}
.mypage_room_reservation_list ul li .row .room .fr .tit span{ display: flex; align-items: center; margin: 0 15px 0 0; padding: 0 15px; height: 50px; border: 1px solid #DDD; font-size: 18px; font-weight: 500;}
.mypage_room_reservation_list ul li .row .room .fr .txt{ margin: 20px 0 0 0;}
.mypage_room_reservation_list ul li .row .room .fr .txt p{ display: flex; margin: 10px 0 0 0; line-height: 1.4; font-size: 18px; color: #000;}
.mypage_room_reservation_list ul li .row .room .fr .txt p span{ flex: 0 0 80px; display: block; color: #666;}
.mypage_room_reservation_list ul li .row .room .fr .txt p font{ font-weight: 700; color: #F00;}

.mypage_room_reservation_list ul li .row .room .btn{}
.mypage_room_reservation_list ul li .row .room .btn a{ display: flex; justify-content: center; align-items: center; margin: 10px 0; width: 140px; height: 50px; background: #000; font-size: 18px; font-weight: 500; color: #FFF; transition: all .2s;}
.mypage_room_reservation_list ul li .row .fb{ flex: 1; display: flex; justify-content: space-between; padding: 30px 50px; background: #f6f8fb;}
.mypage_room_reservation_list ul li .row .date{ display: flex;}
.mypage_room_reservation_list ul li .row .date .box{ display: flex; align-items: center; margin: 0 40px 0 0;}
.mypage_room_reservation_list ul li .row .date .box .t1{ font-size: 14px; color: #999;}
.mypage_room_reservation_list ul li .row .date .box .t2{ margin: 0 0 0 10px; font-size: 16px; font-weight: 500; color: #000;}
.mypage_room_reservation_list ul li.on .row{ border-color: #000;}
.mypage_room_reservation_list ul li.on .row .room .check{ border-color: #000; background: #000;}
.mypage_room_reservation_list ul li.on .row .room .check i{ color: #FFF;}
@media(max-width: 1501px){
}
@media(max-width: 1025px){
    .mypage_room_reservation_list ul li .row .room{ flex-wrap: wrap; position: relative; padding-bottom: 140px;}
    .mypage_room_reservation_list ul li .row .room .img{ width: 300px;}
    .mypage_room_reservation_list ul li .row .room .fr{ padding: 0 0 0 30px; width: 100%;}
    .mypage_room_reservation_list ul li .row .room .btn{ display: flex; position: absolute; right: 50px; bottom: 50px; left: 50px;}
    .mypage_room_reservation_list ul li .row .room .btn a{ width: 50%;}
    .mypage_room_reservation_list ul li .row .room .btn a:nth-child(1){ margin: 0 5px 0 0;}
    .mypage_room_reservation_list ul li .row .room .btn a:nth-child(2){ margin: 0 0 0 5px;}
}
@media(max-width: 769px){
    .mypage_room_reservation_list ul li{ margin: 15px 0 0 0;}
    .mypage_room_reservation_list ul li .row{ display: block;}
    .mypage_room_reservation_list ul li .row .room{ display: block; padding: 30px;}
    .mypage_room_reservation_list ul li .row .room .img{ width: 100%;}
    .mypage_room_reservation_list ul li .row .room .fr{ padding: 20px 0 0 0;}
    .mypage_room_reservation_list ul li .row .room .fr .tit{ font-size: 22px;}
    .mypage_room_reservation_list ul li .row .room .fr .tit span{ margin: 0 10px 0 0; padding: 0 10px; height: 40px; font-size: 16px;}
    .mypage_room_reservation_list ul li .row .room .fr .txt{ margin: 20px 0 0 0;}
    .mypage_room_reservation_list ul li .row .room .fr .txt p{ font-size: 16px;}
    .mypage_room_reservation_list ul li .row .room .fr .txt p span{ flex: 0 0 70px;}
    .mypage_room_reservation_list ul li .row .room .btn{ position: initial; margin: 20px 0 0 0;}
    .mypage_room_reservation_list ul li .row .room .btn a{ height: 45px; font-size: 16px;}
    .mypage_room_reservation_list ul li .row .fb{ padding: 20px 30px;}
    .mypage_room_reservation_list ul li .row .date{ display: block;}
    .mypage_room_reservation_list ul li .row .date .box{ margin: 10px 0 0 0;}
    .mypage_room_reservation_list ul li .row .date .box:first-child{ margin: 0;}
    .mypage_room_reservation_list ul li .row .date .box .t1{ width: 70px;}
    .mypage_room_reservation_list ul li .row .date .box .t2{ margin: 0;}
}




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



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



.type_write_ok{ display: flex; flex-direction: column; align-items: center; text-align: center;}
.type_write_ok i{ font-size: 80px; color: #F00;}
.type_write_ok .t1{ margin: 30px 0 0 0; font-size: 36px; font-weight: 700; color: #000;}
.type_write_ok .t2{ margin: 20px 0 0 0; font-size: 16px; font-weight: 300; color: #666;}
@media(max-width: 1501px){
}
@media(max-width: 1025px){
}
@media(max-width: 769px){
    .type_write_ok{ padding: 40px 0 0 0;}
    .type_write_ok i{ font-size: 60px;}
    .type_write_ok .t1{ font-size: 30px;}
    .type_write_ok .t2{ margin: 5px 0 0 0; font-size: 14px;}
}



























.type_table{ overflow: auto;}
.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 th{ padding: 0 10px; height: 60px; border-left: 1px solid #DDD; border-bottom: 1px solid #DDD; background: #f6f8fb; text-align: center; font-size: 18px; font-weight: 700; color: #000;}
.type_table table thead tr th:first-child{ border-left: 0;}
.type_table table thead tr td{ padding: 0 10px; height: 60px; border-left: 1px solid #DDD; border-bottom: 1px solid #DDD; background: #f6f8fb; text-align: center; font-size: 18px; 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: 18px; 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;}
.type_table table tbody tr td .btn{ display: flex; justify-content: center; align-items: center; margin: 0 auto; width: 35px; height: 35px; border-radius: 50%; border: 1px solid #DDD; font-size: 20px; color: #000; cursor: pointer;}
.type_table table tbody tr td .btn i{font-size:17px}
.type_table table tbody tr td .btn:hover{ background: #f6f8fb;}
.type_table table.inguide_table tbody tr td{padding:12px 0}

.type_table::-moz-scrollbar{ height: 4px; background: #FFF;}
.type_table::-moz-scrollbar-thumb{ background-color: #000; border-radius: 0;}
.type_table::-ms-scrollbar{ height: 4px; background: #FFF;}
.type_table::-ms-scrollbar-thumb{ background-color: #000; border-radius: 0;}
.type_table::-webkit-scrollbar{ height: 4px; background: #FFF;}
.type_table::-webkit-scrollbar-thumb{ background-color: #000; border-radius: 0;}
@media(max-width: 769px){
    .type_table table thead tr td{ padding: 0 5px; font-size: 16px;}
    .type_table table thead tr th{ padding: 0 5px; font-size: 16px;}
    .type_table table tbody tr th{ padding: 20px 5px; font-size: 14px;}
    .type_table table tbody tr td{ padding: 20px 5px; font-size: 14px;}
}


.type_btn{ display: flex; justify-content: center; align-items: center; margin: 80px 0 0 0;}
.type_btn a{ display: flex; align-items: center; margin: 0 5px; padding: 0 50px; height: 60px; border: 1px solid #000; font-size: 18px; font-weight: 600; color: #000; cursor: pointer;}
.type_btn a:hover{ background: rgba(0 0 0/5%);}
.type_btn a.on{ background: #000; color: #FFF;}
@media(max-width: 769px){
    .type_btn{ margin: 40px 0 0 0;}
    .type_btn a{ padding: 0 30px; height: 50px; font-size: 16px;}
}



.type_option{ display: flex; justify-content: space-between; align-items: flex-end; margin: 0 0 40px 0; padding: 30px; background: #f6f8fb;}
.type_option .fl{ display: flex;}
.type_option .fr{ display: flex;}
.type_option .fl > *:first-child{ margin: 0;}
.type_option .fr > *:first-child{ margin: 0;}
.type_option .row{ display: flex; align-items: center; margin: 0 0 0 10px;}
.type_option .row .tit{ font-size: 16px; font-weight: 700; color: #000;}
.type_option .row select{ display: flex; align-items: center; margin: 0 0 0 12px; padding: 0 50px 0 20px; width: auto; height: 50px; border-radius: 0; border: 1px solid rgba(0 0 0/20%); background:url(/images/basic_select_icon.png) no-repeat center right 16px #FFF; background-size: 12px auto; font-size: 16px; font-weight: 500; color: #000; outline: none; -webkit-appearance: none;}
.type_option .row select:focus{ border: 1px solid #000;}
.type_option .row select:first-child{ margin: 0;}

.type_option .calendar{ display: flex; align-items: center;}
.type_option .calendar .tit{ font-size: 17px; font-weight: 700; color: #000;}
.type_option .calendar .txt{ margin: 0 0 0 12px; font-size: 17px; color: #666;}

.type_option .search{ position: relative; margin: 0 0 0 10px;}
.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 50px 0 20px; width: 100%; height: 50px; border-radius: 0; border: 1px solid rgba(0 0 0/20%); background: #FFF; font-size: 16px; font-weight: 500; color: #000; outline: none; -webkit-appearance: none;}
.type_option .search input:focus{ border: 1px solid #000;}
.type_option .btn{ display: flex; justify-content: center; align-items: center; margin: 0 0 0 10px; padding: 0 30px; height: 50px; border-radius: 0; background: #000; font-size: 18px; font-weight: 600; color: #FFF; cursor: pointer;}
.type_option .btn.on{ background: #000;}
.type_option .btn.cart{ margin-left: 0; background: #FFF; border: 1px solid #000; color: #000;}
@media(max-width: 1025px){
    .type_option .fl{}
    .type_option .calendar{ display: block;}
    .type_option .calendar .tit{ margin: 8px 0 12px 0; line-height: 1;}
    .type_option .calendar .txt{ display: none; margin: 8px 0; text-align: center; line-height: 1;}
    .type_option .calendar .row{ margin: 8px 0 0 0;}
    .type_option .calendar .row select{ margin: 0 0 0 8px;}
    .type_option .calendar .row select:first-child{ margin: 0;}
}
@media(max-width: 769px){
    .type_option{ display: block; margin: 0 0 30px 0; padding: 16px 16px 24px 16px;}
    .type_option .fl{ display: block;}
    .type_option .fr{ display: block;}
    .type_option .fl > *:first-child{ margin: 8px 0 0 0;}
    .type_option .fr > *:first-child{ margin: 8px 0 0 0;}

    .type_option .row select{ padding: 0 34px 0 12px; width: 100%; height: 44px; font-size: 16px; background:url(/images/basic_select_icon.png) no-repeat center right 12px #FFF; background-size: 10px auto;}


    .type_option .search{ margin: 8px 0 0 0;}
    .type_option .search i{ width: 44px; height: 44px; font-size: 20px;}
    .type_option .search input{ padding: 0 44px 0 12px; height: 44px;}
    .type_option .btn{ margin: 8px 0 0 0; width: 100%; height: 44px;}

}


.type_info{ display: flex; justify-content: space-between; align-items: center; margin: 0 0 40px 0;}
.type_info .fl{ font-size: 22px; font-weight: 400; color: #000;}
.type_info .fl span{ margin: 0 2px 0 0; font-weight: 800; color: #F00;}
.type_info .fr{ display: flex; align-items: center;}
.type_info .fr .number{ display: flex; align-items: center;}
.type_info .fr .number .tit{ margin: 0 16px 0 0; font-size: 16px; font-weight: 700; color: #000;}
.type_info .fr .number select{ display: flex; align-items: center; margin: 0; padding: 0 20px 0 0; width: auto; height: 20px; border-radius: 0; border: 0; background:url(/images/basic_select_icon.png) no-repeat center right 0; background-size: 12px auto; line-height: 20px; font-size: 16px; font-weight: 400; color: #000; outline: none; -webkit-appearance: none;}
.type_info .fr .sort{ display: flex; align-items: center; margin: 0 0 0 24px; padding: 0 0 0 24px; border-left: 1px solid #DDD;}
.type_info .fr .sort .tit{ font-size: 16px; 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 16px; font-size: 16px; color: #666; cursor: pointer;}
.type_info .fr .sort .btn a.on{ font-weight: 700; color: #000;}
@media(max-width: 769px){
    .type_info{ margin: 0 0 30px 0;}
    .type_info .fr .number .tit{ margin: 0 8px 0 0; font-size: 15px;}
    .type_info .fr .number select{ font-size: 15px; background-size: 10px auto;}
    .type_info .fr .sort{ margin: 0 0 0 16px; padding: 0 0 0 16px;}
    .type_info .fr .sort .tit{ font-size: 15px;}
    .type_info .fr .sort .btn a{ margin: 0 0 0 12px; font-size: 15px;}
}


.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 12px; height: 40px; cursor: pointer;}
.type_page .btn i{ padding: 0 4px 2px 4px; font-size: 12px; color: #000;}
.type_page .btn p{ padding: 0 4px; font-size: 15px; color: #000;}
.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: 14px; color: #999;}
.type_page .page p{ display: flex; justify-content: center; align-items: center; padding: 0 12px; min-width: 40px; height: 40px; font-size: 15px; color: #000; cursor: pointer;}
.type_page .page p:hover{ background: rgba(0 0 0/5%);}
.type_page .page p.on{ border: 1px solid #000; background: #000 !important; color: #FFF;}
@media(max-width: 769px){
    .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; font-size: 14px;}
    .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_sub_menu{ margin: 0 0 40px 0;}
.type_sub_menu ul{ display: flex; padding: 0 0 0 1px;}
.type_sub_menu ul li{ width: 25%;}
.type_sub_menu ul li a{ display: flex; justify-content: center; align-items: center; margin: 0 0 0 -1px; height: 60px; border: 1px solid #DDD; border-radius: 0; font-size: 18px; color: #666; cursor: pointer;}
.type_sub_menu ul li a:hover{ background: #f6f8fb;}
.type_sub_menu ul li.on a{ position: relative; z-index: 10; border-color: #000; background: #000; color: #FFF; font-weight: 600;}
@media(max-width: 769px){
    .type_sub_menu{ margin: 0 0 30px 0;}
    .type_sub_menu ul li a{ height: 50px; font-size: 16px;}
}


.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: 60px; border: 1px solid rgba(0 0 0/10%); border-radius: 0; font-size: 18px; color: #666; cursor: pointer;}
.type_faq_menu a:hover{ background: #f6f8fb;}
.type_faq_menu a.on{ border-color: #000; background: #000; color: #FFF; font-weight: 600;}
@media(max-width: 769px){
    .type_faq_menu{ margin: -5px 0 30px 0;}
    .type_faq_menu a{ margin: 5px 5px 0 0; padding: 0 15px; height: 45px; font-size: 16px;}
}


.type_faq{ border-top: 2px solid #000;}
.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; align-items: center; 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: #000;}
.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: #000; 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: 769px){
    .type_faq ul li a{ padding: 20px 10px;}
    .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{ width: 80px; font-size: 16px;}
    .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{ margin: 40px 0 0 0;}
.type_notice .head{ display: flex; border-top: 1px solid #DDD; border-bottom: 2px solid #000;}
.type_notice .head li{ display: flex; justify-content: center; align-items: center; height: 64px;}
.type_notice .head li p{ font-size: 17px; 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: 16px; color: #666;}
.type_notice .body li .row .tit{ display: flex; align-items: center; padding: 0 15px;}
.type_notice .body li .row .tit a{ line-height: 30px; font-size: 18px; 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: 0; border: 1px solid #F00; background: #FFF; line-height: 20px; font-size: 12px; color: #F00;}
.type_notice .body li .row .date{ width:15%; display:flex; justify-content:center; align-items:center; font-size: 16px; font-weight: 400; color:#666;}
.type_notice .body li .row .click{ width:15%; display:flex; justify-content:center; align-items:center; font-size: 16px; 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 #000; background:#000; color:#FFF; font-weight: 600;}
.type_notice .body li .row:hover{ background: #f6f8fb;}
.type_notice .body li .row:hover .tit a{ color: #000;}
@media(max-width: 769px){
    .type_notice{ margin: 30px 0 0 0; border-top: 2px solid #000;}
    .type_notice .head{ display: none;}
    .type_notice .body{}
    .type_notice .body li .row{ padding: 24px 12px;}
    .type_notice .body li .row .number{ justify-content: flex-start; padding: 0 0 6px 0; width: 16%; font-weight: 600; color: #000;}
    .type_notice .body li .row .tit{ padding: 0 0 6px 0; width: 84%;}
    .type_notice .body li .row .user{ justify-content: flex-start; margin: 0 24px 0 0; width: auto; font-size: 15px;}
    .type_notice .body li .row .date{ justify-content: flex-start; margin: 0 24px 0 0; width: auto; font-size: 15px;}
    .type_notice .body li .row .click{ justify-content: flex-start; margin: 0 24px 0 0; width: auto; font-size: 15px;}
    .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 #8bb92c; background:#8bb92c; color: #FFF;}
@media(max-width: 769px){
    .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{ margin: 20px 0 0 0; border-radius: 15px; border: 1px solid #e5e5e5;}
.type_event ul{}
.type_event ul li{ border-top: 1px solid #e5e5e5;}
.type_event ul li:first-child{ border: 0;}
.type_event ul li a{ display: flex; align-items: center; padding: 50px;}
.type_event ul li a .img{ flex: 0 0 200px; margin: 0 50px 0 0;}
.type_event ul li a .img img{ display: block; width: 100%; height: auto; border-radius: 15px;}
.type_event ul li a .fr{ display: flex; flex-direction: column; align-items: flex-start; width: 100%;}
.type_event ul li a span{ display: block; padding: 8px 15px; border-radius: 15px; background: #666; font-size: 14px; font-weight: 300; color: #FFF;}
.type_event ul li a span.on{ background: #F00;}
.type_event ul li a .tit{ margin: 15px 0 0 0; width: 100%; line-height: 1.5; font-size: 22px; font-weight: 400; color: #000; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;}
.type_event ul li a .txt{ margin: 10px 0 0 0; width: 100%; line-height: 1.5; font-size: 14px; color: #666; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}
.type_event ul li a .date{ display: flex; align-items: center; margin: 15px 0 0 0; font-size: 14px; color: #999;}
.type_event ul li a .date i{ margin: 0 5px 0 0; font-size: 20px; color: #666;}
@media(max-width: 769px){
    .type_event ul li a{ padding: 20px;}
    .type_event ul li a .img{ flex: 0 0 120px; margin: 0 15px 0 0;}
    .type_event ul li a span{ padding: 6px 10px; font-size: 11px;}
    .type_event ul li a .tit{ font-size: 18px;}
    .type_event ul li a .txt{ font-size: 12px;}
    .type_event ul li a .date{ margin: 10px 0 0 0; font-size: 12px;}
    .type_event ul li a .date i{ font-size: 16px;}
}


.type_view{}
.type_view .head{ border-top: 1px solid #DDD;}
.type_view .head .tit{ padding: 30px 0; line-height: 1.4; font-size: 26px; font-weight: 700; color: #000;}
.type_view .head ul{ display: flex; flex-wrap: wrap; align-items: center; padding: 12px 0 24px 0; border-top: 1px solid #DDD; border-bottom: 2px solid #000;}
.type_view .head ul li{ display: flex; align-items: center; margin: 12px 36px 0 0;}
.type_view .head ul li:last-child{ margin-right: 0;}
.type_view .head ul li p{ display: block; margin: 0 12px 0 0; line-height: 1; font-size: 16px; color: #999;}
.type_view .head ul li font{ display: block; font-size: 16px; font-weight: 500; color: #000;}
.type_view .head ul li .file{ display: flex; justify-content: center; align-items: center; margin: 0 10px 0 0; padding: 0 25px; height: 50px; border-radius: 0; border: 1px solid rgba(0 0 0/20%); cursor: pointer;}
.type_view .head ul li .file:last-child{ margin: 0;}
.type_view .head ul li .file p{ margin: 0; padding: 0; border: 0; font-size: 16px; color: #000;}
.type_view .head ul li .file i{ margin: 0 0 0 10px; font-size: 18px; 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 25px; height: 50px; border-radius: 30px; border: 1px solid #666; font-size: 16px; color: #000; cursor: pointer;}
.type_view .head ul li .answer.on{ border: 1px solid #000; background: #000; color: #FFF; font-weight: 600;}
.type_view .body{ padding: 60px 40px;}
.type_view .body *{ line-height: 1.8; font-size: 18px; font-weight: 400; color: #000;}
.type_view .body iframe{ display: block; margin: 0 0 40px 0; width: 100% !important; height: 500px !important;}
.type_view .body img{ display: block; margin: 0 0 40px 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: #000;}

.type_view .page{}
.type_view .page li{ display: flex; align-content: center; margin: 16px 0 0 0; padding: 24px 24px 24px 100px; border-radius: 0; border: 1px solid #DDD;}
.type_view .page li:first-child{ margin: 0;}
.type_view .page li p{ float: left; margin: 0 0 0 -100px; width: 100px; text-align: center; line-height: 1.4; font-size: 16px; color: rgba(0 0 0/60%);}
.type_view .page li .tit{ display: flex; align-content: center; width: 100%;}
.type_view .page li .tit a{ line-height: 1.4; font-size: 18px; font-weight: 600; 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,-2px); padding: 0 10px; border-radius: 0; border: 1px solid #F00; background: #FFF; line-height: 20px; font-size: 12px; color: #F00;}
.type_view .page li:hover{ background: #f6f8fb;}
.type_view .page li:hover .tit a{ color: #000;}

.type_view.home{ margin: 0 380px 0 0;}
@media(max-width: 1025px){
    .type_view.home{ margin: 0;}
}
@media(max-width: 769px){
    .type_view .head .tit{ padding: 20px 0; font-size: 22px;}
    .type_view .head ul{ display: block; padding: 15px 0;}
    .type_view .head ul li{ flex-wrap: wrap; position: relative; margin: 10px 0 0 0; padding: 0 0 0 80px; min-height: 24px;}
    .type_view .head ul li:first-child{ margin-top: 0;}
    .type_view .head ul li > p{ position: absolute; top: 0; left: 0; margin: 0; line-height: 24px; font-size: 15px;}
    .type_view .head ul li font{ display: block; line-height: 24px; font-size: 15px;}
    .type_view .head ul li .file{ margin: 0 5px 5px 0; padding: 0 15px; height: 35px;}
    .type_view .head ul li .file:last-child{ margin: 0 5px 5px 0;}
    .type_view .head ul li .file p{ font-size: 14px;}
    .type_view .head ul li .file i{ margin: 0 0 0 10px; font-size: 14px;}
    .type_view .head ul li .answer{ margin: 0 8px 0 0; padding: 0 18px; height: 40px; font-size: 15px;}

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

    .type_view .page li{ margin: 10px 0 0 0; padding: 16px 24px 16px 80px;}
    .type_view .page li p{ margin: 0 0 0 -60px; width: 60px; text-align: left; line-height: 1.8; font-size: 15px;}
    .type_view .page li .tit a{ line-height: 1.8; font-size: 15px;}

    .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 20px 0;}
.type_write .head_tit p{ line-height: 1.2; font-size: 26px; font-weight: 700; color: #000;}
.type_write .head_tit font{ line-height: 1.2; font-size: 16px; color: #F00;}
.type_write ul{ display: flex; flex-wrap: wrap; border-top: 2px 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: 24px 40px; min-height: 99px;}
.type_write ul li .row .tit{ display: flex; align-items: center; width: 180px; line-height: 50px; font-size: 18px; font-weight: 500; color: #000;}
.type_write ul li .row .tit span{ color: #F00;}
.type_write ul li .row .txt{ margin: 10px 0 0 0; font-size: 14px; color: #F00;}
.type_write ul li .row .box{ flex: 1; width: 100%;}
.type_write ul li .row .data_text{ display: flex; align-items: center; height: 50px; font-size: 16px; font-weight: 600; color: #000;}

.type_write input[type="text"]{ display: flex; align-items: center; margin: 0; padding: 0 15px; width: 220px; height: 50px; border-radius: 0; border: 1px solid #DDD; background: #FFF; font-size: 16px; font-weight: 400; color: #000; outline: none; -webkit-appearance: none;}
.type_write input[type="text"]:focus{ border: 1px solid #000;}
.type_write select{ display: flex; align-items: center; margin: 0; padding: 0 30px 0 15px; width: 100%; height: 50px; border-radius: 0; border: 1px solid #DDD; background:url(/images/basic_select_icon.png) no-repeat center right 15px #FFF; background-size: 10px auto; font-size: 16px; font-weight: 400; color: #000; outline: none; -webkit-appearance: none;}
.type_write select:focus{ border: 1px solid #000;}
.type_write textarea{ display: block; margin: 0; padding: 15px; width: 100%; height: 200px; max-height: 200px; min-height: 200px; border-radius: 0; border: 1px solid #DDD; background: none; line-height: 1.5; font-size: 16px; color: #000; outline:none; -webkit-appearance:none;}
.type_write textarea:focus{ border: 1px solid #000;}

.type_write .check_id{ display: flex;}
.type_write .check_id .btn{ display: flex; justify-content: center; align-items: center; margin: 0 0 0 10px; width: 100px; border-radius: 0; border: 1px solid #CCC; font-size: 16px; cursor: pointer;}
.type_write .check_id .btn:hover{ background: #f6f8fb;}

.type_write .address{ display: block;}
.type_write .address .a_row{ display: flex;}
.type_write .address .a_row .btn{ display: flex; justify-content: center; align-items: center; margin: 0 0 0 10px; width: 100px; height: 50px; border-radius: 0; border: 1px solid #CCC; font-size: 16px; cursor: pointer;}
.type_write .address .a_row .btn:hover{ background: #f6f8fb;}
.type_write .address .a_row:nth-child(2) input{ margin: 10px 0 0 0; width: 100%;}
.type_write .address .a_row:nth-child(3) input{ margin: 10px 0 0 0; width: 100%;}

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

.type_write .mail{ flex: 1; display: flex; width: 600px;}
.type_write .mail input{ margin: 0 10px 0 0; width: 30%;}
.type_write .mail select{ width: 300px;}

.type_write .radio{ flex: 1; display: flex; flex-wrap: wrap;}
.type_write .radio input[type="radio"]{display:none;}
.type_write .radio label{ display: flex; align-items: center; margin: 10px 30px 0 0; cursor: pointer; position:relative;padding-left:24px;}
/* .type_write .radio label:before{content:''; width:23px; height:23px; display:block; border:1px solid #ddd;  position:absolute; left:0;} */
.type_write .radio label i{border:1px solid #ddd;  position:absolute;display:flex; left:0;justify-content: center; align-items: center; width: 24px; height: 24px; border-radius: 0; border: 1px solid #CCC; background: #FFF; font-size: 12px; color: #FFF;}
.type_write .radio input[type="radio"]:checked + label i { border-color: #000; background: #000; color: #FFF}
.type_write .radio label p{ margin: 0 0 0 10px; font-size: 16px; color: #000;}
.type_write .radio label.on i{ border-color: #000; background: #000; color: #FFF;}

.type_write .meal{ flex: 1; width: 100%;}
.type_write .meal .fl{}
.type_write .meal .fr{ margin: 15px 0 0 0; padding: 10px 30px; border-radius: 0; background: #f6f8fb;}
.type_write .meal .fr .flex{ display: flex; align-items: center; padding: 10px 0;}
.type_write .meal .fr .flex .tt{ padding: 0 20px 0 0; font-size: 16px; font-weight: 700; color: #000;}
.type_write .meal .fr .flex .radio{ margin-top: -10px;}
.type_write .meal .fr .flex .radio i{ border-radius: 4px;}

.type_write .event_time{ flex: 1; display: flex; align-items: center; margin: 0 -5px;}
.type_write .event_time > *{ margin: 0 5px;}
.type_write .event_time p{ font-size: 16px; color: #666; white-space: nowrap;}

.type_write .event_address{ flex: 1; display: flex; margin: 0 -15px;}
.type_write .event_address .flex{ display: flex; align-items: center; margin: 0 15px; width: 33.333%;}
.type_write .event_address .flex p{ margin: 0 10px 0 0; font-size: 16px; font-weight: 500; color: #000; white-space: nowrap;}
.type_write .event_address .flex input{ width: 100%;}

.type_write .tour_user{ display: flex; align-items: center;}
.type_write .tour_user .flex{ margin: 0 30px 0 0; width: 33.333%;}
.type_write .tour_user .flex:last-child{ margin: 0;}
.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;}
.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: 0; 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: #000; background: #f6f8fb;}

.type_write .tour_date{}
.type_write .tour_date .ft{ display: flex; align-items: center;}
.type_write .tour_date .fb{ display: flex; align-items: center; margin: 20px 0 0 0;}
.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: 0; 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: #000; 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: #000; 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: #000; 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: #000; background: #000; 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 .file{ display: flex; margin: 10px 0 0 0;}
.type_write .file:first-child{ margin: 0;}
.type_write .file input{ width: 100%;}
.type_write .file .btn{ display: flex; justify-content: center; align-items: center; width: 120px; height: 50px; border: 1px solid #CCC; border-left: 0; background: #fafafa; cursor: pointer;}
.type_write .file .btn p{ font-size: 16px; color: #000;}

.type_write2 .file{ display: flex; margin: 10px 0 0 0;}
.type_write2 .file:first-child{ margin: 0;}
.type_write2 .file input{ width: 100%;}
.type_write2 .file .btn{ display: flex; justify-content: center; align-items: center; width: 120px; height: 50px; border: 1px solid #CCC; border-left: 0; background: #fafafa; cursor: pointer;}
.type_write2 .file .btn p{ font-size: 16px; color: #000;}

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

.type_write .out_text{ padding: 20px 30px; border-radius: 0; background: rgba(0 0 0/4%);}
.type_write .out_text p{ position: relative; padding: 10px 0 10px 20px; line-height: 1.2; font-size: 16px; color: #000;}
.type_write .out_text p:before{ content: ""; position: absolute; top: 18px; left: 2px; width: 6px; height: 1px; background: #000;}
@media(max-width: 1025px){
    .type_write ul li .row{ padding: 20px 0; min-height: 90px;}
}
@media(max-width: 769px){
    .type_write .head_tit{ padding: 0 0 15px 0;}
    .type_write .head_tit p{ 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 15px 0; width: auto; line-height: 1; font-size: 16px; color: rgba(0 0 0/60%);}
    .type_write ul li .row .data_text{ height: auto;}

    .type_write input{ width: 100% !important; height: 45px;}
    .type_write select{ height: 45px;}
    .type_write textarea{ padding: 12px; height: 140px; max-height: 140px; min-height: 140px; font-size: 16px;}
    .type_write .file .btn{ height: 45px;}

    .type_write .event_time{ display: block; margin: -10px 0 0 0;}
    .type_write .event_time > *{ margin: 0;}
    .type_write .event_time select{ margin: 10px 0 0 0;}
    .type_write .event_time p{ padding: 10px 0 0 0;}

    .type_write .event_address{ display: block; margin: -10px 0 0 0;}
    .type_write .event_address .flex{ margin: 10px 0 0 0; width: auto;}

    .type_write .meal .fr{ padding: 10px 25px;}

    .type_write .mail{ display: block; margin: -10px 0 0 0; width: auto;}
    .type_write .mail > *{ margin: 10px 0 0 0 !important; width: 100% !important;}

    .type_write .tel{ width: auto;}

    .type_write .check{ margin: 20px 0 0 0;}
    .type_write .check .txt{ font-size: 16px;}
    .type_write .check .btn i{ width: 24px; height: 24px;}
    .type_write .check .btn p{ font-size: 16px;}
    .type_write .check span{ font-size: 16px;}

    .type_write .check_id .btn{ margin: 0 0 0 10px; font-size: 14px;}

    .type_write .address .a_row .btn{ margin: 0 0 0 10px; height: 45px; font-size: 14px;}

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

    .type_write .out_text{ padding: 20px 20px;}

}


.popup_terms{ display: flex; justify-content: center; align-items: center; position: fixed; z-index: 300; top: -100%; right: 0; bottom: 100%; left: 0;}
.popup_terms .row{ position: relative; z-index: 20; width: 600px; height: 500px; opacity: 0; transform: scale(.5); transition: opacity .5s, transform .5s;}
.popup_terms .row .xi-close{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 4; top: -20px; right: -20px; width: 40px; height: 40px; background: #000; font-size: 16px; color: #FFF; cursor: pointer; transition: all .3s;}
.popup_terms .row .scroll{ overflow: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 50px; background: #FFF; transition: all .3s;}
.popup_terms .row .scroll::-moz-scrollbar{ width: 0; background: #FFF;}
.popup_terms .row .scroll::-moz-scrollbar-thumb{ background-color: #000; border-radius: 0;}
.popup_terms .row .scroll::-ms-scrollbar{ width: 0; background: #FFF;}
.popup_terms .row .scroll::-ms-scrollbar-thumb{ background-color: #000; border-radius: 0;}
.popup_terms .row .scroll::-webkit-scrollbar{ width: 0; background: #FFF;}
.popup_terms .row .scroll::-webkit-scrollbar-thumb{ background-color: #000; border-radius: 0;}
.popup_terms .close{ position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0 0 0/0.0000001%);}
.popup_terms .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_terms .text{}
.popup_terms .text h1{ margin: 0 0 40px 0; font-size: 32px; font-weight: 800; color: #000;}
.popup_terms .text h2{ margin: 30px 0 15px 0; font-size: 20px; font-weight: 600; color: #333;}
.popup_terms .text p{ margin: 10px 0 0 0; line-height: 1.8; font-size: 16px; font-weight: 400; color: #666;}
.popup_terms .text ul{ position: relative;  margin: 10px 0 0 0;}
.popup_terms .text ul li{ position: relative; margin: 5px 0 0 0; padding: 0 0 0 10px; font-size: 16px; color: #666;}
.popup_terms .text ul li:before{ content: ""; position: absolute; left: 0; top: 7px; width: 3px; height: 3px; border-radius: 50%; background: #999;}
.popup_terms .type_btn{ margin: 40px 0 0 0;}

.popup_terms.on{ top: 0; bottom: 0;}
.popup_terms.on .row{ opacity: 1; transform: scale(1);}
.popup_terms.on .bg{ opacity: 1;}
@media(max-width: 1501px){
    .popup_terms .row{ height: 400px;}
}
@media(max-width: 1025px){
    .popup_terms .row{ height: 600px;}
}
@media(max-width: 769px){
    .popup_terms .row{ width: 320px; height: 500px;}
    .popup_terms .row .scroll{ padding: 40px;}

    .popup_terms .text h1{ font-size: 26px;}
    .popup_terms .text h2{ font-size: 18px;}
    .popup_terms .text p{ font-size: 14px;}
    .popup_terms .text ul li{font-size: 14px;}
}


.popup_privacy{ display: flex; justify-content: center; align-items: center; position: fixed; z-index: 300; top: -100%; right: 0; bottom: 100%; left: 0;}
.popup_privacy .row{ position: relative; z-index: 20; width: 600px; height: 500px; opacity: 0; transform: scale(.5); transition: opacity .5s, transform .5s;}
.popup_privacy .row .xi-close{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 4; top: -20px; right: -20px; width: 40px; height: 40px; background: #000; font-size: 16px; color: #FFF; cursor: pointer; transition: all .3s;}
.popup_privacy .row .scroll{ overflow: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 50px; background: #FFF; transition: all .3s;}
.popup_privacy .row .scroll::-moz-scrollbar{ width: 0; background: #FFF;}
.popup_privacy .row .scroll::-moz-scrollbar-thumb{ background-color: #000; border-radius: 0;}
.popup_privacy .row .scroll::-ms-scrollbar{ width: 0; background: #FFF;}
.popup_privacy .row .scroll::-ms-scrollbar-thumb{ background-color: #000; border-radius: 0;}
.popup_privacy .row .scroll::-webkit-scrollbar{ width: 0; background: #FFF;}
.popup_privacy .row .scroll::-webkit-scrollbar-thumb{ background-color: #000; border-radius: 0;}
.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 h1{ margin: 0 0 40px 0; font-size: 32px; font-weight: 800; color: #000;}
.popup_privacy .text h2{ margin: 30px 0 15px 0; font-size: 20px; font-weight: 600; color: #333;}
.popup_privacy .text p{ margin: 10px 0 0 0; line-height: 1.8; font-size: 16px; font-weight: 400; color: #666;}
.popup_privacy .text ul{ position: relative;  margin: 10px 0 0 0;}
.popup_privacy .text ul li{ position: relative; margin: 5px 0 0 0; padding: 0 0 0 10px; font-size: 16px; color: #666;}
.popup_privacy .text ul li:before{ content: ""; position: absolute; left: 0; top: 7px; width: 3px; height: 3px; border-radius: 50%; background: #999;}
.popup_privacy .type_btn{ margin: 40px 0 0 0;}

.popup_privacy.on{ top: 0; bottom: 0;}
.popup_privacy.on .row{ opacity: 1; transform: scale(1);}
.popup_privacy.on .bg{ opacity: 1;}
@media(max-width: 1501px){
    .popup_privacy .row{ height: 400px;}
}
@media(max-width: 1025px){
    .popup_privacy .row{ height: 600px;}
}
@media(max-width: 769px){
    .popup_privacy .row{ width: 320px; height: 500px;}
    .popup_privacy .row .scroll{ padding: 40px;}

    .popup_privacy .text h1{ font-size: 26px;}
    .popup_privacy .text h2{ font-size: 18px;}
    .popup_privacy .text p{ font-size: 14px;}
    .popup_privacy .text ul li{font-size: 14px;}
}


.popup_mail{ display: flex; justify-content: center; align-items: center; position: fixed; z-index: 300; top: -100%; right: 0; bottom: 100%; left: 0; padding: 20px;}
.popup_mail .row{ position: relative; z-index: 20; width: 600px; height: 500px; border-radius: 20px; opacity: 0; transform: scale(.5); transition: opacity .5s, transform .5s;}
.popup_mail .row .xi-close{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 4; top: -20px; right: -20px; width: 40px; height: 40px; background: #000; font-size: 16px; color: #FFF; cursor: pointer; transition: all .3s;}
.popup_mail .row .scroll{ overflow: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 50px; background: #FFF; transition: all .3s;}
.popup_mail .row .scroll::-moz-scrollbar{ width: 0; background: #FFF;}
.popup_mail .row .scroll::-moz-scrollbar-thumb{ background-color: #000; border-radius: 0;}
.popup_mail .row .scroll::-ms-scrollbar{ width: 0; background: #FFF;}
.popup_mail .row .scroll::-ms-scrollbar-thumb{ background-color: #000; border-radius: 0;}
.popup_mail .row .scroll::-webkit-scrollbar{ width: 0; background: #FFF;}
.popup_mail .row .scroll::-webkit-scrollbar-thumb{ background-color: #000; border-radius: 0;}
.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 h1{ position: relative; margin: 0 0 40px 0; line-height: 1; font-size: 32px; font-weight: 800; color: #000;}
.popup_mail .text p{ margin: 30px 0 0 0; line-height: 1.8; font-size: 16px; font-weight: 400; color: #000;}
.popup_mail .type_btn{ margin: 40px 0 0 0;}

.popup_mail.on{ top: 0; bottom: 0;}
.popup_mail.on .row{ opacity: 1; transform: scale(1);}
.popup_mail.on .bg{ opacity: 1;}
@media(max-width: 1501px){
    .popup_mail .row{ height: 400px;}
}
@media(max-width: 1025px){
    .popup_mail .row{ height: 600px;}
}
@media(max-width: 769px){
    .popup_mail .row{ width: 320px; height: 500px;}
    .popup_mail .row .scroll{ padding: 40px;}

    .popup_mail .text h1{ font-size: 26px;}
    .popup_mail .text p{ 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; width: 300px; 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; flex: 1;}
.popup_calendar .body p{ display: flex; justify-content: center; align-items: center; margin: 1px 0; width: 14.285%; 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{ background: #000; 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: 769px){
}