@charset "utf-8";

#main{padding-bottom: 206px;}
#main .main-slide{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 .progress-bar {position:absolute; right:20px; bottom:20px;}
#main .main-video {position:relative;margin-top:-140px; overflow: hidden; width:100%;}
#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 {position:relative; margin:  100px auto; width: 1599px;}
#main .video-wrap .video_area{position: relative; margin-top: 50px;width: 870px;vertical-align: top;}
#main .video-wrap .video_area video {width: 100%; height: auto;}
#main .video-wrap .video_area .sticker {position: absolute ;right: 10px; bottom: -140px;transform:translate(0px, -30px);}
#main .video-wrap .v_box {width: 750px;height: 422px;border-radius:18px; overflow:hidden;}
#main .video-wrap .txt_area {vertical-align:top; text-align:left;}
#main .video-wrap .big_txt{font-size:44px;font-family:"SEOULMILK"; line-height:60px; color:#393939;}
#main .video-wrap .txt {margin-top:30px; font-size:24px;font-family:"SEOULMILK"; font-weight:300; line-height:1.3; color:#a0a0a0;}
#main .video-wrap .more_btn {margin-top:155px;width:100%; box-sizing:border-box; text-align:right;}
#main .video-wrap .more_btn a{display:inline-block; padding-right:20px; font-size:16px;font-family:"SEOULMILK"; border-bottom:2px solid #222222; background:url('../images/contents/icon_plus.png') no-repeat; background-position:right 4px; color:#222222;}
#main .video-wrap .right_txt_area {position:absolute; right:105px;top:270px;}
#main .video-wrap .right_txt_area .big_txt {font-size:40px; line-height:1.3;}

#main .main-title{font-family:"SEOULMILK";display:inline-block;position: relative;font-size: 18px;font-weight: normal;letter-spacing: -0.72px;color: #393939;padding-top:20px;}
#main .main-title:before{content: "";display: inline-block;width:100%;height:2px;background: #222;}
#main .main-txt{font-family:"SEOULMILK";text-align: center;margin-top:138px;position: relative;padding-top:98px;font-size: 38px;font-weight: normal;line-height: 1.58;letter-spacing: -1.52px;color: #393939;}
#main .main-txt:before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);display: inline-block;width:1px;height:46px;background: #c4c4c4;}
/*#main .main-about{position:relative; margin-top:210px;}*/
#main .main-about{position:relative; margin-top:100px;}
#main .main-about .video_frame {position: absolute;left: 380px;top: -280px;margin-left: 0;width: 839px;height: 472px;}
#main .main-about h4{font-family:"SEOULMILK";margin-top:40px;font-size: 44px;font-weight: normal;line-height: 1.36;letter-spacing: -1.76px;color: #222;}
#main .main-about p{font-family:"SEOULMILK";margin-top:30px;font-size: 24px;font-weight: 300;line-height: 1.67;letter-spacing: -0.96px;color: #a0a0a0;}
#main .main-about .slide-wrap{margin-top:85px;position: relative}
#main .main-about .about-slider{}
#main .main-about .about-slider .slick-track{display: flex;align-items: flex-end;}
#main .main-about .about-slider .slick-slide{margin:0 10px;}
#main .main-about .about-slider .slick-slide p{font-weight: 400;}
#main .main-about .about-slider .slick-slide:hover p{color:#222;}
#main .main-about .about-slider .slick-arrow{position: absolute;top:-95px;width:34px;height:28px;font-size:0;}
#main .main-about .about-slider .slick-prev{background: url(../images/main/slick_arrow1.png) no-repeat;background-size: cover;right:90px;}
#main .main-about .about-slider .slick-next{background: url(../images/main/slick_arrow2.png) no-repeat;background-size: cover;right:40px;}
#main .main-about .pagingInfo{position: absolute;right:155px;top:-92px;font-size: 16px;font-weight: normal;letter-spacing: -0.64px;color: #b7b7b7;font-family:"SEOULMILK";display: flex;align-items: center;}
#main .main-about .pagingInfo em{color:#222;font-family:"SEOULMILK";}
#main .main-about .pagingInfo i{display: inline-block;margin:0 15px;width:1px;height:15px;background: #b7b7b7;}


