@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

/* golos Text */
@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700;900&display=swap');

/* reset */
@media all {
    .clear:after { 
        content:""; 
        display:block; 
        clear:both;
    }
    * { margin:0; padding:0; outline:none; box-sizing:border-box; }
    html {scroll-behavior: smooth;}
    body {
    line-height:1; font-size:14px; font-weight:400; color:#000; font-family: 'Noto Sans KR', sans-serif !important; word-wrap: break-word; word-break: keep-all;
    }
    h1, h2, h3, h4, h5, h6 { margin:0; font-family: 'Noto Sans KR', sans-serif !important; line-height:1; font-size: 1em; }
    ul, ol { list-style:none; margin:0; padding: 0; }
    a { outline:0; text-decoration:none; color: #000; font-family: 'Noto Sans KR', sans-serif !important; }
    a:focus { outline:none; }
    figure,dl,dd,input[type=radio], input[type=checkbox]  { margin: 0; padding: 0; }
    img { border:none; outline:none; max-width: 100%; }
    p { margin:0; padding:0; word-wrap: break-word; word-break: keep-all;  }
    button, input, submit { border: none; background: none; }
    dt { font-weight: normal; }
    ::placeholder { font-family: 'Noto Sans KR', sans-serif !important; }
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        transition: background-color 5000s ease-in-out 0s;
        -webkit-transition: background-color 9999s ease-out;
        box-shadow: none !important;
        -webkit-text-fill-color: none !important;
    }

    /* 추가 폰트 */
    .Golos {font-family: 'Golos Text', sans-serif !important;}
}   

/* 탭 초기화 */
.tabBox1 .nav { border: none; }
.tabBox1 .nav > li { margin: 0; float: none; }
.tabBox1 .nav > li > a { padding: 0; margin: 0; border-radius:0; border: 0; }
.tabBox1 .nav > li:hover > a { background: none; }
.tabBox1 .nav > li.active > a { border: none; background: none; }

:root {
	/* 컨텐츠 너비 */
	--containerV1-width : 1400;

	--main-color : #ffb85f; /* mainColor */
    --basic-border-color: #ffb85f;	/* 게시판 및 게시판헤드 등 기타 버튼들 border 컬러 */
}

/* container */
.containerV1 { width: 100%; margin: 0 auto; max-width: calc(var(--containerV1-width) * 1px); }
@media (max-width:1430px) {
	.containerV1 { padding: 0 15px; }
}

/* 확대 축소 애니메이션 */
@keyframes ani_scale1 {
	50% { transform:scale(1.005);}
}
@keyframes ani_scale2 {
	50% { transform:scale(1.04);}
}
@keyframes ani_scale3 {
	50% { transform:scale(1.00);}
}

/* .ikwrap { overflow-x: hidden; } */



/* 게시판 글 없을 때 */
.post-none { font-size: 16px;}

/* data-scroll */
.fade-Up {transition: 1s;}
.fade-Up[data-scroll="out"] {opacity: 0; transform: translateY(30%);}


