main{}
/* ============================= 첫 화면 시작 */
#elim_introduction_top{
    width: 100%; height: calc(100vh - 100px); 
    background: url(../../img/introduction/introduction_01.jpg) center/cover;
    display: flex; flex-flow: column;
    justify-content: center; align-items: center;
    position: relative;
}
#elim_introduction_top .title_text{}
#elim_introduction_top .title_text *{
    font-weight: 800; text-align: center;
    text-shadow: 1px 1px 3px #000;/* 글자 그림자 */
    /* text-shadow: 가로 세로 번짐 색상 */
}
#elim_introduction_top .title_text p{
    font-size: 0.625rem; letter-spacing:1.2em; color: #fff;
    margin-bottom: 10px; margin-left: 10px; font-weight: 200;
}
#elim_introduction_top .title_text h1{font-size: 3.75rem; color: #fff;}
#elim_introduction_top .field_introduction_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_top .field_introduction_move li{position: relative;}
#elim_introduction_top .field_introduction_move li>a{margin: 0 30px;font-size: 1.25rem;}
#elim_introduction_top .field_introduction_move li>a::after{
    content: ""; position: absolute; width: 1px; height: 100%; background-color: #a7a7a7;
    bottom: 0; left: 0;
}
#elim_introduction_top .field_introduction_move li:first-child>a::after{display: none;}
#elim_introduction_top .field_introduction_move li>a:hover{font-weight: 600;}
/* ============================= 첫 화면 끝 */

/* ============================================== 문구 시작 */
#elim_introduction_text{width: 100%; padding: 150px 0;}
#elim_introduction_text .container{
    max-width: 1400px; min-width: 320px;
    margin: 0 auto; display: flex;
    align-items: center; justify-content: center;
}
#elim_introduction_text .container .img{width: 30%; margin: 0 100px;}
#elim_introduction_text .container .img img{width: 100%;}
#elim_introduction_text .container .text_box{
    width: 60%;font-size: 1.6rem;
    line-height: 1.8; color: #333;
}
#elim_introduction_text .container .text_box>em{
    font-size: 2rem; font-weight: 600; margin-right: 5px; color: #0153A6;
}
#elim_introduction_text .container .text_box>span{
    font-weight: 600;color: #6f9ecd;
}
#elim_introduction_text .container .text_box>span:nth-child(1){}
#elim_introduction_text .container .text_box>span:nth-child(2){}
#elim_introduction_text .container .text_box>span:nth-child(3){}
/* ============================================== 문구 끝 */


#introduction_main{
    width: 100%; height: 100%; padding: 100px 0;
    background-color: #d9edff;
}
#introduction_main .container{
    max-width: 1400px; min-width: 320px; margin: 0 auto;
}
#introduction_main .container .introduction_main_all{
    width: 100%; display: flex; justify-content: space-between;
    /* border: 5px solid #d9edff;  */
    /* box-shadow: 0 2px 5px rgba(0,0,0,0.2); */ /* 그림자 효과 추가 */
    padding: 15px; background-color: #fff;
    /* border-radius: 20px; overflow: hidden; */
}/* 공통 */
#introduction_main .container .introduction_main_all .img{
    width: 40%; height: 300px;
    background-color: #a7a7a7;
}
#introduction_main .container .introduction_main_all .text_box{
    width: 60%;position: relative;
}
#introduction_main .container .introduction_main_all .text_box .text{margin-top: 40px;}
#introduction_main .container .introduction_main_all .text_box .text .title{
    display: flex; justify-content: space-between;align-items: center; padding: 0 35px;
}
#introduction_main .container .introduction_main_all .text_box .text .title h2{
    font-size: 2rem; font-weight: 600; margin-bottom: 20px; height: 50px; line-height: 50px;
}
#introduction_main .container .introduction_main_all .text_box .text .title .title_logoimg{
    width: 100px; height: 50px; background: url(../../img/icon/logo.png) no-repeat center/contain;
}
#introduction_main .container .introduction_main_all .text_box .text>p{
    line-height: 1.5; font-size: 1.2rem; color: #333; margin-left: 20px;
}
#introduction_main .container .introduction_main_all .text_box .btn{
    width: 100%; position: absolute; bottom: 0; right: 0;
    /* display: flex; justify-content: end; */
}
#introduction_main .container .introduction_main_all .text_box .btn>a{
    display: block; width: 300px; padding: 20px 0;
    text-align: center; border-radius: 10px; font-weight: 600;
    background-color: #0153A6; color: #fff; border: 2px solid #0153A6;
    transition: all 0.3s;
}
#introduction_main .container .introduction_main_all .text_box .btn>a:hover{
    background-color: #fff; color: #0153A6; border: 2px solid #0153A6;
}
#introduction_main .container .introduction_top{margin-bottom: 50px;}
#introduction_main .container .introduction_top .img{ 
    margin-right: 30px; background: url(../../img/introduction/screen_bg.jpg) center/cover;
}
#introduction_main .container .introduction_bottom .img{
    margin-left: 30px; background: url(../../img/introduction/sound_bg.jpg) center/cover;

}
#introduction_main .container .introduction_top .text_box .btn{
    display: flex; justify-content: end;
}





