@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 {}
.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*/
#greetingWrap {display:flex;align-items:center;padding:35px 0 0;}
#greetingWrap .imgArea {width:35%;max-width:400px;padding: 0 20px;}
#greetingWrap .imgArea img {width:100%;}
#greetingWrap .textArea {display:block;width:65%;padding: 50px;}
#greetingWrap .textArea p {margin-top:36px;}

#greetingWrap .textArea .logo {width:75px;margin-top:75px;}

@media (max-width:1300px) {
    #greetingWrap {}
    #greetingWrap .imgArea {width:45%;}

    #greetingWrap .textArea {width:55%;padding: 0 20px;}
    #greetingWrap .textArea h1 {}
    #greetingWrap .textArea .logo {width:64px;margin-top:40px;}
}
@media (max-width:768px) {
    #greetingWrap {flex-flow:column;}
    #greetingWrap .imgArea {width:100%;max-width:250px;}

    #greetingWrap .textArea {width:100%;max-width:300px;padding: 0;margin: -65px auto 0;}
    #greetingWrap .textArea h1 {font-size:28px;}
    #greetingWrap .textArea p {font-size:14px;letter-spacing: -0.35px;margin-top:20px;}
    #greetingWrap .textArea .logo {width:40px;margin:36px 0 50px;}
}

/*menu20*/
#brandWrap {max-width:100%;}

#brandWrap .textArea p {margin-top:25px;}

#brandWrap .textArea .logoBox {}
#brandWrap .textArea .logoBox img {width:164px;margin-right:120px;}


#brandWrap .outerBox {background:url(./img/sub10_20_bg02.jpg) no-repeat center center / cover;}


@media (max-width:1300px) {
    #brandWrap .textArea .logoBox img {margin-right:0;}
    #brandWrap .textArea .textBox {margin-top:55px;}
    #brandWrap .textArea .textBox h1 {text-align: center;}
    #brandWrap .textArea .textBox p {text-align: center;}

}
@media (max-width:768px) {
    #brandWrap .textArea {padding:45px 20px 70px;}
    #brandWrap .textArea .textBox {margin-top:50px;}
    #brandWrap .textArea .textBox p {margin-top:40px;}

    #brandWrap .textArea .logoBox img {width:101px;}
}


/*menu30*/
#directionsWrap {}
#mapImg {width:100%;height:650px;}
#mapImg .mapMarker {width:100%;min-width:150px;text-align:center;padding:7px 0 10px;}
#mapImg .mapMarker span {font-size:16px;}

.directionsInfo {padding:20px 0 235px;}
.directionsInfo ul {display:flex;flex-wrap:wrap;align-items:flex-start;justify-content: space-between;}
.directionsInfo ul li {display:inline-flex;align-items:center;width:100%;min-height:90px;border:1px solid #707070;padding:23.5px 0;margin-bottom:10px;}
.directionsInfo ul .half {width:calc(50% - 5px);}
.directionsInfo ul li span {height:100%;font-size:18px;letter-spacing: -0.45px;line-height:1.5;color:#fff;}
.directionsInfo ul li .tit {font-family:'Noto Sans KR-Bold';width:150px;padding-left:27px;}
.directionsInfo ul li .value {position:relative;width:calc(100% - 150px);padding-left:40px;}
.directionsInfo ul li .value:after {content:'';position:absolute;top:0;left:0;width:1px;height:100%;background: #7E7E7E;}

.directionsInfo ul li .value {}
.directionsInfo ul li .value .transportation {}
.directionsInfo ul li .value .transportation li {min-height:1px;display:flex;flex-wrap:wrap;align-items:center;border:0;padding:0;margin-bottom:25.5px;}
.directionsInfo ul li .value .transportation li:last-of-type {margin-bottom:0;}
.directionsInfo ul li .value .transportation li img {width:20px;margin-right:10px;}
.directionsInfo ul li .value .transportation li strong {font-size:inherit;font-weight:400;letter-spacing:inherit;color:inherit;margin-right:6px;}
.directionsInfo ul li .value .transportation li p {font-size:16px;letter-spacing: -0.4px;color:#ccc;}

@media (max-width:1300px) {
    #mapImg {width:calc(100% - 40px);height:380px;margin: 0 auto;}

    .directionsInfo {padding:30px 0 150px;}
    .directionsInfo ul .half {width:100%;}

}
@media (max-width:768px) {
    #mapImg {height:175px;}

    .directionsInfo {padding:30px 0 100px;}
    .directionsInfo ul li {min-height:70px;}
    .directionsInfo ul li span {font-size:14px;letter-spacing: -0.35px;}
    .directionsInfo ul li .tit {width:100px;padding-left:20px;}
    .directionsInfo ul li .value {width:calc(100% - 100px);padding-left:20px;}

    .directionsInfo ul li .value .transportation li strong {margin-right:0;}
    .directionsInfo ul li .value .transportation li p {width:100%;font-size:14px;letter-spacing: -0.35px;margin-top:12px;}

}