@charset "utf-8";


.main_content {padding: 10rem 0 6.85rem;}
.main_content .section {position: relative;}

/** section (1st) **/
.sec01 {height: 41rem; display: flex; flex-direction: column; justify-content: space-between;}
.sec01::after {content: ''; display: block; width: 83.9rem; height: 30.6rem; background: url(../images/main/section_bg.png) no-repeat center; position: absolute; top: 5rem; right: 25rem; z-index: 1;}

.sec01 .top {display: flex; width: 132rem; margin: 0 auto; position: relative;}
.sec01 .top h2 {font-size: 4.2rem; font-family: 'GmarketSans'; font-weight: 500; line-height: 5.6rem;}
.sec01 .top h2 strong {font-weight: 700;}
.sec01 .top h2 p {font-size: 1.8rem; color: #636363; font-family: 'pretendard';}

.sec01 .top .box_wrap {display: flex; position: absolute; right: 0; top: -3rem; gap: 1.2rem; z-index: 9;}
.sec01 .top .box_wrap .box {width: 30.4rem; height: 36rem; border-radius: 2.4rem; padding: 4.8rem 3.2rem; color: #fff; display: flex; flex-direction: column; justify-content: space-between; transition: all .4s linear; margin-top: 2.4rem;}
.sec01 .top .box_wrap .box h3 {font-size: 2.8rem;}
.sec01 .top .box_wrap .box h3 span {font-size: 1.6rem; font-weight: 400; display: block; color: rgba(255,255,255,.5);}
.sec01 .top .box_wrap .box ul {display: flex; flex-direction: column; gap: 1.2rem;}
.sec01 .top .box_wrap .box ul li {width: 100%; border-radius: 7rem; font-size: 1.8rem; font-weight: 700; line-height: 2.2rem; background: rgba(255,255,255,.2); color: #fff; transition: .4s;}
.sec01 .top .box_wrap .box ul li a {display: flex; width: 100%; height: 100%; padding: 2.4rem 3.5rem; align-items: center; justify-content: space-between;}


.sec01 .btm {background: #f2f2f2; padding: 7rem 0; margin-top: 4rem;}
.sec01 .btm .quick {display: flex; width: 132rem; margin: 0 auto; gap: 6.85rem;}
.sec01 .btm .quick li {font-size: 1.6rem; color: #636363;}
.sec01 .btm .quick li a {display: flex; width: 100%; height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; transition: .3s;}
.sec01 .btm .quick li a i {font-size: 3.2rem; color: #636363; width: 4.8rem; height: 4.8rem; line-height: 4.8rem; text-align: center; transition: .3s;}

/** section (2nd) **/
.sec02 {width: 132rem; margin: 7.2rem auto 0;}
.sec02 .tit_wrap {display: flex; align-items: center; justify-content: space-between; margin-bottom: 3.2rem;}
.sec02 .tit_wrap .l_box {display: flex; align-items: center; gap: 3.2rem;}
.sec02 .tit_wrap .l_box .tit {font-size: 2.8rem; display: flex; align-items: center; gap: .8rem;}
.sec02 .tit_wrap .l_box .tit::before {content: ''; display: block; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: .5rem solid #222;}

/* tab */
.sec02 .tit_wrap .l_box .tab.line > .tab_menu {border-bottom: 0; display: flex; gap: 1.6rem;}
.sec02 .tit_wrap .l_box .tab.line > .tab_menu li {position:relative;min-width:inherit; font-size: 1.8rem; color: rgba(0, 0, 0, .4);}
.sec02 .tit_wrap .l_box .tab.line > .tab_menu li.on {font-weight:700;}
.sec02 .tit_wrap .l_box .tab.line > .tab_menu li.on::before {content:'';position:absolute;bottom: -.2rem; width: 100%;height: .2rem;}
.sec02 .tit_wrap .l_box .tab.line > .tab_menu li a {padding: 0;}

.sec02 .tit_wrap .r_box .navi {display: flex; align-items: center; gap: .8rem;}
.sec02 .tit_wrap .r_box .navi .btn {position: inherit; margin-top: 0; min-width: 2.8rem; height: 2.8rem; border-radius: 50%; width: 2.8rem; padding: 0;}
.sec02 .tit_wrap .r_box .navi .btn::after {content: none;}
.sec02 .tit_wrap .r_box .navi .btn i {color: #636363 !important;}
.swiper-button-next:hover, 
.swiper-button-prev:hover {border-color: #222 !important;}

.sec02 .cont_wrap {min-height: 49.8rem;}

.sec02 .ntc_swiper .swiper-wrapper {display: grid !important; grid-template-rows: repeat(2, 1fr); grid-auto-flow: column;}
.sec02 .ntc_swiper .swiper-slide {height: 23.4rem !important; display: flex; justify-content: center; align-items: center; border: .1rem solid #ddd; border-radius: 1.2rem;}
.sec02 .ntc_swiper .swiper-slide:nth-child(even) {margin-top: 1.5rem !important;}
.sec02 .ntc_swiper .swiper-slide a {display: flex; width: 100%; height: 100%; padding: 3.2rem; flex-direction: column; justify-content: space-between;}
.sec02 .ntc_swiper .swiper-slide .class {font-size: 1.6rem; font-weight: 400; display: flex; align-items: center; width: 100%; gap: 1.2rem;}
.sec02 .ntc_swiper .swiper-slide .class .new {font-size: 1.4rem; font-weight: 700; background: #F57F20; color: #fff; border-radius: 50%; width: 2.4rem; height: 2.4rem; line-height: 2.4rem; text-align: center;}
.sec02 .ntc_swiper .swiper-slide .cnt {font-size: 2rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.sec02 .ntc_swiper .swiper-slide .btm {display: flex; align-items: center; justify-content: space-between; font-size: 1.8rem; font-weight: 400;}
.sec02 .ntc_swiper .swiper-slide .btm .rank i {margin-right: 1rem;}

/** section (3rd) **/
.sec03 {width: 132rem; margin: 6.2rem auto 0;}
.sec03 .consult {display: flex; gap: 2.5rem;}
.sec03 .consult li {width: 50%; border-radius: 1.2rem; height: 26rem; color: #fff;}
.sec03 .consult .intro {background: #D8CCC3 url(../images/main/intro_bg.png) no-repeat center;}
.sec03 .consult .employ {background: #636363 url(../images/main/consult_bg.png) no-repeat center;}
.sec03 .consult li a {display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; padding: 3.2rem 4.8rem;}
.sec03 .consult li a i {width: 8rem; height: 8rem; border-radius: 2rem; border: .1rem solid #fff; display: block; font-size: 3.2rem; text-align: center; line-height: 8rem;}
.sec03 .consult li a p {font-size: 1.4rem; line-height: 1.6rem;}
.sec03 .consult li a p strong {font-size: 2.8rem; display: block; margin-bottom: 2.2rem;}

.sec03 .banner {display: flex; align-items: center; justify-content: space-between; margin-top: 8rem;}
.sec03 .banner ul {display: flex; font-size: 1.6rem; font-weight: 400; color: #636363; text-align: center; gap: 6.4rem;}
.sec03 .banner ul li a {display: block; width: 100%; height: 100%;}
.sec03 .banner ul li a::before {content: ''; display: block; width: 12.1rem; height: 3.2rem; background: url(../images/common/header_logo.svg) no-repeat center; background-size: 100%; margin: 0 auto .8rem;}

/** 반응형 **/
@media (hover: hover) {
    .sec01 .top .box_wrap .box:hover {box-shadow: .2rem .6rem .9rem rgba(0, 0, 0, .3); margin-top: 0;}
    .sec01 .top .box_wrap .req li:hover {background: #fff;}
    .sec01 .top .box_wrap .sct li:hover{background: #fff;}

    .sec02 .ntc_swiper .swiper-slide:hover::after {content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 1.2rem; z-index: -1;}

    .sec03 .banner ul li a:hover {opacity: .7;}
}

@media (max-width: 1320px) {    
    .sec01::after {right: 1.6rem;}
    .sec01 .top {padding: 0 1.6rem; width: 100%;}
    .sec01 .top .box_wrap {right: 1.6rem;}
    .sec01 .btm .quick {width: 100%; padding-left: 1.6rem;}

    .sec02 {width: 100%;}
    .sec02 .tit_wrap {padding: 0 1.6rem;}
    .sec02 .cont_wrap {padding: 0 1.6rem;}

    .sec03 {width: 100%; padding: 0 1.6rem;}
}
@media (max-width: 1280px) {
    html {font-size: 75%;} /* 1rem = 12px */

    .main_content  {padding-top: 8rem;}
    .main_content .section {overflow: hidden;}
    /** section (1st) **/
    .sec01 {height: 100%;}
    .sec01::after {content: none;}

    .sec01 .top {width: 100%; display: block; padding: 0 1.6rem;}
    .sec01 .top h2 {font-size: 2.6rem; line-height: 4rem;}
    .sec01 .top h2 p {font-size: 1.5rem;}
    .sec01 .top .box_wrap {position: inherit; top: inherit; right: inherit; z-index: inherit; margin-top: 6rem; gap: .3rem;}
    .sec01 .top .box_wrap .box {width: 50%; height: 28rem; margin-top: 0; padding: 2.4rem 1.8rem; border-radius: 1.2rem;}
    .sec01 .top .box_wrap .box.sct {margin-top: 0;}
    .sec01 .top .box_wrap .box h3 {font-size: 2.2rem;}
    .sec01 .top .box_wrap .box h3 span {font-size: 1.2rem;}
    .sec01 .top .box_wrap .box ul {gap: .8rem;}
    .sec01 .top .box_wrap .box ul li {font-size: 1.4rem;}
    .sec01 .top .box_wrap .box ul li a {padding: 1.4rem 1.8rem;}

    .sec01 .btm {margin-top: -16.4rem; height: 32rem;}
    .sec01 .btm .quick {width: 100%; align-items: center; justify-content: center; margin: 12.5rem auto 0; gap: 2.5rem;}
    .sec01 .btm .quick li {min-width: 8.7rem;}



    /** section (2nd) **/
    .sec02 {width: 100%; margin-top: 3.6rem;}

    .sec02 .ntc_swiper .swiper-wrapper {display: flex !important; flex-direction: row; grid-template-rows: none; grid-auto-flow: unset;}
    .sec02 .ntc_swiper .swiper-slide {height: 19rem !important;}
    .sec02 .ntc_swiper .swiper-slide:nth-child(even) {margin-top: 0 !important;}
    .sec02 .ntc_swiper .swiper-slide a {padding: 3.2rem 2.4rem;}
    .sec02 .ntc_swiper .swiper-slide .class {font-size: 1.4rem; gap: .8rem;}
    .sec02 .ntc_swiper .swiper-slide .class .new {font-size: 1.3rem; width: 2.4rem; height: 2.4rem; line-height: 2.4rem;}
    .sec02 .ntc_swiper .swiper-slide .cnt {font-size: 1.8rem;}
    .sec02 .ntc_swiper .swiper-slide .btm {font-size: 1.4rem; margin-top: 1rem;}
    .sec02 .tit_wrap {padding: 0 1.6rem;}
    .sec02 .tit_wrap .l_box .tab {display: none;}
    .sec02 .cont_wrap {min-height: 100%; padding-left: 1.6rem; padding-right: 0;}

    /** section (3rd) **/
    .sec03 {width: 100%; padding: 0;}
    .sec03 .banner {justify-content: center; margin-top: 7.4rem;}
    .sec03 .banner img {display: none;}
    .sec03 .banner ul {font-size: 1.3rem;}
    .sec03 .consult li {height: 100%;}
    .sec03 .consult li a {padding: 3rem 3.6rem;}
    .sec03 .consult li a i {width: 5.6rem; height: 5.6rem; border-radius: 1.5rem; font-size: 2.4rem; line-height: 5.6rem; margin-bottom: 2rem;}
    .sec03 .consult li a p {font-size: 1.3rem;}
    .sec03 .consult li a p strong {font-size: 2.2rem;}

}


@media screen and (max-width: 768px) { 
    /* 모바일 버전 스타일 (태블릿 대비 모바일에서 달라지는 스타일) */
    html {font-size: 68.75%;} /* 1rem = 11px */

    .sec03 .consult {display: block;}    
    .sec03 .consult li {width: 100%; border-radius: 0; height: 22rem;}
    .sec03 .consult .intro,
    .sec03 .consult .employ {background-size: cover;}
}
@media screen and (max-width: 480px) { 
    /* 모바일 버전 스타일2 (모바일 작은 화면에서 달라지는 스타일) */
    html {font-size: 62.5%;} /* 1rem = 10px */
}