@charset "utf-8";

/* =========================
   공통
========================= */
/* navDot */
#indexNav.white div {color:#111;background:#fff;}
#indexNav .inner {position:fixed;z-index:100;top:50%;left:4rem;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:2rem;}
#indexNav .inner .swiper-pagination-bullet {background:#ccc;width:.8rem;height:.8rem;opacity:1;}
#indexNav .inner .swiper-pagination-bullet.on {background:transparent;border:2px solid #ccc;width:1.6rem;height:1.6rem;}
#indexNav .inner .swiper-pagination-bullet:last-child {display:none;}

/* scrollDown */
#scrollDown {position:fixed;z-index:100;bottom:8rem;left:4rem;display:flex;flex-direction:column;align-items:center;gap:0;}
#scrollDown span {font-family:"play",sans-serif;font-weight:700;font-size:1.3rem;letter-spacing:0.01em;color:#fff;writing-mode:vertical-rl;}
#scrollDown i {font-size:2.4rem;color:#fff;animation:bounce .9s linear infinite alternate;}
@keyframes bounce {from{transform:translateY(0px);}to{transform:translateY(1rem);}}

/* 메인 컨텐츠 영역 */
#sh_fullpage {overflow:hidden;position:relative;height:100vh;}

/* 메인 타이틀 */
.tit_area .tit .sec_eng {display:block;font-family:"play",sans-serif;font-size:1.6rem;font-weight:700;line-height:1;color:var(--primary2);text-transform:uppercase;margin-bottom:4rem;}
.tit_area .tit .sec_tit {font-weight:700;font-size:5.6rem;line-height:1.2;color:#fff;}
.tit_area .tit .sec_tit span {color:#4fc4ff;}
.tit_area .tit .sec_tit.eng {font-family:"play",sans-serif;line-height:1;text-transform:uppercase;}
.tit_area .tit .sec_desc {font-weight:500;font-size:1.8rem;line-height:1.6;color:#fff;margin-top:6rem;}
    @media (max-width:1399px) {
        #indexNav .inner, #scrollDown {left:2rem;}
    }
    @media (max-width:1024px) {
        #indexNav .inner, #scrollDown {display:none;}
        .tit_area .tit .sec_tit {font-size:5rem;}
        .tit_area .tit .sec_desc {margin-top:3rem;}
    }


/* =========================
   메인비주얼
========================= */
#mainVisual {position:relative;width:100%;height:100vh;}
#mainVisual .img_wrap {overflow:hidden;opacity:.75;position:absolute;top:50%;width:calc(100% - 10%);left:50%;transform:translate(-50%, -50%);height:75vh;border-radius:50px;transition:all 1s;}
/*#mainVisual .img_wrap:after {opacity:0;display:block;content:"";position:absolute;left:0;top:0;z-index:100;width:100%;height:100%;!*background:linear-gradient(to right, rgba(0,0,0,.8) 0%, rgba(0,0,0,0.4) 70%, rgba(0,0,0,0) 100%);*!transition:all 1s .2s;}*/
#mainVisual .img_wrap .main_slide {height:100%;}
#mainVisual .img_wrap video {position:absolute;top:0;left:0;display:block;width:100%;height:100%;object-fit:cover;}
#mainVisual .img_wrap ul li {opacity:0!important;position:absolute;left:0;top:0;transform:translate3d(0,0,0)!important;width:100%!important;height:100%;}
#mainVisual .main_txt {opacity:0;display:flex;position:absolute;justify-content:space-between;align-items:center;left:0;top:50%;transform:translateY(-50%);width:100%;z-index:101;color:#fff;transition:all 1s;}
#mainVisual .main_txt .mvis_stit {font-family:"Play",sans-serif;font-weight:700;font-size:2rem;margin-bottom:2rem;}
#mainVisual .main_txt .mvis_tit span {display:block;font-family:"Play",sans-serif;font-weight:700;font-size:5rem;line-height:1;}
#mainVisual .main_txt .mvis_tit span.stb {font-size:7rem;}
#mainVisual .main_txt.on {opacity:1;}
#mainVisual.on .img_wrap {opacity:1;bottom:0;width:100%;height:100vh;border-radius:0;}
#mainVisual.on .img_wrap:after {opacity:1;}
    @media (max-width:575px) {
        #mainVisual .main_txt {text-align:center;}
        #mainVisual .main_txt .mvis_tit span {font-size:4rem;}
        #mainVisual .main_txt .mvis_tit span.stb {font-size:6rem;}
    }


/* =========================
   사업영역
========================= */
#atc01 {overflow:hidden;display:flex;align-items:center;justify-content:center;height:100vh;}
#atc01 .txt_slide {overflow:visible;}
#atc01 .txt_slide .swiper-slide {opacity:0 !important;transition:opacity 2s;}
#atc01 .txt_slide .swiper-slide-active {opacity:1 !important;}
#atc01 .l_inner {position:absolute;z-index:10;max-width:var(--mainsize);width:100%;}
#atc01 .l_inner .pager {display:flex;gap:2.5rem;margin-top:7rem;}
#atc01 .l_inner .pager p {width:auto;height:auto;min-width:22rem;padding:.5rem 1rem 0;text-align:center;border-top:2px solid #fff;border-radius:0;color:#fff;opacity:.3;background:none;transition:all .3s;}
#atc01 .l_inner .pager p span {font-weight:600;font-size:2rem;}
#atc01 .l_inner .pager p em {display:inline-block;font-family:'play',sans-serif;font-weight:700;margin-right:1rem;}
#atc01 .l_inner .pager p.on {opacity:1;}
#atc01 .bg_area {width:100%;height:100vh;transition:all 1s;transition-delay:.5s;}
#atc01 .bg_area .atc01_slide {position:relative;width:100%;height:100%;}
#atc01 .bg_area li {width:100%;height:100%;background:url("../../images/fs/main/inc01/bg01.png") no-repeat right center/cover;}
#atc01 .bg_area li.bg02 {background-image:url("../../images/fs/main/inc01/bg02.png");}
#atc01 .bg_area li.bg03 {background-image:url("../../images/fs/main/inc01/bg03.png");}
    @media (max-width:1024px) {
        #atc01 .bg_area li {background-position:center;}
    }
    @media (max-width:768px) {
        #atc01 {align-items:flex-start;}
        #atc01 .l_inner {padding-top:8rem;}
        #atc01 .l_inner .pager p {min-width:calc((100% - 2.5rem * 2) / 3);}
        #atc01 .bg_area li {background-image:url("../../images/fs/main/inc01/bg01_m.png");}
        #atc01 .bg_area li.bg02 {background-image:url("../../images/fs/main/inc01/bg02_m.png");}
        #atc01 .bg_area li.bg03 {background-image:url("../../images/fs/main/inc01/bg03_m.png");}
    }
    @media (max-width:575px) {
        #atc01 .l_inner .pager {flex-wrap:wrap;}
        #atc01 .l_inner .pager p {min-width:calc((100% - 2.5rem * 2) / 2);}
    }
    @media (max-width:380px) {
    }


/* =========================
   atc02_PRODUCT
========================= */
#atc02 {background:url("../../images/fs/main/inc02/bg.png") no-repeat #000 center/cover;color:#fff;position:relative;height:100vh;display:flex;flex-direction:column;justify-content:center;}
#atc02 .product_slider li, .content_box {height:100%;}
#atc02 .product_tabs {display:flex;flex-wrap:wrap;gap:1.5rem 3rem;width:60%;padding-top:10rem;}
#atc02 .product_tabs span {opacity:1;cursor:pointer;font-weight:600;font-size:2rem;color:#686868;transition:0.3s;width:auto;height:auto;position:relative;border-radius:0;}
#atc02 .product_tabs span:not(:last-child)::after {content:"";position:absolute;top:1rem;right:-1.5rem;width:1px;height:1.3rem;background:#686868;}
#atc02 .product_tabs span.swiper-pagination-bullet-active {opacity:1;font-weight:700;color:#fff;background:none;}
#atc02 .content_box {display:flex;align-items:center;justify-content:space-between;}
#atc02 .content_box > div {flex:1 1 0;}
#atc02 .btn_area {display:flex;justify-content:space-between;align-items:center;gap:4rem;margin-top:17rem;border:1px solid rgba(255,255,255,.3);padding:1.5rem 3rem;font-weight:500;width:28rem;}
#atc02 .btn_area:hover {text-decoration:none;background:#fff;color:var(--primary);}
#atc02 .img_area {text-align:right;}
#atc02 .img_area img {max-width:100%;}
#atc02 .control_wrap {position:absolute;left:0;top:50%;z-index:10;display:flex;align-items:center;}
#atc02 .nav_group {display:inline-flex;align-items:center;padding:0;gap:2rem;}
#atc02 .nav_group button {background:none;border:none;color:#fff;font-size:3.5rem;cursor:pointer;display:flex;align-items:center;}
#atc02 .nav_group button:hover {opacity:0.7;}
#atc02 .fraction_pager {font-size:1.8rem;font-family:'play',sans-serif;font-weight:700;text-align:center;padding:0 1rem;}
    @media (max-width:1024px) {
        #atc02 {height:auto;padding:8rem 0;display:block;}
        #atc02 .product_tabs {width:100%;padding-top:0;margin-bottom:5rem;justify-content:flex-start;}
        #atc02 .content_box {flex-direction:column;align-items:flex-start;justify-content:flex-start;height:auto;}
        #atc02 .content_box > div {width:100%;flex:none;}
        #atc02 .tit_area .tit .sec_tit br {display:none;}
        #atc02 .img_area {text-align:center;margin-top:4rem;width:100%;height:40vh;display:flex;align-items:center;justify-content:center;}
        #atc02 .img_area img {width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;}
        #atc02 .control_wrap {position:relative;top:0;margin-top:4rem;justify-content:flex-end;}
        #atc02 .btn_area {margin-top:3rem;}
    }
    @media (max-width:768px) {
        #atc02 {padding:6rem 0;}
        #atc02 .product_tabs {gap:.5rem 3rem;}
        #atc02 .img_area {height:30vh;}
        #atc02 .btn_area {width:100%;max-width:28rem;margin-top:4rem;}
    }


/* =========================
   atc03_ESG
========================= */
#atc03 {display:grid;grid-template-columns:repeat(3,1fr);height:100vh;}
#atc03 > div {display:flex;justify-content:center;align-items:center;flex-direction:column;color:#fff;position:relative;overflow:hidden;}
#atc03 > div .bg_area {width:100%;height:100%;background:no-repeat center/cover;position:absolute;top:0;left:0;z-index:-1;transform:scale(1);transition:all .3s var(--ani);}
#atc03 > div:hover .bg_area {transform:scale(1.04);}
#atc03 > div .bg_area::after {content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:#000;opacity:.6;transition:.2s;z-index:-1;}
#atc03 > div:hover .bg_area::after {opacity:0;}
#atc03 > div.E_wrap .bg_area {background-image:url("../../images/fs/main/inc04/e_bg.png");}
#atc03 > div.S_wrap .bg_area {background-image:url("../../images/fs/main/inc04/s_bg.png");}
#atc03 > div.G_wrap .bg_area {background-image:url("../../images/fs/main/inc04/g_bg.png");}
#atc03 > div .tit_area .tit {margin-top:3.5rem;}
#atc03 > div .btn_area {display:none;margin-top:7rem;border:1px solid #fff;padding:1.5rem 3rem;align-items:center;gap:4rem;font-weight:500;}
#atc03 > div:hover .btn_area {display:flex;}
#atc03 > div:hover .btn_area:hover {text-decoration:none;background:#fff;color:var(--primary);}
    @media (max-width:1024px) {
        #atc03 {height:50rem;}
        #atc03 > div {padding:8rem 0;}
        #atc03 > div .tit_area .ico img {height:6rem;}
        #atc03 > div .tit_area .tit {margin-top:2.5rem;}
        #atc03 > div .btn_area {display:flex;margin-top:5rem;}
    }
    @media (max-width:768px) {
        #atc03 {height:auto;grid-template-columns:none;grid-template-rows:repeat(3,1fr);}
        #atc03 > div {padding:6rem 0;}
        #atc03 > div .tit_area .tit {margin-top:2rem;}
        #atc03 > div .btn_area {display:flex;margin-top:4rem;}
    }


/* =========================
   atc04_바로가기
========================= */
#atc04 {background:url("../../images/fs/main/inc05/bg.png") no-repeat left center/cover;}
#atc04 .w1400 {display:flex;justify-content:space-between;align-items:center;gap:5rem;}
#atc04 .tit_area .tit .sec_tit {font-size:4.6rem;}
#atc04 .tit_area .tit .sec_tit.eng {line-height:1.2;letter-spacing: -1px;}
#atc04 .tit_area .tit .sec_desc {opacity:.8;}
#atc04 .link_area {display:grid;grid-template:repeat(2,1fr)/repeat(2,1fr);gap:4rem;}
#atc04 .link_area a {display:flex;flex-direction:column;justify-content:space-between;width:25rem;height:25rem;background:rgba(255,255,255,.5);border-radius:1rem 5rem 5rem 1rem;padding:4rem;box-shadow:-7px 7px 30px 10px rgba(0,0,0,.1);}
#atc04 .link_area a:hover {background:var(--primary);text-decoration:none;}
#atc04 .link_area a .link_tit {font-weight:700;font-size:2.4rem;color:var(--black);}
#atc04 .link_area a .link_ico {font-size:6rem;color:var(--primary);text-align:right;line-height:1;}
#atc04 .link_area a:hover :is(.link_tit,.link_ico) {color:#fff;}
    @media (max-width:1299px) {
        #atc04 .w1400 {gap:4rem;}
        #atc04 .link_area {gap:3rem;}
    }
    @media (max-width:1199px) {
        #atc04 .w1400 {gap:3rem;}
        #atc04 .link_area {gap:2rem;}
        #atc04 .link_area a {width:20rem;height:20rem;padding:3rem;}
    }
    @media (max-width:1024px) {
        #atc04 .w1400 {flex-direction:column;}
        #atc04 .tit_area {width:100%;text-align:center;}
        #atc04 .tit_area .tit .sec_tit {font-size:3.6rem;}
        #atc04 .tit_area .tit .sec_tit.eng {line-height:1.2;}
        #atc04 .tit_area .tit .sec_desc br.mo_hide {display:none;}
    }
    @media (max-width:575px) {
        #atc04 {background-position:left 20% center;}
        #atc04 .tit_area .tit .sec_tit {font-size:3.2rem;}
    }