/*--------------------------------------------------- 해드세팅 ----------------------------------------------------------------------------*/
#header { 
    --h-height : 10rem;
    --hs-height : 80;
    position: fixed; left: 0; top: 0; width: 100%; height: var(--h-height); z-index: 1000; transition:0.4s;}
    
    #header > .containerV1 {height: 100%;}
    
    
    
    #header .itemBox {
    width: 100%; max-width: 1780px; height: 100%; display:flex; justify-content:space-between; align-items:center; 
    position: relative; z-index: 2; margin: 0 auto;}
    
    
    #logo {transition: all 0.3s;} 
    #logo a { display: block; position: relative; width: 100%; height: 100%;}
    #logo a svg {width: 240px; max-height: 47px;}
    
    
    /*main_menu---------------------------------------------------------------------------*/
    #nav .nav_logo {display: none;}
    
    #nav .nav_inner { display:flex; align-items:center; width: 100%;}
    #nav .outer {display: flex; position: relative;}
    #nav .outer > li {position: relative; margin-left: max(30px, 4.27vw); /*95px*/}
    #nav .outer > li:first-child {margin-left: 0;}
    #nav .outer > li > a {
    display: block; color: #fff;  font-size: 18px; height: 100%;
    position: relative; transition: all 0.3s;
    }
    #nav .outer > li > a > span {position: relative; }
    #nav .outer > li > a > i {color: var(--color1); display: none;}
    
    #nav .outer > li > a > span:after {
    content: ''; position: absolute; right:0; bottom: -10px; width: 0; height: 3px; background: var(--main-color); transition:0.4s;
    }
    
    
    /* hover */
    
    
    /* #nav .outer > li > a:hover{color: var(--main-color);} */
    #nav .outer > li:hover > a > span:after {width: 100%; left: 0; right: unset;}
    
    
    
    
    
    /* 해드 스크롤 했을때 */
    #header.scroll {height: calc(var(--hs-height) * 1px); background: #fff; box-shadow: 0px 1px 10px -6px #333;}
    #header.scroll {height: calc(var(--hs-height) * 1px);}
    /* #header.scroll #logo {width: 100px;} */
    #header.scroll #logo a{filter: invert(1);}
    #header.scroll #nav .outer > li > a { color: #000;}
    #header.scroll #nav .outer > li > a:hover{color: var(--main-color);}
    
    
    
    
    
    /* 해당페이지 일때 */
    #nav .outer > li > a.active {color: var(--main-color);}
    #nav .outer > li > a.on > span:after {width: 100%;}
    
    
    /*모바일에서 피씨 로고 클래스 지움.*/
    #logo.logo_hide {opacity: 0; visibility: visible;}
    
    
    
    /*반응형-------------------------------------------------------------*/
    
    
    @media (max-width: 1130px) {
        /* #logo a svg {width: 200px;} */
        #logo {width: 200px;}
    }
    
    
    
    /*모바일*/
    @media all and (max-width: 991px) {
        
        
        #header {
            --h-height : 70px;
            --hs-height : 70;
        }
        /* 모바일 열기 버튼 */
        .open_btn {
            --op-btn-color: #fff;
            width: 25px; height: 20px; position: relative; cursor:pointer;
            border-top: 1px solid var(--op-btn-color); border-bottom: 1px solid var(--op-btn-color);
        }
        .open_btn .line {
            position: absolute; top: 50%; left: 0; width: 100%; height: 0.5px;
            background: var(--op-btn-color);
        }
    
        #nav {
            --nav-width: 28;
            background-color: rgb(33 33 33 / 97%); width: calc(var(--nav-width) * 1em); height: 100%;  display: block;
            position: fixed; right:0; top: 0; z-index:9999; margin-right: calc(var(--nav-width) * -1em);  transition: margin-right 0.4s;   
        }
    
        #nav .nav_inner .nav_topBox {display: flex; align-items: center; width: 100%; height: 86px; padding: 20px;}
        #nav .nav_inner .nav_logo {display: block; width: 150px;}
    
        #nav .nav_inner { 
        width: calc(var(--nav-width) * 1em); height: 100%; overflow-x: hidden; overflow-y:auto; position: absolute;  top:0; 
        flex-direction:column; justify-content:flex-start; align-items:stretch;
        }
    
    
        /* 모바일닫기버튼 */
        .close_btn { width:35px; height:35px; margin-right:0; margin-left:auto; cursor:pointer; position: absolute; right: 9px; top: 25px;}
        .close_btn::before {
            content:''; position: absolute; top: 18px; left: 0; background: #fff; width: 100%; height: 1px;
            transform: rotate(45deg);
        }
        .close_btn::after {
            content:''; position: absolute; bottom: 16px; right: 0; background: #fff; width: 100%; height: 1px;
            transform: rotate(-45deg);
        }
    
        
        #nav .outer { display: block; margin-top: 10px; padding: 0 10px;}
        #nav .outer > li { margin-left: 0; width: 100%; overflow: hidden; cursor: pointer; margin-bottom: 10px;}

        #nav .outer > li:first-child {background: url('img/sec1_img01.jpg') no-repeat center center / cover;}
        #nav .outer > li:nth-child(2) {background: url('img/sec4_img01.png') no-repeat center center / cover;}
        #nav .outer > li:nth-child(3) {background: url('img/sec6_car02.png') no-repeat center center / cover;}
        #nav .outer > li:nth-child(4) {background: url('img/menu_img_contact.png') no-repeat center center / cover;}
        #nav .outer > li:nth-child(5) {background: url('img/index_section11_bg.jpg') no-repeat center center / cover;}


        #nav .outer > li > a {
            font-weight: 500; padding:25px 20px 25px 10px; color: #ffcf93; position: relative; height: auto; line-height: 1; font-size: 18px;
            border-bottom: 1px solid rgba(0,0,0,0.5); background: rgba(0,0,0,0.5); transition: 0.5s 0.1s;
        }


        #nav .outer > li > a > span:after {display: none;}
    
        #nav .outer > li > a > i {
            color: var(--main-color); display: none; position: absolute; right: 15px; top: 15px; transform: rotate(0deg); transition: all 0.3s;
        }
    
        #nav .inner { position: relative; padding: 0; display: block; border:0; opacity: 0; visibility: hidden; width: 100%; height: 0;  background: #fff; box-shadow: none;}
        #nav .inner::before {display: none;} 
        #nav .inner > li { margin-bottom:0; position: relative; padding: 0;}
    
    
        #nav .inner > li > a {
        color: #ffcf93; padding: 12px 25px; position: relative; transition: all 0.3s;
        text-align: left; left: 0; font-size: 15px;
        }
        
        #nav .outer > li > a:hover {padding: 40px 15px;}
    
        /* 해드 스크롤 했을때 */
        #header.scroll #nav .outer > li > a {color: #ffcf93; line-height: 1;}
        #header.scroll {height:  calc(var(--hs-height) * 1px);}
        #header.scroll #nav .outer > li > a {line-height:1;}
        #header.scroll .open_btn {--op-btn-color: #000;}

        /*	#header.scroll {box-shadow: 0px 3px 10px rgba(0,0,0,0.1); background: #fff;}*/
    
    
        /* 해당페이지 일때 */
        /*	#nav .outer > li.on > a span {color: var(--color1);}*/
        #nav .outer > li > a.on span {color: #ffcf93;}
        #nav .outer > li > a.on span:after {width: 100%;}
    
    
        /* outer 클릭시 inner보이는 효과 */
        #nav .outer > li.on_sub > .inner { display: block; padding: 10px 0;}
        
    
        /* 모바일메뉴박스 보이게 하는 클래스 */
        #nav.inactive { margin-right: -1px;} 
    }

    @media (max-width: 650px) {
        /* #logo a svg {width: 150px;} */
        #logo{width: 150px;}
        #nav {--nav-width: 21;}
    }

