@charset "utf-8";
@import url('/design2024/common/css/NanumSquareNeo.css');

/*common*/
::-webkit-scrollbar { width:18px; }
::-webkit-scrollbar-thumb {  border:5px solid #ffe08b; border-radius:20px; background:rgba(0,0,0,0.5); }
::-webkit-scrollbar-track { background:rgba(255,255,255,0); }

html { font-size:1px; }
body {position:relative; background:#ffe08b; }
body::before {content:''; position:absolute; left:50%; top:0; width:70rem; height:100%; background:linear-gradient(90deg, #d88016 0%, transparent 100%); opacity:20%; z-index:-1; }
body, 
input, 
select { font-size:16rem; font-family:'NanumSquareNeo', sans-serif; font-weight:400; color:#111; letter-spacing:-0.5rem; line-height:1.6; }
a {color:#111;}
strong {font-weight:600;}
@media all and (max-width:1200px){
	body::before {left:50rem;}
}
@media all and (max-width:768px){
    html { font-size:0.95px; }
}
@media all and (max-width:480px){
    html { font-size:0.9px; }
}

:root {
    --p_color : #0b9444;
	--navy : #11316f;
	--orange : #f28612;
    --sprite_l : url('/design2024/science/img/layout_sprite.png') no-repeat;
	--sprite_m : url('/design2024/science/img/main_sprite.png') no-repeat;
    --center : translate(-50%, -50%);
    --hcenter : translateY(-50%);
    --wcenter : translateX(-50%);
    --gradient : linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
    --stroke : -2px 0px #fdec9c, 0px 2px #fdec9c, 2px 0px #fdec9c, 0px -2px #fdec9c;
    --stroke2 : -2px 0px #ffe08b, 0px 2px #ffe08b, 2px 0px #ffe08b, 0px -2px #ffe08b;
}

header { display:flex; flex-direction:column; position:fixed; left:0; top:0; width:50%; height:100%; background:#fdec9c; padding:60rem; z-index:3; }
header h1 a { display:block; z-index:3; }
header h1 a span { display:none; }
header h1 a img { width:100%; }

.date_today {position:absolute; right:60rem; top:40rem; }
.date_today .date {font-size:20rem; line-height:1.2;}
.date_today .date strong {font-size:50rem; color:var(--navy); margin-left:10rem; }
.date_today .today {background:var(--navy); color:#fff; text-align:center; height:30rem; align-content:center; text-transform:uppercase; font-size:13rem; letter-spacing:0; border-radius:15rem; }
.date_today .today span {margin-right:5rem; }

.pc_nav { position:relative; height:100%; align-content:flex-end; }
.pc_nav .depth1 { display:block; }
.pc_nav .depth1 > li { width:50%; margin-top:60rem;}
.pc_nav .depth1 > li:last-of-type {position:absolute; right:0; bottom:0; width:50%; text-align:right; }
.pc_nav .depth1 > li > a {display:inline-block; text-shadow:var(--stroke);}
.pc_nav .depth1 > li > a span { font-size:30rem; font-weight:600; }
.pc_nav .depth1 > li > a:hover span { border-bottom:2px solid #222; padding-bottom:2px; }
.pc_nav .depth1 > li > a p { max-width:250rem; font-size:16rem; font-weight:400; padding-top:7rem;}

.pc_nav.ver3 .depth2_wrap {z-index:10;}
.pc_nav.ver3 .depth2_wrap::before { content:''; position:absolute; left:-2px; bottom:-5px; width:23px; height:23px; background:var(--sprite_l) -184px -95px;}
.pc_nav.ver3 .depth1 > li:first-of-type .depth2_wrap { left:215rem; bottom:65rem; }
.pc_nav.ver3 .depth1 > li:nth-of-type(2) .depth2_wrap { left:195rem; bottom:40rem; }
.pc_nav.ver3 .depth1 > li:last-of-type .depth2_wrap {left:auto; right:125rem; bottom:65rem;}
.pc_nav.ver3 .depth1 > li:last-of-type .depth2_wrap::before {transform:scaleX(-1); left:auto; right:-2px; }
.pc_nav.ver3 .depth2 { background:#fff; border:1px solid #222; box-shadow:3px 3px 0 #222; border-radius:40rem; padding:20rem 30rem; }
.pc_nav.ver3 .depth2 > li > a {padding:5rem;}
.pc_nav.ver3 .depth3 { left:100rem; background:var(--p_color); border:1px solid #222; box-shadow:3px 3px 0 #222; border-radius:30rem; padding:10rem 20rem;}
.pc_nav.ver3 .depth3 a { color:#fff; }
.pc_nav.ver3 .depth3 a::before { background:#fff; }

.m_nav .depth1 p {display:none;}
.m_nav > div::-webkit-scrollbar-thumb { border-color:#fff; }

header .reserve_wrap { position:absolute; right:60rem; bottom:280rem; }
header .reserve_wrap a { display:block; color:#fff; font-style:italic; font-weight:700; margin:0 auto; }
header .reserve_wrap > a { position:relative; height:40rem; align-content:center; padding:0 20rem; margin-top:-15rem; z-index:1; }
header .reserve_wrap > a::after {content:''; position:absolute; left:0; top:0; width:100%; height:100%; background:var(--orange); transform:skew(-20deg); font-size:18rem; z-index:-1; }
header .reserve_wrap .reseve { position:relative; width:120rem; height:140rem; margin:0 auto; overflow:hidden; }
header .reserve_wrap .reseve::after {content:''; position:absolute; left:0; bottom:0; width:120rem; height:120rem; background:var(--p_color); border-radius:50%; z-index:0; }
header .reserve_wrap .reseve > * { position:absolute; top:0; width:100%; height:100%; transition:0.3s; z-index:1; }
header .reserve_wrap .reseve > a { left:0; font-size:20rem; text-align:center; padding-top:83rem; }
header .reserve_wrap .reseve > a::before { content:''; position:absolute; left:50%; top:0; width: 65px; height: 85px; background:var(--sprite_l) -184px 0; transform:var(--wcenter); transition:0.2s; }
header .reserve_wrap .reseve > div { left:100%; align-content:center; padding:20rem 10rem 0; }
header .reserve_wrap .reseve > div a { display:flex; align-items:center; justify-content:center; height:32rem; border:1px solid #fff; border-radius:15rem; margin:5rem 0;}
header .reserve_wrap .reseve:hover > a {left:-100%;}
header .reserve_wrap .reseve:hover > div {left:0;}

.illu_bg { position:absolute; max-width:600rem; max-height:600px; width:80%; height:80%; left:50%; bottom:0; transform:var(--wcenter); z-index:-1; }
.illu_bg img:not(.motion) { position:absolute; }
.illu_bg .motion { position:absolute; left:0; top:0; width:100%; z-index:-1; }
.illu_bg .motion1 { animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }
.illu_bg .motion2 { animation: rotate-in-center 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation-delay:5s; }
.illu_bg .motion3 { animation: rotate-in-ver 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation-delay:10s; }
.illu_bg .motion4 { animation: rotate-in-center 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation-delay:14s;}
.illu_bg .illu1 { left:50%; top:50rem; transform:var(--wcenter); }
.illu_bg .illu2 { left:22%; top:35rem; transform:var(--wcenter); }
.illu_bg .illu3 { left:45%; top:160rem; transform:var(--wcenter); }
.illu_bg .illu4 { right:20rem; bottom:60rem; }

@keyframes scale-in-center {
	0% {
		-webkit-transform: scale(0);
				transform: scale(0);
		opacity: 0;
	}
	100% {
		-webkit-transform: scale(1);
				transform: scale(1);
		opacity: 1;
	}
}
@keyframes rotate-in-center {
	0% {
		-webkit-transform: rotate(-360deg);
				transform: rotate(-360deg);
		opacity: 0;
	}
	100% {
		-webkit-transform: rotate(0);
				transform: rotate(0);
		opacity: 1;
	}
}
@keyframes rotate-in-ver {
	0% {
	  -webkit-transform: rotateY(-360deg);
			  transform: rotateY(-360deg);
	  opacity: 0;
	}
	100% {
	  -webkit-transform: rotateY(0deg);
			  transform: rotateY(0deg);
	  opacity: 1;
	}
}


#container { width:50%; min-height:100vh; margin-left:50%; padding:60rem; z-index:1; }

footer { display:flex; justify-content:space-between; border-top:1px solid #d2b975; padding-top:50rem; }
footer a.logo { display:block; width:174px; height:101px; background:var(--sprite_l) 0 0; text-indent:-99999rem; }
footer > div { width:calc(100% - 230rem); }
footer div div {display:flex; flex-wrap:wrap;}
footer .link a { display:block; margin-right:30rem; }
footer .address {margin:10rem 0;}
footer .address p { margin:3rem 30rem 3rem 0; }
footer .address p strong {padding-right:10rem;}
footer .copy { font-size:12rem; text-transform:uppercase; letter-spacing:0; }



@media all and (max-width:1200px){
	header { width:50rem; padding:0; }
	header h1 { position:absolute; left:-95rem; top:175rem; transform:rotate(90deg); font-size:20rem; width:240rem;}
	header h1 a span { display:block; }
	header h1 a img { display:none; }
	.date_today {right:auto; top:auto; left:-8rem; bottom:40rem; transform:rotate(90deg); }
	.date_today .today {background:none; color:var(--navy); font-weight:700; }
	.date_today .date {display:none; }
	header .reserve {display:none;}
	.pc_nav {display:none; }
	.illu_bg {display:none;}
	#container {width:calc(100% - 50rem); margin-left:50rem; }

	#m_nav_open { display:flex; flex-direction:column; justify-content:center; position:absolute; left:0; top:0; width:50rem; height:50rem; padding:0 15rem; background:#222; }
	#m_nav_open::before,
	#m_nav_open::after {content:''; display:block; width:100%; height:3px; border-radius:2rem; background:#fff; margin:5rem 0;}
}
@media all and (max-width:768px){
	#container {padding:40rem 20rem;}
	footer a.logo { display:none; }
	footer > div {width:100%;}
}


/*sub layout*/

.sub_top  { position:relative; border-bottom:1px solid #d2b975; padding-bottom:60rem; overflow:hidden;}
.sub_top h3 {font-size:50rem; }
.sub_top p { display:inline-block; font-size:18rem; margin-top:10rem; text-shadow:var(--stroke2); }
.sub_top .location {display:flex; flex-wrap:wrap; margin-top:30rem;}
.sub_top .location li { position:relative; align-content:center; margin:3rem 30rem 3rem 0; }
.sub_top .location li::before {content:''; position:absolute; right:-15rem; top:45%; width:5rem; height:5rem; border-top:2px solid #111; border-right:2px solid #111; transform:rotate(45deg) var(--hcenter); } 
.sub_top .location li a { display:block;  }
.sub_top .location li:last-of-type {margin-right:0; }
.sub_top .location li:last-of-type::before {display:none;}
.sub_top .location li:first-of-type a { display:flex; align-items:center; justify-content:center; width:30rem; height:30rem; background:#222; border-radius:50%; }
.sub_top .location li:first-of-type a::before {content:''; display:block; width:16px; height:17px; background:var(--sprite_l) -217px -95px; }
.sub_top::after { content:''; position:absolute; right:0; top:0; width:265px; height:325px; background:var(--sprite_m) 0 -258px; animation: slide-in-blurred-bottom 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both; animation-delay:0.5s; z-index:-1; }
@keyframes slide-in-blurred-bottom {
  0% {
    -webkit-transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
            transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-filter: blur(40px);
            filter: blur(40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) scaleY(1) scaleX(1);
            transform: translateY(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}


#content {padding:60rem 0; }
.cont_foot { margin-top:40rem; }
.update_info { text-align:right; font-size:0.9em; margin-bottom:10rem; }
.info_line01 { display:flex; align-items:center; justify-content:space-between; padding:10rem 20rem; background:#f2f2f2; border:1px solid #ccc; border-bottom:1px solid #ddd; }
.info_line01 dt {font-weight:600; }
.info_line01 .click a { display:block; background:#444; color:#fff; font-size:0.9em; padding:3rem 7rem; border-radius:3rem; margin-left:10rem; }
.info_line01 .click a.top02 { display:none; }
.info_line02 { position:relative; padding:20rem 130rem 20rem 20rem; background:#fff; border:1px solid #ccc; border-top:0; }
.info_line02 dt { display:none; }
.info_line02 dd  { font-weight:600; margin-bottom:10rem; }
.info_line02 .radio_list {display:flex; flex-wrap:wrap; gap:10rem 25rem; color:#444; font-size:0.9em; }
.info_line02 .radio_list li,
.info_line02 .radio_list li label {display:flex; align-items:center; }
.info_line02 .radio_list li label::before { content:''; display:block; width:25px; height:25px; background:url('/design2024/common/template/sprite.png') no-repeat 0 -298px; margin:0 5rem; }
.info_line02 .radio_list li:nth-of-type(2) label::before {background-position-x:-30px;}
.info_line02 .radio_list li:nth-of-type(3) label::before {background-position-x:-60px;}
.info_line02 .radio_list li:nth-of-type(4) label::before {background-position-x:-90px;}
.info_line02 .radio_list li:nth-of-type(5) label::before {background-position-x:-120px;}
.info_line02 input[type="button"] { position:absolute; right:20rem; top:50%; font-size:16rem; font-family:'NanumSquareNeo', sans-serif; font-weight:400; color:#111; align-content:center; border:1px solid #999; height:40rem; border-radius:20rem; padding:0 30rem; background:#fff; transform:var(--hcenter); }

@media all and (max-width:768px){
	.sub_top h3 {font-size:40rem; }
	.sub_top::after,
	.sub_top p {display:none;}
	.sub_top .location {margin-top:20rem;}
}
@media all and (max-width:480px){
	.info_line02 {padding:20rem;}
	.info_line02 input[type="button"] { display:block; position:relative; right:auto; top:auto; transform:none; margin:10rem auto 0;}
}