@import url('/css/popup.css');

/* visual */
.visual{position:relative; width:100%; height:100vh;}
.visualSlide:before{content:''; display:block; position:absolute; left:0; top:0; transform-origin:center; width:100%; height:100%;}
.visualSlide.swiper-slide-active:before{animation:visualBg 3s both;}
.visualSlide.slide1:before{background:url(../images/main/mainVisual1.webp)no-repeat center/cover;}
.visualSlide.slide2:before{background:url(../images/main/mainVisual2.webp)no-repeat center/cover;}
.visualSlide.slide3:before{background:url(../images/main/mainVisual3.webp)no-repeat center/cover;}
.visual_inr{display:flex; flex-direction:column; justify-content:center; margin:0 auto; height:100%;}
.visual_inr h2{margin-top:-100rem; font-size:80rem; color:#fff; font-weight:800; opacity:0; font-family:var(--font-mont); line-height:1.2; text-transform:uppercase;}
.visual_inr h2 em{font-weight:300;}
.visual_inr p{margin-top:30rem; color:#fff; font-size:18rem; opacity:0;}
.visual_inr p > br{display:none;}
.visualSlide.swiper-slide-active .visual_inr h2,
.visualSlide.swiper-slide-active .visual_inr p{animation:visualTxt 1.5s both;}
.visualCtrl{display:flex; justify-content:flex-end; position:absolute; bottom:80rem; left:50%; transform:translateX(-50%); z-index:1; width:calc(var(--inr-wide) * 1rem);}
.visualCtrl_pager{position:relative; bottom:auto; font-size:0; text-align:end;}
.visualCtrl_pager span{display:inline-block; margin:0 0 0 15rem; width:10rem; height:10rem; background:#fff; opacity:0.5; border-radius:5rem; transition:0.2s;}
.visualCtrl_pager .swiper-pagination-bullet-active{opacity:1; width:50rem;}
@keyframes pager_bar{
	0%{width:0%;}
	100%{width:100%;}
}
@keyframes visualBg{
    0%{transform:scale(1.1);}
    100%{transform:scale(1);}
}
@keyframes visualTxt{
    0%{transform:translateY(40rem); opacity:0;}
    100%{transform:translateY(0); opacity:1;}
}
@media(max-width:1279px){
    .visualCtrl{width:92%;} 
    .visual_inr h2{font-size:70rem;}
}
@media(max-width:767px){
    .visual_inr h2{font-size:40rem;}
    .visual_inr p > br{display:block;}
}


/* 메인 공통 */
main section{position:relative; padding:200rem 0; overflow:hidden;}
.mainTit{}
.mainTit h2{font-size:90rem; color:var(--primary); line-height:1.1; font-family:var(--font-mont); font-weight:800;}
.mainTit.st1 h2{font-size:var(--fs60);}
.mainTit p{margin-top:15rem; font-size:18rem; color:#222;}
@media(max-width:1279px){
    main section{padding:120rem 0;}
    .mainTit h2{font-size:60rem;}   
}
@media(max-width:767px){
    main section{padding:80rem 0;}
    .mainTit h2{font-size:40rem;}
    .mainTit.st1 h2{font-size:40rem;}
}


/* 회사소개 */
.companyInr{display:flex; justify-content:space-between;}
.companyTit{margin-left:100rem;}
.companyTit p > br{display:none;}
.companyImg1{position:relative;}
.companyImg1_span{display:block; width:740rem;}
.companyImg1_span img{display:block; width:100%;}
.companyImg1_btn{display:flex; justify-content:center; align-items:center; position:absolute; left:-145rem; bottom:-145rem; width:250rem; height:250rem; border-radius:50%; background:rgba(10,34,139,0.8); transition:0.3s;}
.companyImg1_btn:before{content:''; display:block; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:290rem; height:290rem; border-radius:50%; background:url(../images/main/aboutBtn.png)no-repeat center/contain; animation:rotateBtn 12s linear infinite;}
.companyImg1_btn img{display:block; width:40rem; height:40rem;}
.companyImg2{display:block; margin-top:-135rem; width:800rem;}
.companyImg2 img{display:block; width:100%; height:100%; object-fit:cover;}
@keyframes rotateBtn{
    0%{transform:translate(-50%,-50%) rotate(0);}
    100%{transform:translate(-50%,-50%) rotate(360deg);}
}
@media(hover:hover){
    .companyImg1_btn:hover{background:rgba(10,34,139,1);}
}
@media(max-width:1800px){
    .companyTit{margin-left:0; padding-left:4%;}
    .companyImg1{width:45%;}
    .companyImg1_span{width:100%;}
    .companyImg2{width:40%; height:300rem;}
}
@media(max-width:1279px){
    .companyTit{padding:0 4%;}
    .companyTit p > br{display:block;}
    .companyImg1{margin-left:auto; width:45%;}
    .companyImg1_span{height:300rem;}
    .companyImg1_btn{left:-120rem; bottom:-113rem; width:200rem; height:200rem;}
    .companyImg1_btn:before{width:230rem; height:230rem;}
    .companyImg2{margin-top:-50rem; width:37%; height:250rem;}
}
@media(max-width:767px){
    .companyInr{display:block;}
    .companyImg1{margin-top:40rem; width:80%;}
    .companyImg1_btn{left:-70rem; bottom:-18rem; width:110rem; height:110rem;}
    .companyImg1_btn:before{width:130rem; height:130rem;}
    .companyImg1_btn img{width:28rem; height:28rem;}
    .companyImg2{margin-top:65rem; width:85%; height:200rem;}
    
}


/* 비전 */
.vision{background:url(../images/main/visionBg.webp)no-repeat center/cover;}
.visionTit{text-align:center;}
.visionTit h2{color:#fff}
.visionTit p{color:#fff; opacity:0.9;}
.visionUl{display:flex; justify-content:center; margin:80rem 0; color:#fff; text-align:center;}
.visionUl_li{width:420rem;}
.visionUl_li span{display:flex; justify-content:center; align-items:center; margin:auto; width:200rem; height:200rem; border-radius:50%; border:1px solid rgba(255,255,255,0.5);}
.visionUl_li img{display:block; height:80rem;}
.visionUl_li__txt{}
.visionUl_li__h3{margin:30rem 0 22rem; font-size:var(--fs28); font-weight:600; line-height:1;}
.visionUl_li__p{font-size:16rem; opacity:0.8;}
.visionBtn{display:block; margin:auto; height:70rem; width:220rem; text-align:center; font-family:var(--font-mont); line-height:70rem; font-size:18rem; letter-spacing:3rem; color:#fff; border:1px solid #fff; transition:0.3s;}
@media(hover:hover){
    .visionBtn:hover{background:#fff; color:var(--primary); font-weight:600;}
}
@media(max-width:1279px){
    .visionUl{margin:60rem 0;}
    .visionUl_li{width:calc(100% / 3);}
    .visionBtn{height:60rem; line-height:60rem;}
}
@media(max-width:767px){
    .visionUl{display:block;}
    .visionUl_li{display:flex; justify-content:center; align-items:center; width:100%;}
    .visionUl_li+.visionUl_li{margin-top:30rem;}
    .visionUl_li span{margin:0; width:110rem; height:110rem;}
    .visionUl_li img{height:50rem;}
    .visionUl_li__txt{padding-left:20rem; width:calc(100% - 155rem); text-align:left;}
    .visionUl_li__h3{margin:0 0 15rem;}
}


/* 사업 */
.biz{background:url(../images/main/bizBg.webp)no-repeat bottom/cover;}
.bizInr{display:flex; flex-wrap:wrap; position:relative; margin-left:auto; width:calc(800rem + 50%);}
.bizTit{padding-top:100rem; padding-right:50rem; width:800rem;}
.bizBox_thumb,
.bizBox_thumb img{display:block; width:100%; }
.bizBox_txt{position:relative;}
.bizBox_txt em{display:block; margin:40rem 0 25rem; line-height:1; font-size:var(--fs28); font-family:var(--font-mont); font-weight:bold;}
.bizBox_txt p{font-size:16rem; color:#666;}
.bizBox_txt a{display:flex; align-items:center; position:absolute; padding-bottom:4rem; right:0; top:4rem; font-size:16rem; line-height:1; color:#aaa; font-weight:500; border-bottom:1px solid #aaa; font-family:var(--font-mont); transition:0.3s;}
.bizBox_txt a svg{display:block; margin-left:10rem; width:12rem;}
.bizBox_txt a svg .cls-1{fill:#aaa; transition:0.3s;}
.bizBox1{padding-left:50rem; width:calc(100% - 800rem);}
.bizBox2{margin-top:-230rem; padding-right:50rem; width:800rem;}
.bizBox3{margin-top:100rem; padding-left:50rem; width:580rem;}
.bizBox1_txt{width:750rem;}
@media(hover:hover){
    .bizBox_txt a:hover{color:var(--primary); border-color:var(--primary);}
    .bizBox_txt a:hover svg .cls-1{fill:var(--primary);}
}
@media(max-width:1800px){
    .bizInr{padding-left:4%; width:100%;}
    .bizTit{width:45%;}
    .bizBox1{width:55%;}
    .bizBox1_txt{width:90%;}
    .bizBox2{margin-top:-40rem; width:45%;}
    .bizBox3{width:40%;}
}
@media(max-width:1279px){
    .bizTit{padding-top:50rem; padding-right:0;}
    .bizTit p > br{display:none;}
    .bizBox_txt em{margin:25rem 0 20rem;}
    .bizBox_txt a{top:0;}
    .bizBox2{margin-top:-70rem; padding-right:0;}
    .bizBox2 span{height:400rem;}
    .bizBox2 span img{height:100%; object-fit:cover;}
    .bizBox3{margin-top:50rem;}
}
@media(max-width:767px){
    .bizInr{display:block; padding-left:0;}
    .bizTit{padding:0 4%; width:100%;}
    .bizBox_txt em{margin:20rem 0 15rem;}
    .bizBox_txt a{padding:3rem 0; border-bottom:0;}
    .bizBox_txt p > br{display:none;}
    .bizBox1{margin-top:40rem; padding-left:15%; width:100%;}
    .bizBox2{margin-top:40rem; padding:0 15% 0 4%; width:100%;}
    .bizBox2 span{height:auto;}
    .bizBox3{margin-top:40rem; padding:0 15%; width:100%; }
}


/* 공지&뉴스 */
main .board{background:#f8f8f8;}
.boardTit{text-align:center;}
.boardSwiper{margin-top:60rem; overflow:visible;}
.boardSwiper_slide a{display:block; padding:50rem 40rem; background:#fff; border:1px solid #ddd; transition:0.3s ease;}
.boardSwiper__division{display:block; text-transform: uppercase; font-size:16rem; font-family:var(--font-mont); font-weight:bold; line-height:1;}
.notice.boardSwiper__division{color:var(--primary);}
.news.boardSwiper__division{color:#17a199;}
.boardSwiper__title{display:block; margin:30rem 0 20rem; font-size:var(--fs22); color:#111; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.boardSwiper__cont{font-size:16rem; color:#666; overflow:hidden; text-overflow:ellipsis; text-align:left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; height:46rem;}
.boardSwiper__date{display:block; margin-top:40rem; font-size:14rem; color:#aaa; line-height:1; font-style:normal;}
.boardSwiper_bar{position:relative; margin-top:60rem; left:auto; right:auto; bottom:auto; top:auto; width:100%; background:#d3d3d3;}
.boardSwiper_bar .swiper-scrollbar-drag{background:#000;}
@media(hover:hover){
    .boardSwiper_slide a:hover{border-color:#000;}
}
@media(max-width:1279px){
    .boardSwiper{margin-top:40rem;}
    .boardSwiper_slide a{padding:40rem 30rem;}
    .boardSwiper__title{margin:20rem 0 15rem; font-size:var(--fs20);}
    .boardSwiper__date{margin-top:30rem;}
    .boardSwiper_bar{margin-top:30rem;}
}
@media(max-width:767px){
    .boardSwiper_slide a{padding:30rem 20rem;}
    .boardSwiper__title{margin:15rem 0 10rem}
}


/* 바로가기 */
.quick{display:flex; padding:0 !important;}
.quickBox{display:flex; justify-content:space-between; padding:100rem 80rem; width:50%; background:linear-gradient(315deg, #0a228b, #2460ce);}
.quickBox1{border-right:1px solid rgba(255,255,255,0.3);}
.quickBox_tit{text-align:left;}
.quickBox_tit h2{color:#fff; font-size:var(--fs60); font-weight:700;}
.quickBox_tit p{color:#fff; opacity:0.9;}
.quickBox_btn{display:flex; align-items:center; justify-content:center; margin-top:80rem; width:150rem; height:150rem; border-radius:50%; border:1px solid rgba(255,255,255,0.5); transition:0.3s ease;}
.quickBox_btn img{display:block; width:40rem;}
@media(min-width:1280px){
    @media(hover:hover){
        .quickBox_btn:hover{background:rgba(255,255,255,0.2); border-color:rgba(255,255,255,0.2);}
    }
}
@media(max-width:1279px){
    .quickBox{padding:50rem 40rem;}
    .quickBox_btn{margin-top:0; width:auto; height:auto; border:none;}
    .quickBox_tit h2{font-size:var(--fs40);}
}
@media(max-width:767px){
    .quick{display:block;}
    .quickBox{align-items:flex-start; padding:40rem 20rem; width:100%;}
    .quickBox1{border-bottom:1px solid rgba(255,255,255,0.3); border-right:none;}
    .quickBox_tit h2{font-size:30rem;}
    .quickBox_btn{margin-top:5rem;}
    .quickBox_btn img{width:25rem;}
}