#wrap_main .inner {max-width:1440px; width: 100%; margin: 0 auto; position: relative;}

/* visual */
.main_visual {color: #fff; box-sizing:border-box; padding-bottom: 0; position: relative; overflow:hidden; max-height:100vh;}
.main_visual #bg_youtube {background:url('./img/video_bg.jpg') no-repeat left top; background-size: cover; position: absolute; top: -3%; left: 0; right: 0; width: 100%; height: 100%; overflow:hidden;}
.main_visual .mo_visual {display: none;}
.main_visual_inner {width: 100%; height: 50vw; position: absolute; top: 0; left: 10%; padding-top: 45vh;}
.main_visual_inner h1 {font-size: 80px; line-height: 90px; font-weight: 700; font-family: 'Exo'; text-shadow:1px 1px 1px #585858; color: #fff;}

/* waps button */
#wrap_main .waps_btn {width: 150px; height: 180px; transform: skew(-20deg); background: linear-gradient(0deg, rgba(121,189,82,1) 0%, rgba(53,147,0,1) 100%); position: absolute; z-index: 9999; cursor: pointer; display: flex; align-items: center;}
#wrap_main .main_visual .waps_btn {left: 3%; bottom: -3%;}
#wrap_main .waps_btn a {display: block; width: 100%; color: #fff; font-size: 20px; font-family: 'Exo', sans-serif; transform: skew(20deg); text-shadow:1px 1px 1px #777; letter-spacing: -0.5px; margin-bottom: 3vh;}
#wrap_main .waps_btn a img {display: block; margin: 7% auto 0; max-width:35px;}

/* title */
#wrap_main section .bold {font-weight: 700;}
#wrap_main section h1.tit {font-family: 'Exo', sans-serif; font-size: 48px; text-align: center; color: #212121;}
#wrap_main section p.tit {font-size: 18px; line-height: 26px; text-align: center; color: #555; margin: 1% 0;}

/* m01_1(임시html섹션) */
.m01_1 {padding-top: 5%; text-align: center; position: relative; }
.m01_1 .waps_btn {top: -16%; left: 10%;}
.m01_1::after {content:""; display: block; background: #f1f1f1; width: 100%; height: 45%; position: absolute; left: 0; bottom: 0; z-index: -1;}
.m01_1 .swiper-container {width: 100%;}
.m01_1 .swiper-wrapper {display:flex; align-items: center; padding-top: 7%; position: relative;}
.m01_1 .swiper-slide .bg_img {width: 100%; height: 38vh; background: #000; overflow: hidden;}
.m01_1 .swiper-slide .bg_img::before {opacity: 0.5; height:38vh;}
.m01_1 .swiper-slide h2 {position: relative; bottom: 75px; width: 100%; z-index: 99; height: 70px; display:flex; align-items:center; padding: 2% 0;}
.m01_1 .swiper-slide h2 img {display: block; max-width: 50%; transition: opacity 0.5s ease-in-out; position:absolute; left:50%; bottom: 0; transform:translateX(-50%);}
.m01_1 .swiper-slide h2 .img_t {opacity:0;}
.m01_1 .swiper-slide-active h2 .img_t {opacity:1;}
.m01_1 .swiper-slide-active h2 .img_b {opacity:0;}
.m01_1 .swiper-slide .txt {transform:translateY(10px); -ms-transform:translateY(10px); opacity:0; word-break:keep-all; font-size: 14px; line-height: 22px; color: #212121;}

.m01_1 .swiper-slide-active .bg_img {transform:translateY(-80px); transition-property:transform;transition-duration: 0.5s}
.m01_1 .swiper-slide-active .bg_img::before {opacity: 1; transition-property: opacity;transition-duration: 0.5s;}
.m01_1 .swiper-slide-active .txt {transform:translateY(-70px); opacity:1; transition-property: opacity, transform;transition-duration: 0.3s,0.3s}



/* m01 */
.m01 {padding-top: 3%; text-align: center; position: relative; }
.m01 .waps_btn {top: -16%; left: 10%;}
.m01::after {content:""; display: block; background: #f1f1f1; width: 100%; height: 45%; position: absolute; left: 0; bottom: 0; z-index: -1;}
.m01 .swiper-container {width: 100%;}
.m01 .swiper-wrapper {display:flex; align-items: center; padding-top: 5%; position: relative;}
.m01 .swiper-slide .bg_img {width: 100%; height: 38vh; background: #000; overflow: hidden;}
.m01 .swiper-slide .bg_img::before {opacity: 0.5; height:38vh;}
.m01 .swiper-slide h2 {position: relative; bottom: 90px; width: 100%; z-index: 99; height: 90px; display:flex; align-items:center; padding: 2% 0;}
.m01 .swiper-slide h2 img {display: block; max-width: 33%; max-height:80px; transition: opacity 0.5s ease-in-out; position:absolute; left:50%; top: 50%; transform:translateX(-50%);}
.m01 .swiper-slide-active h2 .img_b {opacity:0;}
.m01 .swiper-slide .txt {transform:translateY(10px); -ms-transform:translateY(10px); opacity:0; word-break:keep-all; font-size: 14px; line-height: 22px; color: #212121;}
.m01 .swiper-slide .mall_btn::after {content:""; display: block; width: 100%; height: 1px; margin-top: 2px; background: #aaa; }
.m01 .swiper-slide .mall_btn:hover::after {animation:color_change 1s; animation-fill-mode:forwards;}

@keyframes color_change {
	0%	{width:0;}
	100%	{width:100%;}
}

.m01 .swiper-slide .mall_btn {display: inline-block; transform:translateY(30px); -ms-transform:translateY(30px); opacity:0; color: #888;}
.m01 .swiper-slide-active .bg_img {transform:translateY(-90px); transition-property:transform;transition-duration: 0.5s}
.m01 .swiper-slide-active .bg_img::before {opacity: 1; transition-property: opacity;transition-duration: 0.5s;}
.m01 .swiper-slide-active .txt {transform:translateY(-80px); opacity:1; transition-property: opacity, transform;transition-duration: 0.3s,0.3s}
.m01 .swiper-slide-active .mall_btn {transform:translateY(-70px); opacity:1; transition-property: opacity, transform;transition-duration: 0.3s,0.3s}

/* m02 */
.m02 .inner {padding: 5% 0;}
.m02 .m02_slide {position: relative;}
.m02 li .txt {position: absolute; bottom: 0; left: 0; background: #fbfbfb; height: 80px; z-index: 999999; width: 95%; display: flex; align-items:center;}
.m02 li .txt .numbering {width: 10%; font-size: 18px; color: #888; font-family: 'Exo', sans-serif; text-align: center; margin: 0; line-height: 80px;}
.m02 li .txt .numbering .focus {font-size: 24px; color: #212121; font-weight: 700;}
.m02 li .txt p:last-child {width: 90%; font-size: 16px; color: #212121; font-weight: 500;}
.m02 li .txt p:last-child span {display: block; font-size: 14px; color: #585858; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-weight: 300;}

#wrap_main .m02 .waps_btn {transform: skew(20deg); position: absolute; right: 33px; bottom: 10%; z-index: 9999;}
#wrap_main .m02 .waps_btn a {transform: skew(-20deg); margin-left: 0.5vw;}

/* m03 */
.m03 ul {display:flex; flex-flow: row wrap; margin: 5% 0;}
.m03 ul li {width: 50%; display:flex; flex-flow: row wrap; align-items:center;}
.m03 ul li .img {width: 20% !important; min-height:125px;}
.m03 ul li .img a {display: block; width: 100%; height: 100%;}
.m03 ul li .txt {width: 80%; padding: 0 2%;}
.m03 ul li .txt h3 {margin-bottom: 5px;}
.m03 ul li .txt h3 a {font-size: 18px; color: #212121; font-weight: 500;}
.m03 ul li .txt p a {font-size: 14px; line-height: 22px; color: #585858;}


@media(max-width:1500px){

/* visual */
#wrap_main .inner {padding: 0 3%;}
.main_visual {height: auto;}
.main_visual_inner {padding-top: 20vw;}
.main_visual_inner h1 {font-size: 6vw; line-height: 7vw;}


/* waps button */
#wrap_main .waps_btn {width: 12vw; height: 14vw;}
#wrap_main .waps_btn a {font-size: 1.5vw;}
.m01_1 .waps_btn {top: -11vw;}


/* m01_1(임시html섹션) */
#wrap_main section p.tit {margin: 1% 0 5%;}
.m01_1 .swiper-slide h2 {bottom: 80px; height: 80px;}
.m01_1 .swiper-slide h2 img {max-height:60px;}
.m01_1 .swiper-slide-active .bg_img {transform:translateY(-80px);}
.m01_1 .swiper-slide-active .txt {transform:translateY(-80px);}
.m01_1 .swiper-slide-active .mall_btn {transform:translateY(-70px);}

/* m01 */
#wrap_main section p.tit {margin: 1% 0 5%;}
.m01 .swiper-slide h2 {bottom: 80px; height: 80px;}
.m01 .swiper-slide h2 img {max-height:60px;}
.m01 .swiper-slide-active .bg_img {transform:translateY(-80px);}
.m01 .swiper-slide-active .txt {transform:translateY(-80px);}
.m01 .swiper-slide-active .mall_btn {transform:translateY(-70px);}


/* m02 */
#wrap_main .m02 .inner {padding: 10% 3%;}
#wrap_main .m02 .mslidegallery, #wrap_main .m02 .rslidesgallery, #wrap_main .m02 .rslidesgallery li {height: 600px !important;}
.m02 li .txt {width: 90%;}
.m02 li .txt .numbering {width: 15%;}
.m02 li .txt p:last-child {width: 85%;}

#wrap_main .m02 .waps_btn {right: 5vw; bottom: 8vw;}
#wrap_main .m02 .waps_btn a {margin-left: 1vw;}

/* m03 */
.m03 ul li .img {width: 30% !important;}
.m03 ul li .txt {width: 70%;}

}


@media(max-width:850px){

/* visual */
.main_visual .mo_visual {display: block; width: 100%;}
.main_visual .inline-YTPlayer {display: none;}
.main_visual_inner {padding-top: 45vw;}
.main_visual_inner h1 {font-size: 8vw; line-height: 9vw;}

/* waps button */
#wrap_main .waps_btn {width: 18vw; height: 22vw;}
#wrap_main .waps_btn a {font-size: 2.5vw;}
#wrap_main .waps_btn a img {width: 5vw;}
.m01_1 .waps_btn {top: -17vw;}

/* title */
#wrap_main section p.tit {margin: 1% 0 5%;}
#wrap_main section h1.tit {font-size: 6vw;}
#wrap_main section p.tit {font-size: 2.5vw; line-height: 4vw; margin: 2% 0 5%; word-break: keep-all;}

/* m01_1(임시html섹션) */
.m01_1 {padding: 15% 3% 0;}
.m01_1 .swiper-slide .bg_img {height:35vh;}
.m01_1 .swiper-slide .bg_img::before {height: 35vh !important;}
.m01_1 .swiper-slide .txt {font-size: 2vw; line-height: 3vw;}
    
/* m01 */
.m01 {padding: 15% 3% 0;}
.m01 .swiper-slide .bg_img {height:35vh;}
.m01 .swiper-slide .bg_img::before {height: 35vh !important;}
.m01 .swiper-slide .txt {font-size: 2vw; line-height: 3vw;}
.m01 .swiper-slide .mall_btn {font-size: 2vw;}


/* m02 */
#wrap_main .m02 .mslidegallery, #wrap_main .m02 .rslidesgallery, #wrap_main .m02 .rslidesgallery li {height: 60vw !important;}
.m02 li .txt .numbering {width: 20%;}
.m02 li .txt p:last-child {width: 65%;}

/* m03 */
.m03 ul li {width: 100%; margin-bottom: 3%;}
.m03 ul li .img {width: 30% !important;}
.m03 ul li .txt {width: 70%;}
.m03 ul li .txt h3 a {font-size: 2.8vw;}
.m03 ul li .txt p a {font-size: 2.3vw; line-height: 4vw;}


}

@media(max-width:640px){
/* title */
#wrap_main section p.tit {margin: 1% 0 5%;}
#wrap_main section h1.tit {font-size: 6vw;}
#wrap_main section p.tit {font-size: 3.5vw; line-height: 5vw;}

/* m01_1(임시html섹션) */
.m01_1 .swiper-slide .bg_img {height:85vw;}
.m01_1 .swiper-slide .bg_img::before {height: 85vw !important;}
.m01_1 .swiper-slide .txt {font-size: 3.5vw; line-height: 5vw;}

.m01_1 .swiper-slide h2 {bottom: 12vh; height: 12vh;}
.m01_1 .swiper-slide h2 img {max-height:8vh; max-width:90%;}
.m01_1 .swiper-slide-active .bg_img {transform:translateY(-10vh);}
.m01_1 .swiper-slide-active .txt {transform:translateY(-12vh);}
    
/* m01 */
.m01 .swiper-slide .bg_img {height:85vw;}
.m01 .swiper-slide .bg_img::before {height: 85vw !important;}
.m01 .swiper-slide .txt {font-size: 3.5vw; line-height: 5vw;}
.m01 .swiper-slide .mall_btn {font-size: 3.5vw;}

.m01 .swiper-slide h2 {bottom: 12vh; height: 12vh;}
.m01 .swiper-slide h2 img {max-height:8vh; max-width:16vh;}
.m01 .swiper-slide-active .bg_img {transform:translateY(-12vh);}
.m01 .swiper-slide-active .txt {transform:translateY(-12vh);}
.m01 .swiper-slide-active .mall_btn {transform:translateY(-10vh);}

/* m02 */
#wrap_main .m02 .mslidegallery, #wrap_main .m02 .rslidesgallery, #wrap_main .m02 .rslidesgallery li {height: 80vw !important;}
.m02 li .txt {height: 60px;}
.m02 li .txt .numbering {width: 25%; font-size: 3vw; line-height: 60px; text-align: left; padding-left: 3%;}
.m02 li .txt .numbering .focus {font-size: 4.5vw;}
.m02 li .txt p:last-child {width: 60%; font-size: 3vw;}
.m02 li .txt p:last-child span {font-size: 2.5vw;}
#wrap_main .m02 .waps_btn {right: 7vw;}

/* m03 */
.m03 {margin-top: 8%;}
.m03 ul li .img {max-height:25vw;}
.m03 ul li .txt h3 a {font-size: 3.5vw;}
.m03 ul li .txt p a {font-size: 2.8vw; line-height: 3.5vw;}

}