#main .main-product{margin-top:80px;}
#main .main-product .hgroup h3{font-family:"SEOULMILK";margin-top:30px;font-size: 44px;font-weight: normal;letter-spacing: -1.76px;color: #393939;}
#main .main-product .hgroup .txt{font-family:"SEOULMILK";margin-top:30px;font-size: 24px;font-weight: 300;letter-spacing: -0.96px;color: #a0a0a0;}
#main .main-product ul{margin:80px -0.5% 0;display: flex;flex-wrap: wrap;}
#main .main-product ul li{display: inline-block;width:24%;margin:0.5%;}
#main .main-product ul li a{display:block;position: relative;}
#main .main-product ul li figure{height: 378px;overflow: hidden;}
#main .main-product ul li figure img{display: block;width:100%; margin-top: 0%;}
#main .main-product ul li .mask{position: absolute;top:0;left:0;width:100%;height:100%;background: rgba(0,0,0,0.35);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-product ul li .mask .txt-box{position: absolute;top:23%;left:0;width:100%;text-align: center;}
#main .main-product ul li .mask .txt-box h4{font-family:"SEOULMILK";font-size: 30px;letter-spacing: -1.2px;color:#fff;font-weight: 500;}
#main .main-product ul li .mask .txt-box p{font-family:"SEOULMILK";margin-top:30px;font-size: 18px;font-weight: normal;letter-spacing: -0.72px;color: #fff;}
#main .main-product ul li .mask .txt-box span{font-family:"SEOULMILK";margin-top:40px;display: inline-block; font-size: 16px;letter-spacing: -0.64px;color:#fff;}
#main .main-product ul li:hover .mask{opacity: 1;}
#main .main-esg{margin-top:223px;}
#main .main-esg .hgroup h3{font-family:"SEOULMILK";margin-top:30px;font-size: 44px;font-weight: normal;letter-spacing: -1.76px;color: #393939;}
#main .main-esg .hgroup .txt{font-family:"SEOULMILK";margin-top:30px;font-size: 24px;font-weight: 300;letter-spacing: -0.96px;color: #a0a0a0;}
#main .main-esg .box{position:relative;margin-top:85px;background: url(../images/main/main_esg.png) top center no-repeat;background-size: cover;padding-top:50%;}
#main .main-esg .box .txt-box{position: absolute;top: 15%;lefT: 7%;}
#main .main-esg .box .txt-box h4{font-family:"SEOULMILK";font-size: 52px;font-weight: normal;line-height: 1.35;letter-spacing: -2.08px;color: #fff;}
#main .main-esg .box .txt-box p{margin-top:30px;font-family:"SEOULMILK";font-size: 20px;font-weight: 100;letter-spacing: -1.2px;color: rgba(255, 255, 255, 0.8);}
#main .main-esg .box a{position:absolute;font-family:"SEOULMILK";display: inline-block; font-size: 30px;font-weight: 300;letter-spacing: -1.2px;text-align: center;color: #fff;border:1px solid #6d7075;width:475px;height:50%;padding-top:10%;}
#main .main-esg .box a:after{content: "";position:absolute;left: 50%;transform: translateX(-50%);margin-top: 65px;display: inline-block;width:64px;height:64px;background: url(../images/icon/view_more.png) no-repeat;background-size: cover;opacity: 0;}
#main .main-esg .box a:hover:after{opacity: 1;}
#main .main-esg .box .link1{right:0;top:0;}
#main .main-esg .box .link2{right:0;bottom:0;}
#main .main-esg .box .link3{right:475px;bottom:0;}
#main .main-news{margin-top:90px;}
#main .main-news .hgroup h3{font-family:"SEOULMILK";margin-top:30px;font-size: 44px;font-weight: normal;letter-spacing: -1.76px;color: #393939;}
#main .main-news .hgroup .txt{font-family:"SEOULMILK";margin-top:20px;font-size: 24px;font-weight: 300;letter-spacing: -0.96px;color: #a0a0a0;}
#main .main-news ul{display: flex;flex-wrap: wrap;}
#main .main-news ul li{position:relative;display: inline-block;width:23%;margin:1%;}
#main .main-news ul li a{position:relative;display: block;}
#main .main-news ul li i{position: absolute;width:36px;top:10px;right:10px;}
#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";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";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;}
#main .main-news .thum-img {width:380px; height:380px;position: relative;overflow: hidden;}
#main .main-news .thum-img img{transition: transform 0.3s ease 0s, opacity 0.1s linear 0s;}
#main .main-news .list-title {font-size: 18px; line-height: 1.56; color: #000000; margin: 14px 0; text-overflow: ellipsis; max-height: 55px; word-break:keep-all; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word;}
#main .main-news .layout li a:hover .thum-img img{transform: scale(1.1) rotate(.001deg);}