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

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

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

/*───────────────────────────────────────────────────────────
	layout common
───────────────────────────────────────────────────────────*/
    #wrap {position:relative;width:100%;height: auto;box-sizing: border-box;overflow: clip;}
    #container, .w_custom {position: relative; width: calc(100% - 60px); max-width: 1280px; margin-inline: auto; box-sizing: border-box;}
    #container{padding-bottom: 100px;}

    @media (max-width:860px){
        #container{padding-bottom: 70px;}
        #container, .w_custom{width: calc(100% - 30px);}
    }
    @media (max-width:320px){
        #container, .w_custom{width: calc(100% - 20px);}
    }


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

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

───────────────────────────────────────────────────────────*/
    #header{position: sticky;top:0;width: 100%;padding-block: 26px;z-index: 50;border-top: 3px solid var(--point-color01);background: rgba(255,255,255,0.9);box-sizing: border-box; transition: all 0.4s;}
    #header .w_custom{max-width: 1900px;display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;gap: 10px;}
    #header .logo{font-size: 0;height: 100%;display: flex;align-items: center;}
    #header .logo a{display: flex;align-items: center;height: 100%;padding-block: 0;box-sizing: border-box;max-width: 173px;height: 45px;}
    #header .gnb{position: absolute;top:0;left: 50%;transform: translateX(-50%);width: calc(100% - 350px);height: 100%;box-sizing: border-box;display: flex;justify-content: center;text-align: center;font-size: var(--title-20);}
    #header .gnb > li{position: relative; height: 100%; font-size: 90%; font-weight: 700; color: var(--black-color03); box-sizing: border-box;}
    #header .gnb > li > a{position: relative;display: flex;align-items: center;height: 100%;padding-inline: clamp(15px, 1.6vw, 30px);transition: all 0.4s;}
    #header .gnb > li > a:before{position: absolute;content:'';left:50%;top: calc(100% - 3px);transform: translateX(-50%);border:6px solid var(--trans-color);border-top: 6px solid var(--point-color01);box-sizing: border-box;opacity: 0;transition: all 0.4s;}
    #header .gnb .dep02{display: none;}

    #header .hd_right{position: relative;height: 100%;display: flex;align-items: center; gap: 15px;}
    #header .tel{display: inline-flex;box-sizing:border-box;align-items: center;justify-content: center;width: auto;height:32px;padding-inline: 12px;padding-top: 2px;border-radius: 30px;background:var(--point-color01);font-size:var(--title-16);color:var(--point-white);font-weight:400;gap:10px;line-height: 1;}
    #header .tel:before{width:16px;aspect-ratio: auto 1;content:"";background: url('../images/skin/main_tel.png')no-repeat center / 100% auto;filter: var(--filter-white);}
    #header .allCate {position:relative;display: none;width: 25px;height: 20px;flex-direction: column;justify-content: space-between;box-sizing: border-box;#header .allCate{display: flex;};}
	#header .allCate span{width:100%;height: 2px;background: var(--black-color03);}

        /* over */
            @media (min-width:1024px){
                #header .gnb > li > a:hover{color: var(--point-color01);}
                #header .gnb > li > a:hover:before{opacity: 1;}
            }

    @media (max-width:1200px){
        #header .gnb > li{font-size: 80%;}
    }
    @media (max-width:1023px){
		#header{padding-bottom:0;}
		#header .logo a{height: 38px;}
        #header .gnb{position: relative;inset: auto;transform: none;width: 100%;max-width: 1000px;justify-content: space-between;}
		#header .gnb > li{font-size: max(16px, 90%);}
        #header .gnb > li > a{height: auto;padding: 11px;}
        #header .allCate{display: flex;}
    }
    @media (max-width:640px){
        #header{border-top-width: 2px;}
        #header .logo a{height: 32px;}
        #header .gnb{justify-content: flex-start;padding-inline: 15px;width: calc(100% + 30px);margin-left: -15px;overflow: hidden;overflow-x: auto;flex:none;gap: clamp(20px, 7vw, 45px);max-width: none;}
		#header .gnb > li{flex-shrink:0;}
        #header .gnb > li > a{padding-inline: 0;}
    }
    @media (max-width:479px){
        #header .gnb > li > a{padding-block: 3px 10px;}
    }
    @media (max-width:360px){
        #header .logo a{max-width: 100px;}
    }


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

	Aside | outline/nav.html