@media screen and (max-width:1349px){ /* 태블릿 */
    /* ============================= 첫 화면 시작 */
    #elim_introduction_top{height: calc(100vh - 80px); padding: 0 80px;}
    #elim_introduction_top .field_introduction_move li>a{margin: 0 30px;font-size: 1rem;}
    /* ============================= 첫 화면 끝 */
    /* ============================= 문구 시작  */
    #elim_introduction_text{padding: 100px 0;}
    #elim_introduction_text .container{
        width: 100%; padding: 0 80px;
        flex-flow: column nowrap;
        align-items: start;
    }
    #elim_introduction_text .container .img{width: 60%; margin: 0 auto 50px;}
    #elim_introduction_text .container .text_box{width: 100%; font-size: 1.3rem;text-align: center;}
    #elim_introduction_text .container .text_box>em{font-size: 1.8rem;}
    /* ============================= 문구 끝 */
    #introduction_main .container{padding: 0 50px;}
    #introduction_main .container .introduction_main_all .img{height: 250px;}
    #introduction_main .container .introduction_main_all .text_box .text{margin-top: 30px;}
    #introduction_main .container .introduction_main_all .text_box .text .title h2{
        font-size: 1.5rem; line-height: 30px; height: 30px; padding: 8px 0;
    }
    #introduction_main .container .introduction_main_all .text_box .text .title .title_logoimg{
        width: 80px; height: 30px;
    }
    #introduction_main .container .introduction_main_all .text_box .text>p{font-size: 1rem;margin-left: 15px;}
    #introduction_main .container .introduction_main_all .text_box .btn>a{
        width: 250px; padding: 15px 0; font-size: 0.825rem; 
    }

    #introduction_main .container .introduction_top .img{ margin-right: 20px; }
    #introduction_main .container .introduction_bottom .img{margin-left: 20px;}
    
}
@media screen and (max-width:699px){ /* 모바일 */
    /* ============================= 첫 화면 시작 */
    #elim_introduction_top{
        height: calc(100vh - 60px);padding: 0;
        justify-content: center; align-items: center;
    }
    #elim_introduction_top .title_text p{margin-left: 15px;}
    #elim_introduction_top .title_text h1{font-size: 3rem;}
    #elim_introduction_top .field_introduction_move{padding: 20px 0 ;}
    #elim_introduction_top .field_introduction_move li>a{margin: 0 15px; font-size: 0.875rem;}
    /* ============================= 첫 화면 끝 */
    /* ============================= 문구 시작  */
    #elim_introduction_text{padding: 70px 0 30px 0;}
    #elim_introduction_text .container{padding: 0 20px;}
    #elim_introduction_text .container .text_box{font-size: 1rem;}
    #elim_introduction_text .container .text_box>em{font-size: 1.4rem;}
    /* ============================= 문구 끝  */

    #introduction_main .container{padding: 0 10px;}
    #introduction_main .container .introduction_main_all{
        flex-flow: column; 
    }
    #introduction_main .container .introduction_main_all .img{width: 100%; height: 150px; margin-bottom: 20px;}
    #introduction_main .container .introduction_main_all .text_box{width: 100%; height: 160px;}
    #introduction_main .container .introduction_main_all .text_box .text{margin-top: 0px;}
    #introduction_main .container .introduction_main_all .text_box .text>p{
        font-size: 0.825rem; margin-left: 0px; padding: 0 5px; line-height: 1.3;
    }
    #introduction_main .container .introduction_main_all .text_box .text .title{
        width: 100%; height: 35px;position: relative;
    }
    #introduction_main .container .introduction_main_all .text_box .text .title h2{
        font-size: 1.3rem; position: absolute; top: 50%; left: 3%; transform: translateY(-50%);
        padding: 0 0;
    }
    #introduction_main .container .introduction_main_all .text_box .text .title .title_logoimg{
        position: absolute; top: 50%; right: 3%; transform: translateY(-50%);
    }
    #introduction_main .container .introduction_main_all .text_box .btn>a{width: 100%;}
    #introduction_main .container .introduction_top .img{ margin-right: 0;}
    #introduction_main .container .introduction_bottom .img{margin-left: 0;}
    #introduction_main .container .introduction_bottom{flex-direction: column-reverse;/* 부모 아래의 모든 자식 요소의 전체 순서를 뒤집음 */}
}