@charset "utf-8";
/*───────────────────────────────────────────────────────────
	
	header, footer, main 관련 작성 css 파일입니다.

	** 이와 서브페이지 관련 css는 /css/sub.css 에 있습니다.

───────────────────────────────────────────────────────────*/

/*───────────────────────────────────────────────────────────
	layout common
───────────────────────────────────────────────────────────*/
	#wrap {position:relative;width:100%; box-sizing: border-box; overflow: clip;}
    .w_custom{position: relative; width: calc(100% - 60px); max-width: 1200px; margin-inline: auto; box-sizing: border-box;}
    #container{position: relative; padding-block:80px 150px; box-sizing: border-box;}
    #wrap [class*="swiper-button"]:after{display: none;}
    #layer_dim{position: fixed;inset: 0;background: rgba(0,0,0,0.6);z-index: 120;opacity: 0;pointer-events: none;transition: all 0.4s;}
    #wrap .dn{display: none;}
    #container:has(.fullSec){width: 100%; max-width: 100%;}
    #container:has(.pbDn){padding-bottom: 0;}

    @media (max-width:1200px){
        br.for_pc{display: none;}
    }
    @media (max-width:1023px){
        #container{padding-block:clamp(50px, 8vw, 80px) clamp(100px, 15vw, 150px);}
    }
    @media (max-width:860px){
        .w_custom{width: calc(100% - 30px);}
    }
    @media (max-width:320px){
        .w_custom{width: calc(100% - 20px);}
    }



/*───────────────────────────────────────────────────────────

    HEADER | outline/header.html, outline/nav.html

───────────────────────────────────────────────────────────*/
    #header{position: fixed; top:0; left:0; width: 100%; height: 100px; z-index: 100; transition: all 0.4s;}
    #header .w_custom{max-width: 1745px; display: flex; align-items: center; justify-content: space-between; height: 100%; transition: inherit; filter: var(--filter-white);}
    #header .logo{position: relative; height: 100%;}
    #header .logo a{display: flex;align-items: center;padding-block: 28px;max-width: 180px;height: 100%;}
    #header .gnb{position: absolute;top:0;left:50%;translate: -50%;width: calc(100% - 400px);height: 100%;font-size: var(--title-20);display: flex;justify-content: center;text-align: center;}
    #header .gnb > li{position: relative;font-size: 90%;font-weight: 400;color: var(--black-color03);height: 100%;transition: all 0.4s;letter-spacing: 0;}
    #header .gnb > li > a{display: flex;align-items: center;justify-content: center;height: 100%;padding-inline: clamp(15px, 1.6vw, 30px);}
    #header .gnb .dep02{position: absolute;top: 100%;left: 50%;translate: -50%;background: var(--point-white);box-shadow:3px 3px 5px rgba(0,0,0,0.1); width: 180px;padding-block: 18px;opacity: 0;pointer-events: none;transition: inherit;}
    #header .gnb .dep02 > li{font-size: 90%;color: var(--black-color05); transition: inherit;}
    #header .gnb .dep02 > li > a{display: block; padding: 8px 25px;}
    #header .utility{display: flex; align-items: center; gap: 30px;}
    #header .allCate{display: flex;flex-direction: column;justify-content: space-between;width: 28px;aspect-ratio: auto 1.42;}
    #header .allCate span{height: 3px; background: var(--black-color03);}


    .langList{display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; font-size: var(--title-20);}
    .langList > li{font-size: 85%;font-weight: 400;color: var(--black-color03);letter-spacing: 0;}
    .langList > li.on{color: var(--point-color02);}

        

        /* over */
        @media (hover:hover) and (pointer:fine) {
            #header:hover{background: var(--point-white);}
            #header:hover .w_custom{filter:none;}
            #header .gnb > li:hover{color: var(--point-color02);}
            #header .gnb > li:hover .dep02{opacity: 1; pointer-events: all;}
            #header .gnb .dep02 > li:hover{color: var(--black-color01);}
        }

        /* on */
        #header.on{background: var(--point-white); box-shadow: inset 0 0 0 1px var(--border-color01);}
        #header.on .w_custom{filter:none;}

    @media (max-width:1023px) {
        #header{height: auto;}
        #header .w_custom{height: auto;flex-wrap: wrap;}
        #header .logo a{max-width: clamp(130px, 19vw, 180px);}
        #header .gnb{position: relative;inset: auto;width: calc(100% + 60px);margin-left: -30px;padding-inline: 30px;height: auto;translate: 0;justify-content: flex-start;overflow: hidden;overflow-x: auto;gap: 30px;padding-bottom: 15px;flex-shrink: 0;}
        #header .gnb > li{flex-shrink: 0;}
        #header .gnb > li > a{padding:0;}
        #header .gnb .dep02{display: none;}
        #header .utility{gap: clamp(20px, 3vw, 30px);}
        #header .allCate{width: clamp(26px, 3.3vw, 28px)}
        .langList{column-gap: clamp(12px, 2vw, 20px);}
    }
    @media (max-width:640px) {
        #header .allCate span{height: 2px;}
    }