/*--------------------------------------------------- 해드세팅 끝 ----------------------------------------------------------------------------*/



/*--------------------------------------------------- 인덱스세팅 ----------------------------------------------------------------------------*/

#main {
    --font-size: 10;
}

#main > .section {font-size: min(calc(var(--font-size) / 550 * 100vw), calc(var(--font-size) * 1px));}
#main .title-V1 {font-size: 5em; font-weight: bold; color: #000; line-height: 1.2;}
#main .sub_title {font-size: 3em; color: #434343; line-height: 1.3; font-weight: 300;}
#main .text1 {font-size: 2em; color: #434343; line-height: 1.6;}
#main .text2 {font-size: 2.5em; line-height: 1.3;}

#main > .section {border-bottom: 1px solid #d4d4d4; background: #fff;}
#main .color-tag {color: var(--main-color);}
#main .section .titleBox {font-size: min(calc(10 / 650 * 100vw), 10px);}


/* section1 */
#main .section1 {padding: 10.5em 0 13.6em;}
#main .section1 .titleBox {
    position: relative; text-align: center;
    padding-bottom: 13.8em; margin-bottom: 4.8em;
}
#main > .section1 .titleBox::before,
#main > .section1 .titleBox::after {
    content:''; position: absolute; bottom: 0;
    left: 50%; transform: translateX(-50%);
    width: 1px; height: 10.2em; background: #959595;
}
#main > .section1 .titleBox::after {
    background: var(--main-color); height: 0;
}

#main > .section1 .titleBox .sub_title {margin-bottom: 0.4em;}

#main > .section1 .itemBox {
    width: 100%; max-width: 1730px; margin: 0 auto;
    position: relative;
}

#main > .section1 .itemBox .bg {
    position: relative; z-index: 1;
    transform: scale(1); border-radius: 20px;
    width: 100%; height: 100%; padding-bottom: 71.3em;
    background: url('img/sec1_img01.jpg') no-repeat center center / cover;
}

#main > .section1 .itemBox .bg::before {
    content:''; position: absolute; top: 0; left: 0; border-radius: inherit;
    width: 100%; height: 100%; background: #000; opacity: 35%;

    transition: 1s 0.5s;
}

#main > .section1 .itemBox .textBox {
    color: #fff; text-align: center;
    position: absolute; top: 50%; left: 50%;
    width: 100%; z-index: 2; transform: translate(-50%, -50%);
}
#main > .section1 .itemBox .textBox > * {color: inherit;}
#main > .section1 .itemBox .textBox .sub_title {line-height: 1.5; margin-bottom: 1.2em; font-weight: 400;}
#main > .section1 .itemBox .textBox .text1 {line-height: 1.8; font-weight: 300;}


/* data-scroll */
#main > .section1 .titleBox .sub_title {transition-delay: 0.5s;}
#main > .section1 .titleBox .title-V1 {transition-delay: 1s;}
#main > .section1 .titleBox[data-scroll="out"]:before {opacity: 0;}

#main > .section1 .itemBox .bg {transition: 1s 0.5s;}
#main > .section1 .itemBox[data-scroll="out"] .bg {transform: scale(0.9);}
#main > .section1 .itemBox[data-scroll="out"] .bg::before {opacity: 0;}
#main > .section1 .itemBox .textBox .sub_title {transition-delay: 0.5s;}
#main > .section1 .itemBox .textBox .text1 {transition-delay: 0.5s;}



@media (max-width: 1740px) {
    #main > .section1 .itemBox {padding: 0 15px;}
}

@media (max-width: 991px) {
    #main > .section1 .itemBox .bg {background-position: left center;}
    #main > .section1 .itemBox .textBox {padding: 0 30px;}
}

@media (max-width: 950px) {
    #main > .section1 .itemBox .textBox .text1 br {display: none;}
}


/* section2 */
#main .section2 {padding: 10.4em 0 11.5em;}
#main .section2 .item_container {
    --left-padding: 260;
    display: flex; gap: 7em; justify-content: space-between;
    align-items: center;
}
#main .section2 .item_container .left_content {
    text-align: center; flex: 1;
    padding-left: min(calc(var(--left-padding) / 1920 * 100vw), calc(var(--left-padding) * 1px));
}
#main .section2 .item_container .left_content .titleBox {
    position: relative; padding-bottom: 4.5em;; margin-bottom: 4em;
}
#main .section2 .item_container .titleBox::before {
    content:''; position: absolute; bottom: 0; left: 50%;
    transform: translateX(-50%); width: 10.6em; height: 1px;
    background: #000;
}
#main .section2 .item_container .titleBox .sub_title {margin-bottom: 0.4em; font-weight: 400;}
#main .section2 .item_container .left_content > .text2 {
    font-size: 2.5em; color: #000; line-height: 1.3;
    font-weight: bold; margin-bottom: 1em;
}
#main .section2 .item_container .left_content > .text1 {color: #434343;}

