/*폰트*/
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
/*font-family: 'Lato', sans-serif;*/

/*리셋*/
*{margin: 0;padding: 0;}
li{list-style: none;}
a{text-decoration: none;}
img{vertical-align: top;}

/*기본설정*/
body, html {width: 100%; height: 100%; font-family: 'Lato', sans-serif;}

/*메뉴버튼*/
#menu li { display:inline-block; margin: 10px; color: #000; font-weight: bold; position: relative; height: 100%; overflow: hidden;} 
#menu li:hover:after {left: 0;}
#menu li:after {position: absolute; width:100%; height: 2px; background: skyblue; content: ""; left: -150px; transition: 0.5s;}
#menu li.select:after {left: 0;}
#menu li.active{color: #fff;}
#menu li a{ text-decoration:none; color: #000;}
#menu li.active a:hover{ color: #000; }
#menu li a, #menu li.active a{ padding: 9px 18px; display:block; }
#menu li.active a{ color: #fff; }
#menu{ position:fixed; top:0; right: 30px; height: 40px; z-index: 70; width: 100%; padding: 0; margin:0; text-align: right;}

/*포트폴리오 넘김 화살표수정*/
.fp-controlArrow.fp-prev {width:50px; height:50px; border-top:4px solid #000; border-right:4px solid #000; transform: rotate(-135deg); position: absolute; left: 50px;}

.fp-controlArrow.fp-next {width:50px; height:50px; border-top:4px solid #000; border-right:4px solid #000; transform: rotate(45deg); position: absolute; right: 100px; }

/*섹션0*/
#s0 {overflow: hidden;}
#s0 #bg span:nth-of-type(1) {width: 2px; height: 100%; content: ""; background: #eee; position: absolute; left: 10%; }
#s0 #bg span:nth-of-type(2) {width: 2px; height: 100%; content: ""; background: #eee; position: absolute; right: 10%;}
#s0 #bg span:nth-of-type(3) {width: 100%; height: 2px; content: ""; background: #eee; position: absolute; top: 15%;}
#s0 #bg span:nth-of-type(4) {width: 100%; height: 2px; content: ""; background: #eee; position: absolute; bottom: 15%;}

#s0 #box span:nth-of-type(1) {width: 0.8%; height: 15%; background: skyblue; content: ""; position: absolute; left: 10%; top: 0; animation: down 8s infinite; transform: translateY(-100%); z-index: 10;}

#s0 #box span:nth-of-type(2) {width: 0.8%; height: 15%; background: skyblue; content: ""; position: absolute; right: 10%; bottom: 0; transform: translateY(100%); animation: up 8s infinite; z-index: 10;}

#s0 #box span:nth-of-type(3){width: 10%; height: 1.5%; background: skyblue; content: ""; position: absolute; left: 0; top: 15%;  animation-timing-function: linear; transform: translateX(-100%); animation: right 7s infinite; z-index: 10;}

#s0 #box span:nth-of-type(4){width: 10%; height: 1.5%; background: skyblue; content: ""; position: absolute; right: 0; bottom: 15%; transform: translateX(100%); animation: left 7s infinite; z-index: 10;}

@keyframes right {
	frome {
		transform: translateX(-100%);
	}
	99%,
	to {
		transform: translateX(1100%);
	}
}

@keyframes down {
	frome {
		transform: translateY(-100%);
	}
	to {
		transform: translateY(1100%);
	}
}

@keyframes up {
	frome {
		transform: translateY(100%);
	}
	to {
		transform: translateY(-1100%);
	}
	
}

@keyframes left {
	frome {
		transform: translateX(100%);
	}
	to {
		transform: translateX(-1100%);
	}
}

#s0 #txtbox {left: 15%; font-size: 100px; font-weight: bold; position: relative; top: 25%;}

#s0 #txtbox p {  color: #fff; text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;}

#s0 #txtbox #bar {position: absolute; bottom: 0; left: 0; height: 0; overflow: hidden; transition: 1.2s; display: block; width: 100%;}

#s0 #txtbox #bar span {text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; position: absolute; bottom: 0; left: 0; }

#s0 #txtbox #bar.on {height: 100%;}

#s0 figure{position: absolute; left: 50%; transform: translateX(-50%); bottom: 4%; text-align: center;}
#s0 figure img {width: 20%;}
#s0 figure figcaption {text-transform: uppercase; font-size: 12px; margin-top: 5px;}

#s0 i {position: absolute; width: 300px; height: 300px; border: 1px solid #555; border-radius: 100%; left: 5%; top: 10%; animation: bubble 1s 0s infinite ease-in-out alternate;}

@keyframes bubble {
	frome {
		transform: translateY(0);
	}
	to {
		transform: translateY(1%);
	}
}

#s0 #port p {font-size: 72px; position: absolute; right: -9.6%; transform: rotate(90deg); top:46%; letter-spacing: 12px; color: #ddd; z-index: 1}
#s0 #port span {font-size: 72px; position: absolute; right: 11%; bottom: 13.5%; color: #ddd; z-index: 1;}

/*섹션01*/
#s1 h1 {font-size: 90px; position: absolute; top: 8%; z-index: 3; left: 13%;}

#s1 #oblong {width: 30%; height: 20%; display: inline-block; background: #ffb133; position: absolute; top: 15%; opacity: 0.8;}

#s1 figure:before{border: 3px solid #181d23; content: ""; position: absolute; width: 100%; height: 100%; right: 20px; bottom: 20px;}
#s1 figure {position: absolute; top: 23%; left: 20%; z-index: 2;}

#s1 #circle {position: absolute; width: 400px; height: 400px; border-radius: 100%; top: 45%; left: 25%; border: 5px solid #7ebdb4; }

#s1 #txtbox {position: absolute; right: 15%; top: 25%;}

#s1 #txtbox h2 {font-size: 48px; margin-bottom: 30px;}
#s1 #txtbox p {margin-bottom: 40px; font-size: 20px;}

#s1 #skill div {margin-bottom: 5px;}

#s1 #skill span{width: 500px; height: 25px; background: #eee; display: inline-block;}
#s1 #skill div:nth-of-type(1) span strong {width: 0; height: 25px; background: #1785a3; display: inline-block;}
#s1 #skill div:nth-of-type(2) span strong {width: 0; height: 25px; background: #1785a3; display: inline-block;}
#s1 #skill div:nth-of-type(3) span strong {width: 0; height: 25px; background: #1785a3; display: inline-block;}
#s1 #skill div:nth-of-type(4) span strong {width: 0; height: 25px; background: #1785a3; display: inline-block;}
#s1 #skill div span strong i {color: #eee; font-style: normal; margin-left: 5px; position: absolute;}

#s1 #skill div > i {font-style: normal; position: relative; top: -6px; margin-left: 10px;}

/*포트폴리오 부분 슬라이드 배경*/
.slide {background: url(../images/portfolio_bg.png) no-repeat;}

/*포트폴리오 부분 slide0*/
#slide0 { position: relative;}

#slide0 img {position: absolute; width: 40%; right: 13%; top: 0; opacity: 0; transition: 1s;}
#slide0 img.on {top: 20%; opacity: 1;}

#slide0 #contant {position: absolute; z-index: 5; top: 0; color: #000; top: 25%; left: 170px; width: 50%}
#slide0 #contant h1 {font-size: 36px; margin-bottom: 20px; position: relative; top: -30px; opacity: 0; transition: 0.7s; /*text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;*/}
#slide0 #contant h1.on {top: 0; opacity: 1;}
#slide0 #contant p {font-size: 100px; top: -30px; position: relative; opacity: 0; transition: 0.7s; transition-delay: 0.3s; font-weight: bold;}
#slide0 #contant p.on {top: 0; opacity: 1;}
#slide0 #contant ul { position: relative; top: -30px; opacity: 0; transition: 0.7s;  transition-delay: 0.6s;}
#slide0 #contant ul.on {top: 0; opacity: 1;}
#slide0 #contant ul li {display: inline-block; font-size: 18px; font-weight: bold; width:30%; text-align: center; margin-top: 80px;}
#slide0 #contant ul:after {clear: both; content: ""; display: block;}
#slide0 #contant ul li a {color: #fff; padding: 15px 10px; display: block;}
#slide0 #contant ul li:first-child a {background: #0d8aa0; transition: 0.2s;}
#slide0 #contant ul li:first-child a:hover {background: #0d7b8e;}
#slide0 #contant ul li:last-child a {background: #ffb41d; transition: 0.2s;}
#slide0 #contant ul li:last-child a:hover {background: #e8a41b;}
#slide0 #contant > div {float: left; text-align: center; margin-top: 80px; position: relative; top: -30px; opacity: 0; width: 20%;}
#slide0 #contant:after {clear: both; content: ""; display: block;}
#slide0 #contant > div strong {display: block; margin-top: 12px; font-weight: normal;}
#slide0 #contant > div i {font-style: normal;}
#slide0 #contant > div span {position: absolute; top: 30px; left: 50%; transform: translateX(-50%); line-height: 40px; font-size: 20px; text-align: center;}

/*포트폴리오 부분 slide1*/
#slide1 {position: relative;}

#slide1 img {position: absolute; width: 65%; right: 3%; top: 0; opacity: 0; transition: 1s;}
#slide1 img.on {top: 10%; opacity: 1;}

#slide1 #contant {position: absolute; z-index: 5; top: 0; color: #000; top: 25%; left: 170px; width: 50%}
#slide1 #contant h1 {font-size: 36px; margin-bottom: 20px; position: relative; top: -30px; opacity: 0; transition: 0.7s; /*text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;*/}
#slide1 #contant h1.on {top: 0; opacity: 1;}
#slide1 #contant p {font-size: 100px; top: -30px; position: relative; opacity: 0; transition: 0.7s; transition-delay: 0.3s; font-weight: bold;}
#slide1 #contant p.on {top: 0; opacity: 1;}
#slide1 #contant ul { position: relative; top: -30px; opacity: 0; transition: 0.7s;  transition-delay: 0.6s;}
#slide1 #contant ul.on {top: 0; opacity: 1;}
#slide1 #contant ul li {display: inline-block; font-size: 18px; font-weight: bold; width:20%; text-align: center; margin-top: 80px; margin-left: 0;}
#slide1 #contant ul li:first-child {margin-left: 0;}
#slide1 #contant ul:after {clear: both; content: ""; display: block;}
#slide1 #contant ul li a {color: #fff; padding: 15px 10px; display: block;}
#slide1 #contant ul li:first-child a {background: #0d8aa0; transition: 0.2s;}
#slide1 #contant ul li:first-child a:hover {background: #0d7b8e;}
#slide1 #contant ul li:nth-of-type(2) a {background: #ffb41d; transition: 0.2s;}
#slide1 #contant ul li:nth-of-type(2) a:hover {background: #e8a41b;}
#slide1 #contant ul li:last-child a {background: #75cbc0; transition: 0.2s;}
#slide1 #contant ul li:last-child a:hover {background: #34c99a;}

#slide1 #contant > div {float: left; text-align: center; margin-top: 80px; position: relative; top: -30px; opacity: 0; width: 20%;}
#slide1 #contant:after {clear: both; content: ""; display: block;}
#slide1 #contant > div strong {display: block; margin-top: 12px; font-weight: normal;}
#slide1 #contant > div i {font-style: normal;}
#slide1 #contant > div span {position: absolute; top: 30px; left: 50%; transform: translateX(-50%); line-height: 40px; font-size: 20px; text-align: center;}

/*포트폴리오 부분 slide2*/
#slide2 {position: relative;}

#slide2 img {position: absolute; width: 65%; right: 3%; top: 0; opacity: 0; transition: 1s;}
#slide2 img.on {top: 10%; opacity: 1;}

#slide2 #contant {position: absolute; z-index: 5; top: 0; color: #000; top: 25%; left: 170px; width: 50%}
#slide2 #contant h1 {font-size: 36px; margin-bottom: 20px; position: relative; top: -30px; opacity: 0; transition: 0.7s; /*text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;*/}
#slide2 #contant h1.on {top: 0; opacity: 1;}
#slide2 #contant p {font-size: 100px; top: -30px; position: relative; opacity: 0; transition: 0.7s; transition-delay: 0.3s; font-weight: bold;}
#slide2 #contant p.on {top: 0; opacity: 1;}
#slide2 #contant ul { position: relative; top: -30px; opacity: 0; transition: 0.7s;  transition-delay: 0.6s;}
#slide2 #contant ul.on {top: 0; opacity: 1;}
#slide2 #contant ul li {display: inline-block; font-size: 18px; font-weight: bold; width:20%; text-align: center; margin-top: 80px; margin-left: 0;}
#slide2 #contant ul li:first-child {margin-left: 0;}
#slide2 #contant ul:after {clear: both; content: ""; display: block;}
#slide2 #contant ul li a {color: #fff; padding: 15px 10px; display: block;}
#slide2 #contant ul li:first-child a {background: #0d8aa0; transition: 0.2s;}
#slide2 #contant ul li:first-child a:hover {background: #0d7b8e;}
#slide2 #contant ul li:nth-of-type(2) a {background: #ffb41d; transition: 0.2s;}
#slide2 #contant ul li:nth-of-type(2) a:hover {background: #e8a41b;}
#slide2 #contant ul li:last-child a {background: #75cbc0; transition: 0.2s;}
#slide2 #contant ul li:last-child a:hover {background: #34c99a;}

#slide2 #contant > div {float: left; text-align: center; margin-top: 80px; position: relative; top: -30px; opacity: 0; width: 20%;}
#slide2 #contant:after {clear: both; content: ""; display: block;}
#slide2 #contant > div strong {display: block; margin-top: 12px; font-weight: normal;}
#slide2 #contant > div i {font-style: normal;}
#slide2 #contant > div span {position: absolute; top: 30px; left: 50%; transform: translateX(-50%); line-height: 40px; font-size: 20px; text-align: center;}

/*포트폴리오 부분 slide3*/
#slide3 {position: relative;}

#slide3 img {position: absolute; width: 65%; right: 3%; top: 0; opacity: 0; transition: 1s;}
#slide3 img.on {top: 10%; opacity: 1;}

#slide3 #contant {position: absolute; z-index: 5; top: 0; color: #000; top: 25%; left: 170px; width: 50%}
#slide3 #contant h1 {font-size: 36px; margin-bottom: 20px; position: relative; top: -30px; opacity: 0; transition: 0.7s; /*text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;*/}
#slide3 #contant h1.on {top: 0; opacity: 1;}
#slide3 #contant p {font-size: 100px; top: -30px; position: relative; opacity: 0; transition: 0.7s; transition-delay: 0.3s; font-weight: bold;}
#slide3 #contant p.on {top: 0; opacity: 1;}
#slide3 #contant ul { position: relative; top: -30px; opacity: 0; transition: 0.7s;  transition-delay: 0.6s;}
#slide3 #contant ul.on {top: 0; opacity: 1;}
#slide3 #contant ul li {display: inline-block; font-size: 18px; font-weight: bold; width:15%; text-align: center; margin-top: 80px;}
#slide3 #contant ul:after {clear: both; content: ""; display: block;}
#slide3 #contant ul li a {color: #fff; padding: 15px 10px; display: block;}
#slide3 #contant ul li:first-child a {background: #0d8aa0; transition: 0.2s;}
#slide3 #contant ul li:first-child a:hover {background: #0d7b8e;}
#slide3 #contant ul li:nth-of-type(2) a {background: #ffb41d; transition: 0.2s;}
#slide3 #contant ul li:nth-of-type(2) a:hover {background: #e8a41b;}
#slide3 #contant ul li:nth-of-type(3) a {background: #75cbc0; transition: 0.2s;}
#slide3 #contant ul li:nth-of-type(3) a:hover {background: #34c99a;}
#slide3 #contant ul li:last-child a {background: #202328; transition: 0.2s;}
#slide3 #contant ul li:last-child a:hover {background: #17191d;}

#slide3 #contant > div {float: left; text-align: center; margin-top: 80px; position: relative; top: -30px; opacity: 0; width: 20%;}
#slide3 #contant:after {clear: both; content: ""; display: block;}
#slide3 #contant > div strong {display: block; margin-top: 12px; font-weight: normal;}
#slide3 #contant > div i {font-style: normal;}
#slide3 #contant > div span {position: absolute; top: 30px; left: 50%; transform: translateX(-50%); line-height: 40px; font-size: 20px; text-align: center;}

/*포트폴리오 부분 slide4*/
#slide4 {position: relative;}

#slide4 img {position: absolute; width: 25%; right: 20%; top: 0; opacity: 0; transition: 1s;}
#slide4 img.on {top: 10%; opacity: 1;}

#slide4 #contant {position: absolute; z-index: 5; top: 0; color: #000; top: 25%; left: 170px; width: 50%}
#slide4 #contant h1 {font-size: 36px; margin-bottom: 20px; position: relative; top: -30px; opacity: 0; transition: 0.7s; /*text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;*/}
#slide4 #contant h1.on {top: 0; opacity: 1;}
#slide4 #contant p {font-size: 100px; top: -30px; position: relative; opacity: 0; transition: 0.7s; transition-delay: 0.3s; font-weight: bold;}
#slide4 #contant p.on {top: 0; opacity: 1;}
#slide4 #contant ul { position: relative; top: -30px; opacity: 0; transition: 0.7s;  transition-delay: 0.6s;}
#slide4 #contant ul.on {top: 0; opacity: 1;}
#slide4 #contant ul li {display: inline-block; font-size: 18px; font-weight: bold; width:60%; text-align: center; margin-top: 80px;}
#slide4 #contant ul:after {clear: both; content: ""; display: block;}
#slide4 #contant ul li a {color: #fff; padding: 15px 10px; display: block;}
#slide4 #contant ul li:first-child a {background: #0d8aa0; transition: 0.2s;}
#slide4 #contant ul li:first-child a:hover {background: #0d7b8e;}
#slide4 #contant ul li:nth-of-type(2) a {background: #ffb41d; transition: 0.2s;}
#slide4 #contant ul li:nth-of-type(2) a:hover {background: #e8a41b;}
#slide4 #contant ul li:nth-of-type(3) a {background: #75cbc0; transition: 0.2s;}
#slide4 #contant ul li:nth-of-type(3) a:hover {background: #34c99a;}
#slide4 #contant ul li:last-child a {background: #202328; transition: 0.2s;}
#slide4 #contant ul li:last-child a:hover {background: #17191d;}

#slide4 #contant > div {float: left; text-align: center; margin-top: 80px; position: relative; top: -30px; opacity: 0; width: 20%;}
#slide4 #contant:after {clear: both; content: ""; display: block;}
#slide4 #contant > div strong {display: block; margin-top: 12px; font-weight: normal;}
#slide4 #contant > div i {font-style: normal;}
#slide4 #contant > div span {position: absolute; top: 30px; left: 50%; transform: translateX(-50%); line-height: 40px; font-size: 20px; text-align: center;}