/* 스크롤 방지 */
body.no-scroll {
    overflow: hidden;
}


main{}
/* ============================= 첫 화면 시작 */
#elim_introduction_all_top{
    width: 100%; height: calc(100vh - 100px); 
    /* background: url(../../img/company/company.jpg) center/cover; */
    background-color: #a7a7a7;
    display: flex; flex-flow: column;
    justify-content: center; align-items: center;
    position: relative;
}
.sound{background: url(../../img/introduction/sound/bg.jpg) center/cover;}
.screen{background: url(../../img/introduction/screen/bg.jpg) center/cover;}
/* .screen{background: url(../../img/introduction/sound/bg.jpg) center/cover;} */
#elim_introduction_all_top .title_text{}
#elim_introduction_all_top .title_text *{
    font-weight: 800; text-align: center;
    color: #fff; text-shadow: 1px 1px 3px #000;/* 글자 그림자 */
    /* text-shadow: 가로 세로 번짐 색상 */
}
#elim_introduction_all_top .title_text p{
    font-size: 0.625rem; letter-spacing:1.2em;
    margin-bottom: 10px; margin-left: 10px; font-weight: 200;
}
#elim_introduction_all_top .title_text h1{font-size: 3.75rem;}
#elim_introduction_all_top .field_introduction_all_move{
    display: flex; justify-content: center; align-items: center;
    width: 80%; padding: 30px 0 ; background-color: #fff;
    border-radius: 30px 30px 0 0 ;
    position: absolute; bottom: -1px; left: 50%;
    transform: translateX(-50%);
}
#elim_introduction_all_top .field_introduction_all_move li{position: relative;}
#elim_introduction_all_top .field_introduction_all_move li>a{margin: 0 30px;font-size: 1.25rem;}
#elim_introduction_all_top .field_introduction_all_move li>a::after{
    content: ""; position: absolute; width: 1px; height: 100%; background-color: #a7a7a7;
    bottom: 0; left: 0;
}
#elim_introduction_all_top .field_introduction_all_move li:first-child>a::after{display: none;}
#elim_introduction_all_top .field_introduction_all_move li>a:hover{font-weight: 600;}
/* ============================= 첫 화면 끝 */




#introduction_all_box{
    width: 100%; padding: 100px 0;
}
#introduction_all_box .container{ 
    width: 1400px; margin: 0 auto;
}
/* ===================================맨 위 카테고리 시작 */
#introduction_all_box .container .category_all_menu{
    display: flex; justify-content: space-between;
} /* 상단 카테고리 메뉴 */
#introduction_all_box .container .category_all_menu>a{
    display: block; padding: 30px 0;
    font-size: 1.25rem; margin-bottom: 40px;
    transition: all 0.5s; margin-right: 10px; border-radius: 5px;
    background-color: #fff; border: 1px solid #a7a7a7;
    width: calc(100% / 6); text-align: center;
}
#introduction_all_box .container .category_all_menu>a:last-child{margin-right: 0;}
#introduction_all_box .container .category_all_menu>a:hover{
    background-color: #0153A6; color: #fff; font-weight: 500;
}
/* ===================================맨 위 카테고리 끝 */


/* ========================검색 시작*/
#introduction_all_box .container form{
    padding: 0 5px; text-align: right; margin-bottom: 50px;
    display: flex; justify-content: end; align-items: center;
}
#introduction_all_box .container form .search_img{
    width: 40px; height: 40px; background-color: #a7a7a7; 
    padding: 10px; border-radius: 5px; margin-right: 3px;
}
#introduction_all_box .container form .search_img img{width: 100%;}
#introduction_all_box .container form #introductionSearchInput{
    padding: 10px; border: 1px solid #a7a7a7; border-radius: 5px;
}
#introduction_all_box .container form #introductionSearchInput[id="introductionSearchInput"]{width: 300px;}
/* ========================검색 끝*/




