@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500&display=swap');

*{padding: 0; margin: 0;}
li{list-style: none;}
a{text-decoration: none;}

header,section,nav,div,ul,ol,h1,h2,h3,h4,h5,h6,footer,p,a{font-family: 'Noto Sans KR', sans-serif; color: #2a2a2a;}

html{
	scroll-behavior: smooth;
}
input::placeholder,
textarea::placeholder{
    color:#888 !important;
}
textarea{
    font-family:'NotoSans-KR';
}

#company_title,
#history_title,
#vision_title,
#way_to_title,
#ci_title{
    position:sticky;
    top:70px;
    background:#fff;
    z-index:111;
}

/* sub_header */
#header{position: fixed; top:0; left: 0; width: 100%; height: 70px; z-index: 10000;
    background-color : rgb(32, 38, 81);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
}
#header{position: fixed; top:0; left: 0; width: 100%; z-index: 10000;}
#header .header_active{height: 70px; background-color: rgb(32 38 81); transition-duration: 0.7s;}
#header .header_inner{position: relative; height: 70px; background-color: rgb(32 38 81);}
.gong_logo{width:130px;}
#header .header_inner h1{position: relative; top: 14px; left: 60px; width: 20%;}
#header .gnb>ul{display: flex; position: absolute; width: 42%; height: 100px; top: 0; right: 80px;}
#header .gnb>ul>li{width: 16.66%; min-width: 80px; position: relative;}
#header .gnb>ul>li>a{display: block; color: #fff; line-height: 70px; text-align: center;}
#header .gnb>ul>li>a::after{
    content: '';
    width: 0%;
    height: 3px;
    position: absolute;
    background: #fff;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    transition: all 0.5s;
    z-index:10;
}
#header .button_wrap{height:70px; display:flex; align-items:center;}
#header .gnb>ul>li>a:hover::after,#header .header_active .gnb>ul>li>a:focus::after{width: 80%;}
#header .gnb .sub_menu{position: relative; text-align: center; display: none; background-color: rgb(32 38 81); padding: 20px; width: 120%; left: 50%; transform: translateX(-50%);}
#header .gnb .sub_menu>li>a{color: #fff;line-height: 1rem;margin: 20px 0; display:block;}
#header .gnb .sub_menu>li .sub_menu_select{color: #ff6600;}
#header .gnb .sub_menu a:hover{color: #ff6701;}
/* sub_header */


