/* BASIC css start */
@font-face {
    font-family: 'HakgyoansimBareonbatangB';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-2@1.0/HakgyoansimBareonbatangB.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

button {border:0;}


.cateWrap {position:relative;background:#fff;}
.cateWrap .cate1 dl dt{position:fixed;left:50%;top:1.111vw;transform:translateX(-50%); z-index:1001;}
.cateWrap .cate1 dl dt a{display:block; position:relative; padding-right:4.167vw; max-width:50vw; font-size:4.722vw;line-height:11.111vw; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;font-family :'FlightSans-Regular', sans-serif;}
.cateWrap .cate1 dl dt a svg{position:absolute; width:3.611vw; top: 50%; right:0; transform: translateY(-50%); transition:transform 0.3s;}
.cateWrap .cate1 dl dt a.active svg{ transform: translateY(-50%) rotate(-180deg);}
.cateWrap .cate1 dl dd{ display:none; position:fixed; top:var(--mainHeaderHeight); left:0; width:100%; padding:3.333vw 0; background:#fff; border-top: 1px solid #e9e9e9; z-index:1001;}
.cateWrap .cate1 dl dd ul li a{ display:block; padding:3.056vw; font-size:4.167vw; text-align:center; line-height:5.556vw; color:#b1b1b1; font-weight:500;font-family :'FlightSans-Regular', sans-serif;}
.cateWrap .cate1 dl dd ul li a.now{color:#000;font-family :'FlightSans-Bold', sans-serif;}
.cateWrap .cate1 .bgMask{ display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.2); z-index:998;}
.cateWrap .cate2 { padding:0 4.167vw; border-bottom:0.278vw solid #e9e9e9;}
.cateWrap .cate2 ul li{ width:auto; margin-right:6.111vw;}
.cateWrap .cate2 ul li a{ display:block; line-height:11.111vw; color:#b1b1b1; border-bottom:0.556vw solid #fff;font-family :'FlightSans-Regular', sans-serif;}
.cateWrap .cate2 ul li a.on{ color:#000; border-bottom:0.556vw solid #000;}
.cateWrap .cate3{ padding:0 4.167vw;background:#f8f8f8; border-bottom:0.278vw solid #e9e9e9;}
.cateWrap .cate3 ul li{ width:auto; margin-right:6.111vw;}
.cateWrap .cate3 ul li a{ display:block; line-height:11.111vw; font-size:3.056vw; color:#b1b1b1;}
.cateWrap .cate3 ul li a.on{color:#000;}


.top_title {width:100%; padding-top:20px; text-align:center; background:#141416;}
 #container {position:relative; width:100%;}
.top_title .fit-text {text-align:center; color:#141416; opacity:0.7;text-shadow: -1px -1px 0 #333, 1px -1px 0 #333, -1px  1px 0 #333, 1px  1px 0 #333;font-family:"Cormorant Garamond", serif; font-weight:900;white-space: nowrap;display: inline-block;}
.top_title .tit{ position:absolute; width:100%; top:20%; left:0; transform:translateX(-50%); z-index: 1; line-height:1.2; width:100%; font-size:2.25rem; color:#fff; font-family: 'FlightSans-Bold', sans-serif; display:inline-block;z-index: 1; letter-spacing:-0.2px;}
.top_title .tit em{font-family: 'FlightSans-Regular', sans-serif; font-size:3rem;}
.top_title .tit span {font-size:2.75rem; font-family: 'FlightSans-Regular', sans-serif;}
.top_title .sub_tit {color:#fff; font-size:1.25rem; font-weight:500; margin-top:40px;font-family:"Cormorant Garamond", serif; opacity:0.7; letter-spacing:0.5px; position:relative; }
.top_title .sub_tit:before{position:absolute; content:""; width:1px; height:2rem; background:#aaa; left:50%; top:270%; transform:translate(-50%,-50%); }
.top_title .txt {color:#fff; margin-top:4.5rem; line-height:1.5; font-size:1.25rem; position:relative; font-family: 'FlightSans-Regular', sans-serif;}







#sec2{}
#sec2 .sec_inner{100%;}
#sec2 .sec_inner h2{text-align:center; position:relative; font-size:2.7rem; color:#333; line-height:1.5; font-family: 'FlightSans-Regular', sans-serif;}
#sec2 .sec_inner h2 span {font-family: 'FlightSans-Title', sans-serif; color:#355BF5;}
#sec2 .sec_inner .subname {font-weight:300; font-size:1.7rem;color:#222;text-align:center; padding-top:3rem; opacity:.9; font-family: 'FlightSans-Regular', sans-serif;}
#sec2 .sec_inner .sec2_cont{padding:60px 0;}
#sec2 .sec_inner .sec2_cont .swiper{}
#sec2 .sec_inner .sec2_cont .swiper ul li{width:auto; flex-shrink:0; height:100%; position:relative; transition-property:transform; }
#sec2 .sec_inner .sec2_cont .swiper ul li .box{display:flex; align-items:center; flex-direction:column;}
#sec2 .sec_inner .sec2_cont .swiper ul li .img_sec{max-width:7rem; max-height: 7rem; border-radius:100%; overflow:hidden; margin-bottom:20px;}
#sec2 .sec_inner .sec2_cont .swiper ul li .img_sec img {width:100%; height:100%; object-fit:contain;}
#sec2 .sec_inner .sec2_cont .swiper ul li .text_sec{position:relative;}
#sec2 .sec_inner .sec2_cont .swiper ul li .text_sec:before {content:""; position:absolute; left:50%; top:0; width:.7rem; height:.7rem; transform:translate(-50%, -50%) rotate(45deg); background-color:#355BF5;}
#sec2 .sec_inner .sec2_cont .swiper ul li .text_sec .big{ display:inline-block; padding:1.1em 1.6em; border-radius:10px; background-color:#355BF5; color:#fff; font-size: 1rem; font-weight:600; word-break:keep-all;}
#sec2 .sec_inner .sec2_cont .swiper ul li:nth-child(even) .text_sec .big{background-color:#06068F !important;}
#sec2 .sec_inner .sec2_cont .swiper ul li:nth-child(even) .text_sec:before{background-color:#06068F !important;}
#sec2 .swiper .swiper-pagination-progressbar{bottom: 0; top: unset; height: 1.5px; background-color: rgba(0,0,0,.09);width:1780px}
#sec2 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background-color: #222;}
.fa-angle-right::before{content:"";}




#sec3 {padding-top:8rem; letter-spacing:-0.04em; overflow:hidden; background:#fff;}
#sec3 .sub-top .tit{font-size:2.25rem; line-height:1.3; text-align:center; position:relative; font-family: 'FlightSans-Bold', sans-serif; color:#355BF5;}
#sec3 .sub-top .tit:before{content:"WHY?"; position:absolute; top:-5.5rem; left:50%; transform:translateX(-50%); font-size:7rem; width:100%; height:100%; color:rgba(6,51,143,0.05); z-index:0; font-weight:bold; font-family:"HakgyoansimBareonbatangB", serif;}
#sec3 .sub-contents .container {position:relative; padding-right:24px; padding-left:24px; margin:0 auto; }
#sec3 .sub-contents .container .cont-summary {margin:2rem 0 3.5rem; text-align:center;}
#sec3 .sub-contents .container .cont-summary h4 {font-size:1rem;font-family :'FlightSans-Regular', sans-serif;line-height:1.6; word-break:keep-all;}
#sec3 .sub-contents .container .cont-summary h4 .text-primary {display:inline-block; font-size:1.5rem; font-family: 'FlightSans-Bold', sans-serif; padding-top:1.5rem;}
#sec3 .sub-contents .cont-wide {position:relative;padding:3rem 0; background:url(//resfor.cafe24.com/wig/site/mosim/repair_bg.jpg) no-repeat center center; background-size: cover;}
#sec3 .sub-contents .cont-wide:before{content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.68);}
#sec3 .sub-contents .cont-wide .container{position:relative;max-width:1488px; padding-right:24px; padding-left:24px;margin:0 auto; }
#sec3 .sub-contents .cont-wide .container .bx-grid-wrp{color:#fff; position:relative;}
#sec3 .sub-contents .cont-wide .container .bx-grid-wrp .bx-grid-list{gap:5.6%;display:flex; align-items:unset; justify-content:center;flex-direction:column;}
#sec3 .sub-contents .cont-wide .container .bx-grid-wrp .bx-grid-list .bx-grid-item{max-width:297px; border:1px solid rgba(255,255,255,0.8); border-radius:1em; flex:1; position:relative; font-size:1.75rem; overflow:hidden; margin:20px;}
#sec3 .sub-contents .cont-wide .container .bx-grid-wrp .bx-grid-list .bx-grid-item:before{content:""; display:block; padding-top:102.034%; width:100%; background:rgba(255,255,255,0.1); backdrop-filter:blur(5px);}
#sec3 .sub-contents .cont-wide .container .bx-grid-wrp .bx-grid-list .bx-grid-item img{width:5.25rem; height:5.25rem; margin:0.75em 0;}
#sec3 .sub-contents .cont-wide .container .bx-grid-wrp .bx-grid-list .bx-grid-item h5{font-size:1.375rem;font-weight:600; line-height:1.17857; color:#B2F3F3; padding-top:1rem;}
#sec3 .sub-contents .cont-wide .container .bx-grid-wrp .bx-grid-list .bx-grid-item p{font-size:1rem; font-weight:300; line-height:1.27857; color:#fff; padding:1rem 8% 0; word-break:keep-all; opacity:0.7; letter-spacing:0 !important;}
.bx-grid-item>* {display:flex; align-items:center; justify-content:center; flex-direction:column; position:absolute; top:0; left:0; width:100%; height:100%; text-align:center;}



.repair_step {position:relative; background:#fff;letter-spacing:-0.04em; padding:5rem 0; width:90%; margin:0 auto;}
.repair_step .inner {position:relative; max-width:1500px; margin:0 auto; }
.repair_step .inner .tit_box .tit {font-size:1.75rem; font-family :'FlightSans-Bold', sans-serif; line-height:2;}
.repair_step .inner .tit_box span{display:block; font-size:1rem; line-height:1.5; font-family :'FlightSans-Regular', sans-serif; word-break:keep-all;}
.repair_step .inner .cont_box_wrap{position:relative; padding:4rem 0 0 0;}
.repair_step .inner .cont_box_wrap .cont_box{counter-reset:item 0; position:relative; display:flex;  flex-direction: column; gap:3rem;}
.repair_step .inner .cont_box_wrap .cont_box .item {display:grid; align-items:center; gap:0 5rem; width:100%;}
.repair_step .inner .cont_box_wrap .cont_box .item .img {position:relative;}
.repair_step .inner .cont_box_wrap .cont_box .item .img img {width:100%; height:100%;object-fit: cover; border-radius:20px;}
.repair_step .inner .cont_box_wrap .cont_box .item h6 {display:inline-block; counter-increment:item; position:relative; margin-bottom:1em; font-size:1rem; font-weight:700; color:#355BF5;font-family: 'Montserrat', sans-serif; letter-spacing:0.5px;}
.repair_step .inner .cont_box_wrap .cont_box .item h6:before{content:''; position:absolute; bottom:5px; right:0; transform:translateX(calc(100% + 0.67em)); width:2.5em; height:1px; background:#999;}
.repair_step .inner .cont_box_wrap .cont_box .item h6:after{content:'STEP 1'; position:absolute; top:3px; right:0; transform:translateX(calc(100% + 4.5em));color:#333; font-size:0.875rem;}
.repair_step .inner .cont_box_wrap .cont_box .item:nth-child(2) h6:after {content:'STEP 2';}
.repair_step .inner .cont_box_wrap .cont_box .item:nth-child(3) h6:after {content:'STEP 3';}
.repair_step .inner .cont_box_wrap .cont_box .item:nth-child(4) h6:after {content:'STEP 4';}
.repair_step .inner .cont_box_wrap .cont_box .item .tit{margin-top:1em; font-size:1.5rem; font-family :'FlightSans-Bold', sans-serif; line-height:1.5;}
.repair_step .inner .cont_box_wrap .cont_box .item .txt{font-size:1rem; font-family :'FlightSans-Regular', sans-serif; line-height:1.5; color:#333; margin-top:1em; word-break:keep-all;}




/* sec11 */
#sec11{ overflow: hidden; position:relative; }
#sec11 .subTx{font-size: 1.125rem; position:relative; padding-bottom:50px; line-height:1.4; text-align:center; width:90%; margin:0 auto;word-break:keep-all;font-family: 'FlightSans-Regular', sans-serif;}
#sec11 .subTx:before{content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:1px; height:2.25rem; background:#999;}
#sec11 .mainTx {font-size:1.75rem;  line-height:2.5;  letter-spacing: -0.2px; text-align:center; font-family: 'FlightSans-Bold', sans-serif;}
#sec11 #main_slider{margin: 0 auto;}
#sec11 #main_slider .slick-list {padding:11rem 0 14rem!important;}
#sec11 #main_slider .slick-list .slick-track{margin-left:-58.5%;}
#sec11 #main_slider .main_slide {height:100%; position:relative; opacity:1; transform: scale(1);transition:all 1s;}
#sec11 #main_slider .main_slide:not(.slick-center){transform: scale(.9);opacity:.5;}
#sec11 #main_slider .main_slide a{display: block; position:absolute; width:95%; left:50%;bottom:2rem; transform: translate(-50%, 100%); z-index:10; background:#999;}
#sec11 #main_slider .main_slide img {width:100%;}
#sec11 #main_slider .main_slide .txt_wrap {padding:2rem 1.5rem; background:#fff;}
#sec11 #main_slider .main_slide .txt_wrap .tit{font-size: 1rem; display:block; padding-bottom:10px; font-family: 'FlightSans-Regular', sans-serif;}
#sec11 #main_slider .main_slide .txt_wrap .tit_tag{ font-size:1.25rem; line-height:1.4; padding-bottom:1.5rem; display:block; font-family: 'FlightSans-Bold', sans-serif; padding-right:1rem;word-break: break-all;overflow-wrap: break-word;}
#sec11 #main_slider .main_slide .txt_wrap .tit_text{font-size:1rem; line-height:1.4; word-break:keep-all;font-family: 'FlightSans-Regular', sans-serif;}
#sec11 #main_slider .main_slide .txt_wrap .more_btn{position:absolute;right:0; top:0; display:flex; align-items:center; justify-content:center; width:2rem; height:2rem; background-color:#355BF5;}
#sec11 #main_slider .main_slide .txt_wrap .more_btn img{width:40%; height:40%; margin:auto; transition:transform 0.4s;}
#sec11 #main_slider .main_slide .txt_wrap .more_btn:hover img{transform:rotate(180deg);}
#sec11 .slide_move{position: absolute; top:55%; left:50%; width:55vw;transform: translate(-50%,-50%);z-index: 2;}
#sec11 .swiper_btn_prev{position: absolute; top: 50%; left: 10px; right:auto; z-index: 10;cursor: pointer;}
#sec11 .swiper_btn_next{position: absolute; top: 50%; right: 10px; left:auto; z-index: 10; cursor: pointer;}


#main_slider ul.slick-dots { width:100%; margin: 0 auto; text-align: center;position: absolute; top: 1rem; font-size: 0; -webkit-box-sizing: border-box; -khtml-box-sizing :border-box; -moz-box-sizing :border-box; -ms-box-sizing :border-box; -o-box-sizing :border-box; box-sizing :border-box;left: 0; right: 0; transition:opacity 1s 0.2s;}
#main_slider ul.slick-dots li {display: inline-block; margin:5px; border:1px solid #355BF5; border-radius:100px; background: #fff; text-align: center; position: relative; transition:all 0.4s;}
#main_slider ul.slick-dots li button {display:inline-block;color: #355BF5; padding:5px 15px; font-size: 0.875rem; outline:0; background:transparent;transition:all 0.4s;font-family: 'FlightSans-Regular', sans-serif;}
#main_slider ul.slick-dots li.slick-active button {color: #fff;}
#main_slider ul.slick-dots li.slick-active {background-color:#355BF5;}
#main_slider ul.slick-dots li:hover button {color: #fff;}
#main_slider ul.slick-dots li:hover {background-color:#355BF5;}
.slick-prev, .slick-next{display:none !important; font-size:0; line-height:0; position:absolute; top:50%; width:50px; height:50px; padding:0; background:transparent; cursor:pointer;transform:translate(0, -50%);display:block; z-index:10;}
.slick-prev{left:22%; background:url(//skin.makeshop.co.kr/skin/flea_market/PC_img/best_prev.png) no-repeat center center;}
.slick-next{right:22%; background:url(//skin.makeshop.co.kr/skin/flea_market/PC_img/best_next.png) no-repeat center center;}




.cont {display:flex; word-break:keep-all;margin: 4rem auto 0; overflow:hidden; position:relative; gap:5%;flex-direction:column; width:90%;}
.cont .title {display:flex; flex-direction:column; flex-shrink:0; }
.cont .title h1 {font-size:1.25rem; line-height:1.4; font-family: 'FlightSans-Bold', sans-serif; color:#333; display:block;}
.cont .title h1 span{display:block; font-size:2.25rem; font-family: 'Montserrat', sans-serif; color:#355BF5; padding-bottom:3px; font-weight:600;}
.cont .title>p{font-size:1rem; line-height:1.5; color:#333; font-family: 'FlightSans-Regular', sans-serif; position:relative; padding-top:15px;} 
.cont .title .line{display:inline-block; width:1px; height:5.75rem; background:#898989; margin-left:5px;}
.gallery-wrap{ padding-top:2.5rem;}
.gallery-container {position: relative; overflow: hidden; transform-origin:right; margin-bottom:50px;}
.gallery-container:before {content:''; position:absolute; bottom:0px; width:100%; height:1px; background:#ddd;}
.gallery-container .gallery-track .swiper-slide img{width:100%;}
.gallery-container1 {position: relative; overflow: hidden; transform-origin:right; margin-bottom:50px;}
.gallery-container1 .gallery-track .swiper-slide img{width:100%;}
.gallery-container1:before {content:''; position:absolute; bottom:0px; width:100%; height:1px; background:#ddd;}
.gallery-container2 {position: relative; overflow: hidden; transform-origin:right; margin-bottom:50px;}
.gallery-container2 .gallery-track .swiper-slide img{width:100%;}
.gallery-container2:before {content:''; position:absolute; bottom:0px; width:100%; height:1px; background:#ddd;}
.gallery-container3 {position: relative; overflow: hidden; transform-origin:right;}
.gallery-container3 .gallery-track .swiper-slide img{width:100%;}
.title1 h2{font-size:1.25rem; line-height:1.6; font-family: 'FlightSans-Regular', sans-serif; padding-bottom:10px; position:relative; display:inline-block;}
.title1 h2:before{content:""; position:absolute; left:0; bottom:10px; width:100%; height:0.5em; z-index:-1; transition:width 1s; box-sizing:border-box; background:#E0FFFF;}
.title1 span{font-size:1rem; line-height:1.4; color:#666; position:relative; display:block;font-family :'FlightSans-Regular', sans-serif;}

.gallery-track {display: flex; transition: transform 0.5s ease-in-out; padding:25px 0 60px;}
.gallery-item {}
.gallery-item:before {content:''; position:absolute; top:0; opacity:0; width:100%; height:100%; background:rgba(0,0,0,0.6); transition:opacity 0.2s;}
.gallery-item:after {content:'\2b'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); opacity:0; color:#fff; font-size:4.5rem; font-family:'Font Awesome 6 Pro'; font-weight:300; transition: all 0.2s;}
.gallery-item:hover::before, .gallery-item:hover::after {opacity:1; cursor:pointer;}
.gallery-item:hover::after{transform:translate(-50%,-50%) rotate(180deg);}

.modal {position: fixed;z-index: 1000;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.85);display: flex;justify-content: center;align-items: center;opacity: 0;visibility: hidden;transition: opacity 0.3s ease, visibility 0.3s ease;}
.modal.is-active {opacity: 1;visibility: visible;}
.modal-content {position: relative;max-width: 1000px;max-height: 85vh;display: flex;align-items: center;transform: scale(0.95);transition: transform 0.3s ease; text-align:center;}
.modal.is-active .modal-content {transform: scale(1);}
#modalImage {width: 100%;height: auto;max-height: 85vh;object-fit: contain;}
#modalImage1 {width: 100%;height: auto;max-height: 85vh;object-fit: contain;}
.close {position: absolute;top: 20px;right: 35px;color: #fff;font-size: 45px;font-weight: bold;cursor: pointer;transition: color 0.2s;}
.close:hover { color: #bbb; }

#modal-prev, #modal-next { /* 모달 버튼 ID로 명확하게 선택 */cursor: pointer;position: absolute;top: 50%;transform: translateY(-50%);padding: 16px;color: white;font-weight: bold;font-size: 30px;transition: 0.3s ease;user-select: none;background-color: rgba(0, 0, 0, 0.3);}
#modal-prev { left: 0; border-radius: 0 5px 5px 0; }
#modal-next { right: 0; border-radius: 5px 0 0 5px; }
#modal-prev:hover, #modal-next:hover {background-color: rgba(0, 0, 0, 0.6);}




/* BASIC css end */