@charset "UTF-8";

/* font */
html:has(#main-container) {
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    font-size: 10px;
}

/* 모바일에서만 적용. 폰트가 디바이스 크기에 맞춰 자동으로 조정되는것을 방지 */
body:has(#main-container) {
    position: relative;
    margin: 0 auto;
    min-width: 320px;
    overflow-X: hidden;
    color: #222;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.7;
    letter-spacing: -.05em;
    font-family: "Noto Sans Korean";
}



/* skip */
.skip, .hide, .hidden, legend, caption, .sr_only {
    position: absolute;
    left: -5000px;
    width: 0;
    height: 0;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    text-indent: -9999px;
}



.txthide {
    text-indent: -9999px;
    font-size: 0;
    color: transparent;
}


.wd100 {width:100%;}

.fw01{font-weight:100;}
.fw02{font-weight:200;}
.fw03{font-weight:300;}
.fw04{font-weight:400;}
.fw05{font-weight:500;}
.fw06{font-weight:600;}
.fw07{font-weight:700;}
.fw08{font-weight:800;}
.fw08{font-weight:900;}


@font-face {
    font-family: 'SBAggro';
    font-weight: 500;
    font-style: normal;
    src: url('../font/SBAggroLight.woff2') format('woff2'),
        url('../font/SBAggroLight.woff') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'SBAggro';
    font-weight: 600;
    font-style: normal;
	src: url('../font/SBAggroMedium.woff2') format('woff2'),
        url('../font/SBAggroMedium.woff') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'SBAggro';
    font-weight: 700;
    font-style: normal;
	src: url('../font/SBAggroBold.woff2') format('woff2'),
        url('../font/SBAggroBold.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'SCD';
    font-weight: 400; 
    font-style: normal; 
    src: url('../font/SCoreDream4.woff2') format('woff2'),
         url('../font/SCoreDream4.woff') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'SCD';
    font-weight: 600; 
    font-style: normal; 
    src: url('../font/SCoreDream6.woff2') format('woff2'),
         url('../font/SCoreDream6.woff') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'SCD';
    font-weight: 700; 
    font-style: normal; 
    src: url('../font/SCoreDream7.woff2') format('woff2'),
         url('../font/SCoreDream7.woff') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'SCD';
    font-weight: 800; 
    font-style: normal; 
    src: url('../font/SCoreDream8.woff') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'SCD';
    font-weight: 900; 
    font-style: normal; 
    src: url('../font/SCoreDream9.woff') format('woff');
    font-display: swap;
}



#main-container .inner{position:relative; padding:0 40px; margin:0 auto; width:1600px; line-height:1.4;}
@media all and (max-width:1600px){
	#main-container  .inner{width:100%;}
}
@media all and (max-width:1024px){
	#main-container  .inner{padding:0 32px;}
}
@media all and (max-width:768px){
	#main-container  .inner{padding:0 24px;}
}
@media all and (max-width:425px){
	#main-container  .inner{padding:0 16px;}s
}

body:has(#main-container) #header {position: fixed; top:0; left:0;}

#container:has(#main-container) {padding-top:0;}
#main-container section {position:relative; height:100vh; justify-content: center; padding-top:155px;}
#main-container section .inner {display:flex; justify-content: center;}



#sidebar{position:fixed;top:50%;margin-top:-100px;right:30px;height:200px;padding:0;z-index:2}
#sidebar ul{list-style:none;padding:0}#sidebar li{margin-bottom:30px;display:flex;justify-content:center;position:relative}
#sidebar li:after{content:' ';display:block;position:absolute;width:1px;height:50px;background:rgba(195,195,208,.7);top:15px}
#sidebar li:last-child{margin-bottom:0}#sidebar li:last-child:after{content:none}
#sidebar li a:before,
#sidebar li.active:before{content:' ';display:block;background:rgba(186,196,211,.7);border-radius:25px}
#sidebar li a{position:relative;width:25px;height:25px;border-radius:25px}
#sidebar li a:before{position:relative;width:7px;height:7px;left:9px;bottom:-8px}
#sidebar li.active a:before{background:#0940a1}
#sidebar li.active:before{position:absolute;top:0;left:0;width:25px;height:25px}
#sidebar li a span{position:absolute;width:1px;height:1px;margin:2px;overflow:hidden;clip-path:polygon(0 0,0 0,0 0)}#sidebar li.active{font-weight:700}

@media all and (max-width:1280px){
	#sidebar {display:none;}
	#main-container section {padding-top: 60px; height:auto;}
}

@media all and (max-width:1024px){
	#sidebar {display:none;}
	#main-container section {height: auto;}
	#main-container section + section {padding-top:60px;}
}

@media all and (max-width:768px){
	#main-container section {padding-top:0;}
	body:has(#main-container) #header {position:relative;}
}

/* section1 */
#section1 {display:flex; flex-direction: column; gap:40px; padding-bottom: 40px;} 
#section1 .visualSec {position:relative; display:flex; width:100%; height:100%;  gap:60px; background:#EDF6FF; border-radius:0 0 140px 140px; background-image:url('../img/visualbg.png'); background-position:center bottom; background-repeat:no-repeat; background-size:cover;}
#section1 .visualSec .inner {display:flex; justify-content: center; flex-direction: column;  height:100%;  gap:60px;}
#section1 .textArea p {display:inline-block; font-size:50px; font-family:'SBAggro'; font-weight:600; background: linear-gradient(90deg, #3EB8C4 0%, #3365A9 100%);  -webkit-background-clip: text;   background-clip: text;  color: transparent;  -webkit-text-fill-color: transparent;     animation: ani_txt 1s both; }
#section1 .textArea span {display:block; font-size:34px; font-family:'SBAggro';     animation: ani_txt 1s both;   animation-delay: 0.5s;}

#section1 .visualSrh {position:relative; display:flex; width:100%; height:220px; box-shadow: inset 0 0 0 1px #D7D7D7; border-radius:24px; background:#fff;     animation: ani_txt 1s both; z-index:1; }


/* 여름버전 */
/* #section1 .visualSec::after {content:''; display:block; position:absolute; width: 310px; height:310px; right:-10px; top:-10px; background:url('../img/visualbg_etc.png') no-repeat right top; background-size:cover; transition:0.2s; transform:rotate(0);    animation: ani_swing 3s infinite alternate ease-in-out;} */

/* 가을버전 */
/* #section1 .visualSec {background-image:url('../img/visualbg_fall.png');}
#section1 .visualSec::before {content:''; display:block; position:absolute; width: 238px; height:700px; right:-10px; bottom:0; background:url('../img/visualbg_etc_fall.svg') no-repeat right bottom; background-size:contain; transition:0.2s;}
#section1 .visualSec::after {content:''; display:block; position:absolute; width: 188px; height:130px; right:53px; bottom:347px; background:url('../img/visualbg_etc_fall2.svg') no-repeat right top; background-size:contain; transition:0.2s; transform:rotate(0);    animation: ani_swing2 3s infinite alternate ease-in-out; cursor:pointer;}
 */

/* 겨울버전 */
/* #section1 .visualSec {background-image:url('../img/visualbg_winter.png'); background-position: right center;}
#section1 .textArea {       filter: drop-shadow(-1px -1px 0 white) drop-shadow(1px -1px 0 white) drop-shadow(-1px 1px 0 white) drop-shadow(1px 1px 0 white);}
#section1 .chat {display:none;}

@media all and (max-width:768px){
	#section1 .visualSec {background-position:right -100px bottom;}
} */

/* 봄버전 */
#section1 .visualSec {background-image:url('../img/visualbg_spring.png'); background-position: right center; overflow:hidden;}
#section1 .chat {display:none;}
#section1 .visualSec::after {z-index:2; content:''; display:block; position:absolute; width: 455px; height:220px; right:-20px; top:0; background:url('../img/visualbg_etc_spring01.png') no-repeat center; background-size:contain; transition:0.2s; transform:rotate(0);    animation: ani_swing3 3s infinite alternate ease-in-out;}
#section1 .visualSec .inner::before {content:''; display:block; position:absolute; width: 322px; height:261px; right:153px; top:calc(50% - 200px); background:url('../img/visualbg_etc_spring02.png') no-repeat right top; background-size:contain; cursor:pointer;}


#section1 .visualSec .petal-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
#section1 .visualSec .petal { position: absolute; border-radius: 150% 0 150% 0; top: -50px; opacity: 0; animation: falling 8s linear infinite, sway 3s ease-in-out infinite; }

@media all and (max-width:1600px){
	#section1 .visualSec::after {width:300px; height: 150px;}
}

@media all and (max-width:1024px){
	#section1 .visualSec .inner::before {width: 250px; height:200px; top: calc(50% - 220px);}
}

@media all and (max-width:768px){
	#section1 .visualSec::after,
	#section1 .visualSec .inner::before {display:none;}
}

@keyframes falling {
    0% { top: -10%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 110%; transform: translateX(-120vw) rotate(45deg); opacity: 0; }
}

@keyframes sway {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    50% { transform: translateX(50px) rotate(180deg); }
}



#section1 .chat {position: absolute; right:280px; bottom: 430px; opacity: 0; transition: opacity 0.7s; background:#fff; padding:12px 24px; font-size:2.0rem; z-index:99; border:1px solid #2675E2; border-radius:99px; font-family:'SBAggro'; line-height:2.0rem; color:var(--color-main); box-shadow: -3px 3px 0px #89BFF9; pointer-events: none;}
#section1 .chat.show { opacity: 1; pointer-events: auto;}
#section1 .chat:after {content: ''; position: absolute; border-style: solid; border-width: 20px 7px 0; border-color: #FFFFFF transparent; display: block; width: 0; z-index: 1; bottom: -15px; left: 70%;     transform: rotate(-25deg);}
#section1 .chat:before {content: ''; position: absolute; border-style: solid; border-width: 20px 7px 0; border-color: var(--color-main) transparent; display: block; width: 0; z-index: 0; bottom: -16px; left: 70%;     transform: rotate(-25deg);}

@media all and (max-width:1024px){
	/* #section1 .visualSec::before,
	#section1 .visualSec::after {display:none;} */
	#section1 .chat {display:none;}
}


/* #section1 .visualSrh::after {display:none; content:url('../img/visualbg_chara.png'); position:absolute; right:0; top:-286px; width:420px; height: 420px; z-index:0;} */

#section1 .visualSrh > li {z-index:1; display:flex; flex-direction: column; height:80px; width:100%; bottom:0;}
#section1 .visualSrh > li + li {border-left:1px solid #D4D9DB;}
#section1 .visualSrh > li:first-child,
#section1 .visualSrh > li:first-child .tit {border-radius:24px 0 0 0;}
#section1 .visualSrh > li:last-child,
#section1 .visualSrh > li:last-child .tit {border-radius:0 24px 0 0;}
#section1 .visualSrh > li .tit {position:relative; display:flex; width:100%; height:100%; padding:0 20px; font-family:'SBaggro'; font-size:2.4rem; font-weight:500; bottom:0;    align-items: center; justify-content: space-between; transition:bottom 0.3s cubic-bezier(0.4,0,0.2,1);}
#section1 .visualSrh > li .tit .micon {display:flex; align-items: center; justify-content: flex-start; width:38px; height:20px; border-radius:10px; background:#e0e0e0; font-size:1.6rem; color:#B4B4B4; padding:2px;}
#section1 .visualSrh > li.on {border-left:none;     background: var(--color-main); box-shadow: 0 0 10px 0 rgba(4, 40, 89, 0.4);}
#section1 .visualSrh > li.on .tit{border-radius:24px; background:var(--color-main); color:#fff; font-weight:600; bottom:20px; padding: 20px 20px 0px 20px; font-size: 2.8rem;}
#section1 .visualSrh > li.on .tit .micon {background:#bddeff; justify-content: flex-end; color:var(--color-main);}
#section1 .visualSrh > li.on + li {border-left:none;}

#section1 .visualSrh > li:first-child.on {    box-shadow: 5px 0 10px 0 rgba(4, 40, 89, 0.2);}
#section1 .visualSrh > li:last-child.on {    box-shadow: -5px 0 10px 0 rgba(4, 40, 89, 0.2);}

#section1 .visualSrh > li .listcon {display:none; position:absolute; left:0; top:80px; width:100%; }
#section1 .visualSrh > li.on .listcon {display:flex;    background: var(--color-point);     box-shadow: 0 -5px 10px 0 rgba(4, 40, 89, 0.1);}
#section1 .visualSrh .listcon {display:flex; padding: 28px; background:#fff; border-radius: 0 0 25px 25px; gap:12px; border:2px solid var(--color-main);}
#section1 .visualSrh .listcon input[type="text"],
#section1 .visualSrh .listcon select {height: 80px; border-radius:40px; font-size:2.0rem; padding: 0 46px 0 24px;}
#section1 .visualSrh .listcon select {min-width:260px; background: #fff url(../img/arrow_down.svg) no-repeat right 20px top 50% !important}
#section1 .visualSrh .listcon .srhBtn {position:relative; display:flex; width:80px; height:80px; border-radius:100%; align-items: center; justify-content: center; flex-shrink: 0; background: #014099; background: linear-gradient(315deg,rgba(1, 64, 153, 1) 0%, rgba(50, 177, 243, 1) 50%, rgba(167, 227, 219, 1) 100%); color:#fff; }
#section1 .visualSrh .listcon .srhBtn .micon {font-size:3.2rem;}

#section1 .quickSec {position:relative; display:flex; width:100%; height:110px; flex-shrink: 0;     animation: ani_txt 1s both;    animation-delay: 0.5s;}
#section1 .quickSec .inner { gap:30px;}
#section1 .quickSec ul {position:relative; display:flex; width:100%; height:100%; gap:30px;}
#section1 .quickSec ul li {position:relative; width:100%; background:var(--color-point); border-radius:16px 100px 16px 16px; transition:0.3s;}
#section1 .quickSec ul li.list4,
#section1 .quickSec ul li.list5 {background: #36B7C4; background: linear-gradient(90deg,rgba(54, 183, 196, 1) 0%, rgba(14, 163, 232, 1) 100%);}
#section1 .quickSec ul li::before {content:''; display:block; position:absolute; top:0; right:44px; width:50px; height:24px;  background:var(--color-point); border-radius:0 12px 0 12px;}
#section1 .quickSec ul li::after {content:''; display:block; position:absolute; top:44px; right:0; width:24px; height:50px;  background:var(--color-point); border-radius:12px 12px 0 0;}
#section1 .quickSec ul li.list4::before,
#section1 .quickSec ul li.list5::before,
#section1 .quickSec ul li.list4::after,
#section1 .quickSec ul li.list5::after { background:#19A8DF; }
#section1 .quickSec ul li a {position:relative; display:flex; width:100%; height:100%; padding-top:52px; align-items: center; justify-content: center; flex-direction: column; font-size:2.0rem; font-family:'SBaggro';  background-image:url('../img/quick_ico01.svg'); background-position:center top 14px; background-repeat:no-repeat;}
#section1 .quickSec ul li a::after {content:url('../img/arrow-right.svg'); display:flex; position:absolute; top:-8px; right:-8px; width:52px; height:52px; background:var(--color-main); border-radius:100%; justify-content: center; padding-top:5px; border:8px solid #fff; transition: width 0.3s, background-color 0.3s;}
#section1 .quickSec ul li.list1 a {background-image:url('../img/quick_ico01.svg');}
#section1 .quickSec ul li.list2 a {background-image:url('../img/quick_ico02.svg');}
#section1 .quickSec ul li.list3 a {background-image:url('../img/quick_ico03.svg');}
#section1 .quickSec ul li.list4 a {background-image:url('../img/quick_ico04.svg'); color:#fff;}
#section1 .quickSec ul li.list5 a {background-image:url('../img/quick_ico05.svg'); color:#fff;}
#section1 .quickSec .yeyakBtn {position:relative; display:flex; width:calc(100% / 4); min-width:420px; padding-left:40px; height:100%; align-items: center; justify-content: center; flex-direction: row; gap: 6px; font-size:2.8rem; font-family:'SBaggro'; font-weight:600; color:#fff; background:#05A83C url('../img/quick_ico06.png') no-repeat; background-position: bottom left; border-radius:16px; flex-shrink: 0;}
#section1 .quickSec .yeyakBtn p {position:relative; display:flex; align-items: center; justify-content: center; height:35px; background:#EDF6FF; border-radius:16px; font-size:1.5rem; font-weight:500; padding: 0 18px; color:#151515; gap: 8px; transition:0.3s;}
#section1 .quickSec .yeyakBtn p::after {content:''; display:block; width:10px; height:10px; border-top:2px solid #151515; border-right:2px solid #151515; transform:rotate(45deg); margin-top:-4px;}
#section1 .quickSec .yeyakBtn:hover p {gap:24px;}

#section1 .quickSec ul li:has(a:hover),
#section1 .quickSec ul li:has(a:focus) {border-radius: 16px;}
#section1 .quickSec ul li a:hover::after,
#section1 .quickSec ul li a:focus::after {border:none; width:36px; height:36px;}


@keyframes ani_txt{
	0%{opacity:0; transform:translateY(-30px); }
	100%{opacity:1; transform:translateY(0);}
}


@keyframes ani_swing{
  from {
    transform: rotate(-5deg);
  }
  to {
    transform: rotate(5deg);
  }
}

@keyframes ani_swing2{
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(8deg);
  }
}

@keyframes ani_swing3{
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-3deg);
  }
}

