@charset "utf-8";
/*
    * JSH Style Sheets
    * File Name : default.css
    * Description : 메인 페이지 스타일시트
    * Author : Web Design Team / Jeong Sang Hoon
    * Date : 2022.011.16
    * Update : 2022.11.16
    * Copyright(c) 2022 YOUR WEB Communications. All Rights Reserved.
*/
header{position: fixed; width:100%; height:100px; padding:0 60px; z-index: 10000; transition: all .3s ease; display: block; background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 100%);}
header:hover{background:#fff;}
    footer{display: none !important;}
    .grid{max-width:1600px; width:100%; margin:0 auto;}
    @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
    .en{font-family: 'Montserrat', sans-serif;}
    .b_type1{padding:15px 20px; display: inline-flex; align-items: center; line-height: 1; border:1px solid #000; font-weight: 500; overflow: hidden; position: relative; z-index: 1;}
    .b_type1::before{position: absolute; left:50%; top:50%; transform: translate(-50%,-50%) scale(0); content:''; width:200px; height:200px; background:#fff; border-radius: 50%; z-index: -1; transition: all .5s ease; display: block; filter: blur(10px); opacity: .75;}
    .b_type1:hover::before{transform: translate(-50%,-50%) scale(1);}

    .quick_box{position: fixed; right:0; top:50%; transform: translate(10px,-50%); content:''; z-index: 5000;display: flex; flex-direction: column; align-items: flex-end;}
    .quick_box a{display: flex; flex-direction: column; padding:20px; border-radius: 10px 0 0 10px; box-shadow: -5px 5px 20px rgba(0, 0, 0, .25); transition: all .3s ease;}
    .quick_box a:hover{padding:20px 40px 20px 20px;}
    .quick_box a:nth-child(1){background:#000; color:#fff;}
    .quick_box a:nth-child(2){background:#fff; color:#000;}
    .quick_box a span{display: flex; flex-direction: column;}
    .quick_box a i{margin-bottom:10px;}
    @media(max-width:1440px){
        .quick_box a{font-size:12px; padding:15px;}
        .quick_box a:hover{padding:15px 20px 15px 15px;}
    }

    .swiper-button-next, .swiper-button-prev{position: relative; left:auto; right:auto; top:auto; bottom:auto; margin:0; padding:0; border:0; width:auto; height:auto;}
    .swiper-button-next::after, .swiper-button-prev::after{display: none;}
    @media (max-width:1400px) {
        .fp-tableCell{display: flex !important; height:auto !important;}
        .fp-section.fp-table, .fp-slide.fp-table{display: flex; height:auto !important;}
    }

    .sec1 .swiper{height:100%; width:100%;}
    .sec1 .swiper-slide {height:100%; position: relative;}
    .sec1 .swiper-slide::before{position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); content:''; width:100%; height:100%; z-index: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%); opacity: .75;}
    .sec1 .swiper-slide.slide1{background:url(/images/main/main_sec1_bg1.jpg) no-repeat center / cover;}
    .sec1 .swiper-slide.slide2{background:url(/images/main/main_sec1_bg2.jpg) no-repeat center / cover;}
    .sec1 .swiper-slide.slide3{background:url(/images/main/main_sec1_bg3.jpg) no-repeat center / cover;}
    .sec1 .swiper-slide .container{ height:100%; display: flex; align-items: center; padding: 0 60px; position: relative;}
    .sec1 .swiper-slide .txt_group{color:#fff; margin-bottom:60px;}
    .sec1 .swiper-slide .txt_group span{font-size:30px; margin-bottom:50px; position: relative; margin-left:-60px; opacity: 0; transition: all .7s ease;}
    .sec1 .swiper-slide .txt_group span i{position: absolute; left:100%; top:50%; transform: translate(30px,-50%); width:100px; height:1px; background:rgba(255, 255, 255, .5); overflow: hidden;}
    .sec1 .swiper-slide .txt_group span i::before{position: absolute; left:0; top:50%; transform: translate(-100%,-50%); content:''; width:100%; height:100%; animation: txt_line 3s linear infinite forwards; background:#fff;}
    @keyframes txt_line { from{transform: translate(-100%,-50%);} to{transform: translate(100%,-50%);} }
    .sec1 .swiper-slide .txt_group h1{font-size:75px; font-weight: 900; margin-bottom:30px; margin-left:-60px; opacity: 0; transition: all .7s ease; text-shadow: 0 5px 15px rgba(0, 0, 0, .5);}
    .sec1 .swiper-slide .txt_group p{font-size:24px; margin-left:-60px; opacity: 0; transition: all .7s ease;}
    .sec1 .swiper-slide-active .txt_group span{margin-left:5px; transition-delay: .5s; opacity: 1;}
    .sec1 .swiper-slide-active .txt_group h1{margin-left:0; transition-delay: .6s; opacity: 1;}
    .sec1 .swiper-slide-active .txt_group p{margin-left:0; transition-delay: .7s; opacity: .75;}
    .sec1 .next_group{position: absolute; left:50%; bottom:60px; transform: translateX(-50%); max-width:1600px; width:100%; height:0; z-index: 100; padding:0 60px;}
    .sec1 .next_group > div{display: flex; transform: translateY(-100%); font-size:24px; font-weight: 700;}
    .sec1 .next_group > div div{margin-right:40px;}
    .sec1 .next_group > div div:last-child{margin:0;}
    .sec1 .next_group .prev{opacity: .5; transition: all .3s ease;}
    .sec1 .next_group .prev:hover{opacity: 1;}
    .sec1 .next_group .prev, .sec1 .next_group .next{color:#fff;}
    .sec1 .next_group .prev::after, .sec1 .next_group .next::after{content:'';}
    .sec1 .swiper-slide .paging_group{position: absolute; width:40%; display: flex; right:60px; bottom:60px;}
    .sec1 .swiper-slide .paging_group .item{display: flex; flex-direction: column; width:33.3333%; margin-right:20px; opacity: .75;}
    .sec1 .swiper-slide .paging_group .item.on{opacity: 1;}
    .sec1 .swiper-slide .paging_group .item:last-child{margin:0;}
    .sec1 .swiper-slide .paging_group .item span{font-size:18px; font-weight: 800; margin-bottom:5px; color:transparent; -webkit-text-stroke-width: .5px; -webkit-text-stroke-color: #fff;}
    .sec1 .swiper-slide .paging_group .item i{width:100%; height:6px; border:1px solid #fff; position: relative; overflow: hidden;}
    .sec1 .swiper-slide-active .paging_group .item.on i::before{position: absolute; left:0; top:50%; transform: translate(0,-50%); content:''; width:0; height:100%; background:#fff; animation: paging_line 4600ms linear forwards;}
    @keyframes paging_line { from{width:0;} to{width:100%;} }
    .sec1 .swiper-slide .paging_group .item.on span{color:#fff; -webkit-text-stroke-width: 0;}
    @media(max-width:1400px){
        .sec1 .swiper-slide {height:100vh;}
        .sec1 .swiper-slide .txt_group p,.sec1 .swiper-slide .txt_group span{font-size:20px;}
        .sec1 .swiper-slide .txt_group h1{font-size:65px; margin-bottom:10px;}
        
    }
    
    @media(max-width:1024px){
        .sec1 .swiper-slide {height:80vh;}
        .sec1 .swiper-slide .txt_group h1{font-size:55px;}
        .sec1 .swiper-slide .container{padding:0 40px;}

    }
    
    @media(max-width:768px){
        .sec1 .swiper-slide .txt_group h1{font-size:40px;}
        .sec1 .next_group{transform: translateX(0); left:-20px;}

    }
    
    @media (max-width:530px) {
        .sec1 .swiper-slide .paging_group{display: none;}
    }

    @media(max-width:425px){
        .sec1 .swiper-slide .txt_group p,.sec1 .swiper-slide .txt_group span{font-size:16px;}
        .sec1 .swiper-slide .txt_group h1{font-size:35px;}
        .sec1 .swiper-slide .txt_group h1{font-size:33px;}
        .sec1 .swiper-slide .container{padding:0 20px;}
    }


    
    .sec2 .container_group{width:100%; height:100vh; display: flex;}
    .sec2 .content_tab{width:100%; height:100%; transition: all .3s ease; position: relative;}
    .sec2 .container_left{width:50%; height:100%; position: relative; background:#333;}
    .sec2 .container_left .tab_menu{position: absolute; right:60px; top:110px; z-index: 10;}
    .sec2 .container_left .tab_menu li{margin-bottom:30px; display: flex; justify-content: flex-end;}
    .sec2 .container_left .tab_menu li:last-child{margin:0;}
    .sec2 .container_left .tab_menu li a{color:#fff; text-align: right; font-size:24px; font-weight: 500; opacity: .5; transform: translateX(24px); transition: all .3s ease;}
    .sec2 .container_left .tab_menu li a span{position: relative; transition: all .3s ease; z-index: 1;}
    .sec2 .container_left .tab_menu li a.on span::before{position: absolute; left:50%; bottom:0; transform: translate(-50%,0); content:''; width:calc(100% + 5px); height:15px; background:#09f; z-index: -1;}
    .sec2 .container_left .tab_menu li a i{opacity: 0; transition: all .3s ease;}
    .sec2 .container_left .tab_menu li a.on{transform: translateX(0);}
    .sec2 .container_left .tab_menu li a.on{opacity: 1;}
    .sec2 .container_left .tab_menu li a.on i{opacity: 1;}
    .sec2 .js-content{width:100%; height:100%; padding:160px 60px 80px 160px; transition: all .3s ease; display: flex; align-items: flex-end; position: absolute; opacity: 0;}
    .sec2 .js-content.on{opacity: 1;}
    .sec2 .js-content .txt_group h2{font-size:38px; font-weight: 700; margin-bottom:40px; color:#fff; }
    .sec2 .js-content .txt_group{position: relative; z-index: 1;}
    .sec2 .js-content .txt_group h2 span{position: relative;}
    .sec2 .js-content .txt_group h2 span::after{position: absolute; left:100%; top:50%; transform: translate(30px,-50%); content:''; width:120px; height:1px; background:#fff;}
    .sec2 .js-content .txt_group p{font-size:18px; font-weight: 500; margin-bottom:40px; color:#fff; opacity: .75; word-break: keep-all; line-height: 1.6; max-width:100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
    .sec2 .js-content#tab1{background:url(/images/main/main_sample1.png) no-repeat center / cover;}
    .sec2 .js-content#tab2{background:url(/images/main/main_sample1.png) no-repeat center / cover;}
    .sec2 .js-content#tab3{background:url(/images/main/main_sample1.png) no-repeat center / cover;}
    .sec2 .js-content#tab4{background:url(/images/main/main_sample1.png) no-repeat center / cover;}
    .sec2 .container_left .b_type1{border:1px solid #fff; color:#fff;}
    .sec2 .container_left .b_type1:hover{color:#000; border-color:transparent;}
    .sec2 .container_right{display: flex; flex-direction: column; width:50%;}
    .sec2 .container_right > div{width:100%; height:50%; flex-grow: 1;}
    .sec2 .container_right .container_grouop{display: flex;}
    .sec2 .content_group{display: flex;}
    .sec2 .content_information{width:50%; height:100%; padding:100px 60px; background:#f2f2f2; display: flex; flex-direction: column;}
    .sec2 .content_information h2{margin-bottom:40px; font-size:30px; font-weight: 700;}
    .sec2 .content_information ul{display: flex; flex-direction: column; width:100%;}
    .sec2 .content_information ul li{width:100%; position: relative;}
    .sec2 .content_information ul li::before{position: absolute; content:''; left:0; bottom:0; width:100%; height:1px; background:#ddd;}
    .sec2 .content_information ul li::after{position: absolute; content:''; left:0; bottom:0; width:0; height:1px; background:#000; transition: all .3s ease;}
    .sec2 .content_information ul li:hover::after{width:100%;}
    .sec2 .content_information ul li a{display: flex; align-items: center; width:100%; justify-content: space-between; font-size:20px; padding:15px 0; font-weight: 700; color:#999;}
    .sec2 .content_information ul li:hover a{color:#000;}
    .sec2 .content_information ul li a i{font-size:24px;}
    .sec2 .content_contact{width:50%; height:100%; padding:100px 60px; background:#111; display: flex; flex-direction: column;}
    .sec2 .content_contact h2{margin-bottom:40px; font-size:30px; font-weight: 700; color:#fff;}
    .sec2 .content_contact ul{display: flex; flex-direction: column;}
    .sec2 .content_contact ul li{display: flex; margin-bottom:10px; font-size:16px; color:#fff; opacity: .5;}
    .sec2 .content_contact ul li .desc1{width:40px; margin-right:5px;}
    .sec2 .content_contact ul li .desc2{width:calc(100% - 45px);}
    .sec2 .content_contact ul li.tal{display: flex; flex-direction: column; padding-top:0; margin-bottom:40px; color:#fff; opacity: 1;}
    .sec2 .content_contact ul li.tal .desc1{margin-bottom:10px; width:auto;}
    .sec2 .content_contact ul li.tal .desc2{font-size:30px; font-weight: 900; width:auto;}
    .sec2 .content_gallery{position: relative; z-index: 1;}
    .sec2 .content_gallery .title_group{position: absolute; width:100%; padding:40px 60px; display: flex; justify-content: space-between; z-index: 10;}
    .sec2 .content_gallery .title_group h2{font-size:32px; font-weight: 700; color:#fff;}
    .sec2 .content_gallery .title_group .b_type1{border:0; color:#fff;}
    .sec2 .content_gallery .title_group .b_type1:hover::before{display: none;}
    .sec2 .content_gallery .gallery {width:100%; height:100%;}
    .sec2 .content_gallery .gallery .swiper-slide{width:100%; height:100%; position: relative; z-index: 1;}
    .sec2 .content_gallery .gallery .swiper-slide .img_box{width:100%; height:100%; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; z-index: 1;}
    .sec2 .content_gallery .gallery .swiper-slide .img_box::before{position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); content:''; width:100%; height:100%; background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,1) 100%); z-index: 0; opacity: .5;}
    .sec2 .content_gallery .gallery .swiper-slide .img_box::after{position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); content:''; width:100%; height:100%; background:linear-gradient(0deg, rgba(0,0,0,0) 40%, rgba(0,0,0,1) 100%); z-index: 0; opacity: .5;}
    .sec2 .content_gallery .gallery .swiper-slide .img_box img{width:100%;}
    .sec2 .content_gallery .gallery .swiper-slide .text_box{position: absolute; width:100%; padding: 40px 60px; z-index: 10; left:0; bottom:0; display: flex; flex-direction: column; color:#fff;}
    .sec2 .content_gallery .gallery .swiper-slide .text_box .tag span{position: relative; z-index: 1;}
    .sec2 .content_gallery .gallery .swiper-slide .text_box .tag span::before{position: absolute; left:50%; bottom:0; transform: translate(-50%,0); content:''; width:calc(100% + 10px); height:10px; background:#f09; z-index: -1;}
    .sec2 .content_gallery .gallery .swiper-slide .text_box p{width:100%; max-width:100%; overflow: hidden; white-space:nowrap; text-overflow: ellipsis; font-size:24px; font-weight: 700;}
    .sec2 .content_gallery .gallery .next_group{position: absolute; z-index: 10; padding:40px 60px; right:0; bottom:0; display: flex; font-size:40px; align-items: center;}
    .sec2 .content_gallery .gallery .next_group i{color:#fff;}
    .sec2 .content_gallery .gallery .next_group div{transition: all .3s ease;}
    .sec2 .content_gallery .gallery .next_group .prev{margin-right:20px;}
    .sec2 .content_gallery .gallery .next_group .prev:hover{transform: translateX(-5px);}
    .sec2 .content_gallery .gallery .next_group .prev i{transform: translateY(2px);}
    .sec2 .content_gallery .gallery .next_group .next:hover{transform: translateX(5px);}
    @media(max-width:1400px){
        .sec2 .container_group{flex-direction: column; height:auto;}
        .sec2 .container_left, .sec2 .container_right{width:100%; height:auto;}
        .sec2 .js-content{padding:0;}
        .sec2 .content_tab{height:550px;}
        .sec2 .js-content .txt_group{max-width:1440px; width:70%; padding:100px 60px;}
        .sec2 .content_contact{height:auto;}
        .sec2 .content_gallery{height:300px !important;}
        .sec2 .content_information,.sec2 .content_contact{padding:80px 60px;}
        .sec2 .container_left .tab_menu{top:60px;}
        .sec2 .container_left .tab_menu li{margin-bottom:20px;}
        .sec2 .container_left .tab_menu li a{font-size:20px;}
        .sec2 .js-content .txt_group h2{margin-bottom:20px;}
        .sec2 .js-content .txt_group h2{font-size:30px;}
        
    }
    
    @media(max-width:1024px){
        .sec2 .content_information h2,.sec2 .content_contact h2{font-size:24px;}
        .sec2 .content_information ul li a{font-size:16px; padding:15px 0;}
        .sec2 .content_contact ul li.tal .desc2{font-size:30px;}
        .sec2 .js-content .txt_group{width:100%; padding:60px 40px;}
        
    }
    
    @media(max-width:768px){
        .sec2 .content_group{flex-direction: column;}
        .sec2 .content_information{width:100%;}
        .sec2 .content_contact{width:100%;}
        .sec2 .container_right > div{height:auto;}
        .sec2 .content_information, .sec2 .content_contact{padding:60px 40px;}
        .sec2 .content_information ul li a{font-size:14px;}
        .sec2 .content_information h2{margin-bottom:20px;}
        .sec2 .js-content .txt_group{width:100%; padding:60px 40px;}
        .sec2 .js-content .txt_group p{font-size:14px;}
        .sec2 .container_left .tab_menu li a{font-size:16px;}

    }
    
    @media(max-width:425px){
        .sec2 .container_left .tab_menu{top:40px; right:40px;}
        .sec2 .js-content .txt_group{padding:60px 20px;}
        .sec2 .content_information, .sec2 .content_contact{padding:60px 20px;}
        .sec2 .js-content .txt_group h2 span::after{display: none;}
        .sec2 .container_left .tab_menu li a{font-size:14px;}
    }


    .sec3{display: flex; align-items: center; justify-content: center; background:#f2f2f2; position: relative; z-index: 1; overflow: hidden;}
    .sec3 .bg1{position: absolute; right:0; bottom:0; content:''; width:728px; height:728px; z-index: -1; transform: translate(30%,30%);}
    .sec3 .bg2{position: absolute; left:0; top:0; content:''; width:728px; height:728px; z-index: -1; transform: translate(-30%,-30%) scale(.5); filter: blur(5px);}
    .sec3 .bg1 i{width:100%; height:100%; display: flex; animation: spin 50s linear infinite forwards;animation-delay: .8s;}
    .sec3 .bg2 i{width:100%; height:100%; display: flex; animation: spin 60s linear infinite forwards;}
    @keyframes spin { from{transform: rotate(0);} to{transform: rotate(360deg);} }
    .sec3 .container_wrap{width:100%; height:100%; display: flex; align-items: center; overflow: hidden;}
    .sec3 .container_group{display: flex; max-width:1600px; width:100%; margin:0 auto; padding: 0 60px;}
    .sec3 .container_group > div{margin-right:60px; padding:60px; background:#fff; box-shadow: 0 15px 30px rgba(0, 0, 0, .15); width:50%;}
    .sec3 .container_group > div:last-child{margin:0;}
    .sec3 .title_group{display: flex; justify-content: space-between; margin-bottom:30px;}
    .sec3 .title_group h2{font-size:32px; font-weight: 700;}
    .sec3 .title_group .b_type1{border:0; padding:0;}
    .sec3 .content_notice ul li{border-bottom:1px solid #ddd;}
    .sec3 .content_notice ul li a{display: flex; padding:20px 0; font-size:16px;}
    .sec3 .content_notice ul li a .desc1{width:calc(100% - 85px); font-weight: 600; color:#333; max-width:100%; overflow: hidden; white-space:nowrap; text-overflow: ellipsis;}
    .sec3 .content_notice ul li a .desc2{width:80px; margin-left:5px; opacity: .5;}
    .sec3 .content_gallery{display: flex; flex-direction: column; justify-content: space-between;}
    .sec3 .sec3_Swiper{width:100%;}
    .sec3 .content_gallery .img_box{width:100%; display: flex; align-items: center; justify-content: center; overflow: hidden;}
    .sec3 .content_gallery .img_box img{width:100%;}
    @media(max-width:1400px){
        .sec3 .container_group{padding:100px 60px;}
        .sec3 .container_group > div{padding:30px;}
        .footer > div{flex-direction: column;}
    }
    
    @media(max-width:1024px){
        .sec3 .title_group h2{font-size:26px;}
        .sec3 .title_group{margin-bottom:10px;}
        .sec3 .container_group{padding:80px 60px;}
        .sec3 .content_notice ul li a{padding:15px 0;}
        .sec3 .container_group > div{margin-right:30px;}
        .sec3 .content_notice ul li a .desc1{font-size:14px;}
        .sec3 .content_notice ul li a .desc2{font-size:14px;}
        
    }
    
    @media(max-width:768px){
        .sec3 .container_group{flex-direction: column; padding:60px 40px;}
        .sec3 .container_group > div{margin:0 0 30px; width:100%; padding:15px;}
        .sec3 .title_group h2{font-size:21px;}
        .sec3 .title_group{margin-bottom:20px;}
        .sec3 .title_group .b_type1{font-size:12px;}
        .footer .content_info .group{padding:60px 40px;}
        .sec3 .bg1{width:400px; height:400px;}
        .sec3 .bg2{width:400px; height:400px;}
        .sec3 .content_notice ul li:last-child{border:0;}
    }
    
    @media(max-width:425px){
        
        .sec3 .title_group h2{font-size:18px;}
        .sec3 .container_group{flex-direction: column; padding:60px 20px;}

    }