@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*/
#differentiatedWrap {}
#differentiatedWrap .section {margin:135px auto 200px;}
#differentiatedWrap .section .mainImg {display:flex;align-items: center;}
#differentiatedWrap .section .mainImg .imgBox {width:50%;}
#differentiatedWrap .section .mainImg .imgBox img {width:100%;}
#differentiatedWrap .section .mainImg .textBox {width:50%;padding-left: 50px;}
#differentiatedWrap .section .mainImg .textBox h1 {font-family: 'Noto Sans KR-Bold';font-size:48px;line-height:1.5;color:#fff;}
#differentiatedWrap .section .mainImg .textBox p {font-size:18px;line-height:1.5;color:#fff;word-break:keep-all;margin-top:30px;}

.imgList {margin-top:80px;}
.row03 {display:flex;align-items:flex-start;}
.row03 li {width:calc(33.3333% - 20px);margin-right:30px;}
.row03 li:last-of-type {margin-right:0;}
.row03 li img {width:100%;}

@media (max-width:1300px) {
    #differentiatedWrap .section {margin:60px auto 150px;}
    #differentiatedWrap .section .mainImg {flex-wrap:wrap;}
    #differentiatedWrap .section .mainImg .imgBox {width:100%;padding:0 20px;margin-top:40px;}
    #differentiatedWrap .section .mainImg .textBox {width:100%;padding:0 20px;}

    .imgList {padding: 0 20px;margin-top:50px;}
    .row03 {}
    .row03 li {width:calc(33.3333% - 8px);margin-right:12px;}

}
@media (max-width:768px) {
    #differentiatedWrap .section {margin:50px auto;}
    #differentiatedWrap .section:last-of-type {margin: 50px auto 100px;}

    #differentiatedWrap .section .mainImg .imgBox {padding:0;}
    #differentiatedWrap .section .mainImg .textBox {font-size:28px;}
    #differentiatedWrap .section .mainImg .textBox h1 {font-size:28px;}
    #differentiatedWrap .section .mainImg .textBox p {font-size:14px;margin-top:20px;}

    .imgList {overflow-x: scroll;padding-bottom:20px;margin-top:30px;}
    .imgList::-webkit-scrollbar {height:3px;}
    .imgList::-webkit-scrollbar-thumb {background:#aaa;border-radius:3px;}
    .row03 {width:768px;}

}