@charset "UTF-8";
/********************************************************
■ 사이트 초기 설정
********************************************************/
:root {
	/* 테마 전체 색상 */
    --main-color1:#f95095;
    --main-color1-1:#fcb2c8;
    --main-color2:#00a267;
    --main-color2-1:#91d1ad;
    --main-color3:#fbe59c;
    --main-bg1:#fcf7f7;
    --main-color1-rgb:249, 80, 149;
    --main-color2-rgb:0, 162, 103;
    --main-color3-rgb:44, 65, 162;
    --main-width:1120px;

	/* sns 색상 */
    --kakao-color:#ffe500;
    --instagram-color:linear-gradient(to bottom, #8452a1, #ea2d87, #ef4c3e, #efcb6b);
    --naver-color:#03c75a;
    --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;

    /* 메인&서브 좌우 패딩 */
    --section-gap:100px;
}

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

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

/* 내용 드래그했을때 선택 블록 */
::selection { background: var(--main-color1, #222); color: white; }
::-moz-selection { background: var(--main-color1, #222); color: white; }

/********************************************************
■ HTML 요소 초기화
********************************************************/
/* 초기화 */
* { margin:0; padding:0; box-sizing:border-box; }
html, body { font-family: "Pretendard Variable", sans-serif; font-weight:500; line-height:1.4; }
body { color: #222; transition: all 200ms; line-height: 1.5; overflow-x:hidden; width:100%; height:100%; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }

a, button { border:none; background:none; color:inherit; transition: all .2s; }
a:focus, button:focus { box-shadow: none !important; }
a, a:visited, a:active, a:hover { text-decoration: none; }
button { cursor: pointer; }

.c, .c-full { max-width: var(--main-width); margin:0 auto; }
.c { padding-left: var(--c-padding); padding-right: var(--c-padding); }

.hidden { position:absolute; width:0; height:0; opacity:0; visibility: hidden; }

/* 폼태그 */
.form-tag { border:1px solid #ddd; border-radius:2px; padding:10px; font-size:.875rem; width:100%; }
.form-tag:focus { outline: none; border: 1px solid #666; }

/* 셀렉박스 */
select::-ms-expand { display: none; }
select { -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
select { background:#fff url('../img/select-arrow.png') no-repeat calc(100% - 10px) center/10px auto !important; font-size:.875rem; padding-right:30px !important; border:1px solid #ddd; }

/* 체크&라디오 박스 & 파일첨부 */
input[type="radio"],
input[type="checkbox"] { vertical-align:middle; margin-top:-3px; width:13px; height:13px; margin-right:3px; }
input[type="file"] { display:inline-block; font-size:.875rem; }

label { margin-bottom:0; }

input[type=text]:focus,
input[type=password]:focus,
textarea:focus,
select:focus { outline:none !important; box-shadow:none !important; }


@media (max-width: 767px) {
    html, body { font-size:14px; }
}


/********************************************************
■ Layout : 레이아웃
********************************************************/
#header, #footer { padding:0 var(--section-gap); }


/********************************************************
■ Header : 상단 헤더
********************************************************/
#header { position:sticky; top:0; padding-top:20px; padding-bottom:20px; display:flex; justify-content: space-between; align-items: center; background:#fff; transition-duration: .2s; z-index:9; }
#header a { display:block; }

#header .logo { position: relative; width:120px; height:80px; z-index:99; transition-duration: .2s; }
#header .logo a { height:100%; background:url('../img/logo.png') no-repeat left center/contain; }

#header nav { display:flex; align-items: center; }
#header nav ul { display:flex; align-items: center; }

#header .top-menuBtn { display:none; }

#header .top-menu ul { font-size:1.25rem; }
#header .top-menu li { margin-right:70px; }
#header .top-menu li a { position:relative; }

#header .top-menu a::after { content:""; position:absolute; left:50%; top:100%; width:0; height:3px; background:linear-gradient(85deg, var(--main-color1), var(--main-color2)); transform: translateX(-50%); transition:width .3s; }
#header .top-menu li:hover a::after { width:100%; }

#header .links { position:relative; z-index:99; }
#header .links li { margin-left:5px; }
#header .links a { font-size:.875rem; border-radius: 99px; background:#101010; color:#f5f5f5; padding:5px 20px; text-align:center; }


.scrolled #header { padding-top:10px; padding-bottom:10px; box-shadow: 0 0 10px rgba(0,0,0,.1); }
.scrolled #header .logo { width:100px; height:60px; }


@media (max-width: 1200px) {
    #header .top-menu li { margin-right:50px; }
}


@media (max-width: 1024px) {
    #header { padding-top:10px; padding-bottom:10px; }
    #header .logo { width:100px; height:50px; }

    #header nav { flex-direction: row-reverse; }
    #header .top-menuBtn { position:relative; width:25px; height:16px; display:block; cursor: pointer; z-index:99; --line-color:#333; }
    #header .top-menuBtn:before,
    #header .top-menuBtn:after { content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%; transition-duration: .2s; }
    #header .top-menuBtn:before { height:2px; background:var(--line-color); }
    #header .top-menuBtn:after { height:100%; border-top:2px solid var(--line-color); border-bottom:2px solid var(--line-color); }

    #header .top-menu ul { position:fixed; right:0; top:0; bottom:0; width:100vw; background:#101010; display:block; color:#f8f8f8; padding:120px 30px 50px; font-size:2rem; transform: translateX(100%); opacity:0; }

    #header .top-menu li { margin:10px 0; }
    #header .top-menu li a { padding:10px 20px; display:inline-block; }

    .scrolled #header .logo { width:80px; height:40px; }


    .m-menu-on #header .logo a { background-image: url('../img/logo-footer.png'); }

    .m-menu-on #header .top-menuBtn { --line-color:#f8f8f8; }
    .m-menu-on #header .top-menuBtn:before { transform:translateY(-50%) rotate(45deg); }
    .m-menu-on #header .top-menuBtn:after { border:none; height:2px; background:var(--line-color); transform:translateY(-50%) rotate(-45deg); }
    .m-menu-on #header .top-menu ul { transform: translateX(0); opacity:1; }

    .m-menu-on #header .links a { background:#f8f8f8; color:#333; }


    #header .links { margin-right:20px; }
}



/********************************************************
■ Footer : 하단 푸터
********************************************************/
#footer { padding-top:30px; padding-bottom:30px; background: #101010; display: flex; align-items: flex-end; justify-content: space-between; color:#f8f8f8; }
#footer img { width:120px; }
#footer .footer-info { text-align: right; font-size:1rem; }
#footer .footer-info li{list-style: none;}
#footer h5 { font-size:1rem; }
#footer address { font-style: normal; font-size:.813rem; }
#footer address ul { display:flex; justify-content: flex-end; }
#footer address li:not(:last-child):after { content:"/"; margin:0 3px; }
#footer .copyright { font-size:.813rem; color:#7f7f7f; margin-top:30px; }


@media (max-width: 1024px) {
    #footer { align-items: flex-start; }
    #footer img { width:130px; }
    #footer .footer-info { margin-top:20px; }
    #footer .copyright { margin-top:20px; }
}

@media (max-width: 767px) {
    #footer { padding-top:20px; padding-bottom:20px; }
    #footer img { width:100px; }
}


/********************************************************
■ Sub : 서브
********************************************************/
/* 서브비주얼 미사용시 */
body.no_sub_visual #sub-top { display:none; }
body.no_sub_visual .pg-sub > .content-body { padding-top:var(--top-height); }

/* 서브 타이틀 */
.content-body header.header { margin-bottom:50px; text-align:center; }
.content-body header.header .subhead { margin-bottom:10px; }
.content-body header.header .head { margin-bottom: 10px; font-size:3rem; line-height:1.3; }


@media (max-width:768px) {
	.content-body header.header { margin-bottom:30px; }
    .content-body header.header .subhead { margin-bottom:5px; }
	.content-body header.header .head { margin-bottom:5px; font-size:2rem; }
}



/********************************************************
	■ 타일 스타일 공용
********************************************************/
.tiles { visibility: hidden; display:flex; flex-wrap:wrap; }

.tiles.loaded { visibility: visible; }

.tiles .tile { margin-bottom: 10px; text-align: center; visibility: hidden; }

.tiles .tile > .a { position: relative; display: block; width: 100%; height: 100%; padding: 0; z-index: 1; }

.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; }

.tiles .tile > .a > .a2, .tiles .tile > .a > .a3 { position: absolute; left: 0; right: 0; top: 0; bottom: 0; }

.tiles .tile > .a .a2::before, .tiles .tile > .a .a2::after, .tiles .tile > .a .a3::before, .tiles .tile > .a .a3::after { content: ""; position: absolute; transition-timing-function: linear; z-index: 3; }


.tiles .image { position: relative; display: block; overflow: hidden; }

.tiles .image::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; transition: all .3s ease; }

.tiles .more { display: none; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); -ms-transform: translateY(-50%); z-index: 2; }

.tiles .image .img { background-repeat: no-repeat; background-size: cover; background-position: center; transition: all .3s ease; }

.tiles .image.no-image .img { background-image: url(img/no-img.jpg) !important; }

.tiles .image .chk { position: absolute; left: 10px; top: 10px; z-index: 3; }

.tiles .content { height: 100%; text-align: left; }

.tiles .data { display: none; }

@media (max-width: 767px) {
    .tiles { margin: 0 -5px; }
    .tiles .tile { padding: 0 5px; }
}



/* 트랜지션 (애니메이션 속도) */
.tran-2 .tile > .a::after, .tran-2 .tile .image::after, .tran-2 .tile .image .img { transition: all .2s ease; }

.tran-3 .tile > .a::after, .tran-3 .tile .image::after, .tran-3 .tile .image .img { transition: all .3s ease; }

.tran-4 .tile > .a::after, .tran-4 .tile .image::after, .tran-4 .tile .image .img { transition: all .4s ease; }

.tran-5 .tile > .a::after, .tran-5 .tile .image::after, .tran-5 .tile .image .img { transition: all .5s ease; }

.tran-6 .tile > .a::after, .tran-6 .tile .image::after, .tran-6 .tile .image .img { transition: all .6s ease; }

.tran-7 .tile > .a::after, .tran-7 .tile .image::after, .tran-7 .tile .image .img { transition: all .7s ease; }

.tran-8 .tile > .a::after, .tran-8 .tile .image::after, .tran-8 .tile .image .img { transition: all .8s ease; }

.tran-9 .tile > .a::after, .tran-9 .tile .image::after, .tran-9 .tile .image .img { transition: all .9s ease; }

.tran-10 .tile > .a::after, .tran-10 .tile .image::after, .tran-10 .tile .image .img { transition: all 1.0s ease; }

.tran-12 .tile > .a::after, .tran-12 .tile .image::after, .tran-12 .tile .image .img { transition: all 1.2s ease; }

.tran-15 .tile > .a::after, .tran-15 .tile .image::after, .tran-15 .tile .image .img { transition: all 1.5s ease; }

.tran-20 .tile > .a::after, .tran-20 .tile .image::after, .tran-20 .tile .image .img { transition: all 2.0s ease; }

/********************************************************
	■ 왼쪽에 아이콘이미지 / 오른쪽에 head, desc
********************************************************/
.ts-lefticon1 { margin: 0 -10px; }

.ts-lefticon1 .tile { padding: 0 10px; }

.ts-lefticon1 .tile > .a { display: table; border: 1px solid #d2d2d2; height: 130px; padding: 0 15px 0 20px; }

.ts-lefticon1 .image { display: table-cell; width: 100px; }

.ts-lefticon1 .image .img { width: 100%; height: 100%; background-size: contain; }

.ts-lefticon1 .content { display: table-cell; padding-left: 30px; height: 100%; vertical-align: middle; }

.ts-lefticon1 .content .desc { margin-top: 10px; color: #666; font-weight: 300; }

@media (max-width: 1199px) {
	.ts-lefticon1 { margin: 0 -5px; }
	.ts-lefticon1 .tile { padding: 0 5px; }
	.ts-lefticon1 .content { padding-left: 10px; }
	.ts-lefticon1 .content .desc { display: none; }
}
@media (max-width: 1023px) {
	.ts-lefticon1 .tile > a { height: 90px; padding: 0 5px; }
	.ts-lefticon1 .image { width: 70px; }
}
@media (max-width: 767px) {
	.ts-lefticon1 .tile > a { height: 75px; }
	.ts-lefticon1 .image { height: 60px; }
}
/********************************************************
	■ 왼쪽에 이미지 / 오른쪽에 head, desc
********************************************************/
.ts-rectimg-left-1 { margin: 0 -10px; }

.ts-rectimg-left-1 .tile { position: relative; padding: 0 10px; }

.ts-rectimg-left-1 .tile > .a { position: relative; }

.ts-rectimg-left-1 .image { position: relative; width: 60%; }

.ts-rectimg-left-1 .image .img { width: 100%; height: 100%; }

.ts-rectimg-left-1 .content { position: absolute; z-index: 2; left: 60%; right: 0; top: 0; bottom: 0; height: auto; }

.ts-rectimg-left-1 .content .desc { margin-top: 10px; color: #666; font-weight: 300; }

@media (max-width: 1199px) {
	.ts-rectimg-left-1 { margin: 0 -5px; }
	.ts-rectimg-left-1 .tile { padding: 0 5px; }
}
/********************************************************
	■ 위에 정사각 이미지 / 아래에 head, desc
********************************************************/
.ts-squareimg-top-1 .tile { margin-bottom: 50px; }

.ts-squareimg-top-1 .image .img { position: relative; padding-bottom: 100%; }

/* 이미지 직사각 비율로 표현하려면 padding-bottom(%)을 재정의한다. */
.ts-squareimg-top-1 .content { margin-top: 20px; height: 100%; }

.ts-squareimg-top-1 .content .desc { margin-top: 10px; color: #666; font-weight: 300; }

@media (max-width: 767px) {
	.ts-squareimg-top-1 { margin: 0 -5px; }
	.ts-squareimg-top-1 .tile { padding: 0 5px; }
}
/********************************************************
	■ 아래에 정사각 이미지 / 아래에 head, desc
********************************************************/
.ts-squareimg-bottom-1 .image .img { position: relative; padding-bottom: 100%; }

.ts-squareimg-bottom-1 .content { margin-bottom: 20px; }
.ts-squareimg-bottom-1 .content .desc { margin-top: 10px; color: #666; font-weight: 300; }
/********************************************************
	■ 정사각 이미지 / 내부에 head, desc
********************************************************/
.ts-squareimg-full .tile { margin: 0; }

.ts-squareimg-full .tile > .a { position: relative; }

.ts-squareimg-full .image .img { position: relative; padding-bottom: 100%; }

.ts-squareimg-full .tile-h-2x .image .img { padding-bottom: 50%; }

.ts-squareimg-full .content { position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: auto; height: auto; }

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/********************************************************
	■ 롤오버효과 (Hover Effects)
********************************************************/
/* 일반적으로 타일(tile) 요소에 적용 */
/* 타일(tile) 요소가 아닌 경우에 적용하려면 hover-effect 클래스를 활용한다. */
/* hover-effect 클래스는 효과를 적용할 a 또는 .image 요소에 추가한다. */
a.hover-effect { position: relative; display: block; }

.image.hover-effect { position: relative; overflow: hidden; }

a.hover-effect::after, .image.hover-effect::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; transition: all .3s ease; }

/* 실제 효과 */
/* 다음의 롤오버효과 클래스는 효과를 적용할 a / .image / .img 의 상위 요소에 추가해야한다. */
/* ----- a 요소 - 테두리 내부 그림자 :: a-shadow-inset ----- */
.hover-a-shadow-inset .a::after { box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.2); opacity: 0; }

.hover-a-shadow-inset .a:hover::after { opacity: 1; }

/* ----- 이미지 - 테두리 내부 그림자 :: img-shadow-inset ----- */
.hover-img-shadow-inset .a .image::after { box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.2); opacity: 0; }

.hover-img-shadow-inset .a:hover .image::after { opacity: 1; }

/* ----- a 요소 - 테두리 7px :: a-border7 ----- */
.hover-a-border7 .a::after { border: 2px solid rgba(100, 100, 100, 0); }

.hover-a-border7 .a:hover::after { border-width: 7px; border-color: #646464; }

/* ----- 이미지 - 테두리 7px :: img-border7 ----- */
.hover-img-border7 .a .image::after { border: 2px solid rgba(100, 100, 100, 0); }

.hover-img-border7 .a:hover .image::after { border-width: 7px; border-color: #646464; }

/* ----- 이미지 - 배경마스크 알파 x% :: img-alphaXX ----- */
.hover-img-alpha30 .a:hover .image::after { background-color: rgba(0, 0, 0, 0.3) !important; }

.hover-img-alpha40 .a:hover .image::after { background-color: rgba(0, 0, 0, 0.4) !important; }

.hover-img-alpha50 .a:hover .image::after { background-color: rgba(0, 0, 0, 0.5) !important; }

.hover-img-alpha60 .a:hover .image::after { background-color: rgba(0, 0, 0, 0.6) !important; }

.hover-img-alpha70 .a:hover .image::after { background-color: rgba(0, 0, 0, 0.7) !important; }

.hover-img-alpha80 .a:hover .image::after { background-color: rgba(0, 0, 0, 0.8) !important; }

.hover-img-alpha90 .a:hover .image::after { background-color: rgba(0, 0, 0, 0.9) !important; }

.hover-img-alpha100 .a:hover .image::after { background-color: black !important; }

/* ----- 이미지 - 확대 x% :: img-zoomXXX ----- */
.hover-img-zoom110 .a:hover .img { transform: scale(1.1); }

.hover-img-zoom115 .a:hover .img { transform: scale(1.15); }

.hover-img-zoom120 .a:hover .img { transform: scale(1.2); }

.hover-img-zoom130 .a:hover .img { transform: scale(1.3); }

/* ----- a 요소 - more 클래스 객체 보이기 :: a-more ----- */
.hover-a-more .a:hover .more { display: block; }

.hover-a-more-flex .a:hover .more { display: flex; }

.hover-a-height1 .a::before { background: white; transition: all .8s; }

.hover-a-height1 .a::after { top: 100% !important; transition: all .8s; }

.hover-a-height1 .a:hover::before { top: -20px; bottom: -20px; }

.hover-a-height1 .a:hover::after { top: -20px !important; bottom: -20px; }

/* ----- a 요소 - a2, a3 클래스 테두리 2px 애니매이션1 :: a-border2-ani1 ----- */
.hover-a-border2-ani1 .a .a2::before, .hover-a-border2-ani1 .a .a2::after, .hover-a-border2-ani1 .a .a3::before, .hover-a-border2-ani1 .a .a3::after { transition-duration: 100ms; transition-delay: 0ms; opacity: 0; }

.hover-a-border2-ani1 .a:hover .a2::before, .hover-a-border2-ani1 .a:hover .a2::after, .hover-a-border2-ani1 .a:hover .a3::before, .hover-a-border2-ani1 .a:hover .a3::after { opacity: 1; }

.hover-a-border2-ani1 .a .a2::before { left: 0; right: 100%; top: 0; height: 2px; background: #333; }

.hover-a-border2-ani1 .a:hover .a2::before { right: 0; }

.hover-a-border2-ani1 .a .a2::after { right: 0; top: 0; bottom: 100%; width: 2px; background: #333; }

.hover-a-border2-ani1 .a:hover .a2::after { bottom: 0; transition-delay: 100ms; }

.hover-a-border2-ani1 .a .a3::before { left: 100%; right: 0; bottom: 0; height: 2px; background: #333; }

.hover-a-border2-ani1 .a:hover .a3::before { left: 0; transition-delay: 200ms; }

.hover-a-border2-ani1 .a .a3::after { left: 0; top: 100%; bottom: 0; width: 2px; background: #333; }

.hover-a-border2-ani1 .a:hover .a3::after { top: 0; transition-delay: 300ms; }

/* ----- a 요소 - 볼록 효과 - 위로 5px/10px 이동 및 적절한 그림자효과 :: a-top5shadow , a-top10shadow ----- */
.hover-a-top5shadow .a:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); transform: translateY(-5px) !important; }

.hover-a-top10shadow .a:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); transform: translateY(-10px) !important; }