@charset "utf-8";
/*
s y
-----
https://tv-sy.com
seoul
-----
25 feb, 2018
-----
*/
:root {
	/* color */
	--c0:rgba(0,0,0,1); --c1:#111; --c2:#fff; --c3:#777;
	--g2:#222; --g3:#333; --g4:#aaa;
	--y1:#f4ff7c;
	--p1:#e1c18a;
	--r1:#f7bb1b;
	/* font-size */
	--f0:1rem; --f1:1.1rem; --f2:1.2rem; --f3:1.3rem; --f4:1.4rem;
	/* font-family */
	--fn1:'courier-prime', pretendard, monospace; --fn2:'helvetica neue', 'helvetica', pretendard, sans-serif;
	/* border-style */
	--b0:.1rem solid transparent; --b1:.1rem solid var(--c1); --b2:.1rem solid var(--c2); --b3:.1rem solid var(--c3);
}

#ca {position:absolute; top:-6px; left:0;}
/*--*/
html {font-size:62.5%;}
body {position:fixed; margin:0; padding:0; width:100vw; height:100vh;
font:0.9rem/1.4 var(--fn1);
color:var(--c2); letter-spacing:.05em;
background:var(--c1);
-webkit-text-size-adjust:none;
-webkit-font-smoothing:subpixel-antialiased !important;
text-rendering: optimizelegibility;}
/*--*/
a, a:hover, a:active{outline:none;}
/*--*/
a {text-decoration:none; color:var(--c1); transition:all 0.2s ease;}
a:hover{text-decoration:none; color:;}
a:active{text-decoration:none; color:#0f9;}
/*--*/
::selection{color:#444; background:var(--c1);}
/*--*/
ul, li{margin:0; padding:0; list-style-type:none}
div, p {position:relative;}
/*--*/
img{border:0;}
/*--*/
* {box-sizing:border-box; position:relative;}

#y-1 {display:none !important;}


p, h1, h2, h3, h4 {margin:0; padding:0;}



.i#pop {top:calc(50vh - 11.6rem); left:calc(50vw - 4rem); z-index:999; width:18rem;}
.i#pop > .in h4 {color:var(--c2); background:var(--p1); border:var(--b0);}
.i#pop > .in {max-width:100% !important;}

.i#pop .in h4 > i {background:transparent; width:2.5rem;}
.i#pop .in h4 > i > * {background:var(--pr1);}
.i#pop .in h4 > i > y {display:none !important;}

.i#pop > .in p {line-height:1.6;}
#pop > .in .btn {position:absolute; bottom:.1rem; left:.1rem; width:calc(100% - .2rem); background:transparent; border:var(--b0); border-radius:.2rem; border-color:transparent !important;}
#pop > .in .btn a {display:block; width:100%; padding:.15rem 1rem; color:var(--p1); background:var(--c1); border:var(--b0); font-size:1rem; font-family:var(--fn1); letter-spacing:.075em; border-radius:.2rem;}
#pop > .in .btn a:hover {border-color:var(--c2);}


.i#pop > .over {position:fixed; display:block; top:0; left:0; width:100%; height:100%; background:var(--c0); opacity:.85; z-index:-1;}
.i#pop.on .in > .in {padding:2rem 1rem 6.1rem;}

#xy {display:none;}


/* tail */
y.tail {position:fixed; z-index:999; display:inline-block; width:.4rem; height:.4rem; background:transparent; border:.15rem solid var(--c2); border-radius:50%; box-sizing:border-box; transition:all 0.12s ease-out; transform:translateX(2.6rem) translateY(1.8rem); transform-style:preserve-3d; mix-blend-mode:difference;}
y.tail.t2 {transition:all 0.72s ease-out; transform:translateX(3.9rem) translateY(2.05rem);}
y.tail.t3 {transition:all 0.32s ease-out; transform:translateX(3rem) translateY(3rem);}


#b_1 {display:block; position:fixed; top:0; left:0; width:100vw; height:100vh; background:var(--c2); z-index:-1;}
#b_1 img {display:block; position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; object-position:center;}
#b_1::after {display:block; position:absolute; content:''; z-index:1; background:var(--c0); opacity:.84; top:0; left:0; width:100%; height:100%; transition:opacity .8s ease; mix-blend-mode:luminosity;}

#sy {z-index:99; position:absolute; top:0; left:0; display:block; width:100%;}
#sy {opacity:1;}
#header {position:fixed; top:0; left:0; display:block; z-index:99999;
width:100%; height:0; z-index:199; border-bottom:0px solid var(--c2);}
#header .in {}

#s1 {position:fixed; top:auto; bottom:2.4rem; left:50%; display:inline-block; width:auto; color:var(--c2); text-align:center; pointer-events:none; transform:translateX(-50%); z-index:99;}
#s1 a {display:inline-block; font-family:garamond-premier-pro, serif; transition:all 0.2s ease; width:auto;}
#s1 a:hover {color:var(--c1);}

@keyframes rtz {
 	0%   {transform: rotateY(0deg);}
	50%   {transform: rotateY(179deg);}
	100% {transform: rotateY(359deg);}
}
@keyframes cl {
 	0%   {color:var(--r1); border-color:var(--r1);}
	45%   {color:var(--c5); border-color:var(--c5);}
	55%   {color:var(--c6); border-color:var(--c6);}
	100% {color:var(--r1); border-color:var(--r1);}
}
#s1 a#tvsy {position:relative; font-weight:600; display:inline-block; font-size:1.2rem; line-height:1; letter-spacing:.15em; font-style:italic; animation:rtz 5s infinite; animation-timing-function:linear; transform-style:preserve-3d; transform-origin:center center; width:8.4rem;}
#s1 a#tvsy i {position:absolute; top:0; left:0; width:100%; display:inline-block; color:var(--c1); padding:0; border-radius:2rem; transform:translateZ(1px); white-space:nowrap; transition:all .1s linear;}
#s1 a#tvsy i.i2 {transform:translateZ(1.5px);}
#s1 a#tvsy i.i3 {transform:translateZ(2px);}
#s1 a#tvsy i.i4 {transform:translateZ(2.5px);}
#s1 a#tvsy i.i5 {transform:translateZ(3px);}
#s1 a#tvsy i.i6 {transform:translateZ(3.5px);}
#s1 a#tvsy i.i7 {transform:translateZ(4px);}

#s1 a#tvsy:hover i {}

span#now {display:block; position:absolute; top:2rem; right:2rem; letter-spacing:.075em; font-size:1.1rem; color:var(--c0); font-weight:400;}

/* position*/
.ps {position:fixed; display:inline-flex; flex-wrap:wrap; top:calc(50% - 2rem); left:1.6rem; z-index:9; letter-spacing:.075em; font-size:1.1rem; color:var(--p1); cursor:default;}
.ps > * {display:inline-block; flex-basis:auto;}
.ps > i {font-family:var(--fn2); font-style:normal; color:var(--g4); margin:0 .6rem;}

/* header */
#header button {position:fixed; 
top:20px; right:20px; left:auto; border:0; background:transparent;
display:block; width:15px; height:20px;
cursor:pointer; outline:none !important;
z-index:999;}
.vr {width:13px; height:1px !important;
overflow:none;
border-radius:1px;
background:#eee; display:block;
opacity:1;
z-index:998;}
.vr {position:absolute;}
.b1 {top:6px; right:0;}
.b2 {top:0px; right:6px; width:1px; height:13px !important;}


