@charset "UTF-8";

/*서브페이지 상단 공통*/
#subTop {padding: 200px 0 70px;border-bottom:1px solid #707070;}
.subTitle {max-width:1240px;margin: 0 auto;display:flex;align-items: flex-end;justify-content: space-between;flex-wrap:wrap;}
.subTitle .titleBox {}
.subTitle .titleBox h3 {font-family: 'GmarketSansMedium'; font-size:20px;line-height:1.5;letter-spacing: 0.5px;color:#7E7E7E;}
.subTitle .titleBox h1 {font-family: 'Noto Sans KR-Bold'; font-size:60px;line-height:1.5;letter-spacing: -1.5px;color:#fff;margin-top:15px;}

.subTitle ul {display:flex;align-items: flex-end;}
.subTitle ul li {position:relative;padding: 0 50px;}
.subTitle ul li:after {content:'';position: absolute;right:-2px;bottom:-3px;width:1px;height:26px;background:#4E4E4E;}
.subTitle ul li:first-of-type {padding-left:0;}
.subTitle ul li:last-of-type {padding-right:0;}
.subTitle ul li:last-of-type:after {display:none;}
.subTitle ul li a {font-family:'Noto Sans KR-Bold';font-size:18px;letter-spacing: -0.45px;color:#7E7E7E;}
.subTitle ul li.active2nd a {color:#FFFFFF;}

@media (max-width:1300px) {
    #subTop {padding: 135px 20px 55px;}
    .subTitle .titleBox {width:100%;}
    .subTitle .titleBox h3 {font-size:18px;letter-spacing: 0.45px;}
    .subTitle .titleBox h1 {font-size:48px;letter-spacing: -1.2px;margin-top:0;}

    .subTitle ul {display:flex;align-items: flex-end;margin-top:50px;}
}

@media (max-width:768px) {
    #subTop {padding: 140px 20px 50px;}
    .subTitle .titleBox {width:100%;}
    .subTitle .titleBox h3 {font-size:14px;letter-spacing: 0.35px;}
    .subTitle .titleBox h1 {font-size:36px;letter-spacing: -0.9px;margin-top:15px;}

    .subTitle ul {display:flex;align-items: flex-end;margin-top:50px;}
    .subTitle ul li {padding: 0 10px;}
    .subTitle ul li:after {bottom:-2px;height: 20px;}
    .subTitle ul li a {font-size:14px;letter-spacing: -0.35px;}
}

/*서브페이지 본문 공통*/
#subWrap {background:#000;}
.subCon {}
.sectionWrap {max-width:1240px;margin: 0 auto;}
.sectionWrap .section {margin:100px auto 150px;}
.sectionWrap .bgArea {position:relative;width:100%;}
.sectionWrap .bgArea img {width:100%;}

.sectionWrap .outerBox {width:100%;height:445px;}
.sectionWrap .outerBox .innerBox {position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-flow:column;align-items: center;justify-content: center;}
.sectionWrap .outerBox .innerBox p {font-size:18px;line-height:1.6;color:#fff;word-break: keep-all;}
.sectionWrap .outerBox .innerBox h1 {font-family:'Noto Sans KR-Light';font-size:36px;line-height:1.5;color:#fff;word-break:keep-all;margin:20px 0;}
.sectionWrap .outerBox .innerBox h1 strong {font-family:'Noto Sans KR-Bold';}

.sectionWrap .textArea {display:flex;align-items:center;max-width:1080px;padding: 100px 0;margin: 0 auto;}
.sectionWrap .textArea h1 {font-family:'Noto Sans KR-Light';font-size:36px;line-height:1.5;letter-spacing: -0.9px;color:#ccc;}
.sectionWrap .textArea h1 strong {font-family:'Noto Sans KR-Bold';color:#fff;}
.sectionWrap .textArea p {font-size:18px;line-height:1.5;letter-spacing:-0.45px;color:#ccc;word-break:keep-all;}


.sectionWrap .textArea .textBox {}
.sectionWrap .textArea .textBox h1 {}
.sectionWrap .textArea .textBox h1 strong {}

/*서브페이지 탭 디자인*/
.sectionWrap .sectionTab {padding:75px 0 50px;}
.sectionWrap .sectionTab ul {display: flex;align-items: flex-end;}
.sectionWrap .sectionTab ul li {position:relative;margin-right:50px;cursor: pointer;}
.sectionWrap .sectionTab ul li:after {content:'';position:absolute;width:100%;height:0;left:0;bottom:-15px;background: #fff;}
.sectionWrap .sectionTab ul li:last-of-type {margin-right:0;}
.sectionWrap .sectionTab ul li span {font-family: 'Noto Sans KR-Bold'; font-size:36px;letter-spacing: -0.9px;color:#7E7E7E;}
.sectionWrap .sectionTab ul li.on span {color:#fff;}
.sectionWrap .sectionTab ul li.on:after {height:2px;}

.sectionWrap .tabContent {display:none;}
.sectionWrap .tabContent.on {display:block;}

@media (max-width:1300px) {
    .sectionWrap .textArea {flex-flow:column;}

    .sectionWrap .sectionTab {padding:53px 20px 52px;}

    .sectionWrap .tabContent {padding: 0 20px;}

}
@media (max-width:768px) {
    .sectionWrap .textArea h1 {font-size:28px;letter-spacing: 0;}
    .sectionWrap .textArea h1 strong {}
    .sectionWrap .textArea p {font-size:14px;letter-spacing:-0.35px;color:#ccc;word-break:keep-all;}

    .sectionWrap .bgArea .innerBox {padding:20px;}
    .sectionWrap .bgArea .innerBox p {font-size:14px;}
    .sectionWrap .bgArea .innerBox h1 {font-size:28px;}

    .sectionWrap .sectionTab {padding:65px 20px 40px;}
    .sectionWrap .sectionTab ul li {margin-right:30px;}
    .sectionWrap .sectionTab ul li span {font-size:20px;letter-spacing: -0.5px;}

}

/*menu10*/
#processWrap {}
#processWrap .section {}
#processWrap .section h1 {font-family:'Noto Sans KR-Bold';font-size:48px;letter-spacing: -1.2px;color:#fff;}
#processWrap .section p {font-size:18px;line-height:1.5;letter-spacing: -0.45px;color:#ccc;margin-top:30px;}

.imgList {margin-top:50px;}
.imgList ul {display:flex;align-items: flex-start;flex-wrap:wrap;}
.row04 {}
.row04 li {width:calc(25% - 30px);margin-bottom:55px;margin-right:40px;}
.row04 li:nth-of-type(4n) {margin-right:0;}
.row04 li:last-of-type {margin-right:0;}

.row04 li .imgBox {position: relative;}
.row04 li .imgBox img {width:100%;}
.row04 li .imgBox .process-arrow {position:absolute;top:50%;transform:translateY(-50%);right:-27px;width:12px;}
.row04 li .imgBox .stepNum {
    position:absolute;left:0;bottom:-15px;width:80px;height:30px;
    display:flex;align-items: center;justify-content: center;
    font-family:'GmarketSansMedium';font-size:13px;letter-spacing: -0.33px;color:#7e7e7e;
    background:#000;
}

.row04 li:nth-of-type(4n) .imgBox .process-arrow {display:none;}
.row04 li:last-of-type .imgBox .process-arrow {display:none;}

.row04 li .textBox {margin-top:25px;}
.row04 li .textBox h4 {font-size:20px;letter-spacing: -0.5px;color:#fff;word-break: keep-all;}
#processWrap .section .row04 li .textBox p {font-size:16px;letter-spacing: -0.4px;line-height:1.5;color:#ccc;word-break:keep-all;margin-top:10px;}

@media (max-width:1300px) {
    #processWrap .section {margin:90px auto 80px;padding:0 20px;}

    #processWrap .section h1,
    #processWrap .section p {display:none;}
    #processWrap .section .row04 li .textBox p {display:block;font-size:16px;letter-spacing: -0.4px;line-height:1.5;color:#ccc;word-break:keep-all;margin-top:10px;}

    .row04 {}
    .row04 li {width:calc(33.3333% - 22px);margin-bottom:50px;margin-right:33px;}
    .row04 li:nth-of-type(4n) {margin-right:33px;}
    .row04 li:nth-of-type(3n) {margin-right:0;}

    .row04 li .imgBox .process-arrow {right:-22px;width:11px;}
    .row04 li:nth-of-type(4n) .imgBox .process-arrow {display:block;}
    .row04 li:nth-of-type(3n) .imgBox .process-arrow {display:none;}
    .row04 li:last-of-type .imgBox .process-arrow {display:none;}
}
@media (max-width:768px) {
    #processWrap .section {margin:60px auto;}

    #processWrap .section .row04 li .textBox h4 {font-size:15px;letter-spacing: -0.38px;}
    #processWrap .section .row04 li .textBox p {font-size:14px;letter-spacing: -0.35px;margin-top:15px;}

    .row04 li {width:calc(50% - 17.5px);margin-bottom:40px;margin-right:35px;}
    .row04 li:nth-of-type(4n) {margin-right:35px;}
    .row04 li:nth-of-type(3n) {margin-right:35px;}
    .row04 li:nth-of-type(2n) {margin-right:0;}

    .row04 li .imgBox .stepNum {width:60px;font-size:12px;letter-spacing: -0.3px;}
    .row04 li .imgBox .process-arrow {right:-23px;width:9px;}
    .row04 li:nth-of-type(4n) .imgBox .process-arrow {display:block;}
    .row04 li:nth-of-type(3n) .imgBox .process-arrow {display:block;}
    .row04 li:nth-of-type(2n) .imgBox .process-arrow {display:none;}
}


/*menu10 - 지점*/
#store-slider {display:flex;align-items:flex-start;width:calc(100vw - ((100vw - 1280px) / 2));padding-bottom:50px;}
#store-slider .slick-list {}
#store-slider .slider-item {width:840px;margin-right:100px;}
#store-slider .slider-item:last-of-type {margin-right:0;}
#store-slider .slider-item .imgBox {position:relative;}
#store-slider .slider-item .imgBox img {width:100%;}
#store-slider .slider-item .imgBox:after {
    content:'';position:absolute;width:100%;height:50%;left:0;bottom:0;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,1+100 */
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}

#store-slider .slider-item .textBox {position:relative;padding: 0 35px;margin:-35px auto 0;z-index: 10;}
#store-slider .slider-item .textBox h2 {font-family:'Noto Sans KR-Bold';font-size:48px;color:#fff;}
#store-slider .slider-item .textBox ol {margin-top:30px;}
#store-slider .slider-item .textBox ol li {display:flex;align-items:flex-start;margin-right:0;margin-bottom:10px;}
#store-slider .slider-item .textBox ol li:last-of-type {margin-bottom:0;}
#store-slider .slider-item .textBox ol li strong {width:100px;font-family:'Noto Sans KR-Medium';font-size:20px;line-height:1.5;color:#fff;}
#store-slider .slider-item .textBox ol li span {font-family:'Noto Sans KR-Light';font-size:20px;line-height:1.5;color:#fff;word-break: keep-all;}
#store-slider .slider-item .textBox .mapLink {position:absolute;right:35px;top:30px;display:flex;align-items: center;}
#store-slider .slider-item .textBox .mapLink span {font-family:'Noto Sans KR-Bold';font-size:18px;color:#fff;}
#store-slider .slider-item .textBox .mapLink img {width:20px;margin-left:10px;}
#store-slider .slider-item .textBox .mapLink:after {content:'';position:absolute;left:0;bottom:-12.5px;width:100%;height:1px;background:#fff;}

@media (max-width:1300px) {
    .store-slider {padding-bottom:30px;}
    .store-slider .slider-item {width:600px;margin-right:30px;}
    .store-slider .slider-item .textBox {padding: 0 20px;}

    .storeList ul li .textBox .mapLink {right:20px;}
}
@media (max-width:768px) {
    #processWrap #storeWrap {padding:0 20px;margin: 60px 0 100px;}
    #store-slider {padding-bottom:20px;}

    #store-slider .slider-item {width:300px;margin-left:30px;margin-right:0;}

    #store-slider .slider-item .imgBox:after {bottom:-1px;}

    #store-slider .slider-item .textBox {padding: 0;margin:-17.5px auto 0;}
    #store-slider .slider-item .textBox h2 {font-size:24px;}
    #store-slider .slider-item .textBox ol {margin-top:20px;}
    #store-slider .slider-item .textBox ol li {margin-left:0;}
    #store-slider .slider-item .textBox ol li strong {width:70px;font-size:14px;}
    #store-slider .slider-item .textBox ol li span {font-size:14px;}
    #store-slider .slider-item .textBox .mapLink {right:0;top:7px;}
    #store-slider .slider-item .textBox .mapLink:after {bottom:-10px;}
    #store-slider .slider-item .textBox .mapLink span {font-size:12px;}
    #store-slider .slider-item .textBox .mapLink img {width:15px;}
    #store-slider .slider-item .textBox .mapLink:after {content:'';position:absolute;left:0;bottom:-12.5px;width:100%;height:1px;background:#fff;}
}