/*서브공통*/
.sub{width: 100%;}

/*서브탑*/
.sub_top{width: 100%;}
.sub_top .inner2{margin: 24vh auto 0; position: relative;}
.sub_tit{font-size: 3rem; text-align: center; text-transform: uppercase; margin-bottom: 2vh;}
.top_bg{width: 100%;}

/*서브1-1*/
.s1_txt{width: 20%; position: absolute; left: 30%; bottom: 20%; transform: translate(-50%, -50%);}
.s1_txt img{width: 100%; animation: s1_txt 2s infinite alternate;}
@keyframes s1_txt {
	0% { transform: rotate(9deg); }
	100% { transform: rotate(0deg); }
}

.s111{margin: 10vh auto; text-align: center;}
.s111 .tit{font-size: 2rem; font-weight: 700; line-height: 1.5; display: inline-block; position: relative;}
.s111 .tit .love{width: 16px; position: absolute; left: 8%; top: 0;}
.s111 .con{font-size: 1.2rem; font-weight: 700; line-height: 1.5; margin-top: 12vh;}
.s111 .con span{background: #b31414; color: #fff; padding: 2px 8px;}

.s112{height: 100vh; background: url(../img/s1/s112_bg.png) no-repeat center/cover; margin-top: 30vh;}
.s112 .inner{margin: auto;}
.s112_con{width: 600px; position: relative;}
.s112_con .s112_txt{width: 460px; position: absolute; left: 0; top: -14vh;}
.s112_con .s112_body{width: 40%; position: absolute; right: 6px; top: -70px;}
.s112_con .s112_arm{width: 20%; position: absolute; right: 60px; top: 84px; animation: s2_arm 1s infinite alternate;}
@keyframes s2_arm {
	0% { transform: rotate(9deg); }
	100% { transform: rotate(0deg); }
}
.s112_info{position: absolute; left: 69px; top: 40px; text-align: center;}
.s112_info > li{padding: 0 0 4vh;}
.s112_info > li::after{content: ''; width: 50%; height: 3px; background: #000; display: block; margin: 4vh auto 0;}
.s112_info > li:nth-last-child(1)::after{display: none;}
.s112_info p{font-size: 1.2rem; font-weight: 700;}
.s112_info p.red{font-size: 1.8rem; font-weight: 700; margin-bottom: 2vh;}

.s113 .inner{margin: 16vh auto 20vh; position: relative;}
.s113 .inner img{width: 45%; display: block; margin: auto;}
.s113 p{font-size: 1.6rem; font-weight: 700; position: absolute; top: 7vh; left: 50%; transform: translateX(-50%);}

.s114{padding-top: 16vh;}
.s114 .inner{margin: auto;}
.s114 p{font-size: 2rem; font-weight: 700; line-height: 1.5; text-align: center;}
.s114 img{width: 60%; display: block; margin: auto;}


/*서브1-2*/
.s121{margin: 10vh auto 14vh; text-align: center;}
.s121 .tit{font-size: 2rem; font-weight: 700; line-height: 1.5; display: inline-block; position: relative;}
.s121 .tit .love{width: 16px; position: absolute; left: -6%; top: 0;}
.s121 .con{font-size: 1.2rem; font-weight: 700; line-height: 1.5; margin-top: 4vh;}

.s121_ul{width: 100%; font-size: 0; margin-top: 8vh; text-align: initial;}
.s121_ul > li{width: 25%; display: inline-block; vertical-align: top; box-sizing: border-box; padding: 0 30px; margin-bottom: 8vh;}
.s121_ul > li:nth-last-child(1){width: 35.5%;}
.s121_ul > li img{width: 100%;}
.s121_ul > li p{font-size: 1.1rem; font-weight: 700; margin-top: 3vh; text-align: center;}

.s121_btn{text-align: center; margin-bottom: 30vh;}
.s121_btn > li{display: inline-block; vertical-align: middle; border: 3px solid #000; width: 200px; height: 50px; transition: all 0.4s;}
.s121_btn > li:nth-child(1){margin-right: 50px;}
.s121_btn > li a{font-size: 1.2rem; font-weight: 700; line-height: 50px;}
.s121_btn > li:hover{background: #ffd100;}

/*서브2-1*/
.s211{margin: 10vh 0;}
.s211 .inner{margin: auto; text-align: center;}
.s211 .tit{display: inline-block;  font-size: 2rem; font-weight: 700; line-height: 1.5; position: relative;}
.s211 .tit .love{width: 16px; position: absolute; right: -6%; top: 1.5vh; transform: rotate(45deg);}

.s212{padding-top: 10vh;}
.s212 .inner{margin: auto; position: relative;}
.s212_cube{width: 15%; position: absolute; right: 0; top: -4vh; animation: s2_img2 2s infinite alternate;}

.s212_ul{width: 100%; font-size: 0;}
.s212_ul > li{display: inline-block; vertical-align: middle; width: 50%; box-sizing: border-box;}
.s212_ul > li.img img{width: 100%; animation: s2_img 2s infinite alternate;}
.s212_ul > li.txt{padding-left: 10%;}
.s212_ul > li.txt p{font-size: 1.2rem; font-weight: 700; line-height: 1.4;}
.s212_ul > li.txt p.tit{font-size: 2.4rem; margin-bottom: 3vh;}

.s212_ul2{margin-top: 10vh;}
.s212_ul2 > li.txt{padding-left: 0%;}
@keyframes s2_img {
	0% { transform: rotate(9deg); }
	100% { transform: rotate(0deg); }
}
@keyframes s2_img2 {
	0% { top: -4vh; }
	100% { top: -6vh;  }
}

.s212_bot{position: relative; margin-top: 16vh;}
.s212_bot img{width: 100%;}
.s212_bot p{font-size: 2rem; font-weight: 700; line-height: 1.5; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: max-content; text-align: center;}

.s213{background: #ffd100; padding: 10vh 0 30vh; margin-top: 20vh;}
.s213 .inner{margin: auto; position: relative; background: #fff; border: 5px solid #000; border-radius: 5px; padding: 10vh 0;}
.s213_body{width: 240px; position: absolute; left: 7%; top: -17vh; z-index: -1;}
.s213_arm{width: 100px; position: absolute; left: 7%; top: -3vh; animation: s2_img 1s infinite alternate;}
@keyframes s2_img {
	0% { transform: rotate(9deg); }
	100% { transform: rotate(0deg); }
}

.s213 .tit_wrap{text-align: center;}
.s213 .tit{font-size: 2.6rem; font-weight: 700; margin-top: 2vh;}

.s213_ul{width: 80%; margin: 10vh auto 0; font-size: 0;}
.s213_ul > li{display: inline-block; vertical-align: middle; width: 100%; box-sizing: border-box; font-size: 0; margin-bottom: 10vh;}

.s213_subul{width: 100%; font-size: 0;}
.s213_subul > li{display: inline-block; vertical-align: middle; width: 50%;}

.s213_ul > li img{width: 30%; display: inline-block; vertical-align: middle;}
.s213_ul > li .con{width: 55%; margin: 0 7.5%; display: inline-block; vertical-align: middle;}
.s213_ul > li .con p{font-size: 1.1rem; font-weight: 700; line-height: 1.4;}
.s213_ul > li .con p.tit{font-size: 1.4rem; text-align: left; font-weight: 800; margin-bottom: 1vh;}

.s213_subul > li.img img{width: 90%;}

.s213 .more{text-align: center; margin-top: 6vh}
.s213 .more a{background: #fff; font-size: 0.8rem; border: 3px solid #000; padding: 6px 20px; font-weight: 600; letter-spacing: 2px; transition: all 0.4s;}
.s213 .more a:hover{background: #b31414;}

.s213_info{font-size: 1.2rem; font-weight: 700; text-align: center; color: #505050;}

.s214{margin: 16vh 0; padding-top: 10vh; position: relative;}
.s214::after{content: ''; width: 100%; height: 85%; background: #ffd100; position: absolute; left: 0; top: 0; z-index: -1;}
.s214_ul{font-size: 0; margin: auto;}
.s214_ul > li{display: inline-block; vertical-align: top;}
.s214_ul > li.left{width: 82%}
.s214_ul > li.left img{width: 100%;}
.s214_ul > li.right{width: 18%;}
.s214_ul > li.right p{font-size: 2.4rem; font-weight: 700; line-height: 1.3; text-align: end; margin-top: 6vh;}

.s215_ul{font-size: 0; margin: auto;}
.s215_ul > li{display: inline-block; vertical-align: top; width: 33.333%;}
.s215_ul > li img{width: 90%; margin: auto; display: block;}
.s215_ul > li p.tit{font-size: 1.8rem; font-weight: 700; text-align: center; margin: 6vh 0 2vh;}
.s215_ul > li p.con{font-size: 1.2rem; font-weight: 700; line-height: 1.4; text-align: center;}


/*서브2-2*/
.s221{margin: 10vh 0;}
.s221 .inner{margin: auto; text-align: center;}
.s221 .tit{display: inline-block;  font-size: 2rem; font-weight: 700; line-height: 1.5; position: relative;}
.s221 .tit .love{width: 16px; position: absolute; right: -5%; top: 1vh; transform: rotate(45deg);}
.s221 .shop{width: 300px; margin: 5vh auto 0; position: relative;}
.s221 .shop img{width: 100%; z-index: 99;}
.s221 .shop:hover .shop_bg{opacity: 1;}
.s221 .shop_bg{width: 90%; height: 85%; border-radius: 190px / 82px; transition: all 0.4s; opacity: 0;
position: absolute; left: 1%; top: 1%; background: #b31414; z-index: -99;}

.s222{margin: 0 auto 30vh;}

.s222_ul{margin: auto; display: flex; justify-content: space-between; flex-wrap: wrap;}
.s222_ul > li{display: inline-block; width: 380px; height: 380px; margin-bottom: 30px; position: relative; transition: all 0.4s;}

.s222_ul .line{width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
.s222_ul .pro{height: 60%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: -99;}
.s222_ul .con2{text-align: center; position: absolute; color: #505050; opacity: 1; font-size: 18px !important; line-height: 150%; width: 100%; bottom: 5%; font-size: 20px;transition: all 0.5s;} 
.s222_ul .con2::first-line{font-weight: 700; color: black !important; font-size: 20px;}
.s222_ul .con2_off{opacity: 0; transition: all 0.5s;}
.s222_ul .ari{font-size: 1.8rem; text-align: center; width: 90%; height: auto;}
.s222_ul .pro_info{width: 90%; text-align: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; z-index: 99; transition: all 0.4s;}
.s222_ul .pro_info .tit{font-size: 1.6rem; font-weight: 700;}
.s222_ul .pro_info .con{font-size: 1.4rem; font-weight: 700; margin-top: 1vh;}

.s222_ul > li:hover{background: rgba(255,209,0,0.7);}
.s222_ul > li:hover .pro_info{opacity: 1;}
.s222_ul > li:nth-last-child(1):hover{background: transparent;}

.popup{position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none;  background-color: rgba(0,0,0,0.7); z-index: 99;}
.popup .popup_wrap{width: 90%; max-width: 1200px; height: 80vh; background-color: #fff; position: absolute; left: 50%; top: 52%; transform: translate(-50%,-50%); box-sizing: border-box; padding-top: 10vh; overflow-y: scroll;}
.popup .popup_wrap img{width: 800px; margin: auto; display: block;}
.popup .close{width: 90%; height: 40px; background: #b31414; max-width: 1200px; position: absolute; left: 50%; top:10%; transform: translate(-50%, -50%); text-align: end; box-sizing: border-box; padding: 6px 1%;}
.popup .close p{font-size: 1.2rem; color: #fff; font-weight: 700; text-transform: uppercase; cursor: pointer;}
.popup .close p i{display: inline-block; vertical-align: middle; font-size: 1.7rem; margin-bottom: 2px;}

/*서브3-1*/
.s311{margin: 10vh auto 14vh; text-align: center;}
.s311 .tit{display: inline-block;  font-size: 2rem; font-weight: 700; line-height: 1.5; position: relative;}
.s311 .tit .love{width: 16px; position: absolute; left: 12%; bottom: 1.5vh;}
.s311 .con{font-size: 1.2rem; font-weight: 700; line-height: 1.5; margin-top: 6vh;}
.s311 .con span{background: #b31414; color: #fff; padding: 2px 8px;}

.s312{margin: 10vh 0 30vh;}
.s312_bg{width: 100%; height: 70vh; background: url(../img/s3/s312_bg.png) no-repeat center/cover;}

.s312_con{margin: -20vh auto 0; height: 36vh; position: relative;}
.s3_line{height: 100%; width: 100%;}

.s312_info{width: 90%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 0; text-align: center;}
.s312_info > li{width: 33.333%; display: inline-block; vertical-align: middle; box-sizing: border-box; position: relative;}
.s312_info > li p{font-size: 1.6rem; font-weight: 700; line-height: 1.6;}
.s312_info > li::after{content: ''; width: 3px; height: 90%; background: #000; display: block; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.s312_info > li:nth-last-child(1)::after{display: none;}

.s313{padding: 10vh 0;}
.s313 .inner2{margin: auto; position: relative;}
.s313 img{width: 100%;}
.s313 .con{position: absolute; top: 12vh; right: 7%; font-size: 2rem; font-weight: 700; line-height: 1.5; text-align: end; width: 35%;}
.s313 .con span{color: #b31414;}

.s314{padding: 10vh 0;}
.s314 .inner2{margin: auto; text-align: center;}
.s314 .tit_point{font-size: 0.9rem;}
.s314 .tit{font-size: 2rem; line-height: 1.5; font-weight: 700; margin: 2vh 0 8vh;}
.s314 .tit span{color: #b31414;}
.s314 img{width: 100%;}
.s314_ul{width: 100%; font-size: 0; margin-top: 3vh;}
.s314_ul > li{display: inline-block; vertical-align: top; width: 20%; text-align: center; font-size: 1.2rem; font-weight: 700; line-height: 1.5;}

/*서브4-1*/
.s411{margin: 10vh auto 14vh; text-align: center;}
.s411 .tit{font-size: 2rem; font-weight: 700; line-height: 1.5; display: inline-block; position: relative;}
.s411 .tit .love{width: 16px; position: absolute; left: -6%; top: 0;}
.s411 .con{font-size: 1.2rem; font-weight: 700; line-height: 1.5; margin-top: 4vh;}
.s411 .con span{color: #fff; display: inline-block; position: relative; padding: 0 4px;}
.s411 .con span::after{content: ''; width: 100%; height: 100%; background: #b31414; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: -1;}

.s412{margin-bottom: 20vh;}
.s412 img{width: 100%; position: relative; z-index: -999;}
.s412_ul{font-size: 0; margin: -24vh auto 0; position: relative; padding: 7vh 0;} 
.s412_ul img{position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 100%;}
.s412_ul > li{display: inline-block; vertical-align: top; width: 33.333%; box-sizing: border-box; text-align: center; position: relative;}
.s412_ul > li::after{content: ''; width: 4px; height: 80%; background: #000; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.s412_ul > li:nth-last-child(1)::after{display: none;}
.s412_ul > li p.tit{font-size: 2rem; color: #b31414; font-weight: 700; margin-bottom: 3vh;}
.s412_ul > li p.con{font-size: 1.2rem; font-weight: 700; line-height: 1.5; width: 80%; margin: auto;}

.s413{margin-bottom: 16vh;}
.s413_ul{font-size: 0; margin: 0 auto 8vh; text-align: center;}
.s413_ul > li{display: inline-block; vertical-align: middle; width: 25%;}
.s413_ul > li p.cir{width: 200px; height: 200px; margin: auto; border-radius: 50%; border: 6px solid #000; font-size: 1.8rem; font-weight: 700; color: #b31414; position: relative;}
.s413_ul > li p.cir span{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%;}
.s413_ul > li p.yel{background: #ffd100; color: #000;}
.s413_ul > li p.con{font-size: 1.2rem; font-weight: 700; line-height: 1.5; margin: auto; margin-top: 3vh; text-align: center; width: 80%;}

.s414{background: #eeeeeb; padding: 14vh 0 30vh;}
.s414 .inner{margin: auto;}
.s414 .tit{font-size: 2rem; font-weight: 700; text-align: center; line-height: 1.5; margin-bottom: 8vh;} 
.s414 .tit span{color: #b31414;}

.s414_ul{width: 100%; font-size: 0;}
.s414_ul2{margin-top: 3vh;}
.s414_ul > li{display: inline-block; vertical-align: middle;}
.s414_ul > li.left{width: 22%;}
.s414_ul > li.left img{width: 70%;}
.s414_ul > li.right{width: 78%;}

.s414_info{width: 100%; display: flex; flex-wrap: wrap;}
.s414_info > li{width: 33.333%; box-sizing: border-box; padding: 0 1%; margin-bottom: 20px;}
.s414_box{width: 100%; background: #fff; padding: 16px 20px; border-radius: 30px; display: flex; justify-content: space-between;
	font-size: 1.4rem; line-height: 1.3; box-sizing: border-box; align-items: center; text-align: center; height: 100%;} 

.s414_box .txt1 span.bold{font-weight: 800;}
.s414_box .txt1 span.red{color: #b31414;}
.s414_box .txt1 span.ari{font-size: 1.8rem;}
.s414_box .txt1 span.ari .num{font-size: 3rem;}

.s414_info2{width: 100%; background: #ffd100; border: 3px solid #000; padding: 3vh 0; text-align: center; margin-top: 10vh;}
.s414_info2 p{font-size: 1.4rem; font-weight: 400; line-height: 1.5;}
.s414_info2 p span{font-weight: 800;}

.s415{padding-bottom: 16vh;}
.s415 .inner2{margin: auto;}
.s415 .swiper-container{position: relative;}
.s415 .swiper-slide{position: relative;}
.s415_slide{width: 100%;}

.s415_control{width: 110px; position: absolute; right: 50px; top: 70px; z-index: 1;}
.s415_control img{width: 50px;}
.s415_control .swiper-button-next:after, .swiper-button-prev:after{display: none;}

.s415_con{width: 48%; margin-left: 48%; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.s415_con > li{font-size: 1.2rem; font-weight: 700; margin-bottom: 6px; box-sizing: border-box; padding-left: 24px; line-height: 1.4;}
.s415_con > li.tit{font-size: 2.4rem; margin-bottom: 4vh; padding-left: 0;}
.s415_con > li.tit span{color: #b31414;}
.s415_con > li::before{content: ''; width: 12px; height: 3px; background: #000; display: inline-block; vertical-align: top; margin: 12px 8px 0 0;
position: absolute; left: 0;}
.s415_con > li.tit::before{display: none;}

.s415_p{font-size: 1.2rem; color: #505050; text-align: center; margin-top: 8vh;}

/*서브4-2*/
.s421 .con span::after{background: #64a0c8;}

.s422_bg{width: 100%; display: block;}
.s422_con{background: #9bc3e1; width: 100%; padding-bottom: 36vh;}
.s422_con .inner{margin: auto;}
.s422_con p{text-align: center; font-weight: 700; line-height: 1.5;}
.s422_con p.txt1{font-size: 1.2rem; padding: 6vh 0;}
.s422_con p.txt2{font-size: 2rem;}
.s422_con p.txt2 span{display: inline-block; color: #fff; line-height: 1; background: #64a0c8; padding: 8px 14px;}

.s423{margin-top: -24vh;}
.s423 .inner2{margin: auto; position: relative;}
.s423 .inner2 img{width: 100%; }
.s423_info{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max-content;}
.s423_info p{text-align: center; line-height: 1.5; font-weight: 700;}
.s423_info p.txt1{font-size: 2rem; color: #64a0c8;}
.s423_info p.txt2{font-size: 1.2rem; margin: 5vh 0 3vh;}
.s423_info p.txt2 span{font-weight: 300;}
.s423_info p.txt3{font-size: 1.2rem;}
.s423 .txt4{font-size: 1.2rem; color: #505050; text-align: center; margin-top: 6vh;}

.s424{padding: 12vh 0 36vh;}
.s424 .inner2{margin: auto; text-align: center;}
.s424 .inner2 p{font-size: 2rem; font-weight: 700; line-height: 1.5; margin-bottom: 6vh;}
.s424 .inner2 img{width: 60%;}

/*게시판*/
.board_top{padding: 24vh 0 10vh; text-align: center;}
.board_top p.con{font-size: 1.6rem; font-weight: 700; position: relative; display: inline-block;}
.board_top .ari{font-size: 3rem; text-transform: uppercase; margin-bottom: 4vh;}
.board_top .love{width: 14px; position: absolute; right: -7%; top: 0.5vh; transform: rotate(45deg);}
.sub_board{width: 90%; max-width: 1200px; margin: 0vh auto 30vh;}
.sub_board2{margin: 0 auto 10vh;}
.sub_board_bot{text-align: center; margin-bottom: 30vh;} 
.sub_board_bot p{font-size: 1.6rem; font-weight: 700;}
.sub_board_bot p span{color: #b31414;}
.sub_board_bot img{width: 500px; display: block; margin: 6vh auto 0;}

.board_review{width: 100%; padding-bottom: 10vh;}
.board_review .inner{margin: auto;}
.review_top .swiper-container{position: relative;}
.review_top .swiper-slide{position: relative;}
.review_top .swiper-slide img{width: 80%; display: block; margin: auto;}
.review_top .swiper-button-next, .swiper-rtl .swiper-button-prev{right: 0;}
.review_top .swiper-button-prev, .swiper-rtl .swiper-button-next{left: 0;}
.review_top .swiper-button-next, .swiper-button-prev{width: auto;}
.review_top .s415_control{top: 38px;}

@media screen and (max-width:800px) {
  .popup .popup_wrap img{width: 100%;}
  .sub_board_bot img{width: 100%;}
	.h_inner{width: 93%;}
	.h_inner > div.h_nav{display: none;}
	#header:hover{height: unset;}
		#header:hover{height: 80px;}
}