@charset "utf-8";
*{ list-style: none; margin: 0; padding: 0; border: 0; box-sizing: border-box; text-decoration: none; font-family: "Pretendard", sans-serif; font-weight: 400; line-height: 1; letter-spacing: -0.5px; color: #000;}
select::-ms-expand{ display: none;}
html{ overflow-y: scroll; width: 100%; height: 100%; background: #FFF;}
html.no_scroll{ overflow: hidden;}
body{ overflow: hidden; background: #FFF; -webkit-text-size-adjust: none;}
@media(max-width: 768px){
    html{ font-size: calc(100vw / 30);}
}


.modle_scrollbar::-webkit-scrollbar{ width: 4px; height: 4px; background: #FFF;}
.modle_scrollbar::-webkit-scrollbar-thumb{ background-color: #1E2725; border-radius: 0;}


.modle_max{ padding-right: 100px !important; padding-left: 100px !important;}
.modle_min{ margin: 0 auto; max-width: 1400px; width: 100%;}
@media(max-width: 1600px){
    .modle_max{ padding-right: 50px !important; padding-left: 50px !important;}
}
@media(max-width: 768px){
    .modle_max{ padding-right: 1.2rem !important; padding-left: 1.2rem !important;}
}


.header{ display: flex; justify-content: center; align-items: flex-end; position: absolute; z-index: 100; top: 0; right: 0; left: 0; height: 180px;}
.header:after{ content: ""; position: absolute; top: -100px; right: 0; left: 0; height: 100px; background: #1E2725; transition: all .2s;}
.header .logo{}
.header .logo img{ display: block;}
@media(max-width: 1600px){
}
@media(max-width: 768px){
    .header{ height: 8rem;}
    .header .logo{ height: 6rem;}
    .header .logo img{ height: 100%;}
}


.quick{ position: fixed; z-index: 120; right: 50px; bottom: 100px;}
.quick .scroll_top{ display: flex; flex-direction: column; justify-content: center; align-items: center; width: 60px; height: 60px; border-radius: 50%; background: #1E2725; transform: translate(120px,0); opacity: 0; transition: all .3s; cursor: pointer;}
.quick .scroll_top i{ font-size: 24px; color: #FFF;}
body.scroll .quick .scroll_top{ transform: translate(0,0); opacity: 1;}
@media(max-width: 768px){
    .quick{ right: 1.2rem; bottom: 3rem;}
    .quick .scroll_top{ width: 3rem; height: 3rem;}
    .quick .scroll_top i{ font-size: 1rem;}
}


.home_visual{ position: relative; z-index: 20; height: 100vh; background: #FFF;}
.home_visual .rolling{ overflow: hidden; position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
.home_visual .swiper-wrapper{}
.home_visual .swiper-wrapper .swiper-slide{}
.home_visual .wrap{ overflow: hidden; position: relative;}
.home_visual .wrap .head{ display: flex; flex-direction: column; justify-content: center; position: absolute; z-index: 20; top: 0; right: 0; bottom: 0; left: 0;}
.home_visual .wrap .head .modle_min{ display: flex; flex-direction: column; align-items: flex-end;}
.home_visual .wrap .head .t1{ display: flex; align-items: center; padding: 0 50px; height: 60px; border-radius: 30px; background: #d9d9d9; font-size: 24px; font-weight: 700; color: #9e4f70; opacity: 0; transform: translate(100px,0); transition: all .3s;}
.home_visual .wrap .head .t2{ margin-top: 50px; text-align: right; line-height: 1.2; font-size: 50px; font-weight: 700; color: #FFF; opacity: 0; transform: translate(100px,0); transition: all .3s;}
.home_visual .wrap .body{ position: relative; height: 100vh; background: #1E2725;}
.home_visual .wrap .body:before{ content: ""; display: block; position: absolute; z-index: 10; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0 0 0/20%);}
.home_visual .wrap .body .img{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: scale(1.2); transition: all .2s;}

.home_visual.on .wrap .head .t1{ opacity: 1; transform: translate(0,0); transition: all 1s;}
.home_visual.on .wrap .head .t2{ opacity: 1; transform: translate(0,0); transition: all 1.2s;}
.home_visual.on .wrap .head .t3{ opacity: 1; transform: translate(0,0); transition: all 1.4s;}
.home_visual.on .wrap .text .btn{ opacity: 1; transform: translate(0,0); transition: all 1.6s;}
.home_visual.on .wrap .body .img{ opacity: 1; transform: scale(1); transition: all 10s;}

.home_visual .control{}
.home_visual_prev{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 50; top: calc(50% - 35px); left: 45px; width: 70px; height: 70px; border-radius: 50%; background: rgba(255 255 255/0%); transition: all .2s; cursor: pointer;}
.home_visual_prev i{ font-size: 24px; color: rgba(255 255 255/0%);}
.home_visual_next{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 50; top: calc(50% - 35px); right: 45px; width: 70px; height: 70px; border-radius: 50%; background: rgba(255 255 255/0%); transition: all .2s; cursor: pointer;}
.home_visual_next i{ font-size: 24px; color: rgba(255 255 255/0%);}
.home_visual_page{ display: flex; justify-content: center; align-items: center; grid-gap: 10px; position: absolute; z-index: 50; right: 0; left: 0; bottom: 50px !important; width: auto !important; height: 6px;}
.home_visual_page span{ margin: 0 !important; width: 6px; height: 6px; border-radius: 4px; background: rgba(255 255 255/50%); opacity: 1; transition: all .2s;}
.home_visual_page span.swiper-pagination-bullet-active{ width: 20px; background: #FFF;}
@media(max-width: 1600px){
    .home_visual_prev{ top: calc(50% - 25px); left: 40px; width: 50px; height: 50px;}
    .home_visual_prev i{ font-size: 18px;}
    .home_visual_next{ top: calc(50% - 25px); right: 40px; width: 50px; height: 50px;}
    .home_visual_next i{ font-size: 18px;}
}
@media(max-width: 1024px){
    .home_visual .wrap .head .t2{ font-size: 40px;}
}
@media(max-width: 768px){
    .home_visual{ height: 90vh;}
    .home_visual .wrap .head .t1{ padding: 0 2rem; height: 3rem; border-radius: 3rem; font-size: 1.2rem;}
    .home_visual .wrap .head .t2{ margin-top: 2rem; font-size: 1.6rem;}

    .home_visual_prev{ top: calc(50% - 1.2rem); left: 1.2rem; width: 2.4rem; height: 2.4rem;}
    .home_visual_prev i{ font-size: 1rem;}
    .home_visual_next{ top: calc(50% - 1.2rem); right: 1.2rem; width: 2.4rem; height: 2.4rem;}
    .home_visual_next i{ font-size: 1rem;}
    .home_visual_page{ grid-gap: 0.5rem; bottom: 3rem !important; width: auto !important;}
}


.home_map{ padding-bottom: 140px; background: url(/images/map.jpg) no-repeat top left #e7e8ea;}
.home_map .map{ position: relative; margin: 0 -100px; height: 650px;}
.home_map .map a{ display: flex; align-items: center; grid-gap: 10px; position: absolute;}
.home_map .map a span{ display: flex; justify-content: center; align-items: center; position: relative; width: 25px; height: 25px;}
.home_map .map a span:before{ content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%; background: rgba(0 0 0/20%); animation: home_map_1 1s infinite;}
.home_map .map a span:after{ content: ""; display: block; width: 8px; height: 8px; border-radius: 50%; background: rgba(0 0 0/100%); transition: all .2s;}
.home_map .map a p{ font-size: 16px; color: #7f7f7f; transition: all .2s;}
.home_map .map a:hover span:after{ background: #4990a9;}
.home_map .map a:hover p{ color: #4990a9;}
.home_map .map a:nth-child(1){ top: 286px; left: 533px;}
.home_map .map a:nth-child(2){ top: 326px; left: 550px;}
.home_map .map a:nth-child(3){ flex-direction: row-reverse; top: 393px; left: 328px;}
.home_map .map a:nth-child(4){ flex-direction: row-reverse; top: 454px; left: 348px;}
.home_map .map a:nth-child(5){ flex-direction: row-reverse; top: 527px; left: 398px;}
.home_map .rolling{ position: relative; z-index: 10; padding-left: 50%;}
.home_map .fl{ display: flex; flex-direction: column; justify-content: center; position: absolute; top: 0; right: 50%; bottom: 0; left: 0;}
.home_map .fl .tit{ padding-bottom: 30px; font-size: 24px; font-weight: 500; color: #9e4f70;}
.home_map .fl .home_map_page{ display: block; width: auto;}
.home_map .fl .home_map_page span{ display: flex; align-items: flex-end; margin: 0 !important; width: auto; height: auto; border-radius: 0; background: none; opacity: 1;}
.home_map .fl .home_map_page span:before{ display: block; padding: 15px 0; font-size: 64px; font-weight: 700; color: #a2a2a2;}
.home_map .fl .home_map_page span:after{ display: block; margin-left: 10px; padding: 18px 0; font-size: 24px; color: #a2a2a2;}
.home_map .fl .home_map_page span:nth-child(1):before{ content: "정읍 엘리스테이";}
.home_map .fl .home_map_page span:nth-child(2):before{ content: "보령 엘리스테이";}
.home_map .fl .home_map_page span:nth-child(3):before{ content: "여수 엘리스테이";}
.home_map .fl .home_map_page span:nth-child(4):before{ content: "원주 엘리스테이";}
.home_map .fl .home_map_page span:nth-child(4):after{ content: "(2026년 예정)";}
.home_map .fl .home_map_page span:nth-child(5):before{ content: "홍천 유리트리트";}
.home_map .fl .home_map_page span.swiper-pagination-bullet-active:before{ color: #4990a9;}
.home_map .fl .home_map_page span.swiper-pagination-bullet-active:after{ color: #4990a9;}
.home_map .fr{ position: relative; width: 100%;}
.home_map .fr .max{ overflow: hidden;}
.home_map .fr .max .swiper-wrapper{}
.home_map .fr .max .swiper-wrapper .swiper-slide{}
.home_map .fr .max .swiper-wrapper .swiper-slide .txt{ text-align: right; font-size: 24px; color: #898989;}
.home_map .fr .max .swiper-wrapper .swiper-slide .img{ position: relative; margin-top: 20px;}
.home_map .fr .max .swiper-wrapper .swiper-slide .img:after{ content: ""; display: block; padding-top: 100%;}
.home_map .fr .max .swiper-wrapper .swiper-slide .img a{ display: flex; align-items: center; position: absolute; right: 50px; bottom: 80px; padding: 0 40px; height: 50px; border-radius: 30px; border: 1px solid #FFF; font-size: 20px; font-weight: 700; color: #FFF; cursor: pointer; transition: all .2s;}
.home_map .fr .max .swiper-wrapper .swiper-slide .img a:hover{ opacity: 0.6;}
@media(max-width: 1600px){
    .home_map .map{ margin: 0 -50px;}
    .home_map .fl .home_map_page span:before{ font-size: 50px;}
    .home_map .fl .home_map_page span:after{ font-size: 20px;}
}
@media(max-width: 1024px){
    .home_map .rolling{ padding-left: 0;}
    .home_map .fl{ position: initial;}
    .home_map .fl .home_map_page span:before{ padding: 10px 0; font-size: 24px;}
    .home_map .fl .home_map_page span:after{ padding: 10px 0; font-size: 16px;}
    .home_map .fr{ margin-top: 30px;}
}
@media(max-width: 768px){
    .home_map{ padding-bottom: 5rem; background: url(/images/map.jpg) no-repeat top left #e7e8ea; background-size: 40rem auto;}
    .home_map .map{ margin: 0 -1.2rem; height: 22rem;}
    .home_map .map a{ grid-gap: 0.5rem;}
    .home_map .map a span{ width: 1.5rem; height: 1.5rem;}
    .home_map .map a span:after{ width: 0.5rem; height: 0.5rem;}
    .home_map .map a p{ font-size: 1rem;}
    .home_map .map a:nth-child(1){ top: 8.2rem; left: 15.5rem;}
    .home_map .map a:nth-child(2){ top: 9.5rem; left: 16.5rem;}
    .home_map .map a:nth-child(3){ top: 11.5rem; left: 6.2rem;}
    .home_map .map a:nth-child(4){ top: 13rem; left: 7rem;}
    .home_map .map a:nth-child(5){ top: 15.5rem; left: 8.3rem;}
    .home_map .fl .tit{ padding-bottom: 1rem; font-size: 1rem;}
    .home_map .fl .home_map_page span:before{ padding: 0.5rem 0; font-size: 2rem;}
    .home_map .fl .home_map_page span:after{ margin-left: 0.5rem; padding: 0.7rem 0; font-size: 1rem;}
    .home_map .fr .max .swiper-wrapper .swiper-slide .txt{ font-size: 1rem;}
    .home_map .fr .max .swiper-wrapper .swiper-slide .img{ margin-top: 1rem;}
    .home_map .fr .max .swiper-wrapper .swiper-slide .img a{ right: 2rem; bottom: 2rem; padding: 0 2rem; height: 3rem; border-radius: 3rem; font-size: 1.2rem;}
}
@keyframes home_map_1{
    0%   { transform: scale(.5); opacity: 0;}
    70%  { transform: scale(1); opacity: 1;}
    100%  { transform: scale(.5); opacity: 0;}
}




.home_member{ padding: 180px 0;}
.home_member .head{}
.home_member .head .t1{ font-size: 20px; color: #9e4f70; text-transform: uppercase;}
.home_member .head .t2{ margin-top: 10px; font-size: 46px; font-weight: 700; color: #000;}
.home_member .body{ display: flex; margin-top: 80px;}
.home_member .body .wrap{ width: 30%;}
.home_member .body .wrap .fb{ display: flex; margin-top: -1px;}
.home_member .body .table{ width: 100%; background: #FFF;}
.home_member .body .table table{ border-collapse: collapse; border-spacing: 0; width: 100%;}
.home_member .body .table table thead{}
.home_member .body .table table thead tr{}
.home_member .body .table table thead tr td{ padding: 25px 10px; border: 1px solid #e5e5e5; border-bottom: 2px solid #4990a9; text-align: center; font-size: 20px; font-weight: 700; color: #000;}
.home_member .body .table table thead tr td font{ font-size: 14px; font-weight: 200; color: #666;}
.home_member .body .table table tbody{}
.home_member .body .table table tbody tr{}
.home_member .body .table table tbody tr td{ padding: 15px 10px; border: 1px solid #e5e5e5; text-align: center;}
.home_member .body .table table tbody tr td p{ font-size: 16px; color: #000;}

.home_member .body .table_m{ display: none; position: relative; z-index: 1; padding: 25px 10px; border: 1px solid #e5e5e5; border-bottom: 2px solid #4990a9; background: #FFF; text-align: center; font-size: 20px; font-weight: 700; color: #000;}

.home_member .body .wrap .t1{ flex: 0 0 200px;}
.home_member .body .wrap .t1 table tbody tr td{ background: #f9f9f9;}
.home_member .body .wrap .t2{ flex: 1; margin-left: -1px;}
.home_member .body .wrap:nth-child(1){ width: 45%;}
.home_member .body .wrap:nth-child(2) .t1{ display: none;}
.home_member .body .wrap:nth-child(3) .t1{ display: none;}
@media(max-width: 1600px){
}
@media(max-width: 1024px){
    .home_member .body{ display: grid; grid-gap: 20px;}
    .home_member .body .wrap{ width: auto !important;}
    .home_member .body .wrap .t1{ display: block !important;}
    .home_member .body .table table thead{ display: none;}
    .home_member .body .table_m{ display: block;}
}
@media(max-width: 768px){
    .home_member{ padding: 5rem 0;}
    .home_member .head .t1{ font-size: 1rem;}
    .home_member .head .t2{ margin-top: 0.5rem; font-size: 2rem;}
    .home_member .body{ margin-top: 3rem; grid-gap: 1rem;}

    .home_member .body .table table thead tr td{ padding: 1.5rem 0.5rem; font-size: 1.2rem;}
    .home_member .body .table table tbody tr td{ padding: 1rem 0.5rem;}
    .home_member .body .table table tbody tr td p{ font-size: 1rem;}
    .home_member .body .table_m{ padding: 1.5rem 0.5rem; font-size: 1.2rem;}
    .home_member .body .wrap .t1{ flex: 0 0 10rem;}
}



.home_press{ position: relative; z-index: 10; padding: 180px 0; background: #f3f3f3;}
.home_press .head{}
.home_press .head .t1{ font-size: 20px; color: #9e4f70; text-transform: uppercase;}
.home_press .head .t2{ margin-top: 10px; font-size: 46px; font-weight: 700; color: #000;}
.home_press .list{ display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 50px; margin-top: 80px;}
.home_press .list a{ display: block;}
.home_press .list a .img{ position: relative;}
.home_press .list a .img:before{ content: ""; display: block; padding-top: 70%;}
.home_press .list a .img .icon{ display: block; position: absolute; top: 20px; left: 20px; height: 40px;}
.home_press .list a .tit{ margin-top: 10px; font-size: 18px; font-weight: 400; line-height:23px; color: #000; /*display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;*/ overflow: hidden;}
.home_press .list a:nth-child(1){ grid-column: 1/3; grid-row: 1/3;}
.home_press .list a:nth-child(1) .img:before{ padding-top: 78%;}
.home_press .list a:nth-child(1) .tit{ margin-top: 20px; font-size: 24px; line-height:27px; font-weight: 600; overflow: hidden;}
@media(max-width: 1600px){
}
@media(max-width: 1024px){
    .home_press .list{ grid-gap: 30px;}
}
@media(max-width: 768px){
    .home_press{ padding: 5rem 0;}
    .home_press .head .t1{ font-size: 1rem;}
    .home_press .head .t2{ margin-top: 0.5rem; font-size: 2rem;}
    .home_press .list{ grid-template-columns: repeat(2,1fr); grid-gap: 2rem 1.2rem; margin-top: 3rem;}
    .home_press .list a .img .icon{ top: 1rem; left: 1rem; height: 2.5rem;}
    .home_press .list a .tit{ margin-top: 0.5rem; font-size: 1rem;}
    .home_press .list a:nth-child(1){ grid-column: 1/3; grid-row: 1/2;}
    .home_press .list a:nth-child(1) .img:before{ padding-top: 70%;}
    .home_press .list a:nth-child(1) .tit{ margin-top: 0.8rem; font-size: 1.2rem;}
}


.home_contact{ padding: 180px 0;}
.home_contact .modle_min{ display: flex;}
.home_contact .head{ flex: 0 0 50%;}
.home_contact .head .t1{ font-size: 20px; color: #9e4f70; text-transform: uppercase;}
.home_contact .head .t2{ margin-top: 10px; font-size: 46px; font-weight: 700; color: #000;}
.home_contact .body{ display: grid; grid-gap: 30px;}
.home_contact .body .wrap{}
.home_contact .body .wrap .tit{ padding-bottom: 20px; font-size: 18px; font-weight: 700; color: #000;}
.home_contact .body .wrap input{ display: flex; align-items: center; margin: 0; padding: 0; width: 100%; height: 50px; border-radius: 0; border: 0; border-bottom: 1px solid #e5e5e5; background: #FFF; font-size: 16px; font-weight: 400; color: #000; outline: none; -webkit-appearance: none; transition: all .2s;}
.home_contact .body .wrap select{ display: flex; align-items: center; margin: 0; padding: 0 50px 0 25px; width: 100%; height: 50px; border-radius: 30px; border: 1px solid #e5e5e5; background:url(/images/modle_select_down.svg) no-repeat center right 15px #fafafa; background-size: 20px auto; font-size: 16px; font-weight: 400; color: #000; transition: all .2s;}
.home_contact .body .wrap select::-ms-expand{ display:none;}
.home_contact .body .wrap select:focus{ border-color: #57b6b2; color: #000;}
.home_contact .body .wrap textarea{ display: block; margin: 0; padding: 10px 20px; width: 100%; height: 150px; resize: none; border-radius: 0; border: 1px solid #e5e5e5; line-height: 1.6; font-size: 16px; font-weight: 400; color: #000; outline: none; -webkit-appearance: none;}

.home_contact .body .wrap .tel{ display: flex; align-items: center; grid-gap: 10px;}
.home_contact .body .wrap .tel input{ text-align: center;}
.home_contact .body .wrap .tel input:nth-child(1){ flex: 0 0 25%;}
.home_contact .body .wrap .tel p{ font-size: 12px; color: #999;}

.home_contact .body .wrap .code{ display: flex; align-items: center; grid-gap: 10px;}
.home_contact .body .wrap .code .fl{ display: flex; align-items: center; grid-gap: 10px;}
.home_contact .body .wrap .code .fl .img{ height: 60px;}
.home_contact .body .wrap .code .fl .img img{ display: block; height: 100%;}
.home_contact .body .wrap .code .fl i{ display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; border-radius: 50%; background: #dddddd; font-size: 24px; color: #FFF; cursor: pointer;}
.home_contact .body .wrap .code input{ padding: 0 15px; height: 60px; border: 1px solid #e5e5e5;}

.home_contact .body .wrap .check{ display: flex; flex-wrap: wrap; grid-gap: 10px 30px; padding: 12.5px 0;}
.home_contact .body .wrap .check label{ display: flex; align-items: center; grid-gap: 10px; cursor: pointer;}
.home_contact .body .wrap .check label i{ display: flex; justify-content: center; align-items: center; width: 25px; height: 25px; border-radius: 50%; border: 1px solid #e5e5e5; background: #fafafa; font-size: 12px; color: #fafafa;}
.home_contact .body .wrap .check label p{ font-size: 20px; font-weight: 700; color: #999;}
.home_contact .body .wrap .check label input{ max-width: 100px;}
.home_contact .body .wrap .check label.on i{ border-color: #57b6b2; background: #57b6b2; color: #FFF;}
.home_contact .body .wrap .check label.on p{ color: #000;}

.home_contact .body .button{ display: flex; justify-content: flex-end; align-items: center;}
.home_contact .body .button a{ display: flex; justify-content: center; align-items: center; margin-top: 50px; padding: 0 40px; height: 50px; background: #9e763e; font-size: 16px; font-weight: 500; color: #FFF; letter-spacing: 0; transition: all .2s; cursor: pointer;}
@media(max-width: 1600px){
}
@media(max-width: 1024px){
    .home_contact .modle_min{ display: block;}
    .home_contact .body{ margin-top: 30px;}
}
@media(max-width: 768px){
    .home_contact{ padding: 5rem 0;}
    .home_contact .head .t1{ font-size: 1rem;}
    .home_contact .head .t2{ margin-top: 0.5rem; font-size: 2rem;}
    .home_contact .body{ grid-gap: 2rem;}
    .home_contact .body .wrap .tit{ padding-bottom: 0.5rem; font-size: 1rem;}
    .home_contact .body .wrap input{ height: 3.5rem; font-size: 1.1rem;}
    .home_contact .body .wrap textarea{ padding: 1rem 1.5rem; height: 8rem; font-size: 1.1rem;}

    .home_contact .body .wrap .tel{ display: flex; align-items: center; grid-gap: 10px;}
    .home_contact .body .wrap .tel input{ text-align: center;}
    .home_contact .body .wrap .tel input:nth-child(1){ flex: 0 0 25%;}
    .home_contact .body .wrap .tel p{ font-size: 12px; color: #999;}

    .home_contact .body .wrap .code{ grid-gap: 0.5rem;}
    .home_contact .body .wrap .code .fl{ grid-gap: 0.5rem;}
    .home_contact .body .wrap .code .fl .img{ height: 2.2rem;}
    .home_contact .body .wrap .code .fl i{ width: 3.5rem; height: 3.5rem; font-size: 1.2rem;}
    .home_contact .body .wrap .code input{ padding: 0 1rem; height: 3.5rem;}

    .home_contact .body .wrap .check{ grid-gap: 0.5rem 1.5rem; padding: 0.5rem 0;}
    .home_contact .body .wrap .check label{ grid-gap: 0.5rem;}
    .home_contact .body .wrap .check label i{ width: 1.8rem; height: 1.8rem; font-size: 1rem;}
    .home_contact .body .wrap .check label p{ font-size: 1.2rem;}

    .home_contact .body .button a{ margin-top: 1rem; padding: 0; width: 100%; height: 4rem; text-align: center; font-size: 1.2rem;}
}



.modle_page{ display: flex; justify-content: center; align-items: center; margin: 60px 0 0 0;}
.modle_page .btn{ display: flex; align-items: center; grid-gap: 10px; padding: 0 12px; height: 40px; border-radius: 20px; cursor: pointer;}
.modle_page .btn i{ font-size: 12px; color: #000;}
.modle_page .btn p{ font-size: 15px; color: #000;}
.modle_page .btn:hover{ background: rgba(0 0 0/5%);}
.modle_page .page{ display: flex; align-items: center;}
.modle_page .page > * { margin: 0 2px;}
.modle_page .page span{ font-size: 14px; color: #999;}
.modle_page .page p{ display: flex; justify-content: center; align-items: center; padding: 0 12px; min-width: 40px; height: 40px; border-radius: 50%; font-size: 14px; color: #000; cursor: pointer;}
.modle_page .page p:hover{ background: rgba(0 0 0/5%);}
.modle_page .page p.on{ border: 1px solid #57b6b2; background: #57b6b2 !important; color: #FFF;}
@media(max-width: 768px){
    .modle_page{ margin: 2rem 0 0 0;}
    .modle_page .btn{ padding: 0 0.4rem; height: 2.4rem;}
    .modle_page .btn i{ padding: 0;}
    .modle_page .btn p{ font-size: 1rem;}
    .modle_page .btn:hover{ background: #FFF;}
    .modle_page .page > * { margin: 0;}
    .modle_page .page span{ font-size: 1rem;}
    .modle_page .page p{ padding: 0 0.4rem; min-width: 2.4rem; height: 2.4rem; font-size: 1rem;}
    .modle_page .page p:hover{ background: #FFF;}
}