@charset "utf-8";


.main {font-size:16px; color:#191919; letter-spacing:-0.03em;}
.main .inner {width:1200px; margin-left:auto; margin-right:auto; position:relative;}
.main a {color:#191919;}

.main .fc_w {color:#fff !important;}

@media screen and (max-width:1220px) {
    .main .inner {width:88%;}
}

@media screen and (max-width:1024px) {
    .main {font-size:15px;}
}
@media screen and (max-width:767px) {
    .main {font-size:13px;}
}


.button1 {display:flex; justify-content:center; align-items:center; width:fit-content; height:56px; background:var(--color-primary); border-radius:6px; font-size:1.125em; color:#fff !important; font-weight:600; text-align:center; padding:0 30px; transition:all 0.5s; transition-property:background;}
.button1 i {font-size:0.77em; margin-left:10px; position:relative; top:2px;}
.button1:hover {background:var(--color-primary);}
.button1.case2 {background:rgba(255,255,255,0.2); backdrop-filter:blur(20px);}
.button1.case2:hover {background:#191919}
.button1.case3 {background:var(--color-secondary);}
.button1.case3:hover {background:var(--color-secondary);}
.button1.case4 {background:#191919;}
.button1.case4:hover {background:var(--color-primary)}

@media screen and (max-width:1024px){
    .button1 {height:44px; font-size:1em; padding:0 15px;}
    .button1 i {top:0;}
}

@media screen and (max-width:767px){
    .button1 {height:38px; border-radius:5px; padding:0 12px;}
    .button1 i {margin-left:5px;}
}


#mVisu {display:flex; justify-content:center; align-items:center; width:calc(100% - 20px); height:calc(100vh - 20px); border-radius:10px; margin:10px; overflow:hidden; position:relative;}
#mVisu .txt_box {position:relative; z-index:10;}
#mVisu .txt_box .tit {font-size:6.25em; color:#fff; line-height:1.1em; font-weight:500; font-family:'Poppins'; overflow:hidden;}
#mVisu .txt_box .txt {font-size:1.875em; color:#fff; line-height:1.4em; font-weight:600; margin-top:30px; overflow:hidden;}
#mVisu .video_box {width:100%; height:100%; position:absolute; left:0; top:0;}
#mVisu .video_box:before {content:''; display:block; width:100%; height:100%; background:rgba(25,25,25,0.3); position:absolute; left:0; top:0; z-index:3;}
#mVisu .video_box iframe {width:120%; height:120%; min-width:1920px; min-height:1080px; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%)}
#mVisu .scroll_box {width:100px; height:100px; background:url(/templates/main/type_A_001/img/icon_scroll_arrow.svg) no-repeat center center; position:absolute; right:50px; bottom:50px; z-index:10;}
#mVisu .scroll_box:before {content:''; display:block; width:100%; height:100%; background:url(/templates/main/type_A_001/img/scroll_txt.png) no-repeat center center; background-size:contain; animation:mVisuScroll 10s infinite linear}

@keyframes mVisuScroll {
    0% {transform:rotate(0)}
    100% {transform:rotate(360deg)}
}

@media screen and (min-height:1080px){
    #mVisu .video_box iframe {min-width:3000px;}
}

@media screen and (max-width:1220px){
    #mVisu .txt_box .tit {font-size:5.2em;}
    #mVisu .scroll_box {right:6%;}
}

@media screen and (max-width:1024px){
    #mVisu {width:calc(100% - 10px); height:calc(100vh - 10px); margin:5px;}
    #mVisu .txt_box .tit {font-size:4em;}
    #mVisu .txt_box .txt {font-size:1.5em; margin-top:3%;}
    #mVisu .video_box iframe {min-width:1500px; min-height:1300px;}
    #mVisu .scroll_box {width:70px; height:70px; background-size:13px auto; bottom:30px;}
}

@media screen and (max-width:767px){
    #mVisu .txt_box .tit {font-size:2.3em;}
    #mVisu .txt_box .txt {font-size:1.125em; font-weight:400;}
    #mVisu .video_box iframe {min-width:1400px; min-height:1000px;}
    #mVisu .scroll_box {width:50px; height:50px; background-size:10px auto; bottom:15px;}
}


.main_title .tit1 {font-size:3.125em; line-height:1.2em; font-weight:600;}
.main_title .tit2 {font-size:3.75em; line-height:1.2em; font-weight:500; font-family:'Poppins', var(--font-family, 'Pretendard')}
.main_title .txt {font-size:1.25em; color:#666; line-height:1.5em; margin-top:20px;}

@media screen and (max-width:1024px){
    .main_title .tit1 {font-size:2.6em;}
    .main_title .tit2 {font-size:3.2em;}
    .main_title .txt {font-size:1.125em; margin-top:10px;}
}

@media screen and (max-width:767px){
    .main_title .tit1 {font-size:1.9em;}
    .main_title .tit2 {font-size:2.5em;}
    .main_title .txt {font-size:1em; margin-top:1.5%;}
}


#mCompany {display:flex; justify-content:center; align-items:center; width:100%; height:100vh; position:relative; overflow:hidden;}
#mCompany .img_box {width:100%; height:100%; background:url(/templates/main/type_A_001/img/mCompanyBG.jpg) no-repeat center center; background-size:cover; position:absolute; left:0; top:0;}
#mCompany .inner {position:relative; z-index:10;}
#mCompany ul {display:flex; justify-content:center; flex-wrap:wrap; gap:20px 40px; width:100%; margin:70px 0 100px;}
#mCompany ul li {width:240px; text-align:center;}
#mCompany ul li .number {font-size:1.5em; color:#fff; font-weight:600; line-height:1.1em;}
#mCompany ul li .number span {font-size:5em; line-height:1.1em;}
#mCompany ul li .txt {font-size:1.125em; color:#fff; line-height:1.55em; font-weight:600;}
#mCompany .btn_box {display:flex; justify-content:center; gap:8px;}

@media screen and (max-width:1220px){
    #mCompany ul li {width:calc(25% - 30px)}
}

@media screen and (max-width:1024px){
    #mCompany ul {margin:7% 0 10%; gap:0;}
    #mCompany ul li {width:25%;}
    #mCompany ul li .number {font-size:1.3em;}
    #mCompany ul li .number span {font-size:4em;}
    #mCompany ul li .txt {font-size:1em;}
}

@media screen and (max-width:767px){
    #mCompany ul {gap:20px 0;}
    #mCompany ul li {width:50%;}
    #mCompany ul li .number {font-size:1.125em;}
    #mCompany ul li .number span {font-size:3em; margin-right:2px;}
    #mCompany .btn_box {gap:4px;}
}


#mProducts {margin-top:150px; padding:0 50px; overflow:hidden;}
#mProducts .main_title {max-width:1820px; margin:0 auto;}
#mProducts ul {display:flex; justify-content:space-between; flex-wrap:wrap; width:100%; max-width:1820px; margin:70px auto 0;}
#mProducts ul li {width:calc(50% - 10px); height:600px; border-radius:10px; overflow:hidden; position:relative;}
#mProducts ul li .img_box {width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover; position:absolute; left:0; top:0; transition:transform 0.6s}
#mProducts ul li:hover .img_box {transform:scale(1.1)}
#mProducts ul li .txt_box {width:100%; height:100%; position:relative; z-index:5; padding:70px;}
#mProducts ul li .txt_box .tit {font-size:3.75em; font-weight:700; line-height:1.1em;}
#mProducts ul li .txt_box .txt {font-size:1.25em; font-weight:600; line-height:1.5em; margin-top:20px;}
#mProducts ul li .txt_box .button1 {position:absolute; left:70px; bottom:70px;}

@media screen and (max-width:1399px){
    #mProducts ul li {height:37vw;}
    #mProducts ul li .txt_box {padding:40px;}
    #mProducts ul li .txt_box .button1 {left:40px; bottom:40px;}
}

@media screen and (max-width:1220px){
    #mProducts {padding:0 6%;}
}

@media screen and (max-width:1024px){
    #mProducts {margin-top:15%;}
    #mProducts ul {margin-top:7%;}
    #mProducts ul li {width:100%; height:45vw; margin-bottom:1%;}
    #mProducts ul li:last-child {margin-bottom:0;}
    #mProducts ul li .txt_box {padding:25px;}
    #mProducts ul li .txt_box .txt {font-size:1.125em; margin-top:10px;}
    #mProducts ul li .txt_box .button1 {left:25px; bottom:25px;}
}

@media screen and (max-width:767px){
    #mProducts ul li {height:54vw; border-radius:5px;}
    #mProducts ul li .txt_box {padding:15px;}
    #mProducts ul li .txt_box .tit {font-size:3em;}
    #mProducts ul li .txt_box .txt {font-size:1em; margin-top:5px;}
    #mProducts ul li .txt_box .button1 {display:none; left:15px; bottom:15px;}
}


#mNews {width:100%; margin:150px 0; overflow:hidden;}
.mNews_slide {width:100%; margin-top:70px; padding-bottom:53px; position:relative;}
.mNews_slide .img_box {width:100%; height:250px; border-radius:10px; overflow:hidden;}
.mNews_slide .img_box div {width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover; transition:transform 0.6s}
.mNews_slide .subject {font-size:1.25em; line-height:1.5em; font-weight:600; margin-top:20px; max-height:3em; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.mNews_slide .date {font-size:1.125em; color:#666; margin-top:10px;}
.mNews_slide.swiper-container-horizontal>.swiper-pagination-progressbar {width:100%; height:3px; background:#d9d9d9; border-radius:3px; top:auto; bottom:0;}
.mNews_slide .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {height:100%; background:#191919; border-radius:3px;}
.mNews_slide .swiper-slide:hover .img_box div {transform:scale(1.1)}

@media screen and (max-width:1220px){
    .mNews_slide .img_box {height:19vw}
}

@media screen and (max-width:1024px){
    #mNews {margin:15% 0;}
    .mNews_slide {margin-top:7%; padding-bottom:43px;}
    .mNews_slide .subject {font-size:1.125em; margin-top:10px;}
    .mNews_slide .date {font-size:1em; margin-top:5px;}
}

@media screen and (max-width:767px){
    .mNews_slide {padding-bottom:33px;}
    .mNews_slide .img_box {height:50vw; border-radius:5px;}
}


#mRecruit {width:calc(100% - 100px); max-width:1820px; height:510px; position:relative; border-radius:10px; margin:0 auto; overflow:hidden;}
#mRecruit > div {display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; width:100%; height:100%; padding:0 100px 0 150px;}
#mRecruit .main_title {width:calc(100% - 900px); position:relative; z-index:5;}
#mRecruit ul {display:flex; flex-wrap:wrap; width:900px;}
#mRecruit ul li {width:50%;}
#mRecruit ul li .img_box {width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover; position:absolute; left:0; top:0; opacity:0; visibility:hidden; transition:all 0.5s; transition-property:opacity, visibility;}
#mRecruit ul li .img_box:before {content:''; display:block; width:100%; height:100%; background:rgba(25,25,25,0.3);}
#mRecruit ul li a {display:flex; justify-content:space-between; flex-direction:column; width:100%; height:310px; border-radius:10px; padding:50px; position:relative; z-index:5; transition:background 0.5s;}
#mRecruit ul li a:after {content:'\e09f'; font-size:1.5em; color:#fff; font-weight:400; font-family:'Font Awesome 6 Pro'; opacity:0; transition:opacity 0.5s}
#mRecruit ul li a dl dt {font-size:1.5em; color:#fff; line-height:1.3em; font-weight:700;}
#mRecruit ul li a dl dd {font-size:1.125em; color:#fff; line-height:1.55em; margin-top:20px;}
#mRecruit ul li.on .img_box {opacity:1; visibility:visible;}
#mRecruit ul li.on a:after {opacity:1;}

@media screen and (min-width:1025px){
    #mRecruit ul li:nth-child(1).on a {background:var(--color-primary)}
    #mRecruit ul li:nth-child(2).on a {background:var(--color-secondary)}
}

@media screen and (max-width:1699px){
    #mRecruit > div {padding:0 50px 0 100px;}
    #mRecruit .main_title {width:450px;}
    #mRecruit ul {width:calc(100% - 450px)}
}

@media screen and (max-width:1399px){
    #mRecruit > div {padding:0 50px;}
    #mRecruit .main_title {width:calc(100% - 450px)}
    #mRecruit ul {width:450px;}
    #mRecruit ul li {width:100%;}
    #mRecruit ul li a {height:220px; padding:20px;}
    #mRecruit ul li a dl dd {margin-top:15px;}
}

@media screen and (max-width:1220px){
    #mRecruit {width:88%;}
}

@media screen and (max-width:1024px){
    #mRecruit {width:100%; height:auto; border-radius:0;}
    #mRecruit > div {padding:0;}
    #mRecruit .main_title {width:88%; margin:0 auto 5%;}
    #mRecruit .main_title .tit2, #mRecruit .main_title .txt {color:#191919 !important;}
    #mRecruit ul {width:100%;}
    #mRecruit ul li {width:100%; position:relative;}
    #mRecruit ul li .img_box {opacity:1; visibility:visible;}
    #mRecruit ul li a {height:auto; padding:10% 6%;}
    #mRecruit ul li a:after {font-size:1.3em; opacity:1;}
    #mRecruit ul li a dl {margin-bottom:8%;}
    #mRecruit ul li a dl dt {font-size:1.3em;}
    #mRecruit ul li a dl dd {font-size:1em; margin-top:1.5%;}
}


#mContact {margin:150px auto 100px;}
#mContact .form_box {display:flex; justify-content:space-between; flex-wrap:wrap; width:100%; margin-top:70px;}
#mContact .form_box ul {width:calc(50% - 10px)}
#mContact .form_box ul li {margin-bottom:30px;}
#mContact .form_box ul li:last-child {margin-bottom:0;}
#mContact .form_box ul li > label {display:block; font-size:1.125em; font-weight:600; margin-bottom:10px;}
#mContact .form_box ul li > label i {color:var(--color-primary); font-style:normal;}
#mContact .form_box ul li .form_txt {display:block; width:100%; height:61px; background:#fff; border:1px solid #ccc; border-radius:6px; font-size:1.125em; padding:0 20px;}
#mContact .form_box ul li .form_txt::placeholder {color:#ccc;}
#mContact .form_box ul li .form_txt:focus {outline:none; border:2px solid var(--color-secondary) !important; box-shadow:4px 4px 10px rgba(var(--color-secondary-rgb),0.1)}
#mContact .form_box ul li .form_textarea {display:block; width:100%; height:242px; background:#fff; border:1px solid #ccc; border-radius:6px; font-size:1.125em; padding:20px; resize:none;}
#mContact .form_box ul li .form_textarea::placeholder {color:#ccc;}
#mContact .form_box ul li .form_textarea:focus {outline:none; border:2px solid var(--color-secondary) !important; box-shadow:4px 4px 10px rgba(var(--color-secondary-rgb),0.1)}
#mContact .form_box ul li .check_box input {display:none;}
#mContact .form_box ul li .check_box label {display:flex; align-items:center;}
#mContact .form_box ul li .check_box label:before {content:''; display:flex; justify-content:center; align-items:center; width:24px; height:24px; background:#efefef; border-radius:4px; font-size:1em; color:#fff; font-weight:400; font-family:'Font Awesome 6 Pro'}
#mContact .form_box ul li .check_box label p {font-size:1em; color:#666; padding-left:6px;}
#mContact .form_box ul li .check_box label p a {color:var(--color-secondary); font-weight:600; text-decoration:underline;}
#mContact .form_box ul li .check_box input:checked + label:before {content:'\f00c'; background:var(--color-secondary);}
#mContact .form_box ul li .t_leng {font-size:1em; color:#666; text-align:right; margin-top:10px;}
#mContact .btn_box {display:flex; justify-content:end; margin-top:30px;}

@media screen and (max-width:1024px){
    #mContact {margin:15% auto 10%;}
    #mContact .form_box {margin-top:7%;}
    #mContact .form_box ul {width:calc(50% - 5px)}
    #mContact .form_box ul li {margin-bottom:20px;}
    #mContact .form_box ul li > label {font-size:1em;}
    #mContact .form_box ul li .form_txt {height:48px; font-size:1em; padding:0 15px;}
    #mContact .form_box ul li .form_textarea {height:180px; font-size:1em; padding:15px;}
}

@media screen and (max-width:767px){
    #mContact .form_box ul {width:100%; margin-bottom:4%;}
    #mContact .form_box ul:last-child {margin-bottom:0;}
    #mContact .form_box ul li {margin-bottom:4%;}
    #mContact .form_box ul li > label {margin-bottom:1.5%;}
    #mContact .form_box ul li .form_txt {height:38px; padding:0 10px;}
    #mContact .form_box ul li .form_textarea {height:110px; padding:10px;}
    #mContact .form_box ul li .check_box label:before {width:20px; height:20px;}
}


#mPartners {width:100%; overflow:hidden; margin-bottom:100px;}
.mPartners_slide .swiper-wrapper {transition-timing-function:linear}
.mPartners_slide .swiper-slide {display:flex; justify-content:center; align-items:center; width:196px; height:70px;}
.mPartners_slide img {display:block; max-width:100%; max-height:100%; object-fit:contain;}

@media screen and (max-width:1024px){
    #mPartners {margin-bottom:10%;}
}

@media screen and (max-width:767px){
    .mPartners_slide .swiper-slide {width:112px; height:40px;}
}