@charset "utf-8";
.main {}

    :root {
        --fz50px: 50px;
        --fz30px: 30px;
        --fz20px: 20px;
        --fz18px: 18px;
        --m_gutterY: 80px;
        --m_paddingY: 120px;
    }

    .m_area, .m_hero {
        padding: var(--m_paddingY) 0;
        box-sizing: border-box;
    }

    .m_area > div + * {margin-top: var(--m_gutterY)!important;}  /*.wrap 캐스케이딩*/

    .wrap {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
    }

    .main_title {
        text-align: center;
        font-size: var(--fz50px);
        font-weight: 400;
        line-height: 1.2;
        color: #222;
    }
    .main_title strong {font-weight: 700;}

    .sub_title {
        text-align: center;
        font-size: var(--fz20px);
        font-weight: 500;
        line-height: 1.7;
        color: #222;
        
        /*간격 설정*/
        /* margin-top: 40px;  */
        margin-top: calc(var(--m_gutterY) / 2); 
        margin-bottom: var(--m_gutterY);
    }

    [class^='btn_primary'] {
        width: 240px;
        height: 70px;
        border: none;
        border-radius: 10px;
        color: #fff;
        font-size: var(--fz20px);
        font-weight: 500;
        background-color: #4397d4;
        text-decoration: none;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .btn_primary_bgcOrange {background-color: #f47920;}


    .m_hero {background-image: url(/img/html/m_hero.jpg);}
    /* .m-hreo h값 없음. 컨텐츠 추가하려면 .m_hero나 .m_hero .wrap에 h값 추가 */

    .hero_smallwrap {
        display: flex;
        gap: 10px;
        justify-content: center;
        margin-bottom: calc(var(--m_gutterY) / 2);
    }
    .hero_small {
        font-size: var(--fz18px);
        font-weight: 500;
        display: inline-block;
        padding: 4px;
        color: #fff;
        background-color: #4397d4;
    }

    .m_hero :is(.main_title, .sub_title) {color: #fff;}

    .hero_btnwrap {
        display: flex;
        gap: 20px;
        justify-content: center;
    }


    .m_brand .main_title strong {color: #f47920;}
    .m_brand_logowrap {
        --gap: 60px;
        gap: var(--gap);
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .m_brand_logowrap img {
        width: calc((100% - var(--gap) * 2) / 3);
        border-radius: 10px;
    }


    .m_gallery {background-image: url(/img/html/m_gallery_banner.jpg); background-position: center;}
    .m_gallery p {color: #fff;}
    .m_gallery .btn_primary {color: #222; background-color: #fff; margin: 0 auto;}




    .m_list {background-color: #f9fbfd;}
    .m_list .main_title  strong {color: #1f8fcf;}
    .m_list_iconwrap {
        display: flex;
        flex-wrap: wrap;
        --gap: 60px;
        gap: var(--gap);
        /* 지역변수는 최대한 간단히 쓰는게 나을듯 */
    }
    .m_list_icon {
        width: calc((100% - var(--gap) * 2) / 3);
        height: 360px;
        background-color: #fff;
        background-position: center;
        border: 1px solid #e2e7ea;
        border-radius: 10px;
        box-sizing: border-box;
    }
    .m_list_icon p {
        color: #1f8fcf;
        text-align: center;
        font-size: var(--fz30px);
        font-weight: 700;
        margin-top: 200px;
    }
    .m_list_icon p:last-of-type {
        color: #222;
        font-size: var(--fz18px);
        font-weight: 500;
        line-height: 1.7;
        margin-top: 20px;
    }
    /* 이미지 연결 */
    .m_list_icon:nth-of-type(1) {background-image: url(/img/html/m_list_icon-01.jpg);}
    .m_list_icon:nth-of-type(2) {background-image: url(/img/html/m_list_icon-02.jpg);}
    .m_list_icon:nth-of-type(3) {background-image: url(/img/html/m_list_icon-03.jpg);}
    .m_list_icon:nth-of-type(4) {background-image: url(/img/html/m_list_icon-04.jpg);}
    .m_list_icon:nth-of-type(5) {background-image: url(/img/html/m_list_icon-05.jpg);}
    .m_list_icon:nth-of-type(6) {background-image: url(/img/html/m_list_icon-06.jpg);}



    


    .m_contact {
        background-color: #4397d4;
        position: relative;
        overflow: hidden;
    }
    .m_contact > * {
        position: relative;
        z-index: 1;
    }
    .m_contact_bg {
        width: 100%;
        position: absolute;
        top: 0;
        opacity: 0.6;
        mix-blend-mode: multiply;
        transform: translateY(-30%);
    }
    .m_contact :is(.main_title, .sub_title) {color: #fff;}

    .m_contact_slide_frame {overflow: hidden; min-width: 1920px;}
    @keyframes m_contact_slider {
        0% {transform: translateX(0);}
        100% {transform: translateX(-50%);}
    }
    .m_contact_slide {
        width: 200%;
        display: flex;
        padding-bottom: 30px;
        justify-content: space-around;
        transform: translateX(-50%);
        animation: m_contact_slider 18s linear infinite;
    }
    .m_contact .m_slide_icon {
        --size: 128px;
        width: var(--size);
        height: var(--size);
        background-color: rgba(255, 255, 255, 0.2);
        background-size: 50%;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 10px;
        position: relative;
    }
	.m_slide_icon::after {display: block; text-align: center; margin-top: calc(var(--size) + 10px); font-size: var(--fz18px); font-weight: 500; color: #fff;}
    
    .m_contact form {
        /* padding: 80px 0; */
        padding-top: var(--m_gutterY);
        padding-bottom: var(--m_gutterY);
        background-color: #f9fbfd;
        border: 1px solid #e2e7ea;
        border-radius: 10px;
        box-sizing: border-box;

        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    
    .m_contact .input_wrap {
        width: 100%;
        max-width: 610px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .m_contact .input_wrap_fow {margin: 20px 0; align-items: flex-start;}
    .m_contact .input_wrap_other {align-items: flex-start;} .m_contact .input_wrap_other :first-child {margin-top: 15px;}
    .m_contact .input_wrap_agree {margin: 20px 0;}
    .m_contact .input_wrap > :first-child {font-size: var(--fz18px); display: flex; align-items: center; gap: 10px;}
    .m_contact .input_wrap > .required_item::after {content: ''; display: block; width: 10px; height: 10px; background-image: url(/img/html/label_star.png); background-size: 100%; background-repeat: no-repeat;}
    .m_contact .input_wrap > :last-child {width: 400px;}
    
    .input_wrap_fow > div {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .input_wrap_fow label {
        display: flex;
        gap: inherit;
        align-items: center;
        width: calc((100% - 10px * 2) / 3);
    }

    .input_wrap_agree label {
        display: flex;
        gap: 10px;
        align-items: center;
    }
    .input_wrap_agree strong {text-decoration: underline;}

    .m_contact :where(input, select, option, textarea, .btn_check) {
        height: 65px;
        background-color: #fff;
        border: 1px solid #e2e7ea;
        border-radius: 10px;
        box-sizing: border-box;
        /* text-indent: 10px; */
        padding: 0 10px;
        font-size: var(--fz18px);
        font-weight: 400;
        color: #666;
    }
    .m_contact textarea {height: 120px; padding-top: 20px;}
    /* .m_contact label p {font-size: inherit;} */
    .m_contact label p {font-size: var(--fz18px);}
    
    .m_contact input[type='checkbox'] {display: none;}
    .m_contact input[type='checkbox'] + .btn_check {width: 25px; height: 25px; border-radius: 5px;}
    .m_contact input[type='checkbox']:checked + .btn_check {background-color: #4397d4; background-image: url(/img/html/btn_check.png); background-size: 70%; background-position: 52% center; background-repeat: no-repeat;}

    .m_contact .btn_primary {background-color: #222;}
    


    /* 이미지 연결 */
.m_slide_icon:nth-of-type(11n + 1)::after {content: '옥상';}
    .m_slide_icon:nth-of-type(11n + 2)::after {content: '천장';}
    .m_slide_icon:nth-of-type(11n + 3)::after {content: '베란다';}
    .m_slide_icon:nth-of-type(11n + 4)::after {content: '화장실';}
    .m_slide_icon:nth-of-type(11n + 5)::after {content: '지하';}
    .m_slide_icon:nth-of-type(11n + 6)::after {content: '식당 주방';}
    .m_slide_icon:nth-of-type(11n + 7)::after {content: '외벽';}
    /* .m_slide_icon:nth-of-type(11n + 8)::after {content: '주방';} */
    .m_slide_icon:nth-of-type(11n + 8)::after {content: '주차장';}
    .m_slide_icon:nth-of-type(11n + 9)::after {content: '기타';}
    .m_slide_icon:nth-of-type(11n + 10)::after {content: '화장실';}
    .m_slide_icon:nth-of-type(11n + 11)::after {content: '화단';}
    .m_slide_icon:nth-of-type(11n + 1) {background-image: url(../img/html/m_slide_icon-01.png);}
    .m_slide_icon:nth-of-type(11n + 2) {background-image: url(../img/html/m_slide_icon-02.png);}
    .m_slide_icon:nth-of-type(11n + 3) {background-image: url(../img/html/m_slide_icon-03.png);}
    .m_slide_icon:nth-of-type(11n + 4) {background-image: url(../img/html/m_slide_icon-04.png);}
    .m_slide_icon:nth-of-type(11n + 5) {background-image: url(../img/html/m_slide_icon-05.png);}
    .m_slide_icon:nth-of-type(11n + 6) {background-image: url(../img/html/m_slide_icon-06.png);}
    .m_slide_icon:nth-of-type(11n + 7) {background-image: url(../img/html/m_slide_icon-07.png);}
    /* .m_slide_icon:nth-of-type(11n + 8) {background-image: url(../img/html/m_slide_icon-08.png);} */
    .m_slide_icon:nth-of-type(11n + 8) {background-image: url(../img/html/m_slide_icon-09.png);}
    .m_slide_icon:nth-of-type(11n + 9) {background-image: url(../img/html/m_slide_icon-10.png);}
    .m_slide_icon:nth-of-type(11n + 10) {background-image: url(../img/html/m_slide_icon-11.png);}
    .m_slide_icon:nth-of-type(11n + 11) {background-image: url(../img/html/m_slide_icon-12.png);}



    @media all and (max-width: 1200px) {
        .main {word-break: keep-all;}

        :root {--m_paddingX: 20px} /* 선언 */
        .wrap {
            padding-left: var(--m_paddingX);
            padding-right: var(--m_paddingX);
            box-sizing: border-box;
        }

		.hero_btnwrap {gap: 14px;}
        .m_brand_logowrap {--gap: 18px;}
        .m_list_iconwrap {--gap: 20px;}

        .m_list_icon {height: 370px;}
        .m_list_icon p {width: 90%; margin-left: auto; margin-right: auto;}

        .m_contact {padding-bottom: 0;} .m_contact form {border: none;}
		.m_contact_slide {width: 136%;}
        .m_contact .m_slide_icon {--size: 96px;}
        .m_contact form {border-radius: 0;}

        
    }
    @media all and (max-width: 1024px) {
        /* :root {--m_paddingX: 20px} */
        :root {
            --fz50px: 40px;
            --fz30px: 25px;
            --fz20px: 18px;
            --fz18px: 16px;
            --m_gutterY: 60px;
            --m_paddingY: 80px;
        }

		.hero_btnwrap {gap: 10px;}
        .m_brand_logowrap {--gap: 10px;}
        .m_list_iconwrap {--gap: 10px;}
        .m_list_icon {height: 380px;}

		.m_contact_slide {width: 132%;} /* 갭 */
    }
    @media all and (max-width: 768px) {
        /* :root {--m_paddingX: 40px} */
        :root {
            --fz50px: 30px;
            --fz30px: 20px;
            /* --fz20px: 18px; */
            --fz18px: 14px;
			--m_gutterY: 40px;
            --m_paddingY: 60px;
        }
        .main br {display: none;}
		[class^='btn_primary'] {width: 100%; height: 50px; border-radius: 5px;}
		.hero_btnwrap {gap: 10px;  flex-direction: column;}

        .m_brand_logowrap img {width: calc((100% - var(--gap)) / 2);border-radius: 10px;}
        
        .m_list_icon {
            /* width: calc((100% - var(--gap)) / 2); */
            width: calc((100% - var(--gap)) / 1);
            /* height: 360px; */
            height: 220px;
            background-size: contain;
            background-repeat: no-repeat;
        }
        .m_list_icon p {
            margin-top: 120px;
        }
        .m_list_icon p:last-of-type {
            margin-top: 8px;
        }

		.m_contact_slide {width: 104%;}
        .m_contact .m_slide_icon {--size: 76px;}

		.m_contact form {gap: 14px;}
        .m_contact .input_wrap > :last-child {height: 56px; border-radius: 4px;}
        .m_contact .input_wrap_fow {margin: 8px 0;}
        .m_contact .input_wrap_agree {margin: 8px 0;}
    }
    @media all and (max-width: 600px) {
	:root {
            --fz50px: 24px;
            --fz30px: 16px;
            --fz20px: 14px;
            --fz18px: 12px;
        }
		.m_contact .input_wrap > :last-child {width: 100%;}
        .m_contact .input_wrap {flex-direction: column; gap: 10px; align-items: flex-start;}
        .m_contact .input_wrap_other {align-items: flex-start;} .m_contact .input_wrap_other :first-child {margin-top: 0;}
		.m_contact .input_wrap_agree > :last-child {height: fit-content;}
	}


  

/*********** about ***********/

      :root {
        --fz24px:24px;
        --fz16px: 16px;
    }

    .titlewrap {
        display: flex;
        flex-direction: column;
        gap: calc(var(--m_gutterY) / 2);
    }
    [class^='abt'] .titlewrap {gap: calc(var(--m_gutterY) / 4);}
    .titlewrap .sub_title {margin-top: 0;} /* main 전역 */
    .titlewrap p {word-break: keep-all;}
    .abt_title {
        text-align: center;
        font-size: var(--fz30px);
        font-weight: 500;
        line-height: 1.2;
    }
    .title_fx24px {
        text-align: center;
        font-size: var(--fz24px);
        font-weight: 500;
        line-height: 1.7;
        color: #222;
    }
    .title_fx16px {
        text-align: center;
        font-size: var(--fz16px);
        font-weight: 400;
        line-height: 1.5;
        color: #555;
    }

    .abt_area {
        padding: calc(var(--m_gutterY) / 2) 0;
        box-sizing: border-box;
    }
    .abt_area:first-of-type {padding-top: 0;}
    .abt_area > * + * {margin-top: calc(var(--m_gutterY) / 2)!important;}  /*.wrap 캐스케이딩*/
    [class^='abt'] .wrap {
        display: flex;
        flex-direction: column;
        gap: calc(var(--m_gutterY) / 2);
    }

    /* .abt_title_bg {
        padding-top: 25%;
        background-color: #000;
    } */

    .abt_title::before {
        content: '';
        display: block;
        --size: 72px;
        width: var(--size);
        height: var(--size);
        margin: 0 auto 1%;
        background-image: url(/img/html/abt_title_decoration-01.png);
        background-size: auto 100%;
        background-position: center;
        background-repeat: no-repeat;
    }
    .abt_title.num2::before {background-image: url(/img/html/abt_title_decoration-02.png);}
    .abt_title.num3::before {background-image: url(/img/html/abt_title_decoration-03.png);}
    .abt_title strong {position: relative; z-index: 1;}
    .abt_title strong::after {
        content: '';
        width: 104%;
        height: 68%;
        background-color: yellow;
        opacity: 0.5;
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        z-index: -1;
    }

    .abt_1::after {
        /* 라인 */
        content: '';
        display: block;
        width: calc(100% - var(--m_paddingX) * 2);
        max-width: 1200px;
        height: 1px;
        background-color: #ddd;
        margin: 0 auto;
        transform: translateY(calc(var(--m_gutterY) / 2));
    }



    .abt_brand_logowrap {
        --gap: 10px;
        gap: var(--gap);
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .abt_brand_logowrap img {
        width: calc((100% - var(--gap) * 3) / 4);
        border-radius: 10px;
    }
    .abt_brand_1 .abt_brand_logowrap img {width: calc((100% - var(--gap) * 5) / 6);}


    
    .abt_list {background-color: #f9fbfd;}
    .abt_list .main_title strong {color: #1f8fcf;}
    .abt_list_iconwrap {
        display: flex;
        flex-wrap: wrap;
        --gap: 10px;
        gap: var(--gap);
    }
    .abt_list_icon {
        width: calc((100% - var(--gap) * 2) / 3);
        /* height: 360px; */
        /* p, minH */
        background-color: #fff;
        background-position: center;
        border: 1px solid #e2e7ea;
        border-radius: 10px;
        box-sizing: border-box;
        /* position: relative; */
        padding: 4% 2%;
    }