#main .section2 .item_container .right_slide {
    width: 100%; max-width: 960px; overflow: hidden;
    background: #fff; 
    /* border-radius: 20px; border: 1px solid #dcdcdc; will-change: transform; */
}


/* data-scroll */
#main .section2 .titleBox .title-V1 {transition-delay: 0.5s;}
#main .section2 .titleBox::before {transition: 0.5s 0.7s;}
#main .section2 .titleBox[data-scroll="out"]:before {
    width: 0;
}
#main .section2 .left_content .text2 {transition-delay: 0.7s;}
#main .section2 .left_content .text1 {transition-delay: 1s;}




@media (max-width: 1820px) {
    #main .section2 .item_container .left_content > .text1 br {display: none;}
}

@media (max-width: 1430px) {
    #main .section2 .item_container {--left-padding: 150;}
}

@media (max-width: 991px) {
    #main .section2 .item_container {
        --left-padding: 0;
        flex-direction: column;
    }
    #main .section2 .item_container .right_slide {padding: 0 15px;}
    #main .section2 .item_container .left_content {padding:  0 15px;}
}



/* section3 */
#main .section3 {padding: 7em 0 7.5em;}
#main .section3 .titleBox {text-align: center; margin-bottom: 5em;}
#main .section3 .titleBox .text_title {
    position: relative; padding-bottom: 4em;
    margin-bottom: 4em;
}
#main .section3 .titleBox .text_title::before {
    content:''; position: absolute; bottom: 0; left: 50%;
    transform: translateX(-50%); width: 10.6em; height: 1px;
    background: #bcbcbc;
}

#main .section3 .titleBox .sub_title {margin-bottom: 0.4em; font-weight: 300;}


/* data-scroll */
#main .section3 .titleBox .title-V1 {transition-delay: 0.5s;}
#main .section3 .text_title::before {transition: 0.5s 0.7s;}
#main .section3 .text_title[data-scroll="out"]:before {
    width: 0;
}
#main .section3 .titleBox .text1 {transition-delay: 0.7s;}



@media (min-width: 651px) {
    #main .section3 .titleBox .sub_title br {display: none;}   
}
#main .section3 .titleBox .text1 {color: #434343; line-height: 1.6 !important;}

@media (max-width: 768px) {
    #main .section3 .titleBox .text1 br {display: none;}
}


/* section4 */
#main .section4 {padding: 8.8em 0 8.8em;}
#main .section4 .itemBox {
    display: flex; flex-direction: column; gap: 6.5em;
}
#main .section4 .itemBox .item {display: flex; gap: 3.5em; align-items: center;}
#main .section4 .itemBox .item .img {border-radius: 20px; overflow: hidden;}
#main .section4 .itemBox .item:nth-child(even) .img {order: 2;}
#main .section4 .titleBox {text-align: center; flex: 1;}
#main .section4 .titleBox .sub_title {font-weight: 300; margin-bottom: 0.5em;}
#main .section4 .titleBox .text_title {
    position: relative; padding-bottom: 3em;
    margin-bottom: 3em;
}
#main .section4 .titleBox .text_title::before {
    content:''; position: absolute; bottom: 0; left: 50%;
    transform: translateX(-50%); width: 10.6em; height: 1px;
    background: #bcbcbc;
}
#main .section4 .titleBox .text1 {line-height: 1.6 !important;}


/* data-scroll */
#main .section4 .titleBox .title-V1 {transition-delay: 0.5s;}
#main .section4 .text_title::before {transition: 0.5s 0.7s;}
#main .section4 .text_title[data-scroll="out"]:before {
    width: 0;
}
#main .section4 .titleBox .text1 {transition-delay: 0.7s;}

#main .section4 .itemBox .img {transition: 3s 0.3s;}
#main .section4 .itemBox .img[data-scroll="out"] {transform: translateY(15%);}

#main .section4 .itemBox .img img {transition: 3s 0.6s;}
#main .section4 .itemBox .img[data-scroll="out"] img{transform: scale(1.2);}



@media (max-width: 1430px) {
    #main .section4 .itemBox {gap: 20em;}
}

@media (992px <= width <= 1430px) {
    #main .section4 .itemBox .item .img {
        font-size: min(calc(10 / 1430 * 100vw), 10px);
        width: 68.1em; height: 49.4em;
    }
    #main .section4 .titleBox .text1 br {display: none;}
}

@media (max-width: 991px) {
    #main .section4 .itemBox .item {flex-direction: column;}
    #main .section4 .itemBox .item:nth-child(even) .img {order: unset;}
}

@media (max-width: 580px) {
    #main .section4 .titleBox .text1 br {display: none;}
}


/* section5 */
#main .section5 {padding: 9.5em 0 10em; border-bottom: unset;}
#main .section5 .titleBox {margin-bottom: 6.5em; text-align: center;}
#main .section5 .titleBox > .sub_title {font-weight: 300; margin-bottom: 0.3em;}