#introduction_all_box .container .category_content{ 
    width: 100%;  display: flex; flex-flow: row wrap; 
    
}
#introduction_all_box .container .category_content .categorytab{ 
    height: auto; width: 100%; display: flex; flex-flow: row wrap; justify-content: start;
}
#introduction_all_box .container .category_content .categorytab>h2{
    font-size: 3rem; font-weight: 500; width: 100%; text-align: center; margin: 50px 0 100px;
}

#introduction_all_box .container .category_content .categorytab > .i_all_ct{
    width: 100%; height:max-content; margin: 20px 0; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 그림자 효과 추가 */
    padding: 10px; display: flex;
}
#introduction_all_box .container .category_content .categorytab > .i_all_ct > .img{
    width: 300px; height: 300px; margin-right: 30px; background-color: #a7a7a7;
}
#introduction_all_box .container .category_content .categorytab > .i_all_ct > .img>img{ width: 100%; height: 100%;}
#introduction_all_box .container .category_content .categorytab > .i_all_ct > .text{
    width: calc(100% - 300px);
    display: flex; flex-flow: column nowrap; justify-content: space-between;
}
#introduction_all_box .container .category_content .categorytab > .i_all_ct > .text h3{
    font-size: 1.8rem; line-height: 1.3; font-weight: 600;
    text-align: left; margin-top: 10px;
}
#introduction_all_box .container .category_content .categorytab > .i_all_ct > .text .text_details{}
#introduction_all_box .container .category_content .categorytab > .i_all_ct > .text .text_details p{
    line-height: 1.5; font-size: 1rem; display: flex; margin: 10px 0;
}
#introduction_all_box .container .category_content .categorytab > .i_all_ct > .text .text_details p>*{font-weight: 200;}
#introduction_all_box .container .category_content .categorytab > .i_all_ct > .text .text_details p>em{
    display: block; width: 100px;
}
#introduction_all_box .container .category_content .categorytab > .i_all_ct > .text .btn{
    display: flex; margin-bottom: 10px;
    justify-content: end;
}
#introduction_all_box .container .category_content .categorytab > .i_all_ct > .text .btn a{
    font-size: 1.25rem; display: block; padding: 20px 0; background-color: #fff;
    text-align: center; color: #000; width: 300px; 
    border: 1px solid #777; transition: all 0.5s; margin: 0 5px;
}
#introduction_all_box .container .category_content .categorytab > .i_all_ct > .text  a:hover{
    background-color: #fff; color: #0153A6; border: 1px solid #0153A6;
}

/* ==============================전체 메뉴(자바스크립트로 생성된 영역) 시작  */
.all { display: flex; flex-wrap: wrap;}
.all>div { /* 자바스크립트 생성영역 */
    width: 100%; height:max-content; margin: 20px 0; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 그림자 효과 추가 */
    padding: 10px; display: flex;
} /* #introduction_all_box .container .category_content .categorytab > .i_all_ct 와 동일 */
.all>div>.img{width: 300px; height: 300px; margin-right: 10px; margin-right: 30px;}
.all>div>.img>img{height: 100%; width: 100%;}
.all>div>.text{
    width: calc(100% - 300px);
    display: flex; flex-flow: column nowrap; justify-content: space-between;
}
.all>div>.text>h3{
    font-size: 1.8rem; line-height: 1.3; font-weight: 600;
    text-align: left; margin-top: 10px;
}
.all>div>.text>.text_details>p{line-height: 1.5; font-size: 1rem; margin: 10px 0; display: flex;}
.all>div>.text>.text_details>p>*{font-weight: 200;}
.all>div>.text>.text_details>p>em{display: block; width: 100px;}
.all>div>.text>.btn{display: flex; justify-content: end; margin-bottom: 10px; }
.all>div>.text>.btn>a{
    font-size: 1.25rem; display: block; padding: 20px 0; background-color: #fff;
    text-align: center; color: #000; width: 300px; 
    border: 1px solid #777; transition: all 0.5s; margin: 0 5px;
}

