@charset "utf-8";

.fixed_element .scroll_text{position: fixed; bottom: var(--main-gap); left: calc(50% - 22px); display: flex; flex-direction: column; align-items: center; z-index: 1; opacity: 1; transition: .3s ease-in-out;} 
.fixed_element .scroll_text .txt_scroll{font-size: 11px; font-weight: bold; color: var(--cp1); letter-spacing: 0.75px; text-transform: uppercase; margin-top: 11px;}
.fixed_element .scroll_text .stick{position: relative; width: 1px; height: 37px; background-color: rgba(255,255,255,.4);}
.fixed_element .scroll_text .stick .bar{position: absolute; width: 100%; height: 9px; background-color: rgba(255,255,255,1); animation: bounce1 .7s linear infinite alternate}

/* ==========================================================================
   FULL PAGE CUSTOM
   ========================================================================== */
.fp-viewing-1 #header, .fp-viewing-2 #header, .fp-viewing-3 #header, .fp-viewing-4 #header{background-color: #fff;}
.fp-viewing-1 #header .inner_header, 
.fp-viewing-2 #header .inner_header, 
.fp-viewing-3 #header .inner_header,
.fp-viewing-4 #header .inner_header{height: var(--sticky-height);}
.fp-viewing-1 #header h1 .logo, 
.fp-viewing-2 #header h1 .logo, 
.fp-viewing-3 #header h1 .logo,
.fp-viewing-4 #header h1 .logo{display: none;}
.fp-viewing-1 #header h1 .s_logo, 
.fp-viewing-2 #header h1 .s_logo, 
.fp-viewing-3 #header h1 .s_logo,
.fp-viewing-4 #header h1 .s_logo{display: inline;}
.fp-viewing-1 #header .right_set .lang_set::after, 
.fp-viewing-2 #header .right_set .lang_set::after, 
.fp-viewing-3 #header .right_set .lang_set::after,
.fp-viewing-4 #header .right_set .lang_set::after{background-image: url('../images/common/arw1_2.png')}
.fp-viewing-1 #header .right_set .lang_set > ul > li, 
.fp-viewing-2 #header .right_set .lang_set > ul > li, 
.fp-viewing-3 #header .right_set .lang_set > ul > li,
.fp-viewing-4 #header .right_set .lang_set > ul > li{color: #222;}
.fp-viewing-1 #header #btn_sidebar, 
.fp-viewing-2 #header #btn_sidebar, 
.fp-viewing-3 #header #btn_sidebar,
.fp-viewing-4 #header #btn_sidebar{background-image: url('../images/common/ico_hamburg1_2.png')}
.fp-viewing-1 #header #gnb > ul > li > a, 
.fp-viewing-2 #header #gnb > ul > li > a, 
.fp-viewing-3 #header #gnb > ul > li > a,
.fp-viewing-4 #header #gnb > ul > li > a{color: #222;}

.fp-viewing-1 #header #gnb > ul > li > a.active, 
.fp-viewing-2 #header #gnb > ul > li > a.active, 
.fp-viewing-3 #header #gnb > ul > li > a.active,
.fp-viewing-4 #header #gnb > ul > li > a.active{color: var(--cp1);}