@media (max-width: 1400px) { 
	#section1 .visualSrh .listcon input[type="text"], 
	#section1 .visualSrh .listcon select {min-width:200px; font-size:1.6rem;}
	#section1 .quickSec .yeyakBtn {min-width:300px;         background-size: 100px;     flex-direction: column; gap: 0; padding-left:0;}
	#section1 .quickSec .inner {gap:20px;}
	#section1 .quickSec ul {gap: 20px;}
}


@media (max-width: 1280px) {
	#section1 .textArea p {font-size:4.0rem;}
	#section1 .textArea span {font-size:2.4rem;}
	#section1 .visualSec {height: 600px;}
	#section1 .visualSrh {height: 179px;}
	#section1 .visualSrh > li {height: 60px;}
	#section1 .visualSrh > li .tit {font-size:1.8rem; padding:0 16px;}
	#section1 .visualSrh > li .tit .micon {width: 30px;}
	#section1 .visualSrh > li.on .tit {font-size:2.2rem; padding:24px 16px 0px 16px;}
	#section1 .visualSrh > li .listcon {top: 60px;}
	#section1 .visualSrh .listcon input[type="text"], #section1 .visualSrh .listcon select {height: 60px; min-width:160px;}
	#section1 .visualSrh .listcon .srhBtn {height: 60px; width:60px;}
	
	#section1 .quickSec .inner {gap: 30px;}
	#section1 .quickSec ul {gap: 20px;}
	#section1 .quickSec ul li a {font-size:1.6rem; z-index:1;}
	#section1 .quickSec .yeyakBtn {font-size:2.0rem;}
	#section1 .quickSec .yeyakBtn p {}
}