.menu-on {display:block;}
.menu-on span {background:#eee !important;}
.menu-off {display:none;}
.menu-off span {z-index:999;}
.menu-off .vr {width:11px; margin-right:1px;}
.menu-off .b1 {top:6px;}
.menu-off .b2 {display:none;}

#s2 {position:fixed; left:50vw; bottom:1.6rem; display:inline-flex; flex-wrap:wrap; flex-direction:column; align-items:flex-start; width:auto; height:auto; overflow:auto; z-index:91;}
#s2 a {display:inline-block; color:var(--c2); text-align:left; cursor:pointer; margin:0 0 1.6rem;}
#s2 a > span {display:inline-block; border-bottom:var(--b0);}

#s2 a:first-of-type {color:var(--p1);}
#s2 a:last-of-type {margin:0;}
#s2 a:hover > span {border-color:var(--c2);}

.i {display:inline-block; position:fixed; width:18rem; transition:all 0.2s ease;}

.i#a {top:calc(50vh - 11.6rem); left:50vw; z-index:8;}
.i#education {top:calc(35vh + 14rem); right:3.2rem; z-index:9;}

.i#fall {top:0; left:0; width:100dvw; height:100dvh; padding:1.2rem .2rem; overflow:auto; z-index:11; background:var(--c2);}
.i#fall > .grid {width:100%; height:100%; display:flex; flex-wrap:wrap; align-items:flex-start;}

.i .grid-item {display:inline-block; width:calc(12rem + 12.8dvw); height:auto; margin:0; color:var(--g4); padding:.6rem 1rem; border-radius:0; text-align:left; font-size:.9rem; line-height:1.15; font-weight:400; text-transform:none; cursor:default; margin:0 0 28rem;}
.i .grid-item a {color:var(--g4); display:inline-block;}
.i .grid-item a:hover {color:var(--c1);}
.i .grid-item span.nm {font-weight:400; padding-bottom:.3rem; font-size:.9rem; padding-top:0; color:var(--c1);}

span.bar1 {display:inline-block; width:.7rem; height:.1rem; padding:0 0 !important; background:var(--r1); margin-bottom:.2rem; transition: all 0.2s ease;}
.i .grid-item:hover span.bar1 {background:var(--c1);}

.i .grid-item span.dsc {display:block; width:100%; color:var(--g4); font-family:var(--fn2);}
.i .grid-item span.dsc a.x {display:block; width:100%; padding:.3rem 0;}
.i .grid-item a.x > span {display:inline-block; font-size:.8rem; font-weight:500; color:var(--r1); border-bottom:var(--b0); font-family:var(--fn2); transition:all 0.2s ease;}


.i .grid-item a.x:hover > span {color:var(--r1);}

.i .grid-item a > span {color:var(--g4);}

.i .grid-item span {font-weight:400; display:inline-block; padding-top:.1rem; color:var(--c2); text-transform:none;}



.i.list#fall .in > .in {background:var(--c2); height:0; padding:0; font-family:var(--fn1); font-size:1rem;}
.i.list#fall.on .in > .in {height:auto;}
.i#fall .in h4 {display:none;}


#s2 {display:none !important;}



.i.x .in > .in {background:var(--c1);}


.i.x#arc {z-index:99;}
.i.x .grid-item span.nm {color:var(--c2);}
.i.x .grid-item span.dsc a.x > span {color:var(--c3) !important; border-color:var(--c3);}
.i.x .grid-item span.bar1 {background:var(--p1) !important;}
.i.list#arc.on .in > .in {height:12rem; padding:1rem 0;}


.i .in {position:relative; width:100%; height:auto;}
.i > .in {top:0; left:0;}
.i .in h4 {display:inline-flex; flex-wrap:wrap; align-items:center; position:absolute; top:0; left:0; font-size:.95rem; width:100%; height:2.1rem; padding:0 1rem; border-bottom:1px solid transparent; background:var(--c0); z-index:9; letter-spacing:.075em; color:var(--c2); border:var(--b1); border-radius:.2rem;}
.i.d .in h4 {cursor:move;}
.i .in h4 > * {display:inline-block; width:auto;}
.i .in h4 > i {position:absolute; top:0; right:0; width:6rem; height:1.9rem; cursor:pointer; }
.i .in h4 > i > * {position:absolute; width:.9rem; height:.1rem; top:.9rem; right:.8rem;}
.i .in h4 > i > y {transform:rotate(90deg); background:transparent;}
.i .in h4 > i > y::before, .i .in h4 > i > y::after {display:inline-block; content:''; position:absolute; top:0; left:0; width:50%; height:.1rem; transition:all .16s ease; border-radius:.1rem;}
.i .in h4 > i > y::after {left:auto; right:0;}
.i .in h4 > i > *, .i .in h4 > i > y::before, .i .in h4 > i > y::after {background:var(--g4);}

.i.on .in h4 > i > y::before, .i.on .in h4 > i > y::after {width:0;}

.i .in > .in {position:relative; top:2.2rem; left:0; margin:0; display:block; width:100%; height:0; overflow:hidden;  padding:0 1rem; color:var(--c2); background:#1e1e1e; border:var(--b0); border-top:none; border-bottom:none; border-radius:.2rem; font-size:1rem; font-family:var(--fn2); cursor:default; transition:all .12s ease;}
.i.on .in > .in {height:auto; padding:1rem 1rem 4rem; border:var(--b1); overflow-y:auto;}
.i .in > .in b {font-weight:600; font-family:var(--fn1);}
/* scroll style */
.i .in > .in::-webkit-scrollbar {-webkit-appearance:none !important; width:.15rem; height:calc(100% - .2rem); padding:.1rem;}
.i .in > .in::-webkit-scrollbar-track {background:var(--c2);}
.i .in > .in::-webkit-scrollbar-thumb {background:var(--c1); border-radius:.1rem;}

/*
.i.about .in h4 {background:#fffd6d; color:var(--c1);}
*/



#ft {display:none;}

.nb {font-size:10px;}

/*--*/
#copy {position:absolute; left:28px; top:360px; color:var(--c1);}


#credit {position:fixed; bottom:0; width:100%;
font:700 9px/16px 'abel', sans-serif; background:var(--c1); z-index:1999;
color:#777; letter-spacing:0.075em; height:38px; opacity:0.9;
background:var(--c1);}
#credit .wrap {position:relative; padding:10px 20px;
max-width:100%;}
#credit span {letter-spacing:0.1em;}
#x22 {position:absolute; top:4px; left:220px; display:none;}
#x22 img {width:24px;}
#credit #mmn {display:inline-block; padding-left:12px;}
#credit #mmn img {height:8px; width:auto; vertical-align:middle;}

