@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:135px auto 200px;}
.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 a,
.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 a,
.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*/
#customWrap {max-width:100%;}
#customWrap .sectionTab {max-width:1240px;margin: 0 auto;}
#customWrap .tabContent {}

#customWrap h4 {font-family: 'Noto Sans KR-Bold';font-size:24px;letter-spacing: -0.6px;line-height:1.5;color:#fff;}
#customWrap h5 {font-family:'GmarketSansMedium';font-size:18px;letter-spacing: 0.45px;line-height:1.5;color:#4e4e4e;}
#customWrap h3 {font-family:'Noto Sans KR-Bold';font-size:36px;letter-spacing: -0.9px;line-height:1.5;color:#fff;}
#customWrap p {font-family:'Noto Sans KR-Light';font-size:18px;letter-spacing: -0.45px;line-height:1.5;color:#ccc;word-break: keep-all;}

#tab01 .definitionArea {background:url(./img/custom_img01.jpg) no-repeat center / cover;}
#tab02 .definitionArea {background:url(./img/custom_img03.jpg) no-repeat center / cover;}

.definitionArea {display:flex;flex-flow:column;justify-content: center;max-width:1240px;height:400px;margin:0 auto;}
.definitionArea h5 {}
.definitionArea h3 {margin-top:10px;}
.definitionArea p {margin-top:30px;}

#tab01 .bgBanner {background:url(./img/custom_img02.jpg) no-repeat center / cover;}
#tab02 .bgBanner {background:url(./img/custom_img04.jpg) no-repeat center / cover;}
.bgBanner {position:relative;width:100%;height:384px;z-index: 10;}

