/*  ===== // mainslide //===== */
.mainslide .page_btn{width: 20em; position: absolute; left: 50%; transform: translateX(-50%); bottom: 7em; margin:auto; --swiper-theme-color:#fff; z-index: 1;}
.mainslide .page_btn .swiper-button-next:after, .mainslide .page_btn .swiper-button-prev:after{font-size: 18px;}
.mainslide .page_btn .swiper-pagination{position: relative; bottom: auto; width: auto; left: auto; font-size: 1.500rem; font-weight: 500;}
.mainslide .page_btn .loadingwrap{width: 5rem; height: 2px; position: relative; display: inline-block; vertical-align:middle; z-index:1;}
.mainslide .page_btn .loadingwrap .bar{background: #fff; width: 100%; height: 100%;}
.mainslide .page_btn .loadingwrap .bar_g{height: 100%; top: 0; left: 0; position: absolute; background: var(--pointcolor); width: 0;}

.mainslide .page_btn .line{position: relative; display: inline-block; padding-right: 1em;}
.mainslide .page_btn .line:after{content: ''; display: block; width: 1px; height: 18px; background: #fff; position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin-right: .5em;}

.mainslide .page_btn .swiper-pagination-total{color: #bdbcbc;}

/* === // Title 모형 공통 // === */
.tit_point{align-items: center;}
.tit_point > span{width: 12px; height: 12px; border-radius: 50%; display: inline-block; margin-right: 5px;}
.tit_point > span.no_1{background-color: var(--sub2color);}
.tit_point > span.no_2{background-color: var(--pointcolor);}
.tit_point > span.no_3{background-color: #0ea29a;}

/* 프로그램 Section */
.main_sec01 .section-left{}
/*.main_sec01 .titbox{width: 25%;}*/
.main_sec01 .titbox:before{display: block; content: ""; width: 42%; height: 20%; position: absolute; top: 0; left: 0; background: rgba(var(--pointcolor-rgb), 0.1); border-bottom-right-radius: 15em; z-index: -1;}
.main_sec01 .mt-m3{margin-top: -20rem;}
.main_sec01 .mt-m2{margin-top: -5rem;}
.main_sec01 .flexList{--x-gap: 10rem;}

.main_sec01 .nav-btn{display: flex;}
.main_sec01 .nav-btn .swiper-button-next, .main_sec01 .nav-btn .swiper-button-prev{position: static; width: 3rem; height: 3rem; background: var(--pointcolor); border-radius: 50%; margin-top: 2.8rem;}
.main_sec01 .swiper-button-next:after, .main_sec01 .swiper-button-prev:after{font-size: 1.000rem; color: #fff;}
.main_sec01 .nav-btn .swiper-button-next{margin-left: 1em;}

.main_sec01 .txt .top{width: 100%; justify-content: space-between; position: relative;}
.main_sec01 .txt .top:after{content: ''; display: block; width: 100%; height: 1px; background: #050001; margin: 1em auto;}
.main_sec01 .txt .top h4{position: relative;}
.main_sec01 .txt .top h4:after{display: flex; content: "+"; background: var(--subcolor); color: #fff; border-radius: 50%; width: 2rem; height: 2rem; position: absolute; right: 0; top: 50%; transform: translateY(-50%); align-items: center; justify-content: center; font-size: 1.375rem;}
.main_sec01 .box .imgbox{position: relative;}
.main_sec01 .box .imgbox .point-font{writing-mode: vertical-lr; position: absolute;bottom: 0;left: -2.5rem; transform: rotate(180deg);}
@media (max-width: 768px){
	.main_sec01 .section-left{flex-wrap: wrap;}
	.main_sec01 .titbox{width: 100%}
	.main_sec01 .titbox:before{width: 80%;}
	.main_sec01 .slide_wrap{width: 100%; margin-top: 3em;}
}


/* 내시경검사 Section */
.main_sec02 .img_wrap{position: relative; width: 50%; padding-right: 2%;}
.main_sec02 .img_wrap .box{width: 100%; position: relative; /* transition: all 0.3s ease; */ }
.main_sec02 .img_wrap .box .imgbox{width: 100%;}

.main_sec02 .img_wrap .box .txtbox{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%;}
.main_sec02 .img_wrap .box .txtbox .txt_off{display: flex; align-items: center; flex-direction: column; justify-content: center; width: 100%; height: 100%; transition: 0.3s ease-in;}
.main_sec02 .img_wrap .box:hover .txtbox .txt_off{opacity: 0;}
.main_sec02 .img_wrap .box .txtbox .txt_on{opacity: 0; display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); align-items: center; justify-content: center; width: 100%; height: 100%;}
.main_sec02 .img_wrap .box:hover .txtbox .txt_on{display: flex; opacity: 1; transition: 0.3s linear;}


.main_sec02 .txt_wrap{width: 50%; padding-left: 3%;}
.main_sec02 .txt_wrap .line_wrap{position: relative;}
.main_sec02 .txt_wrap .line_wrap:before{content:''; display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 82%; width: 1px; background: var(--subcolor);}
.main_sec02 .txt_wrap .line_wrap li{padding-left: 2em; margin-bottom: 2em; position: relative;}
.main_sec02 .txt_wrap .line_wrap li:last-child{margin-bottom: 0;}

.ripple{display: inline-block; width: 10px; height: 10px; border-radius: 50%; position: absolute; top: 50%; left: -5px; transform: translateY(-50%) scale(0.8); background-color: var(--subcolor);}
.ripple:before{content: ""; position: absolute; width: 100%; height: 100%; background-color: inherit; border-radius: 50%; z-index: -1; animation: ripple 1.5s ease-out infinite; animation-delay: 1s; transform: translateY(-50%); top: 50%;}

@keyframes ripple {
  from {
    opacity: 1;
    transform: translateY(-50%) scale(0);
  }
  to {
    opacity: .5;
    transform: translateY(-50%) scale(3);
  }
  to {
    opacity: 0;
    transform: translateY(-50%) scale(4);
  }
}

@media (max-width: 1240px){
	.main_sec02 .img_wrap .box{height: 28vw;}
	.main_sec02 .img_wrap .box .imgbox{height: 100%;}
	.main_sec02 .img_wrap .box .imgbox > img{height: 100%;}
}

@media (max-width: 990px){
	.main_sec01 .mt-m3{margin-top: 6.25rem;}
	.main_sec01 .mt-m2{margin-top: 6.25rem;}
	.main_sec01 .box{margin-top: 6.25rem;}
	.main_sec01 .flexList{width: 90%;}
	.main_sec01 .titbox:before{height: 10%;}

	.main_sec02 .container{flex-wrap: wrap;}
	.main_sec02 .img_wrap{width: 100%; padding-right: 0;}
	.main_sec02 .img_wrap .box{height: auto;}
	.main_sec02 .img_wrap .box .imgbox > img{width: 100%;}
	.main_sec02 .txt_wrap{width: 100%; padding-left: 0; margin-top: 3em;}
}


/* 시스템 Section */
.main_sec03{background: url(/img/main/bg_1.jpg)no-repeat center / cover;}
.main_sec03 .container{justify-content: space-between; align-items: center;}
.main_sec03 .titbox{width: 40%; padding-right: 3%;}
.main_sec03 .titbox h2{position: relative; display: inline-block;}
.main_sec03 .titbox h2:after{content: ''; display: block; width: 100%; height: 1px; background: rgba(255,255,255,0.3); margin: 1em 0;}

.main_sec03 .flexList{width: 58%;}
.main_sec03 .flexList .box{background: rgba(255,255,255,0.2); height: 18em; padding: 1em; display: flex; align-items: center; justify-content: center; flex-direction: column;}
.main_sec03 .flexList .box > span{width: 8rem; height: 8em; border-radius: 50%; display: flex; align-items: center; justify-content: center;}

@media (max-width: 1200px){
	.main_sec03 .flexList{width: 55%;}
	.main_sec03 .flexList .box > span > img{width: 50%;}
}

@media (max-width: 990px){
	.main_sec03 .container{flex-wrap: wrap;}
	.main_sec03 .titbox{width: 100%; padding-right: 0;}
	.main_sec03 .flexList{width: 100%; margin-top: 3em;}
}

@media (max-width: 460px){
	.mo-wrap1{--count:1}
}


/* 내과진료 Section */
.main_sec04 .title{position: relative;}
.main_sec04 .title:after{content: ''; display: block; width: 100%; height: 2px; background: #000; margin: 3.5em auto;}

.main_sec04 .flexList .box{border: 1px solid #c5c5c5; box-sizing: border-box; height: 25em; display: flex; align-items: center; justify-content: center; flex-direction: column; transition: 0.3s ease-in;}
.main_sec04 .flexList .box .icon{margin-bottom: 1rem;}
.main_sec04 .flexList .box .icon > img{filter: invert(17%) sepia(98%) saturate(796%) hue-rotate(173deg) brightness(40%) contrast(94%);}
.main_sec04 .flexList .box p{margin-bottom: 1rem; text-align: center;}
.main_sec04 .flexList .box .more{border: 1px solid var(--subcolor); color: var(--subcolor); border-radius: 2em; padding: .5em; width: 12rem; display: flex; align-items: center; justify-content: center; transition: background 0.5s, letter-spacing 0.3s;}
.main_sec04 .flexList .box .more > i{margin-left: 1em;}

/* hover */
.main_sec04 .flexList .box:hover{border: 4px solid var(--subcolor);}
.main_sec04 .flexList .box:hover .icon > img{filter: none;}
.main_sec04 .flexList .box:hover .more{background: var(--subcolor); color: #fff; letter-spacing: 0.01em;}


/* 둘러보기 Section */
.main_sec05:before{content: ''; display: block; width: 100%; height: 13em; background: rgba(var(--pointcolor-rgb), 0.1); position: absolute; top: 49%; left: 0; transform: translateY(-50%);}
.main_sec05 .swiper_wrap{margin-top: 8em;}
.main_sec05 .swiper_wrap .swiper{overflow-y: visible; overflow-x: clip;}
.main_sec05 .swiper_wrap .swiper .swiper-slide .imgbox{transform: scale(0.75);}
.main_sec05 .swiper_wrap .swiper .swiper-slide .imgbox > img{filter: brightness(0.5);}
.main_sec05 .swiper_wrap .swiper .swiper-slide .txtbox{opacity: 0;}

.main_sec05 .swiper_wrap .swiper .swiper-slide.swiper-slide-active { z-index: 10; }
.main_sec05 .swiper_wrap .swiper .swiper-slide.swiper-slide-prev, .main_sec05 .swiper_wrap .swiper .swiper-slide.swiper-slide-next { z-index: -1; }

.main_sec05 .swiper_wrap .swiper .swiper-slide-active .imgbox > img{filter: brightness(1);}
.main_sec05 .swiper_wrap .swiper .swiper-slide-active .imgbox{transform: scale(1); position: relative; }
.main_sec05 .swiper_wrap .swiper .swiper-slide-active .txtbox{opacity: 1;}
.main_sec05 .swiper_wrap .swiper .swiper-slide-active .txtbox > h4{position: relative; width: 100%;}
.main_sec05 .swiper_wrap .swiper .swiper-slide-active .txtbox > h4:after{content: ''; display: block; background: #000; width: 100%; height: .5px; margin: .5em auto;}

.main_sec05 .nav_btn{width: 100%; max-width: 990px; position: absolute; left: 50%; transform: translate(-50%, -50%); top: 36%; z-index: 9;}
.main_sec05 .swiper-button-next, .main_sec05 .swiper-button-prev{width: 3rem; height: 3rem; background: var(--pointcolor); border-radius: 50%;}
.main_sec05 .swiper-button-next:after, .main_sec05 .swiper-button-prev:after{font-size: 1.000rem; color: #fff;}

@media (max-width: 1540px){
	.main_sec05 .nav_btn{width: 80%;}
}

@media (max-width: 1024px){
	.main_sec05 .nav_btn{width: 90%;}
}

@media (max-width: 768px){
	.main_sec05 .nav_btn{width: 100%;}
}

/* 배너 Section */
.main_sec06{background: url(/img/main/bg_2.jpg)no-repeat center center / cover;}


/* 의료진 Section */
.main_sec07 .titbox{width: 40%;}
.main_sec07 .titbox .history h4 > b{letter-spacing: .2em;}
.main_sec07 .titbox .history .more{width: 15rem; display: flex; border-radius: 2em; padding: .8em; align-items: center; justify-content: center; transition: letter-spacing 0.3s;}
.main_sec07 .titbox .history .more:hover{letter-spacing: 0.01em;}
.main_sec07 .titbox .history .more > i{margin-left: 1rem;}
.main_sec07 .imgbox{width: 60%; position: relative; padding-left: 5%; padding-top: 3%;}
.main_sec07 .imgbox:before{content: ''; display: block; background: #e9f5fb; width: 80%; height: 75%; position: absolute; right: 0; bottom: 0; z-index: -1;}

@media (max-width: 1300px){
	.main_sec07 .imgbox{padding-left: 0; padding-right: 5%;}
}

@media (max-width: 990px){
	.main_sec07 .doc {flex-wrap: wrap}
	.main_sec07 .titbox{width: 100%;}
	.main_sec07 .imgbox{width: 100%; margin-top: 3em; padding-bottom: 10%;}
}

/* 움직이는 텍스트 */
.track_box .animated-title{width: 100%; max-width:100%; height: auto; padding: 5em 0 0; overflow-x: hidden; overflow-y: hidden; z-index: -1;}
.track_box .animated-title .track{white-space: nowrap; will-change: transform; animation: marquee 30s linear infinite; letter-spacing: 0.2em; line-height: 1.0;}
.track_box .animated-title .content{opacity: 1;}
.track_box .animated-title .content > span{-webkit-text-stroke: 1px rgba(36,159,219,0.4); color: transparent; font-weight: 700;}

@media (max-width: 768px){
	.track_box .animated-title .content{font-size: 5.000rem;}
}

@keyframes marquee{
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}


/* 진료안내/오시는길 Section */
.main_sec08 .map_wrap{width: 55%; margin-top: 4em;}
.main_sec08 .info_wrap{width: 45%; padding-left: 5%;}
.main_sec08 .info_wrap .txtlist li{align-items: center;}
.main_sec08 .info_wrap .txtlist li:first-child, .main_sec08 .info_wrap .txtlist li:nth-child(3){align-items: flex-start;}
.main_sec08 .info_wrap .txtlist li .name{display: flex; align-items: center;}
.main_sec08 .info_wrap .txtlist li .name > img{margin-right: 1em;}
.main_sec08 .info_wrap .txtlist li .name > span{width: 5em;}
.main_sec08 .info_wrap .txtlist li .time .box dt{width: 10em;}
.main_sec08 .info_wrap .txtlist li .time .box dd{width: 60%;}

@media (max-width: 1200px){
	.main_sec08 .info_wrap{padding-left: 3%;}
}

@media (max-width: 990px){
	.main_sec08{padding-bottom: 0;}
	.main_sec08 .section-right{flex-wrap: wrap; padding-right: 0; width: 100%; margin: auto;}
	.main_sec08 .map_wrap{width: 100%; margin-top: 0; max-height: 420px; height: 50vw; min-height: 350px;}
	.main_sec08 .info_wrap{width: 100%; padding-left: 5%; order: -1; margin-bottom: 3em;}
	.main_sec08 .info_wrap .txtlist li .name > img{width: 17%;}
}