/*───────────────────────────────────────────────────────────

    MAIN | index.html

───────────────────────────────────────────────────────────*/
    /* 비주얼 */
        .main_visual {position: relative; height: 100vh;}
		.main_visual:before{position:absolute; content:''; inset:0; background:rgb(0 0 0 / 40%); z-index: 1;}
        .main_visual video{position: absolute; inset: 0; width: 100%;height: 100%;object-fit: cover;}
        .main_visual .slick-slide {position: relative; height: 100vh; overflow: hidden;}
        .main_visual .thumb {position: absolute; inset: 0; background: no-repeat center / cover;}
        .main_visual .link{position: absolute; inset: 0; z-index: 3; display: none;}
        .main_visual .txt_box{position: relative;font-size: var(--title-20);font-family: var(--font-type02);color: var(--point-white);text-align: center;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 30px;height: 100%;max-width: 1745px; text-wrap: balance; z-index: 2;}
        .main_visual .txt_box h2{font-size: 72px; font-weight: 900; line-height: 1.38;}
        .main_visual .txt_box h4{font-size: 150%;font-weight: 400;line-height: 1.4;}

            .main_visual .txt_box{translate: 0 100px; opacity: 0; transition: all 1.5s;}
            .main_visual.on .txt_box{translate: 0; opacity: 1; }

        .main_visual .scrDwn{position:absolute;left:50%;bottom:50px;translate: -50%;text-align: center;font-size: var(--title-20);z-index: 3;}
        .main_visual .scrDwn a{font-size:max(12px, 70%);color:var(--point-white);}
        .main_visual .scrDwn a:before{position: absolute;content:'';width: 40px;aspect-ratio: auto 0.52;background: url('../images/skin/ico_main_scroll.png') no-repeat center top / 100% auto;left: 50%;translate: calc(-50% - 0.5px);bottom: calc(100% + 5px);}
            .main_visual .scrDwn a:before{animation-name: scrDwn; animation-duration:1.5s; animation-iteration-count:infinite; animation-direction:alternate;  animation-fill-mode: forwards; transition-timing-function:linear;}
            @keyframes scrDwn {0% {transform:translateY(0);}100% {transform:translateY(-15px);}}

        @media (max-width:1023px) {
            .main_visual {height: clamp(600px, 96vw, 960px);}
            .main_visual .slick-slide{height: clamp(600px, 96vw, 960px);}
            .main_visual .txt_box{gap: clamp(15px, 3vw, 30px);}
            .main_visual .txt_box h2{font-size: clamp(32px, 7.2vw, 72px);}
            .main_visual .txt_box h4{font-size: 140%;}
            .main_visual .scrDwn{bottom: clamp(20px, 5vw, 50px);}
            .main_visual .scrDwn a:before{width: clamp(30px, 4vw, 40px);}
        }
        @media (max-width:640px) {
            .main_visual .txt_box h4{font-size: 130%;}
            .main_visual .scrDwn{display: none;}
        }
        @media (max-width:479px) {
            .main_visual .txt_box h4{font-size: 110%;}
        }

    /* 타이틀 */
        .main_title{position: relative; font-size: var(--title-20); display: flex; flex-direction: column; gap: 15px;}
            .main_title.cen{text-align: center;}
            .main_title.hd{margin-bottom: 80px;}
            .main_title.hdS{margin-bottom: 25px;}
        .main_title h3{font-size: 60px;font-weight: 500;color: var(--black-color03);font-family: var(--font-type02);line-height: 1.2;letter-spacing: -0.03em;}
        .main_title h3 em{font-weight: inherit; color: var(--point-color02);}
        .main_title h4{font-size: 200%; font-weight: 400; color: var(--black-color03); line-height: 1.3;}
        .main_title h6{font-size: 100%;font-weight: 400;line-height: 1.6;color: var(--black-color03);}
        .main_title h6 + p{margin-top: 25px;}
        .main_title p{font-size: max(13px, 80%);font-weight: 400;color: var(--black-color03);line-height: 1.875;}

        @media (max-width:1023px) {
            .main_title{gap: clamp(10px, 1.5vw, 15px);}
			.main_title.hd{margin-bottom: clamp(30px, 8vw, 80px);}
            .main_title h3{font-size: clamp(34px, 6vw, 60px);}
            .main_title h4{font-size: 190%;}
            .main_title h6 + p{margin-top: clamp(15px, 2.5vw, 25px);}
        }
        @media (max-width:640px) {
            .main_title h4{font-size: 180%;}
        }
        @media (max-width:479px) {
            .main_title h4{font-size: 170%;}
            .main_title h6{font-size: 90%;}
        }

    /* 어바웃 */
        .main_about .w_custom{min-height: 100vh; display: flex;align-items: center; padding-block: 150px;}
        .main_about .w_custom:before{position: absolute;content:'Medi-Bio Cosmetics';right: 0;bottom: 0;font-size: clamp(36px, 5.8vw, 110px);font-weight: 400;color: var(--point-color02);opacity: 0.4;letter-spacing: -0.03em;text-align: right;}
        .main_about .cont{display: flex;align-items: flex-start;gap: clamp(50px, 5.3vw, 100px);}
        .main_about .main_title{width: 100%;}
        .main_about .thumb{position: relative; width: 50%;flex-shrink: 0;}
        .main_about .thumb:before{position: absolute;content:'';width: 80%;height: calc(100% - 20px);background: var(--point-color01);right: -20px;bottom: -20px;}
        .main_about .thumb img{position: relative;}

        @media (max-width:1023px) {
            .main_about .w_custom{padding-block: clamp(100px, 15vw, 150px);min-height: auto;}
            .main_about .cont{flex-wrap: wrap;gap: clamp(25px, 5vw, 50px);}
            .main_about .thumb{width: min(672px, 100%);}
            .main_about .thumb:before{right: clamp(-20px, -2vw, -10px);bottom: clamp(-20px, -2vw, -10px);}
        }

    /* 서비스 */
        .main_service{min-height: 100vh;display: flex;align-items: center;padding-block: 150px;background: var(--point-grid01)}
        .main_service .info_list{display: flex;max-width: 930px;margin-inline: auto;display: grid;grid-template: auto / repeat(3, 1fr);gap: 40px;}
        .main_service .info_list > li{position: relative;text-align: center;padding-inline: 15px;display: flex;flex-direction: column;gap: 30px;}
        .main_service .info_list .icon{display: flex;align-items: center;justify-content: center;width: 80%;max-width: 200px;aspect-ratio: auto 1;margin-inline: auto;border: 5px solid var(--point-color01);border-radius: 100%;}
        .main_service .info_list .icon img{max-width: 50%;max-height: 50%;}
        .main_service .info_list .desc{font-size: var(--title-20);display: grid;gap: 18px;}
        .main_service .info_list .desc dt{font-size: 110%;font-weight: 500;color: var(--black-color03);}
        .main_service .info_list .desc dd{font-size: max(13px, 70%);font-weight: 400;color: var(--black-color03);line-height: 1.7;}

        @media (max-width:1023px) {
            .main_service{padding-block: clamp(100px, 15vw, 150px);min-height: auto;}
            .main_service .info_list > li{gap: clamp(15px, 3vw, 30px);}
            .main_service .info_list .desc{gap: clamp(12px, 1.8vw, 18px);}
            .main_service .info_list .icon{max-width: clamp(150px, 21vw, 200px);}
        }
        @media (max-width:640px) {
            .main_service .info_list{grid-template: auto / repeat(2, 1fr);}
        }
        @media (max-width:479px) {
            .main_service .info_list{grid-template: auto / repeat(1, 1fr);}
        }

    /* 개발 가치 */
        .main_develop{padding-block: 150px;}
        .main_develop .devSwiper{position: relative; padding-inline: 80px;}
        .main_develop .devSwiper .swiper-slide{position: relative;height: auto;min-height: 600px;display: flex;align-items: center;justify-content: center;overflow: hidden;padding: 60px;}
        .main_develop .devSwiper .swiper-slide:before{position: absolute;content:'';inset: 0;background: rgba(0,0,0,0.5);transition: all 0.4s;z-index: 3; pointer-events: none;}
            .main_develop .devSwiper .swiper-slide.on:before{opacity: 0;}
        .main_develop .devSwiper .link{position: absolute; inset: 0; z-index: 3;}
        .main_develop .devSwiper .main_title{width: calc(100% - 100px);background: rgba(255,255,255,0.9);padding: 95px;}
        .main_develop .devSwiper .thumb{position: absolute; inset: 0;}
        .main_develop .devSwiper .thumb img{width: 100%; height: 100%; object-fit: cover;}
        .main_develop .devSwiper .controller{position: relative;}
        .main_develop .devSwiper [class*="swiper-button"]{position: absolute;inset: auto;top: 50%;left: clamp(-120px, -6.25vw, 0px);width: 59px;height: auto;aspect-ratio: auto 1;border: 2px solid rgba(255,255,255,0.6);}
            .main_develop .devSwiper [class*="swiper-button"]:before{position: absolute;content:'';width: 47%;aspect-ratio: auto 1;border: 3px solid rgba(255,255,255,0.6);rotate: 135deg;top: 50%;left: 63%;translate: -50% -50%;clip-path: var(--clip-poly01);border-radius: 2px;}
            .main_develop .devSwiper [class*="swiper-button"].swiper-button-next{left:auto;right: clamp(-120px, -6.25vw, 0px);scale: -1 -1;}

        @media (max-width:1400px) {
            .main_develop .devSwiper{padding-inline: 140px;}
            .main_develop .devSwiper [class*="swiper-button"]{left:0;}
            .main_develop .devSwiper [class*="swiper-button"].swiper-button-next{right:0;}
        }
        @media (max-width:1023px) {
            .main_develop{padding-block: clamp(100px, 15vw, 150px);}
            .main_develop .devSwiper{padding-inline: clamp(15px, 4vw, 40px);}
            .main_develop .devSwiper [class*="swiper-button"]{display: none;}
            .main_develop .devSwiper .swiper-slide{min-height: auto;padding: clamp(20px, 6vw, 60px);}
            .main_develop .devSwiper .main_title{width: 100%;padding: clamp(45px, 9.5vw, 95px) clamp(20px, 5vw, 50px);}
        }
    
    .main_contact{min-height: 100vh;padding-block: 150px;background: url('../images/skin/main_contact01.jpg') no-repeat center / cover;display: flex;align-items: center;}
    .main_contact .main_title :where(h3, h6){filter: var(--filter-white);}
    .main_contact .link_list{display: flex; justify-content: center; flex-wrap: wrap; gap: 40px; font-size: var(--title-20);}
    .main_contact .link_list > li{font-size: 120%;}
    .main_contact .link_list > li > a{display: flex;align-items: center;justify-content: center;height: 100%;color: var(--point-white);border: 2px solid rgba(255,255,255, 0.5);padding: 15px 30px;border-radius: 50px;min-width: 200px; transition: all 0.4s;}

        /* over */
        @media (hover:hover) and (pointer:fine) {
            .main_contact .link_list > li > a:hover{background: var(--point-white); color: var(--black-color01); border-color: var(--point-white);}
        }

    @media (max-width:1023px) {
        .main_contact{min-height: auto; padding-block: clamp(80px, 15vw, 150px);}
        .main_contact .link_list{gap: clamp(15px, 4vw, 40px);}
        .main_contact .link_list > li > a{min-width: clamp(130px, 21vw, 200px);padding: clamp(12px, 2vw, 15px) clamp(25px, 3vw, 30px);}
    }
    @media (max-width:479px) {
        .main_contact{min-height: auto;padding-block: clamp(100px, 15vw, 150px);}
        .main_contact .link_list{gap: clamp(15px, 4vw, 40px); display: grid; grid-template: auto / repeat(2, 1fr);}
        .main_contact .link_list > li{font-size: 110%; width: 100%;}
    }