/* footer */
/*--*/

/* background img */
#bg_x {position:fixed; top:0; left:0; width:100%; height:100%; overflow:hidden;
z-index:0; display:none;}
#bg_1 {display:block; position:absolute; width:100%; height:100%; top:0; left:0; z-index:0;
overflow:hidden;}
#bg_1 img {top:0;
    left: 0;
    position: absolute;}
/* background img */

.yr {float:left; border-bottom:0px solid #ccc; width:72px; margin-right:3px; color:var(--c1); font:italic 9px/14px 'courier new', 'times new roman', serif; letter-spacing:1px;}
#sacai {clear:both;padding-top:18px;}
#sy {clear:both;}
.yl {color:var(--c1);  height:7px;}
.n1 {font-size:9px; padding-right:0px;}
.gm {font:italic 700 9px/16px garamond-premier-pro, sans-serif;}

.m y.tail {display:none !important;}

@media screen and (min-width:801px) and (max-width:1200px) {
	.i .grid-item {width:33.3333%;}
}

@media screen and (min-width:1px) and (max-width:800px) {
	.i .grid-item {width:50%; margin:0 0 24rem;}
	#s1 a#tvsy {font-size:1.15rem;}

	span.bar1 {background:var(--c1);}
	.i .grid-item a.x > span {color:var(--r1);}
}