@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

*{padding: 0; border: 0; box-sizing: border-box; margin: 0;}
a{color: #000; text-decoration: none;}
ul, li{list-style: none;}
html, body{font-size: 10px; font-family: Montserrat; overflow-x: hidden;}
button{cursor: pointer;}

.flex{display: flex;}
.br{display: none;}

.pop_bg{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .7); z-index: 55; display: none;}
.pop{display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 56; }
.pop_bg.on,
.pop.on{display: block;} 
.img_pop .pop_header{height: 2rem;}
.img_pop .slick_wrap{display: flex; align-items: center;}
.pop_img_wrap{width: 100%; height: 90vh; margin: 2rem 0; display: block;}
.pop_img_wrap li{width: 100%; display: flex; align-items: center; justify-content: center;}
.img_pop img{width: 100%; min-width: 1200px; height: 100%;}
.img_pop .slick-list, .img_pop .slick-track, .img_pop .slick-slide{width: 100%; min-width: 1200px; height: 100%; overflow: hidden;}
.img_pop .pop_close{background: transparent; color: #fff; font-size: 2.4rem; position: absolute; right: 0; top: 0; z-index: 555;}
.img_pop .slick_wrap button{background: transparent; color: #fff; font-size: 2.4rem; position: absolute; z-index: 5;}
.img_pop .slick_wrap .bn_prev{left: -20%;}
.img_pop .slick_wrap .bn_next{right: -20%;}

.wrap{width: 100%; height: 100%; min-height: 100vh;}
.inner{width: 1200px; margin: 0 auto;}
header{width: 100%; height: 8.6rem; background: #222; display: flex; align-items: center; z-index: 5; transition: all .4s ease-in-out;}
.header-fixed{ position: fixed; top: 0; left: 0; transform: translateY(-100%);}
.header-fixed.show{ transform: translateY(0);}
header .inner{display: flex; align-items: center; justify-content: space-between;}
header .logo{width: 16rem;}
header .logo img{height: auto; width: 100%;}
header nav ul{display: flex; gap: 0;}
header nav li{padding: 0 2.6rem; position: relative;}
header nav > ul > li{padding: 3.6rem 2.6rem;}
header nav > ul > li > a{font-size: 1.3rem; color: #fff; padding: 4rem 0; position: relative; font-weight: 500; text-transform: uppercase;}
header nav > ul > li > a::before {content: ''; position: absolute; top: 60%; left: 0; width: 0; height: .1rem; background: #4faacf; transition: width .4s;}
header nav > ul > li:hover > a::before {width: 100%;}

header nav a:hover::before,
header nav .active a::before {width: 100%;}
header nav .dep2{position: absolute; width: 25.6rem; background: #fff; padding: 2.5rem 0; top: 99%; z-index: 55;  display: none;}
header nav .dep2 li:not(:last-child){margin-bottom: 1.6rem;}
header nav .dep2 a{color: #000; font-weight: 300; font-size: 1.5rem; display: flex; align-items: center; font-family: Roboto;}
header nav .dep2 a::before{content: ''; width: 0; height: 0.1rem; background: #4faacf; transition: all .4s; margin-right: 0.5rem;}
header nav .dep2 a:hover{color: #4faacf;}
header nav .dep2 a:hover::before{width: 1.5rem;}
.header-fixed{position: fixed; top: 0; left: 0;  transform: translateY(-100%);}
.header-fixed.show{transform: translateY(0);}

main{height: 100%; min-height: calc(100vh - 8.6rem);}

.full_h{min-height: calc(100vh - 8.6rem);}

section{position: relative;}
section.pd{padding: 13rem 0;}
section.bg{background: rgb(239  , 241, 243);}

.bg_section{width: 100%; height: 100vh;}
.bg_section .bg{width: 100%; height: 100vh; background: url(../images/bg.png) no-repeat top; background-size: cover; position: absolute; left: 0;}
.bg_section .txt{position: absolute; z-index: 1; color: #fff; top: 50%; transform: translateY(-100%);}
.bg_section .txt::before{content: ''; position: absolute; width: 35rem; height: 0.4rem; background: #4faacf; left: 0; top: 55%; transform: translateY(-90%); z-index: 1;}
.bg_section .big{font-size: 5.5rem; margin-bottom: 5rem;}
.bg_section .sm{font-size: 2.8rem;}

.bg_top_line{padding: 13rem 0;}
.bg_top_line::before{content: ''; width: 0.4rem; height: 12rem; background: #4faacf; position: absolute; left: 50%; transform: translateX(-50%); top: -6rem;}
.bg_top_line .inner{display: flex; justify-content: space-between; align-items: flex-start;}
.section .b_title{font-size: 3.2rem; position: relative; margin-bottom: 4rem; font-weight: 400; text-transform: uppercase;}
.section .b_title::after{content: ''; width: 9rem; height: 0.4rem; background: #4faacf; position: absolute; bottom: -1rem; left: 0;}
.text_section .txt{font-size: 2.2rem; width: 50%;  line-height: 3.6rem; margin-bottom: 4rem; font-family: Roboto; color: #333;}
.text_section .txt.w{width: 100%;}

.bn_section .bn_list{width: 100%; height: 100vh; display: flex;}
.bn_section .bn_list li{width: 50%; height: 100vh; background: url(../images/mill-work.jpg) no-repeat center; background-size: cover; position: relative;}
.bn_section .txt{position: absolute; text-align: left; z-index: 1; color: #fff; bottom: 10rem; left: 4rem; overflow: hidden; }
.bn_section .tit{font-size: 2.8rem; margin-bottom: 1.5rem;}
.bn_section .view{color: #fff; font-size: 1.8rem;}
.bn_list .tit_wrap,
.bn_list .view_wrap {display: block; opacity: 0; position: relative; top: 50px;}

.get_section{height: 80vh; background: url(../images/bg1.png) no-repeat center bottom; background-size: cover;}
.get_section::before{content: ''; width: 100%; height: 100%; background: rgba(0, 0, 0, .7); position: absolute; top: 0; left: 0;}
.get_section .txt_wrap{position: absolute; z-index: 2; color: #fff; top: 50%; transform: translateY(-50%);}
.get_section .txt{font-size: 2.2rem; margin-bottom: 2rem; font-family: Roboto; line-height: 3.6rem;}
.contact{background: #306377; padding: 1.6rem 3rem; color: #fff; font-size: 1.8rem; display: inline-block; transition: all .4s;}
.contact:hover{background: #222;}

footer{width: 100%; padding: 10rem 0 .6rem; background: #000;}
footer .company_nav{display: flex; gap: 10rem;}
footer .company_nav .f_nav{display: flex; gap: 10rem; color: #ffff;}
footer .company_nav .f_nav .tit{font-size: 2.2rem; margin-bottom: 2rem; font-weight: 500;}
footer .company_nav .f_nav ul li{display: flex; align-items: center; color: #fff;}
footer .company_nav .f_nav ul li:not(:last-child){margin-bottom: 1.5rem;}
footer .company_nav .f_nav ul li::before{content: ''; width: 0.6rem; height: 0.6rem; background: #306377; margin-right: 1rem;}
footer .company_nav .f_nav ul li a{font-size: 1.6rem; color: rgba(255, 255, 255, .8); transition: all .4s; font-family: Roboto;}
footer .company_nav .f_nav ul li a:hover{color: #fff;}
footer .company_sns{width: 100%; border-top: .1rem solid #fff; margin: 8rem 0 0; display: flex; align-items: center; justify-content: space-between; padding: 2rem 0;}
footer .company_sns p .tit{font-family: Montserrat;}
footer .company_sns p {font-size: 1.8rem; color: #fff; font-family: Roboto;}
.sns_list{gap: .4rem; display: flex;}
.sns_list a{display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; background: #306377; color: #fff; font-size: 1.4rem; transition: all .4s;}
.sns_list a:hover{background: #fff; color: #306377;}
.sns_list a i{font-size: 2rem;}

.up {position: fixed; width: 50px; height: 50px; right: 25px; bottom: 25px; margin: 0; background-color: #306377; opacity: 0; visibility: hidden; z-index: 10000; cursor: pointer; transition: all .4s; color: #fff;}
.up i{position: relative; z-index: 55;}
.up:after,.up:before {content: ''; position: absolute; height: 0; width: 50%; background: #101010; z-index: 1; -webkit-transition: .3s cubic-bezier(.785,.135,.15,.86); -o-transition: .3s cubic-bezier(.785,.135,.15,.86); transition: .3s cubic-bezier(.785,.135,.15,.86);}
.up:before {bottom: 0; left: 0; top: auto;}
.up:after {top: 0; right: 0; bottom: auto;}
.up.on{visibility: inherit; opacity: 1;}
.on:hover:before {
    height: 100%;
    top: 0;
    bottom: auto
}
.on:hover:after {
    height: 100%;
    bottom: 0;
    top: auto
}

.video_section video{width: 100%; height: 50rem; object-fit: cover;}
.manufacturing_section .inner{padding: 13rem 0;}
.maunFac_list{display: flex; flex-flow: row wrap; gap: 6rem 5rem; margin-bottom: 12rem;}
.maunFac_list li{width: 47.5%;}
.maunFac_list li:hover .learn{color: #000;}
.maunFac_list .thumb{margin-bottom: 2rem;}
.maunFac_list .thumb img{width: 100%; height: auto;}
.maunFac_list .tit{font-size: 2.8rem; margin-bottom: 1.5rem;}
.maunFac_list .learn{font-size: 1.8rem; font-weight: 500; color: #4faacf;}

.img_bg_section{height: 50rem;}
.img_bg_section::before{content: ''; width: 100%; height: 100%; background: rgba(0, 0, 0, .3); position: absolute; top: 0; left: 0;}
.img_bg_section .txt{position: absolute; top: 50%; transform: translateY(-50%); color: #fff; text-transform: uppercase;}
.img_bg_section .txt .tit{font-size: 5.6rem; font-weight: 400; letter-spacing: -1px;}
.img_bg_section .txt .sub_tit{font-size: 2.8rem; font-weight: 500;}
.manu_bg01{background: url(../images/cnc-machining-fullscreen.jpg) no-repeat center; background-size: cover; }
.manu_bg02{background: url(../images/mold-making-fullscreen-1.jpg) no-repeat center; background-size: cover;}
.manu_bg03{background: url(../images/prototyping-fullscreen.jpg) no-repeat center; background-size: cover;}
.manu_bg04{background: url(../images/griz1-scaled.jpg) no-repeat center; background-size: cover;}
.company_bg{background: url(../images/ranch1-1.jpg) no-repeat center; background-size: cover;}

.img_wrap_section{padding-bottom: 1rem;}
.img_wrap_section .img_wrap{display: flex; flex-flow: row wrap; gap: 1rem .5rem; justify-content: space-between;}
.img_wrap_section .img_wrap li{width: 49.7%; overflow: hidden; height: 36.6rem;}
.img_wrap_section .img_wrap a{display: block; width: 100%; height: 100%; overflow: hidden;}
.img_wrap_section .img_wrap li:nth-child(3), .img_wrap_section .img_wrap li:nth-child(5){width: 24.5%;}
.img_wrap_section .img_wrap li img{width: 100%; height: 100%; transform: scale(1.1) translateX(-1rem); transition: all .4s;}
.img_wrap_section .img_wrap li:hover img{transform: scale(1.1) translateX(0);}
.img_wrap_section.f .img_wrap li{width: 24.5% !important;}

.process_wrap .flex{gap: 4rem;}

.text_section .manuFac_list{display: flex; gap: 2rem; justify-content: center;}
.text_section .manuFac_list li{width: 50%;}
.text_section .manuFac_list li .title_wrap{position: relative;}
.text_section .manuFac_list li .title_wrap::before{content: ''; width: 100%; height: 99%; background: rgba(0, 0, 0, .3); position: absolute; top: 0; left: 0;}
.text_section .manuFac_list.dk li .title_wrap::before{content: ''; width: 100%; height: 99%; background: rgba(0, 0, 0, .8); position: absolute; top: 0; left: 0;}
.text_section .manuFac_list li img{width: 100%; height: auto;}
.text_section .manuFac_list li .tit_txt{position: absolute; width: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; text-align: center;}
.text_section .manuFac_list li .tit{font-size: 2.2rem; color: #fff;}
.text_section .manuFac_list li .sub_tit{font-size: 1.2rem; color: #999; margin-top: 0.6rem;}
.text_section .manuFac_list li .txt{font-size: 1.9rem; margin-top: 2rem; line-height: 2.8rem; width: 100%; font-weight: 400;}
.text_section .manuFac_list  .txt p{margin-bottom: 0.6rem;}
.dot_list{padding-left: 0.5rem;}
.dot_list li{width: 100% !important; display: flex;}
.dot_list li::before{content: ''; display: block; width: 0.5rem; min-width: .5rem; height: 0.5rem; background: #000; margin-right: 0.5rem; border-radius: 50%; position: relative; top: 1.5rem;}

.img_section{width: 100%;}
.img_section li{display: flex; flex-flow: row wrap; align-items: center;}
.img_section .img{width: 50%; --spacer-size: 592px; height: var(--spacer-size);}
.img_section .txt_wrap{width: 50%; padding: 0 8%;}
.img_section .txt_wrap .txt{margin-top: 1.5rem; font-size: 2.2rem; line-height: 3.6rem; font-family: Roboto;}
.img_section li:nth-child(1) .img,
.img_section li:nth-child(3) .img{background: url(../images/IMG_3998-scaled.jpeg); background-size: cover;}
.img_section li:nth-child(2) .img{background: url(../images/IMG_3808-scaled.jpeg); background-size: cover;}

.company_txt .tit{font-size: 4.2rem; font-weight: 700; letter-spacing: 0; font-family: Roboto; line-height: 5.6rem; width: 48%; min-width: 48%; margin-right: 5rem;}
.company_txt .txt{font-size: 2.2rem;}

.section .w_tit{color: #fff; font-weight: 900; font-size: 5.6rem; text-transform: uppercase; text-align: center;}
.join_section::before{content: ''; position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, .5); top: 0; left: 0;}
.join_section{background: url(../images/pistols-1.jpg) no-repeat center; background-size: cover; height: 50rem;}
.join_section .txt_wrap{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; width: 100%;}
.join_section .contact{display: inline-block; margin: 2rem auto 0; position: relative; left: 50%; transform: translateX(-50%);}

.quality_txt .txt_wrap{display: flex; gap: 4rem; justify-content: space-between;}
.quality_txt .txt_wrap .txt{width: 50%;}
.quality_txt .dot_list{margin-top: 4rem;}
.quality_txt .thumbnail-wrapper{width: 50%;}
.quality_txt .thumbnail-wrapper .thumb{width: 100%;height: 100%;position: relative;background: url(../images/bison5.jpg) no-repeat center;background-size: cover;}
.quality_txt .thumbnail-wrapper .play-button{color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 8rem;}
.quality_txt .video-frame{width: 100%; height: 100%; display: none;}

.partner_section{width: 100%; height: 100%; background: #000;}
.partner_list{display: flex; gap: 5rem 3rem; flex-flow: row wrap; margin: 4rem auto;}
.partner_list li{width: 31.5%; display: flex; align-items: center; justify-content: center;}
.partner_list li img{width: 16rem; display: block; margin: 0 auto;}
.partner_list li:nth-child(1) img, .partner_list li:nth-child(6) img{width: 13rem;}

.solution_link{display: flex; gap: 1rem; flex-flow: row wrap;}
.solution_link li{width: 49.5%; position: relative;}
.solution_link li img{width: 100%;}
.solution_link li a::before{content: ''; position: absolute; width: 100%; height: 99%; background: rgba(0, 0, 0, .3); top: 0; left: 0;}
.solution_link .tit{width: 100%; text-align: center; font-size: 2.2rem; color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;}

.contact_section .inner{display: flex; gap: 3rem;}
.contact_box{width: 50%;}
.contact_box.w{background: #fff; padding: 4.8rem 6rem; width: 100%;}
.contact_box .txt{font-family: Roboto; font-size: 2.2rem; line-height: 3.6rem; margin-bottom: 3.5rem;}
.contact_box .sns_list{gap: .4rem;}
.contact_box .sns_list a{width: 3.2rem; height: 3.2rem; color: #fff;}
.contact_box .sns_list i{width: 2rem;}
.contact_box .sns_list a:hover{background: #000;}
.contact_box .sns_list a:hover i{color: #fff;}
.contact_box iframe{width: 100%;}
.link{color: #306377; text-decoration: underline; transition: all .4s;}
.link:hover{color: #000;}

.warranty_section{text-align: center;}
.warranty_section .tit,
.carrer_section .tit{font-size: 5.6rem; margin-bottom: 8rem; font-weight: 400; text-transform: uppercase;}
.warranty_section .txt{font-size: 2.2rem; line-height: 3.6rem; font-weight: 400; font-family: Roboto;}
.warranty_section iframe, .carrer_section iframe{margin-top: 3rem; width: 100%;}

.carrer_section .txt_cont + .txt_cont{margin-top: 12rem;}
.carrer_section .txt_cont .txt{font-size: 2.2rem; line-height: 3.6rem; font-family: Roboto;}

ul.txt li{font-size: 2rem;}
ul.txt li{display: flex; align-items: center; position: relative; padding-left: 0.4rem;}
ul.txt li div{padding-left: 0.8rem;}
ul.txt li::before{content: '•'; margin-right: .4rem; align-items: flex-start; position: absolute; top: 0;}

.mo{display: none;}

.contact_form{width: 100%; border-radius: 1.6rem; background: #f8f8f8; padding: 2rem 3.2rem;}
.contact_form .input_wrap:not(:first-child){margin-top: 2rem; display: block;}
.contact_form .label{font-size: 1.6rem; margin-bottom: 0; line-height: 1.2;}
.contact_form .label_tit{margin-bottom: 0.6rem;}
.contact_form .sm{font-size: 1.2rem;}
.contact_form input,
.contact_form textarea,
.contact_form select{width: 100%; border-radius: .8rem; padding: 1.2rem 1.6rem; border: .1rem solid #efefef;}
.contact_form textarea{resize: none; min-height: 20rem;}
.contact_form .btn-blue{display: block; margin: 0 auto; border-radius: .8rem; color: #fff; font-size: 1.6rem; padding: 1.2rem; background: #2a6ec7;}
#dropZone{width: 100%; max-height: 20rem; overflow-y: auto; border-radius: .8rem; background: #fff; border: .1rem solid #efefef;}
#dropZone td{font-size: 1.2rem;}
#dropZone .delete-btn{width: 2rem; vertical-align:inherit; padding: 1rem; border-radius: 50%; height: 2rem; background: #efefef url(../images/close.png) no-repeat center; background-size: 50%;}


.upload-btn-wrapper {
position: relative;
overflow: hidden;
display: inline-block;
}

.upload-btn {
border: 2px solid gray;
color: gray;
background-color: white;
padding: 8px 20px;
border-radius: 8px;
font-size: 20px;
font-weight: bold;
}

.upload-btn-wrapper input[type=file] {
font-size: 100px;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}

#fileDragDesc {
width: 100%; 
height: 100%; 
margin-left: auto; 
margin-right: auto; 
padding: 5px; 
text-align: center; 
line-height: 150px; }

.pop_bg{}
.otp_pop{ width: 40rem; border-radius: 2rem; padding: 3.2rem 2rem; background: #fff; font-family: 'Roboto';}
.otp_pop .tit{font-size: 1.8rem; font-weight: bold; text-align: center; margin-bottom: 1.2rem;}
.otp_pop .txt{font-size: 1.4rem; text-align: center; margin-bottom: 1rem;}
.otp_pop .num{font-size: 2rem; letter-spacing: 1.2rem; text-align: center; font-weight: bold; color: rgb(50, 108, 174);}
.otp_pop input{display: block; width: 100%; border-radius: .6rem; border: .1rem solid #efefef; margin: 1rem 0; font-size: 1.2rem; padding: 1rem .8rem;}
.otp_pop .btn_wrap{display: flex; justify-content: center; gap: .4rem;}
.otp_pop .btn_wrap button{border-radius: .6rem; padding: 1rem .8rem; font-size: 1.2rem; min-width: 10rem;}
.otp_pop .btn_blue{background: rgb(50, 108, 174); color: #fff;}

@media screen and (max-width: 1680px) {
    .img_pop .slick_wrap .bn_prev{left: -10%;}
    .img_pop .slick_wrap .bn_next{right: -10%;}
}

@media screen and (max-width: 1460px) {
    .img_pop .slick_wrap .bn_prev{left: 0%;}
    .img_pop .slick_wrap .bn_next{right: 0%;}
}

@media screen and (max-width: 1300px) {
    
    .inner{width: 1100px; margin: 0 auto;}

    .img_pop {width: 100%; height: 90vh;}
    .img_pop .inner{width: 100% !important;}
    .img_pop .pop_header{height: 2rem;}
    .img_pop .slick_wrap{display: flex; align-items: center; position: absolute; top: 50%; transform: translateY(-50%); width: 100%;}
    .img_pop .slick-list {position: relative;}
    .pop_img_wrap{width: 100%; height: 80vh; margin: 2rem 0; display: block;}
    .img_pop .slick-list, .img_pop .slick-track, .img_pop .slick-slide, .pop_img_wrap li {height: 100%; width: 100%;}
    .img_pop img{width: 100%; height: 100%; object-fit: contain; min-width: inherit; max-width: 100%;}
    .img_pop .pop_close{background: transparent; color: #fff; font-size: 2.4rem; position: absolute; right: 1rem; top: 0;}
    .img_pop .slick_wrap button{background: transparent; color: #fff; font-size: 2.4rem; position: absolute; z-index: 5;}
    .img_pop .slick_wrap .bn_prev{left: 0;}
    .img_pop .slick_wrap .bn_next{right: 0;}

   
}
@media screen and (max-width: 1024px) {
    .mo{display: block;}
    .mo_none{display: none;}

    .inner{margin: 0 2rem; width: 100%;}
        
    .img_pop {width: 100%;}
    .img_pop .inner{width: 100% !important; margin: 0;}
    .img_pop .pop_header{height: 2rem;}
    .img_pop .slick_wrap{display: flex; align-items: center; position: absolute; top: 50%; transform: translateY(-50%); width: 100%;}
    .img_pop .slick-list {position: relative;}
    .pop_img_wrap{width: 100%; height: 80vh; margin: 2rem 0; display: block;}
    .img_pop .slick-list, .img_pop .slick-track, .img_pop .slick-slide, .pop_img_wrap li {height: 100%; width: 100%; min-width: inherit;}
    .img_pop img{width: 100%; height: 90rem; object-fit: cover; min-width: inherit; max-width: 100%;}
    .img_pop .slick_wrap .bn_prev{left: 0;}
    .img_pop .slick_wrap .bn_next{right: 0;}

    #qodef-mobile-header-opener .qodef-lines,#qodef-side-area #qodef-side-area-close.qodef-side-area-close--predefined .qodef-lines,.qodef-side-area-opener.qodef-side-area-opener--predefined .qodef-lines {
        position: relative;
        display: block;
        width: 33px;
        height: 18px
    }

    #qodef-mobile-header-opener .qodef-lines .qodef-line,#qodef-side-area #qodef-side-area-close.qodef-side-area-close--predefined .qodef-lines .qodef-line,.qodef-side-area-opener.qodef-side-area-opener--predefined .qodef-lines .qodef-line {
        position: absolute;
        left: 0;
        height: 2px;
        background-color: #fff;
        -webkit-transition: top .3s ease,-webkit-transform .3s ease;
        transition: top .3s ease,-webkit-transform .3s ease;
        -o-transition: top .3s ease,transform .3s ease;
        transition: top .3s ease,transform .3s ease;
        transition: top .3s ease,transform .3s ease,-webkit-transform .3s ease
    }

    #qodef-mobile-header-opener .qodef-lines .qodef-line.qodef-line-1,#qodef-side-area #qodef-side-area-close.qodef-side-area-close--predefined .qodef-lines .qodef-line.qodef-line-1,.qodef-side-area-opener.qodef-side-area-opener--predefined .qodef-lines .qodef-line.qodef-line-1 {
        top: 0;
        width: 3px
    }

    #qodef-mobile-header-opener .qodef-lines .qodef-line.qodef-line-2,#qodef-side-area #qodef-side-area-close.qodef-side-area-close--predefined .qodef-lines .qodef-line.qodef-line-2,.qodef-side-area-opener.qodef-side-area-opener--predefined .qodef-lines .qodef-line.qodef-line-2 {
        top: 0;
        right: 0;
        left: auto;
        width: 21px;
        -webkit-transition: width .3s cubic-bezier(.29,.21,0,.97);
        -o-transition: width .3s cubic-bezier(.29,.21,0,.97);
        transition: width .3s cubic-bezier(.29,.21,0,.97)
    }

    #qodef-mobile-header-opener .qodef-lines .qodef-line.qodef-line-3,#qodef-side-area #qodef-side-area-close.qodef-side-area-close--predefined .qodef-lines .qodef-line.qodef-line-3,.qodef-side-area-opener.qodef-side-area-opener--predefined .qodef-lines .qodef-line.qodef-line-3 {
        top: 8px;
        width: 27px;
        -webkit-transition: left .3s cubic-bezier(.29,.21,0,.97);
        -o-transition: left .3s cubic-bezier(.29,.21,0,.97);
        transition: left .3s cubic-bezier(.29,.21,0,.97)
    }

    #qodef-mobile-header-opener .qodef-lines .qodef-line.qodef-line-4,#qodef-side-area #qodef-side-area-close.qodef-side-area-close--predefined .qodef-lines .qodef-line.qodef-line-4,.qodef-side-area-opener.qodef-side-area-opener--predefined .qodef-lines .qodef-line.qodef-line-4 {
        bottom: 0;
        width: 100%;
        -webkit-transition: width .3s cubic-bezier(.29,.21,0,.97);
        -o-transition: width .3s cubic-bezier(.29,.21,0,.97);
        transition: width .3s cubic-bezier(.29,.21,0,.97)
    }

    #qodef-mobile-header-opener .qodef-lines .qodef-line.qodef-line-5,#qodef-side-area #qodef-side-area-close.qodef-side-area-close--predefined .qodef-lines .qodef-line.qodef-line-5,.qodef-side-area-opener.qodef-side-area-opener--predefined .qodef-lines .qodef-line.qodef-line-5 {
        bottom: 0;
        left: 30px;
        width: 3px
    }

    #qodef-mobile-header-opener.qodef--opened {
        color: #fff
    }

    #qodef-mobile-header-opener.qodef--opened .qodef-lines .qodef-line.qodef-line-2 {
        width: 100%;
        -webkit-transition: width .3s cubic-bezier(.29,.21,0,.97);
        -o-transition: width .3s cubic-bezier(.29,.21,0,.97);
        transition: width .3s cubic-bezier(.29,.21,0,.97)
    }

    #qodef-mobile-header-opener.qodef--opened .qodef-lines .qodef-line.qodef-line-3 {
        left: 6px;
        -webkit-transition: left .3s cubic-bezier(.29,.21,0,.97);
        -o-transition: left .3s cubic-bezier(.29,.21,0,.97);
        transition: left .3s cubic-bezier(.29,.21,0,.97)
    }

    #qodef-mobile-header-opener.qodef--opened .qodef-lines .qodef-line.qodef-line-4 {
        width: 21px;
        -webkit-transition: width .3s cubic-bezier(.29,.21,0,.97);
        -o-transition: width .3s cubic-bezier(.29,.21,0,.97);
        transition: width .3s cubic-bezier(.29,.21,0,.97)
    }

    header{height: 8.6rem;}
    header .logo{width: 19rem;}
    header .logo img{height: auto; width: 100%;}
    header nav{position: absolute; width: 100%; background: #fff; left: 0; top: 8.6rem; z-index: 5555;}
    header nav > ul{width: 76.8rem; margin: 0 auto; flex-flow: column; padding: 2rem 0; display: none;}
    header nav li{padding: 0 2.6rem; position: relative;}
    header nav > ul > li{padding: 0 2.6rem;}
    header nav > ul > li > a{color: #000; font-size: 1.5rem; padding: .6rem 0; display: flex; justify-content: space-between; text-transform: initial;}
    header nav > ul > li > a:hover{text-decoration: underline; color: #4faacf;}
    header nav > ul > li.hasDeps > a::after{content: '\203A';text-decoration: none;font-size: 2.5rem;transition: all .4s;position: absolute;right: 0;top: 50%;transform: translateY(-60%);}
    header nav > ul > li.hasDeps.on > a::after{right: 0;top: 50%;transform: rotate(90deg) translate(-190%, 10%);}
    header nav > ul > li > a::before {display: none;}
    
    header nav > ul > li > a:hover::after,
    header nav > ul > li.hasDeps > a:hover::after {
        text-decoration: none;
    }

    header nav a:hover::before,
    header nav .active a::before {width: 100%;}
    header nav .active a{color: #4faacf;}
    header nav .dep2{position: relative; width: 100%; padding: 0; display: none; padding: 1rem 0 1rem 1rem;}
    header nav .dep2 li{padding: 0;}
    header nav .dep2 a{color: #000; font-size: 1.5rem; display: flex; align-items: center;}
    header nav .dep2 a::before{display: none;}
    header nav .dep2 a:hover{color: #4faacf; text-decoration: underline;}

    section{position: relative;}
    section.pd{padding: 10rem 0;}
    section .inner{width: 76.8rem; margin: 0 auto;}

    .bg_section{height: 90vh;}
    .bg_section .txt{position: absolute; z-index: 1; color: #fff; top: 50%; transform: translateY(-50%);}
    .bg_section .txt::before{width: 28rem; height: 0.4rem; left: 0; top: 70%; transform: translateY(-90%);}
    .bg_section .big{font-size: 5.5rem; margin-bottom: 2.5rem;}
    .bg_section .sm{font-size: 2.8rem;}

    .bg_top_line{padding: 13rem 0;}
    .bg_top_line::before{content: ''; width: 0.4rem; height: 12rem; top: -6rem;}
    .bg_top_line .inner{flex-flow: column;}
    .section .b_title{font-size: 3.6rem; position: relative; margin-bottom: 4rem; font-weight: 400; text-transform: uppercase;}
    .section .b_title::after{content: ''; width: 9rem; height: 0.4rem;  position: absolute; bottom: -1rem; left: 0;}
    .text_section .txt{font-size: 2.2rem; width: 100%; line-height: 3.6rem; margin-bottom: 4rem; font-family: Roboto; color: #333;}

    .bn_section .bn_list{width: 100%; height: 100vh;}
    .bn_section .bn_list li{width: 100%; height: 100vh; background: url(../images/mill-work.jpg) no-repeat center; background-size: cover;}
    .bn_section .txt{position: absolute; text-align: left; z-index: 1; color: #fff; bottom: 10rem; left: 4rem; overflow: hidden; }
    .bn_section .tit{font-size: 2.8rem; margin-bottom: 1.5rem;}
    .bn_section .view{color: #fff; font-size: 1.8rem;}
    .bn_list .tit_wrap br{display: none;}
    .bn_list .tit_wrap,
    .bn_list .view_wrap {display: block; opacity: 1; position: relative; top: 0;}

    .get_section{height: 80vh; background: url(../images/camo-army-soldier.jpg) no-repeat center; background-size: cover;}
    .get_section::before{content: ''; width: 100%; height: 100%; background: rgba(0, 0, 0, .7); position: absolute; top: 0; left: 0;}
    .get_section .txt_wrap{position: absolute; z-index: 2; color: #fff; top: 50%; transform: translateY(-50%);}
    .get_section .txt{font-size: 2.2rem; margin-bottom: 2rem; font-family: Roboto; line-height: 3.6rem;}
    .contact{background: #306377; padding: 1.6rem 3rem; color: #fff; font-size: 1.8rem; display: inline-block; transition: all .4s;}
    .contact:hover{background: #222;}

    footer{width: 100%; padding: 10rem 0 .6rem;}
    footer .inner{width: 76.8rem; margin: 0 auto;}
    footer .company_nav{display: flex; gap: 10rem; flex-flow: column;}
    footer .company_nav .f_nav{display: flex; gap: 10rem; color: #ffff;}
    footer .company_nav .f_nav .tit{font-size: 2.2rem; margin-bottom: 2rem; font-weight: 500;}
    footer .company_nav .f_nav{flex-flow: column;display: flex;margin-top: -18rem;position: relative;left: 50%;}
    footer .company_nav .f_nav > li:nth-child(2){position: absolute; left: -50%; top: 48%;}
    footer .company_nav .f_nav li:not(:last-child){margin-bottom: 1.5rem;}
    footer .company_nav .f_nav li::before{content: ''; width: 0.6rem; height: 0.6rem; margin-right: 1rem;}
    footer .company_nav .f_nav li a{font-size: 1.6rem;}
    footer .company_nav .f_nav li a:hover{color: #fff;}
    footer .company_sns{width: 100%; border-top: .1rem solid #fff; margin: 8rem 0 0; display: flex; align-items: center; justify-content: space-between; padding: 2rem 0;}
    footer .company_sns p {line-height: 3.6rem;}
    .sns_list{gap: 1rem; display: flex;}
    .sns_list a{display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; font-size: 1.4rem;}
    .sns_list a i{font-size: 2rem;}

    .up {position: fixed; width: 50px; height: 50px; right: 25px; bottom: 25px; margin: 0; opacity: 0;}

    .video_section video{width: 100%; height: 50rem; object-fit: cover;}
    .manufacturing_section .inner{padding: 13rem 0;}
    .maunFac_list{display: flex; flex-flow: row wrap; gap: 6rem 5rem; margin-bottom: 12rem;}
    .maunFac_list li{width: 46%;}
    .maunFac_list li:hover .learn{color: #000;}
    .maunFac_list .thumb{margin-bottom: 2rem;}
    .maunFac_list .thumb img{width: 100%; height: auto;}
    .maunFac_list .tit{font-size: 2.8rem; margin-bottom: 1.5rem;}
    .maunFac_list .learn{font-size: 1.8rem; font-weight: 500; color: #4faacf;}

    .img_bg_section{height: 50rem;}
    .img_bg_section::before{content: ''; width: 100%; height: 100%; background: rgba(0, 0, 0, .3); position: absolute; top: 0; left: 0;}
    .img_bg_section .txt{position: absolute; top: 50%; transform: translateY(-50%); color: #fff; text-transform: uppercase;}
    .img_bg_section .txt .tit{font-size: 5.6rem; font-weight: 400; letter-spacing: -1px;}
    .img_bg_section .txt .sub_tit{font-size: 2.8rem; font-weight: 500;}
    .manu_bg01{background: url(../images/cnc-machining-fullscreen.jpg) no-repeat center; background-size: cover; }
    .manu_bg02{background: url(../images/mold-making-fullscreen-1.jpg) no-repeat center; background-size: cover;}
    .manu_bg03{background: url(../images/prototyping-fullscreen.jpg) no-repeat center; background-size: cover;}
    .manu_bg04{background: url(../images/griz1-scaled.jpg) no-repeat center; background-size: cover;}
    .company_bg{background: url(../images/ranch1-1.jpg) no-repeat center; background-size: cover;}

    .img_wrap_section{padding-bottom: 1rem;}
    .img_wrap_section .img_wrap{display: flex; flex-flow: row wrap; gap: 1rem .5rem; justify-content: space-between;}
    .img_wrap_section .img_wrap li{width: 100%; overflow: hidden; height: 45rem;}
    .img_wrap_section .img_wrap a{display: block; width: 100%; height: 100%; overflow: hidden;}
    .img_wrap_section .img_wrap li:nth-child(3), .img_wrap_section .img_wrap li:nth-child(5){width: 49.5%;}
    .img_wrap_section .img_wrap li:nth-child(5){position: absolute; right: 0; top: 50%;}
    .img_wrap_section .img_wrap li img{width: 100%; height: 100%; transform: scale(1.1) translateX(-1rem); transition: all .4s;}
    .img_wrap_section .img_wrap li:hover img{transform: scale(1.1) translateX(0);}
    .img_wrap_section.f .img_wrap li{width: 49.5% !important;}

    .process_wrap .flex{gap: 2rem; flex-flow: column;}
    .process_wrap .flex .txt{margin-bottom: 0;}

    .text_section .manuFac_list{display: flex; gap: 2rem; justify-content: center; flex-flow: row wrap;}
    .text_section .manuFac_list li{width: 100%;}
    .text_section .manuFac_list li .title_wrap{position: relative;}
    .text_section .manuFac_list li img{width: 100%; height: auto;}
    .text_section .manuFac_list li .tit{font-size: 2.2rem; color: #fff;}
    .text_section .manuFac_list li .sub_tit{font-size: 1.2rem; color: #999; margin-top: 0.6rem;}
    .text_section .manuFac_list li .txt{font-size: 1.9rem; margin-top: 2rem; line-height: 2.8rem; width: 100%; font-weight: 400;}
    .text_section .manuFac_list  .txt p{margin-bottom: 0.6rem;}
    .dot_list{padding-left: 0.5rem;}
    .dot_list li::before{content: ''; display: block; width: 0.5rem; min-width: .5rem; height: 0.5rem; background: #000; margin-right: 0.5rem; border-radius: 50%; position: relative; top: 1.5rem;}

    .img_section{width: 100%;}
    .img_section li{display: flex; flex-flow: row wrap; align-items: center;}
    .img_section .img{width: 100%; --spacer-size: 592px; height: var(--spacer-size);}
    .img_section .txt_wrap{width: 100%; padding: 7rem 14rem;}
    .img_section li:nth-child(2){flex-flow: column-reverse;}
    .img_section .txt_wrap .txt{margin-top: 1.5rem; font-size: 2.2rem; line-height: 3.6rem; font-family: Roboto;}
    .img_section li:nth-child(1) .img,
    .img_section li:nth-child(3) .img{background: url(../images/IMG_3998-scaled.jpeg); background-size: cover;}
    .img_section li:nth-child(2) .img{background: url(../images/IMG_3808-scaled.jpeg); background-size: cover;}

    .company_txt .inner{flex-flow: column;}
    .company_txt .tit{font-size: 3.2rem; line-height: 4rem; width: 100%; min-width: 100%; margin-right: 5rem;}
    .company_txt .txt{font-size: 2.2rem; margin-top: 3rem; line-height: 3.6rem;}

    .section .w_tit{color: #fff; font-weight: 900; font-size: 5.6rem; text-transform: uppercase; text-align: center;}
    .join_section::before{content: ''; position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, .5); top: 0; left: 0;}
    .join_section{background: url(../images/pistols-1.jpg) no-repeat center; background-size: cover; height: 50rem;}
    .join_section .txt_wrap{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;}
    .join_section .contact{display: inline-block; margin: 2rem auto 0; position: relative; left: 50%; transform: translateX(-50%);}

    .quality_txt .txt_wrap{flex-flow: column;}
    .quality_txt .txt_wrap .txt{width: 100%;}
    .quality_txt .dot_list{margin-top: 4rem;}
    .quality_txt .thumbnail-wrapper{width: 100%; height: 43rem;}
    .quality_txt .thumbnail-wrapper .play-button{font-size: 8rem;}

    .partner_list{display: flex; gap: 5rem 3rem; flex-flow: row wrap; margin: 5rem auto;}
    .partner_list li{width: 30.5%; display: flex; align-items: center; justify-content: center;}
    .partner_list li img{width: 16rem; display: block; margin: 0 auto;}
    .partner_list li:nth-child(1) img, .partner_list li:nth-child(6) img{width: 13rem;}

    .solution_link{display: flex; gap: 3rem; flex-flow: row wrap;}
    .solution_link li{width: 100%; position: relative;}
    .solution_link li a::before{content: ''; position: absolute; width: 100%; height: 99%; background: rgba(0, 0, 0, .3); top: 0; left: 0;}
    .solution_link .tit{font-size: 2.2rem; color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;}

    .contact_section .inner{display: flex; gap: 0; flex-flow: row wrap;}
    .contact_box{width: 100%;}
    .contact_box.w{background: #fff; padding: 4.8rem 6rem}
    .contact_box .txt{font-family: Roboto; font-size: 2.2rem; line-height: 3.6rem; margin-bottom: 3.5rem;}
    .contact_box .sns_list{gap: .4rem;}
    .contact_box .sns_list a{width: 3.2rem; height: 3.2rem; color: #fff;}
    .contact_box .sns_list i{font-size: 1.6rem;}
    .contact_box .sns_list a:hover{background: #000;}
    .contact_box .sns_list a:hover i{color: #fff;}
    .contact_box iframe{width: 100%;}
    .link{color: #306377; text-decoration: underline; transition: all .4s;}
    .link:hover{color: #000;}

    .warranty_section{text-align: center;}
    .warranty_section .tit,
    .carrer_section .tit{font-size: 5.6rem; margin-bottom: 8rem; font-weight: 400; text-transform: uppercase;}
    .warranty_section .txt{font-size: 2.2rem; line-height: 3.6rem; font-weight: 400; font-family: Roboto;}
    .warranty_section iframe, .carrer_section iframe{margin-top: 3rem; width: 100%;}

    .carrer_section .txt_cont + .txt_cont{margin-top: 12rem;}
    .carrer_section .txt_cont .txt{font-size: 2.2rem; line-height: 3.6rem;}

}

@media screen and (max-width: 768px) {

    .full_h{min-height: calc(100vh - 7rem);}

    .br{display: block !important;}

    .inner{margin: 0 1.5rem; width: 100%;}

    .img_pop{height: 50vh;}
    .pop_img_wrap li{position: relative;}
    .img_pop img{width: 100%; height: 45rem; object-fit: cover; min-width: inherit; max-width: 100%; position: absolute; top: 50%; transform: translateY(-50%);}

    header{height: 7rem;}
    header .logo{width: 16rem;}
    header nav{top: 7rem;}
    header nav > ul{width: 100%; padding: 2rem 0; display: none;}
    header nav li{padding: 0 2.6rem; position: relative;}
    header nav > ul > li{padding: 0 2.6rem;}
    header nav > ul > li > a{color: #000; font-size: 1.5rem; padding: .6rem 0; display: flex; justify-content: space-between; text-transform: inherit;}
    header nav > ul > li > a:hover{text-decoration: underline; color: #4faacf;}
    header nav > ul > li.hasDeps > a::after{content: '\203A';text-decoration: none;font-size: 2.5rem;transition: all .4s;position: absolute;right: 0;top: 50%;transform: translateY(-60%);}
    header nav > ul > li.hasDeps.on > a::after{right: 0;top: 50%;transform: rotate(90deg) translate(-190%, 10%);}
    header nav > ul > li > a::before {display: none;}
    
    header nav > ul > li > a:hover::after,
    header nav > ul > li.hasDeps > a:hover::after {
        text-decoration: none;
    }

    header nav a:hover::before,
    header nav .active a::before {width: 100%;}
    header nav .active a{color: #4faacf;}
    header nav .dep2{position: relative; width: 100%; padding: 0; display: none; padding: 1rem 0 1rem 1rem;}
    header nav .dep2 li{padding: 0;}
    header nav .dep2 a{color: #000; font-size: 1.5rem; display: flex; align-items: center;}
    header nav .dep2 a::before{display: none;}
    header nav .dep2 a:hover{color: #4faacf; text-decoration: underline;}

    section{position: relative;}
    section.pd{padding: 10rem 0;}
    section .inner{width: 42rem; margin: 0 auto;}

    .bg_section{height: 90vh;}
    .bg_section::before{width: 14rem; height: 0.1rem; left: 1.5rem; top: 53%; transform: translateY(-90%);}
    .bg_section .txt{position: absolute; z-index: 1; color: #fff; top: 50%; transform: translateY(-50%);}
    .bg_section .big{font-size: 3.6rem; margin-bottom: 2rem; letter-spacing: -1.36px;}
    .bg_section .sm{font-size: 2.1rem;}

    .bg_top_line{padding: 13rem 0;}
    .bg_top_line::before{content: ''; width: 0.4rem; height: 12rem; top: -6rem;}
    .bg_top_line .inner{flex-flow: column;}
    .section .b_title{font-size: 3.2rem; position: relative; margin-bottom: 4rem; font-weight: 400; text-transform: uppercase;}
    .section .b_title::after{content: ''; width: 9rem; height: 0.4rem;  position: absolute; bottom: -1rem; left: 0;}
    .text_section .txt{font-size: 1.8rem;line-height:2.8rem; margin-bottom: 4rem;}

    .bn_section .bn_list{width: 100%; height: 80vh;}
    .bn_section .bn_list li{width: 100%; height: 80vh; background: url(../images/mill-work.jpg) no-repeat center; background-size: cover;}
    .bn_section .txt{position: absolute; text-align: left; z-index: 1; color: #fff; bottom: 10rem; left: 4rem; overflow: hidden; }
    .bn_section .tit{font-size: 2.8rem; margin-bottom: 1.5rem;}
    .bn_section .view{color: #fff; font-size: 1.8rem;}
    .bn_list .tit_wrap,
    .bn_list .view_wrap {display: block; opacity: 1; position: relative; top: 0;}

    .get_section{height: 50vh;}
    .get_section .txt{font-size: 1.8rem; margin-bottom: 2rem; line-height: 2.8rem;}
    .get_section br{display: none;}
    .get_section .mo_none{display: block;}
    .contact{background: #306377; padding: 1.6rem 3rem; color: #fff; font-size: 1.8rem; display: inline-block; transition: all .4s;}
    .contact:hover{background: #222;}

    footer{width: 100%; padding: 10rem 0 .6rem;}
    footer .inner{width: 42rem;}
    footer .company_nav{ gap: 5rem;}
    footer .company_nav .f_nav{ gap: 2rem;}
    footer .company_nav .f_nav .tit{font-size: 2.2rem; margin-bottom: 2rem; font-weight: 500;}
    footer .company_nav .f_nav{flex-flow: column;display: flex;margin-top: 0;position: relative;left: 0;}
    footer .company_nav .f_nav > li:nth-child(2){position: static; left: inherit; top: inherit;}
    footer .company_nav .f_nav li:not(:last-child){margin-bottom: 3rem;}
    footer .company_nav .f_nav li::before{content: ''; width: 0.6rem; height: 0.6rem; margin-right: 1rem;}
    footer .company_nav .f_nav li a{font-size: 1.6rem;}
    footer .company_nav .f_nav li a:hover{color: #fff;}
    footer .company_sns{flex-flow: column; margin: 8rem 0 0; padding: 2rem 0;}
    footer .company_sns p {font-size: 1.8rem; line-height: 2.8rem; text-align: center; margin-bottom: 2rem;}
    footer .company_sns p br{display: none;}
    .sns_list{gap: 1rem; display: flex;}
    .sns_list a{display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; font-size: 1.4rem;}
    .sns_list a i{font-size: 2rem;}

    .up {position: fixed; width: 50px; height: 50px; right: 25px; bottom: 25px; margin: 0; opacity: 0;}

    .video_section video{width: 100%; height: 50rem; object-fit: cover;}
    .manufacturing_section .inner{padding: 6rem 0;}
    .manufacturing_section .b_title{font-size: 3rem;}
    .maunFac_list{display: flex; flex-flow: row wrap; gap: 0 5rem; margin-bottom: 6rem;}
    .maunFac_list li{width: 100%;}
    .maunFac_list .thumb{margin-bottom: 2rem;}
    .maunFac_list .thumb img{width: 100%; height: auto;}
    .maunFac_list .tit{font-size: 2.8rem; margin-bottom: 1.5rem;}
    .maunFac_list .learn{font-size: 1.8rem; font-weight: 500; color: #4faacf;}

    .img_bg_section{height: 50rem;}
    .img_bg_section .txt .tit{font-size: 4.4rem;}
    .img_bg_section .txt .sub_tit{font-size: 2.6rem;}

    .img_wrap_section{padding-bottom: 1rem;}
    .img_wrap_section .img_wrap{display: flex; flex-flow: row wrap; gap: 1rem .2rem; justify-content: space-between;}
    .img_wrap_section .img_wrap li{width: 100%; overflow: hidden; height: auto;}
    .img_wrap_section .img_wrap li:nth-child(3), .img_wrap_section .img_wrap li:nth-child(5){width: 100%;}
    .img_wrap_section .img_wrap li:nth-child(5){position: static;}
    .img_wrap_section.f .img_wrap li{width: 100% !important;}

    .process_wrap .flex{gap: 1rem;}

    .text_section .manuFac_list{display: flex; gap: 1rem; justify-content: center; flex-flow: row wrap;}
    .text_section .manuFac_list li .tit{font-size: 2.2rem; margin: 0 auto; width: 80%; white-space: initial;}
    .text_section .manuFac_list li .sub_tit{font-size: 1.2rem;  margin-top: 0.6rem;}
    .text_section .manuFac_list li .txt{font-size: 1.8rem; margin-top: 2rem; line-height: 2.8rem; margin-bottom: 2rem;}
    .text_section .manuFac_list .txt p{margin-bottom: 0.6rem;}
    .dot_list{padding-left: 0.5rem;}
    .dot_list li::before{width: 0.5rem; min-width: .5rem; height: 0.5rem; top: 1.5rem;}

    .img_section .img{--spacer-size: 296px; height: var(--spacer-size);}
    .img_section .txt_wrap{padding: 6rem 3rem 10rem;}
    .img_section .txt_wrap .txt{margin-top: 1rem; font-size: 1.8rem; line-height: 2.8rem;}

    .company_txt .inner{flex-flow: column;}
    .company_txt .tit{font-size: 3.2rem; line-height: 4rem; margin-right: 0rem;}
    .company_txt .txt{font-size: 2.2rem; margin-top: 3rem; line-height: 3.6rem;}

    .section .w_tit{font-size: 4.4rem; width: 100%; text-align: center;}
    .join_section{height: 50rem;}
    .join_section .contact{margin: 3rem auto 0;}

    .quality_txt .txt_wrap .txt{font-size: 1.8rem; line-height: 2.8rem;}
    .quality_txt .dot_list{margin-top: 2rem;}
    .quality_txt .thumbnail-wrapper{height: 21.5rem;}
    .quality_txt .thumbnail-wrapper .play-button{font-size: 4rem;}

    .partner_list{gap: 2.5rem 1.5rem; margin: 5rem auto;}
    .partner_list li{width: 100%;}
    .partner_list li + li{margin-top: 4rem;}
    .partner_list li img{width: 60%;}
    .partner_list li:nth-child(1) img, .partner_list li:nth-child(6) img{width: 60%}

    .solution_link{gap: 3rem;}
    .solution_link .tit{font-size: 2.2rem;}

    .contact_box.w{padding: 13% 10%;}
    .contact_box .txt{font-size: 1.8rem; line-height: 2.8rem; margin-bottom: 1.75rem;}
    .contact_box .sns_list{gap: .2rem;}
    .contact_box .sns_list a{width: 3.2rem; height: 3.2rem;}
    .contact_box .sns_list i{font-size: 1.6rem;}
    .warranty_section .tit,
    .carrer_section .tit{font-size: 4.4rem; margin-bottom: 4rem}
    .warranty_section .txt{font-size: 1.8rem; line-height: 2.8rem;}
    .warranty_section iframe, .carrer_section iframe{margin-top: 1.5rem}

    .carrer_section .txt_cont + .txt_cont{margin-top: 6rem;}
    .carrer_section .txt_cont .txt{font-size: 1.8rem; line-height: 2.8rem;}

    .contact_form{width: 100%; border-radius: 1.6rem; background: #f8f8f8; padding: 2rem 1.6rem;}
    .contact_form .input_wrap:not(:first-child){margin-top: 2rem; display: block;}
    .contact_form .label{font-size: 1.4rem; margin-bottom: 0; line-height: 1.2;}
    .contact_form .label_tit{margin-bottom: 0.6rem;}
    .contact_form .sm{font-size: 1.1rem;}
    .contact_form input,
    .contact_form textarea,
    .contact_form select{width: 100%; border-radius: .8rem; padding: 1.2rem 1.6rem; border: .1rem solid #efefef;}
    .contact_form textarea{resize: none; min-height: 20rem;}
    .contact_form .btn-blue{display: block; margin: 0 auto; border-radius: .8rem; color: #fff; font-size: 1.4rem; padding: 1.2rem; background: #2a6ec7;}
    #dropZone{width: 100%; max-height: 12rem; overflow-y: auto; border-radius: .8rem; background: #fff; border: .1rem solid #efefef;}
    #dropZone td{font-size: 1.2rem;}
    #dropZone .delete-btn{width: 2rem; vertical-align:inherit; padding: 1rem; border-radius: 50%; height: 2rem; background: #efefef url(../images/close.png) no-repeat center; background-size: 50%;}   
    

    .upload-btn-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
    }   

    .upload-btn {
    border: 2px solid gray;
    color: gray;
    background-color: white;
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 20px;
    font-weight: bold;
    }   

    .upload-btn-wrapper input[type=file] {
    font-size: 8rem;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    }   

    #fileDragDesc {
    width: 100%; 
    height: 100%; 
    font-size: 1.4rem;
    margin-left: auto; 
    margin-right: auto; 
    padding: 3px; 
    text-align: center; 
    line-height: 10rem; }
                

    .otp_pop{width: 80%;}
    }

@media screen and (max-width: 550px) {
    .inner{width: 90% !important;}

    .bn_section .txt{left: 2rem;}
    .bn_section .tit{font-size: 2rem;}

    .get_section .mo_none{display: none;}
    .get_section .txt{margin-right: 2rem;}
}

@media screen and (max-width: 374px) {
    .inner{width: 90% !important;}

    .bn_section .txt{left: 1rem;}
    .bg_section .txt::before{width: 28rem; height: 0.4rem; left: 0; top: 80%; transform: translateY(-90%);}
    .bn_section .tit{font-size: 1.8rem;}
    .bn_section .tit .mo{display: block;}
}