@charset "utf-8";


#main{padding:0px 20px 40px;}

#main .progress-bar {position:absolute; right:20px; bottom:20px;}
#main .main-video {position:relative;overflow: hidden;margin:0 -20px;}
#main .main-video video {width:100%;}
#main .main-video .controller {position:absolute; right:100px; bottom:50px;}
#main .state_bar {position:relative; display:inline-block; width:300px; height: 2px; background-color: #c8c8c8;vertical-align: middle;} 
#main .state_bar .now {position:absolute; left:0; top:0;width: 0%; height: 2px; background-color: #000;}
#main .start_stop {display:inline-block;position:absolute; left: 9px; top: 8px; width:50px; height:50px; background-size:100% 100%; font-size:0; background-repeat:no-repeat; background-image:url('../images/icon/stop.png');vertical-align: middle;}
#main .start_stop.stop { background-image:url('../images/icon/play.png');}

#main .video-wrap {margin:  100px auto; width: 1599px;}
#main .video-wrap .video_area{display:inline-block; position: relative;vertical-align: top;}
#main .video-wrap .video_area video {width: 100%; height: auto;}
#main .video-wrap .video_area .sticker {position: absolute ;right: -67px; bottom: -172px;transform:translate(0px, -30px);}
#main .video-wrap .v_box {width: 730px;height: 410px;border-radius:18px; overflow:hidden;}
#main .video-wrap .txt_area {display:inline-block; margin-left:180px; vertical-align:top;}
#main .video-wrap .big_txt{font-size:44px;font-family:"SEOULMILK", sans-serif; line-height:60px; color:#393939;}
#main .video-wrap .txt {margin-top:30px; font-size:24px;font-family:"SEOULMILK", sans-serif; font-weight:300; line-height:40px; color:#a0a0a0;}
#main .video-wrap .more_btn {margin-top:54px; text-align:right;}
#main .video-wrap .more_btn a{display:inline-block; padding-right:20px; font-size:16px;font-family:"SEOULMILK", sans-serif; border-bottom:2px solid #222222; background:url('../images/contents/icon_plus.png') no-repeat; background-position:right 4px; color:#222222;}