/* mob_menu */
/* .mob_menu_btn{z-index: 200; position: absolute; top: 24px; right: 10px; cursor: pointer; display: none; width: 30px;} */
.mob_menu_btn{width:30px;z-index: 10200; position: fixed; top: 23px; right: 20px; cursor: pointer; display: none;}
.mob_menu_btn img{width: 100%;}
.mob_menu{position: fixed; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; z-index: 300; display: none;}
.mob_menu_wrap{position: relative; top:0; left: 45%; width: 55%; height: 100%; background-color: #002863;}
.mob_menu_wrap .close_btn{position: absolute; top: 15px; right: 15px; width: 20px;}
.mob_menu_wrap .close_btn img{width: 100%;}
.mob_menu_wrap ul{position: relative; top: 75px; height:80vh; overflow:scroll;}
.mob_menu_wrap ul>li{position: relative; width: 70%; margin: 0 auto; height: 40px; border-bottom: 1px solid rgba(255,255,255,0.2);}
.mob_menu_wrap ul>li>a{display: block; color: #fff; font-size: 0.8rem; line-height: 40px;}
/* mob_menu */


/* footer */
#footer{position: relative; background-color: #000416;}
#footer .footer_wrap{display: flex; flex-direction: column; width: 80%; margin: 0 auto; padding: 40px 0 35px 0;}
#footer .footer_wrap .footer_top{position: relative; display: flex;}
#footer .footer_wrap .footer_top p{font-size: 20px; color: #fff;}
#footer .footer_wrap .footer_top p span{color: #98a7b8; margin-right: 15px;}
#footer .footer_wrap .footer_top .top_link{font-size: 12px; position: absolute; right: 0;}
#footer .footer_wrap .footer_top .top_link a{display: inline-block; color: #fff; line-height: 29px;}
#footer .footer_wrap .footer_top .top_link a:first-child::after{content: "|"; margin: 0 10px;}
#footer .footer_wrap .footer_mid{margin: 33px 0 24px 0;}
#footer .footer_wrap .footer_mid p{color: #fff; font-size: 12px;}
#footer .footer_wrap .footer_btm p{color: #98a7b8; font-size: 12px;}
#footer .go_top_btn{ position:fixed; bottom:30px; cursor:pointer; left:50%; transform:translate(-50%,0%); border-radius:50%; background:#fff; width:40px; height:40px; z-index:9999;}
#footer .go_top_btn img { width:40px; height:40px;}
/* footer */


/* common */
h2{color: #002863; font-size: 2rem; margin-top: 100px;}
h3{color: #787878; font-size: 2rem;}
p{margin-top: 50px;}
#footer p{margin: 0;}
/* common */


/* company */
#company{position: relative; width: 80%; max-width:1300px; margin: 0 auto;}
#company div{border-bottom: 1px solid #787878;}
#company>div:last-child{border-bottom: none;}
#company div img{width: 100%; padding: 100px 0; display: block;}
/* company */


/* history */
#history{position: relative; width: 80%; margin: 0 auto; padding-bottom: 100px;}
/* history 컨텐츠1 */
#history .history_contents1{position: relative; margin-top: 50px; display: flex;}
#history .history_contents1 h4{color: #292126; font-size: 1.5rem;}
#history .history_contents1 span{display:flex;align-items:center;color: #3d69ba; font-size: 1.5rem; font-weight: bold;}
#history .history_2021{position: absolute; top: 45.5%;left: -28px;font-size: 2rem;background: #fff; z-index: 11;width: fit-content !important;}
#history .history_2022{position:absolute; top:45.5%; right:0px; font-size:2rem; background:#fff; z-index:11; width: fit-content !important;}
#history .history_contents1>div{width: 25%;}
#history .history_contents1>div>div{position: relative; height: 300px; padding: 20px; box-sizing: border-box;}
#history .history_contents1 .history_contents1_inner{position: absolute; bottom: 20px;}
#history .history_contents1>div>div:nth-child(2){height: 20px; padding: 0;}
#history .history_contents1 .history_circle{position: relative; width: 15px; height: 15px; background-color: #203864; display: inline-block; border-radius: 8px; }
#history .history_contents1 .history_line{position: relative; width: 90%; height: 1px; background-color: #203864; display: inline-block; transform: translateY(-7px);}
#history .history_contents1 .history_dot_line{height: 0; border-bottom: 1px solid #203864; background-color: #fff;}
/* history 컨텐츠2 */
#history .history_contents2{position: relative; display: flex; flex-wrap: wrap; margin-top: 100px; justify-content: space-between;}
#history .history_contents2>div{width: 30%; height: 330px; background-color: #f3f3f3; margin-top: 80px;}
#history .history_contents2>div img{position: relative; transform: translate(-30%,-30%);}
#history .history_contents2>div h4{color: #203864; font-size: 1.5rem; margin-left: 50px; margin-top:-15px;}
#history .history_contents2>div span{color: #292126; font-size: 1.2rem; padding: 0 50px; display: inline-block;}
.history_bedge{color: #3d69ba;font-size: 1rem !important; display: block; font-weight: bold;}

.gongsaero_history{width:100%; margin-top:100px;}
.gongsaero_history img{width:inherit;}
/* history */


/* vision*/
#vision{position: relative; width: 80%; margin: 0 auto; max-width:1300px;}
#vision img{position: relative; width: 80%; display: block; margin: 100px auto;}
/* vision*/

/* ci */
#ci{position: relative; width: 80%; margin: 0 auto; max-width:1300px;}
#ci img{position: relative; width: 95%; display: block; margin: 60px auto;}

/* ci */

/* way_to_come*/
#way_to_come{position: relative; width: 80%; margin: 0 auto; display: flex; flex-wrap: wrap; max-width:1300px;}
#way_to_come h4{color: #3876d1; font-weight: 300; margin-top: 100px;}
#way_to_come .way_to_come_1{width: 50%;}
#way_to_come .way_to_come_2{width: 50%;}
#way_to_come .way_to_come_2 img{width: 100%; display: block; margin-top: 100px;}
#way_to_come .way_to_come_3{width: 100%; margin-top: 50px; margin-bottom: 100px;}
/* way_to_come*/
.test{width:100px;}

/* service */
#service{position: relative; width: 80%; margin: 0 auto; max-width:1300px;}
#service p{margin-top: 0;}
#service i{color: #1745f4;}
#service .service_container, #service .breakthough_container{margin: 100px 0;}
#service .service_desc, #service .breakthough_desc, #vision .service_desc, #ci .service_desc{display: flex; flex-direction:column; margin-bottom: 50px; justify-content: space-between; border-bottom:1px solid #d2d2d2; padding-bottom:30px;}
#service .service_img img, #service .breakthough_img img{width:100%}
#service .service_container .service_container_img{width: 25%;}
#service .service_container .service_container_img img{width: 100%; display: block;}
#service .service_container .service_container_text{width: 74%; padding: 5rem; box-sizing: border-box;}
#service .service_container .service_container_text h4{font-size: 2rem;}
#service .service_container .service_container_text>p{margin: 30px 0 100px 0; font-size:18px;}
#service .service_container .service_container_text>div p{display: inline-block; width: 49%; margin-bottom: 10px;}
#service .service_container2, .service_container4{display: flex; flex-direction: row-reverse;}
/* #service .service_container1 .service_container_img{background-image: url(../img/service_mockup1.jpg); background-repeat: no-repeat; background-position: center; background-size: cover;}
#service .service_container2 .service_container_img{background-image: url(../img/service_mockup2.jpg); background-repeat: no-repeat; background-position: center; background-size: cover;}
#service .service_container3 .service_container_img{background-image: url(../img/service_mockup3.jpg); background-repeat: no-repeat; background-position: center; background-size: cover;}
#service .service_container4 .service_container_img{background-image: url(../img/service_mockup4.jpg); background-repeat: no-repeat; background-position: center; background-size: cover;} */
/* service */


/* faq */
#faq{position: relative; width: 80%; max-width:1300px; margin: 0 auto;}
#faq .faq_wrap{position: relative; margin: 100px auto;}
#faq .faq_wrap ul>li{border-left: 1px solid #c3cad5;}
#faq .faq_wrap ul>li.faq_select{border-left: 3px solid #002863;}
#faq .faq_wrap ul>li>h4{position: relative; height: 100px; cursor: pointer; line-height: 100px;}
#faq .faq_wrap ul>li>h4::selection{background-color: rgba(0, 0, 0, 0);}
#faq .faq_wrap ul>li>h4 span{margin: 0 5rem 0 3rem;}
#faq .faq_wrap ul>li>h4 span.faq_toggle{position: absolute; right: 0; color: #c3cad5; margin: 0;}
#faq .faq_wrap ul>li .answer{display: none; margin-left: 190px; padding-bottom:50px;}
#faq .faq_wrap ul>li .answer>img{display:block; width: 90%; margin: 20px auto;}
#faq .faq_wrap ul>li.faq_select>h4{color: #002863;}


/* contact black section */
.flex{
    display: flex;
    justify-content: center;
    align-items: center;
}
.main_contact h1{
font-family: system-ui;
    letter-spacing: -3px;
    display: flex;
    justify-content: center;
    font-size: 70px;
    color: #002863;
    position: relative;
    margin-top: 100px;
    margin-bottom: 50px;
}
.main_contact .inner_container{
    position: relative;
    max-width: 100%;
    margin: auto;
    padding: 30px 50px 40px 50px;
}
.main_contact .contact_inner{
    display: flex;
    margin-top:30px;
}
.inner{
    display: flex;
}
.left_area{
    width:50%;
}
.left_area .left_inner_con {
    color: #888;
    font-size: 20px;
    padding: 30px 0px;
    position: relative;
}
.left_area .left_inner_con:before {
    position: absolute;
    content: '';
    left: 0px;
    bottom: 0px;
    width: 50px;
    height: 1px;
    background: #ddd;
}
.left_area .info_list {
    margin: 30px 0 40px 0;
}
.left_area .info_list li {
    position: relative;
    font-size: 16px;
    padding: 5px 0 5px 0px;
}
.contact_inner .right_area {
    width: 48%;
}
.contact_inner .right_area .field_list li {
    margin-bottom: 10px;
}
.right_area .field_list li input[type=text],
.right_area .field_list li input[type=email],
.right_area .field_list li textarea {
    background-color: transparent;
    border: none;
    border-bottom: 2px solid #787878;
    display: block;
    padding: 0 0 10px;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    resize: none;
    width: 100%;
    outline: none;
}
.right_area .field_list li input[type=text],
.right_area .field_list li input[type=email]{
    height: 45px;
    font-size: 16px;
    color: #fff;
}
.right_area .field_list li textarea {
    margin-top:30px;
    font-size: 16px;
    height:100px;
}
.right_area .btn_area {
    margin-top: 30px;
    cursor: pointer;
}
.right_area .btn_area input {
    width: 100%;
    border-radius: 0;
    color: #fff;
    border: 1px solid #fff;
    background-color: #002863;
    padding: 0 50px;
    height: 50px;
    font-size: 16px;
    line-height: 44px;
}
/* end contact section */
/* faq */


/* how to use */
#use{position: relative; width: 80%; margin: 0 auto;}
#use h3{text-align: right; font-size: 1rem; font-weight: 300;}
#use>div{padding-bottom: 100px; position: relative;}
#use>div:first-child{border-bottom: 1px solid #ddd;}
#use .use_container{display: flex;}
/* slider css */
#use .slider_mob{position: relative; display: none; width: 80%; margin: 0 auto;}
#use .slider_mob p{text-align: center; margin-bottom: 30px;}
#use .slider_mob img{margin: 0 auto;}
#use .slider_btn{position: absolute; top: 50%; color: #ff6600; font-size: 2rem; cursor: pointer;}
#use .slider_btn .fas{display: none;}
#use .prev{left: 0;}
#use .next{right: 0;}
#use .use_container li{width: 25%;display:flex;justify-content: space-between;flex-direction: column; align-items: center}
#use .use_num{width: 80px; height: 80px; border-radius: 40px; background-color: #002863; color: #fff; text-align: center; line-height: 80px; margin: 50px auto; font-size: 1.5rem;}
#use .use_container li img{margin: 10px auto 0; width: 100%;}
#use .use_container p{text-align: center; font-size: 1rem; padding: 0 20px;}
#use .use_container span{font-size: 0.9rem; color: #787878; text-align: center;}
#use .use_container .use_img_fix_margin{margin-left:-30px;}
/* how to use */


/* use_data */
#use_data{position: relative; width: 80%; margin: 0 auto; padding-bottom: 100px;}
.data_img{width: 60%; margin: 0 auto; position: relative; display: block; padding-bottom: 100px;}
/* use_data */


/* press */
#press{position: relative; width: 80%; margin: 0 auto;}
#press h3{margin-bottom: 50px;}
#press h4{font-size: 1.6rem; margin-top: 100px;}
#press h5{font-size: 1.1rem; margin-top: 40px;}
#press p{font-size: 0.9rem; margin-top: 10px; line-height: 1.7rem;}
#press a{font-size: 0.9rem; margin-top: 10px; line-height: 1.7rem; display:flex;align-items:center;gap:5px;}
#press>div{display: flex;}
#press .press_certificate{height:500px;}
#press .press_container3{margin-bottom: 50px;}
#press>div>div{width: 50%; padding: 50px; position:relative;}
#press>div img{display: block; width: 100%;}
    #press .press_container3 a span{
        font-size: 12px;
        color: #787878;
    }
    #press .press_container3 a img{
        width:33px !important;
        margin-left:3px;
    }
#press .certificate1{position:absolute;width:60%;max-width:300px;top:0;left:0;}
#press .certificate2{position:absolute;width:60%;max-width:300px;bottom:0;right:0;}
#press .certificate1:hover{z-index:3;}
#press .certificate2:hover{z-index:3;}
/* press */

/* notice */
#notice{position:relative;width:80%;margin: 0 auto; min-height:50vh;}
.notice_container{width:85vw; margin:50px auto;}
.notice_container1{height: 50px;line-height: 44px;background-color: #002863;text-align:center;display: flex;color:#fff;}
.notice_container1 span{border-right: 1px solid #fff;}
.notice_container1 span:nth-child(1){width:10%; }
.notice_container1 span:nth-child(2){width:60%; padding:10px 0 10px 15px; display: flex; justify-content: center; align-items: center;}
.notice_container1 span:nth-child(3){width:10%; }
.notice_container1 span:nth-child(4){width:20%; }

.notice_container2{background-color: #fff;text-align:center;display: flex;color:#000;}
.notice_container2 span{border-bottom:1px solid #f3f3f3;}
.notice_container2 span:nth-child(1){width:10%; display:flex; justify-content: center; align-items: center; }
.notice_container2 span:nth-child(2){ cursor : pointer; padding:10px 0 10px 15px;text-align: left;width:60%; display: flex; justify-content: center; flex-direction: column;}
.notice_container2 span:nth-child(3){width:10%; display:flex; justify-content: center; align-items: center;}
.notice_container2 span:nth-child(4){width:20%; display:flex; justify-content: center; align-items: center;}
.notice_title{font-weight: 700;}
.notice_writer{letter-spacing: -1px;}
.mo_notice_container2{display: none;}

/* notice detail */
#notice .notice_detail_container{width:85vw; margin:50px auto; border-top:2px solid #000;}
#notice .notice_detail_container .detail_header{display:flex; align-items: center; border-bottom:1px solid #d2d2d2; padding:20px 10px; justify-content: space-between;}
#notice .notice_detail_container .detail_sub_header{display:flex; align-items: center}
#notice .notice_detail_container .detail_sub_header span{font-size:13px; color:#787878; white-space: nowrap;}
#notice .notice_detail_container .detail_content{min-height:45vh; border-bottom:1px solid #d2d2d2; padding:20px 10px;}
#notice .detail_list_btn span{width:130px; margin:5px auto; background-color:#002863; color:#fff; display: flex; justify-content: center; align-items: center; padding:10px 25px; margin-bottom:30px; cursor:pointer;}
#notice .attach_file_container{display:flex; border-bottom:1px solid #d2d2d2;}
#notice .attach_file1{width:100px; border-right:1px solid #d2d2d2; padding:10px; text-align:center; display:flex; align-items: center; justify-content: center;}
#notice .attach_file2{padding:10px 15px;}
#notice .file_download_div:hover{font-weight:700;}
/* paging */
.paging_box{display: flex; justify-content: center; margin: 20px 0}
.pagination {display: inline-block;}
.pagination a {color: black;float: left;padding: 8px 16px;text-decoration: none;border: 1px solid #ddd;}
.pagination a.active {background-color: #002863;color: white; border: 1px solid #002863;}  
.pagination a:hover:not(.active) {background-color: #ddd;}
.pagination a:first-child {border-top-left-radius: 5px;border-bottom-left-radius: 5px;}
.pagination a:last-child {border-top-right-radius: 5px;border-bottom-right-radius: 5px; margin-right:3px;}

/* process */
#process{position: relative; width: 80%; margin: 0 auto;}
#process img{position: relative; display: block; width: 80%; margin: 0 auto;}
#process>div{position: relative; width: fit-content; background-color: #203864; color: #fff; margin: 50px auto; padding:0 15px; text-align: center; line-height: 5rem; border-radius: 2.5rem;}
#process>div span{font-weight: 500;}
#process table{text-align: center; height: 60rem; width: 80%; margin: 0 auto; padding-bottom: 100px;}
#process .process_tr t{background-color: #203864; color: #fff; height: 5rem;}
#process #process_gong{background-color: #ff6600;}
#process #process_gong img{width: 50%; display: block;}
/* #process tr{background-color: #203864; color: #fff;} */
#process th{background-color: #ececec; color: #2a2a2a;}
#process td{background-color: #fff; color: #2a2a2a; font-size: 0.9rem;}
#process .process_gong_td{background-color: rgba(236, 101, 25, 0.1);}
/* process */


/* contact */
#contact{position: relative; width: 80%; margin: 0 auto; max-width:1300px;}
#contact h2{margin-top: 0px;}
#contact>div{display: flex; padding: 100px 0; flex-direction: column;}
#contact .contact_container .contact_container_left{width: 100%;}
#contact .contact_container_left a{position: relative; margin: 30px 10px; display: block; width: fit-content; padding:0 15px; height:70px; background-color: #002863; color: #fff; border-radius: 35px; text-align: center; line-height: 70px;}
#contact .contact_container .contact_container_right{display: flex; flex-direction: revert; flex-wrap:wrap; justify-content: center;}
#contact .contact_container .contact_container_right>div{position: relative; width: 360px; height: 160px; margin: 10px; background-color: #f3f3f3; display: flex; border-radius: 50px 0 50px 50px; }
#contact .contact_container .contact_container_right>div img{display: block; position: relative; top: 50%; left: 30%; transform: translateY(-50%);}
#contact .contact_container .contact_container_text{ padding: 50px 10px 50px 40px; box-sizing: border-box;}
#contact .contact_container .contact_container_right>div p{margin-top: 0;}
.contact_container3{position: relative; background-image: url(../img/contact_bg_pc.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; margin-top: 100px; text-align: center;}
.contact_container3 img{margin: 50px 0;}
.contact_container3 h3{color: #fff; font-size: 1.3rem; font-weight: 300;}
.contact_container3 p{color: #fff; font-size: 3rem; font-weight: 900; letter-spacing:4px; margin-top: 20px;}
.contact_kakao_img{width:80vw; margin:0 auto; max-width: 500px;}
.contact_kakao_qr{margin:50px -50px 50px 0 !important;}
.main_contact .kakao_contact{
    width:350px;
    border-radius:15px;
    box-shadow:0 0 15px #f7f7f7;
}
/* 커스텀 */
.partner_container {
    width:100%;
}
.partner_header{
    width: 100%;
    margin-bottom:30px;
}
.partner_container .partner_header > ul{
    width: 100%;
    display: flex;
    height:70px
}
.partner_container .partner_header > ul::after {
    content:"";
    display:block;
    clear:both;
}

.partner_container .partner_header > ul > li {
    display: flex;
    justify-content: center;
    width:50%;
    border:1px solid #f7f7f7;
    border-left-width:0;
    box-sizing:border-box;
    position:relative;
    text-align: center;
    align-items:center;
    font-size:24px;
}

.partner_container .partner_header > ul > li:first-child {
    border-left-width:1px;
}

/* 이렇게 하면 완벽합니다. */
.partner_container .partner_header > ul > li.active::before {
    content:"";
    position:absolute;
    bottom:-1px;
    left:0;
    width:100%;
    height:1px;
    background-color:#f7f7f7;
}
.partner_container .partner_header > ul > li.active{
    background-color:#002863;
    font-weight: 700;
}

.partner_container .partner_header > ul > li {
    padding:10px;
    text-align:center;
    color:#d2d2d2;
    display:flex;
    justift-content:center;
    align-items:center;
    cursor:pointer;
}
.partner_container .partner_header > ul > li.active {
    color:#fff;
}

.partner_container .partner_content > div {
    display:none;
    border:1px solid #f7f7f7;
    border-top:0;
    padding: 30px 50px;
}

.partner_container .partner_content > div.active {
    display:block;
    background-color: #f7f7f7;
}
.partner_content h2{
    margin:40px 0;
}
.partner_content span{
    color:#787878;
    letter-spacing:-0.5px;
}
.partner_content a{
    cursor:pointer;
    display: block;
    margin-top: 10px;
    font-weight: 700;
    border-top: 1px solid #d2d2d2;
    padding-top: 20px;
    font-size:20px;
}
.partner_content .img_container{
    width:100%;
    display: flex;
    margin-top: 100px;
}
.partner_content img{
    width:90%;
    margin:0 auto;
}

/* contact */
.contact_container2{display: flex; margin-top: 2rem; justify-content: center;}
.contact_container2>div{  box-sizing: border-box;}
.contact_container2>div:nth-child(1){padding-left: 5%;}
.contact_container2>div:nth-child(2){padding: 0;}
.contact_container2 input{position: relative; right: 0; width: 90%; height: 2rem; display:inline-block; border: 1px solid #ddd;padding:0 10px; margin-bottom: 8px;}
.contact_container2 input::placeholder, textarea::placeholder{color: #aaa; font-size: 0.8rem; padding-left: 8px; font-family: 'Noto Sans KR', sans-serif; font-weight: 300;}
.contact_container2 textarea{display: inline-block; padding:0 10px;width: 90%; resize: none; border: 1px solid #ddd;}
.contact_container2 textarea::placeholder{ padding: 8px;}
.contact_container2 input[type=submit]{background-color: #002863; color: #fff; height: 60px; cursor: pointer; margin-top: 1.5rem;}
.contact_container2>div>div{position: relative;    display: flex;
    justify-content: center;}

#contact_customer{position: relative; width: 80%; margin: 80px auto; display: flex;justify-content: center; flex-wrap: wrap;}
.element{display:flex;margin:5px 0;}
.element span{width:120px; line-height: 35px; text-align:left;}
.element input[type="text"]{position: relative;
    padding:0 10px;
    right: 0;
    width: 90%;
    height: 2rem;
    display: inline-block;
    border: 1px solid #ddd;
    margin-bottom: 8px;}
.customer_form{width: 50vw; }
.contact_customer_title{display: flex; margin-top:30px; justify-content: center; align-items: center;}
.contact_logo{width: 200px;}
.contact_container1{width: 80%; margin: 0 auto; display: flex;justify-content: center; flex-direction: column;}
.contact_customer_info{
    font-size:15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 30px 0 10px 0;
}
.contact_container2 .submit[type="submit"]{width:100%; font-size:20px;}
#radio_agree{width:25px; margin-right:10px;}
.element_radio label{line-height: 30px;}
.element_radio{display: flex; justify-content: center; margin:20px 0;}
.filebox .upload-name {
    display: inline-block;
    padding: 0 10px;
    vertical-align: middle;
    border: 1px solid #dddddd;
    width: 78%;
    color: #d2d2d2;
}
.filebox label {
    display: inline-block;
    width:90px;
    height:34px;
    text-align: center;
    line-height: 30px;
    color: #fff;
    vertical-align: middle;
    background-color: #999999;
    cursor: pointer;
    margin-left: 10px;
}
.filebox input[type="file"] {
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
}
.filebox{
    width:94%;
    display:flex;
}
.quote1{width: 5px;margin-top: -10px;margin-right:2px;}
.quote2{width:5px; margin-top:10px;margin-left:2px;}
.slick_container1{display: flex; height:fit-content;}
.slick_slide{margin:0 auto; max-width:230px; width:80%; object-fit: contain; z-index: 10;}
.slick_slide img{width:310px; height: 500px;}
/*.slick-dots{display:flex; justify-content: center; gap:10px;}*/
.slick-dots li{background-color: #fff;}
.slick-dots li button{border:1px solid #002863; background-color: #fff; color:#002863; padding:5px 10px; border-radius: 5px; cursor: pointer;}
.slick-dots li button.isActive{background-color: #002863; color:#fff;}
.service4_img{width:520px; margin-left:-10px; margin-top:-10px; z-index: 10;}
.service3_img{width:320px; height:300px !important;}

.slick-dots{position:absolute; left:0;right:0;bottom:-20px;display:flex;justify-content: center;}
.slick-dots li{width:20px; height:7px; background:#aaa;cursor:pointer;margin:5px 6px;transition:.4s;}
.slick-dots .slick-active{background:#002863; width:40px;}
#service button{display:none}
#use button{display:none}
/*.slick-arrow{position:absolute;top:50%;transform: translateY(-50%); font-size:50px; color:#fff;display:flex;align-items:center;padding:70px 20px; cursor:pointer;}*/
/*.slick-prev{left:5%;}*/
/*.slick-next{right:5%;}*/
.slick-prev{position:absolute; top:12%; z-index:40; left:-10%;}
.slick-next{position:absolute; top:12%; z-index:40; right:-10%;}
#use .slick-dots{bottom:-20px;}
#loading_img, #sub_loading_img{
    width:100%;
    height:100%;
    top:0;
    left:0;
    position: fixed;
    display: none;
    opacity: 0.8;
    background: #fff;
    z-index: 99999;
    text-align: center;

}
#loading_img>img, #sub_loading_img>img{
    position: absolute;
    top:50%;
    left:50%;
    z-index: 100000;
    animation:spinner 10s linear infinite;
}
#loading_img>img, #sub_loading_img>p{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-45%, 60px);
}
@keyframes spinner {
    100% {transform: rotate(360deg)}
}

.go_top_btn{
    width:60px;
    height:60px;
    background:#fff;
    border-radius:50%;

    position:fixed !important;
    z-index:1000000 !important;
    display:none;
    justify-content:center;
    align-items:center;
    right:43px !important;
    bottom: calc(110px + env(safe-area-inset-bottom));
    cursor:pointer;
    box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
    transition:.3s linear;
}
.go_top_btn svg {
    width:32px;
    height:32px;
}
.custom_alarm {
    position: fixed !important;
    z-index: 10000000 !important;
    display: block !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    overflow: visible !important;
    background: transparent !important;
    bottom: calc(24px + env(safe-area-inset-bottom)) !important;
    right: 16px !important;
    cursor: pointer;
}
.custom_alarm img {
    width: 200px;
}
.Commonstyled__BaseWrapper-sc-18oqljn-6{
    position:relative;
}
.PushMessageWrapperstyled__BaseWrapper-jcduf9-0{
    margin-bottom: 80px;
}

/* ㄱㅐ인정보 처리방침, 이용약관 */
.terms_container,
.privacy_container {
    width: 1150px;
    margin: 0 auto;
    padding: 70px 0 160px;
}

.policy_tit {
    font-size: 24px;
    font-weight: 700;
    padding-bottom: 30px;
    border-bottom: #ccc solid 1px;
}

.terms_contents,
.privacy_contents {
    padding: 30px 0;
    border-bottom: #ccc solid 1px;
}

.terms_box,
.privacy_box {
    margin-bottom: 50px;
}

.terms_box:last-child,
.privacy_box:last-child {
    margin-bottom: 0;
}

.terms_box h4,
.privacy_box h4 {
    font-weight: 500;
    margin-bottom: 13px;
}

.terms_box p,
.privacy_box p {
    line-height: 1.71;
    font-size: 14px;
}
table td{
    padding:14px 10px;
    font-size: 12px;
    letter-spacing:-0.4px;
}
table tr:nth-child(1){
    background-color: #f2f2f2;
}
.privacyAgree_link{
    cursor: pointer;
    padding:10px;
    border:1px solid #d2d2d2;
    transition:.1s linear;
}
.privacyAgree_link:hover{
    font-weight: 700;
}
#terms{
    position:relative;
    width:80%;
    margin:0 auto;
}
/*footer*/
.footer_nav {
    margin: 30px 0 10px 0;
    display: flex;
    flex-wrap: wrap;
    border-bottom: 2px solid #333;
    padding: 20px 0;
    border-top: 2px solid #333;
}
.footer_nav div{
    display: flex;
    flex-direction: column;
    width: 17%;
    margin-left:20px;
    align-items: flex-start;
}
.footer_nav div span{
    color:#fff;
    cursor:pointer;
}
.footer_nav div a{
    color:#fff;
    margin:5px 10px;
    font-size:13px;
    cursor:pointer;
}

.Commonstyled__BaseWrapper-sc-18oqljn-6{
    position:relative;
}
.PushMessageWrapperstyled__BaseWrapper-jcduf9-0{
    margin-bottom: 80px;
}
.privacy_box p, .terms_box p{
    margin: 0px !important;
}
.privacy_box, .terms_box{
    margin-bottom:50px !important;
}
.terms_title{
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 20px;
}
/*번역 버튼*/
.global_icon_box{
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    color: #fff;
    height: 100%;
    cursor:pointer;
    font-size:12px;
    margin-top:17px
}
.global_icon_box:hover {
    font-weight: 700;
}
.global_icon_box img:hover{
    transform:rotate(15deg);
    transition: .3s linear;
}
.global_btn_box{
    display: flex;
    align-items: center;
    height:70px;
    font-size:13px;
    cursor:pointer;
}
.global_btn_mob_box{
    display: flex;
    justify-content: flex-end;
    padding-bottom: 10px;
    display:none;
}
.btn_lang{
    border: 2px solid #ff6600;
    display: inline-block;
    padding: 5px 10px;
    position: relative;
    text-align: center;
    transition: 600ms ease;
    color:#fff;
}
.global_btn_box label:nth-child(2){
    border-radius: 20px 0 0 20px;
}
.global_btn_box label:nth-child(4){
    border-radius: 0 20px 20px 0;
}

input[type="radio"].toggle {
    display: none;}

input[type="radio"].toggle label{
    cursor: pointer;
    min-width: 60px;
}
input[type="radio"].toggle:hover{
    background: none;
    color: #1a1a1a;
}
input[type="radio"].toggle:after{
    background: #1a1a1a;
    content: "";
    height: 100%;
    position: absolute;
    top: 0;
    transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1);
    width: 100%;
    z-index: -1;
}

input[type="radio"].toggle .toggle-left + label {
    border-right: 0;
}
input[type="radio"].toggle:after{
    left: 100%
}

input[type="radio"].toggle .toggle-right + label{
    margin-left: -5px;
}
input[type="radio"].toggle .toggle-right+label:after{
    left: -100%;
}
input[type="radio"].toggle:checked + label {
    cursor: default;
    /*font-weight: 700;*/
    color: #fff;
    background-color: #ff6600;
    transition: 200ms linear;
}
input[type="radio"].toggle:checked + label:after{
    left: 0;
}

.contact_title, .faq_title{
    position:sticky;
    top:70px;
    background:#fff;
    z-index:111;
}

.right_area{margin-top:30px;}
.right_area .field_list li input[type=text],
.right_area .field_list li input[type=email],
.right_area .field_list li textarea {
    background-color: transparent;
    border: none;
    border-bottom: 2px solid #eee;
    display: block;
    padding: 0 0 10px;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    resize: none;
    width: 100%;
    outline: none;
}
.right_area .field_list li input[type=text],
.right_area .field_list li input[type=email]{
    height: 45px;
    font-size: 16px;
    color: #020202;
}
.right_area .field_list li textarea {
    margin-top:20px;
    font-size: 16px;
    height:100px;
}

.right_area .field_list li input::placeholder,
.right_area .field_list li textarea::placeholder{
font-size:16px;
color:#7f7f7f;
padding:0;
margin:0;
}
.right_area .btn_area {
    margin-top: 30px;
    cursor: pointer;
}
.right_area .btn_area input {
    width: 100%;
    border-radius: 0;
    color: #fff;
    border-color: #002863;
    background-color: #002863;
    padding: 0 50px;
    height: 50px;
    font-size: 16px;
    line-height: 44px;
    border-width: 3px;
}

/* 모달 스타일 */
.contact_modal {
    display: none; /* 기본적으로 숨김 */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

    background-color: rgba(0, 0, 0, 0.5); /* 반투명 배경 */
}
.open_contact_modal{
  width:160px;
  height:40px;
  border-radius:10px;
  color:#fff;
  background-color:#ff6600;
  cursor:pointer;
  margin:auto;
}

.contact_modal_content {
    background-color: #fff;
    margin: 0 auto;
    padding: 60px;
    border-radius: 5px;
    width: 80%;
    max-width: 500px;
    text-align: left;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

/* 닫기 버튼 스타일 */
.close_contact_modal {
    color: #aaa;
    float: right;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
}

.close_contact_modal:hover,
.close_contact_modal:focus {
    color: #000;
    text-decoration: none;
}

.case_download_section{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
    margin:0px 50px;
}
.case_download_btn{
    background:#002863;
    color:#fff;
    font-size:25px;
    padding:15px 40px;
    letter-spacing:-0.7px;
    border-radius:10px;
    cursor:pointer;
}


@media screen and (max-width:1080px){
    .main_contact .contact_inner{
        flex-direction: column;
    }
    .left_area {
        width: 100%;
    }
    .contact_inner .right_area{
        width:100%;
    }
    .left_area .inner_tit{
        font-size:30px;
    }
    .left_area .left_inner_con{
        font-size:15px;
    }
    .left_area .info_list li{
        font-size:13px;
    }
    .right_area .field_list li input[type=text], .right_area .field_list li input[type=email] {
        height: 30px;
        font-size: 13px;
        color: #787878;
    }
    .right_area .field_list li textarea {
        margin-top: 30px;
        font-size: 13px;
        height: 70px;
    }
    .press_certificate{
        height:500px;
    }
    #contact {width: 90%; }
    #contact .partner_container .partner_header > ul > li { font-size: clamp(10px, 2vw, 20px);}
    #contact .partner_container .partner_header > ul { height:auto; }
    #contact .partner_container .partner_content > div { padding: 10px 20px; }
    #contact .partner_content h2{font-size:clamp(16px,4vw,30px);}
    #contact .partner_content span{font-size: clamp(10px, 2vw, 20px);}
    #contact .partner_content img { width: 100%; }
    #contact .partner_content .img_container { margin-top: 50px; }
    #contact .partner_content a{ font-size:clamp(13px, 3vw, 23px); }

    #faq .faq_wrap ul>li>h4 { font-size:clamp(13px,3vw,23px); line-height:20px; height:50px; width:100%; padding-bottom:20px; display:flex;}
    #faq .faq_wrap ul>li>h4 span{margin: 0 15px 0 3px;}

    #faq .main_contact .inner_container{ padding: 0 10px; }
    #faq .main_contact h1 { font-size: 2rem; justify-content: flex-start; }
    #faq .main_contact .kakao_contact { width:100%; }
    #faq .contact_inner .right_area { margin-bottom: 100px; }
}
@media screen and (min-width:1080px) and (max-width:1500px){
    #header .gnb>ul{width: 50%; right: 50px;}

    #history{width: 90%;}
    #history .history_contents1{font-size: 0.8rem;}


    #service{width: 96%;}
    #service .service_container .service_container_text{padding: 3rem;}
    #service .service_container .service_container_text>div p{font-size: 0.9rem;}

    #use{position: relative; width: 96%; margin: 0 auto;}

    #press{width: 90%;}
    #press>div>div{padding: 25px;}
    #press .press_container3{margin-bottom: 75px;}

    #process>div{position: relative; width: 450px; background-color: #203864; color: #fff; margin: 50px auto; text-align: center; line-height: 5rem; border-radius: 2.5rem; padding: 0 5rem;}
}


@media screen and (min-width:481px) and (max-width:1080px){
    #header .header_inner h1 {
        left:20px;
    }

    #header .gnb{display: none;}
    .mob_menu_btn{display: block;}

    #footer .footer_wrap{width: 100%; padding:50px 0; box-sizing: border-box;}
    #footer .footer_wrap .footer_top{flex-direction: column-reverse;}
    #footer .footer_wrap .footer_top p{margin: 20px;}
    #footer .footer_wrap .footer_top span{display: block;}
    #footer .footer_wrap .footer_top .top_link{position: absolute; top:0; left: 0; width: 100%;}
    #footer .footer_wrap .footer_top .top_link a{text-align: center; font-size: 0.7rem; transform: translateY(-150%); width: 48%;}
    #footer .footer_wrap .footer_top .top_link a:first-child::after{content: "|"; margin: 0; position: absolute; right: 0;}
    #footer .footer_wrap .footer_mid{margin: 20px;}
    #footer .footer_wrap .footer_mid p{font-size: 0.7rem;}
    #footer .footer_wrap .footer_btm p{color: #98a7b8; font-size: 12px; margin: 20px;}

    #company>div{position: relative; width: 80%; margin: 0 auto;}
    #company>div>img{width: 100%;}

    #history{width: 80%;}
    #history .history_contents1{flex-direction: column;}
    #history .history_contents1>div{width: 100%;}
    #history .history_contents1 .history_column1{position: relative; display: flex; flex-direction: column-reverse;}
    #history .history_contents1 .history_height_100{height: 100px;}
    #history .history_contents1 .history_contents1_inner{position: relative; bottom: 0; height: 100px;}
    #history .history_contents2>div{width: 45%;}
    #history .history_contents2>div span{font-size: 1rem;}
    #history .history_contents1 .history_2021{position:relative; display:none;}
    #history .history_contents1 .history_2022{position:relative; display:none;}
    #way_to_come{flex-direction: column;}
    #way_to_come .way_to_come_1{width: 100%;}
    #way_to_come .way_to_come_2{width: 100%;}

    /* #service .service_container>div{flex-direction: column;} */
    #service .service_container .service_container_img{width: 100%; height: 400px;}
    #service .service_container .service_container_text{width: 100%; border:none; padding: 2rem;}
    #service .service_container .service_container_text>p{margin: 30px 0 50px 0;}
    #service .service_container .service_container_text>div p{display: block; width: 100%; margin-bottom: 10px;}

    #faq{width: 90%;}
    #faq .faq_wrap ul>li>h4{font-size: 0.8rem;}
    #faq .faq_wrap ul>li .answer{font-size: 0.8rem; padding-top:30px;}
    #faq .faq_wrap ul>li .answer>img{width: 80%;}

    #use .use_container{display: none;}
    #use .slider_mob{display: block;}
    #use .slider_btn .fas{display: block;}

    #use_data{width: 96%;}
    .data_img{width: 90%;}
    #use_data p{font-size: 0.9rem;}

    #press{width: 90%; margin: 0 auto;}
    #press h4{ margin-top: 50px;}
    #press>div{display: flex; flex-direction: column;}
    #press>div>div{padding: 25px; width: 100%; box-sizing: border-box;}
    #press .press_container3{margin-bottom: 75px;}


    #process{width: 90%;}
    #process img{width: 70%;}
    #process>div{position: relative; width: 500px; background-color: #203864; color: #fff; margin: 50px auto; text-align: center; line-height: 5rem; border-radius: 2.5rem; padding: 0;}
    #process table{text-align: center; height: 60rem; width: 96%; margin: 0 auto; padding-bottom: 100px;}
    #process th{font-size: 0.9rem;}

    #contact{width: 90%;}
    #contact>div{flex-direction: column;}
    #contact .contact_container .contact_container_left{width: 100%;}
    #contact .contact_container .contact_container_right{width: 100%; display: block;}
    #contact .contact_container_left a {margin: 80px auto 0;}
    #contact .contact_container .contact_container_right {display:flex; flex-direction:revert;flex-wrap:wrap;justify-content: center;}
    #contact .contact_container .contact_container_right>div {margin:10px 10px;}
    /* notice */
    .notice_container{font-size:14px;}

    /* contact_us */
    .element{flex-direction: column; margin:0px;}
    .element input[type="text"]{width:100%;}
    .element textarea{width:100%;}
    .filebox{width:106%;}
    .contact_logo{width:160px;}
    .contact_title{font-size:30px;}
    .contact_container1{width:100%;}
    .contact_customer_info{font-size:13px;}
    .customer_form{width:70vw;}

    .slick_slide{width:200px;}
    .service4_img{width:300px;height:300px;}
    #service .service_container>div{border-bottom:1px solid #d2d2d2; padding-bottom:30px;}

    #history .history_contents1 .history_height_100{margin-bottom:-40px;}
    #history .history_contents1 .history_height_100 h4:before{content:"2021. "}

    #footer .footer_wrap{width: 100%; padding:50px 0; box-sizing: border-box;}
    #footer .footer_wrap .footer_top{flex-direction: column-reverse;}
    #footer .footer_wrap .footer_top p{margin: 20px;}
    #footer .footer_wrap .footer_top span{display: block;}
    #footer .footer_wrap .footer_top .top_link{position: absolute; top:0; left: 0; width: 100%;}
    #footer .footer_wrap .footer_top .top_link a{text-align: center; font-size: 0.7rem; transform: translateY(-150%); width: 48%;}
    #footer .footer_wrap .footer_top .top_link a:first-child::after{content: "|"; margin: 0; position: absolute; right: 0;}
    #footer .footer_wrap .footer_mid{margin: 20px;}
    #footer .footer_wrap .footer_mid p{font-size: 0.7rem;}
    #footer .footer_wrap .footer_btm p{color: #98a7b8; font-size: 12px; margin: 20px;}


    .footer_nav {
        flex-direction: column;
        margin:0 20px;
    }
    .footer_nav div{
        flex-direction: row;
        align-items: flex-start;
        width: auto;
        align-items:baseline;
        margin-left:0;
    }
    .footer_nav div span{
        margin:5px 8px;
        font-size:11px;
        color:#98a7b8;
    }
    .footer_nav div a{
        line-height: 1.5;
        margin: 5px 7px;
        font-size:9px;
    }
    /*#history .history_contents1 h4{font-size: calc(100vw * (100/1920));}*/
}


@media screen and (max-width:480px){
    #header .gnb{display: none;}
    .mob_menu_btn{display: block;}
    #header .header_inner h1{top: 15px; left: 15px; width: 30%;}
    #header .header_inner h1 img{width: 100%;}

    #footer .footer_wrap{width: 100%; padding:50px 0; box-sizing: border-box;}
    #footer .footer_wrap .footer_top{flex-direction: column-reverse;}
    #footer .footer_wrap .footer_top p{margin: 20px;}
    #footer .footer_wrap .footer_top span{display: block;}
    #footer .footer_wrap .footer_top .top_link{position: absolute; top:0; left: 0; width: 100%;}
    #footer .footer_wrap .footer_top .top_link a{text-align: center; font-size: 0.7rem; transform: translateY(-150%); width: 48%;}
    #footer .footer_wrap .footer_top .top_link a:first-child::after{content: "|"; margin: 0; position: absolute; right: 0;}
    #footer .footer_wrap .footer_mid{margin: 20px;}
    #footer .footer_wrap .footer_mid p{font-size: 0.7rem;}
    #footer .footer_wrap .footer_btm p{color: #98a7b8; font-size: 12px; margin: 20px;}

    #history{width: 80%;}
    #history .history_contents1{flex-direction: column;}
    #history .history_contents1>div{width: 100%; font-size: 0.9rem;}
    #history .history_contents1 .history_column1{position: relative; display: flex; flex-direction: column-reverse;}
    #history .history_contents1 .history_height_100{height: 100px;}
    #history .history_contents1 .history_contents1_inner{position: relative; bottom: 0; height: 100px;}
    #history .history_contents2>div{width: 80%; margin: 50px auto; height: 230px;}
    #history .history_contents2>div img{width: 40%;}
    #history .history_contents2>div h4{font-size: 1.2rem; margin-left: 30px; position: relative; top:-20px}
    #history .history_contents2>div span{font-size: .7rem; padding: 0 30px; position: relative; top: -15px;}
    #history .history_contents1 .history_2021{position:relative; display: none;}
    #history .history_contents1 .history_2022{position:relative; display:none;}
    #vision>p{font-size: 0.9rem;}
    #vision img{position: relative; width: 100%; display: block; margin: 100px auto;}

    #way_to_come{flex-direction: column;}
    #way_to_come .way_to_come_1{width: 100%;}
    #way_to_come .way_to_come_2{width: 100%;}

    #service{width: 90%;}
    #service .service_container>div{flex-direction: column; justify-content: center; align-items: center; gap:10px;}
    #service .service_container .service_container_img{width: 100%; height: 300px;}
    #service .service_container .service_container_text{width: 100% !important; border: 1px solid #c3cad5; padding: 1.5rem;}
    #service .service_container .service_container_text>p{margin: 30px 0 50px 0; font-size: 0.9rem;}
    #service .service_container .service_container_text>div p{display: block; width: 100%; margin-bottom: 10px; font-size: 0.8rem;}

    #faq{width: 90%;}
    #faq .faq_wrap ul>li>h4{font-size: 0.8rem;}
    #faq .faq_wrap ul>li .answer{font-size: 0.8rem; margin-left: 20px;}
    #faq .faq_wrap ul>li .answer>img{width: 80%; margin: 20px auto;}

    #use{width: 90%;}
    #use .slider_mob img{width: 80%;}
    #use h3{font-size: 0.8rem;}
    #use .use_num{width: 40px; height: 40px; border-radius: 20px; text-align: center; line-height: 40px; font-size: 1rem;}
    #use .slider_btn{top: 60%; font-size: 1.5rem; display: block;}
    #use .slider_btn .fas{display: block;}

    #use_data{width: 96%; padding-bottom: 50px;}
    #use_data p{font-size: 0.9rem;}
    .data_img{width: 100%; padding-bottom: 50px;}

    #press{width: 90%; margin: 0 auto;}
    #press h4{ margin-top: 50px;}
    #press p{font-size: 0.8rem;}
    #press>div{display: flex; flex-direction: column;}
    #press>div>div{padding: 10px; width: 100%; box-sizing: border-box;}
    #press .press_container3{margin-bottom: 75px;}

    #process{width: 96%;}
    #process img{width: 70%;}
    #process>div{width: 300px;margin: 50px auto; text-align: center; line-height: 2rem; border-radius: 6rem; padding: 0 50px; box-sizing: border-box; font-size: 0.9rem;}
    #process table{text-align: center; height: 60rem; width: 96%; margin: 0 auto; padding-bottom: 100px;}
    #process th{font-size: 0.8rem; font-weight: 400;}
    #process td{background-color: #fff; color: #2a2a2a; font-size: 0.8rem;}

    /* notice */
    .notice_container{font-size:13px;}
    /* .notice_container1 span{display: none;} */
    .notice_container1 span:nth-child(1){display: none; }
    .notice_container1 span:nth-child(3){display: none;}
    .notice_container1 span:nth-child(4){display: none;}
    .notice_container1 span:nth-child(2){width:100%;}
    .notice_container2{display: none;}
    .mo_notice_container2{display:block; padding: 15px 20px; border-bottom:1px solid #000}
    .mo_notice_info{display: flex; margin:10px 0 5px 0}
    .mo_notice_info span{display: flex; border-right: 1px solid #d2d2d2;}
    .mo_notice_info span:last-child{border:none;}
    .mo_notice_span{cursor:pointer;}
    .mo_notice_container2 dd{margin:0 3px; padding: 0 3px;}
    .mo_notice_container2 .notice_title{font-size:18px; margin:0; padding:0;}
    .mo_notice_container2 .notice_writer{font-size:14px; color:#002863; margin:0; padding:0;}
    #notice{width:95%;}
    .notice_container{width:95vw;}

    /* contact */
    #contact>div{flex-direction: column;}
    #contact .contact_container .contact_container_left {width:100%;}
    #contact .contact_container .contact_container_right>div {margin:10px 0px;}
    .contact_kakao_img{width:80vw;}
    .contact_container3 h3{font-size:1rem;}

    #contact_customer{width:100%;}
    .contact_customer_title{width:100%;}
    .contact_logo{width:100px;}
    .contact_title{font-size:25px;}
    .contact_container1{width:100%;}
    .contact_customer_info{font-size:13px; letter-spacing: -1px;}
    .element{flex-direction: column; margin:0px; font-size:13px;}
    .element input::placeholder{
        font-size:10px;
    }
    .element input[type="text"]{padding:0 10px 0 0}
    .customer_form{width:100%;}
    .element_radio label{font-size:13px;}
    #radio_agree{width:16px;}
    .contact_container2 .submit[type="submit"]{width:95%; font-size:17px;}
    .service4_img{width:310px;}

    #history .history_contents1 .history_height_100{margin-bottom:-40px;}
    #history .history_contents1 .history_height_100 h4:before{content:"2021. "}

    #notice .notice_detail_container .detail_header{flex-direction: column; align-items:flex-start;}
    #notice .attach_file_container{flex-direction:column;}
    #notice .attach_file1{width:100%; border-right:none;}
    #notice .file_download_div{margin-bottom:10px;}


    #footer .footer_wrap{width: 100%; padding:50px 0; box-sizing: border-box;}
    #footer .footer_wrap .footer_top{flex-direction: column-reverse;}
    #footer .footer_wrap .footer_top p{margin: 20px;}
    #footer .footer_wrap .footer_top span{display: block;}
    #footer .footer_wrap .footer_top .top_link{position: absolute; top:0; left: 0; width: 100%;}
    #footer .footer_wrap .footer_top .top_link a{text-align: center; font-size: 0.7rem; transform: translateY(-150%); width: 48%;}
    #footer .footer_wrap .footer_top .top_link a:first-child::after{content: "|"; margin: 0; position: absolute; right: 0;}
    #footer .footer_wrap .footer_mid{margin: 20px;}
    #footer .footer_wrap .footer_mid p{font-size: 0.7rem;}
    #footer .footer_wrap .footer_btm p{color: #98a7b8; font-size: 12px; margin: 20px;}


    .footer_nav {
        flex-direction: column;
        margin:0 20px;
    }
    .footer_nav div{
        flex-direction: row;
        align-items: flex-start;
        width: auto;
        align-items:baseline;
        margin-left:0;
    }
    .footer_nav div span{
        margin:5px 8px;
        font-size:11px;
        color:#98a7b8;
    }
    .footer_nav div a{
        line-height: 1.5;
        margin: 5px 7px;
        font-size:9px;
    }
    #history .history_contents1 h4{font-size: calc(100vw * (100/1920));}
}