/* ================================================================= 
     * 메인 Style
     * ================================================================= */

     @-webkit-keyframes txtBigger {from {scale: 0.9} to {scale: 1}}
     @-moz-keyframes txtBigger {from {scale: 0.9} to {scale: 1}}
     @-ms-keyframes txtBigger {from {scale: 0.9} to {scale: 1}}
     @-o-keyframes txtBigger {from {scale: 0.9} to {scale: 1}}
     @keyframes txtBigger {from {scale: 0.9} to {scale: 1}}

     @-webkit-keyframes mv_rotate360 { 100% {transform: rotate(360deg)} }
     @-moz-keyframes mv_rotate360 { 100% {transform: rotate(360deg)} }
     @-ms-keyframes mv_rotate360 { 100% {transform: rotate(360deg)} }
     @-o-keyframes mv_rotate360 { 100% {transform: rotate(360deg)} }
     @keyframes mv_rotate360{ 100% {transform: rotate(360deg)} }

    .tabSwiper{  position: relative;}

    .tabSwiper .swiper-slide-active  .txtBigger {
        -webkit-animation: txtBigger 5s ;
        -moz-animation: txtBigger 5s ;
        -ms-animation: txtBigger 5s ;
        -o-animation: txtBigger 5s ;
        animation: txtBigger 5s ;
    }

    .mv_rotate360 {
        -webkit-animation: mv_rotate360 15s infinite linear;
        -moz-animation: mv_rotate360 15s infinite linear;
        -ms-animation: mv_rotate360 15s infinite linear;
        -o-animation: mv_rotate360 15s infinite linear;
        animation: mv_rotate360 15s infinite linear;
    }
    
    .popup {
        display: none; /* 처음엔 숨김 */
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }
    
    /* 팝업 내부 컨텐츠 스타일 */
    .popup-content {
        position: relative;
        margin: 10% 13%  auto;
        padding: 10;
        width: 300px;
        background-color: #fff;
        border-radius: 10px;
        text-align: center;
    }
    
    /* 닫기 버튼 스타일 */
    .close-btn {
        cursor: pointer;
        text-align: right;
        position: absolute;
        right: 0;
    }

    .popup-bottom{
        width: 100%;
        text-align: left;
        position: relative;
    }
    
    @media screen and (max-width:767px) { 
        .popup {
            background-color: rgba(0, 0, 0, 0.5); /* 반투명 배경 */
        }
        
        .popup-content {    
            margin: 50% auto;
            width: 70%;
        }
    }

    /* ================================================================= 
    * Main 공통 
    * ================================================================= */
    .main {
        height: 100vh;
        overflow: hidden;
    }

    .main .swiper-slide {
        overflow: hidden;
    }

    /*flow*/
    .main .pagination {            
        position: absolute;
        right: 1rem;
        z-index: 999;
        display: inherit;
    }
        
    .main .pagination .swiper-pagination-bullet {
            background: none;
            border: #a9aaaf solid 2px;
            width: 1.5rem;
            height: 1.5rem;
            margin: 1vw 1vh;
            opacity: 1;
        }

    .main .pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
        background: #a9aaaf;
        border: #a9aaaf solid 2px
    }
    
    .main .figureArea {position: absolute;width: -webkit-fill-available;height: 58%;top: 50%;left: 50%;transform: translate(-50%, -50%);}
    .main .figureArea .main_figure {
        background: url('../img/main/slide1_figure.png') no-repeat center;
        background-size: contain;
        height:100%;
        width: -webkit-fill-available;
        position: absolute;
    }

    /* ================================================================= 
    * 1. 소개 문구 
    * ================================================================= */
    .main .tab1 {
        background: url('../img/main/slide1_img1.png') no-repeat center;
        background-size: cover;        
    }
    
    .main .tab2 {
        background: url('../img/main/slide1_img2.jpg') no-repeat center;
        background-size: cover;        
    }
    
    .main .tab3 {
        background: url('../img/main/slide1_img3.jpg') no-repeat center;
        background-size: cover;        
    }
    .main .tab {
        text-align: center;
        position: relative;
        vertical-align: middle;
        min-height: 100vh;
        display: flex; 
        align-items: center;
    }
    .main .tab .tab_content{
        position: relative;
        word-wrap: break-word;
        width: 100%;
        z-index: 1;
    }

    .main .tab .tab_content .subTitle p{
        margin: 0;
        z-index: 10;
    }

    .main .tab .scroll{
        display: grid;
        position: absolute;
        width: 100%;
        bottom: 10%;
        font-size: 0.8rem;
    }
    
    .main .tab .scroll i{
        font-size: 3rem;
    }
    
    /* ================================================================= 
    * 2. korea glass market Style
    * ================================================================= */
    
    .main .figureBg{
        background: url('../img/main/slide2_bg.jpg') no-repeat center !important;
        background-size: cover !important;
    }
    
    .main .figure .explain{
        color: #a2a3a8;
    }

    .main .figure .txtArea{
        margin-bottom: 2.5rem;
    }

    .main .figure .txtArea .main_tit{
        margin-bottom: 3rem;
    }

    .main .figure .txtArea .explain{
        width: 54%;
        font-size: 1.5vh;
    }
    .main .figure hr{
        width: 80%;
    }

    .main .figure .figure_list{
        display: flex;
    }
    
    .main .figure .figure_list .type{
        margin-right: 5rem;
    }

    .main .figure .figure_list .type .icon{
        height: 20%;
    }

    .main .figure .figure_list .type i {
        color : #6d6f7b;
    }
    
    .main .figure .figure_list .type .purecounter{
        font-size: 5vh;
        margin-bottom: 1.5rem;
    }

    .main .figure .figure_list .type p {
        margin-bottom: 0.5rem;
    }
    
    .main .figure .figure_list .type .explain{
        font-size: 1.25vh;
    }

    /* ================================================================= 
    * 3. 회사 소개
    * ================================================================= */
    .main .into {width: 75%;}
    .main .into .titArea {margin-bottom: 8rem;}
    .main .into .titArea .title {font-size: 7.5vh; margin-bottom: 1rem;}
    .main .into .titArea .subTitle {font-size: 1.5vh; letter-spacing : 0.4vh;}

    .main .into .type{ display: flex;}
    .main .into .type .item{
        padding: 2rem;
        background: #fff;
        text-align: center;
        color:#404040;
        margin-bottom: 3rem;
        cursor:pointer;
    }
    .main .into .type .item i { margin-bottom: 0.5rem; font-size: 3rem;}
    .main .into .type .item p {font-size: 1rem;}

    .main .into .type .item.active{
        background: #15245d;
        color:#fff;
    }

    .main .into .introduce{
        display: none;
        height: 15rem;
        
        img{height: 100%;}
        .txtArea{padding-left: 1.3rem;}
    }

    .main .into .introduce.active{
        display: flex;
    }

    .main .imgArea{
        position: absolute;
        width: 40%;
        right: 0;
        z-index: -1;
        top: 0;
        height: 100%;
        overflow: hidden;
    }

    .main .imgArea img {
        height: 100%;
        width: 100%;
    }
    

    /* ================================================================= 
    * 4. 제품 소개
    * ================================================================= */
    .main .product{
        display: flex;
        width: 100%;
        height: 70%;
    }

    .main .product .item_textArea{
        width: 40%;
        padding-left: 5%;
        padding-right: 1vw;
    }
    .main .product .item_textArea .item_name {
        margin-top: 2vh;
        font-weight: bold;
        font-size: 2vh;
        position: relative;
    }
            
    .main .product .item_textArea .item_name p{
        padding: 1vh 0;
        position: relative;
        cursor: pointer;
    }

    .main .product .item_textArea .item_name .explain{display: none;}

    .main .product .item_textArea .item_name p.active{
        color:#000;
        margin-left: 5%;                        
    }

    .main .product .item_textArea .item_name p.active::before{
        content: " ";
        position: absolute;
        left: 0;
        border-top: 2px solid #000;
        width: 300px;
        left: -300px;
        margin-top: 1.4vh;
    }


    .main .product .item_list {
        display: flex;
        width: 60%;
        overflow: hidden;

    }
    .main .product .item_list .item{
        border-radius: 2rem;
        overflow: hidden;
        box-shadow: 5px 5px 5px 5px #e9e9e9;
        height: 90%;
        text-align:center;
    }

    .main .product .item_list .item img{
        height: 65%;
        object-fit: cover; 
        min-width:-webkit-fill-available;
    }

    .main .product .item_list .item .item_text{                        
        margin: auto;
        width: 77%;
        text-align: left;
        margin-top: 10%;
    }

    .main .product .item_list .item .title{
        font-size: 3.7vh;
        font-weight: bold;
    }

    .main .product .item_list .item .explain {font-size: 1.5vh;}

    /* ================================================================= 
    * 5. 기계
    * ================================================================= */
    .main .equipment{
        background-image: url('../img/main/slide5_bg.jpg');
        background-size: cover;
        width: 100%;
        height: 100%;
    }
    
    .main .equipment div {
        display: none;
    }

    @media (hover: hover) {
        .main .equipment:hover div{
            display: block;
        }
    }    
    /* ================================================================= 
    * 6. 시공사례
    * ================================================================= */
    .main .example{
        display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; height: 100%;
    }

    .main .example div {text-align: center; width: -webkit-fill-available; margin: auto;}
    .main .example .title {font-size: 6vh; margin-bottom: 2vh;}
    .main .example .subTitle {font-size: 3vh; margin-bottom: 8vh;}

    .main .example .exSwiper{
        height: fit-content;
        width: -webkit-fill-available;       
    }        
        
    .main .example .exSwiper .title{ font-size: 3.2vh; font-weight: bold; margin-bottom: 0.5vh;}
    .main .example .exSwiper .explain{ font-size: 1.5vh;}

    .main .example .exSwiper .item {
        position: relative;
        width: fit-content;
        height: fit-content;
        border-radius: 100%;
        border: 2px solid #000;
        overflow:hidden;
        margin:auto;
        transform: scale(0.8);
    }
        
    .main .example .exSwiper .item img { transform: scale(1.07); }

    .main .example .exSwiper .item .textArea {
        display: none;;
        position: absolute;
        width: 100%;
        bottom: 0;
        height: 40%;
        text-align: center;
        background-color: rgb(0 0 0 / 0.6);
        color: #fff;                
        padding: 1vh 0;
    }

    .main .example .exSwiper .swiper-slide-active {transform: scale(1.2); }
    .main .example .exSwiper .swiper-slide-active .item {transform: scale(1);}        
    .main .example .exSwiper .swiper-slide-active.textArea {display: block;}

    .main .example .move_exSwiper{
        margin-top:7vh;
        font-size: 3vh;
    }
    .main .example .move_exSwiper i { margin : 0 2rem;}
    .main .example .move_exSwiper a{
        font-size: 2vh;
        letter-spacing: 1vh;
        display: block;
    }

    
    /* PC , 테블릿 가로 (해상도 768px ~ 1023px)*/
    @media screen and (min-width:768px) and (max-width:1023px) { 
        /* ================================================================= 
        * 2. korea glass market Style
        * ================================================================= */
        .main .figure { width: 95%;}
                
        .main .figure .txtArea .main_tit { margin-bottom : 1.5rem}
        .main .figure .txtArea .explain {
            width:90%;
            font-size:1.7vh
        }

        .main .figure br {display: none;}

        .main .figure .figure_list{
            display: block;
            text-align:center;
        }
        .main .figure .figure_list .type {
            margin : 2vh 2vw;
            display: inline-block;
            min-width: 40vw;
        }

        .main .figure .figure_list .type  .explain{
            font-size: 1.5vh;
        }
        
        /* ================================================================= 
        * 3. 회사 소개
        * ================================================================= */
        .main .into{width : 90%;}
        .main .into .titArea {margin-bottom: 3.5rem;}
        .main .into .titArea .title {font-size: 4.5vh;}                
        .main .into .type .item {min-width : 15vw; }
        .main .into .introduce .txtArea{ width: 75%;}

        /* ================================================================= 
        * 4. 제품 소개
        * ================================================================= */

        .main .product{
            width: 100%;
            height:80%;
        }
              
        /* ================================================================= 
        * 5. 기계
        * ================================================================= */
        .main .equipment div{
            display: block;
        }
        
        .main .equipment .textArea{
            width: 80%;
        }       
            
        /* ================================================================= 
        * 6. 시공사례
        * ================================================================= */
        .main .example .title{ font-size: 5vh;}
        .main .example .subTitle{ font-size: 2vh; margin-bottom: 15vh;}
        .main .example .exSwiper .swiper-slide{
            transform: scale(1.6);
        }
        .main .example .exSwiper .swiper-slide-active {
            transform: scale(2);
            z-index: 10;
        }
        .main .example .exSwiper .swiper-slide-next{z-index: 1;}
        .main .example .exSwiper .title{ font-size: 1.5vh; font-weight: bold;}
        .main .example .exSwiper .explain{ font-size: 1vh;}
        .main .example .exSwiper .item .textArea{padding:0.5vh 0}

        .main .example .move_exSwiper{
            margin-top: 15vh;                    
            letter-spacing: 0;
        }

        .main .example .move_exSwiper i{ font-size: 4.5vh; margin:0 2vw}
        .main .example .move_exSwiper a{ margin-top:1rem}
    }

    /* 모바일 가로, 테블릿 세로 (해상도 480px ~ 767px)*/
    @media screen and (min-width:480px) and (max-width:767px) { 
        .main .pagination {right: 0.5rem;}
        .main .pagination  .swiper-pagination-bullet {
            width: 1rem;
            height: 1rem;
            margin: 1vw 1vh;
        }

        /* ================================================================= 
        * 2. korea glass market Style
        * ================================================================= */
        .main .figure { width: 95%;}
        .main .figure .txtArea .main_tit {margin-bottom : 1.5rem;}
        .main .figure .txtArea .explain {
            width:90%;
            font-size:1.2vh
        }
        .main .figure br {display: none;}

        .main .figure .figure_list{
            display: block;
            text-align:center;
        }

        .main .figure .figure_list .type{
            margin : 2vh 2vw;
            display: inline-block;
            min-width: 40vw;
        }

        .main .figure .figure_list .type .explain{font-size: 1.5vh;}
            
        /* ================================================================= 
        * 3. 회사 소개
        * ================================================================= */

        .main .into {width : 90%;}
        .main .into .titArea { margin-bottom: 3.5rem;}
        .main .into .titArea .title {font-size: 3.5vh;}
        .subTitle{font-size: 1.5vh; letter-spacing:0.1vw}
        .main .into .type {overflow-x : scroll;}
        .main .into .type .item {min-width : 31vw;}
        .main .into .introduce .txtArea {width: 75%;}

        /* ================================================================= 
        * 4. 제품 소개
        * ================================================================= */

        .main .product{
            display: block;
            width: 90%;
            height:80%;
        }

        .main .product .item_textArea {width: 100%;}
        .main .product .item_textArea .item_name.explain { font-size: 1vh; display: none;}
        .main .product .item_textArea p.active .explain {display: block;}
        .main .product .item_list {width: 100%;}
        .main .product .item_list .item .item_text {display: none; }

        /* ================================================================= 
        * 5. 기계
        * ================================================================= */
        .main .equipment div { display: block;}        
        .main .equipment .textArea {width: 80%;}        

        /* ================================================================= 
        * 6. 시공사례
        * ================================================================= */
        .main .example .title{ font-size: 4vh;}
        .main .example .subTitle{ font-size: 1.5vh; margin-bottom: 1vh;}
        .main .example .exSwiper .swiper-slide-active { transform: scale(0.9);}
        .main .example .exSwiper .title{ font-size: 3vh; font-weight: bold;}
        .main .example .exSwiper .explain{ font-size: 1.5vh;}
        .main .example .exSwiper .item .textArea {padding:1.5vh 0}
        .main .example .move_exSwiper{
            margin-top: 3vh;                    
            letter-spacing: 0;
        }
        
        .main .example .move_exSwiper i{ font-size: 4.5vh; margin:0 2vw}
        .main .example .move_exSwiper a{ margin-top:1rem}
    }

    /* 모바일 가로, 테블릿 세로 (해상도 ~ 479px)*/
    @media screen and (max-width:479px) { 
        .main .pagination {right: 0.5rem;}
        .main .pagination .swiper-pagination-bullet {
            width: 1rem;
            height: 1rem;
            margin: 1vw 1vh;
        }
        
        /* ================================================================= 
        * 2. korea glass market Style
        * ================================================================= */
        .main .figure {width: 95%;}
            
        .main .figure .txtArea .main_tit { margin-bottom : 1.5rem}
        .main .figure .txtArea .explain{
            width:90%;
            font-size:1.7vh
        }
        

        .main .figure br {display: none;}

        .main .figure .figure_list{
            display: block;
            text-align:center;
        }

        .main .figure .figure_list .type{
            margin : 2vh 2vw;
            display: inline-block;
            min-width: 40vw;
        }

        .main .figure .figure_list .type .explain{ font-size: 1.5vh;}

        /* ================================================================= 
        * 3. 회사 소개
        * ================================================================= */
        .main .into {width : 90%;}

        .main .into .titArea {margin-bottom: 3.5rem;}

        .main .into .titArea .title {font-size: 4.5vh;}
    
        .main .into .type { overflow : scroll;}
        .main .into .type .item { min-width : 42vw; }
        
        .main .into .introduce {height: 8rem;}
        .main .into .introduce .txtArea{width: 75%;}

        /* ================================================================= 
        * 4. 제품 소개
        * ================================================================= */
        .main .product{
            display: block;
            width: 90%;
            height:80%;
        }

        .main .product .item_textArea{width: 100%;}

        .main .product .item_textArea .item_name .explain { font-size: 1.5vh; display: none;}
        .main .product .item_textArea p.active .explain {display: block;}

        .main .product .item_list { width: 100%;}
        .main .product .item_list .item .item_text { display: none;}

        /* ================================================================= 
        * 5. 기계
        * ================================================================= */
        .main .equipment div {display: block;}
        .main .equipment .textArea {width: 80%;}   
        
        /* ================================================================= 
        * 6. 시공사례
        * ================================================================= */
        .main .example.title{ font-size: 5vh;}
        .main .example .subTitle{ font-size: 2vh; margin-bottom: 1vh;}
        .main .example .exSwiper .swiper-slide-active { transform: scale(0.9);}
        .main .example .exSwiper .title{ font-size: 4vh; font-weight: bold;}
        .main .example .exSwiper .explain{ font-size: 2vh;}
        .main .example .exSwiper .item.textArea{padding:1.5vh 0}

        .main .example .move_exSwiper{
            margin-top: 3vh;                    
            letter-spacing: 0;
        }

        .main .example .move_exSwiper i{ font-size: 4.5vh; margin:0 2vw}
        .main .example .move_exSwiper a{ margin-top:1rem}
    }
    
    
    .center{
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .full_dim {
        background: #000;
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0.4;
        top: 0;
        left: 0;
    }

    /* ================================================================= 
    * 배너
    * ================================================================= */
    .banner{
        height: 43vh;
        overflow: hidden;
        position: relative;
    }
    
    .banner img{
        width: 100%;
        height: 100%;
    }

    .banner .titleMenu{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color:#fff;
        font-weight: bold;
        font-size: 6vh;
        width:max-content;
    }
    
    /* 모바일 가로, 테블릿 세로 (해상도 ~ 479px)*/
    @media screen and (max-width:479px) { 
        .titleMenu{
            font-size: 4vh;
        }
    }