#main { position: relative; } 
#section1 { overflow: hidden; } 
.msec1 { position: relative; } 
.msec1 .swiper-slide { overflow:hidden } 
.msec1 .swiper-slide .slogan { position:absolute; z-index:10; top:40%; left:50%; transform: translateX(-50%); width:100%; padding:0 2rem; max-width:var(--container); } 
.msec1 .swiper-slide .slogan p { color:#fff; font-weight: bold; position: relative; text-shadow: 0 0 0.5rem rgba(0,0,0,0.1); } 
.msec1 .swiper-slide .slogan .text1 { top:0; opacity:0; font-size:5.5rem; transition:0.5s 0.5s } 
.msec1 .swiper-slide .slogan .text2 { top:10px; opacity:0; filter: blur(10px); font-size:5.5rem; transition:0.5s 1s } 
.msec1 .swiper-slide .slogan .text3 { top:10px; opacity:0; filter: blur(10px); font-size:2.2rem; transition:0.5s 1s } 


.msec1 .swiper-slide .bg { transform:scale(1.1); transition:10s; height:85rem; position: relative; } 
.msec1 .swiper-slide .bg::before { content: ''; width: 100%; height: 100%; background: rgba(0,0,0,0.3); position: absolute; top: 0; left: 0; } 
.msec1 .swiper-slide .bg img { width:100%; height: 100%; object-fit: cover; } 

.msec1 .swiper-slide-active .bg { transform:scale(1) } 
.msec1 .swiper-slide-active .slogan .text1 { top:0; opacity:1; letter-spacing:normal; } 
.msec1 .swiper-slide-active .slogan .text2 { top:0; opacity:1; filter:blur(0) } 
.msec1 .swiper-slide-active .slogan .text3 { top:0; opacity:1; filter:blur(0) } 

/*swiper*/
.msec1 .swiper-button-prev,
.msec1 .swiper-button-next { width: 5rem; height: 5rem; color:#fff; background: none; bottom:10rem; top:auto; font-size: 5rem; } 

.msec1 .swiper-button-prev { left:auto; left: calc(80% - 5rem); } 
.msec1 .swiper-button-next { left:auto; left: 80%; right:0 } 
.msec1 .swiper-pagination { max-width:var(--container); font-weight: bold; padding:0 2rem; color:#fff; text-align: left; position: absolute; left: 50%; transform: translate(-50%); bottom: 10rem; } 

.msec1 .swiper-progress-bar { position: absolute; left: 50%; transform: translate(-50%);; width:100%; max-width: var(--container); display: block; z-index: 1; height:.5rem; } 
.msec1 .swiper-progress-bar .slide_progress-bar { position: absolute; height: .3rem; background:#fff; width:50rem; clear: both; opacity:1; bottom: 15rem; left: 50%; transform: translateX(-50%); right: 0; } 
.msec1 .swiper-progress-bar .slide_progress-bar:after { position: absolute; top: 0; left: 0; background:var(--sub_color); height: 100%; width: 0; content: ""; transition: 0.1s width linear; } 
.msec1 .swiper-progress-bar.active .slide_progress-bar { opacity: 1; } 
.msec1 .swiper-progress-bar.animate .slide_progress-bar:after { transition: width linear; transition-delay: unset; width: 100%; transition-duration: 5s; } 


/* pagenation */

/*.msec1 .swiper-pagination-bullet { opacity: 0.5; width: 15px; height: 15px; background: #fff; box-shadow: 0px 0px 3px #fff; } 
.msec1 .swiper-pagination-bullet-active { background:#fff; opacity: 1; } 
*/


.msec1 .swiper-pagination-bullet { 
 background: transparent; width: 4rem; height: 4rem; 
 } 
 .msec1 .swiper-pagination-bullet-active .path { 
 display: inline-block !important; 
 stroke-dasharray: 1000; 
 stroke-dashoffset: 0; 
 -webkit-animation: dash linear 120s; 
 animation: dash linear 120s; 
 -webkit-animation-iteration-count: unset; 
 animation-iteration-count: unset; 
 } 
 .path { 
 display: none; 
 } 
 @-webkit-keyframes dash { 
 from { 
 stroke-dashoffset: 1000; 
 } 
 to { 
 stroke-dashoffset: 0; 
 } 
 } 
 @keyframes dash { 
 from { 
 stroke-dashoffset: 1000; 
 } 
 to { 
 stroke-dashoffset: 0; 
 } 
 } 


 /* 온라인상담 */
 .main_online{position: absolute; top:37rem; right:16rem; background:var(--point_color) ; color:#fff; padding:3rem; border-radius: 2.5rem; width:37.3rem; z-index: 9;}
 .main_online h2{font-size:2rem; margin-bottom: 3rem;}
 .main_online h2 span{display: block; font-size: 1.8rem;}
 .main_online ul{display: flex; gap:1rem; margin-bottom: 1.3rem;}
 .main_online ul li{width:30%}
 .main_online ul li:last-child{width: 70%;}
 .main_online ul li input{border:none; border-radius:1rem; background: #fff; font-size: 1.6rem; padding:1rem; width:100%}
 .main_online button{display:block; background: var(--main_color) !important; color:#fff; text-align: center; border-radius: 1rem; padding:1rem; width: 100%;}


/* 라디오버튼 */
.radio_container {display: block;position: relative; padding-left: 3rem; margin-top: 1.3rem; cursor: pointer; font-size: 1.4rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.radio_container input {position: absolute;opacity: 0;cursor: pointer;}
.checkmark {position: absolute;top: 0;left: 0;height: 25px; width: 25px; background-color: #eee; border-radius: 50%;}
.radio_container:hover input ~ .checkmark {background-color: #ccc;}
.radio_container input:checked ~ .checkmark {background-color: var(--main_color);}
.checkmark:after {content: ""; position: absolute; display: none;}
.radio_container input:checked ~ .checkmark:after {display: block;}
.radio_container .checkmark:after {top: 6px;left: 6px;width: 8px;height: 8px;border-radius: 50%;background: white;}


/* 진료과 */
.medical{background: #F0F4FA; padding:6rem 0}
.medical ul{display: flex; justify-content: space-between;gap:2rem}
.medical ul li{position: relative;}
.medical ul li::before{content: ''; width: 100%; height: 100%; background: linear-gradient(0deg,rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%); border-radius: 2rem; position: absolute; top: 0; left:0}
.medical ul li p{overflow: hidden; border-radius: 2rem;}
.medical ul li p img{transition: .5s}
.medical ul li p img:hover{transform: scale(1.2);}
.medical ul li span{display: block; position: absolute; bottom: 2rem; left:50%; transform: translateX(-50%); font-weight: bold; color:#fff; font-size: 3rem;}


/* 암특화진료 */
.main_cancer{padding: 13.3rem 0 0 0; position: relative;}
.main_tit{text-align: center; padding-bottom: 8rem; font-size:2.5rem}
.main_tit span{display: block; color:var(--main_color); font-weight: bold; font-size:6.5rem}
.cancer_slide{position: relative;}
.cancer_slide .swiper-slide p{height: 47rem; position: relative; border-radius: 3rem; overflow: hidden;}
.cancer_slide .swiper-slide a{color:#fff;}
.cancer_slide .swiper-slide img{width: 100%;  height: 100%; object-fit: cover;}
.cancer_slide .swiper-slide em{position: absolute; bottom: 5rem; right: 5rem; display: none;}
.cancer_slide .swiper-slide em img{width: auto; height: auto;}
.cancer_slide .swiper-slide dl{position: absolute; bottom: 5rem; left: 5rem;}
.cancer_slide .swiper-slide dl dt{font-weight: bold; font-size: 2.4rem;}
.cancer_slide .swiper-slide dl dd{display: none;}
.cancer_slide .swiper-slide-active{width: 75.7rem !important;}
.cancer_slide .swiper-slide-active p{width: 100%;}
.cancer_slide .swiper-slide-active dl dt{font-size:3rem}
.cancer_slide .swiper-slide-active dl dd{display: block;}
.cancer_slide .swiper-slide-active em{display: block;}

/* 흐르는 텍스트 */
.flow_text { display:flex; white-space:nowrap; font-size:135px; font-weight: 900; color:#F0F4FA; overflow:hidden; /*position: absolute; top: 250px; left: 0; z-index: -1; */} 
.flow_text span { animation: textLoop 20s linear infinite; padding:0 10px } 
@keyframes textLoop { 
 0% { 
 transform: translate3d(0, 0, 0); 
 } 
 100% { 
 transform: translate3d(-100%, 0, 0); 
 } 
 } 

/* 맞춤형 식단 */
/*
.main_diet ul{display: flex; justify-content: space-between; gap:2rem}
.main_diet ul li{position: relative;}
.main_diet ul li p{overflow: hidden; border-radius: 3rem;position: relative;}
.main_diet ul li p::before{content: ''; width: 100%; height: 100%; background: linear-gradient(0deg,rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%); position: absolute; top: 0; left: 0;}
.main_diet ul li dl{position: absolute; bottom: 5rem; left: 5rem;color:#fff}
.main_diet ul li dl dt{font-weight: bold; font-size:3rem}
.main_diet ul li em{position: absolute; bottom: 5rem; right:5rem}*/

.main_diet{background: #F0F4FA url(../images/main/food_bg.jpg) no-repeat center; background-attachment: fixed; padding:13rem 0; }
.diet_slide{position: relative;}

.diet_slide {display: flex; justify-content: space-between; gap:2rem}
.diet_slide {position: relative;}
.diet_slide p{overflow: hidden; border-radius: 3rem;position: relative;}
.diet_slide p::before{content: ''; width: 100%; height: 100%; background: linear-gradient(0deg,rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%); position: absolute; top: 0; left: 0;}
.diet_slide p img{width: 100%;}
.diet_slide dl{position: absolute; bottom: 5rem; left: 5rem;color:#fff}
.diet_slide dl dt{font-weight: bold; font-size:3rem}
.diet_slide em{position: absolute; bottom: 5rem; right:5rem}

.food_list .center{font-size: 2.5rem;  font-weight: bold;}
.food_list .center span{color:var(--main_color)}
.btn_go{text-align: center; padding:1rem 0}
.btn_go a{display:inline-flex; padding:1rem 2rem; text-align: center; border:2px solid #333; background: #fff; border-radius: 100px; margin: auto; transition: .5s;}
.btn_go a:hover{background: var(--main_color); border-color:var(--main_color); color:#fff}

/* 공지사항 */
.main_board{padding:13rem 0;}
.board_wrap{display: flex; gap:5rem}
.main_board_list{width: 66%; display: flex; flex-wrap: wrap; gap:4rem 3.4rem; margin-right: -4rem;}
.board_box{border:1px solid #ccc; padding:2.8rem; width:calc(33% - 4rem); height: 25rem;}
.board_box:hover{border:1px solid var(--main_color)}
.board_box dl dt span{display: block; font-size:1.6rem; margin-bottom: 1.5rem; font-weight: bold;}
.board_tit01{color:var(--main_color)}
.board_tit02{color:var(--point_color)}
.board_box dl dt { overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; margin-bottom: 5.6rem;}
.board_box dl dd{font-size: 1.5rem; color:#969696}

/* 팝업존 */
.popupzone{width: calc(40% - 5rem); position: relative; overflow: hidden;}
.popupzone h2{font-weight: bold; color:#fff; background: var(--main_color); border-top-right-radius: 1rem; border-bottom-left-radius: 1rem; padding:1rem; display: inline-block; position: relative; z-index: 9;}
.popup_slide{margin-top: -2rem;}
.popup_slide p{overflow: hidden; border-radius: 3rem;}
.popup_slide p img{width: 100%; height: 100%;  object-fit: cover;}