/*───────────────────────────────────────────────────────────

    Footer | outline/footer.html

───────────────────────────────────────────────────────────*/
    #footer{position: relative;background: var(--point-color03);color: var(--black-color12);padding-block: 40px;}
    #footer .top_sec{display: flex;align-items: center;justify-content: space-between;gap: 15px 30px; padding-block: 20px;flex-wrap: wrap;border-bottom: 1px solid var(--black-color12);margin-bottom: 50px;}
    #footer .gnb{display: flex;flex-wrap: wrap;gap: 10px clamp(25px, 3.2vw, 60px);font-size: var(--title-20);}
    #footer .gnb > li{position: relative; font-size: 90%;}
    #footer .link_list{display: flex; flex-wrap: wrap; font-size: var(--title-20);}
    #footer .link_list > li{font-size: 80%;}
        #footer .link_list > li:after{display: inline-flex; content:''; width: 1px; height: 12px; background: rgba(255,255,255,0.4); margin-inline: 15px;}
        #footer .link_list > li:last-child:after{display: none;}
    #footer .link_list > li strong{font-weight: 500;}
    #footer .cont{display: flex;flex-wrap: wrap;gap: 40px;}
    #footer .info{display: flex;flex-direction: column;justify-content: center;gap: 15px;}
    #footer .logo{filter: var(--filter-white);max-width: 180px;}
    #footer .addr_list{display: flex; flex-direction: column; gap: 15px; font-size: var(--title-20);}
    #footer .addr_list .desc{display: flex; align-items: baseline; font-size: 90%; gap: 25px;}
    #footer .addr_list .desc dt{min-width: 100px; max-width: 100%; text-align: center; flex-shrink: 0;}
    #footer .addr_list.tel_list .desc dt{min-width: auto;text-align: left;}

    @media (max-width:1023px) {
        #footer{padding-block: clamp(25px, 4vw, 40px);}
        #footer .top_sec{padding-block: clamp(18px, 2.5vw, 20px);margin-bottom: clamp(30px, 5vw, 50px);}
        #footer .link_list > li:after{height: clamp(10px, 1.7vw, 12px);}
        #footer .cont{gap: clamp(30px, 4vw, 40px);}
        #footer .logo{max-width: clamp(130px, 19vw, 180px);}
        #footer .addr_list{width: 100%;}
        #footer .addr_list .desc dt{min-width: auto; text-align: left;}
    }

    .quick_list{position: fixed;right: clamp(60px, 3.2vw, 60px);bottom: clamp(60px, 3.2vw, 60px);z-index: 9;transition: all 0.4s;}
    .quick_list > li{position: relative;}
    .quick_list > li + li{margin-top: 10px;}
    .quick_list > li > a{display:flex;align-items: center;justify-content: center;width:50px;height: 50px;border-radius: 100%;box-shadow: 0 0 20px rgb(85 85 85 / 20%);background:var(--point-white);padding: 10px;}
        .quick_list > li.scr_top{margin-top:20px;}
        .quick_list > li.scr_top > a{background: var(--point-color01);}
        .quick_list > li > a:has(.counting){padding-right:5px;}
    .quick_list .bubble{position:absolute; top:50%; right:calc(100% + 17px); transform: translateY(-50%); font-size: 13px; font-weight: 500; color: var(--black-color03); display:inline-flex; align-items: center; height:31px; box-sizing: border-box; padding:0 15px; border-radius: 30px; background: var(--point-white); box-shadow: 0 0 20px rgba(85,85,85,0.2); width: max-content; opacity: 0; pointer-events: none; transition: all 0.4s;}
    .quick_list .bubble:before{position:absolute;content:'';top:50%;right:-8px;width:16px;height:1px;transform: translateY(-50%);background: var(--point-color01);}

        /* over */
        @media (hover:hover) and (pointer:fine) {
            .quick_list > li:hover .bubble{opacity: 1; pointer-events: all;}
        }
    @media (max-width:1023px) {
        .quick_list > li > a{width: clamp(40px, 5.5vw, 50px);height: clamp(40px, 5.5vw, 50px);}
    }
    @media (max-width:860px) {
        .quick_list{right:15px;bottom: 15px;}
    }