@media (max-width: 1024px) {
	#section1 {padding-bottom:0;}
	#main-container #section1 {padding-top:124px;}
	#section1 .visualSec {height: 540px; border-radius: 0 0 70px 70px;}
	#section1 .visualSec::after {width: 200px; height:200px; right:-10px; top:-10px;}

	#section1 .visualSrh {flex-direction: column; height: 300px;}
	#section1 .visualSrh::after {display:none;}
	#section1 .visualSec .inner {gap: 40px;}
	#section1 .visualSrh > li {width: 160px;}
	#section1 .visualSrh > li .tit {padding:0 12px;}
	#section1 .visualSrh > li.on {background:none;     border-radius: 24px 0 0 24px;}
	#section1 .visualSrh > li.on .tit {bottom:0; width: calc(100% + 10px) !important; left: -10px !important;         border-radius: 24px 0 0 24px; padding: 0 12px; font-size:1.8rem;}
	#section1 .visualSrh > li.on:first-child .tit {left:0; width: 100%; }
	#section1 .visualSrh > li.on:last-child .tit {right:0; width: 100%;}
	#section1 .visualSrh > li:last-child,
	#section1 .visualSrh > li:last-child .tit {border-radius:0 0 0 24px;}
	#section1 .visualSrh > li.on:last-child {border-radius: 24px 0 0 24px; width:182px;}
	#section1 .visualSrh > li.on:last-child .tit {border-radius: 24px 0 0 24px; padding: 0 36px 0 16px;}

	#section1 .visualSrh > li .listcon {left: 160px; top:0; width:calc(100% - 160px);     flex-wrap: wrap; border-radius: 0 25px 25px 25px;  height: 100%;    align-content: center;}
	#section1 .visualSrh .listcon input[type="text"], #section1 .visualSrh .listcon select {width: 100%; height: 50px;}
	#section1 .visualSrh .listcon input[type="text"].txt {width: calc(100% - 72px);}
	#section1 .visualSrh .listcon select.wd100 {width: calc(100% - 72px);}
	#section1 .visualSrh .listcon .srhBtn {width: 50px; height: 50px;}
	
	#section1 .quickSec {height:auto;}
	#section1 .quickSec .inner {flex-direction: column; gap: 20px;}
	#section1 .quickSec ul {width:100%;}
	#section1 .quickSec ul li {height:100px;}
	#section1 .quickSec ul li::after {height: 40px;}
	#section1 .quickSec .yeyakBtn { width: 100%; flex-direction: row; height: 60px; gap: 8px;}


}

