@charset "utf-8";

/* gamja-flower-regular - latin */
@font-face {
  font-family: 'Gamja Flower';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/gamja-flower-v5-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Gamja Flower Regular'), local('GamjaFlower-Regular'),
       url('../fonts/gamja-flower-v5-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/gamja-flower-v5-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/gamja-flower-v5-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/gamja-flower-v5-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/gamja-flower-v5-latin-regular.svg#GamjaFlower') format('svg'); /* Legacy iOS */
}

/* 공통요소 */
.sr-only{
	position:absolute;left:-9999px;
}


header>nav{
	position:fixed;
	right:5px;
	top:45%;
}


header>nav>ul>li{
	margin-bottom:10px;
}

header>nav>ul>li>a{
	display:block;
	text-align:right;
	font-weight:400;
	line-height:25px;
	margin-right:30px;
	font-size:10px;
	/* width:10px; */
	/* height:10px; */
	/* margin-left:5px; */
	/* text-indent:-9999px; */
	/* background-color:rgba(0,0,0,0.85); */
	/* border-radius:12px; */
}


header>nav>ul>li.on>a{
	color:#fff;
	/* width:12px; */
	/* height:12px; */
	/* margin-left:2px; */
	/* background:none; */
	/* border:2px solid white; */
	/* border-radius:7px; */
	
}

header>.ro{
	position:fixed;
	right:0;
	top:48%;
}


header>.ro>ul>li>a{
	display:block;
	/* text-align:right; */
	/* font-weight:400; */
	/* line-height:25px; */
	/* margin-right:30px; */
	/* font-size:10px; */
	width:10px;
	height:10px;
	margin-left:5px;
	text-indent:-9999px;
	background-color:rgba(0,0,0,0.85);
	border-radius:12px;
}


header>.ro>ul>li.on>a{
	/* color:#fff; */
	width:12px;
	height:12px;
	margin-left:2px;
	background:none;
	border:2px solid white;
	border-radius:7px;
	
}

/* 컨텐츠 영역 */


section>.cont2{
	overflow:hidden;
	width:100%;
	height:100vh;
	background-image:url(../images/sub01_3.png);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 100% 100%;
}

section>.cont1{
	
	overflow:hidden;
	width:100%;
	height:100vh;
	background-image:url(../images/sub01.jpg);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
}

.slides-container{animation: slide .4s ease-in-out forwards;display: block;position: absolute; text-align: center;left:50%;transform: translate(-50%,-50%);top:50%;width: 630px;background-color: rgba(0,0,0,0.5);overflow: hidden;border-radius: 10px;}

@keyframes slide {
    0%{height:0;}
    100%{height:auto;}
}
.slides-container li{overflow: hidden;height:100%;display: block;width: 100%; margin:0 auto;}
.slides-container li a{display: block;height:100%;width: 100%;position: relative;color: #ffffff;line-height: 1.9;padding:20px;box-sizing: border-box;}
.slides-container li span{display: block;}
.slides-container li span:last-child{}
.slides-container li span p{display: block;}
.slides-container li span p.pp{margin-bottom:10px;}



@media (max-width:740px) {
    .cont1{}
    .slides-container{width:auto !important;left:20px !important;right:20px !important;transform:translateY(-50%);}
}

@media (max-width:740px) {
    .slides-container{box-sizing: border-box;}
    .slides-container li{height:100%;box-sizing: border-box;}
    .slides-container li span{box-sizing: border-box;font-size:13px !important;display: block;}
    .slides-container li span:first-child{font-size:20px !important;}
    .slides-container li span:nth-child(2){font-size:44px !important;line-height:74px;margin:5px 0;}
    .slides-container li span:last-child p{margin-bottom:5px;}
}

@media (max-width:560px) {
    .slides-container li span:last-child p{font-size:12px;letter-spacing: -.5px;}
}
@media (max-width:430px) {
    .slides-container{left:10px !important;right:10px !important;}
    .slides-container li a{padding:10px;}
    .slides-container li span:first-child{line-height:24px;font-size:16px !important;}
    .slides-container li span:nth-child(2){font-size:40px !important;line-height:50px;}
    .slides-container li span:last-child p{font-size:12px;letter-spacing: -1px;}
}

@media (max-width:340px) {
    .slides-container li span:first-child{font-size:14px !important;line-height:20px;}
    .slides-container li span:nth-child(2){font-size:34px !important;line-height:40px;}
    .slides-container li span:last-child p{font-size:11px;letter-spacing: -1.5px;}
}