───────────────────────────────────────────────────────────*/
    .aside_bg{position: fixed;top:0;left:0;width: 100%;height: 100%;background: rgba(0,0,0,0.6);opacity: 0;pointer-events: none;transition: all 0.4s;z-index: 90;}
        body:has(#aside.on){overflow: hidden; touch-action: none;}
        body:has(#aside.on) .aside_bg{opacity: 1; pointer-events: all;}

    #aside{position: fixed;top:0;right:-80%;width: 80%;height: 100%;background: var(--point-white);z-index: 100; transition: all 0.4s;}
        #aside.on{right:0;}
    #aside .w_custom{width: calc(100% - 40px);}
    #aside .close_btn{position: absolute;top: 15px;right: calc(100% + 15px);width: 30px;height: 30px;z-index: 9; opacity: 0; pointer-events: none; transition: all 0.4s;}
        #aside.on .close_btn{opacity: 1; pointer-events: all;}
    #aside .close_btn span{position: absolute;top:50%;left: 50%;width: 100%;height: 2px;background: var(--point-white);transform: translate(-50%, -50%) rotate(45deg);}
        #aside .close_btn span:nth-child(2){transform: translate(-50%, -50%) rotate(-45deg);}
    #aside .logo{font-size: 0;}
    #aside .logo a{display: flex;align-items: center;justify-content: center;padding-block: 30px;height: 24px;}
    #aside .cont{border-top: 10px solid var(--border-color03);padding-block: 25px;overflow: hidden;overflow-y: auto;min-height: 60vh;}
    #aside .title{position: relative;font-size: var(--title-20);box-sizing: border-box;font-family: var(--font-type02);}
    #aside .title h4{position: relative; font-size: max(16px, 90%); font-weight: 700; color: var(--point-color01);}
    #aside .title h4:before{position: absolute;content:'';width: 13px;height: 2px;background: var(--point-color01);top:50%;right: calc(100% + 7px);margin-top: -1px;}
    #aside .gnb{position: relative; font-size: var(--title-20); box-sizing: border-box; padding-block: 10px;}
    #aside .gnb > li{font-size: max(16px, 90%); font-weight: 700; color: var(--black-color03);}
    #aside .gnb > li > a{position: relative;display: block;padding-block: 13px;padding-right: 50px;box-sizing: border-box;}
        #aside .gnb > li > a:before{position: absolute;content:'';top:50%;right:0;transform: translateY(-50%);width: 25px;height: 15px;background: url('../images/skin/icon_arw.png') no-repeat center / 100% auto;}
    #aside .gnb .dep02{display: none;}


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

	MAIN | index.html

───────────────────────────────────────────────────────────*/
    .anchor{position: relative; display: block; top:-100px;}
    @media (max-width:1023px){
        .anchor{ top:-120px;}
    }
    @media (max-width:640px){
        .anchor{ top:-113px;}
    }
    @media (max-width:479px){
        .anchor{ top:-104px;}
    }

    /* 비주얼 */
        .main_visual{position: relative; overflow: hidden; box-sizing: border-box;}
        .main_visual .slick-slide{position: relative; height: 760px; overflow: hidden; box-sizing: border-box;}
        .main_visual .thumb{width: 100%; height: 100%; background: no-repeat center / cover; box-sizing: border-box;}
        .main_visual .txt_box{position: absolute;top:0;left:50%;height: 100%;transform: translateX(-50%);font-size: var(--title-20);color: var(--point-white);display: flex;flex-direction: column;justify-content: center;gap: 12px;text-wrap: balance;padding-right: 25px;}
        .main_visual .txt_box h2{position: relative;font-size: max(62px, 310%);line-height: 1.19;text-shadow: 0 0 10px rgba(0,0,0, 0.5);}
        .main_visual .txt_box h2 em{position: relative;display: flex;align-items: center;gap: 15px;font-weight: inherit;}
        .main_visual .txt_box h2 em:after{display: inline-block;content:'';width: 174px;height: 2px;background: var(--point-white);transform: translateY(-6px);}
        .main_visual .txt_box h5{position: relative;font-size: max(17px, 120%);font-weight: 500;letter-spacing: 0;width: fit-content;box-shadow: inset 0 -8px 0 0 var(--point-color01);line-height: 1.1;padding-inline: 3px;text-shadow: 0 0 5px rgba(0,0,0, 0.3);letter-spacing: 0.04em;}
        .main_visual .txt_box h5 + h2{margin-top: 10px;}
        .main_visual .txt_box p{position: relative;font-size: max(14px, 90%);font-weight: 400;line-height: 1.44;text-shadow: 0 0 3px rgba(0,0,0, 0.3);}
            .main_visual [data-slick-index="1"] .txt_box :where(h2, h5, p){text-shadow: none;}
            .main_visual [data-slick-index="1"] .txt_box h2{color: var(--black-color03);}
            .main_visual [data-slick-index="1"] .txt_box h2 em:after{background: var(--black-color03);}
            .main_visual [data-slick-index="1"] .txt_box h5{color: var(--black-color02);}
            .main_visual [data-slick-index="1"] .txt_box p{color: var(--black-color07);}
            .main_visual:has([data-slick-index="1"].active) .scr_dwn{filter: none;}

        .main_visual .txtAni{transform: translateX(70px); opacity: 0; transition: all 1.2s; transition-delay: 0.1s;}
            .main_visual .txtAni:nth-child(2){transition-delay: 0.2s;}
            .main_visual .txtAni:nth-child(3){transition-delay: 0.3s;}
            .main_visual .active .txtAni{transform: translate(0); opacity: 1; }

        .main_visual .slick-dots{position: absolute;top:50%;right:30px;z-index: 9;display: flex;flex-direction: column;gap: 12px;transform: translateY(-50%);}
        .main_visual .slick-dots li{font-size: 0;}
        .main_visual .slick-dots button{width: 10px;height: 10px;border-radius: 100%;border:2px solid var(--point-white);box-sizing: border-box;transition: all 0.4s;}
        .main_visual .slick-dots .slick-active button{background: var(--point-white);}

        .main_visual .scr_dwn{position: absolute;left:50%;bottom:35px;text-align: center;font-size: var(--title-20);transform: translateX(-50%);cursor: pointer;display: flex;flex-direction: column;gap: 12px;filter: var(--filter-white);transition: all 0.4s;}
        .main_visual .scr_dwn dt{position: relative;width: 32px;height: 50px;border: 2px solid var(--black-color03);margin-inline: auto;border-radius: 50px;box-sizing: border-box;}
        .main_visual .scr_dwn dt:before{position: absolute;content:'';width: 8px;height: 12px;border: 2px solid var(--black-color03);top: 9px;left:50%;transform: translateX(-50%);border-radius: 10px;box-sizing: border-box;}
        .main_visual .scr_dwn dd{font-size: max(12px, 60%);color: var(--black-color03);line-height: 1;}


        @media (max-width:1023px){
            .main_visual .slick-slide{height: clamp(350px, 76vw, 760px);}

            .main_visual .scr_dwn{bottom: clamp(20px, 3.5vw, 35px);gap: clamp(10px, 1.2vw, 12px);}
            .main_visual .scr_dwn dt{width: clamp(26px, 3.2vw, 32px); height: clamp(40px, 5vw, 50px);}

            .main_visual .slick-dots{right: clamp(15px, 3vw, 30px);}
        }
        @media (max-width:860px){
            .main_visual .txt_box h2{font-size: max(50px, 270%);}
            .main_visual .txt_box h2 em:after{width: 140px;}
        }
        @media (max-width:640px){
            .main_visual .txt_box{gap: 6px;}
            .main_visual .txt_box h2{font-size: max(34px, 200%);}
            .main_visual .txt_box h2 em:after{display: none;}
            .main_visual .txt_box h5{font-size: max(17px, 110%);box-shadow: inset 0 -4px 0 0 var(--point-color01);}
            .main_visual .txt_box p br{display: none;}

            .main_visual .slick-dots button{width: 8px; height: 8px;}

            .main_visual .scr_dwn{display:none;}
        }
        @media (max-width:479px){
            .main_visual .txt_box h5{font-size: max(17px, 100%);}
        }

    /* 공통 */
        .main_title{position: relative;font-size: var(--title-20);box-sizing: border-box;text-wrap: balance;}
            .main_title.cen{text-align: center;}
            .main_title.hd{padding-block: 93px 112px;}
            .main_title.hd_m{padding-bottom: 50px;}
        .main_title h2{font-size: 250%;font-weight: 400;color: var(--black-color03);letter-spacing: -0.025em;}
            .main_title h2 + h4{margin-top: 34px;}
            .main_title h2 + h5{margin-top: 45px;}
            .main_title h2 + p{margin-top: 10px;}
        .main_title h2 big{font-size: 108%; font-weight: 400; color: var(--black-color04); line-height: 1.27;}
        .main_title h2 em{font-weight: inherit; color: var(--point-color01);}
        .main_title h2.under_line:after{display: block;content:'';width: 60px;height: 2px;background: var(--black-color04);margin-top: 37px;}
        .main_title h4{font-size: 150%;font-weight: 400;color: var(--black-color04);line-height: 1.3;}
        .main_title h5{font-size: 120%;font-weight: 700;color: var(--black-color03);line-height: 1.375;}
        .main_title h5 + p{margin-top: 19px;}
        .main_title h6{font-size: inherit; font-weight: 400; color: var(--black-color10);}
        .main_title h6 + h2{margin-top: 22px;}
        .main_title h6 em{letter-spacing: 0.5em;text-transform: uppercase;font-family: var(--font-type02);font-weight: inherit;}
        .main_title p{font-size: max(16px, 80%);font-weight: 400;color: var(--black-color07);line-height: 1.625;}
        .main_title p + p{margin-top:10px;}
        .hyphen_list{font-size: var(--title-20);display: flex;flex-direction: column;gap: 5px;}
        .hyphen_list > li{position: relative; font-size: max(14px, 80%);font-weight: 400;color: var(--black-color07);line-height: 1.6;padding-left: 12px; box-sizing: border-box;}
        .hyphen_list > li:before{position: absolute; content:'-'; inset: 0;}

        @media (max-width:1023px){
            .main_title.hd{padding-block: clamp(40px, 9.3vw, 93px) clamp(40px, 11.2vw, 112px);}
            .main_title.hd_m{padding-bottom: clamp(25px, 5vw, 50px);}
            .main_title h2{font-size: 230%;}
            .main_title h2.under_line:after{width: clamp(40px, 6vw, 60px); margin-top: clamp(20px, 3.7vw, 37px);}
            .main_title h2 + h4{margin-top: clamp(15px, 3.4vw, 34px);}
            .main_title h2 + h5{margin-top: clamp(20px, 4.5vw, 45px);}
            .main_title h2 + p{margin-top: clamp(8px, 0.7vw, 10px);}
            .main_title h4{font-size: 140%;}
            .main_title h6{font-size: 90%;}
            .main_title h6 + h2{margin-top: clamp(10px, 2.2vw, 22px);}
            .main_title p + p{margin-top:clamp(5px, 1vw, 10px);}
        }
        @media (max-width:640px){
            .main_title h2{font-size: 200%;}
            .main_title h4{font-size: 130%;}
            .main_title h5{font-size: max(18px, 110%);}
            .main_title h6{font-size: max(13px, 80%);}
        }
        @media (max-width:479px){
            .main_title h2{font-size: max(29px, 170%);}
            .main_title h4{font-size: max(18px, 110%);}
        }

    /* 인트로 */
        .main_intro .w_custom{display: flex; align-items: center; height: 700px;}
        .main_intro .main_title{width: 50%;height: 100%;padding-right: 30px;display: flex;flex-direction: column;justify-content: center;}
            .main_intro .main_title:before{position: absolute;content: '';top:0;right:0;width: 130vw;height: 100%;background: var(--point-color01);z-index: -1;}
        .main_intro .main_title :where(h2, h5, p){filter: var(--filter-white);}
        .main_intro .main_title h6 em{color: var(--point-color02);font-size: 90%;letter-spacing: 0.45em;}
		.main_intro .main_title p{font-size:max(14px, 80%);}
        .main_intro .thumb{width: 50%; height: 100%;}
        .main_intro .thumb span{display: block;width:50vw;height: 100%;overflow: hidden;}
		.main_intro .thumb img{width:100%;height: 100%;object-fit: cover;}

        @media (max-width:1023px){
            .main_intro .w_custom{height: clamp(550px, 70vw, 700px);}
        }
        @media (max-width:640px){
            .main_intro .w_custom{display: block;height: auto;}
            .main_intro .main_title{width: 100%;padding-block: clamp(50px, 11vw, 70px);padding-right: 0;}
                .main_intro .main_title:before{right:-15px;}
            .main_intro .main_title h6 em{font-size: max(13px, 80%);}
            .main_intro .thumb{width: calc(100% + 30px);margin-left: -15px;height: 102vw;overflow: hidden;}
            .main_intro .thumb span{width: 100%;height: 700px;}
        }

    /* 왜 미소치과일까요? */
        .main_why{padding-bottom: 150px;}
        .main_why .info_list{display: flex;flex-wrap: wrap;gap: 110px 0;}
        .main_why .info_list > li{width: calc(100% / 3);padding-inline: 15px;box-sizing: border-box;display: flex;flex-direction: column;gap: 32px;text-align: center;}
        .main_why .info_list .icon{display: flex;align-items: center;justify-content: center;height: 86px;}
        .main_why .info_list .desc{font-size: var(--title-20);text-wrap: balance;}
        .main_why .info_list .desc dt{font-size: 90%; font-weight: 700; color: var(--black-color03);}
            .main_why .info_list .desc dt + dd{margin-top: 9px;}
        .main_why .info_list .desc dd{font-size: max(13px, 70%); font-weight: 400; color: var(--black-color08); line-height: 1.43;} 

        @media (max-width:1023px){
            .main_why{padding-bottom: clamp(70px, 15vw, 150px);}
            .main_why .info_list > li{gap: clamp(25px, 3.2vw, 32px);}
            .main_why .info_list .icon{height: clamp(59px, 8.6vw, 86px);}
        }
        @media (max-width:640px){
            .main_why .info_list > li{width: calc(100% / 2);}
        }
        @media (max-width:479px){
            .main_why .info_list {row-gap: clamp(40px, 11vw, 110px);}
            .main_why .info_list > li{width: 100%; padding-inline:0;}
            .main_why .info_list .desc dd{max-width: 290px;margin-inline: auto;}
        }
    /* 원장 소개 */
        .main_about{padding-block:102px 100px; background: var(--gray-bg01);}
        .main_about .w_custom{display: flex;align-items: flex-start;flex-wrap: wrap; gap: 30px 0;}
        .main_about .thumb{position: relative;width: 49.2%;font-size: 0;text-align: right;padding-inline: 50px;box-sizing: border-box;}
        .main_about .thumb:before{position: absolute;content:'';left:0;bottom:0;width: 100%;height: 92%;background: linear-gradient(151deg, rgba(135, 204, 239, 1) 0%, rgba(91, 95, 157, 1) 100%);}
        .main_about .thumb img{position: relative; z-index: 3;}
        .main_about .main_title{width: 50.8%;padding-top: 100px;padding-left: 58px;}
        .main_about .hyphen_list{margin-top: 18px;}
        .main_about .sign{display: flex;flex-wrap: wrap;align-items: center;gap: 14px;font-size: var(--title-20);margin-top: 126px;}
        .main_about .sign dt{font-size: max(14px, 80%); font-weight: 400; color: var(--black-color05);}
        .main_about .sign dd{display: inline-flex; height: 38px;}

        @media (max-width:1023px){
            .main_about{padding-block: clamp(50px, 10vw, 100px);}
            .main_about .thumb{padding-inline: clamp(20px, 5vw, 50px);}
            .main_about .main_title{padding-top: clamp(50px, 10vw, 100px);padding-left: clamp(30px, 5.8vw, 58px);}
            .main_about .sign{margin-top: clamp(30px, 12.6vw, 126px);}
            .main_about .sign dd{height: clamp(25px, 4vw, 38px);}
        }
        @media (max-width:640px){
            .main_about .thumb{width: 100%;}
            .main_about .main_title{width: 100%; padding: 0;}
        }

    /* 시설안내 */
        .main_facilities .gell_list{display: flex;flex-wrap: wrap;}
        .main_facilities .gell_list > li{width: calc(100% / 4);aspect-ratio: auto 1.5;overflow: hidden;}
		.main_facilities .gell_list > li img{width:100%;height: 100%;object-fit: cover;}

        @media (max-width:860px){
            .main_facilities .gell_list > li{width: calc(100% / 2);}
        }

    /* 오시는 길 */
        .main_location{position: relative;padding-bottom: 100px;background: var(--gray-bg01);z-index: 3;}
        .main_location .w_custom{display: flex;flex-wrap:wrap;align-items: center;}
        .main_location .w_custom > div{box-sizing:border-box;}
        .main_location  .main_title{width:100%;}
        .main_location .info_txt{width:45%;padding: 40px 80px 40px 0;}
        .main_location .info_txt .info_call{display: flex;flex-wrap:wrap;align-items: center;justify-content: space-between;margin-bottom:30px;gap:10px;}
        .main_location .info_txt .info_call .info_tel{font-size: var(--title-20);color:var(--black-color03);font-weight:700;display: flex;align-items: center;gap:10px;}
        .main_location .info_txt .info_call .info_tel:before{width:32px;height:32px;content:'';background:url('../images/skin/main_tel.png')no-repeat center / 100% auto;display: inline-block;}
        .main_location .info_txt .info_call .info_tel span{font-size: 230%;}
        .main_location .info_txt dl{display: flex;flex-wrap:wrap;font-size:var(--title-16);color:var(--black-color03);font-weight:400;padding:5px 0;font-family:var(--font-type02);box-sizing:border-box;}
        .main_location .info_txt .info_time{border-top:1px solid var(--border-color01);margin-top:20px;padding-top:20px;}
        .main_location .info_txt dl dt{width:130px;}
        .main_location .info_txt dl dd{width:calc(100% - 130px);}
        .main_location .info_txt dl dd p{display: flex;flex-wrap:wrap;gap:10px;}
        .main_location .info_txt dl dd p + p{margin-top:10px;}
        .main_location .info_txt dl dd span{display: inline-block;width:44px;}
        
        .main_location .info_map{width:55%;}
        .main_location .info_map .info_map_box{width:100%;height:0;padding-bottom:63%;box-sizing:border-box;position: relative;overflow:hidden;}
        .main_location .info_map .info_map_box iframe{width:100%;height:100%;position: absolute;top:50%;left:50%;transform:translate(-50%, -50%);}

        @media (max-width:1400px) {
            .main_location .info_txt{padding-right:40px;}
            .main_location .info_txt .info_call .info_tel span{font-size:200%;}
        }

        @media (max-width:1217px) {
            .main_location .info_txt .info_call .info_tel{width:100%;}
            .main_location .info_txt dl dt{width:90px;}
            .main_location .info_txt dl dd{width:calc(100% - 90px);}
    
        }
		@media (max-width:1023px) {
			.main_location{padding-bottom:clamp(60px, 10vw, 100px);}
		}

        @media (max-width:767px) {
            .main_location .info_txt{width:100%;padding: 0 0 50px 0;}
            .main_location .info_txt .info_call .info_tel{width:auto;}
            .main_location .info_map{width:100%;}
        }

        @media (max-width:479px) {
            .main_location .info_txt{padding-bottom:30px;}
            .main_location .info_txt .info_call{margin-bottom:20px;}
            .main_location .info_txt .info_call .info_tel{gap:6px;}
            .main_location .info_txt .info_call .info_tel:before{width:22px;height:22px;}
            .main_location .info_txt .info_call .info_tel span{font-size: 150%;}
            .main_location .info_txt dl dt{width:70px;}
            .main_location .info_txt dl dd{width:calc(100% - 70px);}
            .main_location .info_txt dl dd span{width:38px;}
            .main_location .info_txt dl dd p + p{margin-top:6px;}
            .main_location .info_txt .info_time{margin-top:12px;padding-top:12px;}
        
            .main_location .info_map .info_map_box{padding-bottom:85%;}
        }

    /* 상담문의 */
        .main_contact{position: relative;z-index:6;background:var(--point-white);box-sizing:border-box;padding-bottom: 120px;}
        .main_contact .contact_box{max-width:1400px;}
        .main_contact .board_main_write{display: flex;flex-wrap:wrap;gap:40px 0;flex-direction: column;}
        .main_contact .board_main_write .line2{display: flex;flex-wrap:wrap;gap:0 40px;}
        .main_contact .board_main_write dl{display: flex;flex-wrap:wrap;width:100%;}
        .main_contact .board_main_write .line2 dl{width:calc(50% - 20px);}
        .main_contact .board_main_write dl dd{width:100%;}
        .main_contact .board_main_write input:where([type="text"], [type="password"]){background:none;box-sizing:border-box;border:none;border-bottom:1px solid rgba(0,0,0,0.4);font-size:var(--title-16);color:rgba(0,0,0,0.6);font-weight:400;padding-left:9px;width:100%;height:44px;}
        .main_contact .board_main_write input:where([type="text"], [type="password"])::placeholder{color:inherit;}
        .main_contact .board_main_write input:where([type="text"], [type="password"]):focus{border-color: var(--black-color00);color:var(--black-color00);}
        .main_contact input:-webkit-autofill{color:var(--black-color00);}
        .main_contact .board_main_write textarea{width:100%;height:140px;box-sizing:border-box;outline:none;border:1px solid rgba(0,0,0,0.4);background:var(--point-white);padding:20px;font-size:var(--title-16);color:var(--black-color10);font-weight:400;resize:none; line-height:1.4;}
        .main_contact .board_main_write textarea::placeholder{color:inherit;}
        .main_contact .board_main_write textarea:focus{color:var(--black-color03);}
        .main_contact .policy_cont{padding:20px;box-sizing:border-box;border:1px solid rgba(0,0,0,0.4);}
        .main_contact .policy_cont label,
        .main_contact .policy_cont a{color:var(--black-color00);font-size:var(--title-16);font-weight:400;}
        .main_contact .policy_cont a{font-size:var(--title-14);}
        .main_contact .board_main_write .capthca_wrap .capthca_box{display: flex;flex-wrap:wrap;gap:10px;box-sizing:border-box;border:1px solid rgba(0,0,0,0.4);padding:10px 20px;}
        .main_contact .board_main_write .capthca_wrap #captcha{width:calc(100% - 240px);height:40px;border:none;background:var(--point-white);color:var(--black-color03);}
        .main_contact .board_main_write .capthca_wrap .btn_sm{width:40px;height:40px;padding:0;background-position:center;border:1px solid rgba(0,0,0,0.4);}
        .main_contact .btn_send_box{display:block;box-sizing:border-box;width: fit-content;background:var(--point-color01);font-size:var(--title-18);color:var(--point-white);font-weight:400;margin-inline: auto;margin-top:55px;position: relative;overflow:hidden;transition: all 0.4s;}
        .main_contact .btn_send_box:before{width:300px;height:300px;content:"";background:var(--point-white);transform:rotate(45deg);position: absolute;top:-205px;left:-316px;transition:all 1s;}
        .main_contact .btn_send_main{display:inline-flex;align-items: center;justify-content: center;position: relative;width: 200px;height: 60px;border: 1px solid var(--point-color01);font-size: var(--title-18);box-sizing: border-box;}
            
            @media (pointer: fine) and (hover: hover) {
                .main_contact .btn_send_box:hover:before{transition:all 1s;left:-14px;top:-135px;}
                .main_contact .btn_send_box:hover{color:var(--point-color01);}
            }

        @media (max-width:1023px) {
            .main_contact{padding-bottom: clamp(70px, 12vw, 120px);}
            .main_contact .board_main_write .line2.policy_box dl{width:100%;}
            .main_contact .board_main_write .line2.policy_box dl + dl{margin-top:20px;}
        }
        @media (max-width:640px) {
            .main_contact .board_main_write{gap:20px 0;}
            .main_contact .board_main_write .line2{gap:20px;}
            .main_contact .board_main_write .line2 dl{width:calc(50% - 10px);}
            .main_contact .board_main_write .capthca_wrap .capthca_box{padding:10px 15px;}
            .main_contact .board_main_write .line2.policy_box dl + dl{margin-top:0;}
            .main_contact .policy_cont{padding:15px;}
            .main_contact .btn_send_box{margin-top:35px;}
			.main_contact .btn_send_main{width:150px;height:50px;}
        }
        @media (max-width:479px) {
            .main_contact .board_main_write .line2 dl{width:100%;}
            .main_contact .board_main_write input:where([type="text"], [type="password"]){height:40px;}
            .main_contact .board_main_write textarea{padding:10px;height:150px;}
            .main_contact .board_main_write .capthca_wrap .capthca_box{padding:0;border:none;}
            .main_contact .board_main_write .capthca_wrap #captcha{border:1px solid rgba(0,0,0,0.4);width:100%;}
            .main_contact .policy_cont{padding:15px 10px;}
        }

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

    FOOTER | outline/footer.html

───────────────────────────────────────────────────────────*/
    #footer{position: relative; border-top: 1px solid var(--border-color01); padding-block: 30px; box-sizing: border-box; font-size: var(--title-20);}
    #footer .w_custom{font-size: max(12px, 60%);font-weight: 400;color: var(--black-color08);line-height: 1.6;display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 15px 30px;}
    #footer .addr_list{display: flex; flex-direction: column; gap: 3px;}
    #footer .addr_list > li{display: flex; flex-wrap: wrap; gap: 3px 0;}
    #footer .addr_list .desc{display: flex;align-items: baseline;}
    #footer .addr_list .desc:not(:last-child):after{display: inline-flex; content:''; width: 1px; height: 10px; background: var(--border-color02); margin-inline: 11px;}
    #footer .addr_list .desc dt{flex-shrink: 0;padding-right: 4px;}
    #footer .addr_list .desc :where(dt, dd){font-weight: inherit;}
    #footer .copy{color: var(--black-color08);}

    @media (max-width:640px) {
        #footer .addr_list .desc:not(:last-child):after{background: none; }
    }