@media (max-width: 768px) {
	#section1 {gap: 20px;}
	#main-container #section1 {padding-top:0;}
	#section1 .visualSec {background-size: cover; border-radius: 0 0 35px 35px;}
	#section1 .visualSrh > li .tit {font-size:1.6rem;}	
	#section1 .quickSec .inner {gap: 10px;}
	#section1 .quickSec ul {flex-wrap: wrap; gap: 4px 8px;}
	#section1 .quickSec ul li {height: 80px; width: calc(100% / 2 - 8px);}
	#section1 .quickSec ul li a {padding-top: 35px; background-size:40px 40px; background-position: center top 8px;}
	#section1 .quickSec ul li::after {height: 20px;}
}


@media (max-width: 600px) {
	#section1 .textArea p {font-size:3.0rem;}
	#section1 .textArea span {font-size:1.6rem;}
	#section1 .visualSec {height: 460px;    }
	#section1 .visualSec::after {display:none;}
	#section1 .visualSec .inner {gap: 20px;}
	#section1 .visualSrh > li .tit {font-size:1.4rem;}	
	#section1 .visualSrh > li  {width: 120px;}
	#section1 .visualSrh > li .tit .micon {display: none;}
	#section1 .visualSrh > li.on .tit {font-size:1.6rem;}
	#section1 .visualSrh > li.on .listcon {left:120px; width: calc(100% - 120px); padding: 16px;}
	#section1 .visualSrh .listcon input[type="text"], #section1 .visualSrh .listcon select {font-size:1.4rem;}

	#section1 .quickSec ul li {width: calc(100% / 2 - 4px) !important;}
	#section1 .quickSec ul li a {font-size: 1.4rem;}
	#section1 .quickSec .yeyakBtn {height: 80px; font-size: 1.4rem; border-radius: 10px; flex-direction: column;}
	#section1 .quickSec .yeyakBtn p {font-size: 1.3rem; height: 24px;}
	#section1 .quickSec .yeyakBtn p::after {height:8px; width: 8px;}

	#section1 .textArea  {text-align:center;}
	#section1 .visualSrh .listcon input[type="text"].txt {padding: 0 12px 0 8px;}
}

@media (max-width: 480px) {
	#section1 .visualSrh .listcon input[type="text"], #section1 .visualSrh .listcon select {height: 40px;}
	#section1 .visualSrh .listcon input[type="text"].txt,
	#section1 .visualSrh .listcon select.wd100 {width: 100%;}
	#section1 .visualSrh .listcon select {background-size: 16px 16px !important; padding:0 42px 0 12px;}
	#section1 .visualSrh .listcon .srhBtn {width: 100%; border-radius: 20px; height:40px;}
}


