html, body {
	 font-family: 'NanumSquare', 'Pretendard', "Apple SD Gothic Neo", "Malgun Gothic", Sans-serif;
}
 body {
	 overflow-y: visible;
}
 body {
	 background: var(--color3);
}
 .wrap {
	 width: 1200px;
	 margin: 0 auto;
	 padding: 0px 15px;
}
 .w100 {
	 max-width: 100%;
}
 .fl {
	 float: left;
}
 .fr {
	 float: right;
}
 .clear {
	 clear: both;
}
 header {
	 background: rgba(0, 0, 0, 0.6);
	 border-bottom: 1px solid rgba(255, 255, 255, 0.6);
	 font-size: 18px;
	 position: fixed;
	 left: 0px;
	 top: 0px;
	 width: 100%;
	 height: 100px;
	 line-height: 100px;
	 z-index: 10;
}
 header .logo {
	 width: 150px;
	 height: 100px;
	 display: inline-block;
	 float: left;
	 vertical-align: middle;
	 position: relative;
}
 header .logo img {
	 max-height: 100px;
	 position: absolute;
	 left: 50%;
	 top: 50%;
	 transform: translate(-50%, -50%);
}
 header .btn-bars {
	 display: none;
}
 header ul.nav_mnu {
	 float: right;
}
 header ul.nav_mnu li.nav_menu {
	 display: inline-block;
}
 header ul.nav_mnu li.nav_menu a {
	 font-size: 18px;
	 color: #ccc;
	 display: block;
	 padding: 0px 50px;
	 font-weight: 600;
}
 header .sns_list {
	 position: fixed;
	 right: 0px;
	 top: 30%;
	 background: rgba(0, 0, 0, 1);
	 padding: 15px;
	 line-height: 10px;
}
 header .sns_list > li {
	 margin-bottom: 15px;
}
 header .sns_list > li:last-child {
	 margin-bottom: 0px;
}
 header .sns_list img {
	 width: 30px;
}
 h1 {
	 font-size: 48px;
	 font-weight: 200;
	 color: var(--color2);
	 letter-spacing: -2px;
	 line-height: 52px;
}
 h1 b {
	 font-weight: 800;
}
 h1 small {
	 font-size: 24px;
	 letter-spacing: 0;
	 font-weight: 600;
	 color: var(--color1);
	 display: block;
}
 h1.center {
	 text-align: center;
	 margin: 0 auto;
}
 p {
	 font-size: 18px;
	 line-height: 24px;
	 color: var(--color2);
	 letter-spacing: -1px;
	 padding: 30px 0px;
}
 .btn_top {
	 position: fixed;
	 right: 0px;
	 bottom: 15%;
	 z-index: 99;
	 width: 60px;
}
 .btn_top img {
	 width: 100%;
}
 .btn {
	 border: 1px solid #fff;
	 background: rgba(0, 0, 0, 0.3);
	 text-align: center;
	 padding: 0px 30px;
	 font-size: 18px;
	 letter-spacing: -1px;
	 height: 50px;
	 line-height: 50px;
	 display: inline-block;
	 color: white;
}
 .btn.center {
	 margin: 0 auto;
}
 footer {
	 background: var(--color4);
	 text-align: center;
	 font-size: 14px;
	 line-height: 20px;
	 color: #ccc;
	 padding: 30px 0px;
}
 footer b {
	 color: var(--color1);
	 font-weight: 600;
}
 section {
	 padding-top: 160px;
}
 .pc {
	 display: block;
}
 .mo {
	 display: none;
}
 .lg {
	 display: block;
}
 .md {
	 display: none;
}
 .top_nav {
	 width: 100%;
	 height: 500px;
}
 .top_nav .container {
	 position: relative;
	 height: 100%;
}
 .top_nav h1 {
	 display: block;
	 font-size: 80px;
	 line-height: 76px;
	 position: absolute;
	 top: 50%;
	 transform: translateY(-50%);
}
 .top_nav h1 b {
	 display: block;
	 padding-top:15px;
}
 .top_nav .line {
	 width: 1px;
	 height: 100px;
	 background: var(--color1);
	 position: absolute;
	 bottom: -50px;
}
 @media only screen and (max-width: 1200px) {
	 .wrap {
		 width: 100%;
	}
	 .lg {
		 display: none;
	}
	 .md {
		 display: block;
	}
}
 @media only screen and (max-width: 999px) {
	 header {
		 background: rgba(0, 0, 0, 0.6);
		 border-bottom: 1px solid rgba(255, 255, 255, 0.6);
		 font-size: 18px;
		 position: fixed;
		 left: 0px;
		 top: 0px;
		 width: 100%;
		 height: 100px;
		 line-height: 100px;
	}
	 header .logo {
		 height: 60px;
		 width: 150px;
		 display: inline-block;
		 float: left;
		 vertical-align: middle;
		 position: relative;
		 padding-top: 12px;
	}
	 header .logo img {
		 position: relative;
		 left: auto;
		 top: auto;
		 transform: none;
		 max-height: 33px;
	}
	 header .btn-bars {
		 display: block;
		 float: right;
		 cursor: pointer;
		 margin-top: 30px;
	}
	 header ul.nav_mnu {
		 float: none;
		 display: none;
		 width: 100%;
		 position: fixed;
		 left: 0px;
		 top: 100px;
		 background: rgba(0, 0, 0, 0.6);
		 line-height: 100px;
	}
	 header ul.nav_mnu li.nav_menu {
		 display: block;
		 text-align: center;
	}
	 header ul.nav_mnu li.nav_menu a {
		 font-size: 18px;
		 color: #ccc;
		 display: block;
		 padding: 0px 50px;
		 font-weight: 600;
	}
	 header ul.nav_mnu .sns_list {
		 display: block;
		 width: 100%;
		 position: relative;
		 background: none;
		 line-height: 60px;
	}
	 header ul.nav_mnu .sns_list > li {
		 width: 20%;
		 display: block;
		 float: left;
	}
	 header ul.nav_mnu .sns_list > li > a {
		 display: block;
		 width: 100%;
		 text-align: center;
	}
	 header ul.nav_mnu .sns_list > li > a > img {
		 width: 40%;
	}
}
 @media only screen and (max-width: 680px) {
	 .pc {
		 display: none;
	}
	 .mo {
		 display: block;
	}
	 h1 {
		 font-size: 36px;
		 font-weight: 200;
		 color: var(--color2);
		 letter-spacing: -2px;
		 line-height: 40px;
	}
	 h1 b {
		 font-weight: 800;
	}
	 h1 small {
		 font-size: 18px;
		 letter-spacing: 0;
		 font-weight: 600;
		 color: var(--color1);
		 display: block;
	}
	 p {
		 font-size: 12px;
		 line-height: 24px;
		 color: var(--color2);
		 letter-spacing: 0px;
		 padding: 15px 0px;
		 padding-bottom: 15px !important;
	}
	 .top_nav {
		 width: 100%;
		 height: 500px;
	}
	 .top_nav .container {
		 position: relative;
		 height: 100%;
	}
	 .top_nav h1 {
		 display: block;
		 font-size: 52px;
		 line-height: 45px;
		 position: absolute;
		 top: 50%;
		 transform: translateY(-50%);
	}
	 .top_nav h1 b {
		 display: block;
	}
	 .top_nav .line {
		 width: 1px;
		 height: 100px;
		 background: var(--color1);
		 position: absolute;
		 bottom: -50px;
	}
}