@charset "UTF-8";

:root {
	--p_color : #2f50af !important;
	--gap-x-100 : 0 100rem;
	--gap-y-40 : 40rem 0;
	--border-radius-20 : 20rem;
	--padding-15:15rem;
	--padding-25:25rem;
	--padding-35:35rem;
	--margin--15:-15rem;
}

body {font-family:'Paperlogy', '맑은 고딕', sans-serif; font-weight:400; font-size:16rem; color:#323232; letter-spacing:0; }
input, button, textarea, select {font-family:'Pretendard GOV Variable', '맑은 고딕', sans-serif; font-weight:400; font-size:16rem; color:#323232; letter-spacing:-0.3rem;}
button, input[type="submit"] {cursor:pointer;}
h1, h2, h3, h4, h5 {font-size:17rem; line-height:1.4;}
a {color:#323232;}
b, strong {font-weight:600;}

.wrap {width:100%; max-width:1400rem; margin:0 auto;}

@media all and (max-width:1840px){
	:root {
		--gap-x-100 : 0 40rem;
		--border-radius-20 : 10rem;
	}
	html {font-size:0.95px;}
	.wrap {max-width:100%; padding:0 40rem;}
}
@media all and (max-width:1240px) {
	:root {
		--padding-15:10rem;
		--padding-35:25rem;
		--margin--15:-10rem;
	}
}
@media all and (max-width:1023px) {
	:root {
		--gap-x-100 : 0 20rem;
	}
	.wrap {padding:0 20rem;}
}
@media all and (max-width:768px) {
	:root {
		--padding-15:7rem;
		--margin--15:-7rem;
	}
	html {font-size:0.9px;}
}
@media all and (max-width:599px){
	:root {
		--padding-15:0 0 14rem 0;
		--margin--15:0 0 -14rem 0;
	}
}

.custom_alam,
.facility_btn {
	border-radius:40rem; color:#fff; padding:7rem 17rem; /*box-shadow:10rem 10rem 10rem rgba(0,0,0,0.1);*/ 
}
.custom_alam {background: linear-gradient(90deg,rgba(54, 146, 68, 1) 0%, rgba(20, 150, 241, 1) 100%);  margin-left:10rem;}
.facility_btn {background: linear-gradient(90deg,rgba(194, 21, 0, 1) 0%, rgba(255, 197, 0, 1) 100%);  margin-left:25rem;}
@media all and (max-width:1240px){
	.custom_alam,
	.facility_btn {
		box-shadow:10rem 10rem 10rem rgba(0,0,0,0.1)
	}
	.custom_alam {position:fixed; bottom:20rem; left:20rem; margin:0;}
	.facility_btn {position:fixed; bottom:70rem; left:20rem; margin:0;}
}

.social {display:flex; align-items:center; margin-left:10rem;}
.social a {display:block; width:40px; height:40px; background:url('/design2025/birthsupport/img/sub/social.png') no-repeat 0 0/200% auto; text-indent:-9999rem; margin:5rem;}
.social a.twitter {background-position:100% 0;}
@media all and (max-width:599px){
  .social {display:none;}
}

.slick-slide li {display:block !important;}

.control {display:flex; flex-grow:0; flex-shrink:0;}
.control a {display:block; width:32rem; height:32rem; border-radius:50%; text-indent:-9999rem; border:1px solid #C8C8C8; margin:0 3rem; position:relative;}
.control a.play {display:none;}
.control a::before {content:''; position:absolute; top:50%; left:50%; width:24rem; height:24rem; background:url('/design2025/birthsupport/img/layout/control.png') no-repeat 0 0/400% auto; transform:translate(-50%, -50%);}
.control a.prev::before {background-position:0 0;}
.control a.next::before {background-position:100% 0;}
.control a.play::before {background-position:66.666% 0;}
.control a.stop::before {background-position:33.333% 0;}

.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 300; opacity: 0; visibility: hidden; transition: all 0.5s; } 
.modal::before { content: ""; width: 100%; height: 100%; position: fixed; display: block; flex-shrink: 0; flex-grow: 0; background: url(cover) no-repeat 0 0/0; background: #000000; opacity: 0.7; } 
.modal > div { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; } 
.modal .wrap { position: relative; z-index: 2; } 
.modal.on { opacity: 1; visibility: visible; } 


/*header*/
#header {display:flex; align-items:center; justify-content:space-between; position:absolute; width:100%; padding:var(--gap-x-100); padding-top:27rem; padding-bottom:0; z-index:100;}
#header .left {display:flex; align-items:center; }
#header .left .logo {padding-left:10rem;}
#header .left .logo a {display:block; position:relative; width:218rem; height:55rem;  background:url('/design2025/birthsupport/img/layout/logo.svg') no-repeat center/contain; text-indent:-9999rem;}
#header .right {display:flex; align-items:center; padding-right:10rem;}
#header .user {display:flex;}
#header .user .icon {display:inline-flex; align-items:center; margin-left:27rem;}
#header .user .icon::before {content:''; flex-shrink:0; flex-grow:0; width:32rem; height:32rem; margin-right:14rem; background:url('/design2025/birthsupport/img/layout/icon1.png') no-repeat 0 0/300% auto;}
#header .user .icon.out:before {background-position:0 0;}
#header .user .icon.in:before {background-position:50% 0;}
#header .user .icon.mypage:before {background-position:100% 0;}
@media all and (max-width:1840px){
	#header {padding-top:30rem;}
	#header .left .logo a {width:190rem; height:48rem;}
}
@media all and (max-width:1240px){
	#header {padding-top:25rem;}
	#header .left .logo a {width:170rem; height:43rem;}
	#header .right {padding-right:0;}
	#header .user {display:flex;}
	#header .user .icon {display:flex; flex-direction:column; font-size:14rem; font-weight:500; margin-left:15rem;}
	#header .user .icon::before {margin-right:0; margin-bottom:7rem; width:24rem; height:24rem;}
}
@media all and (max-width:599px){
	#header .left .logo {padding-left:0;}
}
@media all and (max-width:321px){
	#header .user .icon {width:32rem; height:32rem; background:url('/design2025/birthsupport/img/layout/icon1.png') no-repeat 0 0/300% auto; margin-left:10rem; text-indent:-9999rem;}
	#header .user .icon::before {display:none;}
	#header .user .icon.out {background-position:0 0;}
	#header .user .icon.in {background-position:50% 0;}
	#header .user .icon.mypage {background-position:100% 0;}
}

/*footer*/
#footer {padding:var(--gap-x-100); padding-top:60rem; padding-bottom:60rem; text-align:center;}
#footer small {display:block;  margin-top:21rem; color:#626262; font-size:14rem;}
#footer .add {display:flex; justify-content:center; margin:0 -15rem;}
#footer .add>* {margin:0 15rem;}
#footer .add b {display:inline-block; margin-right:10rem; font-weight:500;}
@media all and (max-width:1240px){
	#footer .add {flex-wrap:wrap; justify-content:flex-start; margin:0;}
	#footer .add>* {margin:0 0 5rem 0; width:100%;}
	#footer .add>*:last-child {margin-bottom:0;}
}
@media all and (max-width:480px){
	#footer {text-align:left; /*padding-top:40rem;*/ padding-bottom:40rem;}
	#footer small {text-align:left; margin-top:40rem; }

}

.vis {background:#FFF0D9; padding:var(--gap-x-100); border-bottom:1px solid #f0dbba; position:relative;}
.vis:before,
.vis:after {content:''; position:absolute; bottom:0;}
.vis:before {left:0; width:581rem; height:179rem; background:url('/design2025/birthsupport/img/main/bg1.png') no-repeat 0 0/contain;}
.vis:after {right:0; width:570rem; height:210rem; background:url('/design2025/birthsupport/img/main/bg2.png') no-repeat 0 0/contain;}
.vis .tit {font-size:40rem; font-weight:700; text-align:center; line-height:1.35; position:relative; z-index:1;}
@media all and (max-width:1840px){
  .vis:before {width:481rem; height:148rem;}
  .vis:after {width:470rem; height:172rem; }
}
@media all and (max-width:1440px){
	.vis:before {left:-90rem; width:381rem; height:117rem;}
	.vis:after {right:-90rem; width:370rem; height:135rem;}
	.vis .tit {font-size:38rem;}
}
@media all and (max-width:1023px){
	.vis .tit {font-size:34rem;}
}
@media all and (max-width:599px){
  .vis:before,
  .vis:after {display:none;}
}