@media (min-width: 769px) {
    #main .section5 .titleBox > .sub_title br {display: none;}
}

#main .section5 .itemBox {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 4em 5em;
    /* grid-auto-rows: minmax(35em, auto); */
}
#main .section5 .itemBox .item {text-align: center;}
#main .section5 .itemBox .item .img img {transition: 1s;}
#main .section5 .itemBox .item > span {display: block; margin-top: 0.5em; line-height: 1.6 !important;}

@media (min-width: 992px) {
    #main .section5 .itemBox .item .img {overflow: hidden; border-radius: 20px;}
    /* hover */
    #main .section5 .itemBox > .item .img:hover img {transform: scale(1.1);}
}


/* data-scroll */
#main .section5 .titleBox .title-V1 {transition-delay: 0.5s;}
#main .section5 .itemBox .item.fade-Up {transition: 1.5s;}
#main .section5 .itemBox .item.fade-Up[data-scroll="out"] {transform: translateY(20%);}
#main .section5 .itemBox .item:first-child {transition-delay: 0.3s;}
#main .section5 .itemBox .item:not(:first-child) {
    transition-delay: calc((var(--index) + 1) * 0.3s);
}



@media (max-width: 1430px) {
    #main .section5 .itemBox .item > span br {display: none;}
}

@media (max-width: 991px) {
    #main .section5 .titleBox .title-V1 br {display: none;}
    #main .section5 .itemBox {grid-template-columns: repeat(2, 1fr); gap: 3em 2em;}
    #main .section5 .itemBox .item > span {font-size: max(13px, 1.6em) !important;}
}


/* section6 */
#main .section6 {padding: 9.6em 0 7em; background: #f8f8f8; overflow: hidden;}
#main .section6 .titleBox {text-align: center; margin-bottom: 5.6em;}

#main .section6 .itemBox:not(:first-child) {border-top: 2px solid #535353;}
/* 535353 ddd*/


/* 제품 옵션 */
#main .section6 .text2 {font-weight: bold;}
#main .section6 .itemBox1 {
    position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(332px, auto); margin-bottom: 10.5em;
}
#main .section6 .itemBox1::before {
    content:''; position: absolute; top: 0;
    left: 50%; transform: translateX(-50%);
    width: 67em; height: 66.7em;
    background: url('img/sec6_bg_logo.png') no-repeat center center / cover;
    animation: circle 50s infinite linear;
}

@keyframes circle {
    to {transform: translateX(-50%) rotate(360deg);}
}

#main .section6 .itemBox1 .item {
    box-sizing: border-box; border: 2px solid transparent;
    padding: 15px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 1.5em;
    position: relative; z-index: 2;
}
#main .section6 .itemBox1 .item:nth-child(even) {border-color: #434343;}

@media (min-width: 992px) {
    #main .section6 .itemBox1 .item:nth-child(4) {position: relative; bottom: 2px; left: 2px;}
    #main .section6 .itemBox1 .item:nth-child(6) {position: relative; bottom: 2px; right: 2px;}
}

#main .section6 .itemBox1 .item .text2 {text-align: center;}
#main .section6 .itemBox1 .item .list {text-align: center;}
#main .section6 .itemBox1 .item1 .list > li small {display: inline-block; margin-top: 0.7em;}

#main .section6 .itemBox1 .item2 > .list {
    text-align: left; display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 0 2.5em;
}
#main .section6 .itemBox1 .item2 > .list > li {padding-left: 0.7em;}
#main .section6 .itemBox1 .item2 > .list > li span {position: relative;}
#main .section6 .itemBox1 .item2 > .list > li span::before {
    content:''; position: absolute; top: 45%; left: -0.7em;
    border-radius: 50%; background: #434343; width: 7px; height: 7px;
}

#main .section6 .itemBox1 .item5 .text1 {color: #000;}


/* data-scroll */
#main .section6 .titleBox .title-V1 {transition-delay: 0.5s;}
#main .section6 .itemBox1 .item.fade-Up {transition: 0.5s;}
#main .section6 .itemBox1 .item.fade-Up[data-scroll="out"] {transform: translateY(5%);}
#main .section6 .itemBox1 .item:first-child {transition-delay: 0.2s;}
#main .section6 .itemBox1 .item:not(:first-child) {
    transition-delay: calc((var(--index) + 1) * 0.2s);
}


@media (max-width: 991px) {
    #main .section6 .itemBox1 {grid-template-columns: repeat(2, 1fr);}
}

@media (601px <= width <= 991px) {
    #main .section6 .itemBox1 .item:nth-child(2) {top: 2px;}
    #main .section6 .itemBox1 .item:nth-child(3) {border-color: #434343; left: 2px;}
    #main .section6 .itemBox1 .item:nth-child(4) {border-color: transparent;}
    #main .section6 .itemBox1 .item:nth-child(6) {bottom: 2px;}
}

@media (max-width: 768px) {
    #main .section6 .itemBox1 .item2 > .list {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (max-width: 600px) {
    #main .section6 .itemBox1 {grid-template-columns: repeat(1, 1fr); grid-auto-rows: minmax(20em, auto); gap: 2em;}
    #main .section6 .itemBox1 .item2 > .list {grid-template-columns: repeat(2, 1fr);}
}




