:root {
	/* 테마 전체 색상 */
    --main-color1:#cf9d47;
    --main-color2:#d1bea9;
    --main-color3:#573b2e;
    --main-color4:#08101a;
	--main-color5:#f68500;
    --main-color1-rgb:207, 157, 71;
    --main-color2-rgb:209, 190, 169;
    --main-color3-rgb:87, 59, 46;
    --main-color4-rgb:8, 16, 26;
    --main-width:1400px;

	/* sns 색상 */
    --kakao-color:#ffe500;
    --instagram-color:linear-gradient(to bottom, #8452a1, #ea2d87, #ef4c3e, #efcb6b);
    --naver-color:#06be34;
    --facebook-color:#435e99;
    --youtube-color:#d4262c;
    --twiter-color:#27a9e0;

	/* 게시판 아이콘 색상 */
	--board-secret-color:#333;
	--board-new-color:#eeb506;
	--board-hot-color:#d91426;
	--board-file-color:#333;
	--board-link-color:#195dae;

	/* 컬러 */
    --k-color-red:#fd1f2a;
    --k-color-orange:#ff5f15;
    --k-color-yellow:#f8af11;
    --k-color-green:#63b417;
    --k-color-blue:#0041a3;
    --k-color-navy:#05102c;
    --k-color-purple:#53237a;
    --k-color-pink:#ec4f71;
    --k-color-beige:#ddc2ad;
    --k-color-brown:#381e13;
    --k-color-gray:#bfc2ca;
    --k-color-skyblue:#44abe7;

    --k-shop-type1:var(--k-color-red); /*히트*/
    --k-shop-type2:var(--k-color-green); /*추천*/
    --k-shop-type3:var(--k-color-yellow); /*신상품*/
    --k-shop-type4:var(--k-color-skyblue); /*인기*/
    --k-shop-type5:var(--k-color-red); /*할인*/
    --k-shop-type6:#222; /*무료배송*/

	/* .c padding값 */
    --c-padding:15px;

    /* 명조체 */
    --font-serif:"RIDIBatang-subset";
    /* 영문 손글씨 */
    --font-handwriting:"Kaushan Script", cursive;

    /* 메인&서브 좌우 패딩 */
    --top-padding:90px;
}

@media (max-width: 1400px) {
	:root {
		--main-width:100vw;
        /* .c padding값 */
        --c-padding:30px;
		--top-padding:60px;
    }
}

@media (max-width: 1200px) {
    :root {
        --top-padding:45px;
    }
}

@media (max-width: 1024px) {
	:root {
        /* .c padding값 */
        --c-padding:20px;
		--top-padding:var(--c-padding);
     }
}

.content-body { padding: 0px;margin:0 auto; }
	.page-content { }

    .page-content .section { position:relative; z-index:1; --sec-padding:100px; }
    .page-content .section:not(.sec1) { padding-top:var(--sec-padding); }
    .page-content .section.sec4,
    .page-content .section.sec5,
    .page-content .section.sec7,
    .page-content .section.sec8 { padding-bottom:var(--sec-padding); }
    .page-content .section .header { margin-bottom:60px; text-align:center; }
    .page-content .section .header .subhead { font-size:1.125rem; font-weight:500; display:inline-block; margin:0 auto 20px; }
    .page-content .section .header .head { font-size:2.8rem; font-weight:500; }
    .page-content .section .header .desc { line-height:1.7; margin-top:20px; }


    .page-content .sec1 .header { text-align:left; }
    .page-content .sec1 .bg { position:relative; padding:50px 0; background:#eee; text-align:right; background:#eee url('img/03/business6-sec1-bg.jpg') no-repeat center/cover; z-index:2; }
    .page-content .sec1 .bg:before { content:""; position:absolute; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,.3); z-index:-1; }
    .page-content .sec1 .bg .txt-boder { position:absolute; left:0; font-size:6rem; font-weight:900; -webkit-text-stroke:1px #fff; color:transparent; opacity:.2; }
    .page-content .sec1 .bg .txt { font-size:2.5rem; color:#fff; text-align:left; margin:100px 0; }

    .page-content .sec1 .content { text-align:center; padding-top:70px; padding-bottom:70px; border-top:1px solid #ddd; border-bottom:1px solid #ddd; margin-top:50px; width:90%; }
    .page-content .sec1 .content .txt { font-size:1.25rem; }
    .page-content .sec1 .content .ceo { font-size:.875rem; margin-top:30px; }

    .page-content .sec1 .txt { position:relative; display:inline-block; font-weight:600; }
    .page-content .sec1 .txt i { position:absolute; font-size:2rem; }
    .page-content .sec1 .txt i:first-of-type { right:100%; bottom:calc(100% - 15px); margin-right:20px; color:var(--main-color1); }
    .page-content .sec1 .txt i:last-of-type { left:100%; top:calc(100% - 15px); margin-left:20px; color:var(--main-color2); }


    .page-content .sec2 .content { display:flex; justify-content:space-between; --box-padding:30px; }
    .page-content .sec2 .content .box { position:relative; width:calc(25% - 15px); height:530px; padding:var(--box-padding); display:flex; flex-direction:column; justify-content:flex-end; text-align:center; overflow:hidden; color:#fff; background:#eee no-repeat center/cover; backdrop-filter: grayscale(.8); transition-duration:400ms !important; }

    .page-content .sec2 .content .box:not(.on) { filter: grayscale(1) brightness(0.5); }
    .page-content .sec2 .content .box:not(.on) ul .head { position:absolute; left:var(--box-padding); top:50%; right:var(--box-padding); transform:translateY(-50%);  transition-delay:0ms; }

    .page-content .sec2 .content ul { margin-bottom:-100%; transition-duration:400ms; }
    .page-content .sec2 .content ul:before { content:""; position:absolute; left:calc(-1 * var(--box-padding)); top:calc(-1 * var(--box-padding)); right:calc(-1 * var(--box-padding)); bottom:calc(-1 * var(--box-padding)); background:linear-gradient(to bottom, var(--main-color1), var(--main-color3)); z-index:-1; opacity:0; }
    .page-content .sec2 .content ul .head { font-size:1.5rem; font-weight:600; transition-duration:400ms;color:#fff; }
    .page-content .sec2 .content ul .desc { margin-top:20px; color:#fff;}
    .page-content .sec2 .content ul .more { margin-top:30px; color:#fff;}
    .page-content .sec2 .content ul .more span { text-decoration:underline;color:#fff; }

    .page-content .sec2 .content .box.on { width:calc(50% - 15px); }
    .page-content .sec2 .content .box.on ul { position:relative; z-index:2; margin-bottom:0; }
    .page-content .sec2 .content .box.on ul:before { opacity:.6; }


    .page-content .sec3 .tiles .tile > .a { padding-bottom:130%; background:none no-repeat center/cover; border-radius:30px; overflow:hidden; }
    .page-content .sec3 .tiles .tile > .a:before { background:rgba(0,0,0,.5); }
    .page-content .sec3 .a .content { top:45%; bottom:30px; text-align:center; display:flex; flex-direction:column; justify-content:space-between; align-items:center; color:#fff; }
    .page-content .sec3 .a .head { font-size:1.5rem; font-weight:600;color:#fff; }
    .page-content .sec3 .a .desc { line-height:1.6; margin-top:20px; flex:1;color:#fff; }
    .page-content .sec3 .a .en { border-radius:99px; background:var(--main-color3); color:#fff; padding:10px 20px; font-weight:600; }
    .page-content .sec3 .a .en:first-letter { color:var(--main-color2); }


    .page-content .sec4 ul { display:grid; grid-template-columns: repeat(2, 50%); grid-row-gap: 50px; grid-auto-flow: row dense; }
    .page-content .sec4 li { position:relative; }
    .page-content .sec4 li:nth-child(4n+3) { grid-column: 2/3; }
    .page-content .sec4 li:nth-child(4n+4) { grid-column: 1/2; }
    .page-content .sec4 li:nth-child(even) { padding:0 10% 30px; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; }

    .page-content .sec4 li .img { padding-bottom:60%; background:none no-repeat center/cover; }
    .page-content .sec4 li .icon { position:absolute; right:40px; bottom:-20px; width:110px; height:110px; background:var(--main-color1) no-repeat center/60px; }
    .page-content .sec4 li .num { font-weight:600; padding-bottom:5px; line-height:1; border-bottom:1px solid var(--main-color1); color:var(--main-color1); }
    .page-content .sec4 li .head { font-size:2rem; margin:20px 0 50px; }
    .page-content .sec4 li .en { font-size:5rem; color:#aaa; opacity:.1; font-weight:900; white-space: nowrap; }


    .page-content .sec5 { background:var(--main-color3); color:#fff; }
    .page-content .sec5 ul { display:grid; grid-template-columns: repeat(2, 1fr); grid-row-gap: 50px; }
    .page-content .sec5 li { position:relative; }
    .page-content .sec5 li:nth-child(1) { grid-column: 2/3; grid-row:1/2; }
    .page-content .sec5 li:nth-child(2) { grid-column: 1/2; grid-row:1/2; }
    .page-content .sec5 li:nth-child(even) { padding:0 10% 30px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }

    .page-content .sec5 li .img { border-radius:20px; width:100%; padding-bottom:60%; background:none no-repeat center/cover; }
    .page-content .sec5 li .head { font-size:1.5rem; font-weight:600; }
    .page-content .sec5 li .subhead { font-size:1.25rem; margin:25px 0 20px; font-weight:600; }
    .page-content .sec5 li .desc { line-height:1.6; }
    .page-content .sec5 li .en { position:absolute; left:25px; top:25px; font-size:5rem; color:#aaa; opacity:.03; font-weight:900; }


    .page-content .sec6 ul { display:flex; padding:30px 50px; border-radius:200px; border:1px dotted var(--main-color1); }
    .page-content .sec6 ul li { position:relative; width:calc(100%/6 + 20px); border-radius:100%; margin:0 -10px; overflow:hidden; background:rgba(var(--main-color1-rgb),.05); }
    .page-content .sec6 ul li:last-child { background:var(--main-color1); color:#fff; }
    .page-content .sec6 ul li:before { content:""; display:block; padding-bottom:100%; }
    .page-content .sec6 ul .content { position:absolute; left:0; top:0; right:0; bottom:0; display:flex; flex-direction:column; justify-content:center; align-items:center; }

    .page-content .sec6 ul .step { color:var(--main-color2); font-weight:600; }
    .page-content .sec6 ul .head { margin-top:10px; }

    .page-content .sec7 .content { display:flex; justify-content:space-between; }
    .page-content .sec7 .content ul { display:flex; }
    .page-content .sec7 .contact { align-items:center; justify-content:space-evenly; width:calc(80% - 30px); border:1px solid #ddd; --icon-size:40px; }
    .page-content .sec7 .contact li { position:relative; min-width:15%; padding-left:calc(var(--icon-size) + 20px); background:none no-repeat left center/40px; }
    .page-content .sec7 .contact li img { position:absolute; left:0; top:calc(50% - var(--icon-size)/2); width:var(--icon-size); height:var(--icon-size); }
    .page-content .sec7 .contact li span { display:block; font-size:.875rem; }
    .page-content .sec7 .download { width:20%; }
    .page-content .sec7 .download li { width:50%; margin-left:-1px; border:1px solid #ddd; }
    .page-content .sec7 .download a { display:block; text-align:center; padding:30px 0; }
    .page-content .sec7 .download a img { margin-bottom:15px; width:50px; }


    .page-content .sec8 { position:relative; z-index:2; background:url('img/03/business6-sec8-bg1.jpg') no-repeat center/cover fixed; color:#fff; }
    .page-content .sec8:before { content:""; position:absolute; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,.3); z-index:-1; }
    .page-content .sec8 .bg { position:absolute; left:0; top:0; right:0; bottom:0; }

    .page-content .sec8 .header { margin-bottom:0 !imporwjrjtant; }
    .page-content .sec8 .desc { margin-bottom:15px; }
    .page-content .sec8 .btn-box { margin-top:40px; }
    .page-content .sec8 .btn-box .btn { background:#fff; padding:20px 30px; color:#333; }
    .page-content .sec8 .btn-box .btn:hover { color:#fff;background-color:#cf9d47; }




	@media (max-width: 1024px) {
        .page-content .section { --sec-padding:70px; }
        .page-content .section .header { margin-bottom:40px; }
        .page-content .section .header .subhead { margin-bottom:5px; }
        .page-content .section .header .head { font-size:2rem; }
        .page-content .section .header .desc { margin-top:10px; }

        .page-content .sec1 .bg { padding:30px 0; }
        .page-content .sec1 .bg .txt-boder { font-size:4rem; }
        .page-content .sec1 .bg .txt { font-size:1.625rem; margin:60px 0; }

        .page-content .sec1 .content { padding-top:40px; padding-bottom:40px; }
        .page-content .sec1 .content .ceo { margin-top:20px; }

        .page-content .sec2 .content { flex-direction:column; }
        .page-content .sec2 .content .box { width:100% !important; height:auto; padding:50px var(--box-padding); }
        .page-content .sec2 .content .box:not(.on) { filter:none; }

        .page-content .sec2 .content ul { position:relative; margin-bottom:0; }
        .page-content .sec2 .content ul:before { top:-50px; bottom:-50px; opacity:.6; }
        .page-content .sec2 .content .box:nth-child(odd) ul { margin-left:calc(50% + var(--box-padding)); }
        .page-content .sec2 .content .box:nth-child(even) ul { margin-right:calc(50% + var(--box-padding)); }


        .page-content .sec2 .content ul .head { font-size:1.25rem; }
        .page-content .sec2 .content .box:not(.on) ul .head { position:relative; left:0; right:0; transform:translateY(0); }


        .page-content .sec3 .tiles { max-width:768px; margin:0 auto !important; }
        .page-content .sec3 .tiles .tile > .a { padding-bottom:110%; }

        .page-content .sec3 .a .content { top:50%; }
        .page-content .sec3 .a .head { font-size:1.25rem; color:#fff;}
        .page-content .sec3 .a .desc { margin-top:10px; color:#fff;}
        .page-content .sec3 .a .en { font-size:.875rem; }


        .page-content .sec4 li:nth-child(even) { padding:0 8% 30px; }
        .page-content .sec4 li .icon { width:80px; height:80px; background-size:50px; }
        .page-content .sec4 li .head { font-size:1.5rem; }
        .page-content .sec4 li .en { font-size:3rem; }


        .page-content .sec5 li:nth-child(even) { padding:0 8% 30px; }
        .page-content .sec5 li .head { font-size:1.5rem; }
        .page-content .sec5 li .subhead { font-size:1.125rem; }
        .page-content .sec5 li .en { top:-25px; font-size:3rem; }

        .page-content .sec6 ul { justify-content:center; flex-wrap:wrap; padding:50px; }
        .page-content .sec6 ul li { width:calc(27% + 20px); margin:5px -10px; }

        .page-content .sec7 .content { display:block; }
        .page-content .sec7 .content ul { width:100%; min-height:150px; }

        .page-content .sec7 .contact { margin-bottom:10px; }

        .page-content .sec8 .btn-box { margin-top:30px; }
        
	}

	@media (max-width: 767px) {
        .page-content .section .header { margin-bottom:30px; }
        .page-content .section .header .head { font-size:1.5rem; }
        .page-content .section .header .subhead { font-size:1rem; margin-bottom:15px; }

        .page-content .sec1 .txt i:first-of-type { margin-right:0; left:25px; right:auto; bottom:100%; }
        .page-content .sec1 .txt i:last-of-type { margin-left:0; left:auto; top:100%; right:25px; }
        .page-content .sec1 .content .txt { font-size:1.125rem; padding: 0 30px; }


        .page-content .sec3 .tiles { max-width:400px; }
        .page-content .sec3 .a .content { top:55%; }

        .page-content .sec4 ul { display:block; max-width:400px; margin:0 auto; }
        .page-content .sec4 li:nth-child(even) { padding:20px 15px 40px; }
        .page-content .sec4 li:last-child { padding-bottom:0; }

        .page-content .sec4 li .head { font-size:1.325rem; margin:15px 0; }
        .page-content .sec4 li .en { font-size:2rem; }

        .page-content .sec5 ul { display:block; max-width:400px; margin:0 auto; }
        .page-content .sec5 li:nth-child(even) { padding:20px 15px 40px; }
        .page-content .sec5 li:last-child { padding-bottom:0; }

        .page-content .sec5 li .head { font-size:1.325rem; }
        .page-content .sec5 li .subhead { margin:15px 0 10px; }
        .page-content .sec5 li .en { left:auto; top:10px; right:0; }

        .page-content .sec6 ul { padding:30px; border-radius:150px; }
        .page-content .sec6 ul li { width:calc(35% + 20px); }

        .page-content .sec7 .contact { flex-direction:column; padding:20px; --icon-size:30px; }
        .page-content .sec7 .contact li { padding-top:10px; padding-bottom:10px; }

        .page-content .sec7 .download a img { width:35px; margin-bottom:10px; }
        .tiles  .loaded{
            width: 100%!important;
        }

        .page-content .sec8 .btn-box .btn { padding:15px 25px; }

	}
	    .tiles {
        display: flex;
        flex-wrap: wrap;
    }
    .tiles.loaded {
        visibility: visible;
    }
    .ts-squareimg-full .content {
    position: absolute;
    left: 0;
    right: 0;
    width: auto;
    height: auto;
    }
    .tiles .tile > .a::before, .tiles .tile > .a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    transition: all .3s ease;
}
/*.btn-effect4 { --effect-speed:400ms; --effect-color:var(--main-color1, #333); }*/
/*.btn-effect4:before { content:""; position:absolute; left:0; top:0; bottom:0; width:100%; transform:scaleX(0); transform-origin:right center; transition:transform var(--effect-speed); background:var(--effect-color); z-index:-1; }*/
/*.btn-effect4:hover:before { transform:scaleX(1); transform-origin:left center; }*/