/* section2 */
#section2 .inner {height:100%;     align-items: center;}
#section2 .rocaSec {display: flex; position:relative; width:100%;}
#section2 .rocaSec .bookoption { width:250px; flex-shrink: 0;}
#section2 .rocaSec .bookoption .tit {font-size:2.8rem; font-weight:500; padding-bottom:40px; font-family: 'SBaggro';}
#section2 .rocaSec .bookoption .optlist {position:relative; display:flex; width:100%;     flex-direction: column; counter-reset: item;}
#section2 .rocaSec .bookoption .optlist li {position: relative; height:80px; counter-increment: item; padding-left:60px;}
#section2 .rocaSec .bookoption .optlist li a {position:relative; display:flex; width:100%; height:100%;  align-items: center; padding-left:20px; font-size:2.0rem; color:#5f6d83; border-bottom: 1px solid #CAD8E6; gap: 10px;}
#section2 .rocaSec .bookoption .optlist li a::before {content: counter(item, decimal-leading-zero) " "; display:block; position:relative; font-size:1.6rem;}
#section2 .rocaSec .bookoption .optlist li a.on {width: calc(100% + 100px); z-index:1; left:-40px; padding-left:0; background:var(--color-sub); font-size:2.7rem; font-weight:500; background-image:url('../img/arrow-right.svg'); background-repeat:no-repeat; background-position:center right 10px; color:#fff; border-radius:35px;  box-shadow: 0px 4px 4px rgba(151.61, 148.45, 148.45, 0.25); font-family:'SCD';}
#section2 .rocaSec .bookoption .optlist li a.on::before {width:70px; height:70px; border-radius:100%; background:var(--color-main); display:flex; align-items: center; justify-content: center;}
#section2 .rocaSec .booklist {position:relative; min-height:500px; width:calc(100% -  250px); height: calc(100vh - 255px); padding: 30px; background:#E1EFFC; border-radius:30px;}
#section2 .rocaSec .booklist .bookcon {position:relative; display:flex; width:100%; height:100%;}
#section2 .rocaSec .booklist .main-local {position:relative; display:block; width:100%; height:100%; }
#section2 .rocaSec .booklist .main-local .head-aside {display:flex; position:absolute; z-index:1; right:20px; top:10px; gap:4px; align-items: center; justify-content: center;}
#section2 .rocaSec .booklist .main-local .head-aside select {background-color:#fff;}
#section2 .rocaSec .booklist .main-local .head-aside .btn-more {display:flex; height:36px; padding:0 8px; align-items: center; border-radius:4px; background:var(--color-main); color:#fff;}
#section2 .booklist .detaillist {position:relative; display:none; height:calc(100% - 50px); background:#fff; border-radius:10px 10px 0 0; width:600px; flex-shrink: 0;}
#section2 .booklist .detaillist.on {display:block;}
#section2 .booklist .detaillist ul {position:relative;  height:100%; overflow-x:auto;}
#section2 .booklist .detaillist li + li {border-top: 1px solid #DBDBDB;}
#section2 .booklist .detaillist li {position:relative; display:flex; flex-direction: column; padding:30px; gap: 10px;}
#section2 .booklist .detaillist li .top {position:relative; display:flex; justify-content: space-between; align-items: center;}
#section2 .booklist .detaillist li .top .statelist {display:flex; gap:6px;}
#section2 .booklist .detaillist li .top .statelist li {padding:4px 16px; border-radius:14px; font-size:1.3rem; background:#555555; color:#fff;     flex-shrink: 0;}
#section2 .booklist .detaillist li .top .statelist .free {background: #0A54A1;}
#section2 .booklist .detaillist li .top .statelist .notfree {background: #FF3B3B;}
#section2 .booklist .detaillist li .top .statelist .able {background: #05A83C;}
#section2 .booklist .detaillist li .top .statelist .able.firstcome {background: #555555;}
#section2 .booklist .detaillist li .top .statelist .firstcome {background: #555;}
#section2 .booklist .detaillist li .top .statelist .pink {background: rgb(255, 138, 185);}
#section2 .booklist .detaillist li .top .statelist .ext {background: rgb(252, 141, 1);}
#section2 .booklist .detaillist li .top .recomlist {display:flex; font-size:1.4rem; color:#555;}
#section2 .booklist .detaillist li .top .recomlist p + p {position:relative; padding-left:16px;}
#section2 .booklist .detaillist li .top .recomlist p + p::before {content:''; display:block; position:absolute; left: 8px; top:20%; height:60%; width:1px; background:#555;}
#section2 .booklist .detaillist li .tit {display:block; font-size:2.0rem; font-weight:600;}
#section2 .booklist .detaillist li .info {display:flex; width:100%; padding:0 15px; height:40px; background:#F4F4F4; border-radius:4px; gap:10px; font-size:1.4rem; align-items: center; overflow:auto;}
#section2 .booklist .detaillist li .info p { flex-shrink: 0}
#section2 .booklist .detaillist li .info .notfree {color:#FF3B3B; font-weight:600;}
#section2 .booklist .detaillist li .info .free {color:#0A54A1; font-weight:600;}
#section2 .booklist .detaillist li.none {width:100%; height:100%; align-items: center;  justify-content: center; background:url(/humanframe/theme/reserv/assets/renew2025/img/noList.png) no-repeat center; background-size:contain;}
#section2 .booklist .detaillist:has(.none) {height:100%; border-radius:10px;}
#section2 .booklist .detaillist .allBtn {position:absolute; bottom:-50px; left:0; display:flex; width:100%; height: 50px; background:var(--color-main); color:#fff; font-size:2.0rem; border-radius: 0 0 10px 10px; font-family:'SCD';     align-items: center;  justify-content: center; transition:0.3s;}
#section2 .booklist .detaillist .allBtn:hover,
#section2 .booklist .detaillist .allBtn:focus {background:#0a4eab;}



#section2 .inner::after {content:''; position:absolute; left:38px; bottom:26px; width:364px; height: 288px; z-index:0; background:url('../img/sec02bg_chara.png') no-repeat center; background-size:contain;}


