@charset "utf-8";

/* =========================== MAIN */
#mainVisual{overflow:hidden;position:relative;width:100%;background:#222;font-family:var(--e-font),var(--k-font)}

/* 텍스트 */
#mainVisual .main_txt{opacity:0;display:flex;flex-flow:column;position:absolute;left:100px;top:40%;z-index:101;color:#fff}
#mainVisual .main_txt p{white-space:pre-line;font-size:90px;font-weight:700;line-height:1.1;word-break:keep-all;text-transform: uppercase;}
#mainVisual .main_txt .txt{margin-top:26%;font-size:22px;line-height:1.8;word-break:keep-all;display: none;}
#mainVisual .controls{position:absolute;right:90px;bottom:60px;z-index:101}
#mainVisual .controls span{opacity:.5;cursor:pointer;color:#fff;transition:all .2s}
#mainVisual .controls span+span{margin-left:6px}
#mainVisual .controls span svg{width:40px;height:40px;stroke-width:1.5px}
#mainVisual .controls span:hover{opacity:1}

/* 배경이미지 */
#mainVisual ul:after{display:block;content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.10)}
#mainVisual ul li{height:100vh;min-height:850px;overflow:hidden}
#mainVisual ul li video{min-width:100%;min-height:100%;width:auto;height:auto}
#mainVisual ul li .bg{opacity:0;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:120%;height:120%;background-position:center !important;background-repeat:no-repeat !important;background-size:cover !important;transition:all 1.2s cubic-bezier(0.165, 0.840, 0.440, 1)}
#mainVisual ul li .bg01{background-image:url(../../images/fs/main/main_img1.jpg)}
#mainVisual ul li .bg02{background-image:url(../../images/fs/main/main_img2.jpg)}
#mainVisual ul li .bg03{background-image:url(../../images/fs/main/main_img3.jpg)}
#mainVisual ul li.on .bg{width:101%;height:101%;opacity:1}
@media (max-width:1320px){
#mainVisual .main_txt{top:28%}
#mainVisual .main_txt p{font-size:70px}
#mainVisual .main_txt .txt{margin-top:32%}
#mainVisual ul li{height:100%;min-height:650px}
}
@media (max-width:1024px){
#mainVisual .main_txt{padding:0 50px;left:0}
#mainVisual .main_txt p{font-size:55px}
#mainVisual .main_txt .txt{margin-top:25%}
#mainVisual ul li video{width:100%;height:100%;object-fit:cover}
#mainVisual .controls{right:50px}
}
@media (max-width:768px){
#mainVisual .main_txt{padding:0 20px}
#mainVisual .main_txt p{font-size:35px}
#mainVisual .main_txt .txt{margin-top:15%;font-size:16px}
#mainVisual ul li{min-height:450px}
#mainVisual .controls{right:15px;bottom:15px}
#mainVisual .controls span svg{width:32px;height:32px}
}
@media (max-width:480px){
#mainVisual .main_txt p{font-size:30px}
#mainVisual ul li{min-height:350px}
}