/* 브랜드 컬러 */
#main .section6 .itemBox2 {padding: 8.3em 0;}
#main .section6 .itemBox2 .item {display: grid; grid-template-columns: repeat(2, 1fr); gap: 10.9em;}
/* #main .section6 .itemBox2 .item .unit .text2 {font-weight: bold;} */
#main .section6 .itemBox2 .item .unit .list {
    display: flex; flex-direction: column; margin-top: 1em; width: 100%;
    gap: 1.5em;
}
#main .section6 .itemBox2 .item .unit .list > li .color-box {width: 100%; height: 5.8em; border: 1px solid transparent;}
#main .section6 .itemBox2 .item .unit .list > li span {font-size: 1.6em; color: #000; line-height: 1.3; margin-top: 0.3em; display: inline-block;}

#main .section6 .itemBox2 .item .unit .list > li .color-box.BLACK {background: #000;}
#main .section6 .itemBox2 .item .unit .list > li .color-box.WHITE {background: #fff; border: 1px solid #e0e0e0;}
#main .section6 .itemBox2 .item .unit .list > li .color-box.BLACK_ROSE {background: linear-gradient(90deg, #000 50%, #8c4149 50%);}
#main .section6 .itemBox2 .item .unit .list > li .color-box.BEIGE {background: #f3e7c9;}
#main .section6 .itemBox2 .item .unit .list > li .color-box.BROWN {background: #695248;}
#main .section6 .itemBox2 .item .unit .list > li .color-box.GRAY {background: #b6b4ad;}

/* data-scroll */
#main .section6 .itemBox2 .item .unit .list > li {transition: 1s 0.3s;}
/* #main .section6 .itemBox2 .item .unit .list > li .color-box[data-scroll="out"] {width: 20%;} */


@media (max-width: 991px) {
    #main .section6 .itemBox2 .item {gap: 5em;}
}

@media (max-width: 768px) {
    #main .section6 .itemBox2 .item {grid-template-columns: repeat(1, 1fr);}
}




/* 브랜드 옵션2 */
#main .section6 .itemBox3 {padding: 8.3em 0 10.5em;}
#main .section6 .itemBox3 .tableBox {margin-top: 2em;}
#main .section6 .itemBox3 .tableBox table {
    width: 100%; text-align: center; font-size: 1.8em; color: #434343; line-height: 1.2;
}
#main .section6 .itemBox3 .tableBox table tr > * {padding: 14px 5px; border-bottom: 1px solid #c4c4c4;}
#main .section6 .itemBox3 .tableBox table tr:last-child > td {border-bottom-color: #9c9c9c;}
#main .section6 .itemBox3 .tableBox table tr > *:not(:last-child) {border-right: 1px solid #959595;}
#main .section6 .itemBox3 .tableBox table tr th {
    border-top: 2px solid #000; border-bottom: 2px solid #000;
    background: #eee; text-align: center; color: #000; font-weight: bold;
}

/* data-scroll */
#main .section6 .itemBox3 .tableBox {transition-delay: 0.5s;}
#main .section6 .itemBox3 .tableBox[data-scroll="out"] {transform: translateY(10%);}


@media (min-width: 651px) {
    #main .section6 .itemBox3 .tableBox table tr .th01 {width: 17.14%;}
    #main .section6 .itemBox3 .tableBox table tr .th02 {width: 20%;}
    #main .section6 .itemBox3 .tableBox table tr .th03 {width: 17.86%;}
    #main .section6 .itemBox3 .tableBox table tr .th04 {width: 15%;}
    #main .section6 .itemBox3 .tableBox table tr .th05 {width: 12.14%;}
    #main .section6 .itemBox3 .tableBox table tr .th06 {width: 17.64%;}

    #main .section6 .itemBox3 .tableBox table tr .th02 br {display: none;}
}

@media (max-width: 650px) {
    /* #main .section6 .itemBox3 .tableBox table tr .th02 {width:15%;} */
    #main .section6 .itemBox3 .tableBox table tr .th06 {width: 26%;}
}




/* 브랜드 제원 */
#main .section6 .itemBox4 {padding: 8.5em 0 0;}
#main .section6 .itemBox4 .img-item {margin: 5.3em 0 7.7em; display: flex; gap: 13.2em;}
#main .section6 .itemBox4 .tableBox .text1 {text-align: center;}

#main .section6 .itemBox4 .tableBox {margin-top: 2em;}
#main .section6 .itemBox4 .tableBox .table_item {
    width: 100%; text-align: center; font-size: 1.8em; color: #434343; line-height: 1.2;
    margin-bottom: 3.6111em; display: flex; flex-direction: column;
}
#main .section6 .itemBox4 .tableBox .table_item ul {display: flex;}
#main .section6 .itemBox4 .tableBox .table_item ul > li {
    padding: 14px 5px;
    display: flex; justify-content: center; align-items: center;
}
#main .section6 .itemBox4 .tableBox .table_item ul.th {    
    background: #eee; text-align: center; color: #000; font-weight: bold;
}


