@import url('common.css');


/* VISUAL */
.mVisual {position:relative; display:flex; justify-content:center; padding:104px 50px 0; box-sizing:border-box;}
.mVisual .visual_in {position:relative; width:100%; height:calc(100vh - 154px); border-radius:var(--borderR30); overflow:hidden;}
.mVisual .visualSwiper {width:100%; height:100%;}
.mVisual .swiper-slide {position:relative; width:100%; height:100%;}
.mVisual .bg {position:absolute; inset:0; overflow:hidden; background:var(--blackBg);}
.mVisual .bg img {display:block; width:100%; height:100%; object-fit:cover; transform:scale(1); transition:transform 1s ease;}
.mVisual .swiper-slide-active .bg img {transform:scale(1.08); transition:transform 6s ease-out;}
.mVisual .txt {position:absolute; left:50%; transform:translateX(-50%); bottom:195px; z-index:2; display:flex; flex-direction:column; align-items: flex-start; gap:20px; color:var(--white);}
.mVisual .txt .mark-wrap {position: relative; display: inline-block;}
.mVisual .txt .mark {position:absolute; left:85%; top:-70px; z-index:0; color:var(--white); opacity:0; transform:translateY(40px); pointer-events:none; white-space:nowrap; transition:opacity .7s ease, transform .7s ease;}
.mVisual .txt .tit{position: relative; display: inline-block;}
.mVisual .txt h2 {display: inline-block; font-weight: 200; line-height: 120%; position:relative; z-index:1; opacity:0; transform:translateY(40px); transition:opacity .7s ease, transform .7s ease;}
.mVisual .txt h2 b {font-weight:800; display:inline; letter-spacing:inherit; line-height:inherit;}
.mVisual .txt p {position:relative; z-index:1; opacity:0; transform:translateY(40px); transition:opacity .7s ease, transform .7s ease;}
.mVisual .swiper-slide-active .txt .mark {opacity:0.25; transform:translateY(0); transition-delay:.15s;}
.mVisual .swiper-slide-active .txt h2 {opacity:1; transform:translateY(0); transition-delay:.3s;}
.mVisual .swiper-slide-active .txt p {opacity:1; transform:translateY(0); transition-delay:.45s;}

.mVisual .scr-bar {position:absolute; right:60px; top:50%; transform: translateY(-50%); z-index:3; width:4px; height:120px; background:rgba(255,255,255,0.2); border-radius:99px; overflow:hidden;}
.mVisual .scr-bar .bar {position:absolute; left:0; top:0; width:100%; height:30px; background:var(--white); border-radius:99px; animation:mVisualScrBar 2s ease-in-out infinite;}
@keyframes mVisualScrBar {0%{top:0; opacity:1;} 100%{top:200px; opacity:1;}}

.mVisual .indicator {position:absolute; left:50%; transform: translateX(-50%); bottom: 106px; z-index:3; display:flex; align-items:center; gap:15px;}
.mVisual .indicator .prev,
.mVisual .indicator .next {display:flex; align-items:center; justify-content:center; width:28px; height:28px; color:var(--white);}
.mVisual .indicator .prev::before,
.mVisual .indicator .next::before {display:block; width:28px; height:28px; font-size:28px; line-height:28px; font-family:var(--icon); font-weight:400;}
.mVisual .indicator .prev::before {content:'\f46b';}
.mVisual .indicator .next::before {content:'\f46a';}
.mVisual .indicator .prev:hover,
.mVisual .indicator .next:hover {opacity:0.7;}
.mVisual .indicator .number {display:flex; align-items:center; gap:15px; color:var(--white);}
.mVisual .indicator .curr {color:var(--white);}
.mVisual .indicator .slash,
.mVisual .indicator .total {color:rgba(255,255,255,0.5);}


.contents-bg{position: relative; }
.contents-bg .bg{position: absolute; left: 0; bottom: 0; width: 100%; height: calc(100% - 320px);}
.contents-bg .bg img{width: 100%; height: 100%; object-fit: cover; display: block;}


/* ABOUT */
.mAbout {position:relative; display:flex; justify-content:center; z-index: 2;}
.mAbout .txt {display:flex; gap:60px; align-items:flex-start; justify-content:center; width:100%;}
.mAbout .main_tit {display:flex; flex:1 1 0; flex-direction:column; gap:20px; min-width:0;}
.mAbout .main_tit h2 {color:var(--black); line-height: 120%; font-weight: 700;}
.mAbout .main_tit h2 b{display: inline; letter-spacing: inherit; line-height: inherit; font-weight: inherit; color: var(--main);} 
.mAbout .main_tit p {color:var(--black);}
.mAbout .desc {flex:1 1 0; min-width:0; display: flex; flex-direction: column; gap: 30px;}
.mAbout .desc p {color:var(--basic);}