#main .main-slide{margin:0 -20px;position: relative;}
#main .main-slide .slick-slide{}
#main .main-slide .slick-slide img{display: block;width:100%;}
#main .main-slide .slick-dots{position: absolute;bottom:40px;left:0;width:100%;text-align: center;font-size:0;}
#main .main-slide .slick-dots li{display: inline-block;width:27px;height:6px;}
#main .main-slide .slick-dots li + li{margin-left:9px;}
#main .main-slide .slick-dots li button{display: block;width:100%;height:100%;background: #fff;opacity:0.5;font-size:0; }
#main .main-slide .slick-dots li.slick-active button{opacity: 1;}
#main .main-title{font-family:"SEOULMILK", sans-serif;display:inline-block;position: relative;font-size: 14px;font-weight: normal;letter-spacing: -0.72px;color: #393939;}
#main .main-title:before{content: "";display: inline-block;width:100%;height:2px;background: #222;}
#main .main-txt{font-family:"SEOULMILK", sans-serif;margin-top:58px;position: relative;font-size:25px;font-weight: normal;line-height: 1.41;letter-spacing: -1.22px;color:#393939;word-break: keep-all;}
#main .main-txt span{display: block;margin-top: 10px;font-size: 16px;font-family: "SEOULMILK", sans-serif;font-weight: 300;color: #a0a0a0;}
#main .main-txt .video-box{position: relative;margin-top:20px;padding:0 20px 70px 0;}
#main .main-txt .video-box video {border-radius: 10px;}
#main .main-txt .video-box i{position: absolute;width: 100px;right: 0;bottom: 0;}
#main .main-about{margin-top:45px;}
#main .main-about h4{font-family:"SEOULMILK", sans-serif;margin-top:20px;font-size:25px;font-weight: normal;line-height: 1.36;letter-spacing: -1.76px;color: #222;}
#main .main-about p{font-family:"SEOULMILK", sans-serif;margin-top:10px;font-size: 16px;font-weight: 300;line-height: 1.67;letter-spacing: -0.96px;color: #a0a0a0;}
#main .slide-wrap{margin-top:25px;position: relative}
#main .main-about .about-slider{}
#main .main-about .about-slider .slick-slide p{font-weight: 400;text-align: center;font-size:16px;}
#main .main-about .about-slider .slick-slide:hover p{color:#222;}
#main .main-about .about-slider .slick-arrow{position: absolute;bottom:-40px;width:20px;height:20px;font-size:0;}
#main .main-about .about-slider .slick-prev{background: url(../images/main/slick_arrow1.png) no-repeat;background-size: cover;left: 50%;transform: translateX(-50%);margin-left: -45px;}
#main .main-about .about-slider .slick-next{background: url(../images/main/slick_arrow2.png) no-repeat;background-size: cover;left: 50%;transform: translateX(-50%);margin-left: 45px;}
#main .slide-wrap .pagingInfo{margin-top:20px;font-size: 14px;font-weight: normal;letter-spacing: -0.64px;color: #b7b7b7;font-family:"SEOULMILK", sans-serif;display: flex;align-items: center;justify-content: center;}
#main .slide-wrap .pagingInfo em{color:#222;font-family:"SEOULMILK", sans-serif;}
#main .slide-wrap .pagingInfo i{display: inline-block;margin:0 10px;width:1px;height:15px;background: #b7b7b7;}
#main .main-about .slick-slide {height:auto;}
#main .main-product{margin-top:50px;}
#main .main-product .hgroup{}
#main .main-product .hgroup h3{font-family:"SEOULMILK", sans-serif;margin-top:20px;font-size:25px;font-weight: normal;line-height: 1.36;letter-spacing: -1.76px;color: #222;}
#main .main-product .hgroup .txt{font-family:"SEOULMILK", sans-serif;margin-top:10px;font-size: 16px;font-weight: 300;line-height: 1.67;letter-spacing: -0.96px;color: #a0a0a0;}
#main .main-product .product-slide{margin-top:20px;}
#main .main-product .product-slide .slick-dots{margin-top:15px;display: flex;justify-content: center;}
#main .main-product .product-slide .slick-dots li{display: inline-block;width:10px;height:10px;}
#main .main-product .product-slide .slick-dots li + li{margin-left:5px;}
#main .main-product .product-slide .slick-dots li button{display: block;width:100%;height:100%;border-radius: 100%;border:1px solid #000;background: #fff;font-size:0;}
#main .main-product .product-slide .slick-dots li.slick-active button{background: #000;}
/*#main .main-product .product-slide .slick-arrow{position: absolute;top:50%;transform: translateY(-50%);width:30px;height:30px;font-size:0;z-index: 10;}
#main .main-product .product-slide .slick-prev{background: url(../images/main/slick_arrow3.png) no-repeat;background-size: cover;left:5px;}
#main .main-product .product-slide .slick-next{background: url(../images/main/slick_arrow4.png) no-repeat;background-size: cover;right:5px;}*/
#main .main-product .product-slide .slick-arrow{position: absolute;bottom:-40px;width:20px;height:20px;font-size:0;}
#main .main-product .product-slide .slick-prev{background: url(../images/main/slick_arrow1.png) no-repeat;background-size: cover;left: 50%;transform: translateX(-50%);margin-left: -45px;}
#main .main-product .product-slide .slick-next{background: url(../images/main/slick_arrow2.png) no-repeat;background-size: cover;left: 50%;transform: translateX(-50%);margin-left: 45px;}
#main .main-product .slick-slide {height:auto;}
#main .main-product .slick-slide h4{margin-top:10px;font-weight: 400;    font-family: "SEOULMILK", sans-serif;text-align: center;font-size: 16px; line-height: 1.67;letter-spacing: -0.96px;color: #a0a0a0;}
#main .main-esg{margin-top:50px;}
#main .main-esg .hgroup{}
#main .main-esg .hgroup h3{font-family:"SEOULMILK", sans-serif;margin-top:20px;font-size: 25px;font-weight: normal;letter-spacing: -1.76px;color: #393939;word-break: keep-all;}
#main .main-esg .hgroup .txt{font-family:"SEOULMILK", sans-serif;margin-top:10px;font-size: 16px;font-weight: 300;letter-spacing: -0.96px;color: #a0a0a0;word-break: keep-all;}
#main .main-esg figure{margin-top:20px;}
#main .main-esg figure img{display: block;width:100%;}
#main .main-esg ul{margin:50px -2% 0;font-size:0;}
#main .main-esg ul li{display: inline-block;width:46%;margin:2%;}
#main .main-esg ul li a{display: block;}
#main .main-esg ul li a img{display: block;width:100%;}
#main .main-news{margin-top:50px;}
#main .main-news .hgroup h3{font-family:"SEOULMILK", sans-serif;margin-top:20px;font-size: 25px;font-weight: normal;letter-spacing: -1.76px;color: #393939;}
#main .main-news .hgroup .txt{font-family:"SEOULMILK", sans-serif;margin-top:10px;font-size: 16px;font-weight: 300;letter-spacing: -0.96px;color: #a0a0a0;}
#main .main-news ul{margin:20px -2% 0;display: flex;flex-wrap: wrap;}
#main .main-news ul li{position:relative;display: inline-block;width:46%;margin:2%;}
#main .main-news ul li a{position:relative;display: block;}
#main .main-news ul li i{position: absolute;width:30px;top:10px;right:10px;}
#main .main-news ul li p {margin-top:10px; font-size:13px; word-break:keep-all;}
#main .main-news ul li figure{}
#main .main-news ul li figure img{display: block;width:100%;}
#main .main-news ul li .mask{position: absolute;top:0;left:0;width:100%;height:100%;background: rgba(0,0,0,0.3);opacity:0;-moz-transition: all 0.3s;-webkit-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}
#main .main-news ul li .mask p{position:absolute;font-family:"SEOULMILK", sans-serif;top:50%;transform: translateY(-50%);left:0;width:100%;text-align: center;font-size: 26px;font-weight: normal;line-height: 1.38;letter-spacing: -1.04px;color: #fff;}
#main .main-news ul li:hover .mask{opacity: 1;}
#main .main-news ul li .box{position: absolute;top:50%;transform: translateY(-50%);left:0;width:100%;text-align: center;}
#main .main-news ul li .box p{font-family:"SEOULMILK", sans-serif;font-size: 24px;font-weight: 300;letter-spacing: -0.96px;color: #a0a0a0;}
#main .main-news ul li .box .sns-list{font-size: 0;margin-top:20px;}
#main .main-news ul li .box .sns-list a{display: inline-block;}
#main .main-news ul li .box .sns-list a img{display:block;}
#main .main-news ul li .box .sns-list a + a{margin-left:20px;}