/*───────────────────────────────────────────────────────────

    aside 

───────────────────────────────────────────────────────────*/
    #aside{position: fixed;top:0;right:0;width: 85%;height: 100%;max-width: 440px;background: var(--point-white);z-index: 150; translate: 100%; transition: all 0.6s;}
        #aside.on{translate: 0;}
        body:has(#aside.on){overflow: clip;}
        body:has(#aside.on) #layer_dim{opacity: 1; pointer-events: all;}
    #aside .top_sec{position: relative;padding-block: 24px;border-bottom: 1px solid var(--border-color03);}
    #aside .top_sec .w_custom{padding-right: 50px;}
    #aside .logo{max-width: 130px;}
    #aside .close_btn{position: absolute;width: 30px;aspect-ratio: auto 1;top: 50%;right: -4px;translate: 0 -50%;}
    #aside .close_btn{&:before, &:after{position: absolute; content:''; width: 100%; height: 2px; background: var(--black-color03); top:50%; left:50%; translate: -50% -50%; rotate: 45deg;}}
    #aside .close_btn:after{rotate: -45deg;}
    #aside .gnb{padding-block: 30px; font-size: var(--title-20);}
    #aside .gnb > li{position: relative; font-size: 90%; font-weight: 500; color: var(--black-color03); border-top: 1px solid var(--border-color01);}
    #aside .gnb > li a{display: block; padding:20px;}
    #aside .gnb .rel_box{position: relative; padding-right: 30px;}
    #aside .gnb .arw{position: absolute;width: 20px;aspect-ratio: auto 1;top: 50%;right: 20px;translate: 0 -50%;cursor: pointer;transition: all 0.4s;}
        #aside .gnb .arw:before{position: absolute;content:'';width: 60%;aspect-ratio: auto 1;border: 2px solid var(--black-color05);clip-path: var(--clip-poly01);top: 30%;left:50%;translate: -50% -50%;rotate: 45deg;}
        #aside .gnb > li.on .arw{scale: -1 -1;}
		#aside .gnb > li.on .arw:before{}
    #aside .gnb .dep02{display: none;padding-bottom: 30px;}
    #aside .gnb .dep02 > li{font-size: 90%;font-weight: 400;color: var(--black-color06);}
    #aside .gnb .dep02 > li > a{padding-block: 9px;}

    @media (max-width:1023px) {
		#aside .top_sec{padding-block:clamp(20px, 2.9vw, 24px);}
        #aside .logo{max-width: clamp(110px, 14vw, 130px);}
        #aside .close_btn{width: clamp(23px, 3.5vw, 30px);}
        #aside .gnb > li a{padding: clamp(17px, 2.5vw, 20px) clamp(15px, 2vw, 20px);}
        #aside .gnb .arw{width: clamp(18px, 2.5vw, 20px);right: clamp(15px, 2vw, 20px);}
        #aside .gnb .dep02{padding-bottom: clamp(20px, 3vw, 30px);}
        #aside .gnb .dep02 > li > a{padding-block: clamp(7px, 1.4vw, 9px);}
    }
    @media (max-width:860px) {
        #aside .w_custom{width: calc(100% - 40px);}
    }