@charset "utf-8";

/* =========================== MAIN */

/* Mainslide */
#mainVisual{overflow:hidden;position:relative;width:100%;height:100vh;background-color:#222}
#mainVisual::before{content:"";display:block;position:absolute;left:0;bottom:112px;z-index:1;width:100%;height:1px;background:rgba(255, 255, 255, 0.3)}

/* 텍스트 */
#mainVisual .cont{position:relative;max-width:var(--mainsize);margin:0 auto}
#mainVisual .txt{position:absolute; bottom:400px;z-index:1;color:#fff}
#mainVisual .txt b{font-size:15px;font-weight:700;color:#fff;font-family:var(--main-font)}
#mainVisual .txt h1{padding:30px 0 40px;font-size:45px;font-weight:400;line-height:1.3;white-space:pre-line;font-family:var(--main-font)}
#mainVisual .txt p{font-size:17px;color:rgba(255, 255, 255, 0.7);font-family:var(--sub-font)}

/* 이미지 */
#mainVisual .mainSwiper{position:absolute;left:0;top:0;z-index:1001;width:100%;height:100vh}
#mainVisual .slider li{display:flex;align-items:center;justify-content:center;width:100%;height:100vh;text-align:center;background:url(../img/main/main_img1.jpg) center no-repeat;background-size:cover}
#mainVisual .slider li.img02{background-image:url(../img/main/main_img2.jpg)}
#mainVisual .slider li.img03{background-image:url(../img/main/main_img3.jpg)}

