@charset "utf-8";

html{font-size:10px;}
.oh{overflow:hidden;}
.container {width:100%; margin:0 auto; max-width: 920px; position:relative;}
.eventName {max-width:2560px;margin:0 auto;text-align:center;letter-spacing:-1px;line-height:1.5;}
img {max-width: none;}

/* 공통 */
.padding {padding: 8% 0;}
.con01 {position:relative; background:url(images_hk/bg1.jpg) center top / cover; text-align:center;}
.con02 {position:relative; background:url(images_hk/bg2.jpg) center top / cover; text-align:center;}
.con03 {position:relative; background:url(images_hk/bg3.jpg) center top / cover; text-align:center;}
.con04 {position:relative; background-color: #ff9fc5; text-align:center;}

/* deco 가상요소 */
.con02 .txt {position:relative;} 
.con02 .txt::after {content: ''; position:absolute; width:75px; height:65px; top:-41px; right:-69px; background-image: url('images_hk/deco1.png');} 
.con03 .txt {position:relative;} 
.con03 .txt::after {content: ''; position:absolute; width:88px; height:65px; top:-32px; left:-87px; background-image: url('images_hk/deco2.png');} 

.con02 .pd {margin-top:20px;}
.con03 .pd {margin-top:4%;}

/* * slick slider */
.con_slick .box {display:flex; justify-content: space-between; align-items: center;}
.con_slick .slick_wrap {width:50%; position:relative;}
.con_slick .slick_wrap::before {content: ''; position:absolute; width:100%; height:90%; top:0; right:0; box-shadow: 0px 0px 3px rgba(0,0,0,0.2);}
.con_slick .txt {width:48%;}

/* * slick dot */
 /* dot 버튼 커스텀 */
 .slick-arrow {display:none; text-indent:-9999px; position:absolute; top:-1000%; z-index:-100;}
 .slick-dots {text-align: center; position:relative; bottom:50px;}
 .slick-dots > li {display: inline-block; margin-left: 3%; padding: 10px 0;}
 .slick-dots > li > button {display: block; padding: 0; font-size: 0; border: 1px solid transparent; border-radius: 50%; width: 14px; height: 14px; border: none; background-color: rgba(255,255,255,0.5); }
 /* 버튼 클릭시 색 변경 */
 .slick-dots > li.slick-active button {background-color: #fff;}

 /* * Link */
 .link01 {position:absolute; width:37%; height:7%; left:32%; bottom: 6%; z-index:10;}
 .link02 {position:absolute; width:26%; height:9%; left:12%; bottom: 18%; z-index:10;}
 .link span {display:none; font-size:0;}



@media screen and (max-width: 1000px){
	html {font-size: 8px;}
	.container {width:95%;}
	img {max-width: 100%;}
	.con_slick .txt {width:44%;}
	
	.con02 .txt::after {display:none;}
	.con03 .txt::after {display:none;}
}


@media screen and (max-width: 768px){
	.slick-dots {bottom: 34px;}
	.slick-dots > li > button {width: 10px; height: 10px;}
}

@media screen and (max-width: 480px){
	.con_slick .slick_wrap::before {height:88%;}
	.slick-dots {bottom: 27px;}
	.slick-dots > li > button {width: 7px; height: 7px;}

}