/* 지도 */
.main-local-map-mobile { display: none; background-color: #F4F4F4; }
.main-local-map-mobile select.list-of-states { background-color: #fff; height: 42px; width: 100%; align-items: center; justify-content: center; border-radius: 12px; }
.main-local-map-mobile ul.list-of-states { display: grid; gap: 15px; grid-template-columns: repeat(6, 1fr); }
.main-local-map-mobile ul.list-of-states > li > a { display: flex; background-color: #fff; height: 42px; width: 100%; align-items: center; justify-content: center; border-radius: 12px; }
.local-select-wrap select { appearance: none; position: relative; width: 152px; height: 36px; background: #fff; border: 1px solid #DDD; border-radius: 4px; padding: 4px 20px 4px 20px; margin-right: 0; background: url(/humanframe/theme/reserv/assets/renew2024/img/main-local-select-arw.svg) no-repeat center; background-position: calc(100% - 20px) 50%; font-size: 16px; font-family: "Noto Sans Korean"; font-weight: 600; }
.local-select-wrap ul.list-of-states > li { display: none; }
.local-select-wrap ul.list-of-states > li > a { display: flex; background-color: #fff; height: 26px; width: 100%; align-items: center; }
.local-select-wrap ul.list-of-states > li.active { display: flex; align-items: center; }
.main-local-map { background-color:transparent; border:none; display:flex; gap:0; position:relative; width:100%; height:100%; align-items: center; background-image:url(/humanframe/theme/reserv/assets/renew2024/img/main-local-background-noline.png); background-repeat:no-repeat; background-position:center;  padding:35px 40px; }
.main-local-map .now-location { position: absolute; top: 10px; left: 16px; z-index: 1; display: inline-flex; align-items: center; color: #555555; font-size:1.6rem; }
.main-local-map .now-location::after { content: ""; width: 20px; height: 20px; background: url(/humanframe/theme/reserv/assets/renew2024/img/main-local-target.svg); }
.main-local-map .map-wrap { text-align: center; flex: 1 1 auto; }
.main-local-map .map-wrap .map-svg-wrap { position: relative; width: 482px;  height: 448px; margin: 0 auto; }
.main-local-map .map-wrap .map-svg-wrap .iframe-map { width: 100%; height: 100%; margin: 0 auto; overflow: hidden; }
.main-local-map .map-wrap .map-svg-wrap .svg-states { width: 100%; height: 100%; margin: 0 auto; }
.main-local-map .map-wrap .map-svg-wrap .svg-states path, .main-local-map .map-wrap .map-svg-wrap .svg-states .local { position: relative; }
.main-local-map .map-wrap .map-svg-wrap .svg-states path.on, .main-local-map .map-wrap .map-svg-wrap .svg-states .local.on { fill: #009CF3 !important; transition: all 0.4s; outline: 0; }
.main-local-map .map-wrap .map-svg-wrap .svg-states path:focus, .main-local-map .map-wrap .map-svg-wrap .svg-states path:hover, .main-local-map .map-wrap .map-svg-wrap .svg-states .local:focus, .main-local-map .map-wrap .map-svg-wrap .svg-states .local:hover { fill: #009CF3; transition: all 0.4s; box-shadow: -4px -10px 18px rgba(0,0,0,0.12); outline: 0; }
.main-local-map .map-wrap .map-svg-wrap .local-flag { display: inline-block; width: 22px; height: 28px; position: absolute; opacity: 0; background: transparent url(/humanframe/theme/reserv/assets/renew2024/img/main-local-icon-gps.svg) no-repeat; background-position: center top; }
.main-local-map .map-wrap .map-svg-wrap .local-flag.on { opacity: 1; transition: all 0.4s; }
.main-local-map .map-wrap .map-svg-wrap .local-flag .local-name { position: absolute; left: 50%; top: -24px; height: 24px; transform: translate(-50%,0); display: inline-flex; align-items: center; background: #03649A; border-radius: 6px; padding: 6px 10px; color: #fff; font-size: 1.4rem; font-weight: 600; line-height: 1; white-space: nowrap; text-align: center; }
.main-local-map .type-select-wrap { flex: 0 0 auto; display: flex; align-items: center; }
.main-local-map .type-select-wrap .type-select-list { display: flex; flex-direction: column; gap: 5px; width: 100%; }
.main-local-map .type-select-wrap .type-select-list > li { width: 240px; }
.main-local-map .type-select-wrap .type-select-list > li .type-select { display: flex; align-items: center; width: 100%; height: 42px; position: relative; gap: 16px; background: #fff; border-radius: 8px; padding: 0 0 0 16px; justify-content: space-between; }
.main-local-map .type-select-wrap .type-select-list > li .type-select i { flex: 0 0 auto; width: 18px; height: 18px; }
.main-local-map .type-select-wrap .type-select-list > li .type-select i img { max-width: 100%; max-height: 100%; }
.main-local-map .type-select-wrap .type-select-list > li .type-select .type-name { font-size: clamp(12px,10px + 0.5vw,16px); color: #333; font-weight: 400; line-height: 1.25; }
.main-local-map .type-select-wrap .type-select-list > li .type-select .type-number { flex: 1 1 auto; width: 40px; text-align: right; justify-content: flex-end; font-family: "GmarketSans"; color: #171717; font-weight: 700; font-size: 18px; line-height: 1; white-space: nowrap; }
.main-local-map .type-select-wrap .type-select-list > li .type-select::after { content: ""; display: inline-block; flex: 0 0 auto; width: 40px; height: 100%; border-left: 1px solid #ECF1F5; background: url(/humanframe/theme/reserv/assets/renew2024/img/main-sisul-arw.svg) no-repeat center; background-position: 50% 50%; }
.main-local-map .type-select-wrap .type-select-list > li .type-select:focus, .main-local-map .type-select-wrap .type-select-list > li .type-select:hover { border: 1px solid #009CF3; box-shadow: 0 4px 4px rgba(0,0,0,0.1); }
.main-local-map .type-select-wrap .type-select-list > li .type-select:focus .type-number, .main-local-map .type-select-wrap .type-select-list > li .type-select:hover .type-number { color: #009CF3; }


@media (max-width: 1600px) { 
	#section2 .rocaSec .bookoption {width: 200px;}
	#section2 .rocaSec .bookoption .optlist li {padding-left:20px;}

	#section2 .booklist .detaillist {width: 500px;}
	#section2 .booklist .detaillist li {padding: 20px;}
	#section2 .booklist .detaillist li .top {justify-content: space-between; align-items: flex-start; flex-direction: column; gap: 4px;}
	#section2 .booklist .detaillist li .top .statelist li {font-size:1.2rem;}
	.main-local-map .map-wrap .map-svg-wrap {width:382px; height: 348px;}

	#section2 .inner::after {left:0; width:300px;}

}
@media (max-width: 1440px) { 
	#section2 .booklist .detaillist li .top {    align-items: flex-start;    flex-direction: column; gap: 4px;}
	#section2 .booklist .detaillist {width: 400px;}
	#section2 .booklist .detaillist li .tit {font-size:1.8rem;}
	#section2 .booklist .detaillist .allBtn {font-size:1.8rem;}
}

@media (max-width: 1280px) { 
	#section2 {height:auto;}
	.main-local-map { width: 100%; }
	.main-local-map .map-wrap { width: clamp(382px, 100% - 60px, 80%); }
	.main-local-map .type-select-wrap { width: 40%; }
	.main-local-map .type-select-wrap .type-select-list > li { width: 100%; }
	
	#section2 .rocaSec .booklist {height: 870px; padding:50px 30px 30px 30px; width: calc(100% - 200px);}
	#section2 .rocaSec .booklist .bookcon {flex-wrap: wrap; align-content: flex-start;}
	#section2 .rocaSec .bookoption .tit {padding-bottom: 20px;}
	#section2 .rocaSec .bookoption .optlist li a {font-size:1.6rem;}
	#section2 .rocaSec .bookoption .optlist li a.on {font-size:2.0rem; }
	#section2 .rocaSec .booklist .main-local {height: 400px;}
	#section2 .booklist .detaillist {width: 100%; height: 330px;}
	#section2 .booklist .detaillist:has(.none) {height:380px;}
	#section2 .booklist .detaillist li .top {flex-direction: row; justify-content: space-between;}

	.main-local-map .now-location {top: -25px;}
	#section2 .rocaSec .booklist .main-local .head-aside {top:-26px; right:0;}

	#section2 .inner::after {height:200px; width:272px;}


}

@media (max-width: 1024px) { 
	#section2 .rocaSec {flex-direction: column;}
	#section2 .rocaSec .booklist {width: 100%; border-radius: 0 0 30px 30px;}
	#section2 .rocaSec .bookoption {width: 100%;}
	#section2 .rocaSec .bookoption .optlist {gap: 4px; flex-wrap: wrap;     flex-direction: row; background:#E1EFFC; border-radius:30px 30px 0 0; padding: 16px;}
	#section2 .rocaSec .bookoption .optlist li {width: calc(100% / 3 - 6px); padding:0; height: 50px;}
	#section2 .rocaSec .bookoption .optlist li a {border:1px solid #CAD8E6; border-radius:25px; background:#fff;}
	#section2 .rocaSec .bookoption .optlist li a.on {width:100%; left:0; font-size:1.6rem;}
	#section2 .rocaSec .bookoption .optlist li a.on::before {width: 50px; height: 50px;}
	#section2 .inner::after {display:none;}
}

@media (max-width: 768px) { 
	.main-local-map { height: auto; flex-direction: column; padding: 40px 10px 10px 10px; ; justify-content: center; } 
	.main-local-map .now-location { top: -36px; left: 0;}
	.main-local-map .map-wrap { width: 100%; }
	.main-local-map .type-select-wrap { width: 100%; }
	.main-local-map .type-select-wrap .type-select-list { flex-direction: row; flex-wrap: wrap; }
	.main-local-map .type-select-wrap .type-select-list > li { width: calc(50% - 2.5px); }
	 .main-local-map .type-select-wrap .type-select-list > li .type-select::after { width: 26px; }
	#section2 .rocaSec .booklist .main-local .head-aside {top:-36px; right:0;}

	.main-local-map {padding:10px 0;}
	#section2 .booklist .detaillist li .top {    align-items: flex-start;    flex-direction: column; gap: 4px;}
}

@media (max-width: 600px) { 
	#section2 .rocaSec .bookoption .optlist li {width: calc(100% / 2 - 8px); height: 40px;}
	.main-local-map .map-wrap {display: none;}
	.main-local-map .now-location {width: 100%; text-align:center; justify-content: center;   position: relative; top:-45px;}
	#section2 .rocaSec .booklist .main-local {height: 50px;}
	#section2 .rocaSec .booklist .main-local .head-aside {top: 0; width: 100%;}
	#section2 .rocaSec .booklist {height: 470px; padding: 30px 16px 16px 16px;}
	#section2 .booklist .detaillist li .top .recomlist {font-size: 1.3rem;}
	#section2 .booklist .detaillist li .top .statelist li {padding: 2px 8px;}
	#section2 .booklist .detaillist li {padding: 16px;}
	#section2 .booklist .detaillist li .info {font-size:1.3rem; height: 36px;}

	#section2 .rocaSec .bookoption .optlist li a {height: 40px; font-size:1.4rem;}
	#section2 .rocaSec .bookoption .optlist li a.on {font-size:1.4rem;}
	#section2 .rocaSec .bookoption .optlist li a.on::before {width: 40px; height: 40px;}
	
	#section2 .rocaSec .booklist .main-local .head-aside .local-select-wrap {width: 100%;}
	.local-select-wrap select {width: 100%;}
	#section2 .rocaSec .booklist .main-local .head-aside .btn-more {flex-shrink: 0;}
	#section2 .booklist .detaillist .allBtn {font-size:1.6rem; height: 40px; bottom:-40px;}
}


@media (max-width: 480px) { 
	.main-local-map .type-select-wrap .type-select-list > li .type-select { gap: 4px; padding: 4px 10px; } 
	.main-local-map .type-select-wrap .type-select-list > li .type-select .type-number { width: auto; }
}


@media (max-width: 430px) { 
	.main-local-map .map-wrap { display: none; } 
	#section2 .rocaSec .bookoption .optlist li a::before,
	#section2 .rocaSec .bookoption .optlist li a.on::before {display:none;}
	#section2 .rocaSec .bookoption .optlist li a.on {padding-left: 20px; background-image:none;}

}

@media (max-width: 360px) { 
	.main-local-map .type-select-wrap .type-select-list > li { width: 100%; } 
}

@media (max-width: 320px) { 
	.main-local-map-mobile { display: block; } 
}









/* section3 */
#main-container #section3 { }
#section3 .inner {height:100%; justify-content: center; gap:60px;     align-items: center;}
#section3 .titWrap {position:relative; display:flex; justify-content: space-between; }
#section3 .titWrap .tit {font-size:2.8rem; font-family:'SBAggro';}

#section3 .notice-wrap,
#section3 .banner-wrap {width:50%; display: flex; flex-direction: column; justify-content: center; gap:30px; height: 470px;}


#section3 .notice-wrap {position:relative;}
#section3 .notice-wrap .notice-list {height:406px;}
#section3 .notice-wrap .more {position:absolute; right:0; top:8px;}

#section3 .notice-wrap ul {position:relative; display:flex; width:100%; height:100%; flex-direction: column; gap:12px;}
#section3 .notice-wrap ul li { position: relative; display: inline-flex; align-items: center; padding: 24px; width: 100%;  overflow: hidden; text-overflow: ellipsis; height: calc(100% / 5); border-radius:10px; background:var(--color-point);}
#section3 .notice-wrap ul li a {display:inline-block; width: calc(100% - 130px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; font-size:2.0rem;}
#section3 .notice-wrap ul li .label {display:inline-block; background:#fff; width:130px; padding:6px 0; text-align:center; border-radius: 16px; font-size:1.8rem; margin-right:8px; flex-shrink: 0; }
#section3 .notice-wrap ul li .label.oper {color:#2675E2;}
#section3 .notice-wrap ul li .label.city {color:#147800;}
#section3 .notice-wrap ul li  .date { position: relative; width:130px; color:var(--color-g6); font-size: 1.8rem; text-align:right;}


#noticeSec .noticeArea { display:flex; position: relative; width: calc(100% / 3 * 2 - 30px); height:100%; flex-direction: column; justify-content: space-between; }
#noticeSec .noticeArea .more {position:relative;}
#noticeSec .noticeArea .notiList { display: flex; flex-direction: column; gap: 0; padding: 30px; width: 100%; height:280px; ;border: 1px solid var(--color-g4);}
#noticeSec .noticeArea .notiList li { position: relative; display: inline-flex; align-items: center; padding: 10px 0px; width: 100%; font-size:2.0rem; overflow: hidden; text-overflow: ellipsis; height: calc(100% / 5);}
#noticeSec .noticeArea .notiList li .label {background:#fff; width:130px; padding:0 6px; text-align:center; border-radius: 16px; font-size:1.8rem; font-weight:500;}
#noticeSec .noticeArea .notiList li .label.oper {color:#2675E2;}
#noticeSec .noticeArea .notiList li .label.city {color:#147800;}

#noticeSec .noticeArea .notiList li a.txt {display:inline-block; width: calc(100% - 130px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500;}
#noticeSec .noticeArea .notiList li .date { position: relative; width:130px; color:var(--color-g6); font-size: 1.8rem; text-align:right;}


#section3 .banner-wrap {  position: relative;}
#section3 .banner-wrap .banner-control {display: inline-flex; align-items: center;}
#section3 .banner-wrap .banner-control .count { display: inline-block; font-size: 14px; color: #444; font-weight: 400; width: auto; line-height: 1;}
#section3 .banner-wrap .banner-control .count .swiper-pagination-total { font-size: 14px; color: #444; font-weight: 400; margin-right: 8px; min-width: 18px;}
#section3 .banner-wrap .banner-control .count .swiper-pagination-current { display: inline-block; font-size: 14px; color: #2675E2; font-weight: 500; margin-right: 0px; min-width: 18px;}
#section3 .banner-wrap .banner-control .btn-control {display: inline-flex; align-items: center;}
#section3 .banner-wrap .banner-control .btn-control a { display: inline-block; background-repeat: no-repeat; width: 24px; height: 24px;}
#section3 .banner-wrap .banner-control .btn-control a + a { margin-left: 2px;}
#section3 .banner-wrap .banner-control .btn-control a.banner-prev { background: url(/humanframe/theme/reserv/assets/img/2023_main/left_btn.png) no-repeat center;}
#section3 .banner-wrap .banner-control .btn-control a.banner-next { background: url(/humanframe/theme/reserv/assets/img/2023_main/right_btn.png) no-repeat center;}
#section3 .banner-wrap .banner-control .btn-control a.banner-stop {background: url(/humanframe/theme/reserv/assets/img/2023_main/pause_btn.png) no-repeat center;}
#section3 .banner-wrap .banner-control .btn-control.active .banner-stop { background: url(/humanframe/theme/reserv/assets/img/2023_main/play_btn.png) no-repeat center;}

#section3 .banner-wrap .banner-slide {position: relative; height:fit-content; height:406px; border-radius:30px; overflow:hidden; width:100%;}
#section3 .banner-wrap .banner-slide .swiper-slide { position: relative; width: 100%;}

#section3 .banner-wrap .banner-slide .swiper-slide a img {height:100%; width:100%;}


@media (max-width: 1600px) { 
	#section3 .banner-wrap .banner-slide .swiper-slide a {display:block; height: 100%;}
	#section3 .banner-wrap .banner-slide .swiper-slide a img {height: 100%;}
}


@media (max-width: 1280px) { 
	#main-container #section3 { padding-top:60px;}
	#section3 {padding-bottom:60px;}
	#main-container #section3 .inner {flex-direction: column; gap:40px;}
	#section3 .notice-wrap, #section3 .banner-wrap {width: 100%; gap: 16px; height: auto;}
	#section3 .notice-wrap .notice-list {height: 360px;}
	#section3 .notice-wrap ul li {padding: 16px;}
	#section3 .notice-wrap ul li a {font-size:1.6rem;}
	#section3 .notice-wrap ul li .date {font-size:1.6rem;}
	#section3 .notice-wrap ul li .label {font-size:1.6rem;}
	#section3 .notice-wrap .more {top:0;}

	#section3 .banner-wrap .banner-slide .swiper-slide a img {position: absolute;     left: 0;top: 0; width: 100%; height: 100%; max-width: 100%; min-height: 100%;  object-fit: cover; object-position: center;}
	#section3 .banner-wrap .banner-slide .swiper-slide a {display:block; position:relative; width:100%; padding-top:59%; overflow:hidden;}
	#section3 .banner-wrap .banner-slide {position: relative; width: 100%;}
	#section3 .banner-wrap .banner-slide {height: auto;}
}
@media (max-width: 768px) {  
	#section3 .notice-wrap ul li .label {font-size:1.3rem; width: 100px;}
	#section3 .banner-wrap .banner-slide {border-radius: 10px;}
	#section3 .notice-wrap .notice-list {height:auto;}
	#section3 .notice-wrap ul li {padding: 16px; height: auto;}
}

@media (max-width: 480px) {  
	#section3 .notice-wrap ul li {padding: 16px 12px;flex-wrap: wrap; justify-content: space-between; gap:4px;}
	#section3 .notice-wrap ul li .label {font-size:1.3rem; width: 100px;}
	#section3 .notice-wrap ul li a {order:2; width:100%; padding: 0 4px; font-size:1.4rem;}
}