/* progressbar */
.progress{display:grid;grid-template-columns:repeat(3,1fr);position:absolute;left:50%;bottom:112px;transform:translate(-50%, 0);width:var(--mainsize)}
.progress li{position:relative;flex-grow:1;cursor:pointer;width:100%}
.progress li:after{position:absolute;content:'';bottom:0;left:0;z-index:-1;width:100%;height:1px;background:transparent}
.progress li p{padding:0 0 20px 25px;font-size:17px;font-weight:700;color:rgba(255,255,255,0.5);transition:all .3s;font-family: var(--main-font)}
.progress li p span{display:inline-block;padding-right:25px;font-size:15px;font-weight:700}
.progress li.active p{color:#fff}
.progress li .bar{position:absolute;bottom:0;left:0;width:0;height:1px;background-color:#fff}
.progress li.active .bar{background:#fff;animation:countingBar 3s linear forwards}
@keyframes countingBar{0%{width:0}100%{width:100%}}

/* inc01 */
#inc01{padding:205px 0 150px;background:#f2f2f2}

/* tit */
#inc01 .tit_area{display:flex;align-items:flex-end;justify-content:space-between;padding-bottom:105px}

/* controls */
#inc01 .wrap{display:flex;align-items:center;justify-content:space-between;max-width:var(--mainsize);margin:0 auto 50px}
#inc01 .control{display:flex;align-items:center;justify-content:center;gap:30px;font-size:24px}
#inc01 .control > span{color:var(--primary);opacity:0.3;cursor:pointer;transition:0.2s}
#inc01 .control > span:hover{opacity:1}

/* pager */
#inc01 .pager{display:flex;align-items:center;gap:10px; position:relative}
#inc01 .pager span{width:13px;height:4px;border-radius:0;background:var(--primary);opacity:0.3;cursor:pointer}
#inc01 .pager span.active{opacity:1}

/* slide */
#inc01 .swiper-wrapper > li{width:1400px;position:relative}
#inc01 .swiper-wrapper > li a{width:100%;height:100%}
#inc01 .swiper-wrapper > li .txt{opacity:1;position:absolute;bottom:0;z-index:1;width:100%;height:100%;background:rgba(0, 0, 0, 0);transition:all .3s}
#inc01 .swiper-wrapper > li .txt b{font-size:15px;color:#fff;font-weight:700;font-family:var(--main-font)}
#inc01 .swiper-wrapper > li .txt h3{padding:20px 0 10px;font-size:25px;color:#fff;font-weight:700;font-family:var(--main-font)}
#inc01 .swiper-wrapper > li .txt > div{position:absolute;bottom:75px;left:80px;opacity:0;transition:all .3s}
#inc01 .swiper-wrapper > li .txt > div > div{font-size:15px;color:#fff}
#inc01 .swiper-wrapper > li:hover .txt{background:rgba(0, 0, 0, 0.4)}
#inc01 .swiper-wrapper > li:hover .txt > div{opacity:1}

/* benefit */
.benefit{max-width:var(--mainsize);margin:125px auto 0}
.benefit .sub_tit h2{padding-bottom:115px;font-size:35px;font-weight:700;line-height:1.4;color:#111;opacity:0.1}
.benefit .sub_tit b{font-size:15px;font-weight:700;color:var(--primary);font-family:var(--main-font)}
.benefit .list{display:flex;align-items:center;justify-content:flex-end;gap:65px;padding:105px 0 0 320px}
.benefit .list li dl dt{padding:30px 0 15px;margin-bottom:25px;border-bottom:1px solid #e1e1e1;font-size:20px;font-weight:700;color:#222}
.benefit .list li{width:100%}
.benefit .list li dl dd{position:relative;padding-left:18px;font-size:15px}
.benefit .list li dl dd::before{content:"";display:inline-block;position:absolute;top:11px;left:0;width:3px;height:3px;border-radius:100%;background:#777}

/* inc02 */
#inc02{position:relative;padding:140px 0 155px;text-align:center}

/* tit */
#inc02 .tit_area > span{display:block;padding-top:30px}

/* control */
#inc02 .control{display:flex;align-items:center;justify-content:center;width:150px;margin:65px auto 0}
#inc02 .control .pager{display:flex;align-items:center;justify-content:center;gap:5px;width:initial;margin:0 20px 6px}
#inc02 .control .pager span{font-size:15px;font-weight:700;color:#111;font-family:var(--main-font)}
#inc02 .control > span{cursor:pointer}
#inc02 .control > span svg{width:20px;height:20px}

/* slide */
#inc02 .staff_slide{max-width:var(--mainsize);margin:0 auto;padding-top:85px}
#inc02 .staff_slide img{width:100%;height:100%;object-fit:cover;margin-bottom:20px}
#inc02 .staff_slide .item{text-align:left}
#inc02 .staff_slide .item .tit{font-size:20px;font-weight:700;color:#111}
#inc02 .staff_slide .item .txt{font-size:15px;color:#777}

/* inc03 */
#inc03{overflow:hidden;position:relative;width:100%;height:100%}
#inc03 .pin-spacer{overflow:visible;float:none;display:block;place-self:auto;grid-area:auto;flex-basis:auto;flex-shrink:1;position:relative;width:100%;height:1800px;z-index:auto;padding:0px 0px 0;margin:0px;order:0;inset:auto;box-sizing:border-box}
#inc03 .inc03_pin{max-width:100%;width:100%;height:100%;transform:translate(0px, 0px);translate:none;rotate:none;scale:none;inset:0px auto auto 0px;margin:0px;padding:0px}

/* tit */
#inc03 .left_tit{position: absolute;top:0;left:0;width:100%}
#inc03 .tit_area{display:block;padding-top:240px}
#inc03 .tit_area div b{color:#fff}
#inc03 .tit_area div h2{color:#fff}
#inc03 .tit_area a{display:block;width:135px;height:50px;margin-top:45px;font-size:15px;font-weight:700;line-height:50px;text-align:center;color:var(--primary);background:#fff;transition:0.2s}

/* bg */
#inc03 .bg_wrap{width:100%;height:100vh}
#inc03 .bg_wrap>div{width:100%;height:100%;position:absolute;top:0;left:0;opacity:0;background-size:cover;transition:all 0.5s}
#inc03 .bg_wrap>div.visible{opacity:1}
#inc03 .bg{background-size:cover}
#inc03 .bg01{background: url(../img/main/inc03/bg01.jpg) no-repeat 50% 50%}
#inc03 .bg02{background: url(../img/main/inc03/bg02.jpg) no-repeat 50% 50%}
#inc03 .bg03{background: url(../img/main/inc03/bg03.jpg) no-repeat 50% 50%}
#inc03 .bg04{background: url(../img/main/inc03/bg04.jpg) no-repeat 50% 50%}
#inc03 .bg05{background: url(../img/main/inc03/bg05.jpg) no-repeat 50% 50%}

/* cont */
#inc03 .right_cont{position: absolute;top:0;left:50%;transform:translateX(-20%)} 
#inc03 .right_cont .static{display: flex;justify-content: flex-end;padding-top:240px}
#inc03 .right_cont ul{display:grid;grid-template-columns:repeat(2,1fr);column-gap:40px;row-gap:50px}
#inc03 .right_cont ul li{position:relative;width:423px;height:415px;border-radius:30px;font-size:15px;font-weight:700;background:rgba(255, 255, 255, 0.3);transition:0.2s}
#inc03 .right_cont ul li a{display:block;width:100%;height:100%;;padding:140px 10px 45px 55px;color:rgba(255, 255, 255, 0.5)}
#inc03 .right_cont ul li:nth-child(2n){top:250px}
#inc03 .right_cont ul li b{position:absolute;right:60px;top:55px;font-weight:700;color:#fff;font-family:var(--main-font)}
#inc03 .right_cont ul li h3{font-size:25px;font-weight:700;color:#fff;font-family:var(--main-font)}
#inc03 .right_cont ul li span{display:block;margin-top:-3px;padding-bottom:18px;color:#fff;font-family:var(--main-font)}
#inc03 .right_cont ul li .txt{padding-bottom:30px;font-weight:400}
#inc03 .right_cont ul li .btn_wrap{display:flex;align-items:center;justify-content:center;width:49px;height:49px;border-radius:100%;color:#fff;background:rgba(255, 255, 255, 0.2)}
#inc03 .right_cont ul li .btn_wrap svg{width:20px;height:20px}
#inc03 .right_cont ul li.on{background:rgba(0,0,0,0.5)}

/* inc04 */
#inc04{max-width:var(--mainsize);margin:0 auto;padding:190px 0 200px}
#inc04 .tit_area{padding-bottom:120px}
#inc04 .tit_area div h2{padding:10px 0 15px;font-size:45px}
#inc04 .tit_area span{font-size:15px}

/* tit */
#inc04 .tit_area > div{display:flex;align-items:flex-end;justify-content:space-between}
#inc04 .tit_area > div a{display:block;width:135px;height:50px;line-height:50px;font-size:15px;font-weight:700;color:#fff;text-align:center;background:var(--primary);transition:0.2s}
#inc04 .tit_area > div a:hover{background:#297a74}

/* latest */
#inc04 .item{padding:50px 0;border-bottom:1px solid #e1e1e1;background:#fff}
#inc04 .item:last-child{padding-bottom:0;border-bottom:none}
#inc04 .item:first-child{padding-top:0}
#inc04 .item a{display:flex;align-items:flex-start}
#inc04 .item a .left{display:flex;align-items:flex-start;gap:50px;width:calc(100% - 460px)}
#inc04 .item a .left .img_wrap{overflow:hidden}
#inc04 .item:hover .img{transform:scale(1.05)}
#inc04 .item .img{width:474px;height:275px;background:center no-repeat;background-size:cover;transition:0.2s}
#inc04 .item .img.none{border-bottom:1px solid #e9e9e9;background:url(../img/common/logo_b) center no-repeat !important }
#inc04 .item .cont_tit{padding:40px 160px 0 0}
#inc04 .item .cont_tit span{font-weight:700;color:var(--primary);font-family:var(--main-font)}
#inc04 .item .cont_tit div{padding-top:10px;font-size:18px;font-weight:700;color:#222}
#inc04 .item .txt{width:460px;padding-top:40px}
#inc04 .item .txt p{padding-bottom:70px;font-size:15px;white-space:pre-line;color:rgba(34, 34, 34, 0.5);word-break:keep-all}
#inc04 .item .txt i{font-size:13px;font-weight:700;font-style:normal;color:#777;transition:0.2s;font-family:var(--main-font)}
#inc04 .item:hover .txt i{color:var(--primary)}