/* =========================== inc01 */
#inc01{display:flex;flex-flow:column;gap:100px;padding:175px 100px;max-width: 1897px;width: 100%;margin: 0 auto;}
#inc01 .item{display:flex}
#inc01 .item .cont{display:flex;flex-flow:column;width:50%;padding:65px 3%}
#inc01 .item .cont .tit{display:flex;align-items:center;margin-bottom:35px;font-size:60px;font-weight:900;line-height:1;color:#111}
#inc01 .item .cont .tit span{margin-left:15px;font-size:37px;font-weight:700;white-space:nowrap}
#inc01 .item .cont div{word-break:keep-all;line-height:1.8;font-size:19px;}
#inc01 .item .cont a{display:flex;align-items:center;justify-content:center;position:relative;width:180px;height:60px;margin-top:40px;border:1px solid #e1e1e1;font-size:16px;font-weight:600;color:#111;line-height:58px;transition:all .4s}
#inc01 .item .cont a:before{display:block;content:"";position:absolute;left:0;z-index:-1;width:0;height:100%;border-color:var(--primary);color:#fff;background:var(--primary);transition:all .6s var(--easing)}
#inc01 .item .cont a:hover{border-color:transparent;color:#fff}
#inc01 .item .cont a:hover:before{width:100%}
#inc01 .item .cont a span{margin:0 0 2px 15px}
#inc01 .item .img_box{overflow:hidden;position:relative;width:50%}
#inc01 .item .img_box:before{display:block;content:"";position:absolute;left:0;top:0;width:0;height:100%;max-height:425px;background:var(--primary);transition:all 1.2s var(--easing)}
#inc01 .item .img_box .img{opacity:0;overflow:hidden;position:relative;width:0;transition:all 1.8s var(--easing) .3s}
#inc01 .item .img_box.on:before{width:100%}
#inc01 .item .img_box.on .img{opacity:1;width:100%}
#inc01 .item.reverse .img_box{order:-1}
@media (max-width:1320px){
#inc01 .item .cont{padding:55px 5%}
#inc01 .item .cont a{margin-top:30px}
#inc01 .item .img_box.on .img{height:100%}
#inc01 .item .img_box.on .img img{width:100%;height:100%;object-fit:cover}
}
@media (max-width:1024px){
#inc01{padding:125px 50px}
#inc01 .item .cont{padding:40px 30px 40px 0}
#inc01 article:nth-child(2) .item .cont{padding:40px 0 40px 30px}
#inc01 .item .cont .tit{font-size:40px;margin-bottom:25px}
#inc01 .item .cont .tit span{font-size:22px}
}
@media (max-width:768px){
#inc01{padding:70px 20px;gap:50px}
#inc01 .item{flex-direction:column}
#inc01 .item .cont,#inc01 .item .img_box{width:100%}
#inc01 article:nth-child(2) .item .cont{align-items:flex-end;text-align:right}
#inc01 article:nth-child(2) .item .cont .tit{flex-direction:row-reverse}
#inc01 article:nth-child(2) .item .cont .tit span{margin-right:15px}
#inc01 .item.reverse .img_box{order:initial}
}
@media (max-width:480px){
#inc01{padding:40px 20px 60px;gap:30px}
#inc01 .item .cont{align-items:center;padding:30px 0}
#inc01 .item .cont div{text-align:center;font-size:17px;}
#inc01 .item .cont .tit{flex-direction:column;font-size:36px;text-align: center;gap:20px;}
#inc01 .item .cont .tit span{font-size:15px}
#inc01 .item .cont a{font-size:14px;width:140px;height:50px;margin-top:25px}
#inc01 article:nth-child(2) .item .cont{padding:30px 0;align-items:center}
#inc01 article:nth-child(2) .item .cont .tit{flex-direction:column}
}
/* =========================== inc02 */
#inc02{display:flex;height:620px;padding:0 100px;background:url(../../images/fs/main/inc02/bg.jpg) no-repeat fixed;background-size:cover}
#inc02 .cont{margin:auto 0;color:#fff}
#inc02 .cont > span{font-size:16px;font-weight:600}
#inc02 .cont p{margin:40px 0 50px;font-size:42px;font-weight:700;line-height:1.35;white-space:pre-line}
#inc02 .cont a{display:flex;align-items:center;justify-content:center;position:relative;width:180px;height:60px;margin-top:auto;border:1px solid rgba(255,255,255,.2);font-size:16px;font-weight:600;color:#fff;line-height:58px;transition:all .4s}
#inc02 .cont a:before{display:block;content:"";position:absolute;left:0;width:0;height:100%;border-color:var(--primary);color:#fff;background:#fff;transition:all .6s var(--easing)}
#inc02 .cont a i{position:relative;font-style:normal}
#inc02 .cont a:hover{border-color:transparent;color:var(--primary)}
#inc02 .cont a:hover:before{width:100%}
#inc02 .cont a span{position:relative;margin:0 0 2px 15px}
@media (max-width:1024px){
#inc02{height:520px;padding:0 50px}
#inc02 .cont p{font-size:32px}
}
@media (max-width:768px){
#inc02{height:420px;padding:0 20px}
#inc02 .cont p{font-size:25px}
#inc02 .cont a{width:140px;height:50px}
}
@media (max-width:480px){
#inc02{height:350px;justify-content:center;text-align:center}
#inc02 .cont p{font-size:20px;word-break:keep-all}
#inc02 .cont a{margin:0 auto;font-size:14px}
}

/* =========================== inc03 */
#inc03{position:relative;padding:160px 100px;background:#ebf1f3}
#inc03 .tit{position:relative;margin-bottom:20px;font-size:42px;font-weight:900;line-height:1;color:#111;text-align:center}
#inc03 .tit:before{display:block;content:"";width:80px;height:5px;margin:0 auto 30px;background:var(--primary)}
#inc03 .tit2 {text-align: center;font-size:2.5rem;color:#0385b0;}
#inc03 .inc03_slide{margin:0 10%}
#inc03 .item{border:1px solid #e1e1e1;background:#fff}
#inc03 .item a{display:block}
#inc03 .item .img{height:300px;background:center no-repeat;background-size:cover}
#inc03 .item .img.none{border-bottom:1px solid #e9e9e9;background:url(../../images/fs/layout/logo_m.png) center no-repeat !important }
#inc03 .item .txt{padding:50px 35px;min-height: 287px;display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-end;}
#inc03 .item .txt span{padding:5px 15px;font-size:15px;color:#777;background:#f2f2f2;border-radius: 50px;}
#inc03 .item .txt p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:20px 0 10px;font-size:20px;font-weight:700;color:#111}
#inc03 .item .txt div{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:15px;color:#777;line-height:1.6}
#inc03 .item .txt i{margin-top:25px;font-size:14px;color:#aaa;font-style:normal}
#inc03 .arr{cursor:pointer;opacity:.3;position:absolute;top:50%;z-index:101;color:#111;transition:all .2s}
#inc03 .arr:hover{opacity:1}
#inc03 .arr.prev{left:8%}
#inc03 .arr.next{right:8%}
#inc03 .arr svg{width:60px;height:60px;stroke-width:1px}
@media(max-width:1600px){
#inc03 .inc03_slide{margin:0}    
#inc03 .arr.prev{left:20px}
#inc03 .arr.next{right:20px}
}
@media (max-width:1024px){
#inc03{padding:100px 50px}
#inc03 .tit{font-size:32px}
#inc03 .item .img{height:230px}
#inc03 .item .txt{padding:40px 20px;min-height: 263px;}
#inc03 .item .txt div{word-break:keep-all}
#inc03 .arr.prev{left:5px}
#inc03 .arr.next{right:5px}
#inc03 .arr svg{width:40px;height:40px}
}
@media (max-width:768px){
#inc03{padding:60px 0}
#inc03 .tit{font-size:22px;margin-bottom:30px}
#inc03 .item .img{height:180px}
#inc03 .item .txt{padding:30px 20px;min-height: 236px;}
#inc03 .item .txt p{font-size:16px}
#inc03 .arr{display:none}
}