﻿@charset "UTF-8";

.Pr_Ks_0217 { position:relative; }
.Pr_Ks_0217 .content { position:relative; width:1200px; margin:0 auto; text-align:center; }
.Pr_Ks_0217 .hidden { opacity:0; }
.Pr_Ks_0217 .view { animation:fadeIn_up .5s ease-out both; }
.Pr_Ks_0217 .topImg { height:1985px; background:url(images/20220217_pr_07.png) no-repeat center; z-index:100; text-align:center; animation:bgScale 0.3s ease-out both; }
.Pr_Ks_0217 .topImg h2 { padding-top:119px; animation:fadeIn .5s .3s ease-out both; }




.box {  text-align: center;  color: #ffff;  opacity: 0;}
.top_02Txt { width:1200px; margin:auto 0; }
.top_02Txt:after { content:""; display:block; clear:both; }
.top_02Txt li { float:left;}


.Pr_Ks_0217 .topTxt { width:1200px; margin:40px auto 0; }
.Pr_Ks_0217 .topTxt:after { content:""; display:block; clear:both; }
.Pr_Ks_0217 .topTxt li { float:left; margin-right:0px; }

.Pr_Ks_0217 .topTxt li:nth-child(1) { animation:fadeIn_up02 .4s 1.8s ease-out both; }
.Pr_Ks_0217 .topTxt li:nth-child(2) { animation:fadeIn_up02 .4s 2.2s ease-out both; }
.Pr_Ks_0217 .topTxt li:nth-child(3) { animation:fadeIn_up02 .4s 2.6s ease-out both; }
.Pr_Ks_0217 .topTxt li:last-child { margin-right:0; animation:fadeIn_up02 .4s 3.0s ease-out both;  }

.Pr_Ks_0217 .topTxt_02 { width:1200px; margin:0; }
.Pr_Ks_0217 .topTxt_02 li { float:left; margin-right:0px; }

.Pr_Ks_0217 .aside_right { position:absolute; right:0; top:770px; width:189px; z-index:105; overflow:hidden;}

.Pr_Ks_0217 .section_01 {height:240px; background:#000 url(images/20220217_pr_12.png) no-repeat center 0; }
.Pr_Ks_0217 .section_02 {background:#fff;}
.Pr_Ks_0217 .section_03 {height:240px; background:#000 url(images/20220217_pr_16.png) no-repeat center 0; }
.Pr_Ks_0217 .section_04 { background:#d8a300;}
.Pr_Ks_0217 .section_05 {height:240px; background:#000 url(images/20220217_pr_27.png) no-repeat center 0; }

.Pr_Ks_0217 .section_06 { background:#e3e3e3;}

.Pr_Ks_0217 .section_07 { height:369px; background:#0d0f11 url(images/section_guideBg.jpg) no-repeat center top;  }
.Pr_Ks_0217 .section_07 .content { text-align:left; padding:55px 0 0; }
.Pr_Ks_0217 .section_07 dt { font-size:18px;color:#fff; padding-bottom:10px;}
.Pr_Ks_0217 .section_07 dd { position:relative; color:#eee; padding:0 0 7px 12px; }
.Pr_Ks_0217 .section_07 dd:after { position:absolute; left:0; top:1px; content:"-"; display:block; }
.Pr_Ks_0217 .section_07 dd strong { font-weight:normal; color:#4e80ff; }

@keyframes fadeIn {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}

@keyframes bgScale {
	0% {
		background-size:120% 120%;
	}
	100% {
		background-size:100% 100%;
	}
}

@keyframes fadeIn_up {
	0% {
		opacity:0;
		transform: translateY(20%);
	}
	100% {
		opacity:1;
		transform: translateY(0);
	}
}

@keyframes fadeIn_up02 {
	0% {
		opacity:0;
		transform: translateY(30%);
	}

	100% {
		opacity:1;
		transform: translateY(0);
	}
}

/* 1400px 이하 사이즈 추가 */
@media (max-width:1400px) {
	.aside_right { display:none; }
	.Pr_Ks_0217 .section_02 { background-image:none; }
	.Pr_Ks_0217 .hidden { opacity:1; }
	.Pr_Ks_0217 .view { animation:none; }
	.Pr_Ks_0217 .section_06 a { right:50px; bottom:235px; }
}

.Pr_Ks_layer1 {position:absolute; float:left; left:470px; top:2472px; z-index: 99;}
.Pr_Ks_layer2 {position:absolute; float:left; left:124px; top:1230px; z-index: 99;}
.Pr_Ks_layer3 {position:absolute; float:left; left:124px; top:1286px; z-index: 99;}
.Pr_Ks_layer4 {position:absolute; float:left; left:124px; top:1374px; z-index: 99;}
.Pr_Ks_layer5 {position:absolute; float:left; left:124px; top:1434px; z-index: 99;}
.Pr_Ks_layer6 {position:absolute; float:left; left:124px; top:1490px; z-index: 99;}
.Pr_Ks_layer7 {position:absolute; float:left; left:124px; top:1548px; z-index: 99;}
.Pr_Ks_layer8 {position:absolute; float:left; left:124px; top:1608px; z-index: 99;}
.Pr_Ks_layer9 {position:absolute; float:left; left:124px; top:1665px; z-index: 99;}
.Pr_Ks_layer10 {position:absolute; float:left; left:124px; top:1722px; z-index: 99;}
.Pr_Ks_layer11 {position:absolute; float:left; right:20px; top:576px; z-index: 99;}

input[type="checkbox"]{display: none;      }
input[type="checkbox"] + label{  display: inline-block;  width: 31px;    height: 31px;    border:2px solid #000;   position: relative;  }
input[id="check1"]:checked + label::after{  content:'✔'; font-size: 50px;color:#F00;   width: 30px;  height: 30px;  text-align: center;  position: absolute;  left: 0;  top:-24px;  }
input[id="check2"]:checked + label::after{  content:'✔'; font-size: 50px;color:#F00;   width: 30px;  height: 30px;  text-align: center;  position: absolute;  left: 0;  top:-24px;  }
input[id="check3"]:checked + label::after{  content:'✔'; font-size: 50px;color:#F00;   width: 30px;  height: 30px;  text-align: center;  position: absolute;  left: 0;  top:-24px;  }
input[id="check4"]:checked + label::after{  content:'✔'; font-size: 50px;color:#F00;   width: 30px;  height: 30px;  text-align: center;  position: absolute;  left: 0;  top:-24px;  }
input[id="check5"]:checked + label::after{  content:'✔'; font-size: 50px;color:#F00;   width: 30px;  height: 30px;  text-align: center;  position: absolute;  left: 0;  top:-24px;  }
input[id="check6"]:checked + label::after{  content:'✔'; font-size: 50px;color:#F00;   width: 30px;  height: 30px;  text-align: center;  position: absolute;  left: 0;  top:-24px;  }
input[id="check7"]:checked + label::after{  content:'✔'; font-size: 50px;color:#F00;   width: 30px;  height: 30px;  text-align: center;  position: absolute;  left: 0;  top:-24px;  }
input[id="check8"]:checked + label::after{  content:'✔'; font-size: 50px;color:#F00;   width: 30px;  height: 30px;  text-align: center;  position: absolute;  left: 0;  top:-24px;  }
input[id="check9"]:checked + label::after{  content:'✔'; font-size: 50px;color:#F00;   width: 30px;  height: 30px;  text-align: center;  position: absolute;  left: 0;  top:-24px;  }

/* rolling_wrap */
.rolling_wrap {width:670px;}
.rolling {height:286px; width:670px; overflow:hidden;}
.rolling>.banner {position:relative; float:left; width:670px;}
.rolling>.banner .prev {position:absolute; left:0; cursor:pointer; top:126px;  z-index:100;}
.rolling>.banner .next {position:absolute; right:0; cursor:pointer; top:126px;  z-index:100;}
.rolling>.banner .bx-controls-direction {display:none;}