@charset "utf-8";

header, footer, nav, section, article, aside {display:block;}
* { margin: 0; padding: 0; box-sizing: border-box; }
h1,h2,h3,h4,h5,h6,ol,ul,li,form,fieldset,input,textarea,p,th,td,dt,dd,dl {margin:0;padding:0;}
h1,h2,h3,h4,h5,h6 {font-size:12px;}
li {list-style:none;}
img,fieldset {border:0;vertical-align:top;}
em {font-style:normal;}
input.radio {width:13px; height:13px; vertical-align:middle;}
address,em,i {font-style:normal;}
.hdn, legend,table caption{font-size:0; height:0; overflow:hidden; position:absolute;visibility:hidden; width:0; line-height:0;}
table caption{font-size:0; height:0; overflow:hidden; position:static;visibility:hidden; width:0; line-height:0;}
a {text-decoration:none; color:inherit;}
input:focus { outline: none; }
select:focus { outline: none; }

body { font-family: 'NanumBarunGothic', sans-serif; font-size: 12px; font-weight: normal; margin: 0px; width: 100%; height: 100%; background-color: #222; line-height: 1.2; scroll-behavior: smooth; }

::-webkit-scrollbar { width:5px; height: 5px; }
::-webkit-scrollbar-track { border-radius:10px; background:#111;}
::-webkit-scrollbar-thumb { border-radius:10px; background:#333;}

.wrap { position: relative; width: 100%; margin: 0; padding: 0; }
.header { position: fixed; top: 0; left: 0; z-index: 200; width: 100%; }

.navbar { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 3rem; background: #fff; }
.hamburger { display: none; }
.bar { display: block; width: 25px; height: 3px; margin: 5px auto; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background-color: #101010; }
.nav-menu { display: flex; justify-content: space-between; align-items: center; }
.nav-item { margin-left: 5rem; }
.nav-link { font-size: 14px; font-weight: normal; color: #333; font-weight: bold; }
.nav-link:hover { color: #0072ff; }
.nav-logo { cursor: pointer; }
.nav-logo img { position: relative; top: 0; }

.body_bg video { position : fixed; bottom : 0; left : 0; width : 100%; height : 100%; z-index : -1; opacity: 1; object-fit: cover; }

section { width: 100%; padding-top: 80px; -webkit-overflow-scrolling: touch; }
.container { display: block; }

.bnr-div1 { height: 600px; display: block; position: relative; }
.bnr-div2 { height: 700px; display: block; position: relative; }
.bnr-div3 { height: 800px; display: block; position: relative; }
.bnr-div4 { height: 900px; display: block; position: relative; }
.bnr-div5 { height: 700px; display: block; position: relative; }

.bg-video { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: -1; opacity: 0.8; }
.bg-video_content { height: 100%; width: 100%; object-fit: cover; }

.bgopacity { opacity: 0.3; }

.bnr-cont { display: flex; justify-content: center; align-items: center; z-index: 1; height: 100%; flex-wrap: wrap; }
.bnr-cont .subtitle { font-size: 24px; position: relative; color: #fff; text-align: center; line-height: 1; }
.bnr-cont .subtitle h1 { text-align: center; font-size: 80px; color: #fff; width: 100%; line-height: 1; padding: 0 0 20px; }
.bnr-cont .subtitle span { font-size: 14px; }

.bnr-cont .left-cont { flex-basis: 50%; text-align: right; padding-right: 20px; font-size: 20px; color: #fff; }
.bnr-cont .left-cont h1 { text-align: right; font-size: 40px; }
.bnr-cont .left-cont h2 { text-align: right; font-size: 14px; padding: 30px 0 0; font-weight: normal; line-height: 1.8; }
.bnr-cont .left-cont h2 span { color: #fc0; }
.bnr-cont .right-cont { flex-basis: 50%; text-align: left; padding-left: 20px; font-size: 20px; color: #fff; }
.bnr-cont .right-cont h1 { text-align: left; font-size: 40px; }
.bnr-cont .right-cont h2 { text-align: left; font-size: 14px; padding: 30px 0 0; font-weight: normal; line-height: 1.8; }
.bnr-cont .right-cont h2 span { color: #fc0; }





footer { padding: 140px 0 20px; }
.footer-wrap { display: block; text-align: center; color: #777; }
.footer-wrap p { display: block; font-size: 11px; padding: 40px 0 0; }
.footer-wrap .cpyrights { display: block; font-size: 14px; padding: 30px 0 0; }

.cont-container { display: block; margin: 0 auto; max-width: 1400px; padding: 100px 0 0; }

.pagetitle { display: block; text-align: left; padding: 0 20px; }
.pagetitle .ttname { display: block; font-size: 30px; color: #fff; width: 100%; overflow: hidden; }
.pagetitle .ttcont { display: block; font-size: 14px; color: #777; margin: 20px 0 0; }

.offerlist-wrap { display: block; padding: 50px 0 0; }

.tab-position { display: flex; flex-wrap: wrap; justify-content: flex-start; }
.tab-position .tp-wrap { display: flex; flex-basis: 15%; padding: 5px; }
.tppdg { display: flex; flex-wrap: wrap; justify-content: flex-start; }
.tppdg .tp-wrap { flex-basis: 25%; }

.tab-position .tp-wrap .tab-button { background: #282828; border-radius: 20px; width: 100%; font-size: 15px; color: #999; transition: all 0.3s ease-in-out; text-align: center; padding: 12px 0; cursor: pointer; }
.tab-position .tp-wrap .tab-button:hover { background: #353535; color: #fff; }
.tab-position .tp-wrap .on { background: #353535; color: #fff; }

.list-wrap { display: flex; flex-wrap: wrap; justify-content: flex-start; }
.list-wrap .btn-div { display: flex; flex-basis: 20%; padding: 2px; position: relative; }

.animated-button1 {
	background: #151515;
	width: 100%;
	height: 140px;
	margin: 12px;
	display: inline-block;
	-webkit-transform: translate(0%, 0%);
		  transform: translate(0%, 0%);
	overflow: hidden;
	color: #f7d4d4;
	font-size: 20px;
	letter-spacing: 2.5px;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	-webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
		  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
	position: relative;
}

.animated-button1::before {
	content: '';
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: #ad8585;
	opacity: 0;
	-webkit-transition: .2s opacity ease-in-out;
	transition: .2s opacity ease-in-out;
}

.animated-button1 span { position: absolute; }

.animated-button1 span:nth-child(1) {
	top: 0px;
	left: 0px;
	width: 100%;
	height: 2px;
	background: -webkit-gradient(linear, right top, left top, from(rgba(43, 8, 8, 0)), to(#d92626));
	background: linear-gradient(to left, rgba(43, 8, 8, 0), #d92626);
	-webkit-animation: 2s animateTop linear infinite;
		  animation: 2s animateTop linear infinite;
}

@keyframes animateTop {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}

.animated-button1 span:nth-child(2) {
	top: 0px;
	right: 0px;
	height: 100%;
	width: 2px;
	background: -webkit-gradient(linear, left bottom, left top, from(rgba(43, 8, 8, 0)), to(#d92626));
	background: linear-gradient(to top, rgba(43, 8, 8, 0), #d92626);
	-webkit-animation: 2s animateRight linear -1s infinite;
		  animation: 2s animateRight linear -1s infinite;
}

@keyframes animateRight {
  0% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  100% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}

.animated-button1 span:nth-child(3) {
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 2px;
	background: -webkit-gradient(linear, left top, right top, from(rgba(43, 8, 8, 0)), to(#d92626));
	background: linear-gradient(to right, rgba(43, 8, 8, 0), #d92626);
	-webkit-animation: 2s animateBottom linear infinite;
		  animation: 2s animateBottom linear infinite;
}

@keyframes animateBottom {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}

.animated-button1 span:nth-child(4) {
	top: 0px;
	left: 0px;
	height: 100%;
	width: 2px;
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(43, 8, 8, 0)), to(#d92626));
	background: linear-gradient(to bottom, rgba(43, 8, 8, 0), #d92626);
	-webkit-animation: 2s animateLeft linear -1s infinite;
		  animation: 2s animateLeft linear -1s infinite;
}

@keyframes animateLeft {
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}

.ab-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.ab-wrap .ab-cont { display: block; position: relative; height: 100%; }
.ab-wrap .ab-cont .cpyimg { display: block; text-align: left; padding: 37px 0 0 40px; }
.ab-wrap .ab-cont .cpyimg span { display: inline-block; width: 100px; }
.ab-wrap .ab-cont .cpyimg span img { width: 100%; }
.ab-wrap .ab-cont .cpyname { display: block; text-align: left; color: #fff; font-size: 20px; padding: 10px 10px 0; position: absolute; left: 37px; top: 80px; }
.ab-wrap .ab-cont .cpynamesub { display: block; text-align: left; color: #777; font-size: 12px; padding: 0 12px; position: absolute; left: 37px; top: 115px; }
.ab-wrap .ab-cont .namelabel { position: absolute; right: 35px; bottom: 30px; color: #ffa200; font-size: 12px; }

.pppwdw { position: relative; margin: 0 auto; max-width: 800px; }

.pp-wrapper { position: relative; padding: 30px 0 50px; display: block; letter-spacing: 0; }
.pp-wrapper .pp-close { position: absolute; top: 20px; right: 20px; cursor: pointer; }
.pp-wrapper .pp-titlename { display: block; text-align: left; font-size: 12px; color: #fff; }
.pp-wrapper h5 { display: block; text-align: center; color: #fff; font-size: 18px; font-weight: normal; margin: 40px 0 0; }
.pp-wrapper h4 { display: block; text-align: center; color: #aaa; font-size: 12px; font-weight: normal; }

.login-input-wrap { display: block; margin: 30px 150px 0; }

.inputstyle { display: block; background: #131313; height: 50px; padding: 0 15px; position: relative;transition: all 150ms ease-in-out; border-radius: 20px; }
.inputstyle label { position: absolute; top: 8px; left: 15px; color: #f9b208; font-size: 11px; }
.inputstyle:hover { background: #181818; }
.inputstyle input { width: 100%; height: 50px; background: transparent; border: 0; color: #fff; font-size: 14px; }
input:focus { outline: none; }
select:focus { outline: none; }

.button-position { display: block; margin: 10px 0 0; text-align: center; }
.button-position .agr-button { display: block; padding: 14px 0 16px; border-radius: 20px; cursor: pointer; text-align: center; background: #ffa200; color: #111; font-size: 14px; font-weight: bold; transition: all 150ms ease-in-out; }
.button-position .agr-button:hover { background: #fff; }

.template-type-div { display: block; position: relative; }
.template-type-div .type-div { display: flex; justify-content: center; align-items: center; height: 100%; flex-wrap: nowrap; border-bottom: 1px #333 solid; padding: 50px 0 0; }
.template-type-div .type-div .img-cont { flex-basis: 55%; text-align: right; padding-right: 20px; }
.template-type-div .type-div .img-cont img { width: 70%; }
.template-type-div .type-div .txt-cont { flex-basis: 45%; text-align: left; padding-left: 20px; font-size: 20px; color: #fff; }
.template-type-div .type-div .txt-cont h1 { text-align: left; font-size: 40px; }
.template-type-div .type-div .txt-cont h1 span { font-weight: 100; }
.template-type-div .type-div .txt-cont h2 { text-align: left; font-size: 20px; padding: 20px 0 0; font-weight: normal; color: #ffa200; }
.view-button { display: inline-block; background: #ffa200; border-radius: 25px; font-size: 15px; color: #000; text-align: center; cursor: pointer; padding: 15px 35px; margin: 10px 0; transition: all 150ms ease-in-out; font-weight: bold; }
.view-button:hover { background: #fff; }
.view-button-info { display: inline-block; background: #fff; border-radius: 5px; font-size: 15px; color: #000; text-align: center; cursor: pointer; padding: 15px 15px; margin: 10px 0; transition: all 150ms ease-in-out; font-weight: bold; }

.view-button2 { display: inline-block; background: #ffa200; border-radius: 20px; font-size: 15px; color: #000; text-align: center; cursor: pointer; padding: 15px 20px; margin: 10px 0; transition: all 150ms ease-in-out; font-weight: bold; }
.view-button2:hover { background: #fff; }










@media only screen and (max-width: 768px) {
	
	::-webkit-scrollbar { display: none; }
	
	section { width: 100%; padding-top: 60px; }
	
	.navbar { padding: 1rem 1.5rem; background: #fff; }
    .nav-menu { position: fixed; left: -100%; top: 3.8rem; flex-direction: column; background-color: #fff; width: 100%; text-align: center; transition: 0.2s; box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05); z-index: 999; }
    .nav-menu.active { left: 0; }
	.nav-logo img { top: 0; }
    .nav-item { margin: 30px 0; }
    .nav-item:first-child { margin: 60px 0 30px; }
	.nav-item:last-child { margin: 30px 0 60px; }
    .hamburger { display: block; cursor: pointer; }
    .hamburger.active .bar:nth-child(2) { opacity: 0; }
    .hamburger.active .bar:nth-child(1) {
        -webkit-transform: translateY(8px) rotate(45deg);
        transform: translateY(8px) rotate(45deg);
    }
    .hamburger.active .bar:nth-child(3) {
        -webkit-transform: translateY(-8px) rotate(-45deg);
        transform: translateY(-8px) rotate(-45deg);
    }
	
	.bnr-div1 { height: 400px; }
	.bnr-div2 { height: 500px; }
	.bnr-div3 { height: 400px; }
	.bnr-div4 { height: 700px; }
	.bnr-div5 { height: 360px; }
	.bnr-cont .subtitle { font-size: 14px; position: relative; color: #fff; text-align: center; padding: 0 10px 0; letter-spacing: -0.07em; line-height: 1.2; }
	.bnr-cont .subtitle h1 { font-size: 40px; padding: 0 0 10px; }
	.bnr-cont .subtitle span { font-size: 12px; }
	
	.bnr-cont .left-cont { flex-basis: 100%; text-align: center; padding-right: 0; padding-top: 10px; }
	.bnr-cont .left-cont img { width: 60%; }
	.bnr-cont .left-cont h1 { text-align: left; font-size: 30px; padding-left: 20px; }
	.bnr-cont .left-cont h2 { text-align: left; font-size: 12px; padding: 10px 0 0 20px; font-weight: normal; line-height: 1.5; }
	.bnr-cont .right-cont { flex-basis: 100%; text-align: center; padding-left: 0; font-size: 20px; position: relative; top: -30px; }
	.bnr-cont .right-cont h1 { text-align: left; font-size: 30px; padding-left: 20px; }
	.bnr-cont .right-cont h2 { text-align: left; font-size: 12px; padding: 10px 0 0 20px; font-weight: normal; line-height: 1.5; }
	
	.imgnone { display: none; }
	footer { padding: 60px 10px 20px; }
	.footer-wrap img { width: 100%; }
	.footer-wrap .cpyrights { font-size: 12px; }
	
	.cont-container {padding: 40px 0 0; }
	.offerlist-wrap { padding: 20px 5px 0; }
	
	.tab-position .tp-wrap { flex-basis: 25%; padding: 2px; }
	.tppdg .tp-wrap { flex-basis: 33%; }
	.tppdg .tp-wrap .tab-button { font-size: 12px; padding: 12px 10px; letter-spacing: -0.05em; }
	
	.list-wrap .btn-div { flex-basis: 50%; padding: 0; }
	.ab-wrap .ab-cont .cpyimg { padding: 30px 0 0 30px; }
	.ab-wrap .ab-cont .cpyimg span { width: 80px; }
	.ab-wrap .ab-cont .cpyname { font-size: 16px; left: 20px; top: 60px; }
	.ab-wrap .ab-cont .cpynamesub {font-size: 11px; left: 20px; top: 95px; }
	.ab-wrap .ab-cont .namelabel { right: 25px; bottom: 30px; }
	
	.animated-button1 {	height: 120px; }
	
	.login-input-wrap { display: block; margin: 30px 20px 0; }
	
	.template-type-div .type-div { height: 100%; flex-wrap: wrap; padding: 40px 0 30px; }
	.template-type-div .type-div .img-cont { flex-basis: 100%; text-align: center; padding-right: 0; }
	.template-type-div .type-div .txt-cont { flex-basis: 100%; text-align: center; padding-left: 10px; font-size: 20px; color: #fff; }
	.template-type-div .type-div .txt-cont h1 { text-align: center; font-size: 30px; }
	.template-type-div .type-div .txt-cont h2 { text-align: center; font-size: 14px; padding: 0; }
	
}

@media only screen and (max-width: 640px) {
	
	
	
}