/* data-scroll */
#main .section6 .itemBox4 .img-item {transition-delay: 0.5s;}
#main .section6 .itemBox4 .img-item[data-scroll="out"] {transform: translateY(10%);}
#main .section6 .itemBox4 .table_item {transition-delay: 0.7s;}
#main .section6 .itemBox4 .table_item[data-scroll="out"] {transform: translateY(10%);}
#main .section6 .itemBox4 .tableBox > .text1 {transition-delay: 0.9s;}

@media (min-width: 769px) {
    #main .section6 .itemBox4 .tableBox .table_item ul > li {width: 17%;}
    #main .section6 .itemBox4 .tableBox .table_item ul > li {width: 12.14%;}
    #main .section6 .itemBox4 .tableBox .table_item ul > li {width: 11.43%;}
    #main .section6 .itemBox4 .tableBox .table_item ul > li {width: 10.71%;}
    #main .section6 .itemBox4 .tableBox .table_item ul > li {width: 10.71%;}
    #main .section6 .itemBox4 .tableBox .table_item ul > li {width: 10.71%;}
    #main .section6 .itemBox4 .tableBox .table_item ul > li {width: 12.50%;}
    #main .section6 .itemBox4 .tableBox .table_item ul > li {width: 14.64%;}

    #main .section6 .itemBox4 .tableBox .table_item ul > li {border-bottom: 1px solid #c4c4c4;}
    #main .section6 .itemBox4 .tableBox .table_item ul:last-child > li {border-bottom-color: #9c9c9c;}
    #main .section6 .itemBox4 .tableBox .table_item ul > li:not(:last-child) {border-right: 1px solid #959595;}
    #main .section6 .itemBox4 .tableBox .table_item ul.th {
        border-top: 2px solid #000; border-bottom: 2px solid #000;
    }
}

@media (max-width: 1430px) {
    #main .section6 .itemBox4 .img-item {gap: 5em;}
}

@media (max-width: 991px) {
    #main .section6 .itemBox4 .img-item {gap: 5em 0; flex-wrap: wrap; justify-content: center;}
    #main .section6 .itemBox4 .img-item .img {width: calc(100% / 2);}
    #main .section6 .itemBox4 .img-item .img img {display: block; margin: 0 auto;}
    #main .section6 .itemBox4 .img-item .img:nth-child(2) {order: 3;  width: auto;}
    #main .section6 .itemBox4 .img-item .img:last-child {order: 2;}
}

@media (max-width: 768px) {

    #main .section6 .itemBox4 .tableBox .table_item {
        display: grid; grid-template-columns: 1fr 2fr 2fr;
        border-top: 2px solid #000; border-bottom: 2px solid #000;
    }
    #main .section6 .itemBox4 .tableBox .table_item ul {flex-direction: column;}
    #main .section6 .itemBox4 .tableBox .table_item ul > li:not(:last-child) {border-bottom: 1px solid #c4c4c4;}
    #main .section6 .itemBox4 .tableBox .table_item ul:not(:last-child) {border-right: 1px solid #959595;}


    #main .section6 .itemBox4 .img-item .img {width: 100%;}
    #main .section6 .itemBox4 .img-item .img:nth-child(2) {width: 100%;}
    /* #main .section6 .itemBox4 .img-item .img:nth-child(2) {order: unset;}
    #main .section6 .itemBox4 .img-item .img:last-child {order: unset;} */
}



/* section10 : 문의 / 시승신청 */
#main .section10{
    padding: 12.5em 0;
}

#main .section10 > .containerV1 {max-width: 100%; display: flex; gap: 14em; align-items: center;}

#main .section10 .Box_title_wrap{text-align: center; padding-bottom: 3.5em; margin-bottom: 3em; position: relative;}
#main .section10 .Box_title_wrap:after{
    content:''; position: absolute;
    width: 100%; max-width: 220px; height: 1px;
    background-color: #585858;
    bottom: 0; left: 50%; transform: translateX(-50%);
}
#main .section10 .Box_title_wrap .title-V1 br{display: none;}

#main .section10 .Box_sub_text{text-align: center; margin-bottom: 4em;}
#main .section10 .Box_sub_text p{font-size: 2em; margin-bottom: 0.8em; color: #434343; line-height: 1.3;}
#main .section10 .Box_sub_text p.company{font-size: 2.5em; font-weight: bold; color: #000; line-height: 1.5;}
#main .section10 .Box_sub_text p:last-child{margin-bottom: 0;}

@media (max-width: 1700px) {
    #main .section10 > .containerV1{
            max-width: calc(var(--containerV1-width) * 1px);
            gap: 8em;
    }
}

@media (1201px <= width <= 1701px) {
    #main .section10 > .containerV1 > * {width: 50%;}
}

@media (max-width: 1200px) {
    #main .section10 > .containerV1 {flex-direction: column;}
    #main .section10 > .containerV1 .imgBox {width: 100%;}
}




/* section11 : 한유가 만들면 특별합니다 */
#main .section11{
    padding: 9em 0 11em;
    background-image: url('./img/index_section11_bg.jpg')!important;
    background-size: cover !important; background-position: center center !important;
    text-align: center; border-bottom: unset;
}
#main .section11 .logoBox{margin-bottom: 3em;}