.all>div>.text>.btn>a:hover{
    background-color: #fff; color: #0153A6; border: 1px solid #0153A6;
}

/* ==============================전체 메뉴 끝  */
/* ==============================페이지 숫자(pc기준 6개 이상 되었을때 페이지 숫자 자동 생성 자바스크립트) 시작  */
#introduction_all_box .pagination{
    padding: 30px 0;  text-align: center;
    font-size: 1.25rem;
}
#introduction_all_box .pagination>button{margin: 5px;}
/* ==============================페이지 숫자 끝  */


/* ==============================자세히보기 팝업  */
.image-container{display: none;}
.popup {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex; justify-content: center; align-items: center;
    z-index: 1000;
}

.popup .popup-content {
    max-width: 80vw; max-height: 80vh; padding: 10px;
    overflow: auto;
    background: #fff;
    border-radius: 8px;
}

.popup .popup-content img {
    width: 100%; /* height: auto; */
    display: block;
}

.close-btn { /* 팝업시 상단 오른쪽 X 표시 */
    position: absolute; top: 20px; right: 30px; font-size: 30px;
    color: white; cursor: pointer; z-index: 1001;
}



@media screen and (max-width:1349px){ /* 태블릿 */
    /* ============================= 첫 화면 시작 */
    #elim_introduction_all_top{height: calc(100vh - 80px); padding: 0 80px;}
    #elim_introduction_all_top .field_introduction_all_move li>a{margin: 0 30px;font-size: 1rem;}


    #introduction_all_box{padding: 80px 0;}
    #introduction_all_box .container{width: 700px;}
    /* ===================================맨 위 카테고리 시작 */
    #introduction_all_box .container .category_all_menu>a{
        padding: 20px 0; font-size: 1rem; margin-right: 5px; margin-bottom: 30px;width: 140px;}
    /* ===================================맨 위 카테고리 끝 */
    /* ========================검색 시작*/
    #introduction_all_box .container form{padding: 0 3px;margin-bottom: 40px;}
    #introduction_all_box .container form .search_img{width: 36px; height: 36px; margin-right: 5px;}
    #introduction_all_box .container form .search_img img{width: 100%;}
    #introduction_all_box .container form #introductionSearchInput{}
    #introduction_all_box .container form #introductionSearchInput[id="introductionSearchInput"]{width: 250px; font-size: 0.825rem;}
    /* ========================검색 끝*/
    #introduction_all_box .container .category_content .categorytab>h2{font-size: 2rem; margin: 30px 0 60px;}
    #introduction_all_box .container .category_content .categorytab > .i_all_ct > .img{width: 200px; height: 200px;margin-right: 20px;}
    #introduction_all_box .container .category_content .categorytab > .i_all_ct > .text{width: calc(100% - 200px);}
    #introduction_all_box .container .category_content .categorytab > .i_all_ct > .text h3{font-size: 1.5rem;}
    #introduction_all_box .container .category_content .categorytab > .i_all_ct > .text .text_details p{font-size: 0.825rem; line-height: 1.2; margin: 8px 0;}
    #introduction_all_box .container .category_content .categorytab > .i_all_ct > .text .text_details p>em{width: 80px;}
    #introduction_all_box .container .category_content .categorytab > .i_all_ct > .text .btn{margin-bottom: 0;}
    #introduction_all_box .container .category_content .categorytab > .i_all_ct > .text .btn a{font-size: 1rem; padding: 15px 0; width: 130px;}
    /* =================================== */
    .all>div>.img{width: 200px; height: 200px;margin-right: 20px;}
    .all>div>.text{width: calc(100% - 200px);}
    .all>div>.text>h3{font-size: 1.5rem;}
    .all>div>.text>.text_details>p{font-size: 0.825rem; line-height: 1.2;margin: 8px 0;}
    .all>div>.text>.text_details>p>em{width: 80px;}
    .all>div>.text>.btn{margin-bottom: 0;}
    .all>div>.text>.btn>a{font-size: 1rem; padding: 15px 0; width: 130px;}
}
@media screen and (max-width:699px){ /* 모바일 */
    /* ============================= 첫 화면 시작 */
    #elim_introduction_all_top{
        height: calc(100vh - 60px);padding: 0;
        justify-content: center; align-items: center;
    }
    #elim_introduction_all_top .title_text p{margin-left: 15px;}
    #elim_introduction_all_top .title_text h1{font-size: 3rem;}
    #elim_introduction_all_top .field_introduction_all_move{padding: 20px 0 ;}
    #elim_introduction_all_top .field_introduction_all_move li>a{margin: 0 15px; font-size: 0.875rem;}
    /* ============================= 첫 화면 끝 */


    #introduction_all_box{padding:50px 10px;}
    #introduction_all_box .container{width: 100%;}
    
    #introduction_all_box .container .category_all_menu{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 5px; margin-bottom: 20px;
        
    }
    #introduction_all_box .container .category_all_menu>a{
        width: 100%; height: 100%;
        text-align: center; font-size: 0.825rem; 
        display: flex;
        justify-content: center; /* 수평 중앙 */
        align-items: center;     /* 수직 중앙 */
        text-align: center;      /* 멀티라인 수평 정렬 */
        border: 1px solid #999;
    }
    /* ========================검색 시작*/
    #introduction_all_box .container form{padding: 0 10px;margin-bottom: 10px;}
    #introduction_all_box .container form .search_img{width: 36px; height: 36px; margin-right: 3px;}
    #introduction_all_box .container form .search_img img{width: 100%;}
    #introduction_all_box .container form #introductionSearchInput{}
    #introduction_all_box .container form #introductionSearchInput[id="introductionSearchInput"]{width: 100%; font-size: 0.825rem;}
    /* ========================검색 끝*/
    #introduction_all_box .container .category_content .categorytab>h2{font-size: 1.5rem; margin: 50px 0 50px;}
    #introduction_all_box .container .category_content .categorytab > .i_all_ct {margin: 0px; margin-top: 10px;}
    #introduction_all_box .container .category_content .categorytab > .i_all_ct > .img{width: 130px; height: 130px;margin-right: 10px;}
    #introduction_all_box .container .category_content .categorytab > .i_all_ct > .text{width: calc(100% - 130px);}
    #introduction_all_box .container .category_content .categorytab > .i_all_ct > .text h3{font-size: 0.825rem; margin-top: 0px;}
    #introduction_all_box .container .category_content .categorytab > .i_all_ct > .text .text_details p{font-size: 0.625rem; line-height: 1.2; margin: 3px 0;}
    #introduction_all_box .container .category_content .categorytab > .i_all_ct > .text .text_details p>em{width: 60px;}
    #introduction_all_box .container .category_content .categorytab > .i_all_ct > .text .btn{margin-bottom: 0;}
    #introduction_all_box .container .category_content .categorytab > .i_all_ct > .text .btn a{font-size: 0.625rem; padding: 7px 0; width: 80px;}
    /* =================================== */
    .all>div{margin: 10px 0;}
    .all>div>.img{width: 130px; height: 130px;margin-right: 10px;}
    .all>div>.text{width: calc(100% - 130px);}
    .all>div>.text>h3{font-size: 0.825rem;  margin-top: 0px;}
    .all>div>.text>.text_details>p{font-size: 0.625rem; line-height: 1.2; margin: 3px 0;}
    .all>div>.text>.text_details>p>em{width: 60px;}
    .all>div>.text>.btn{margin-bottom: 0;}
    .all>div>.text>.btn>a{font-size: 0.625rem; padding: 7px 0; width: 80px;}
}