.fp-viewing-1 .fixed_element .scroll_text .stick, 
.fp-viewing-2 .fixed_element .scroll_text .stick,
.fp-viewing-3 .fixed_element .scroll_text .stick{background-color: #dbdbdb;}
.fp-viewing-1 .fixed_element .scroll_text .stick .bar, 
.fp-viewing-2 .fixed_element .scroll_text .stick .bar,
.fp-viewing-3 .fixed_element .scroll_text .stick .bar{background-color: var(--cp1);}
.fp-viewing-4 .fixed_element .scroll_text{opacity: 0;}

/* ==========================================================================
   MAIN VISUAL
   ========================================================================== */
#main_visual{position: relative; background-color: #333;}
#main_visual .main_video{position: relative; width: 100%; height: 100vh; height: calc(var(--vh, 1vh) * 100);}
#main_visual .main_video .index-video{width: 100%; height:100%; object-fit: cover; z-index: -100; top: 0; left: 0; overflow: hidden;}
/*#main_visual .main_video .cover{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0);}*/
#main_visual .mvis_area{position: absolute; left: 0; top: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; opacity: 0; animation: mvis_text 1s ease-in-out .3s forwards}
#main_visual .mvis_area .mvis_text{font-weight: bold; color: #fff; text-align: center; letter-spacing: 0; text-transform: uppercase;}
#main_visual .mvis_area .mvis_text .txt_en{font-size: 16px; color: var(--cp3_2); letter-spacing: 2px;}
#main_visual .mvis_area .mvis_text .main_text{font-size: 64px; line-height: 66px; margin-top: 19px;}
#main_visual .mvis_area .mvis_text .main_text strong{color: var(--cp1);}
#main_visual .mvis_area .mvis_text p{display: none; font-size: 17px; font-weight: 500; letter-spacing: 0.25px; line-height: 26px; margin-top: 16px; text-transform: none;}
#main_visual .mvis_area .button{margin-top: 32px;}
#main_visual .sns_set{position: absolute; top: calc(50% - 50px); left: calc(var(--main-gap) - 5px);}
#main_visual .sns_set a{opacity: .5; transition: .3s ease-in-out;}
#main_visual .sns_set a:hover{opacity: 1;}

/*애니메이션 Move*/
@keyframes bounce1
{  
    from {top: 0; opacity: .8;}  
    to {top: 38px; opacity: 1;}
}

/*애니메이션 Main Visual*/
@keyframes mvis_text
{  
    from {opacity: 0;}  
    to {opacity: 1;}
}


/* ==========================================================================
   MAIN CONTENTS
   ========================================================================== */
.section{background-color: #fff;}
/*SECTION1-BUSINESS*/
.section.sec1{background: url('../images/common/bg_fabric1.jpg') repeat center 0;}
.section.sec1 .sec_grid{width: 1600px; margin: 0 auto;}
.section.sec1 .sec_title{text-align: center;}
.section.sec1 .sec_title .title{font-size: 42px; font-weight: bold; letter-spacing: 0; text-transform: uppercase;}
.section.sec1 .sec_title p{font-size: 17px; font-weight: 300; line-height: 26px; margin-top: 9px;}
.section.sec1 .list_business{margin-top: 48px;}
.section.sec1 .list_business > ul{display: flex; flex-wrap: wrap; justify-content: space-between;}
.section.sec1 .list_business > ul > li{width: calc(33.33333333333% - 33px); overflow: hidden;}
.section.sec1 .list_business > ul > li > a{position: relative; display: block; width: 100%;}
.section.sec1 .list_business > ul > li > a > div:not(.thumb){position: absolute;}
.section.sec1 .list_business .thumb{position: relative;}
.section.sec1 .list_business .thumb img{transition: .4s ease-in-out;}
.section.sec1 .list_business .thumb:hover img{transform:scale(1.15)}
.section.sec1 .list_business .num,
.section.sec1 .list_business .txt_en{top: 42px; font-family:'Roboto', sans-serif; font-size: 12px; font-weight: bold; color: rgba(255,255,255,.7); letter-spacing: 0; text-transform: uppercase;}
.section.sec1 .list_business .num{left: var(--s-gap1);}
.section.sec1 .list_business .txt_en{right: var(--s-gap1);}
.section.sec1 .list_business .bottom_text{bottom: -58px; left: 0; width: 100%; transition: .3s ease-in-out;}
.section.sec1 .list_business .bottom_text .txt_set{padding: 0 var(--s-gap1) 32px; color: #fff;}
.section.sec1 .list_business .bottom_text .txt_set .title{font-size: 26px; font-weight: bold; line-height: 32px;}
.section.sec1 .list_business .bottom_text .txt_set p{font-size: 15px; line-height: 22px; opacity: .8; word-break: keep-all; margin-top: 8px;}
.section.sec1 .list_business .bottom_text::after{content: "VIEW MORE"; display: flex; align-items: center; height: 58px; padding: 0 var(--s-gap1); font-family:'Roboto', sans-serif; font-size: 12px; font-weight: bold; color: #fff; letter-spacing: 0; background: rgba(228,36,24,.1) url('../images/common/arw5_3.png') no-repeat calc(100% - var(--s-gap1)) center; background-size: 16px auto; transition: .4s ease-in-out;}
.section.sec1 .list_business > ul > li:hover{box-shadow: 2px 5px 18px 3px rgba(0,0,0,0.25);}
.section.sec1 .list_business > ul > li > a:hover .bottom_text{bottom: 0;}
.section.sec1 .list_business > ul > li > a:hover .bottom_text::after{background: rgba(228,36,24,.8) url('../images/common/arw5_3.png') no-repeat calc(100% - var(--s-gap1)) center; background-size: 16px auto;}
.section.sec1 .button{text-align: center; margin-top: 50px;}

/*SECTION2-PRODUCT*/
.section.sec2{background: url('../images/main/msec2_bg.jpg') no-repeat center; background-size: cover;}
.section.sec2 .sec_lr{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.section.sec2 .sec_text{position: relative; width: 450px;}
.section.sec2 .sec_text .sec_title .txt_en{font-size: 16px; font-weight: bold; color: var(--cp3); letter-spacing: 0; text-transform: uppercase;}
.section.sec2 .sec_text .sec_title .main_text{font-size: 42px; font-weight: 500; line-height: 52px; margin-top: 19px;}
.section.sec2 .sec_text .sec_title p{font-size: 17px; font-weight: 300; color: #666; line-height: 26px; word-break: keep-all; margin-top: 9px;}
.section.sec2 .sec_text .button{margin-top: 220px;}
.section.sec2 .sec_text .swiper-button-next,
.section.sec2 .sec_text .swiper-button-prev{top: 220px; margin-top: 0; width: 50px; height: 50px; border: 1px solid #cacaca; border-radius: 50%; transition: .2s ease-in-out}
.section.sec2 .sec_text .swiper-button-next:after,
.section.sec2 .sec_text .swiper-button-prev:after{content:""}
.section.sec2 .sec_text .swiper-button-next{right: auto; left: 60px; background: #fff url('../images/common/arw5_4.png') no-repeat center; background-size: 16px auto;}
.section.sec2 .sec_text .swiper-button-prev{left: 0; background: #fff url('../images/common/arw5_2.png') no-repeat center; background-size: 16px auto;}
.section.sec2 .sec_text .swiper-button-next:hover,
.section.sec2 .sec_text .swiper-button-next:focus,
.section.sec2 .sec_text .swiper-button-prev:hover, 
.section.sec2 .sec_text .swiper-button-prev:focus{outline:none}
.section.sec2 .sec_text .swiper-button-next:hover,
.section.sec2 .sec_text .swiper-button-next:focus{border-color: #222; background: #222 url('../images/common/arw5_3.png') no-repeat center; background-size: 16px auto;}
.section.sec2 .sec_text .swiper-button-prev:hover,
.section.sec2 .sec_text .swiper-button-prev:focus{border-color: #222; background: #222 url('../images/common/arw5_1.png') no-repeat center; background-size: 16px auto;}
.section.sec2 .sec_carousel{width: calc(100% - 450px);}
.section.sec2 .sec_carousel .prod{text-align: right;}
.section.sec2 .sec_carousel .prod1 img,
.section.sec2 .sec_carousel .prod2 img{max-width: 588px;}
.section.sec2 .sec_carousel .button{display: none; text-align: center; margin-top: 70px;}

/*SECTION3-ESG*/
.section.sec3{background: url('../images/main/msec3_bg.jpg') no-repeat center; background-size: cover;}
.section.sec3 .sec_title{text-align: center; text-transform: uppercase;}
.section.sec3 .sec_title .sub_text{font-size: 16px; font-weight: bold; color: var(--cp3); letter-spacing: 0.5px;}
.section.sec3 .sec_title .title{font-size: 42px; font-weight: bold; color: #fff; letter-spacing: 0; margin-top: 8px;}
.section.sec3 .sec_title p{font-size: 16px; color: rgba(255,255,255,.9); line-height: 26px; word-break: keep-all; margin-top: 19px;}
.section.sec3 .list_esg{margin-top: 47px;}
.section.sec3 .list_esg > ul{display: flex; flex-wrap: wrap; justify-content: space-between;}
.section.sec3 .list_esg > ul > li{display: flex; justify-content: center; align-items: center; width: calc(33.33333333333% - 40px); padding: 23px; border: 1px solid rgba(255,255,255,.3); background-color: rgba(0,0,0,.1);}
.section.sec3 .list_esg .txt_set{color: #fff; text-align: center;}
.section.sec3 .list_esg .txt_set .title{font-size: 20px; font-weight: bold; padding-top: 99px;}
.section.sec3 .list_esg .txt_set .title.ico1{background: url('../images/contents/ico_esg2_1.png') no-repeat center 10px; background-size: 64px auto;}
.section.sec3 .list_esg .txt_set .title.ico2{background: url('../images/contents/ico_esg2_2.png') no-repeat center 25px; background-size: 90px auto;}
.section.sec3 .list_esg .txt_set .title.ico3{background: url('../images/contents/ico_esg2_3.png') no-repeat center 14px; background-size: 64px auto;}
.section.sec3 .list_esg .txt_set p{font-size: 15px; font-weight: 300; line-height: 22px; word-break: keep-all; opacity: .8; margin-top: 12px;}
.section.sec3 .button{text-align: center; margin-top: 55px;}
#main #gototop{display: none;}