@charset "utf-8";

html{font-size:10px;}
.oh{overflow:hidden;}
.container {width:100%; margin:0 auto; max-width:1000px; position:relative;}
.cf:after{content:''; display: block; clear:both; visibility:hidden; height:0px;}
.eventName {max-width:2560px;margin:0 auto;text-align:center;letter-spacing:-0.5px;line-height:1.5;background:#efdfe8;}
.eventName .section {padding: 6rem 0;}
.eventName .section__inner {max-width: 1000px; height:100%; margin:auto; text-align:center;}
.blind{text-indent:-9999px; position:absolute; left:-9999px; top:-9999px; font-size:0; width:0; height:0}

/* hr */
.hr-dash {display:block; margin:4rem auto; width:90%; border-top:1px dashed #8ecfb9}

.sec01 {height:1370px; background:url(images_sg/title_bg.jpg) no-repeat center top / cover;}
.sec02 {height:auto; background:#fff}
.sec04 {height:auto; background:url(images_sg/con03_bg.jpg)}

.sec02 .content {position:relative; max-width:781px; margin:auto}
.sec02 .content .img {position:relative;}
.sec02 a {position:absolute; top: 0; left:34%; width:33%; height:0.7%;}
.sec02 a.link01 {top: 19.9%;}
.sec02 a.link02 {top: 40.6%;}
.sec02 a.link03 {top: 73%;}
.sec02 a.link04 {top: 96.5%;}

.sec04 h2 {margin-bottom:5rem;}    
.sec04 .box {padding:4rem 10px; margin:0 0 0px; border:1px solid #000; background: #fff;}
.sec04 .box dl {margin:6rem 0 0}
.sec04 .box dl:nth-of-type(1) {margin: 0 0}
.sec04 .box dt {margin:0 0 1rem; font-size:3.4rem; color:#222; font-weight:bold; line-height:1.2;}
.sec04 .box dt strong {font-size:3.4rem; color:#ff726f}
.sec04 .box dd:nth-of-type(1) span {position:relative; font-size:2.4rem; color:#999}
/* 가격 화살표 */
.sec04 .box dd:nth-of-type(1) span:before {content: ''; position:absolute; width:120%; height:1px; left:50%; top:50%; transform: translate(-50%,-50%); background:#999; }
.sec04 .box dd:nth-of-type(1) span:after {content: ''; position:absolute; left:109%; top:50%; transform: translateY(-50%); border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid #999;}

.sec04 .box dd:nth-of-type(1) strong {margin-left:20px; font-size:3.2rem; color:#40a17b}
.sec04 .box dd:nth-of-type(1) strong.orange {color:#e56f4e}
.sec04 .box dd:nth-of-type(2) {margin:2rem 0}
.sec04 .box dd:nth-of-type(3) {margin:-3% 0 0; font-size:1.8rem; color:#222;}
.sec04 address {margin:3rem 0 0;}
.sec04 .box dd:nth-of-type(4) {margin:1rem 0 0; font-size:1.6rem; color:#666;}

.sec04 .tag span {display: inline-block; margin-bottom: 10px; padding: 2px 2rem; border-radius: 50px; border: 0.2rem solid #000; font-weight: bold; color: #fff; background: #52aa8a;}
.sec04 .tag.orange span {display: inline-block; background: #e87f63;}

.sec04 .box03 dd:nth-of-type(1) {font-size:2.2rem; color:#222}
.sec04 .box03 dd:nth-of-type(1) strong {z-index:1; position:relative; font-size:2.2rem;  color:#222}
.sec04 .box03 dd:nth-of-type(1) strong:before {z-index:-1; content:''; position: absolute; left: 0; bottom:0; width:100%; height:40%; background: #ffdfe8;}

/* 롤링 배너 */
.rolling-slider {overflow:hidden;}
.rolling-wrap {animation: rolling 6s linear infinite; display: flex;}
.rolling-list {display:flex; flex:0 0 auto}
.rolling-list li {padding:1.4rem; font-size:2.8rem; color:#000; font-weight:bold}
@keyframes rolling {
	0% {transform: translateX(0);}
	100% {transform: translateX(-50%);}
}

.roll01 {background:#b6f3a1;}
.roll02 {background:#f8d4d4;}
.roll03 {background:#f08f3f;}
.roll04 {background:#fdead5;}

.snoopy {position:absolute; bottom:15%; right:-13%}

@media screen and (max-width: 1040px){
	html{font-size:9px;}
	.eventName .section__inner {width:100%; padding:0 20px; box-sizing:border-box}

	.sec01 {height:auto; padding:45% 0}
	.sec02 .info ul li .txt {font-size:2vw;}
	.sec02 .info ul li .txt strong {line-height:1.2; font-size:2.5vw;}


}

@media screen and (max-width: 768px){
	html{font-size:8px;}
	.sec02 .content {flex-direction: column;}
	.sec02 .info {width:auto; margin-top: 15px;}
	.sec02 .info ul li {margin:15px 0 0}
	.sec02 .info ul li .num {top:3px; width:3rem; height:3rem;}
	.sec02 .info ul li .txt {font-size:2rem;}
	.sec02 .info ul li .txt strong {font-size:2.6rem;}

	.sec03 h2, 
	.sec04 h2 {margin-bottom: 3rem;}

	.snoopy {width:36%;}


}

@media screen and (max-width: 480px){
	html{font-size:6px;}
	.sec02 .info {padding-right:10px; margin-left: 5rem;}

	.sec03 .box .txt p:nth-child(1) em {z-index:1; position:relative;	font-size:3.5rem;}
	.sec04 .box dt, 
	.sec04 .box dt strong,
	.sec04 .box dd:nth-of-type(1) strong
	{font-size:2.5rem; letter-spacing: -1px;}
	.sec04 address img {max-width:70%}

	.sec04 .box03 dd:nth-of-type(1) strong {font-size:2rem;}


}