/* 20240405 추가 */
@font-face {
	font-family: 'SEOULMILK_500';
	font-style: normal;
	font-weight: 500;
	src: url('/mobile/font/SEOULMILK 500mL.eot');
	src: url('/mobile/font/SEOULMILK 500mL.eot?#iefix') format('embedded-opentype'),
	   url('/mobile/font/SEOULMILK 500mL.woff2') format('woff2'),
	   url('/mobile/font/SEOULMILK 500mL.woff') format('woff'),
	   url('/mobile/font/SEOULMILK 500mL.ttf') format('truetype');
}

@font-face {
	font-family: 'SEOULMILK_1000';
	font-style: normal;
	font-weight: 500;
	src: url('/mobile/font/SEOULMILK 1000mL.eot');
	src: url('/mobile/font/SEOULMILK 1000mL.eot?#iefix') format('embedded-opentype'),
	   url('/mobile/font/SEOULMILK 1000mL.woff2') format('woff2'),
	   url('/mobile/font/SEOULMILK 1000mL.woff') format('woff'),
	   url('/mobile/font/SEOULMILK 1000mL.ttf') format('truetype');
}

#main .main-about.mt20{margin-top:20px;}
#main .new_area .banner_wrap h4, #main .new_area .main-about .tit-sub, #main .new_area .banner_wrap a .tit-sub{font-family:"SEOULMILK_1000", sans-serif;}
#main .new_area .main-about .btn_link{font-family:"SEOULMILK_500", sans-serif;}

