@charset "utf-8";


.visual {height:300px;background-color:#010101;}
.visual .itm {height:100%;background:#010101 url('../img/main_visual01.jpg') no-repeat center center;background-size:auto 100%;}
.visual .itm > .wrapper {position:relative;height:100%;}
.visual .itm .slogan {position:absolute;left:0;top:50%;transform:translateY(-50%);color:#fff;}
.visual .itm .slogan:after {display:block;content:"";clear:both;}
.visual .itm .slogan > .dsc {line-height:18px;font-size:18px;font-weight:300;}
.visual .itm .slogan > .tit {line-height:42px;font-size:42px;margin-top:20px;letter-spacing:-0.05em;}
.visual .itm .slogan > .tit strong {font-weight:800;}
.visual .itm .slogan > .tit i {font-style:normal;}
.visual .itm .slogan > .tit span {display:inline-block;} 
.visual .itm .slogan > .btn {float:left;display:block;margin-top:50px;padding:0 20px;height:46px;line-height:46px;font-size:18px;font-weight:700;color:#fff;border:1px solid #fff;}
.visual .itm .slogan > .btn.more {padding-right:68px;background:url('../img/main_vis_bullet01.png') no-repeat right 20px center;}

.visual .itm .slogan > .dsc {opacity:0;transform:translateY(150%);transition:transform .5s ease, opacity .5s ease; transition-delay:.3s;}
.visual .itm .slogan > .tit {opacity:0;transform:translateY(150%);transition:transform .6s ease, opacity .6s ease; transition-delay:.6s;}
.visual .itm .slogan > .btn {opacity:0;transform:translateY(150%);transition:transform .5s ease, opacity .5s ease; transition-delay:.9s;}

.visual.on .itm .slogan > .dsc {opacity:1;transform:translateY(0);}
.visual.on .itm .slogan > .tit {opacity:1;transform:translateY(0);}
.visual.on .itm .slogan > .btn {opacity:1;transform:translateY(0);}

@media (max-width:1339px){
    .visual .itm .slogan > .dsc {line-height:16px;font-size:16px;}
    .visual .itm .slogan > .tit {line-height:40px;font-size:40px;}
    .visual .itm .slogan > .btn {height:42px;line-height:42px;font-size:16px;}
}
@media (max-width:1023px){
    .visual {height:auto;}
    .visual .itm {height:auto;}
    .visual .itm > .wrapper {position:relative;height:auto;}
    .visual .itm .slogan {padding:55px 0;position:relative;left:auto;top:auto;transform:none;}
    .visual .itm .slogan > .dsc {line-height:16px;font-size:16px;}
    .visual .itm .slogan > .tit {line-height:34px;font-size:34px;margin-top:15px;}
    .visual .itm .slogan > .btn {margin-top:40px;height:38px;line-height:38px;font-size:16px;}
    .visual .itm .slogan > .btn.more {padding-right:60px;background-size:auto 40%;}
}
@media (max-width:830px){
    .visual .itm .slogan {padding:45px 0;}
    .visual .itm .slogan > .dsc {line-height:15px;font-size:15px;}
    .visual .itm .slogan > .tit {line-height:30px;font-size:30px;margin-top:12px;}
    .visual .itm .slogan > .btn {margin-top:35px;height:34px;line-height:34px;font-size:15px;}
    .visual .itm .slogan > .btn.more {padding-right:55px;}
}
@media (max-width:638px){
    .visual .itm .slogan > .dsc {line-height:14px;font-size:14px;}
    .visual .itm .slogan > .tit {line-height:26px;font-size:26px;margin-top:10px;}
    .visual .itm .slogan > .btn {margin-top:25px;padding:0 10px;height:26px;line-height:26px;font-size:13px;}
    .visual .itm .slogan > .btn.more {padding-right:50px;}
}
@media (max-width:460px){
    .visual .itm {background-image:url('../img/main_visual01_m.png');}
    .visual .itm .slogan > .tit {line-height:30px;font-size:24px;}
}
@media (max-width:379px){
    .visual .itm .slogan > .dsc {line-height:13px;font-size:13px;}
    .visual .itm .slogan > .tit {line-height:24px;font-size:24px;}
    .visual .itm .slogan > .btn {height:24px;line-height:24px;font-size:12px;}
    .visual .itm .slogan > .btn.more {padding-right:40px;}
}


.sect {padding:60px 0;box-sizing:border-box;}
.sect.gray {background-color:#f9f9f9;}
.sect .head {line-height:28px;}
.sect .head:after {display:block;content:"";clear:both;}
.sect .head > h2 {float:left;font-size:28px;color:#181818;font-weight:800;letter-spacing:-0.05em;}
.sect .head > .more {float:right;display:block;width:28px;height:28px;font-size:0;background:url('../img/main_more01.png') no-repeat center center;background-size:auto 85%;}
.sect .cont {margin-top:40px;}

@media (max-width:1339px){
    .sect {padding:55px 0;}
    .sect .head {line-height:26px;}
    .sect .head > h2 {float:left;font-size:26px;}
    .sect .head > .more {width:26px;height:26px;}
    .sect .cont {margin-top:35px;}
}
@media (max-width:1023px){
    .sect {padding:50px 0;}
    .sect .head {line-height:24px;}
    .sect .head > h2 {float:left;font-size:24px;}
    .sect .head > .more {width:24px;height:24px;}
    .sect .cont {margin-top:30px;}
}
@media (max-width:830px){
    .sect {padding:45px 0;}
    .sect .head {line-height:22px;}
    .sect .head > h2 {float:left;font-size:22px;}
    .sect .head > .more {width:22px;height:22px;}
    .sect .cont {margin-top:25px;}
}
@media (max-width:638px){
    .sect {padding:40px 0;}
    .sect .head {line-height:20px;}
    .sect .head > h2 {float:left;font-size:20px;}
    .sect .head > .more {width:20px;height:20px;}
    .sect .cont {margin-top:25px;}
}
@media (max-width:379px){
    .sect {padding:35px 0;}
    .sect .head {line-height:18px;}
    .sect .head > h2 {float:left;font-size:18px;}
    .sect .head > .more {width:18px;height:18px;}
    .sect .cont {margin-top:20px;}
}


/**
 * 상품목록
 */
 
.goods-list {margin:-40px 0 0 -40px;width:calc(100% + 40px);word-break:keep-all;}
.goods-list:after {display:block;content:"";clear:both;}
.goods-list > .itm {float:left;display:block;margin:40px 0 0 40px;width:calc((100% - (40px * 3) - 0.1px)/3);padding:0 0 20px 0;border:1px solid #eee;background-color:#fff;box-sizing:border-box;transition:all .2s;}
.goods-list > .itm:hover {border:1px solid #ffa800;}
.goods-list > .itm > .pic {position:relative;background:no-repeat center center;background-size:cover;}
.goods-list > .itm > .pic:before {display:block;content:"";padding-bottom:75%;}
.goods-list > .itm > .pic > .badge {position:absolute;right:15px;top:15px;}
.goods-list > .itm > .pic > .badge:after {display:block;content:"";clear:both;}
.goods-list > .itm > .pic > .badge > span {float:left;display:block;margin-left:3px;padding:0 8px;line-height:29px;font-size:15px;font-weight:700;color:#fff;border-radius:5px;background-color:#ff0000;}
.goods-list > .itm > .pic > .badge > span:first-child {margin-left:0;}
.goods-list > .itm > .pic > .badge > span.t01 {background-color:#333333;}
.goods-list > .itm > .pic > .badge > span.t02 {background-color:#ff0000;}
.goods-list > .itm > .cnt {text-align:center;padding:0 20px;}
.goods-list > .itm > .cnt > .tit {height:52px;line-height:26px;font-size:21px;color:#181818;font-weight:700;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.goods-list > .itm > .cnt > .dsc {height:42px;line-height:21px;font-size:16px;color:#666;font-weight:400;margin-top:10px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.goods-list > .itm > .prc {margin-top:40px;text-align:center;white-space:nowrap;}
.goods-list > .itm > .prc > dl {display:inline-block;vertical-align:bottom;margin-left:15px;line-height:30px;font-size:21px;font-weight:700;color:#333;}
.goods-list > .itm > .prc > dl:first-child {margin-left:0;}
.goods-list > .itm > .prc > dl > dt {display:inline-block;vertical-align:bottom;padding:0 9px 0 7px;font-size:16px;color:#fff;border-radius:8px;background-color:#333;}
.goods-list > .itm > .prc > dl > dt.t01 {background-color:#333333;}
.goods-list > .itm > .prc > dl > dt.t02 {background-color:#ffa800;}
.goods-list > .itm > .prc > dl > dd {position:relative;display:inline-block;text-align:left;}
.goods-list > .itm > .prc > dl > dd > .dis {position:absolute;left:0;bottom:100%;display:block;width:100%;margin-top:5px;line-height:16px;font-size:16px;font-weight:700;color:#bbb;text-decoration:line-through;}

@media (max-width:1339px){
    .goods-list {margin:-20px 0 0 -20px;width:calc(100% + 20px);}
    .goods-list > .itm {margin:20px 0 0 20px;width:calc((100% - (20px * 3) - 0.1px)/3);}
    .goods-list > .itm > .pic > .badge {font-size:14px;}
    .goods-list > .itm > .cnt > .tit {height:48px;line-height:24px;font-size:19px;}
    .goods-list > .itm > .cnt > .dsc {height:38px;line-height:19px;font-size:14px;}
    .goods-list > .itm > .prc > dl {margin-left:10px;line-height:28px;font-size:19px;}
    .goods-list > .itm > .prc > dl > dt {font-size:14px;}
    .goods-list > .itm > .prc > dl > dd > .dis {line-height:14px;font-size:14px;}
}
@media (max-width:1023px){
    .goods-list {margin:-10px 0 0 -10px;width:calc(100% + 10px);}
    .goods-list > .itm {margin:10px 0 0 10px;width:calc((100% - (10px * 3) - 0.1px)/3);}
    .goods-list > .itm > .pic > .badge {font-size:13px;}
    .goods-list > .itm > .cnt > .tit {height:46px;line-height:23px;font-size:18px;}
    .goods-list > .itm > .cnt > .dsc {height:36px;line-height:18px;font-size:13px;}
    .goods-list > .itm > .prc > dl {line-height:27px;font-size:18px;}
    .goods-list > .itm > .prc > dl > dt {font-size:13px;}
    .goods-list > .itm > .prc > dl > dd > .dis {line-height:13px;font-size:13px;}
}
@media (max-width:930px){
    .goods-list > .itm {width:calc((100% - (10px * 2) - 0.1px)/2);}
}
@media (max-width:638px){
    .goods-list > .itm > .pic > .badge {font-size:12px;}
    .goods-list > .itm > .cnt > .tit {height:44px;line-height:22px;font-size:17px;}
    .goods-list > .itm > .cnt > .dsc {height:34px;line-height:17px;font-size:12px;}
    .goods-list > .itm > .prc {margin:30px auto 0;width:90%;}
    .goods-list > .itm > .prc > dl {display:table;margin:10px auto 0;width:100%;line-height:25px;font-size:16px;}
    .goods-list > .itm > .prc > dl:first-child {margin:0 auto 0;}
    .goods-list > .itm > .prc > dl > dt {display:table-cell;width:48px;text-align:center;font-size:12px;}
    .goods-list > .itm > .prc > dl > dd {display:table-cell;text-align:right;}
    .goods-list > .itm > .prc > dl > dd > .dis {left:5px;bottom:auto;top:50%;transform:translateY(-50%);margin:0;width:auto;line-height:12px;font-size:12px;}
}
@media (max-width:490px){
    .goods-list > .itm > .pic > .badge {font-size:11px;}
    .goods-list > .itm > .cnt > .tit {height:40px;line-height:20px;font-size:16px;}
    .goods-list > .itm > .cnt > .dsc {height:30px;line-height:15px;font-size:11px;}
    .goods-list > .itm > .prc > dl {display:table;margin:15px auto 0;line-height:22px;font-size:14px;}
    .goods-list > .itm > .prc > dl > dt {width:48px;font-size:11px;}
    .goods-list > .itm > .prc > dl > dd > .dis {left:auto;top:auto;right:0;bottom:100%;transform:none;}
}
@media (max-width:424px){
    .goods-list {margin:0;width:auto;}
    .goods-list > .itm {float:none;margin:10px 0 0;width:auto;}
    .goods-list > .itm > .cnt > .tit {height:auto;display:block;}
    .goods-list > .itm > .cnt > .dsc {height:auto;display:block;}
    .goods-list > .itm > .prc {width:auto;}
    .goods-list > .itm > .prc > dl {display:inline-block;margin:0 0 0 15px;width:auto;}
    .goods-list > .itm > .prc > dl > dt {display:inline-block;}
    .goods-list > .itm > .prc > dl > dd {display:inline-block;margin-left:5px;}
    .goods-list > .itm > .prc > dl > dd > .dis {left:0;top:auto;right:auto;bottom:100%;}
}
@media (max-width:339px){
    .goods-list > .itm > .prc {width:60%;}
    .goods-list > .itm > .prc > dl {display:table;margin:15px auto 0;width:100%;}
    .goods-list > .itm > .prc > dl > dt {display:table-cell;}
    .goods-list > .itm > .prc > dl > dd {display:table-cell;}
    .goods-list > .itm > .prc > dl > dd > .dis {left:auto;top:auto;right:0;bottom:100%;transform:none;}
}


.tail {background-color:#fff;}
.tail > .wrapper:after {display:block;content:"";clear:both;}
.tail .sect.board {float:left;width:calc(100% - 420px - 238px - 60px);margin-right:60px;} 
.tail .sect.customer {float:left;width:420px;}
.tail .sect.account {float:right;width:238px;}
.tail .sect.customer,
.tail .sect.account {position:relative;padding-left:60px;}
.tail .sect.customer:before,
.tail .sect.account:before {position:absolute;left:0;top:60px;width:1px;height:calc(100% - 60px);display:block;content:"";background-color:#f5f5f5;}


.board-list {line-height:16px;font-size:16px;font-weight:700;color:#555;}
.board-list > .itm {display:block;padding:20px 0;border-bottom:1px solid #ddd;}
.board-list > .itm:first-child {padding-top:0;}
.board-list > .itm:after {display:block;content:"";clear:both;}
.board-list > .itm:hover {color:#000;}
.board-list > .itm > * {display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.board-list > .itm > .sbj {float:left;width:calc(100% - 60px - 100px);}
.board-list > .itm > .pep {float:left;width:60px;text-align:right;}
.board-list > .itm > .dat {float:right;width:100px;text-align:right;}

.sect.customer > .cont > .tel {line-height:36px;font-size:32px;font-weight:800;color:#333;letter-spacing:-0.05em;}
.sect.customer > .cont > .tel > a {display:block;margin-top:10px;padding-left:45px;background:no-repeat left center;background-size:auto 100%;}
.sect.customer > .cont > .tel > a:first-child {margin-top:0;}
.sect.customer > .cont > .tel > a.t01 {background-image:url('../img/common_tel01_01.png');}
.sect.customer > .cont > .tel > a.t02 {background-image:url('../img/common_tel01_02.png');}
.sect.customer > .cont > .tel > a.t03 {background-image:url('../img/common_kakao05_pure.png');background-size:auto 95%;color:#381c1e;font-size:0.8em;}
.sect.customer > .cont > .job {margin-top:25px;}
.sect.customer > .cont > .job:after {display:block;content:"";clear:both;}
.sect.customer > .cont > .job > dl {position:relative;float:left;margin-left:20px;padding-left:60px;}
.sect.customer > .cont > .job > dl:first-child {margin-left:0;}
.sect.customer > .cont > .job > dl > dt {position:absolute;left:0;top:50%;transform:translateY(-50%);display:block;padding:0 10px;height:30px;line-height:30px;font-size:16px;font-weight:700;color:#fff;border-radius:10px;background-color:#333;}
.sect.customer > .cont > .job > dl > dt.t01 {background-color:#333;}
.sect.customer > .cont > .job > dl > dt.t02 {background-color:#ffa800;}
.sect.customer > .cont > .job > dl > dd {display:block;line-height:23px;font-size:18px;font-weight:700;color:#333;}

.sect.account > .cont > .account {line-height:17px;font-size:17px;font-weight:700;color:#333;}
.sect.account > .cont > .account > .pep {}
.sect.account > .cont > .account > .bank {margin-top:15px;}
.sect.account > .cont > .account > .bank > dt {padding-left:35px;line-height:28px;background:no-repeat left center;background-size:auto 100%;}
.sect.account > .cont > .account > .bank > dt.t01 {background-image:url('../img/common_bank01_ibk.png');}
.sect.account > .cont > .account > .bank > dt.t02 {background-image:url('../img/common_bank01_kakao.png');}
.sect.account > .cont > .account > .bank > dd {margin-top:8px;font-weight:800;}

@media (max-width:1339px){
    .tail .sect.board {float:left;width:calc(100% - 370px - 188px - 30px);margin-right:30px;} 
    .tail .sect.customer {float:left;width:370px;}
    .tail .sect.account {float:right;width:188px;}
    .tail .sect.customer,
    .tail .sect.account {position:relative;padding-left:30px;}
    .tail .sect.customer:before,
    .tail .sect.account:before {top:55px;height:calc(100% - 55px);}

    .board-list {line-height:15px;font-size:15px;}
    
    .sect.customer > .cont > .tel {line-height:34px;font-size:30px;}
    .sect.customer > .cont > .job > dl > dt {height:28px;line-height:28px;font-size:15px;}
    .sect.customer > .cont > .job > dl > dd {22px;font-size:17px;}
    
    .sect.account > .cont > .account {line-height:16px;font-size:16px;}
    .sect.account > .cont > .account > .bank {margin-top:13px;}
    .sect.account > .cont > .account > .bank > dt {padding-left:35px;line-height:26px;}
    .sect.account > .cont > .account > .bank > dd {margin-top:8px;}
}
@media (max-width:1023px){
    .tail .sect.board {width:100%;margin-right:0;}
    .tail .sect.customer {float:left;width:auto;padding-left:0;padding-top:0;margin-top:10px;}
    .tail .sect.account {float:right;width:auto;padding-left:0;padding-top:0;margin-top:10px;text-align:right;}
    .tail .sect.customer:before,
    .tail .sect.account:before {display:none;content:none;}
    
    .sect.account .head > h2 {float:right;}
    .sect.account > .cont > .account > .bank > dt {padding-left:0;padding-right:33px;background-position:right center;}

    .board-list {line-height:14px;font-size:14px;}
    
    .sect.customer > .cont > .tel {line-height:30px;font-size:26px;}
    .sect.customer > .cont > .job {margin-top:20px;}
    .sect.customer > .cont > .job > dl > dt {height:32px;line-height:32px;font-size:14px;}
    .sect.customer > .cont > .job > dl > dd {20px;font-size:16px;}
    
    .sect.account > .cont > .account {line-height:15px;font-size:15px;}
    .sect.account > .cont > .account > .bank {margin-top:13px;}
    .sect.account > .cont > .account > .bank > dt {line-height:24px;}
    .sect.account > .cont > .account > .bank > dd {margin-top:8px;}
}
@media (max-width:638px){

    .board-list {line-height:14px;font-size:14px;}
    .board-list > .itm {display:block;padding:15px 0;}
    .board-list > .itm > .sbj {width:calc(100% - 55px - 90px);}
    .board-list > .itm > .pep {width:55px;}
    .board-list > .itm > .dat {width:90px;}
    
    .sect.customer > .cont > .tel {line-height:26px;font-size:22px;}
    .sect.customer > .cont > .job {margin-top:20px;}
    .sect.customer > .cont > .job > dl {margin-left:30px;padding-left:57px;}
    .sect.customer > .cont > .job > dl > dt {height:28px;line-height:28px;font-size:13px;}
    .sect.customer > .cont > .job > dl > dd {18px;font-size:14px;}
    
    .sect.account > .cont > .account {line-height:14px;font-size:14px;}
    .sect.account > .cont > .account > .bank {margin-top:15px;}
    .sect.account > .cont > .account > .bank > dt {line-height:22px;}
    .sect.account > .cont > .account > .bank > dd {margin-top:10px;}
}
@media (max-width:470px){
    .tail .sect.board {float:none;}
    .tail .sect.customer {float:none;margin:0 0 0 -10px;padding:36px 10px;width:calc(100% + 20px);background-color:#f9f9f9;}
    .tail .sect.account {float:none;margin:0;padding-top:36px;text-align:left;}
    
    .sect.account .head > h2 {float:left;}
    .sect.account > .cont {margin-top:30px;}
    .sect.account > .cont > .account:after {display:block;content:"";clear:both;}
    .sect.account > .cont > .account > .pep {margin-bottom:20px;}
    .sect.account > .cont > .account > .bank {float:left;margin:0 30px 0 0;}
    .sect.account > .cont > .account > .bank:last-child {margin-right:0;}
    .sect.account > .cont > .account > .bank > dt {padding-left:33px;padding-right:0;background-position:left center;}

    .board-list {margin-top:30px;line-height:13px;font-size:13px;}
    .board-list > .itm {display:block;padding:12px 0;}
    .board-list > .itm > .sbj {width:calc(100% - 50px - 80px);}
    .board-list > .itm > .pep {width:50px;}
    .board-list > .itm > .dat {width:80px;}
    
    .sect.customer > .cont > .tel {line-height:24px;font-size:20px;}
    .sect.customer > .cont > .tel:after {display:block;content:"";clear:both;}
    .sect.customer > .cont > .tel > a,
    .sect.customer > .cont > .tel > a:first-child {float:left;display:block;margin:10px 20px 0 0;padding-left:30px;}
    .sect.customer > .cont > .tel > a:last-child {margin-right:0;}
    .sect.customer > .cont > .job {margin-top:20px;}
    .sect.customer > .cont > .job > dl {margin-left:30px;padding-left:53px;}
    .sect.customer > .cont > .job > dl > dt {height:26px;line-height:26px;font-size:12px;}
    .sect.customer > .cont > .job > dl > dd {16px;font-size:13px;}
}


/*================================================================================================
 * Tablet & Mobile 공용 : ~ 1023px
 *================================================================================================*/
@media (max-width:1023px) /* (max-width:1025px) */
{
}

/*================================================================================================
 * Tablet : 638px~1023px 해상도에서 해석하는 코드 
 *================================================================================================*/
@media (min-width:638px) and (max-width:1023px) /* (max-width:1025px) */
{   
}

/*================================================================================================
 * Mobile : 637px 이하 해상도에서 해석하는 코드
 *================================================================================================*/
@media(max-width:637px)
{
}

/*================================================================================================
 * Mobile : ~379px 해상도에서 해석하는 코드 (해상도 낮은 Mobile)
 *================================================================================================*/
@media (max-width:379px) /* (max-width:1025px) */
{
}