.about-img-cont{margin: 80px 0 0;}
.about-img-cont .about-img {width: 100%; height: 640px; overflow:hidden; border-radius:var(--borderR30);}
.about-img-cont .about-img img {display:block; width:100%; height:100%; object-fit:cover;}

/* PRODUCT */
.mProduct {position:relative; display:flex; justify-content:center; overflow: hidden;}
.mProduct .pro_wrap {display:flex; flex-direction:column; gap:60px;}
.mProduct .tit_wrap {display:flex; align-items:flex-start; justify-content:space-between; gap:30px; width:100%;}
.mProduct .tit_wrap .txt {display:flex; flex:1 1 auto; flex-direction:column; gap:30px; min-width:0;}
.mProduct .tit_wrap .txt h2 {color:var(--black); line-height: 120%;}
.mProduct .tit_wrap .txt h2 span{display: inline; letter-spacing: inherit; line-height: inherit;} 
.mProduct .tit_wrap .txt p {color:var(--basic);}
.mProduct .productSwiper {width:100%; overflow:visible;}
.mProduct .prd-card {display:flex; flex-direction:column; align-items:center; width:100%; transition:all .3s ease; opacity: 0; pointer-events: none;}
.mProduct .swiper-slide.swiper-slide-visible .prd-card {opacity: 1; pointer-events: auto;}
.mProduct .img-area {position:relative; display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:360 / 360; overflow:hidden; background:var(--white); border-radius:var(--borderR20);}
.mProduct .img-area img {display:block; width: 100%; height: 100%; object-fit:contain; transition:transform .7s cubic-bezier(0.215,0.61,0.355,1);}
.mProduct .img-area .view {position:absolute; left:50%; top:50%; z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--white70); text-align:center; text-transform:uppercase; opacity:0; transform:translate(-50%, 100%); transition:opacity .3s ease, transform .3s ease; pointer-events:none; letter-spacing: 0;}
.mProduct .img-area .view::before {content:'\e3b4'; display:block; width:40px; height:40px; font-size:40px; line-height:40px; font-family:var(--icon); font-weight:400; color:var(--white);}
.mProduct .img-area::after {content:''; position:absolute; inset:0; z-index:1; background:rgba(33,52,110,0.95); opacity:0; transition:opacity .3s ease;}
.mProduct .prd-card .txt {display:flex; flex-direction:column; gap:12px; align-items:center; width:100%; padding-top:30px; text-align:center;}
.mProduct .prd-card .name {display:block; width:100%; color:var(--black); line-height: 120%; transition:color .3s ease; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}
.mProduct .prd-card .code {display:block; width:100%; color:var(--basic); text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block; line-height: 120%;}
.mProduct .prd-card:hover .img-area::after {opacity:1;}
.mProduct .prd-card:hover .img-area img {transform:scale(1.06);}
.mProduct .prd-card:hover .img-area .view {opacity:1; transform:translate(-50%,-50%);}
.mProduct .prd-card:hover .name {color:var(--main);}

.mProduct .mo_ver{display: none;}