#main .section11 .title{margin-bottom: 3em;}
#main .section11 .title h2{font-size: 4.5em; font-weight: bold; color: var(--main-color); line-height: 1.3;}

#main .section11 .sec11_text1{margin-bottom: 3.5em;}
#main .section11 .sec11_text1 p{font-size: 2.5em; font-weight: bold; line-height: 1.6; color: #fff;}

#main .section11 .sec11_text2{margin-bottom: 6.5em;}
#main .section11 .sec11_text2 p{font-size: 1.8em; line-height: 1.6; color: #fff;}

#main .section11 .brand_wrap{display: flex; color: #fff; text-align: center; line-height: 1.6; align-items: center; justify-content: center;}
#main .section11 .brand_wrap .brand span{font-size: 1.8em; color: #fff; display: inline-block; vertical-align: -2px;}
#main .section11 .brand_wrap .brand span:before{
    content:''; display: inline-block;
    width: 1px; height: 1.1em; background-color: #fff;
    margin: 0 .5em; vertical-align: -3px;
}
#main .section11 .brand_wrap .brand1 span:first-child:before{display: none;}

@media (max-width: 991px) {
    #main .section11 .sec11_text2 p br{display: none;}

    #main .section11 .brand_wrap{flex-direction:column;}
    #main .section11 .brand_wrap .brand span{font-size: 1.6em;}
    #main .section11 .brand_wrap .brand2 span:first-child:before{display: none;}
    

}
/*--------------------------------------------------- 인덱스세팅 끝 ----------------------------------------------------------------------------*/



/*--------------------------------------------------- 푸터세팅 ----------------------------------------------------------------------------*/


#footer {
	font-size: min(calc(15 / 450 * 100vw), 16px);
	--ft-color: #d9d9d9;
    background: #2b2b2b; color: var(--ft-color);
}
#footer a { color: inherit; }
	
    /* #footer  logo content   */
    #footer .contents {padding: 3em 0 0; display: flex; flex-direction: column; gap: 10px; align-items: center;}
    /* #footer .contents .item1 a img {width: 32em;} */
    #footer .contents .item1 a svg{width: 20em;}

	/* 약관박스 : infobox  */
    #footer .info_box {display: flex; justify-content: center; margin-top: 4em; padding: 2.3em 0; position: relative;}
    #footer .info_box:after {
        content: ''; position: absolute;
        top: 0; left: 0;
        width: 100%; height: 1px;
        background-color: #bfbfbf;
    }
    #footer .info_box > li {position:relative; display: inline-block;}
    #footer .info_box > li:after {
        content:''; display: inline-block;
        margin: 2px 6px;
        width:1px; height: 16px; background: var(--ft-color);
    }
    #footer .info_box > li:last-child:after { display:none;}
    #footer .info_box > li > a {
        font-weight: normal;
        display:inline-block; color: var(--ft-color); font-size:  1em;
        font-weight: 500; vertical-align: top;
    }
    #footer .info_box > li > a:hover {text-decoration: underline !important;}
	
	#footer .contents .item2 {text-align: center; width: 100%;}
    #footer .contents .item2 span{font-size: 1em; color: var(--ft-color);}
    #footer .contents .item2 .copy {font-size: 1em; color: var(--ft-color); line-height: 1.6;}
    #footer .contents .item2 .copy a {color: inherit !important;}
	#footer .contents .item2 .text:first-child {margin-bottom: 5px;}
    #footer .contents .item2 .text span{line-height: 1.8; position: relative; display: inline-block; margin-right: -3px;}
    #footer .contents .item2 .text span::before {
    content:''; display: inline-block; margin: -3px 5px;
    width: 1px; height: 16px; background: var(--ft-color);}


    #footer .contents .item2 .text span:first-child::before{display: none;}

/*  미디어쿼리 */

@media (max-width: 768px) {
    #footer{padding: 0 15px;}
	#footer .contents  {padding: 2.5em 0 0;}
	#footer .contents .item2 .text {display: flex; flex-direction: column; align-items: center;}
	#footer .contents .item2 .text span {margin-right: 0;}
	#footer .contents .item2 .text span::before {display: none;}
    #footer .info_box{margin-top: 2em;}
}


/*--------------------------------------------------- 푸터세팅 끝 ----------------------------------------------------------------------------*/








/* 서브페이지 패딩 */
.tmt_sub_frame { padding:40px 0 50px; min-height: 70vh; }


/* 게시판 및 게시판헤드 등 기타 버튼들 기본컬러 변경 */
.btn.btn-color {border: 1px solid var(--basic-border-color); background-color: var(--main-color);}
.btn.active.btn-color, .btn.btn-color:hover, .btn.btn-color:focus, .btn.btn-color:active {background-color: var(--main-color);}
.border-color, i.border-color, img.border-color {border-color: var(--basic-border-color);}

/* 모달 z-index높이기 (해드에 가려지는 경우 발견해서) */
.modal { z-index: 9999; }
.modal-backdrop { z-index: 9998; }

#style-switcher .widget-setup { top: 155px !important; }