#main .new_area{margin:0 -20px;}
#main .new_area .video{position: relative; height:0; padding-bottom: 56.25%;}
#main .new_area .video iframe.player{position: absolute; width: 100%; height: 100%;}
#main .new_area .main-about{position: relative; padding: 0 150px 0 20px; margin-top:30px; margin-bottom:30px;}
#main .new_area .main-about h4, #main .new_area .banner_wrap h4{font-size:25px; color:#393939; letter-spacing:-.3px;}
#main .new_area .main-about .tit-sub{font-size:16px; color:#a0a0a0; line-height: 1.67; letter-spacing: -0.96px; margin-top: 10px;}
#main .new_area .main-about .btn_link{position: absolute; top: 50%; right: 20px; transform: translateY(-50%); display: block; width: 110px; height: 35px; line-height: 35px; font-size: 14px; color: #fff; text-align: center; background: #68ba61; border-radius: 26px;}

#main .new_area .banner_wrap{background:#eff0f2;}
#main .new_area .banner_wrap a{display:block; width:100%; background:url('/mobile/images/main/img_banner_01.png') no-repeat bottom right / 185px auto; padding:35px 20px;}
#main .new_area .banner_wrap a .tit-sub{font-size: 16px; color: #a0a0a0; line-height: 1.67; letter-spacing: -0.96px; margin-top: 10px;}

#main .main-a2{margin-top: 15px; font-size:0;}
#main .main-a2 .lt_wrap{display:inline-block; width:62%; font-family: "SEOULMILK", sans-serif; font-weight: 300; font-size: 16px; color:#393939; vertical-align:middle;}
#main .main-a2 .lt_wrap .tit{font-family:inherit; color:inherit; display: block; font-weight: normal; font-size: 19px; margin-bottom: 5px;}
#main .main-a2 .btn{display:inline-block; width: 120px; height: 35px; line-height: 35px; border-radius: 20px; font-family: "SEOULMILK", sans-serif; font-size: 16px; color: #fff; text-align: center; background: #68ba61; vertical-align:middle;}

#main .video_wrap{position:relative; margin-top: 15px; margin-bottom:80px;}
#main .video_wrap .video{position: relative; width: 90%; height: 0; padding-bottom: 50.6%;}
#main .video_wrap .video iframe{position: absolute; display: block; width: 100%; height: 100%; border-radius:16px;}
#main .video_wrap .img_main_a2{position: absolute; bottom: -36%; right:4%; width: 26%;}

#main .main-a2-2{margin-top: 20px; width: calc(100% + 40px); margin-left: -20px; padding-top: 10px; background:#f6f7f9;}
#main .main-a2-2 > a{display: flex; align-items: center; width: calc(100% - 40px); margin-left: 20px; height:100%;}
#main .main-a2-2 .lt_wrap{display:inline-block; width:50%; font-family: "SEOULMILK", sans-serif; font-size: 19px; color:#393939; vertical-align:middle;}
#main .main-a2-2 .lt_wrap .tit{display: block; font-family: inherit; font-size: 30px;}
#main .main-a2-2 .img_wrap{display:inline-block; width:50%; vertical-align:middle;}
#main .main-a2-2 .img_wrap img{display:block; width:76%; max-width:160px; margin:0 auto;}