@charset "UTF-8";

.main { position: relative; min-height: 100vh;}
.main-h2 { font-size:6.2rem; font-weight:700; line-height: 1.4; margin-bottom: 4rem; }
.main .in{width: var(--mainInWid);}

.main-quick-box { position: fixed; bottom:0; z-index:100; left: 0; right:0; font-size: var(--txt2); transition: padding 0.5s ease;}
.main-quick-box.abs {position: absolute; padding-bottom:6.4rem;}
.main-quick  { width:40%; min-width: 700px; margin:0 auto; transition: all 0.5s ease;}
.main-quick .box { display: flex; justify-content: space-between; color:#fff; fill:#fff; position: relative; border-radius:1.6rem; background-color: #A18254 ;transition: 0.3s ease-in-out; }
.main-quick .box .box1 { display: flex; flex:4; justify-content: space-between; align-items: center; width:100%;} /*height: 4em;*/
.main-quick .box a { flex:1; display: flex; align-items: center;  font-weight:600; justify-content: center; position: relative; transition: opacity 0.3s ease-in-out, background 0.3s ease-in-out; height: 100%; border-radius: 1.6rem;}
.main-quick .box a:before {content: ''; position: absolute; left: 0; top:50%; margin-top:-1.2rem; width:1px; height:2.4rem; background-color: rgba(255,255,255,0.2); ;}
.main-quick .box a:first-child:before { display: none;}
.main-quick .box a:hover{background: rgba(0,0,0,0.1);}
.main-quick .box a .img{width: 1.5em; margin-right:0.56rem; }
.main-quick .box a i svg { vertical-align: middle; height: auto;}
.main-quick .box a i svg {width:1.4em;}
.main-quick .box .box1 a:nth-child(1) i svg { width:1.05em}
.main-quick .box .last i svg { width:1.35em}
.main-quick .box .last{flex:1;}
.main-quick .box .last a { border-radius:1.6rem; background-color: #1B1C66; height: 4em; display: flex; align-items: center; transition: border-radius 0.3s ease-in-out}
.main-quick .box .last a .img{width: 1.6em;}
.main-quick .search-box { display: block; position: absolute; left: 0; bottom:4em; right:0; padding:5.6rem 12rem; background-color: #1B1C66; border-radius:1.6rem 1.6rem 0 0; opacity: 0; pointer-events: none; transition: opacity 0.3s ease-in-out}
.main-quick .search-box .tit { text-align: center; font-size:var(--lgTxt); font-weight:600; color:#fff; margin-bottom: 3rem; ;}
.main-quick .search-box .srch-box { position: relative; font-size:var(--subTxt);}
.main-quick .search-box .srch-box .inp { width:100%; height: 4em; border-radius:6rem; background-color: #fff; padding:0 7.2rem 0 3.2rem;  font-weight:500; color:#666}
.main-quick .search-box .srch-box .btn-srch { position: absolute; right:3.2rem; top:0; height: 100%; width: 1.3em; text-align: center;}
.main-quick .search-box .srch-box .btn-srch:hover { background:none;}
.main-quick .search-box .srch-box .btn-srch svg {width: 100%; height: auto; }
.main-quick .search-box .srch-box .btn-srch svg path {stroke: #1B1C66}
.main-quick.show .box .last a { border-radius:0 0 1.6rem 1.6rem;}
.main-quick.show .search-box {opacity: 1; pointer-events: auto}
.main-quick.show .box { border-radius:0 0 1.6rem 1.6rem;}
.main-quick.show.fixed-top .box .box1 { border-radius:1.6rem 1.6rem 0 0;}

/* 온라인예약 모달 추가 */
#modalReserv .modal_wrap .close_btn_box .close_btn{background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="33.535" height="33.535" viewBox="0 0 33.535 33.535"><path id="btn_close" d="M36,6,6,36M6,6,36,36" transform="translate(-4.232 -4.232)" fill="none" stroke="%23fff" stroke-width="5"/></svg>') no-repeat center / contain}
#modalReserv .modal_cont{overflow: visible; width: 40%; min-width: 700px;}
#modalReserv .modal_wrap .close_btn_box{position: absolute; top: -4rem; right: 0}
#modalReserv .modal_wrap .close_btn_box .close_btn{right: 0;}
#modalReserv .modal_cont .cont{display: flex; border-radius: 2.4rem; padding: 0}
#modalReserv .modal_cont .cont .btn_item{flex: 1; text-align: center; padding: 10rem 2rem;}
#modalReserv .modal_cont .cont .btn_item + .btn_item{border-left: 1px solid #ccc;}
#modalReserv .modal_cont .cont .btn_item .ico{width: 8rem; height: 8rem; margin: 0 auto;}
#modalReserv .modal_cont .cont .btn_item .ico img{width: 100%; height: 100%;}
#modalReserv .modal_cont .cont .btn_item .tit{font-size:var(--tit35); font-weight: 700; margin-top: 1.5rem;}
#modalReserv .modal_cont .cont .btn_item .btn{display: inline-block; margin-top:2rem; background: var(--gold); font-weight: 700; color: #fff; border-radius: 10rem; padding: 2rem 3rem; line-height: 1; transition: background 0.3s ease;}
#modalReserv .modal_cont .cont .btn_item .btn.bk{background: #1c1c1c}
#modalReserv .modal_cont .cont .btn_item .btn:hover{background: #1c1c1c}
#modalReserv .modal_cont .cont .btn_item .btn.bk:hover{background: var(--gold)}


.main .controls { display: flex; align-items: center; margin-top:2rem; }
.main .controls .swiper-pagination { position: static; flex:1; height: 0.4rem; background-color: #F2F2F2; border-radius:4px; overflow: hidden;}
.main .controls .swiper-pagination .swiper-pagination-progressbar-fill { background-color: #1C1C1C; border-radius:4px; }
.main .controls .swiper-button-prev,
.main .controls .swiper-button-next { position: static; margin:0;  width:6.4rem; height: 6.4rem; border-radius:100%; background-color: #F2F2F2; display: flex; align-items: center; justify-content: center;  transition: all 0.3s ease;}
.main .controls .swiper-button-prev:after,
.main .controls .swiper-button-next:after { display: none;}
.main .controls .swiper-button-prev svg,
.main .controls .swiper-button-next svg { width:1.6rem; height: auto; vertical-align: middle; }
.main .controls .swiper-button-prev { margin:0 1.6rem 0 0;}

.main .controls .num { display: flex; font-size:var(--subTxt); font-weight:600; color:#aaa; margin: 0 4rem; }
.main .controls .num .slash { margin:0 1.2rem; }
.main .controls .num .current,
.main .controls .num .total { flex:0 0 1.6rem; }
.main .controls .num .current { color:#1C1C1C; }


.main-visual { height: 100vh; position: relative; overflow: hidden;}
.main-visual .swiper-container { height: 100%; }
.main-visual .swiper-slide { position: relative;  height: 100%;} 
.main-visual .swiper-slide .img { position: absolute; width:100%; height: 100%; left:0; bottom:0; transform: scale(1.1); ;}
.main-visual .swiper-slide .img:before {content: ""; position: absolute; left: 0; top: 0; background: rgba(0,0,0,0.15); width: 100%; height: 100%}
.main-visual .swiper-slide .img img { height: 100%; width:100%; object-fit: cover;}
.main-visual .swiper-slide .txt-box { position: absolute; left:50%; top:40%; max-width:var(--mainInWid); padding:0 var(--inPd); transform: translate(-50%, -50%); width:100%; z-index:2; color:#fff;  }
.main-visual .swiper-slide .txt-box .tit { font-size:3.2rem; font-family:var(--en); margin-bottom: 1.28rem; transform: translateY(4rem); opacity:0; letter-spacing: -0.2px}
.main-visual .swiper-slide .txt-box .txt { font-size:7.2rem; font-weight:600; transform: translateY(4rem); opacity:0; }
.main-visual .swiper-slide.swiper-slide-active .img { transform: unset; transition: all 2s ease;}
.main-visual .swiper-slide.swiper-slide-active .txt-box .tit { transform: unset; opacity:1; transition: all 1s ease; transition-delay: 0.2s;}
.main-visual .swiper-slide.swiper-slide-active .txt-box .txt { transform: unset; opacity:1; transition: all 1.2s ease;transition-delay: 0.5s}
.main-visual .controls { display: block; position: absolute; left:0; right:0; bottom:4%; z-index:2; }
.main-visual .controls .cin {  max-width:var(--mainInWid); padding:0 var(--inPd); margin:0 auto; display: flex; align-items: center; }
.main-visual .controls .cin .paging { display: flex;  align-items: center; }
.main-visual .controls .cin .paging .num1,
.main-visual .controls .cin .paging .num2 { width:1.5em; font-size:var(--subTxt); font-weight:700; color:#fff;}
.main-visual .controls .cin .paging .bar { width:12rem; height:3px; background-color: rgba(255,255,255,0.3); position: relative;; margin:0 1.6rem; }
.main-visual .controls .cin .paging .bar em { position: absolute; left:0; top:0; width:0; height:100%; background-color: #fff; }
.main-visual .controls .swiper-pagination { position: static; width:auto; }
.main-visual .controls .play-stop { width:3.2rem; height: 3.2rem; display: flex; align-items: center; justify-content: center;  }
.main-visual .controls .play-stop .play { display: none;} 
.main-visual .controls .play-stop svg { width:1.4rem; fill:#fff;  vertical-align: middle;}
.main-visual .controls .play-stop.active .play { display: block;}
.main-visual .controls .play-stop.active .stop { display: none;}



.main-intro { height: 100vh; position: relative;; background-color: #CBB490; overflow: hidden;}
.main-intro:before {content: ''; position: absolute; left: 0; top:0; right:0; bottom:0; background: linear-gradient(165deg,rgba(191, 160, 114, 0) 9%, rgba(185, 150, 99, 0.6) 48%, rgba(179, 141, 85, 1) 95%); z-index:2;}
.main-intro .in { position: absolute; left:0; right:0; top:24rem; bottom:12rem;  display: flex; flex-direction: column; justify-content: space-between; }
.main-intro .txt-box { position: relative; z-index:10; }
.main-intro .main-h2 { color:#fff; transform: translateY(8rem); opacity:0; transition: all 1s ease; }
.main-intro .btns {  transform: translateY(8rem); opacity:0; transition: all 1s ease; transition-delay: 0.3s;}
.main-intro .btns a {display: inline-flex; align-items: center; vertical-align: middle; padding: 0 1.5em; height: 3.5em; border-radius:4em; font-size:var(--subTxt); font-weight:600; color:#fff; fill:#fff; transition: all 0.3s ease; border:1px solid #fff; }
.main-intro .btns a i {display: flex; align-items: center; margin-left: 1em}
.main-intro .btns a svg { width:0.9em; height: auto ;}

.main-intro .navs { display: flex; color:#fff; position: relative; z-index:6; }
.main-intro .navs dl { margin-right:4rem; }
.main-intro .navs dl:last-child { margin-right:4rem; }
.main-intro .navs dl dt { font-size: max(1.3vw, 3.2rem); font-weight:600; margin-bottom: 1.6rem; transform: translateY(2em); transition: all 0.5s ease;  line-height: 1.2}
.main-intro .navs dl dt br {display: none}
.main-intro .navs dl dd p { font-size:var(--subTxt); font-weight:600; opacity:0; transform: translateY(1.6rem); transition: all 0.5s ease; }
.main-intro .navs dl dd .line { height: 4px; background-color: rgba(255,255,255,0.4); position: relative; overflow: hidden; border-radius:4px; margin-top:4rem;}
.main-intro .navs dl dd .line em { position: absolute; left: 0; top:0; bottom:0;  width:0; background-color: #fff; border-radius:4px; }
.main-intro .navs dl.active dt { transform: translateY(0);}
.main-intro .navs dl.active dd p { transform: translateY(0); opacity:1; }
.main-intro .navs dl.active dd .line em { width:100%; transition:all 4s linear; }
.main-intro .earth { display: flex; justify-content: flex-end; align-items: center; margin-right:28rem; height: 100%;}
.main-intro .earth .img-box { max-width:66rem; position: relative; transform: translateZ(0) scale(0.7); opacity:0;  position: relative; z-index: 5; will-change: transform, opacity; transition: transform 1s ease, opacity 1s ease;}
.main-intro .earth .img-box .img { position: relative; z-index:2; }
.main-intro .earth .img-box .img img,
.main-intro .earth .img-box .img svg { width:66rem; height: auto; }
.main-intro .earth .img-box .circle {position: absolute;left: -52rem;top: -52rem;right: -52rem;bottom: -52rem;animation: spin 90s linear infinite;opacity: 0.25;}
.main-intro .earth .img-box .circle svg { width:170rem; height: auto; }
.main-intro .earth .img-box.active { transform: scale(1); opacity: 1;}
.main-intro .txt-box.active .main-h2 { transform: unset; opacity:1; }
.main-intro .txt-box.active .btns { transform: unset; opacity:1; }
.main-intro .navs dl { flex:1; cursor: pointer }
.main-intro .navs dl:nth-child(1) { transform: translateY(10rem); opacity:0; transition: all 1s ease; transition-delay: 0.2s;}
.main-intro .navs dl:nth-child(2) { transform: translateY(10rem); opacity:0; transition: all 1s ease; transition-delay: 0.4s;}
.main-intro .navs dl:nth-child(3) { transform: translateY(10rem); opacity:0; transition: all 1s ease; transition-delay: 0.6s;}
.main-intro .navs dl:nth-child(4) { transform: translateY(10rem); opacity:0; transition: all 1s ease; transition-delay: 0.8s;}
.main-intro .navs.active dl { transform: unset; opacity:1; }
/* 지구 영상 교체 */
.main-intro .earth .img-box video { width:66rem; height: auto;}
.main-intro .earth .img-box .circle{z-index: 2;}

@keyframes spin {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }




/* .main-service { padding:20rem 0 5rem 0; } */
.main-service { padding: 11.2rem 0;}
.main-service .main-h2 {  transform: translateY(10rem); opacity:0; transition: all 1s ease; }
.main-service .main-h2.active { transform: unset; opacity:1; }
.main-service .slider { position: relative; display: flex;  }
.main-service .slider .img{position: relative; padding-top: 50%;}
.main-service .slider .img img{position: absolute; width:100%; height:100%; top: 0; left: 0; object-fit: cover; object-position: center ;}
.main-service .slider .swiper-box { flex:1; min-width:0; transform: translateY(10rem); opacity:0; transition: all 1s ease; transition-delay: 0.3s; }
.main-service .slider .swiper-box.active {  transform: unset; opacity:1; }
.main-service .slider .swiper-slide { cursor: pointer; background-color: #F9F9F9; border-radius: 4rem; height: auto; overflow: hidden;}
.main-service .slider .swiper-slide .info {padding: 3.2rem 3.6rem;}
.main-service .slider .swiper-slide .tit { font-size: 3.6rem; font-weight: 700}
.main-service .slider .swiper-slide .txt {font-size: max(1.6rem, 19px); margin-top: 10px; font-weight: 500}
.main-service .slider .swiper-slide ul { display: flex; flex-wrap: wrap;  margin-top: 2.8rem;}
.main-service .slider .swiper-slide ul li { margin:0 1.5rem 1.5rem 0;  padding:0 1.5em; line-height:2.5em; border-radius:6rem; background-color: #fff; font-size:var(--smTxt); font-weight:500; ;}

.main-service .slider .btns { width:33.08%; transform: translateY(10rem); opacity:0; transition: all 1s ease; display: none}
.main-service .slider .btns.active { transform: unset; opacity:1; }
.main-service .slider .btns ul { }
.main-service .slider .btns ul li { margin-bottom: 0.5rem;}
.main-service .slider .btns ul li a { display: flex; justify-content: space-between; align-items: center; padding:0 6rem; height:3.5em; border-radius:2rem; background-color: #fff; font-size: var(--txt2); font-weight:600; color:#aaa; fill:#aaa; transition: all 0.3s ease;}
.main-service .slider .btns ul li a svg { width:0.8em; vertical-align: middle; }
.main-service .slider .btns ul li.active a { background-color: #BFA072; color:#fff; fill:#fff; ;}


.main-doctor { padding: 11.2rem 0 0 0; }
.main-doctor .main-h2 { margin-bottom: 5.6rem; transform: translateY(10rem); opacity:0; transition: all 1s ease;}
.main-doctor .main-h2.active { transform: unset; opacity:1; }
.main-doctor .tabs { display: flex;  margin-bottom: 4rem; transform: translateY(10rem); opacity:0; transition: all 1s ease; }
.main-doctor .tabs.active { transform: unset; opacity:1; }
.main-doctor .tabs a { margin-right:1.8rem; position: relative; padding:0 2.8em 0 1.8em; height: 2.50em; line-height: 2.5em;; border-radius:8rem; background-color: #F2F2F2; font-size:2.3rem; font-weight:600; color:rgba(102,102,102,0.5);  transition: all 0.3s ease; margin-right:4rem; }
.main-doctor .tabs a:last-child { margin-right:0; }
.main-doctor .tabs a small {position: absolute;right: 1.6rem;top: -0.8rem;transform: translate(50%,0%);font-size: var(--smTxt);color: #fff;display: inline-flex;align-items: center;justify-content: center;width: 2.6em;height: 2.6em;border-radius: 50%;background-color: #1B1C66;transition: all 0.3s ease;}
.main-doctor .tabs a.active { color:#fff; background-color: #BFA072; ; }
.main-doctor .tabs a.active small { color:#fff; }

.main-doctor .slider { transform: scaleX(0.9); transform-origin: right; transition: all 1s ease; opacity:0;}
.main-doctor .slider.active { transform: unset; opacity:1;}
.main-doctor .swiper-slide .item { display: block; overflow: hidden; border-radius:30px; overflow: hidden; position: relative;}
.main-doctor .swiper-slide .item  figure { margin:0; }
.main-doctor .swiper-slide .item  figure figcaption { position: absolute; left: 3.2rem; right:0; bottom:4rem; color:#fff; font-weight:700; z-index:2; }
.main-doctor .swiper-slide .item  figure:before { content: ''; position: absolute;left: 0; right:0; top:40%; bottom:0; background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.78) 70%, rgba(0, 0, 0, 1) 100%); opacity:0.8;}
.main-doctor .swiper-slide .item  figure figcaption small { display: block; font-size:var(--subTxt); margin-bottom: 0.8rem; }
.main-doctor .swiper-slide .item  figure figcaption strong { display: flex; align-items: center; font-size:3.2rem;  font-weight:500; }
.main-doctor .swiper-slide .item  figure figcaption strong i { width:1.5em; height: 1.5em; border-radius:100%; border:1px solid #fff; display: flex; align-items: center; justify-content: center; fill:#fff; transition: all 0.3s ease;  margin-left: 1.6rem; ;}
.main-doctor .swiper-slide .item  figure figcaption strong i svg { width:0.5em; transition: all 0.3s ease}

.main-doctor .controls { margin-top:4rem; }


.main-program { position: relative; height: 100vh; margin-top: 12.8rem; }
/* .main-program .img-box { height: 100vh;} */
.main-program .img { position: absolute; left: 0; top:0; width:100%; height: 100%; z-index:-1; }
.main-program .img p { height: 100%; /*left: 50%; top:50% ; transform:translate(-50%,-100%) scale(0.6);*/}
.main-program .img img { width:100%; height: 100%; object-fit: cover; transform: scale(0.5); border-radius:5.6rem; }
.main-program .in { display: flex; justify-content: space-between; align-items: flex-start; transform: translateY(0rem);}
/*.main-program .in.active { transform: translateY(0); opacity:1;}*/
.main-program .in .title { margin-top: 25.6rem; opacity: 0; transform: translateY(100px); }
.main-program .in.active .title {transform: unset; opacity: 1}
.main-program .in .title .main-h2 { color:#fff; margin-bottom: 8rem;}
.main-program .btns a {display: inline-flex; align-items: center; vertical-align: middle; padding: 0 1.5em; height: 3.5em; border-radius:4em; font-size:var(--subTxt); font-weight:600; color:#fff; fill:#fff; transition: all 0.3s ease; border:1px solid #fff; }
.main-program .btns a i {display: flex; align-items: center; margin-left: 1em}
.main-program .btns a svg { width:0.9em; height: auto ;}
.main-program .in .cards {width: 48.08%;transform: translateY(50%);}
.main-program .in .cards ul { display: flex; flex-wrap: wrap; justify-content: flex-end;}
.main-program .in .cards ul li { width:calc(50% - 4rem); margin:2rem;   }
.main-program .in .cards ul li:nth-child(odd) { transform: translateY(20.8rem);}
.main-program .in .cards ul li:last-child { transform: translateY(0);}
.main-program .in .cards ul li .item { border-radius:3.2rem; border:1px solid rgba(255,255,255,0.3); padding: 4rem; height: 48vh; max-height:650px; display: flex; flex-direction: column; justify-content: space-between; backdrop-filter: blur(3rem);background: rgba(240,240,240,0.2); color:#fff; transform: translateY(100px); opacity: 0; transition: background-color 0.3s ease-in-out , color 0.3s ease-in-out , border 0.3s ease-in-out}
.main-program .in .cards ul li .item strong { font-size:16rem; font-family: var(--en); color:#fff; position: relative; font-weight:600; line-height: 1; color:rgba(255,255,255,0.2); -webkit-text-stroke: 1px white; transition: all 0.3s ease;}
.main-program .in .cards ul li .item strong em { position: absolute; left: 0; top:0; display: none;}
.main-program .in .cards ul li .item dl dt { font-size:4.8rem; font-weight:600; margin-bottom: 1.6rem; }
.main-program .in .cards ul li .item dl dt span {color: var(--gold)}
.main-program .in .cards ul li .item dl dd { font-size:var(--subTxt); line-height: 1.6; font-weight:600; word-break: keep-all}
.main-program .in .cards ul li .item dl dd br {display: none}
.main-program .in .cards ul li.active .item { border-color:#fff; background: #fff; color:#1C1C1C;}
.main-program .in .cards ul li.active .item strong { color:#BFA072;}


.main-slider { padding: 16rem 0 12rem; background-color: #322D25; position: relative; overflow: hidden; min-height: 100vh; display: flex; align-items: center;}
.main-slider .main-h2 { text-align: center; color:#fff; transform: translateY(10rem); opacity:0; transition: all 1s ease;}
.main-slider .main-h2.active { transform: unset; opacity:1; }
.main-slider .slider { max-width:160rem; margin:0 auto; position: relative; transform: scaleX(0.8); opacity:0; transition: all 1s ease;}
.main-slider .slider.active { transform: unset; opacity:1; }
.main-slider .slider .swiper {padding: 20px 0}
.main-slider .slider .swiper-button-prev,
.main-slider .slider .swiper-button-next { width:6.4rem; height: 6.4rem; border-radius:100%; background-color: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center;  transition: all 0.3s ease; fill:#fff;}
.main-slider .slider .swiper-button-prev:after,
.main-slider .slider .swiper-button-next:after { display: none;}
.main-slider .slider .swiper-button-prev svg,
.main-slider .slider .swiper-button-next svg { width:1.6rem; height: auto; vertical-align: middle; }
.main-slider .slider .swiper-button-prev { left:-7.2rem; }    
.main-slider .slider .swiper-button-next { right:-7.2rem; }
.main-slider .item { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; height: 56rem; border-radius:3.2rem; overflow: hidden; position: relative; background: url(../img/main/bg_card.jpg) no-repeat 50% 50%; background-size:cover; text-align: center;  color:#fff; transition: all 0.5s ease; background: #b69769}
.main-slider .item i object { width:12.8rem; pointer-events: none;}
.main-slider .item dl { margin:5.6rem 0;  }
.main-slider .item dl dt { font-size:4rem; font-weight:600; margin-bottom: 2rem; ;}
.main-slider .item dl dd { font-size:var(--subTxt); line-height: 1.7; padding:0 1em;}
.main-slider .item p { display: flex;  justify-content: center; }
.main-slider .item p a { display: inline-flex; align-items: center;  vertical-align: middle;  fill:#fff; transition: all 0.3s ease; font-size:var(--subTxt) }
.main-slider .item p a i { margin-left: 1rem;; width:2.4rem; height: 2.4rem; border-radius:100%; background: rgba(255,255,255,0.2); display: flex; justify-content: center; align-items: center;}
.main-slider .item p a svg { width:0.8rem; vertical-align: middle; }
.main-slider .slider .swiper-slide { perspective: 2000px;}
.main-slider .slider .swiper-slide-prev .item { transform-style: preserve-3d; transform: rotateY(-35deg) rotateX(0deg) scale(0.72) translateX(25%); }
.main-slider .slider .swiper-slide-active .item { transform-style: preserve-3d; transform: rotateY(-20deg) rotateX(0deg) scale(0.94); }
.main-slider .slider .swiper-slide-next + .swiper-slide .item { transform-style: preserve-3d; transform: rotateY(20deg) rotateX(0deg) scale(0.94); }
.main-slider .slider .swiper-slide-next + .swiper-slide + .swiper-slide .item { transform-style: preserve-3d; transform: rotateY(35deg) rotateX(0deg) scale(0.72) translateX(-25%); }
.main-slider .swiper-pagination {  position: static; width:120px; height: 5px; background: rgba(255,255,255,0.2); position: relative; border-radius:5px; overflow: hidden; margin:3.5rem  auto 0; }
.main-slider .swiper-pagination .swiper-pagination-progressbar-fill { background-color: #fff; border-radius:5px; }
.main-slider .pattern {position: absolute; left: 0; bottom: 0; width: 100%; height: 100%}
.main-slider .pattern img {position: absolute;top: 50%;left: 50%;width: 200%;object-fit: cover;object-position: center;height: 200%;transform: translate(-50%,-50%);opacity: 0.3;}


.main-news { padding:16rem 0 24rem;  }
.main-news .main-h2 { margin-bottom: 5.6rem; transform: translateY(10rem); opacity:0; transition: all 1s ease;}
.main-news .main-h2.active { transform: unset; opacity:1; }
.main-news ul { display: flex; }
.main-news ul li {  }
.main-news ul li + li { margin-left: 4rem; }
.main-news ul li a { display: block; overflow: hidden; border-radius:3rem; background: #F7F7F7; transition: all 0.3s ease;}

.main-news ul li a .img { position: relative; }
.main-news ul li a .img img { vertical-align: top;}
.main-news ul li a .img i { position: absolute; right:-1px; bottom:-1px; width:6.4rem; height: 6.4rem; background: url(../img/main/ico_news_blog.svg) no-repeat 0 0; background-size: contain;}
.main-news ul li a .info { padding: 4.8rem 4rem; }
.main-news ul li a .info .lb span { display: inline-block;vertical-align: middle; padding:0 1em; line-height: 2.5em; border-radius:3.2rem; background-color: #1B1C66; font-size:var(--subTxt); font-weight:700; color:#fff; ; }
.main-news ul li a .info h3 { font-size:2.4rem; font-weight:700; margin:2.4rem 0; line-height: 1.6; overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 2;}
.main-news ul li a .info p { font-size:var(--subTxt); color:#666; }
.main-news ul li:nth-child(1) { transform: translateY(10rem); opacity:0; transition: all 0.5s ease; transition-delay: 0.1s;}
.main-news ul li:nth-child(2) { transform: translateY(10rem); opacity:0; transition: all 0.7s ease; transition-delay: 0.2s;}
.main-news ul li:nth-child(3) { transform: translateY(10rem); opacity:0; transition: all 0.9s ease; transition-delay: 0.3s;}
.main-news ul li:nth-child(4) { transform: translateY(10rem); opacity:0; transition: all 1.1s ease; transition-delay: 0.4s;}
.main-news ul li.active { transform: unset; opacity:1; }


.pointer { position: fixed; top: 0; left: 0; z-index: 100; pointer-events: none; }
.pointer .pointer_box { display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0;  width: 20rem; height:20rem; background-color: #1B1C66; color: #fff; font-size: 2.2rem; font-weight: 600; line-height: 1.4; border-radius: 50%; transition:all .3s ease-out; overflow: hidden; font-family: var(--en);}
.pointer .pointer_box span { display: block; white-space: nowrap; text-align: center; }
.pointer.on .pointer_box { opacity: 1 }


/* Hover Event */
@media screen and (min-width: 1241px) {
    .main-intro .btns a:hover { background-color: #fff; color:#1C1C1C; fill:#1C1C1C; }
    .main .controls .swiper-button-next:hover,
    .main .controls .swiper-button-prev:hover { background-color: var(--gold); fill:#fff; ;}
    .main-service .slider .btns ul li a:hover  { background-color: #BFA072; color:#fff; fill:#fff; ;}
    .main-doctor .tabs a:hover { color:#fff; background-color: #BFA072; ; }
    .main-doctor .tabs a:hover small { color:#fff; }
    .main-doctor .swiper-slide .item:hover figure figcaption i {  background-color: #fff; fill:#1c1c1c; }
    .main-program .in .title .btns a:hover { background-color: #fff; color:#1C1C1C; fill:#1C1C1C; }
    .main-news ul li a:hover { box-shadow:5px 5px 20px rgba(0,0,0,0.2); background-color: #fff; ; }
}

@media screen and (max-width: 2000px) {

    .main-quick-box{font-size: 17px;}
    .main-quick .last  i svg { width:1.44em}
    .main-quick .search-box .tit{font-size:22px;}

    .main-intro .in{top: 16rem;}
    .main-intro .earth{padding-bottom: 12rem;}

    .main-service .slider .swiper-slide ul {  margin-top: 2.4rem;}
    .main-service .slider .swiper-slide ul li{padding:0 1em; line-height:2.3em; margin: 0 0.96rem 0.96rem 0}

    .main-doctor .main-h2{margin-bottom: 4rem;}

    .main-program .in .cards ul li .item dl dd { font-size:19px;}
    
    
}


@media screen and (max-width: 1640px) {
    .main-news ul li a .info .lb span { font-size:var(--tinyTxt);}
    .main-news ul li a .info h3 { font-size:var(--txt2);; }
}



@media screen and (max-width: 1240px) {
    .main-quick-box { display: none;}
    #modalReserv{display: none;}
    .main-intro .navs { display: grid; grid-template-columns: repeat(2,1fr); gap:3rem;  }
    .main-intro { height: auto; padding:30rem 0}
    .main-service { padding:var(--subSectPd2) 0}
    .main-doctor { padding:var(--subSectPd2) 0}
    .main-program { padding:var(--subSectPd2) 0}
    .main-slider { padding:var(--subSectPd2) 0}
    .main-news { padding:var(--subSectPd2) 0}

    .main-program .in .cards { width:58%; }
    .main-program .in .cards ul li .item { height: 42vh;}
    .main-slider { height: auto; min-height: auto;}
    .main-slider .slider { padding:0 10rem; }
    .main-slider .slider .swiper-button-next { right:0; }
    .main-slider .slider .swiper-button-prev { left: 0;}

    .main-news ul { flex-wrap: nowrap; overflow-x: auto; padding:20px 4rem; margin:0  -4rem; }
    .main-news ul::-webkit-scrollbar{display: none;}
    .main-news ul li { flex:0 0 27vw; transform:unset !important; opacity:1 !important; ; }
    .main-h2 { font-size:6rem; margin-bottom: 6rem; }
    .main-program .in .cards ul li .item dl dd  {font-size:var(--subTxt); }
    .main-slider .item dl dd { font-size:14px; }
    .main-slider .item p a i { width:3.4rem; height: 3.4rem; ;}
    .main-slider .item p a svg { width:1.4rem;}

}



@media screen and (max-width: 1000px) {
    .main-news ul li { flex:0 0 50rem; }
    .main-intro { padding:var(--subSectPd2) 0}
    .main-intro .in { position: static;}
    .main-intro .earth { position: absolute; right:10rem; bottom:10rem; margin:0; height: auto;}
    .main-intro .navs { width:50rem; display: block; margin-top:15rem; }
    .main-intro .navs dl + dl { border-top:1px solid rgba(255,255,255,0.3); margin-top:15px; padding-top:15px;}
    .main-intro .navs dl dt { transform: unset;}
    .main-intro .navs dl dd p { opacity:1; transform: unset;}
    .main-intro .navs dl dd .line { display: none;}
    .main-doctor .slider .swiper-container { padding:0 var(--inPd); margin:0 calc(var(--inPd) * -1);}
    .main-slider .slider .swiper-slide .item { transform: unset !important;}
    .main-slider .slider { padding:0; }
    .main-slider .slider .swiper-container { padding:0 var(--inPd); margin:0 calc(var(--inPd) * -1);}
    .main-slider .slider .swiper-button-prev,
    .main-slider .slider .swiper-button-next { display: none;}
}

@media screen and (max-width: 769px) {
    .main-visual { height: 60vh; ;}
    .main-visual .swiper-slide .txt-box { top:50%; }
    .main-visual .swiper-slide .txt-box .txt { font-size:6rem; }
    .main-service .slider .swiper-box .swiper-container{ padding:0 var(--inPd); margin:0 calc(var(--inPd) * -1);}
    .main-service .slider .swiper-slide .tit { font-size:4rem; }
    .main-service .slider .swiper-slide .txt { font-size:3rem; }
    .main-program {  height: auto; margin-top:0;}
    .main-program .img img { transform: unset; border-radius:0;}
    .main-program .in { display: block;}
    .main-program .in .title { margin-top:0; }
    .main-program .in .cards { width:auto; transform: unset; margin-top:6rem;}
    .main-program .in .cards ul { margin:0 -2rem;}
    .main-program .in .cards ul li .item { height: 100%; transform: unset; opacity:1;}
    .main-news ul li + li { margin-left: 20px;}
    
}
@media screen and (max-width: 640px) {
    .main-h2 { font-size:5rem; }
    .main-intro .earth .img-box .img { opacity:0.3}
    .main-intro .navs { width:100%; }
    .main-intro .navs dl { margin-right:0; }
    .main-program .in .cards ul li .item strong { font-size:50px; }
    .main-program .in .cards ul li .item dl dt { font-size:3.5rem; }
    .main .controls .swiper-button-prev, .main .controls .swiper-button-next { display: none;}
    .main .controls .num { margin-left: 0;}
    .main-doctor .tabs a { font-size:2.6rem; margin-right:2.5rem; }
    .main-doctor .swiper-slide .item figure figcaption strong { font-size:3.6rem; }
}
@media screen and (max-width: 400px) {
    .main-program .in .cards ul { flex-direction: column; margin:0; }
    .main-program .in .cards ul li { width:auto; margin:0 0 10px; order:3; transform: unset !important;}
    .main-program .in .cards ul li:nth-child(1) { order:1;}
    .main-program .in .cards ul li:nth-child(2) { order:0;}
    .main-program .in .cards ul li:nth-child(4) { order:2;}
}