@font-face {
    font-family: 'Jeonju_gakR';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2102-01@1.0/Jeonju_gakR.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MICE';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-01@1.0/MICEGothic Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

* { word-break:keep-all; word-wrap:break-word; }
html { font-size:15px; }
html, body { font-size:1em; margin:0; padding:0; color:#767676; font-family: "MICE", sans-serif; font-weight:400; letter-spacing:-0.05rem; -webkit-text-size-adjust:100%; box-sizing:border-box; }
table { border-style:solid; border-width:0; padding:0; margin:0 auto; border-spacing:0; border-collapse:collapse; }
a { color:#5a5a5a; text-decoration:none !important; }
a:hover, a:active, a:focus { color:#4f4f4f; text-decoration:none !important; outline:none !important; }
ul, ol { list-style:none; padding:0; margin:0; }
.text-eps { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------------------
layout
----------------------- */
#wrap { position:relative; width:100vw; height:100vh; overflow:hidden; }
#wrap-left { 
	position:absolute; top:0; left:0; width:50%; height:100vh; background:#231F40; z-index:10; 
	display:flex; flex-flow:column nowrap; justify-content:center; align-items:center; 
}
#wrap-left .main-img { width:100%; display:flex; flex-flow:row nowrap; justify-content:center; align-items:center; }
#wrap-left .main-img img { width:100%; max-width:400px; }
#wrap-left .main-title { width:100%; color:#a0fcfe; font-family:'Jeonju_gakR'; margin:0; padding:8% 0; font-size:2.2em; text-align:center; }
#wrap-left .main-box { width:80%; display:flex; flex-flow:row wrap; justify-content:center; align-items:center; gap:2%; }
#wrap-left .main-link { width:49%; padding-bottom:2%; }
#wrap-left .main-link a { display:block; text-align:center; width:100%; border:2px solid #fff; padding:2% 0; font-size:1.3em; color:#fff; font-family:'Jeonju_gakR'; }
#wrap-left .main-link a:hover { border:2px solid yellow; color:yellow; }

#wrap-right { position:absolute; top:0; right:0; width:50%; height:100vh; background:#231F40; z-index:9; }
#wrap-right .right-bg { position:relative; width:100%; height:100%; }
#wrap-right .right-bg .bubble { position:absolute; border-radius:10%; animation:rotating 5s linear infinite; }
#wrap-right .right-bg .bubble:nth-child(1) { background:#FFFFFF; width:100px; height:100px; top:-3%; left:-3%; animation-duration:12s; }
#wrap-right .right-bg .bubble:nth-child(2) { background:#E4032E; width:80px; height:80px; top:-3%; left:-3%; animation-duration:12s; }
#wrap-right .right-bg .bubble:nth-child(3) { background:#003764; width:60px; height:60px; top:-3%; left:-3%; animation-duration:12s; }
#wrap-right .right-bg .bubble:nth-child(4) { background:#4C8ECB; width:100px; height:100px; top:-3%; right:-3%; animation-duration:12s; }
#wrap-right .right-bg .bubble:nth-child(5) { background:#F8BE2C; width:80px; height:80px; top:-3%; right:-3%; animation-duration:12s; }
#wrap-right .right-bg .bubble:nth-child(6) { background:#D6007E; width:60px; height:60px; top:-3%; right:-3%; animation-duration:12s; }
#wrap-right .right-bg .bubble:nth-child(7) { background:#CEA055; width:100px; height:100px; bottom:-3%; left:-3%; animation-duration:12s; }
#wrap-right .right-bg .bubble:nth-child(8) { background:#2F87B3; width:80px; height:80px; bottom:-3%; left:-3%; animation-duration:12s; }
#wrap-right .right-bg .bubble:nth-child(9) { background:#4F4F51; width:60px; height:60px; bottom:-3%; left:-3%; animation-duration:12s; }
#wrap-right .right-bg .bubble:nth-child(10) { background:#C6CFD4; width:100px; height:100px; bottom:-3%; right:-3%; animation-duration:12s; }
#wrap-right .right-bg .bubble:nth-child(11) { background:#71B03C; width:80px; height:80px; bottom:-3%; right:-3%; animation-duration:12s; }
#wrap-right .right-bg .bubble:nth-child(12) { background:#EB7340; width:60px; height:60px; bottom:-3%; right:-3%; animation-duration:12s; }
@keyframes rotating {
	from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}

#right-bar {
	position:absolute; top:2%; left:4%; width:92%; height:60px; border-radius:20px 20px 0 0; background:#1B2C6E; overflow:hidden;
	display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center;
}
#right-bar a { display:flex; flex-flow:row nowrap; justify-content:center; align-items:center; width:60px; height:60px; font-size:2em; color:#fdfd00; }
#right-bar a.dis { color:#7b88bd; cursor:pointer; }
#right-bar div { text-align:center; font-size:1.4em; color:#fff; }

#right-content {
	position:absolute; top:calc(2% + 60px); left:4%; width:92%; height:calc(96% - 60px); border-radius:0 0 20px 20px; background:transparent; overflow:hidden;
}

#content-box { 
	position:relative;
	width:100%; height:100%; overflow:hidden; transition:all 0.2s linear; transform:scale(0); 
	background:linear-gradient(-45deg, #f0ece2, #272343, #35495e, #fbf2d5);
	background-size:200% 200%;
	animation:gradient 15s ease infinite;
}
#content-box.show { transform:scale(1); }
#content-inner { width:100%; height:100%; min-height:100%; overflow-x:hidden; overflow-y:auto; }

/* ---------------------
home
----------------------- */
#home { width:100%; height:100%; overflow:hidden; display:flex; flex-flow:column nowrap; justify-content:center; align-items:center; }
#home video { width:100%; }
#home .big { color:#fff; font-size:1.3em; }

/* ---------------------
ceo
----------------------- */
#ceo { width:100%; height:100%; overflow:hidden; display:flex; flex-flow:row nowrap; justify-content:center; align-items:center; }
#ceo img { width:100%; }

/* ---------------------
map
----------------------- */
#map { position:relative; width:100%; height:100%; display:flex; flex-flow:row nowrap; justify-content:center; align-items:center; }
#map .big { position:absolute; top:1%; left:1%; font-size:2em; color:#fff; text-align:left; width:auto; }

@keyframes gradient {
	0%  { background-position:0% 50%; }
	50% { background-position:100% 50%; }
	100% { background-position: 0% 50%; }
}

#menu { margin:0; padding:0; }
#menu .title { padding:0.6em; font-size:2em; color:#fff; background:#1c84e1; text-align:center; }
#menu .link { border-bottom:1px solid #777; }
#menu .link a { display:block; padding:0.6em; font-size:1.2em; color:#000; background:#f0f0f0; }
#menu .link a.wd { color:#ff0202; }

/* ---------------------
time
----------------------- */
#time { margin:0; padding:0; }
#time .title { width:100%; padding:0.5em; font-size:1em; color:#fff; text-align:left; }
#time .link { display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; padding-left:10%; }
#time .link img { height:10px }
#time .link a { padding:0.6em; font-size:1.2em; color:#c9f9fe; }
#time .link.wd { display:flex; flex-flow:row nowrap; justify-content:flex-end; align-items:center; padding-right:10%; }
#time .link.wd a { color:#ffb5b5; }

/* ---------------------
photo
----------------------- */
#iframe_photo { background:transparent; width:100%; height:99%; }
#photo { 
	display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:flex-start; 
	width:100%; height:100%; overflow-x:hidden; overflow-y:scroll; 
	background:linear-gradient(-45deg, #f0ece2, #272343, #35495e, #fbf2d5);
	background-size:200% 200%;
	animation:gradient 15s ease infinite;
}

#photo a { display:block; width:50%; }
#photo a img { width:100%; }

/* ---------------------
record
----------------------- */
#iframe_record { background:transparent; width:100%; height:99%; }
#record { font-size:1em; background:#fff; width:100%; height:100%; overflow-x:hidden; overflow-y:scroll; }
#record .logo { width:100%; padding:2em 0; display:flex; flex-flow:row nowrap; justify-content:center; align-items:center; }
#record .logo img { width:30%; }
#record .name { padding-bottom:0.5em; width:90%; margin:0 auto; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; }
#record .han { font-size:2em; color:#000; }
#record .est { font-size:1.5em; color:#777; }
#record .eng { padding-bottom:0.2em; width:90%; margin:0 auto; text-align:left; font-size:1.5em; color:#888; }
#record .addr { padding-bottom:0.2em; width:90%; margin:0 auto; text-align:left; font-size:1.3em; color:#888; } 
#record .site { padding-bottom:1em; width:90%; margin:0 auto; text-align:left; font-size:1.3em; color:#888; }
#record .title { 
	padding:0.5em 0.5em 0.5em 1em; width:100%; text-align:left; font-size:1.2em; color:#0f549f; background:#e8f1ff;
	display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center;
}
#record .title i { margin-right:0.5em; }
#record .link { width:100%; display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; }
#record .link a { flex-grow:1; display:block; padding:0.5em 0; text-align:center; font-size:1.2em; color:#fff; background:#1E2C69; }
#record .link a.on, #record .link a:hover { background:#3a77f3; }

#record .tables { display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:flex-start; }
#record .tables .list { width:50%; }
#record .tables .btable { width:100%; margin:0 auto; }
#record .tables .btable th,
#record .tables .btable td { border-bottom:1px solid #98acfc; text-align:center; color:#000; font-size:0.8em; padding:0.5em 0; }
#record .tables .btable th { background:#bfd9ff; }
#record .tables .btable th.dv, 
#record .tables .btable td.dv { border-right:1px solid #98acfc !important; }
#record .tables .ctable { width:100%; margin:0 auto; }
#record .tables .ctable th,
#record .tables .ctable td { border-bottom:1px solid #98acfc; text-align:center; color:#000; font-size:1em; padding:0.5em 0; }
#record .tables .ctable th { background:#bfd9ff; }
#record .tables .ctable th.dv, 
#record .tables .ctable td.dv { border-right:1px solid #98acfc !important; }
#record .tables .canvas { width:50%; height:290px; background:#f0f0f0; }