@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: 1400px; margin-inline: auto; box-sizing: border-box;}
    #container{position: relative;padding-top:120px;padding-bottom:150px; box-sizing: border-box;}
    body:has(.sub_about) #container{padding-top:0;}
    #container:has(.fullSec){width: 100%; max-width: 100%;}

    @media (max-width:1400px){
        br.for_pc{display:none;}
    }
    @media (max-width:1023px){
        #container{padding-top:clamp(60px, 10vw, 120px);padding-bottom: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: var(--row-gap100);z-index: 100;box-shadow: inset 0 -1px 0 rgb(255 255 255 / 10%);transition: all 0.4s;}
        #header.on{background: rgb(0 0 0 / 30%);}

    body:has(.sub_about) #header{position: absolute;}
    #header .w_custom{max-width: 1800px;height: 100%;display: flex;justify-content: space-between;gap: 15px;}
    #header .logo{height: 100%;}
    #header .logo a{display: flex;align-items: center;height: 100%;padding-block: 15px;max-width: clamp(90px, 15vw, 150px);}
    #header .gnb{position: absolute;top:0;left: 50%;translate: -50%;height: 100%;display: flex;justify-content: center;text-align: center;width: calc(100% - 300px);}
    #header .gnb > li{position: relative;height: 100%;font-size: var(--text-18);font-weight: 500;color: var(--black-color01); letter-spacing: 0; transition: all 0.4s;}
    #header .gnb > li > a{display:flex;align-items: center;justify-content: center;height: 100%;padding-inline: clamp(20px, 2.1vw, 40px);transition: inherit; }
    #header .gnb .dep02{position: absolute;top:85%;left:50%;translate: -50%;width: max-content;max-width: 300px;min-width: 180px;background: var(--point-color01);border-radius: var(--radius-15);padding-block: 15px;opacity: 0;pointer-events: none;transition: inherit;}
	#header .gnb .dep02 > li{font-size:90%;font-weight:400;transition: inherit;filter: var(--filter-white);}
	#header .gnb .dep02 > li > a{display: block;padding: 8px 25px;}

    #header .utility{display: flex; align-items: center; gap: var(--col-gap30);}
    #header .allCate{display: flex;flex-direction: column;justify-content: space-between;width: clamp(24px, 4vw, 30px);aspect-ratio: auto 1.4;}
    #header .allCate span{width: 100%; height: 2px; background: var(--black-color01);}

        /* color */
            #header :is(.gnb > li > a, .utility, .allCate){filter: var(--filter-white);}

    .com-btn{display: flex;align-items: center;justify-content: center;border: 1px solid rgb(0 0 0 / 40%);border-radius: 50px;font-size: var(--text-15);font-weight: 500;color: var(--black-color03);padding: clamp(7px, 1.4vw, 9px) clamp(12px, 2.6vw, 26px) clamp(6px, 1.3vw, 8px);text-align: center;}

        /* over */
        @media (hover:hover) and (pointer:fine) {
            #header .gnb > li:hover .dep02{opacity: 1; pointer-events: auto;}
        }


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

	Aside | outline/nav.html

───────────────────────────────────────────────────────────*/
    #aside{position: fixed;top: 0;left:0;width: 100%;height: 100%;z-index: 999;background: rgba(255,255,255,0.8);backdrop-filter:blur(10px);display: flex;flex-direction: column;overflow: hidden;overflow-y: auto;padding-block: 10vh;box-sizing: border-box;opacity: 0;transition: all 0.6s;clip-path: inset(0 0 100% 0);}
        #aside.on{opacity: 1;clip-path: inset(0);}
        body:has(#aside.on){overflow: clip; touch-action: none;}
    #aside .w_custom{flex-shrink: 0;max-width: 1800px;min-height: 100%;display: flex;align-items: center;}
    #aside .gnb{width: 100%;font-size: var(--text-19);letter-spacing: 0;display: grid;align-items: start;justify-content: center;grid-template: auto / repeat(3, 1fr);gap: clamp(15px, 2.2vw, 40px);}
    #aside .gnb > li{color: var(--black-color01);font-size: inherit;text-align: center;}
        
        @media (min-width:861px) {
            #aside .gnb > li{opacity:0;translate:0 100px;transition:all 0.8s 0.3s;}
            #aside.on .gnb > li{opacity:1;translate:0;}
            #aside.on .gnb > li:nth-child(2){transition-delay:0.4s;}
            #aside.on .gnb > li:nth-child(3){transition-delay:0.5s;}
            #aside.on .gnb > li:nth-child(4){transition-delay:0.6s;}
            #aside.on .gnb > li:nth-child(5){transition-delay:0.7s;}
            #aside.on .gnb > li:nth-child(6){transition-delay:0.8s;}
        }
    #aside .gnb > li > a{position: relative;display: block;font-size: var(--text-36);font-weight: 700;line-height: 1.4;padding-block: 30px;transition: all 0.4s;letter-spacing: 0;}
        #aside .gnb > li > a:before{position: absolute;content: '';top: 0;left: 50%;translate: -50%;width:12px;height: 0;opacity:0;border-radius:100%;background: var(--point-color01);transition:all 0.3s;}
    #aside .gnb .dep02{position: relative;}
    #aside .gnb .dep02 > li > a{display: block;font-weight: 400;padding-block: clamp(7px, 1.7vw, 13px);color: var(--black-color06);line-height: 1.6;transition: all 0.4s;}
    #aside .utility{position: absolute;top: clamp(30px, 2.8vw, 50px);right: clamp(30px, 2.8vw, 50px);display: flex;align-items: center;gap: clamp(20px, 1.6vw, 30px);z-index:2;}
    #aside .close_btn{position: relative;width: clamp(30px, 4vw, 40px);height: clamp(30px, 4vw, 40px);z-index: 9;}
    #aside .close_btn span{position: absolute;top:50%;left:50%;transform: translate(-50%, -50%) rotate(45deg);width: 100%;height: 2px;background: var(--black-color01);}
    #aside .close_btn span + span{transform: translate(-50%, -50%) rotate(-45deg);}
    
        /* over */
            @media (hover:hover) and (pointer:fine){
				#aside .gnb > li:hover > a{color: var(--point-color03);}
                #aside .gnb > li:hover > a:before{height:12px;opacity:1;}
                #aside .gnb .dep02 > li:hover a{color: var(--point-color01);}
            }

    @media (max-width:1023px){
        #aside{padding-block: clamp(80px, 12vw, 120px);}
    }
    @media (max-width:860px){
		#aside{display: block;}
		#aside .w_custom{align-items:flex-start;}
		#aside .gnb{grid-template: auto / repeat(1, 1fr);gap:0;}
        #aside .gnb > li{padding-block: clamp(20px, 3vw, 25px);text-align:left;border-bottom: 1px solid rgba(0,0,0,0.15);}
        #aside .gnb > li > a{padding-block: 0;}
		#aside .gnb > li > a:before{display: none;}
        #aside .gnb .dep02{display: grid;gap: 0 20px;grid-template: auto / repeat(2, 1fr);margin-top: clamp(10px, 1.8vw, 15px);justify-content: flex-start;}
		#aside .utility{top:15px; right: 15px;}
    }
    @media (max-width:479px){
        #aside .gnb .dep02{grid-template: auto / repeat(1, 1fr);}
    }
    
/*───────────────────────────────────────────────────────────

    MAIN | index.html

───────────────────────────────────────────────────────────*/
    /* 비주얼 */
        .main_visual {position:relative; overflow: hidden; background: var(--black-color01);}
        .main_visual .slick-slide {position: relative;height: clamp(580px, 94vw, 940px);overflow: hidden;}
        .main_visual .thumb{position: relative; width: 100%; height: 100%; background: no-repeat center / cover; transition: all 5s 0.2s;}
        .main_visual .active .thumb{scale: 1.05;}
        .main_visual .txt_box{position: absolute;top: clamp(150px, 34vw, 338px);left:50%;translate: -50%;filter: var(--filter-white);text-wrap: balance;}
        .main_visual .txt_box h2{font-size: var(--text-50);font-weight: 500;line-height: 1.4;letter-spacing: 0;}
        .main_visual .txtAni{translate: 70px; opacity: 0; transition: all 1.2s 0.2s;}
            .main_visual .active .txtAni{translate: 0; opacity: 1; }
        .main_visual .controller{position: absolute;left: 50%;bottom: clamp(30px, 13.6vw, 136px);translate: -50%;display: flex;align-items: center;gap: 5px;z-index: 5;pointer-events: none;}
        .main_visual .controller *{pointer-events:auto;}
        .main_visual .slider-progress{position: relative;width: 100%;max-width: clamp(250px, 40vw, 400px);height: 1px;background: rgb(217 217 217 / 50%);margin-right: var(--row-gap35);}
        .main_visual .progress{position: absolute;top:0;left:0;height: 100%;background: var(--point-white);}
        .main_visual .arws{display:flex;align-items:center;gap: var(--row-gap10);flex-shrink: 0;}
        .main_visual .slick-arrow{position: relative;width: clamp(20px, 2.9vw, 24px);aspect-ratio: auto 1;}
            .main_visual .slick-arrow.next{scale: -1 -1;}
            .main_visual .slick-arrow::before{position: absolute;content:'';width: 60%;aspect-ratio: auto 1;border: 2px solid var(--point-white);clip-path: var(--clip-poly02);top: 50%;left: 62%;translate: -50% -50%;rotate: 135deg;border-radius: 2px;}
        .main_visual .slideController{display: flex;align-items: center;gap: 4px;font-size: var(--text-13);font-weight: 300;color: rgb(255 255 255 / 60%);flex-shrink: 0;}
        .main_visual .slideCountItem{color: var(--point-white);width: 18px;}
        .main_visual .scrDwn{position: absolute;right: clamp(30px, 4.2vw, 74px);bottom: 0;z-index: 5;display: flex;flex-direction: column;align-items: center;gap: var(--row-gap20); cursor: pointer;}
        .main_visual .scrDwn dt{font-size: var(--text-16);font-weight: 400;color: rgb(255 255 255 / 80%);writing-mode: tb;font-family:var(--font-type02);letter-spacing: 0.04em;}
        .main_visual .scrDwn dd{position: relative; width: 2px;height: var(--row-gap120);background: rgb(255 255 255 / 30%); overflow: hidden;}
        .main_visual .scrDwn dd::before{position: absolute; content: ''; top:0; left:0; width: 100%; height: 15%; background: var(--point-white); animation: scrDwn 1.2s linear infinite;}
        @keyframes scrDwn {0% {top:-30%;}100% {top:130%;}}

    /* aboutMeta */
        .aboutMeta{display: flex;align-items:flex-start;gap: clamp(35px, 4.7vw, 90px);}
        .aboutMeta .thumb{width: 42.8%;height: 900px;flex-shrink: 0;border-radius: var(--radius-30);overflow: hidden;}
		.aboutMeta .thumb img{width:100%; height:100%; object-fit:cover;}
        .aboutMeta .cont{width: 100%;padding-top: clamp(70px, 6vw, 115px);display: flex;flex-direction: column;gap: var(--row-gap45);}
        .aboutMeta .title h3{font-size: var(--text-44);font-weight: 600;color: var(--point-color01);line-height: 1.36;letter-spacing: 0;}

        @media (max-width:1023px) {
            .aboutMeta{flex-wrap: wrap;}
            .aboutMeta .thumb{width: auto;height: auto;flex-shrink: unset;}
            .aboutMeta .cont{padding-top: 0;}
        }

    /* bullet-list */
        .bullet-list{position: relative;display: flex;flex-direction: column;gap: clamp(6px, 1.3vw, 8px);padding-left: clamp(0px, 1.3vw, 13px);}
        .bullet-list > li{position: relative;display: flex;align-items: baseline;gap: clamp(8px, 1.3vw, 13px);font-size: var(--text-20);font-weight: 400;color: var(--black-color03);line-height: 1.6;letter-spacing: 0;}
            .bullet-list > li::before{display: inline-flex;content:'';width: clamp(3px, 0.6vw, 4px);aspect-ratio: auto 1;background: var(--black-color03);border-radius: 100%;translate: 0 clamp(-5px, -0.7vw, -3px); flex-shrink: 0;}

            .bullet-list.type02{gap: clamp(20px, 2.9vw, 29px);padding-left: 0;}
            .bullet-list.type02 > li{font-size: var(--text-24);font-weight: 600;color: var(--black-color00);gap: clamp(12px, 1.5vw, 15px);}
            .bullet-list.type02 > li small{font-size: var(--text-18);font-weight: 400;color: var(--black-color06);}
            .bullet-list.type02 > li::before{width: clamp(8px, 1.2vw, 10px);background: var(--point-color06);}
            .bullet-list.type02 > li:nth-child(2)::before{background: var(--point-color07);}
            .bullet-list.type02 > li:nth-child(3)::before{background: var(--point-color08);}

        .bullet-list.noti{padding:0;}
        .bullet-list.noti > li{font-size: var(--text-14); gap: 4px;}
        .bullet-list.noti > li::before{content:'*';translate: 0;width: auto;aspect-ratio: unset;background: none;}

    /* tag-list */
        .tag-list{position: relative;display: flex;flex-wrap: wrap;gap: var(--col-gap30);}
        .tag-list > li{position: relative;font-size: var(--text-20);font-weight: 400;color: var(--point-white);background: var(--point-color02);min-width: clamp(160px, 28vw, 260px);display: flex;align-items: center;justify-content: center;text-align: center;border-radius: 50px;padding: clamp(13px, 2.1vw, 16px) 15px;letter-spacing: 0;}
        .tag-list > li:nth-child(2){background: var(--point-color03);}
        .tag-list > li:nth-child(3){background: var(--point-color04);}
        .tag-list > li:nth-child(4){background: var(--point-color05);}

    /* stickyGallery */
        .stickyGallery{display: flex;align-items: flex-start;gap: clamp(35px, 4.7vw, 90px) 0;}
        .stickyGallery .title{position: sticky;top: clamp(120px, 21vh, 190px);width: min(610px, 44%);flex-shrink: 0;display: flex;flex-direction: column;gap: clamp(15px, 2.3vw, 23px);padding-right: 70px;}
        .stickyGallery .title h3{font-size: var(--text-44);font-weight: 600;color: var(--point-color01);line-height: 1.36;letter-spacing: 0;}
        .stickyGallery .title h4{font-size: var(--text-24);font-weight: 600;color: var(--black-color00);letter-spacing: 0;}
        .stickyGallery .title h5{font-size: var(--text-20);font-weight: 400;color: var(--black-color03);line-height: 1.5;letter-spacing: 0;}
        .stickyGallery .cont{width: 100%;}
        .stickyGallery .info-list{display: grid;grid: auto / repeat(2, 1fr);gap: var(--row-gap60) var(--col-gap30);}
		.stickyGallery .info-list > li{display:flex;flex-direction: column;gap: clamp(15px, 1.7vw, 17px);}
        .stickyGallery .info-list .thumb{display: block;border-radius: var(--radius-20);overflow: hidden;aspect-ratio: auto 0.95;}
        .stickyGallery .info-list .thumb img{width:100%; height:100%; object-fit:cover;}
        .stickyGallery .info-list .desc{display: grid;gap: var(--row-gap10);}
        .stickyGallery .info-list .desc dt{font-size: var(--text-24);font-weight: 600;color: var(--black-color00);letter-spacing: 0;}
        .stickyGallery .info-list .desc dd{font-size: var(--text-18);font-weight: 400;color: var(--black-color06);letter-spacing: 0;}

        @media (max-width:1023px) {
            .stickyGallery{flex-wrap: wrap;}
            .stickyGallery .title{position: relative;inset: auto;width: 100%;flex-shrink: unset;padding-right: 0;}
        }
        @media (max-width:360px) {
            .stickyGallery .info-list{padding-bottom: 0;grid: auto / repeat(1, 1fr);}
        }

    /* multiExp */
        .multiExp{display: flex;align-items: flex-start;gap: clamp(45px, 7.3vw, 140px);}
        .multiExp .thumb{width: min(690px, 51%);flex-shrink: 0;margin-top: 40px;}
        .multiExp .cont{width: 100%;display: flex;flex-direction: column;gap: clamp(30px, 7.5vw, 75px);}
        .multiExp .title{display: grid; gap: clamp(15px, 3.3vw, 33px);} 
        .multiExp .title h3{font-size: var(--text-44);font-weight: 600;color: var(--point-color01);line-height: 1.36;letter-spacing: 0;}
        .multiExp .title h4{font-size: var(--text-18); font-weight: 400; color: var(--black-color03); line-height: 1.66;}

        @media (max-width:1023px) {
            .multiExp{flex-wrap: wrap;}
            .multiExp .thumb{margin-top: 0;width: auto;flex-shrink: unset;max-width: 690px;margin-inline: auto;}
        }

    /* analysisMeta */
        .analysisMeta{position: relative; background: url('../images/skin/main_analysis.jpg') no-repeat center / cover; padding-block: 104px 79px;}
        .analysisMeta .item{display: flex;gap: var(--row-gap75);}
        .analysisMeta .cont{width: 100%;padding-top: clamp(30px, 6.15vw, 118px);display: flex;flex-direction: column;gap: clamp(15px, 3.7vw, 37px);}
        .analysisMeta .title h3{font-size: var(--text-44);font-weight: 500;line-height: 1.36;color: var(--point-white);letter-spacing: 0;}
        .analysisMeta .bullet-list > li{filter: var(--filter-white);}
        .analysisMeta .thumb-list{flex-shrink: 0;display: flex;align-items: center;gap: clamp(15px, 4.2vw, 80px);width: min(743px, 54%);margin-inline: auto;}

        @media (max-width:1023px) {
            .analysisMeta{padding-block: var(--row-gap100);}
            .analysisMeta .item{flex-wrap: wrap;}
            .analysisMeta .cont{padding-top: 0;}
			.analysisMeta .thumb-list{width: min(700px, 100%);margin-inline: auto;}
        }

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

    FOOTER | outline/footer.html

───────────────────────────────────────────────────────────*/
    #footer{position: relative;background: var(--black-color12);padding-block: clamp(30px, 4.1vw, 36px) clamp(20px, 2.8vw, 23px);font-size: var(--text-15);font-weight: 300;color: var(--black-color10);line-height: 1.6;letter-spacing: -0.02em;}
    #footer .w_custom{display: grid;gap: clamp(25px, 3.6vw, 36px);}
    #footer address{font-style: normal;display: flex;align-items: baseline;flex-wrap: wrap;gap: var(--row-gap10) var(--row-gap40);}
    #footer address .desc{display: flex;gap: 4px;}
    #footer address .desc dt{font-weight: 500;color: var(--point-white);flex-shrink: 0;}
    #footer .copy{font-size: var(--text-14);font-weight: 400;font-family: var(--font-type03);}