@font-face { font-family: 'GmarketSansBold'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff'); font-weight: normal; font-style: normal; }

@font-face { font-family: 'GmarketSansMedium'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff'); font-weight: normal; font-style: normal; }

*{margin:0; padding:0;} li{list-style: none;} a{text-decoration: none;}
img{vertical-align: top;}
.wrap {margin:0 auto; width:1300px; position:relative;}
.wrap:after, ul:after {display: block; content: ""; clear: both;}
html{width: 100%; height:100%; overflow-x:hidden; }
body {font-family: 'GmarketSansMedium'; width:100%; height:100%;}
h2 {position:absolute; left:-9999px;}
section {width:100%;}

/* header 영역 */
header {height:100px; color:#000;position:fixed; z-index: 99; width:100%; transition:0.3s; overflow: hidden; background:rgba(0,0,0,0.5);}
header .logo img{width:60px; position:relative; top:20px;}
header #gnb {position:absolute; left:200px; top:40px;}
header #gnb li {float:left; margin-right:50px; font-size:20px; }
header #gnb li a{color:#fff;}
header .bar {z-index:50;}
header .bar img{position:absolute; right:0; top:30px; width:40px; height:40px;}

body {background:#fcc;}
		/* 사이드바 스타일 */
		.sidenav {
			height:100%;
			width: 0;
			position: fixed;
			z-index:1;
			top: 0;
			right: 0;
			background-color: rgba(33,52,73,0.7);
			overflow-x: hidden;
			transition:0.5s ease-in-out;
			padding-top: 80px;
		}
		.sidenav a {
			padding: 10px 10px 10px 35px;
			text-decoration: none;
			font-size: 18px;
			color: #fff;
			display: block;
			transition: 0.2s ease-in-out;
		}
		.sidenav a:hover, .offcanvas a:focus {
			color: #000;
		}
		.closebtn {
			position: absolute;
			top: 0;
			right:200px;
			font-size: 48px !important;
			margin-left: 50px;
		}
		.openmenu:hover {
			color:rgba(33,52,73,0.7);
			transition:0.5s ease-in-out;
		}
		.openmenu {
			font-size: 24px;
			cursor:pointer;
			transition:0.5s ease-in-out;
            position:relative;
		}
		.openmenu > i {
			font-size: 30px;
		}
        .openmenu img {position:absolute; left:1200px; top:20px;}
		

#section0 {background:url(../images/background1.png)no-repeat center;}
#section0 h1 {color:#fff; font-size:44px; text-align: center;padding-top:300px;}
#section0 p {color:#eee; font-size:20px; padding-top:10px; text-align: center;}
#section0 span {color:#fff; font-size:18px; text-align: center; display: block; background:rgba(255,255,255,0.2); height:70px; line-height:70px; margin-top:300px;}

#section1 {background:url(../images/background2.png)no-repeat center; height:1000px;}
#section1 .intro h1{font-size:28px; color:#fff; padding-top:200px; text-align: center;}
#section1 .intro p {color:#eee; font-size:18px; padding-top:10px; text-align: center;}
#section1 .intro ul {background:rgba(0,0,0,0.3); width:500px; padding:20px 20px; margin-top:150px; position:relative; left:400px;}
#section1 .intro ul li {color:#f2f2f2; line-height:2.4; font-size:18px;}
#section1 img {width:110px;}
#section1 img:nth-of-type(1) {position:relative; left:1150px; bottom:250px; width:170px;}
#section1 img:nth-of-type(2) {position:relative; left:1150px; bottom:140px;}
#section1 img:nth-of-type(3) {position:relative; left:750px; bottom:140px;}
#section1 img:nth-of-type(4) {position:relative; left:770px; bottom:60px;}
#section1 img:nth-of-type(5) {position:relative; left:660px; bottom:380px;}
#section1 img:nth-of-type(6) {position:relative; left:680px; bottom:300px;}
#section1 img:nth-of-type(7) {position:relative; left:290px; bottom:300px;}

#section2 {height:1000px; position:relative;}
#section2 img {height:1000px; z-index: 0;}
#section2 .intro h1 {color:#fff; font-size:36px; position:absolute; right:700px;top:200px;}
#section2 .intro p {font-size:18px; color:#eee; position:absolute; right:560px; top:350px;}
#section2 .intro nav{background:rgba(31,31,32,0.7); width:950px; height:1000px; position: absolute; right: 0; top:0;}
#section2 .intro ul {position:absolute; right:300px; top:400px; }
#section2 .intro ul li {line-height:3.7; font-size:20px; text-align:left;}
#section2 .intro ul li a{color:#fff;}
.underline {
  line-height: 1.3;
  font-size: 20px;
  font-weight: 500;
  background-image: linear-gradient(transparent calc(100% - 3px), #000 2px);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 0.8s;
  color: #fff;
}
@media (min-width: 1000px) {
  .underline {
    font-size: 20px;
      font-weight: bold;
  }
}
.underline.yellow {
  background-image: linear-gradient(transparent 95%, #fff 10%);
}
.underline:hover {
  background-size: 70% 76%;
}
.underline:nth-child(4):hover {
    background-size:100% 76%;
}

#section3 {height:1000px; position:relative;}
 #section3 #slide {position:relative;width:500%; }
#section3 ul:after{content: "";clear: both; display: block;}
#section3 #slide li img{width:1920px; height: 1000px;float: left;}
#section3 #slide li {float: left; width:20%;}
#section3 h3 {color:#ccc; font-size:22px; position:relative; left:600px; bottom:600px;}
#section3 #prev {position:absolute; top:0; left:0; height:1000px; width:305px; display: block;}
#section3 #prev img {position:relative; top:400px; left:100px;}
#section3 #next {position:absolute; top:0; left:1620px;height:1000px; width:305px;}
#section3 #next img {position:absolute; top:400px; right:100px;}
.snip1273 {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
    left:400px; top:60px;
  margin: 10px;
  min-width: 350px -60px;
  max-width: 350px;
  width: 100%;
  color: #ffffff;
  text-align: left;
  background-color: #000000;
  font-size: 15px;
  float:left;
}
.snip1273 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.4s ease-in;
  transition: all 0.4s ease-in;
}
.snip1273 img {
  position: relative;
  max-width: 100%;
  vertical-align: top;
}
.snip1273 figcaption {
  position: absolute;
  top: 50px;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  padding: 50px 50px;
}
.snip1273 figcaption:before,
.snip1273 figcaption:after {
  width: 1px;
  height: 0;
}
.snip1273 figcaption:before {
  right: 0;
  top: 0;
}
.snip1273 figcaption:after {
  left: 0;
  bottom: 0;
}
.snip1273 h3,
.snip1273 p {
  line-height: 1.5em;
}
.snip1273 h3 {
  margin: 0 0 5px;
  font-weight: 700;
  text-transform: uppercase;
}
.snip1273 p {
  font-size: 0.8em;
  font-weight: 500;
  margin: 0 0 15px;
}
.snip1273 a {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1;
}
.snip1273:before,
.snip1273:after,
.snip1273 figcaption:before,
.snip1273 figcaption:after {
  position: absolute;
  content: '';
  background-color: #ffffff;
  z-index: 1;
  -webkit-transition: all 0.4s ease-in;
  transition: all 0.4s ease-in;
  opacity: 0.8;
}
.snip1273:before,
.snip1273:after {
  height: 1px;
  width: 0%;
}
.snip1273:before {
  top: 0;
  left: 0;
}
.snip1273:after {
  bottom: 0;
  right: 0;
}
.snip1273:hover img,
.snip1273.hover img {
  opacity: 0.4;
}
.snip1273:hover figcaption,
.snip1273.hover figcaption {
  opacity: 1;
}
.snip1273:hover figcaption:before,
.snip1273.hover figcaption:before,
.snip1273:hover figcaption:after,
.snip1273.hover figcaption:after {
  height: 100%;
}
.snip1273:hover:before,
.snip1273.hover:before,
.snip1273:hover:after,
.snip1273.hover:after {
  width: 100%;
}
.snip1273:hover:before,
.snip1273.hover:before,
.snip1273:hover:after,
.snip1273.hover:after,
.snip1273:hover figcaption:before,
.snip1273.hover figcaption:before,
.snip1273:hover figcaption:after,
.snip1273.hover figcaption:after {
  opacity: 0.1;
}

#section4 { height:1200px; position:relative;}
#section4 h1 {font-size:32px; text-align: center; padding-top:190px;}
#section4 ul {margin-top:50px; position:absolute; left:300px; width:1400px; }
#section4 ul li {margin-right:25px; display: inline-block;}
#section4 ul li:last-child {margin-right:0;}

#section5 {background:#ededed url(../images/background5.png)no-repeat center; height:1000px;}
#section5 .wrap {width:100%; height:950px;}
#section5 .color {width:100%;}
#section5 .intro h1 {position:relative; top:200px; font-size:32px; color:#fff; left:850px;}
#section5 p {position:relative; top:240px; left:800px; color:#ccc; font-size:18px; }
#section5 ul {position:relative; top:500px; left:380px;}
#section5 ul li {float:left; margin-right:40px;}
#section5 .go {position:relative; top:270px; left:870px; color:#2d99d9; border:2px solid #2d99d9; border-radius: 20px; padding:10px 24px;}
#section5 span {position:relative; left:880px; top:470px;display: block; color:#fff; font-size:24px;}

footer {background:#000; height:235px; position:relative; font-family: 'NanumSquare'; bottom:200px;}
footer img {position:absolute;left:30px; top:32px; width:45px;}
footer ul {width:500px; position:absolute; left:150px; top:30px;}
footer ul li {display: inline-block; margin-right:30px; line-height:3;}
footer ul li a {color:#aaa;}
footer address {color:#aaa; font-style: normal; font-size:12px; position:relative; top:140px; left:150px;}
footer dl { position:absolute; right:250px; line-height:3; top:28px;}
footer dl dt {color:#aaa;}
footer dl dd {color:#aaa;}