@charset "utf-8";

/*
 * main.css
 * 메인영역 삽입 추가하시면됩니다. 아래 커스텀진행하세요.
 *
 * 1) main visual
 * 
 */

#header{ background:linear-gradient(to bottom, rgba(0,0,0,.7), rgba(0,0,0,0)); }
 
/* 1) main visual */
[data-main="visual"] {position: relative; background: #000; }
[data-main="visual"] .video { width: 100%; height:100%; object-fit: cover;}
[data-main="visual"] .visualTop {position: relative; width: 100%; /* height: 100vh; */ aspect-ratio: 16 / 9;}
/* [data-main="visual"] .visualTop::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 5;} */
[data-main="visual"] .visualTop .title {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: var(--color-white); font-weight: 500; z-index: 10;}
[data-main="visual"] .visualTop .title h2 {font-size: 70rem; font-weight:500; margin:30rem 0;}
[data-main="visual"] .visualTop .title em {display: block; font-size: var(--font22); line-height: 1.5; text-transform: uppercase;}
[data-main="visual"] .visualTop .title p {font-size: var(--font25);}
[data-main="visual"] .visualTop iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;}
[data-main="visual"] .visualQuick {width: 100%; height: 75rem; position: absolute; bottom: 0; left: 0; background: #151515; color: var(--color-white); z-index: 10;}
[data-main="visual"] .visualQuick::before {background: #f37021; width: 20%; height: 100%; content: ''; position: absolute; bottom: 0; left: 0;}
[data-main="visual"] .visualQuick .inr {display: flex; justify-content: space-between; align-items: center; height: 100%;}
[data-main="visual"] .visualQuick :is(h3, a) {position: relative; display: flex; align-items: center; width: 380rem; height: 100%; background:var(--color-point); font-size: var(--font20); font-weight: 400;}
[data-main="visual"] .visualQuick :is(h3, a)::before {content: ''; position: absolute; top: 0; right: -1rem; width: 10%; height: 100%; clip-path: polygon(0% 0, 100% 100%, 100% 0); background: #151515;}
[data-main="visual"] .visualQuick h3 img {width: 40rem; object-fit: contain; margin-right: 10rem;}
[data-main="visual"] .visualQuick h3 i {margin-left: 15rem; margin-top: -3rem;}
[data-main="visual"] .visualQuick .list {width: calc(100% - 380rem); display: flex; justify-content: space-around; align-items: center; font-size: var(--font15); }
[data-main="visual"] .visualQuick .list li {padding-left: 15rem; position: relative;}
[data-main="visual"] .visualQuick .list li:not(:last-child)::before {content: ''; position: absolute; top: 6rem; left: 0; width: 4rem; height: 4rem; border-radius: 50%; background: rgba(255, 255, 255, 0.3);}
[data-main="visual"] .visualQuick .list li:last-child {font-size: var(--font16); font-weight: 300; opacity: 0.5;}

@media (max-width:1280px){
    [data-main="visual"] .visualQuick h3 {width: auto; font-size: 18rem; padding-right: 30rem;}
    [data-main="visual"] .visualQuick h3 img {display: none;}
    [data-main="visual"] .visualQuick h3::before {display: none;}
    [data-main="visual"] .visualQuick .list {width: calc(100% - 300rem);}
}
@media (max-width:1080px){
    [data-main="visual"] .visualTop .title h2 {font-size: 60rem;}
    [data-main="visual"] .visualQuick::before {display: none;}
    [data-main="visual"] .visualQuick h3 {display: none;}
    [data-main="visual"] .visualQuick .list {width: 100%;}
}
@media (max-width:768px){
    [data-main="visual"] .visualTop .title h2 {font-size: 43rem;}
    [data-main="visual"] .visualQuick {height: 60rem;}
    [data-main="visual"] .visualQuick .list {justify-content: flex-start; gap: 20rem;}
    [data-main="visual"] .visualQuick .list li:last-child {display: none;}
    [data-main="visual"] .visualQuick .list li {padding-left: 0; }
    [data-main="visual"] .visualQuick .list li::before {display: none;}
}
@media (max-width:480px){
    [data-main="visual"] .visualTop .title em {font-size: 15rem;}
    [data-main="visual"] .visualTop .title h2 {font-size: 30rem; margin: 20rem 0;}
    [data-main="visual"] .visualTop .title p {font-size: 15rem;}
    [data-main="visual"] .visualQuick {display: none;}


}

/* main - 소개 */
[data-main="intro"] {position: relative; display: flex; align-items: center; width: 100%; height: 550rem; text-align: center; background: url(/images/main/about01_bg.jpg) no-repeat 50% 50% / cover; color: var(--color-white);}
[data-main="intro"] .main__title {position: relative; font-family: var(--font-gms); font-weight: 500; z-index: 10;}
[data-main="intro"] .main__title span {font-size: var(--font18); display: block; }
[data-main="intro"] .main__title h2 {font-size: var(--font55); margin: 30rem 0; font-weight: 500;}
[data-main="intro"] .main__title p {font-size: var(--font20); line-height: 1.7;}
[data-main="intro"] .logo {position: absolute; right: 25%; bottom: 20%; opacity: 0.08; z-index: 1; width: 300rem;}

/* device - 장비소개 */
[data-main="device"] {padding: 150rem 0; background: url(/images/common/bg_white.jpg) repeat; background-position: 50% 50%; overflow: hidden;}
[data-main="device"] .inr {display: flex; gap: 70rem;}
[data-main="device"] .btnList {width: 440rem;}
[data-main="device"] .btnList a {position: relative; display: flex; align-items: center; justify-content: space-between; padding: 25rem 0; box-sizing: border-box; letter-spacing: -0.01em; transition: .4s; border-bottom: 1rem solid rgba(0, 0, 0, 0.08);}
[data-main="device"] .btnList a::before {content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1rem; background: var(--color-black); transition: .4s;}
[data-main="device"] .btnList a:hover {color: var(--color-point);}
[data-main="device"] .btnList a:hover dd {color: var(--color-point);}
[data-main="device"] .btnList a:hover i {opacity: 1;}
[data-main="device"] .btnList a:hover::before {width: 100%;}
[data-main="device"] .btnList i {font-size: 22rem; opacity: 0.3; transition: .4s;}
[data-main="device"] .btnList dt {font-size: var(--font22); }
[data-main="device"] .btnList dd {font-size: 15rem; color: #b5b5b5; margin-top: 15rem; transition: .4s;}
[data-main="device"] .deviceList {width: calc(100% - 440rem); height: auto; position: relative; }
[data-main="device"] .deviceList .swiper-slide {height: auto; padding-bottom: 100rem;}
[data-main="device"] .deviceInfo {width: 710rem;}
[data-main="device"] .deviceInfo .title {display: flex; justify-content: space-between; margin-bottom: 40rem;}
[data-main="device"] .deviceInfo .title dt {font-size: var(--font40); font-weight: 600;}
[data-main="device"] .deviceInfo .title dt span {display: block; font-size: var(--font18); font-weight: 400; color: var(--color-point); margin-bottom: 20rem;}
[data-main="device"] .deviceInfo .title dd {font-size: var(--font18); line-height: 1.7; color: #666; margin-top: 20rem;}
[data-main="device"] .deviceInfo .title a.more {display: flex; align-items: center; justify-content: center; width: 50rem; height: 50rem; border-radius: 50%; background: rgba(0, 0, 0, 0.3); transition: .3s; color: var(--color-white); z-index: 20; }
[data-main="device"] .deviceInfo .title a.more i {font-size: 20rem;}
[data-main="device"] .deviceInfo .title a.more:hover {background: var(--color-point); color: var(--color-white);}
[data-main="device"] .deviceInfo .list {display: flex; align-items: center; gap: 10rem;}
[data-main="device"] .deviceInfo .list img {border-radius: 6rem; width: 100%; max-width: 100%;}
[data-main="device"] .deviceImg {max-width: 700rem; max-height: 460rem; height: 100%; position: absolute; bottom: 0; right: 0;}
[data-main="device"] .deviceImg img {width: 100%; height: 100%; max-width: 100%; object-fit: contain;}
[data-main="device"] .devicePager {margin-top: 50rem; text-align: center;}
[data-main="device"] .devicePager .swiper-pagination-bullet {width: 12rem; height: 12rem; background: rgba(0, 0, 0, 0.5);}
[data-main="device"] .devicePager .swiper-pagination-bullet-active {width: 28rem; border-radius: 10rem; background: var(--color-point);}

@property --bg-color { syntax: "<color>"; inherits: true; initial-value: #0000; }
@property --conic-angle { syntax: "<angle>"; inherits: true; initial-value: 0deg; }

.section-intro { position: relative; padding-block: clamp(60rem, calc(125 / var(--container) * 100vw), 125rem) clamp(60rem, calc(140 / var(--container) * 100vw), 140rem); background: #f5f5f5 url("/images/main/intro-noise.webp"); isolation: isolate;
	&::before { position: absolute; inset: 0 0 auto; z-index: -1; padding-block: clamp(168rem, calc(295 / var(--container) * 100vw), 295rem) clamp(93rem, calc(141 / var(--container) * 100vw), 141rem); font: 500 clamp(16rem, calc(85 / var(--container) * 100vw), 85rem) var(--font-gms); letter-spacing: -0.015em; text-align: center; color: rgba(255, 255, 255, 0.1); background: #00375d; content: "Re:born Animal Medical Center"; }
	.heading { font: 300 var(--font-size-50) / 1.4 var(--font-nsneo); letter-spacing: 0.01em; color: #fff; }
	.heading strong { font-weight: 700; }
	.list { display: grid; gap: clamp(8rem, calc(40 / var(--container) * 100vw), 40rem); margin-top: clamp(40rem, calc(97 / var(--container) * 100vw), 97rem); text-align: center; text-wrap: balance; word-break: keep-all;
		@media (width >= 768px) { grid-template-columns: repeat(4, 1fr); }
		@media (width < 768px) { grid-template-columns: repeat(2, 1fr);
			br { display: none; }
		}
	}
	.item { --conic-angle: 360deg; position: relative; display: grid; place-items: center; aspect-ratio: 1; padding: 1ch; text-align: center; color: #ff6714; background: linear-gradient(var(--bg-color, #0000)), var(--bg-image) no-repeat 50% / cover, #000; border-radius: 15rem;
		&.item--1 { --bg-image: url("/images/main/intro-bg-1.webp"); }
		&.item--2 { --bg-image: url("/images/main/intro-bg-2.webp"); }
		&.item--3 { --bg-image: url("/images/main/intro-bg-3.webp"); }
		&.item--4 { --bg-image: url("/images/main/intro-bg-4.webp"); }
		&::before { position: absolute; inset: 0; border: 2px solid #ff6714; border-radius: 15rem; content: ""; pointer-events: none; user-select: none; mask: conic-gradient(#0000 var(--conic-angle), #000 var(--conic-angle), #000); }
		@media (prefers-reduced-motion: no-preference) {
			&, &::before { transition: 0.3s, --bg-color 0.3s, --conic-angle .3s linear; }
		}
		&:hover { --bg-color: hsla(0, 0%, 0%, 0.4); --conic-angle: 0deg; }
	}
	.summary { grid-area: 1 / 1 / 2 / 2; font: 500 var(--font-size-18-to-14) / 1.55555556 var(--font-sans); letter-spacing: -0.01em; color: #fff;
		@media (prefers-reduced-motion: no-preference) { transition: 0.3s; }
		li:hover & { translate: 0 -1lh; visibility: hidden; opacity: 0; }
	}
	.details { grid-area: 1 / 1 / 2 / 2; font: 600 var(--font-size-18-to-14) / 1.55555556 var(--font-sans); letter-spacing: -0.01em; color: #ff6714;
		@media (prefers-reduced-motion: no-preference) { transition: 0.3s; }
		li:not(:hover) & { translate: 0 1lh; visibility: hidden; opacity: 0; }
	}
}

@property --gradient-position { syntax: "<percentage>"; inherits: true; initial-value: 0%; }

.section-about-us { --orange: #ff6714; padding-block: 50rem; background: linear-gradient(#fff 20%, #f2f2f2);
	.inr { display: grid; gap: 40rem 0;
		@media (width >= 768px) { grid-template-columns: 50% 50%; }
	}
	.swiper { align-self: center; width: 100%; min-width: 0; aspect-ratio: 750 / 551; border-radius: 20rem; }
	.slide-image { display: block; width: 100%; height: auto; }
	.swiper-pagination { bottom: 5.4446461%; font-size: 0; }
	.swiper-pagination-bullet { width: 12rem; height: 12rem; background: #fff;
		#wrap & { margin-inline: 7.5rem; }
	}
	.swiper-pagination-bullet:not(.swiper-pagination-bullet-active) { opacity: 0.5; }
	.content {
		@media (width >= 768px) { padding: clamp(0px, calc(49 / var(--container) * 100vw), 49rem) 0 0 clamp(8rem, calc(94 / var(--container) * 100vw), 94rem); }
	}
	.eyebrow { font: 500 var(--font-size-16) var(--font-gms); color: var(--orange); }
	.heading { margin-block: 0.7em; font: 500 var(--font-size-35) var(--font-gms); }
	.description { font: var(--font-size-20) / 1.6 var(--font-sans); letter-spacing: -0.01em; color: #555;
		strong { font-weight: 600; color: #222; }
	}
	.link-block { max-width: 430rem; margin-top: clamp(20rem, calc(42 / var(--container) * 100vw), 42rem); }
	.link { --gradient-position: 0%; position: relative; display: grid; grid-template: auto auto / 1fr auto; align-content: center; padding: clamp(16rem, calc(32 / var(--container) * 100vw), 32rem) 13rem clamp(16rem, calc(31 / var(--container) * 100vw), 31rem) 5rem;
		&::before { position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(to right, #222, #222 var(--gradient-position), #c4c4c4 var(--gradient-position), #c4c4c4); content: ""; }
		&::after { display: block; grid-area: 1 / 2 / 3 / 3; align-self: center; width: 0.63636364em; aspect-ratio: 1; font-size: var(--font-size-22); border: solid #adacac; border-width: 2rem 2rem 0 0; translate: 0 -7%; rotate: 45deg; content: ""; }
		@media (prefers-reduced-motion: no-preference) {
			&, &::after, .title, .title-en { transition: 0.3s, --gradient-position 0.3s; }
		}
		@media (any-hover) {
			&:hover { --gradient-position: 100%;
				.title, .title-en { color: var(--orange); }
				&::after { border-color: var(--orange); }
			}
		}
	}
	.title { margin-bottom: 0.59090909em; font: 500 var(--font-size-22) var(--font-gms); letter-spacing: -0.01em; }
	.title-en { font: 500 var(--font-size-15) var(--font-gms); letter-spacing: -0.01em; color: #b5b5b5; }
}

/* treatment - 진료과목  */
[data-main="treatment"] {padding: 140rem 0; overflow: hidden;}
[data-main="treatment"] .treatTit {text-align: center;}
[data-main="treatment"] .treatTit h2 {font-size: var(--font45); font-weight: 600;}
[data-main="treatment"] .treatTit p {font-size: var(--font18); line-height: 1.7; margin-top: 20rem; color: #666; font-weight: 400;}
[data-main="treatment"] .tabMenu {margin-top: 50rem; display: grid; grid-template-columns: repeat(6,1fr); color: #a9a9a9; border-top: 1rem solid #555; border-bottom: 1rem solid #555;}
[data-main="treatment"] .tabMenu li {position: relative; width: 100%; padding: 22rem 0; font-size: var(--font18); cursor: pointer; transition: all .5s ease-in-out;}
[data-main="treatment"] .tabMenu li::before {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1rem; background: #ddd; z-index: -1;}
[data-main="treatment"] .tabMenu li.active {background: var(--color-point); color: var(--color-white); box-shadow: rgba(255, 120, 0, 0.3) 0 0 20rem;}
[data-main="treatment"] .tabMenu li:nth-child(n+8)::before {background: none;}
[data-main="treatment"] .treatCont {margin-top: 60rem; position: relative;}
[data-main="treatment"] .tabCont {overflow: hidden; visibility: hidden; height: 0; display: flex; align-items: center; justify-content: space-between;}
[data-main="treatment"] .tabCont.active {overflow: visible; visibility: visible; height: 100%;}
[data-main="treatment"] .tabCont::before {content: ''; position: absolute; top: 0; left: 0; width: 70%; height: 100%; background: #f5f5f5; z-index: -1; border-radius: 20rem;}
[data-main="treatment"] .treatInfo {position: relative; background: #f5f5f5; display: flex; flex-direction: column; justify-content: center; width: 50%; height: 610rem; border-radius: 20rem; padding: 50rem 40rem 50rem 60rem; box-sizing: border-box;}
[data-main="treatment"] .treatInfo .txt {font-size: var(--font17); line-height: 1.7;}
[data-main="treatment"] .treatInfo span.tag {display: block; font-size: var(--font17); color: var(--color-point);}
[data-main="treatment"] .treatInfo h2 {font-size: var(--font35); font-weight: 400; margin:30rem 0;}
[data-main="treatment"] .treatInfo p { color: #666;}
[data-main="treatment"] .treatInfo li {color: #666; margin-top:6rem;}
[data-main="treatment"] .treatInfo span {display: block; margin-top: 10rem; color: #666;}
[data-main="treatment"] .treatInfo .more {display: flex; align-items: center; gap: 20rem; font-size: var(--font18); color: var(--color-point); margin-top: 50rem;}
[data-main="treatment"] .treatInfo .more i {font-size: 20rem; transition: .3s;}
[data-main="treatment"] .treatInfo .more:hover i {margin-left: 5rem;}
[data-main="treatment"] .treatImg {position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 50%; }
[data-main="treatment"] .treatImg img {border-radius: 15rem; overflow: hidden; width: 100%; max-width: 100%;}
[data-main="treatment"] .treatImg .more {position: absolute; bottom: 0; right: 0; display: flex; width: 110rem; height: 110rem; background: url(/images/common/curve.png) no-repeat; background-size: contain;}
[data-main="treatment"] .treatImg .more i {position: absolute; right: 10rem; bottom: 12rem; display: flex; align-items: center; justify-content: center; width: 50rem; height: 50rem; border-radius: 50%; transition: all .5s ease-in-out; background: var(--color-point); color: var(--color-white);}
[data-main="treatment"] .treatImg .more i:hover {background: var(--color-black);}

/* community - 커뮤니티  */
[data-main="community"] {position: relative; height: 650rem; margin-bottom: 80rem;}
[data-main="community"] .comuLeft {height: 100%; display: flex; align-items: center;}
[data-main="community"] .tit {display: flex; align-items: center;margin-bottom: 25rem;}
[data-main="community"] .tit h2 {font-size: var(--font30); font-weight: 500;}
[data-main="community"] .notice {width: 45%;}
[data-main="community"] .notice .tit {justify-content: space-between; }
[data-main="community"] .notice .tit .more {display: flex; font-size: var(--font22); transition: all .5s ease-in-out;}
/* [data-main="community"] .notice .list li:nth-child(n+3) {display: none;}
[data-main="community"] .notice .list li + li {margin-top: 10rem;}
[data-main="community"] .notice .list a {display: flex; justify-content: space-between; align-items: center; padding: 0 22rem; box-sizing: border-box;  background: #f8f8f8; border: 1rem solid #eee; border-radius: 5rem; width: 100%; height: 75rem; transition: all .5s ease-in-out;}
[data-main="community"] .notice .list a span {font-size: 15rem; color: #a9a9a9;}
[data-main="community"] .notice .list a p {width: 85%;}
[data-main="community"] .notice .list a p .new {width: 22rem; height: 22rem; line-height: 23rem; text-align: center; border-radius: 50%; display: inline-block;  background: var(--color-point); font-size: 9rem; margin-right: 6rem; color: var(--color-white);} */
[data-main="community"] .notice .list {
	& { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(8rem, calc(20 / 1500 * 100vw), 20rem);
		@media (width >= 768px) {
			grid-template-columns: repeat(3, 1fr);
			li:nth-child(4){ display: none; }
		}
	}
	.link { display: block; width: 100%; aspect-ratio: 1; background: var(--thumb-url) no-repeat 50% / cover, url("/images/common/symbol-gray.svg") no-repeat 50% / min(60rem, 30%), #eee; border-radius: 5rem;
	}
}
[data-main="community"] .contact {width: 45%; margin-top: 40rem; padding-top: 45rem; background: url(/images/common/slash.png) repeat-x; background-position: top; background-size: 5rem; }
[data-main="community"] .contact .tit i {font-size: 25rem;}
[data-main="community"] .contact .tit img {height: 23rem;}
[data-main="community"] .contact .tit h2 {font-size: 25rem; margin: 0 20rem 0 10rem;}
[data-main="community"] .contact .tit span {font-size: var(--font18); display: inline-block; color: #a9a9a9;}
[data-main="community"] .contact .list {display: grid; grid-template-columns: repeat(2,1fr); text-align: center; padding: 20rem 0; border-top: 2rem solid #ddd; border-bottom: 2rem solid #ddd;}
[data-main="community"] .contact .list li {padding: 25rem 0;}
[data-main="community"] .contact .list li:last-child {border-left: 1rem dashed #ddd;}
[data-main="community"] .contact .list li:last-child span {background: #f37021;}
[data-main="community"] .contact .list span {display: inline-block; padding: 10rem 20rem; border-radius: 30rem; background: #222; color: var(--color-white);}
[data-main="community"] .contact .list dt {font-size: var(--font18); margin: 15rem 0;}
[data-main="community"] .contact .list dd {font-size: var(--font16);}
[data-main="community"] .contact .list dd + dd {margin-top: 10rem;}
[data-main="community"] .contact .list dd:nth-child(3) {color: #a9a9a9;}
[data-main="community"] .contact .list dd:last-child {color: #a9a9a9;}
[data-main="community"] .comuRight {position: absolute; top: 0; right: 0; width: 50%; height: 100%;}
[data-main="community"] .root_daum_roughmap {width: 100%; height: 100%; border-radius: 18rem 0 0 18rem; overflow: hidden;}
[data-main="community"] .root_daum_roughmap .wrap_map {width: 100%; height: 100%;}
[data-main="community"] .root_daum_roughmap .wrap_controllers, [data-main="community"] .root_daum_roughmap .cont {display: none;}
[data-main="community"] .root_daum_roughmap .map_border  {border: 0; display: none;}

/* [data-main="community"] .notice .list a:hover {border-color: var(--color-orange)} */
[data-main="community"] .notice .tit .more:hover {transform: rotate(90deg);}



@media (max-width:1280px){
    [data-main="device"] .inr {flex-direction: column-reverse; gap: 60rem;}
    [data-main="device"] .deviceList {width: 100%;}
    [data-main="device"] .deviceInfo {width: 100%;}
    [data-main="device"] .deviceInfo .title {width: 100%;}
    [data-main="device"] .deviceList .swiper-slide { padding-bottom: 80rem;}
    [data-main="device"] .btnList {width: 100%; display: grid; grid-template-columns: repeat(3,1fr); gap: 10rem;}
    [data-main="device"] .btnList dt {font-size: var(--font20);}
    [data-main="device"] .btnList i {display: none;}
    [data-main="device"] .btnList a {padding: 35rem 20rem; box-sizing: border-box; background:rgba(255, 255, 255, 0.8); border-bottom: 0; text-align: center;}
    [data-main="device"] .btnList dd {font-size: 14rem;}
}

@media (max-width:1080px){
    [data-main="device"] {padding: 100rem 0}
    [data-main="device"] .deviceInfo .list img {width: 280rem;}

    [data-main="treatment"] {padding: 100rem 0;}
    [data-main="treatment"] .tabMenu {grid-template-columns: repeat(5,1fr);}
    [data-main="treatment"] .tabMenu li:nth-child(n+6)::before {background: #ddd}
    [data-main="treatment"] .tabMenu li:nth-child(n+11)::before {background: transparent}
    [data-main="treatment"] .treatInfo {height: 550rem; padding: 40rem 30rem 40rem 40rem;}
    [data-main="treatment"] .treatInfo h2 {margin: 20rem 0;}
    [data-main="treatment"] .treatInfo p br {display: none;}

    [data-main="community"] {height: auto; }
    [data-main="community"] .comuLeft {width: 100%;}
    [data-main="community"] .notice {width: 100%;}
    [data-main="community"] .contact {width: 100%;}
    [data-main="community"] .comuRight {position: static; width: 94%; height: 500rem; margin: 50rem auto 0 auto;}
    [data-main="community"] .root_daum_roughmap {border-radius: 20rem;}
}

@media (max-width:768px){
    [data-main="intro"] {height: 400rem;} 
    [data-main="device"] {padding: 80rem 0}
    [data-main="device"] .btnList {grid-template-columns: repeat(1,1fr); gap: 0;}
    [data-main="device"] .btnList i {display: block}
    [data-main="device"] .btnList a {padding: 25rem 0; box-sizing: border-box; background:transparent; border-bottom: 1rem solid rgba(0, 0, 0, 0.05); text-align: left;}
    [data-main="device"] .deviceImg {max-width:350rem; max-height: 360rem;}
    [data-main="device"] .deviceInfo .list img {width: 220rem;}
    [data-main="device"] .deviceInfo .list img:last-child {display: none}
    [data-main="device"] .devicePager {margin-top: 30rem;}
    
    [data-main="treatment"] {padding: 80rem 0;}
    [data-main="treatment"] .tabMenu {margin-top: 30rem;}
    [data-main="treatment"] .tabCont {flex-direction: column;}
    [data-main="treatment"] .tabCont::before {display: none;}
    [data-main="treatment"] .treatCont {margin-top: 40rem;}
    [data-main="treatment"] .treatInfo {width: 100%; height: auto; padding: 45rem 45rem 100rem; border-radius: 15rem;}
    [data-main="treatment"] .treatInfo p {font-weight: 300;}
    [data-main="treatment"] .treatInfo .more {margin-top: 30rem; gap: 15rem;}
    [data-main="treatment"] .treatInfo .more i {font-size: 15rem;}
    [data-main="treatment"] .treatImg {width: 90%; transform: translate(0); position: static; margin-top: -40rem;}

}
@media (max-width:480px){
    [data-main="intro"] {height: 300rem; overflow: hidden;} 
    [data-main="intro"] .logo {width: 250rem; right: -50rem; bottom: -50rem;}
    [data-main="intro"] .show-mo {display: block;}
    
    [data-main="device"] .inr {gap: 30rem;}
    [data-main="device"] .deviceList .swiper-slide {padding-bottom: 0;}
    [data-main="device"] .deviceImg {position: static;}
    [data-main="device"] .deviceInfo .list {display: none;}
    [data-main="device"] .deviceInfo .title {flex-direction: column; gap: 20rem; margin-bottom: 0;}
    [data-main="device"] .deviceInfo .title a.more {width: 40rem; height: 40rem;}
    [data-main="device"] .deviceInfo .title a.more i {font-size: 15rem;}
    [data-main="device"] .deviceInfo .title dd .mo-hide {display: none;}
    
    [data-main="treatment"] .treatTit p br {display: none;}
    [data-main="treatment"] .tabMenu {grid-template-columns: repeat(2,1fr);}
    [data-main="treatment"] .tabMenu li:nth-child(n+11)::before {background: #ddd}
    [data-main="treatment"] .tabMenu li:nth-child(n+13)::before {background: transparent}
    [data-main="treatment"] .tabMenu li {padding: 15rem; font-size: 14rem;}
    [data-main="treatment"] .tabMenu li:nth-child(even) {border-left: 1rem dotted #ddd;}
    [data-main="treatment"] .treatCont {margin-top: 30rem;}
    [data-main="treatment"] .treatInfo {padding: 35rem 25rem; border-radius: 8rem;}
    [data-main="treatment"] .treatInfo h2 {margin: 15rem 0 20rem;}
    [data-main="treatment"] .treatImg {margin-top: 10rem; width: 100%;}
    [data-main="treatment"] .treatImg img {border-radius: 8rem;}
    [data-main="treatment"] .treatImg .more {width: 60rem; height: 60rem;}
    [data-main="treatment"] .treatImg .more i {width: 30rem; height: 30rem; bottom: 6rem; right: 5rem; font-size: 12rem;}

    [data-main="community"] {margin-bottom: 50rem;}
    /* [data-main="community"] .notice .list a {height: auto; padding: 20rem 15rem; flex-direction: column; align-items: flex-start;}
    [data-main="community"] .notice .list a p {width: 100%;}
    [data-main="community"] .notice .list a p .new {width: 20rem; height: 20rem; line-height: 22rem;}
    [data-main="community"] .notice .list a span {font-size: 14rem; margin-top: 10rem; font-weight: 300; align-self: flex-end;} */
    [data-main="community"] .contact .list {grid-template-columns: repeat(1,1fr); padding: 0;}
    [data-main="community"] .contact .list li:last-child {border-left: 0; border-top: 1rem dashed #ddd;}
    [data-main="community"] .tit {margin-bottom: 20rem;}
    [data-main="community"] .contact {margin-top: 35rem; padding-top: 40rem; background-size:4rem}
    [data-main="community"] .contact .tit h2 {font-size: 20rem; margin: 0 10rem 0 5rem;}
    [data-main="community"] .contact .tit i {font-size: 22rem;}
    [data-main="community"] .comuRight {height: 350rem;}
    [data-main="community"] .root_daum_roughmap {border-radius: 8rem;}
}
[data-main="community"] {
    height: 820rem;
}
[data-main="community"] .col2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64rem;
}

[data-main="community"] .contact {
    width: 100%;
    margin-top: 0;
    padding-top: 0;
    background: none;
    background-position: top;
    background-size: 5rem;
    display: flex;
    flex-direction: column;
}
[data-main="community"] .notice {
    width: 100%;
}
[data-main="community"] .contact .tit {
    margin-top: 50rem;
}
[data-main="community"] .root_daum_roughmap {
    border-radius: 0;
    height: auto;
    display: flex;
    flex-grow: 1;
}
[data-main="community"] .notice .list {
    
    grid-template-columns: repeat(2, 1fr);
}
[data-main="community"] .notice .list li:nth-child(4) {
                display: unset;
            }
            [data-main="community"] .tit {
    margin-top: 0;
}
@media (max-width:767px){
[data-main="community"] {
    height: auto;
}
[data-main="community"] .col2 {
    grid-template-columns: 1fr;
}
[data-main="community"] .root_daum_roughmap {
    height: auto;
    min-height: 350px;
}

}
@media (max-width:1080px){
[data-main="community"] {
    height: auto;
}

}