/* NEWS */
.mNews {position:relative; display:flex; justify-content:center; overflow: hidden;}
.mNews .news_wrap {display:flex; flex-direction:column; gap:60px;}
.mNews .tit-area {display:flex; flex-direction:column; gap:30px; align-items:center; text-align:center;}
.mNews .tit-area h2 {color:var(--main); line-height: 120%;}
.mNews .tit-area h2 span{display: inline; letter-spacing: inherit; line-height: inherit;} 
.mNews .tit-area p {color:var(--basic);}
.mNews .list {display:flex; flex-direction:column; gap:40px; width:100%;}
.mNews .newsSwiper {width:100%; overflow:visible;}
.mNews .news-card {display:flex; flex-direction:column; width:100%; overflow:hidden; border-radius:var(--borderR20); transition:all .3s ease; opacity: 0; pointer-events: none;}
.mNews .swiper-slide.swiper-slide-visible .news-card {opacity: 1; pointer-events: auto;}
.mNews .img-area {position:relative; width:100%; aspect-ratio:510 / 340; overflow:hidden; background:var(--white); border-radius:var(--borderR20) var(--borderR20) 0 0;}
.mNews .img-area img {display:block; width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(0.215,0.61,0.355,1);}
.mNews .txt-area {display:flex; flex-direction:column; gap:10px; align-items:flex-start; width:100%; padding:40px 30px; box-sizing:border-box; background:var(--blueBg); border-radius:0 0 var(--borderR20) var(--borderR20);}
.mNews .txt-area .tit {display:block; width:100%; color:var(--black); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; transition:color .3s ease;}
.mNews .txt-area .desc {width:100%; color:var(--basic); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.mNews .txt-area .date {display:inline-flex; align-items:center; gap:5px; padding-top:10px; color:var(--basic); opacity:0.7; transition:opacity .3s ease, color .3s ease;}
.mNews .txt-area .date::before {content:'\e935'; display:block; width:22px; height:22px; font-size:22px; line-height:22px; font-family:var(--icon); font-weight:400;}
.mNews .news-card:hover {box-shadow:0 20px 40px rgba(33,52,110,0.2);}
.mNews .news-card:hover .img-area img {transform:scale(1.08);}
.mNews .news-card:hover .txt-area .tit {color:var(--main);}
.mNews .news-card:hover .txt-area .date {opacity:1; color:var(--black);}
.mNews .rolling {display:flex; align-items:center; gap:30px; width:100%;}
.mNews .progress {position:relative; flex:1 1 auto; min-width:0; height:2px; background:#c4c4c4; border-radius:2px; overflow:hidden;}
.mNews .progress .bar {position:absolute; left:0; top:0; height:100%; width:0; background:var(--main); border-radius:3px; transition:width .35s ease;}
.mNews .arrow {gap:0;}
.mNews .arrow .prev {margin-right:-5px;}


/* CONTACT */
.mContact {position:relative; display:flex; justify-content:center;}
.mContact .contact-bg {position:absolute; inset:0; pointer-events:none;}
.mContact .contact-bg img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center bottom; z-index:2;}
.mContact .contact_in {position:relative; z-index:4; display:flex; justify-content:space-between; gap:50px;}
.mContact .title_area {flex-shrink:0; flex:1;}
.mContact .title_area_sticky {position: sticky; top: 130px; display:flex; flex-direction:column; gap:10px;  color:var(--white);}
.mContact .inquiry_title {display:flex; flex-direction:column; gap:30px;}
.mContact .inquiry_title h2 {color:var(--white);}
.mContact .inquiry_title p {color:var(--white);}
.mContact .inquiry_info {display:flex; flex-direction:column; gap:3px; padding-top:40px;}
.mContact .inquiry_info li {display:flex; align-items:center; gap:8px;}
.mContact .inquiry_info li::before {display:block; width:20px; height:20px; font-size:20px; line-height:20px; font-family:var(--icon); font-weight:400; color:var(--white);}
.mContact .inquiry_info .tel::before {content:'\e0b0';}
.mContact .inquiry_info .fax::before {content:'\ead8';}
.mContact .inquiry_info .mail::before {content:'\e158';}
.mContact .inquiry_info a {color:var(--white);}
.mContact .inquiry_info a:hover {opacity:0.7;}
.mContact .form_area {width:890px; flex-shrink:0;}


.mContact .inquiryForm {display:flex; flex-direction:column; gap:30px; width:100%;}
.mContact .form_table {display:flex; flex-direction:column; gap:4px; width:100%;}
.mContact .form_table .row {display:flex; align-items:center; gap:30px; width:100%; padding:15px 20px; border-radius:var(--borderR5); background:rgba(255,255,255,0.12); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-sizing:border-box;}
.mContact .form_table .label {flex-shrink:0; width:100px; color:var(--white);}
.mContact .form_table .label .req {color:var(--orange);}
.mContact .form_table .field {flex:1 1 0; min-width:0; display:flex; align-items:center; height:40px; padding-left:25px; border-left:1px solid rgba(255,255,255,0.3); box-sizing:border-box;}
.mContact .form_table .field input[type="text"],
.mContact .form_table .field textarea {width:100%; height:100%; background:transparent; border:0; color:var(--white); outline:none; box-sizing:border-box;}
.mContact .form_table .field input[type="text"]::placeholder,
.mContact .form_table .field textarea::placeholder {color:rgba(255,255,255,0.3);}
.mContact .form_table .field.phone,
.mContact .form_table .field.email {gap:5px; width:510px; flex:0 0 510px;}
.mContact .form_table .field.phone input,
.mContact .form_table .field.email input {flex:1 1 0; min-width:0; height:100%;}
.mContact .form_table .field .sep {flex-shrink:0; color:var(--white);}
.mContact .form_table .field.email .select {position:relative; flex:1 1 0; min-width:0; height:100%; padding-left:25px; border-left:1px solid rgba(255,255,255,0.3); box-sizing:border-box;}
.mContact .form_table .field.email .select::after {content:'\e5cf'; position:absolute; right:0; top:50%; transform:translateY(-50%); width:20px; height:20px; font-size:20px; line-height:20px; font-family:var(--icon); font-weight:400; color:var(--white); pointer-events:none;}
.mContact .form_table .field.email .select select {width:100%; height:100%; padding-right:24px; background:transparent; border:0; color:rgba(255,255,255,0.7); outline:none; cursor:pointer;}
.mContact .form_table .field.email .select select option {color:var(--black);}
.mContact .form_table .row.content .field {align-items:flex-start; height:150px; padding:10px 0 0 15px;}
.mContact .form_table .row.content textarea {resize:none;}
.mContact .form_table .field.file {gap:15px; padding-left:20px;}
.mContact .form_table .field.file .fileBtn {display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 15px; background:#004b9b; color:var(--white); cursor:pointer; box-sizing:border-box; white-space:nowrap;}
.mContact .form_table .field.file .fileName {color:rgba(255,255,255,0.7); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mContact .form_table .row.spam .field {flex-direction:column; align-items:flex-start; justify-content:center; gap:5px; height:auto; min-height:40px;}
.mContact .form_table .spam_box {display:flex; align-items:center; gap:4px;}
.mContact .form_table .spam_img {display:flex; align-items:center; justify-content:center; width:80px; height:40px; background:#242b38; overflow:hidden; flex-shrink:0;}
.mContact .form_table .spam_img img {display:block; width:80px; height:33px; object-fit:cover;}
.mContact .form_table .spam_box input {width:260px; height:40px; padding:0 10px; background:rgba(255,255,255,0.1); border:0; color:var(--white); box-sizing:border-box;}
.mContact .form_table .spam_tip {color:rgba(255,255,255,0.8);}
.mContact .form_table .spam_tip .refresh {color:inherit;}
.mContact .form_table .spam_tip .refresh:hover {opacity:0.7;}
.mContact .btn_area {display:flex; align-items:center; justify-content:space-between; width:100%; gap:20px;}
.mContact .privacy {display:flex; align-items:center; gap:5px; flex-wrap:wrap;}
.mContact .privacy .check {display:inline-flex; align-items:center; gap:5px; cursor:pointer; color:rgba(255,255,255,0.7);}
.mContact .privacy .check input {position:absolute; opacity:0; width:1px; height:1px; overflow:hidden;}
.mContact .privacy .check .box {display:block; width:20px; height:20px; border:1px solid #bbb; border-radius:3px; background:var(--white); box-sizing:border-box; flex-shrink:0;}
.mContact .privacy .check input:checked + .box {background:var(--orange); border-color:var(--orange);}
.mContact .privacy .check input:checked + .box::before {content:'\e5ca'; display:block; width:20px; height:20px; font-size:16px; line-height:20px; text-align:center; font-family:var(--icon); font-weight:400; color:var(--white);}
.mContact .privacy .view {color:var(--white); text-decoration:underline;}
.mContact .privacy .view:hover {opacity:0.7;}
.mContact .btnSubmit {display:flex; align-items:center; justify-content:space-between; width:185px; height:55px; padding:0 15px 0 20px; border:2px solid var(--orange); border-radius:var(--borderR5); background:var(--orange); color:var(--white); box-sizing:border-box; flex-shrink:0;}
.mContact .btnSubmit::after {content:'\e5c8'; display:block; width:26px; height:26px; font-size:26px; line-height:26px; font-family:var(--icon); font-weight:400;}
.mContact .btnSubmit:hover {opacity:0.85;}












/*******************************************************************************
    @media 1740px
*******************************************************************************/
@media all and (max-width:1740px){


/* VISUAL */
.mVisual {padding:104px 3% 0;}


}
/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){

/* CONTACT */
.mContact .contact_in {gap:30px;}
.mContact .form_area {width:65%;}


}
/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){


/* ABOUT */
.mAbout .txt {gap:30px; flex-wrap: wrap;}
.mAbout .main_tit {flex:auto; gap:20px;}
.mAbout .desc {flex:auto; gap: 20px;}


}
/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){

/* VISUAL */
.mVisual {padding:80px 30px 0; }
.mVisual .visual_in {height:calc(100vh - 110px); border-radius:var(--borderR20);}
.mVisual .txt {bottom:140px; gap:20px;}

.mVisual .txt .mark {left:80%; top:-60px;}
.mVisual .scr-bar {right:5%;}
.mVisual .indicator {bottom: 50px;}


.contents-bg .bg{height: calc(100% - 200px);}

/* ABOUT */
.mAbout .txt {gap:20px;}
.mAbout .main_tit {gap:10px;}
.mAbout .desc {gap: 10px;}

.about-img-cont{margin: 50px 0 0;}
.about-img-cont .about-img {height: 400px; border-radius:var(--borderR20);}



/* PRODUCT */
.mProduct .pro_wrap {gap:40px;}
.mProduct .tit_wrap {gap:20px;}
.mProduct .tit_wrap .txt {gap:20px;}
.mProduct .prd-card .txt {padding-top:20px;}

/* NEWS */
.mNews .news_wrap {gap:40px;}
.mNews .tit-area {gap:20px;}
.mNews .list {gap:30px;}
.mNews .txt-area {padding:30px 20px;}
.mNews .rolling {gap:20px;}

/* CONTACT */
.mContact .contact_in {flex-wrap: wrap; gap:50px;}
.mContact .title_area {gap:0;}
.mContact .title_area_sticky {position: relative; top: auto;}
.mContact .inquiry_title {gap:20px;}
.mContact .inquiry_info {padding-top:30px;}
.mContact .form_area {width:100%;}


}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){

    
/* VISUAL */
.mVisual {padding:60px 20px 0; }
.mVisual .visual_in {height:calc(100vh - 80px);}
.mVisual .txt {bottom:140px; gap:10px;}
.mVisual .txt p{text-wrap: balance;}
.mVisual .txt p br{display: none;}

.mVisual .txt .mark {left:65%; top:-35px;}
.mVisual .scr-bar {height:80px;}
.mVisual .scr-bar .bar {height:20px;}

.mVisual .indicator {bottom: 40px; gap:10px;}
.mVisual .indicator .prev,
.mVisual .indicator .next {width:24px; height:24px;}
.mVisual .indicator .prev::before,
.mVisual .indicator .next::before {width:24px; height:24px; font-size:24px; line-height:24px;}
.mVisual .indicator .number {gap:10px;}

.contents-bg .bg{height: calc(100% - 150px);}


/* ABOUT */
.mAbout .desc p{text-wrap: balance;}

.about-img-cont{margin: 30px 0 0;}
.about-img-cont .about-img {height: 300px;}



/* PRODUCT */
.mProduct .pro_wrap {gap:30px;}
.mProduct .tit_wrap {gap:10px;}
.mProduct .tit_wrap .txt {gap:10px;}
.mProduct .img-area {border-radius:var(--borderR10);}
.mProduct .img-area .view {gap:5px;}
.mProduct .img-area .view::before {width:30px; height:30px; font-size:30px; line-height:30px;}
.mProduct .prd-card .txt {gap:8px; padding-top:15px;}
.mProduct .mo_ver{display: flex; justify-content: center;}
.mProduct .pc_ver{display: none;}

/* NEWS */
.mNews .news_wrap {gap:30px;}
.mNews .tit-area {gap:10px;}
.mNews .list {gap:20px;}
.mNews .news-card {border-radius:var(--borderR10);}
.mNews .img-area {border-radius:var(--borderR10) var(--borderR10) 0 0;}
.mNews .txt-area {gap:5px; padding:25px 20px; border-radius:0 0 var(--borderR10) var(--borderR10);}
.mNews .txt-area .date {gap:5px; padding-top:6px;}
.mNews .txt-area .date::before {width:18px; height:18px; font-size:18px; line-height:18px;}
.mNews .rolling {gap:10px;}



/* CONTACT */
.mContact .inquiry_title {gap:10px;}
.mContact .inquiry_info {padding-top:20px;}
.mContact .inquiry_info li {gap:6px;}
.mContact .inquiry_info li::before {width:16px; height:16px; font-size:16px; line-height:16px;}




}

/*******************************************************************************
    @media 480px
*******************************************************************************/
@media all and (max-width:480px){

    /* VISUAL */
    .mVisual {padding:60px 10px 0; }
    .mVisual .visual_in {height:calc(100vh - 70px);}
}