.analysisArea {display:flex;align-items:flex-start;max-width:1240px;margin:60px auto 200px;}
.analysisArea .analysisTit {width:325px;}
.analysisArea .analysisProcess {width:calc(100% - 325px);}
.analysisArea .analysisProcess ul {display:flex;flex-wrap:wrap;align-items: flex-start;}
.analysisArea .analysisProcess ul li {width:calc(33.3333% - 40px);min-height:120px;padding:15px 0;border-top:1px solid #707070;margin-right:60px;}
.analysisArea .analysisProcess ul li:nth-of-type(3n) {margin-right:0;}
.analysisArea .analysisProcess ul li:last-of-type {margin-right:0;}
.analysisArea .analysisProcess ul li .num {display:inline-block;width:25px;margin-top:-5px;vertical-align: top;}
.analysisArea .analysisProcess ul li .title {display:inline-block;width:calc(100% - 28px);font-family:'Noto Sans KR-Bold';font-size:18px;letter-spacing: -0.45px;line-height:1.5;color:#fff;}
.analysisArea .analysisProcess ul li .detail {width:100%;font-size:16px;letter-spacing: -0.4px;line-height:1.5;text-indent: 25px;margin-top:10px;}

.analysisArea .analysisProcess .tip {display:flex;align-items:flex-start;justify-content:flex-end;margin-top:50px;}
.analysisArea .analysisProcess .tip strong {font-family:'Noto Sans KR-Bold';font-size:18px;line-height:1.5;color:#fff;margin-top:-5px;margin-right:10px;}
.analysisArea .analysisProcess .tip span {font-family:'Noto Sans KR-Light';font-size:14px;letter-spacing: -0.35px;line-height:1.5;color: #ccc;}


@media (max-width:1300px) {
    #customWrap .tabContent {padding:0;}

    #tab01 .definitionArea {background:transparent;}
    #tab02 .definitionArea {background:transparent;}

    .definitionArea {position:relative;height:auto;padding: 30px 20px 90px;}
    .definitionArea h5 {}
    .definitionArea h3 {}
    .definitionArea p {min-width:500px;width:73%;}
    .definitionArea .itemImg {position:absolute;right:0;bottom:0;width:25%;max-width:250px;}

    .bgBanner {}

    .analysisArea {flex-wrap:wrap;padding: 0 20px;margin: 110px auto 180px;}
    .analysisArea .analysisTit {width:100%;}
    .analysisArea .analysisProcess {width:100%;margin-top:30px;}

    .analysisArea .analysisProcess ul li {width:calc(50% - 15px);min-height:120px;margin-right:30px;}
    .analysisArea .analysisProcess ul li:nth-of-type(3n) {margin-right:30px;}
    .analysisArea .analysisProcess ul li:nth-of-type(2n) {margin-right:0;}

    .analysisArea .analysisProcess .tip {justify-content: flex-start;}

}
@media (max-width:768px) {
    #customWrap h4 {font-size:18px;letter-spacing: -0.45px;}
    #customWrap h5 {font-size:14px;letter-spacing: 0.35px;}
    #customWrap h3 {font-size:24px;letter-spacing: -0.6px;}
    #customWrap p {font-size:14px;letter-spacing: -0.35px;}

    .definitionArea {padding: 30px 20px 0;}
    .definitionArea h5 {}
    .definitionArea h3 {}
    .definitionArea p {min-width:1px;width:100%;margin-top:60px;}
    .definitionArea .itemImg {position:relative;left:50%;transform:translateX(-50%);width:55%;max-width:230px;margin-top:30px;}

    .analysisArea {margin:60px auto 130px;}
    .analysisArea .analysisProcess ul li {width:100%;min-height:90px;margin-right:0;}
    .analysisArea .analysisProcess ul li:nth-of-type(3n) {margin-right:0;}


    .analysisArea .analysisProcess ul li .title {font-size:14px;letter-spacing: -0.35px;}
    #customWrap .detail {font-size:12px;letter-spacing: -0.3px;}

    .analysisArea .analysisProcess .tip {margin-top:10px;}
    .analysisArea .analysisProcess .tip strong {font-size:14px;margin-top:-2px;}
    .analysisArea .analysisProcess .tip span {font-size:12px;letter-spacing: -0.3px;}

}


/*menu20*/
#fittingWrap {}
#fittingWrap .section {margin:50px auto;}
#fittingWrap .mainTitle {margin: 100px 0 50px;}
#fittingWrap .mainTitle h1 {font-family: 'Noto Sans KR-Bold';font-size:48px;letter-spacing: 1.2px;color:#fff;}
#fittingWrap .mainTitle p {font-family: 'Noto Sans KR-Light';font-size:24px;letter-spacing: -0.6px;line-height:1.5;color:#fff;margin-top:20px;}

.analysisChart {height:810px;display:flex;align-items: flex-start;}
.analysisChart .chartArea {}
.analysisChart .chartArea ol {}
.analysisChart .chartArea ol li {position:relative;display:inline-flex;flex-flow:column;justify-content:center;width:620px;height:250px;background:#101010;padding:0 33px;margin-bottom:30px;}
.analysisChart .chartArea ol li:before {content:'';position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);width:0;height:30px;border-right:1px dashed #fff;}
.analysisChart .chartArea ol li:after {content:'';position:absolute;left:50%;bottom:-37.5px;transform:translateX(-50%);width:15px;height:15px;background: #fff;border-radius:50%;z-index: 10;}
.analysisChart .chartArea ol li:last-of-type {margin-bottom:0;}
.analysisChart .chartArea ol li:last-of-type:before,
.analysisChart .chartArea ol li:last-of-type:after {display:none;}

.analysisChart .chartArea ol li .subject {font-family:'Noto Sans KR-Bold';font-size:24px;letter-spacing:0.6px;color:#fff;}
.analysisChart .chartArea ol li .content {font-size:18px;letter-spacing:0.45px;line-height:1.5;color:#ccc;word-break:keep-all;margin-top:20px;}

.analysisChart .imgArea {height:100%;padding-left:50px;}
.analysisChart .imgArea img {height:100%;}

@media (max-width:1300px) {
    #fittingWrap .section {margin:30px auto;}
    #fittingWrap .mainTitle {margin: 30px 0;}

    .analysisChart {flex-wrap:wrap;height:auto;}
    .analysisChart .chartArea {width:100%;}
    .analysisChart .chartArea ol li {width:100%;height:250px;background:#101010;padding:0 33px;margin-bottom:30px;}

    .analysisChart .imgArea {width:100%;padding-left:0;margin-top:50px;}
    .analysisChart .imgArea img {width:100%;height:auto;}
}
@media (max-width:768px) {
    #fittingWrap .mainTitle {margin: 50px 0 80px;}
    #fittingWrap .mainTitle h1 {font-size:24px;letter-spacing: 0.6px;}
    #fittingWrap .mainTitle p {font-size:14px;letter-spacing: 0;margin-top:10px;}

    .analysisChart .chartArea ol li {height:200px;padding:0 15px;}
    .analysisChart .chartArea ol li .subject {font-size:18px;letter-spacing:0.45px;}
    .analysisChart .chartArea ol li .content {font-size:14px;letter-spacing:0.35px;margin-top:15px;}

    .analysisChart .imgArea {width:calc(100% + 40px);margin:50px -20px 0;}
}


#fittingWrap .descriptionChart {margin:150px auto 200px;}
.descriptionChart .chartTit {font-family: "Noto Sans KR-Bold";font-size:24px;letter-spacing: -0.6px;line-height:1.5;color:#fff;padding-bottom:15px;border-bottom:2px solid #fff;}

.chart02 ul {padding:20px 0;border-bottom: 1px solid #707070;}
.chart02 ul li {display:flex;align-items: center;padding:10px 0;}
.chart02 ul li strong {width:95px;font-family:'Noto Sans KR-Bold';font-size:18px;letter-spacing: -0.45px;color:#fff;}
.chart02 ul li p {font-family:'Noto Sans KR-Light';font-size:18px;letter-spacing: -0.45px;color:#fff;}
.chart02 ul li p sub {font-family:'Noto Sans KR-Light';font-size:14px;letter-spacing: -0.35px;color:#CCCCCC;vertical-align: middle;margin-left:10px;}

.chart03 {margin-top:75px;}
.subTit {font-family: 'Noto Sans KR-Bold';font-size:18px;letter-spacing: -0.45px;color:#fff;margin:30px 0 15px;}
.contactList {}
.contactList li {display:flex;flex-wrap:wrap;align-items:flex-start;width:100%;margin-bottom:13px;border:1px solid #707070;}
.contactList li:last-of-type {margin-bottom:0;}
.contactList li div {display:flex;align-items:center;width:50%;min-height:80px;padding:30px;}
.contactList li div strong {width:165px;font-family:'Noto Sans KR-Bold';font-size:18px;letter-spacing:-0.45px;color:#fff;}
.contactList li div p {font-size:18px;color:#fff;}

.linkList {display:flex;align-items: flex-start;margin-top:20px;}
.linkList li {position:relative;width:calc(33.3333% - 12px);border:1px solid #fff;margin-right:18px;}
.linkList li:last-of-type {margin-right:0;}
.linkList li a {display:flex;align-items:center;width:100%;;min-height:80px;padding:0 40px;}
.linkList li a .linkIcon {width:26px;margin-right:20px;}
.linkList li a span {font-family: 'Noto Sans KR-Bold';font-size:18px;letter-spacing: -0.45px;color:#fff;}
.linkList li a .linkArrow {position:absolute;top:50%;transform: translateY(-50%);right:40px;width:20px;}

@media (max-width:1300px) {
    #fittingWrap .descriptionChart {margin: 100px auto 150px;}
    .linkList {position:relative;flex-wrap:wrap;padding-top:30px;margin-top:30px;}
    .linkList:before {content:'';position:absolute;top:0;left:0;width:100%;height:1px;background:#707070;}
    .linkList li {width:100%;margin-right:0;margin-bottom:15px;}
    .linkList li:last-of-type {margin-bottom:0;}
}
@media (max-width:768px) {
    #fittingWrap .descriptionChart {margin: 60px auto 100px;}

    .descriptionChart .chartTit {font-size:16px;letter-spacing: -0.4px;padding-bottom:17px;}

    .chart02 ul {padding:15px 0;}
    .chart02 ul li {padding:7px 0; align-items: flex-start;}
    .chart02 ul li strong {width:70px;font-size:14px;letter-spacing: -0.35px;}
    .chart02 ul li p {font-size:14px;letter-spacing: -0.35px;}
    .chart02 ul li p sub {display:block; margin: 5px 0 0;}

    .chart03 {margin-top:55px;}
    .subTit {font-size:14px;letter-spacing:-0.35px;margin:35px 0 15px;}

    .contactList li {flex-wrap:wrap;padding:15px 0;margin-bottom:10px;}
    .contactList li div {justify-content:space-between;width:100%;min-height:30px;padding:7px 20px;}
    .contactList li div strong {width:auto;font-size:14px;letter-spacing:-0.35px;}
    .contactList li div p {font-size:14px;}

    .linkList {padding-top:30px;margin-top:0;}
    .linkList:before {display:none;}
    .linkList li {margin-bottom:10px;}
    .linkList li a {min-height:60px;padding:0 20px;}
    .linkList li a .linkIcon {width:25px;}
    .linkList li a span {font-size:14px;letter-spacing: -0.35px;}
    .linkList li a .linkArrow {right:20px;}
}



/*menu30*/
/*.chart03 공통으로 쓰임*/
#lessonWrap {}
#lessonWrap .section {margin:50px auto 150px;}
#lessonWrap .mainTitle {margin: 100px 0 50px;}
#lessonWrap .mainTitle h1 {font-family: 'Noto Sans KR-Bold';font-size:48px;letter-spacing: 1.2px;color:#fff;}
#lessonWrap .mainTitle p {font-family: 'Noto Sans KR-Light';font-size:24px;letter-spacing: -0.6px;line-height:1.5;color:#fff;margin-top:20px;}

.lessonProcess {}
.lessonProcess .sectionTitle {font-family: 'Noto Sans KR-Bold';font-size:24px;line-height:1.5;color:#fff;}
.lessonProcess ul {display:flex;align-items: flex-start;flex-wrap:wrap;margin-top:80px;}
.lessonProcess ul li {width:calc(50% - 40px);margin-right:80px;margin-bottom:80px;}
.lessonProcess ul li:nth-of-type(2n) {margin-right:0;}
.lessonProcess ul li:last-of-type {margin-right:0;}
.lessonProcess ul li .imgBox {}
.lessonProcess ul li .imgBox img {width:100%;}
.lessonProcess ul li .textBox {margin-top:20px;}
.lessonProcess ul li .textBox h3 {font-family: 'Noto Sans KR-Bold';font-size:24px;color:#fff;}
.lessonProcess ul li .textBox p {font-size:18px;line-height:1.5;color:#ccc;word-break:keep-all;margin-top:20px;}


@media (max-width:1300px) {
    #lessonWrap {padding: 0 20px;}
    #lessonWrap .section {margin: 40px auto 150px;}
    #lessonWrap .mainTitle {margin: 50px 0 40px;}

    .lessonProcess ul {margin-top:30px;}
    .lessonProcess ul li {width:calc(50% - 10px);margin-right:20px;margin-bottom:60px;}

}
@media (max-width:768px) {
    #lessonWrap .section {margin: 30px auto 60px;}
    #lessonWrap .mainTitle {margin: 50px 0 30px;}
    #lessonWrap .mainTitle h1 {font-size:24px;letter-spacing:-0.6px;}

    .lessonProcess .sectionTitle {font-size:14px;margin-top:-20px;}
    .lessonProcess ul li {width:100%;margin-right:0;margin-bottom:50px;}

    .lessonProcess ul li .textBox {margin-top:18px;}
    .lessonProcess ul li .textBox h3 {font-size:18px;}
    .lessonProcess ul li .textBox p {font-size:14px;margin-top:12px;}

}