@charset "utf-8";

/* 메인 비주얼 */
.mvArea{width: 100%; height: 100%; position: relative; overflow: hidden;}
.mvArea .mv_controller{top: 50%; left: 0; padding: 0 2rem; width: 100%; position: absolute; z-index: 1; transform: translateY(-50%);}
.mvArea .mv_controller .mv_controller_inner{width:100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;}
.mvArea .mv_controller .mv_controller_inner > div{width: 7.6rem; height: 7.6rem; border: 1px solid rgba(255,255,255,0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.3s;}
.mvArea .mv_controller .mv_controller_inner > div + div{margin-left: 1.2rem;}
.mvArea .mv_controller .mv_controller_inner > div:hover{background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0);}
.mvArea .mv_controller .mv_controller_inner > div i{font-size: 3.6rem; color: var(--white); transition: 0.3s;}
.mv_list{width:100%; height:100%; position: relative;}
.mv_list .slick-list,
.mv_list .slick-track{width:100%; height:100%; position: relative;}
.mv_items{width: 100%; height: 90vh; min-height: 700px; position: relative; overflow: hidden;}
.mv_items .mv_bg{width: 100%; height: 100%; position: relative; overflow: hidden;}
.mv_items .mv_bg img,
.mv_items .mv_bg iframe{top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; width: 1920px; height: 1080px; position: absolute; border: 0; z-index: 0;}
.mv_items .mv_bg iframe{min-width: 150%; min-height: 150%;}
.mv_items .dim{top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); position: absolute; z-index: 1; transition: background 1s ease-in-out;}
.mv_items .mv_infoArea{padding: 2rem; z-index: 2; top:50%; left: 0; width: 100%; position: absolute; transform: translateY(-50%);}
.mv_items .mv_infoArea .mv_info{width: 1430px; margin: 0 auto; text-align: center;}
.mv_items .mv_infoArea .mv_info .mv_tit{font-size: 5.4rem; line-height: 1.1; font-weight: var(--font-weight900); color: var(--white); transform: translateY(5rem); opacity: 0; transition: all 1s;}
.mv_items .mv_infoArea .mv_info .mv_desc{margin-top:2.4rem; font-size: 1.9rem; line-height: 1.5; font-weight: var(--font-weight300); color: rgba(255,255,255,0.7); transform: translateY(5rem); opacity: 0; transition: all 1s;}

.mv_items.on .dim{background: rgba(0,0,0,0.3);}
.mv_items.on .mv_infoArea .mv_info .mv_tit{opacity: 1; transform: translateY(0); transition-delay: 0.5s;}
.mv_items.on .mv_infoArea .mv_info .mv_desc{opacity: 1; transform: translateY(0); transition-delay: 0.8s;}
/* 메인 비주얼 */


/* 메인 네비 영역 */
#mainNav{margin: -4rem auto 0; max-width: 143rem; width: 100%; position: relative;}
#mainNav ul{width: 100%; display: flex; flex-wrap: wrap; background: var(--black); overflow: hidden;}
#mainNav ul li{width: 25%; border-right: 1px solid var(--color-4e4e4e);}
#mainNav ul li:last-of-type{border-right: 0;}
#mainNav ul li a{height: 8rem; width: 100%; display: flex; align-items: center; background-color: transparent; transition: all 0.5s;}
#mainNav ul li a i{padding: 0 20px; font-style: normal; display: block;}
#mainNav ul li a i img{width: 22px; display: block; object-fit: cover; opacity: 0.6; transition: opacity 0.5s;}
#mainNav ul li a span{font-size: 1.8rem; line-height:1.4; font-weight: var(--font-weight400); color: var(--color-aaaaaa); display: block; transition: color 0.5s;}
#mainNav ul li:hover a{background: var(--color-c53428); color: var(--white);}
#mainNav ul li:hover a i img{opacity: 1;}
#mainNav ul li:hover a span{color: var(--white);}
/* 메인 네비 영역 */

/* 메인 네비2 영역 */
#mainNav2{margin: 0 auto; padding: 6rem 0 5rem; max-width: 143rem; width: 100%; position: relative;}
#mainNav2 ul{width: 100%; display: flex; flex-wrap: wrap; border: 1px solid var(--color-dddddd); overflow: hidden;}
#mainNav2 ul li{width: 25%; border-right: 1px solid var(--color-dddddd);}
#mainNav2 ul li:last-of-type{border-right: 0;}
#mainNav2 ul li a{padding: 1rem; height: 26rem; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;}
#mainNav2 ul li a i{width: 4.2rem; height: 3.8rem; font-style: normal; display: block; position: relative;}
#mainNav2 ul li a i img{width: auto; height: auto; max-width: 100%; max-height: 100%; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: opacity 0.5s;}
#mainNav2 ul li a i img.on{opacity: 0;}
#mainNav2 ul li a .tit{padding-top: 2rem; font-size: 2.2rem; line-height: 1.4; font-weight: var(--font-weight400); color: var(--black200); display: block; word-break: keep-all;}
#mainNav2 ul li a .desc{padding-top: 1rem; font-size: 1.5rem; line-height: 1.4; font-weight: var(--font-weight400); color: var(--black700); display: block; word-break: keep-all;}
#mainNav2 ul li a .arrow{margin-top: 2rem; width: 3rem; height: 3rem; border: 1px solid var(--color-dddddd); background: url(/theme/template/img/main/icon_plus.svg) center center no-repeat; background-size: 1.5rem 1.5rem; transition: background 0.5s, border 0.5s;}
#mainNav2 ul li:hover a i img.off{opacity: 0;}
#mainNav2 ul li:hover a i img.on{opacity: 1;}
#mainNav2 ul li:hover a .arrow{background: url(/theme/template/img/main/icon_plus_on.svg) center center no-repeat; background-size: 1.5rem 1.5rem; border: 1px solid var(--color-c53428);}
/* 메인 네비2 영역 */

/* 메인 ABOUT US */
#mainAbout{padding: 2rem 0; position: relative; overflow: hidden;}
#mainAbout .ma_inner{display: flex; flex-wrap: wrap; align-items: stretch;}
#mainAbout .ma_inner .img{width: 50%;}
#mainAbout .ma_inner .img img{width: 100%; height: 100%; max-width: 100%; object-fit: cover; display: block;}
#mainAbout .ma_inner .text{padding: 5rem; width: 50%; background-color: var(--color-f7f7f7); display: flex;}
#mainAbout .ma_inner .text_con{align-self: center;}
#mainAbout .ma_inner .text_con h2{font-size: 4.5rem; line-height: 1.4; font-weight: var(--font-weight700); color: var(--color-333333);}
#mainAbout .ma_inner .text_con > p{font-size: 2.7rem; line-height: 1.4; font-weight: var(--font-weight400); color: var(--color-333333);}
#mainAbout .ma_inner .text_con span{padding: 2.5rem 0; font-size: 1.5rem; line-height: 1.4; font-weight: var(--font-weight400); color: var(--color-333333); display: block; word-break: keep-all;}
#mainAbout .ma_inner .text_con span *{font-size: inherit; font-weight: inherit; color: inherit; word-break: keep-all;}
#mainAbout .ma_inner .text_con a{height: 5rem; font-size: 1.5rem; line-height: 1.4; font-weight: var(--font-weight400); color: var(--white); display: flex; align-items: center; justify-content: center; max-width: 18rem; width: 100%; background-color: var(--black200); transition: background-color 0.5s;}
#mainAbout .ma_inner .text_con a:hover{background-color: var(--color-c53428);}
/* 메인 ABOUT US */

/* 메인 갤러리 */
#mainGallery{margin: 10rem auto 0; max-width: 143rem; width: 100%; position: relative; overflow: hidden;}
#mainGallery .mg_list{width: 100%; position: relative; overflow: hidden;}
#mainGallery .mg_list .mg_items{width: 25% !important; max-width: 33.8rem; margin-right: 2rem;}
#mainGallery .mg_list .mg_items a{width: 100%; display: block; overflow: hidden; background: var(--color-f7f7f7);}
#mainGallery .mg_list .mg_items a .img{width: 100%; height: 26rem; position: relative; overflow: hidden; display: block;}
#mainGallery .mg_list .mg_items a .img img{width: auto; height: auto; object-fit: cover; position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); display: block; transition: all 0.5s ease; transform-origin: center center;}
#mainGallery .mg_list .mg_items a .title{padding: 2.5rem 2rem 0; font-size: 1.8rem; line-height: 1.4; font-weight: var(--font-weight400); color: var(--black); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
#mainGallery .mg_list .mg_items a .desc{height: 4.2rem; margin-top: 1rem; padding: 0 2rem; font-size: 1.5rem; line-height: 1.4; font-weight: var(--font-weight400); color: var(--black500); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-word;}
#mainGallery .mg_list .mg_items a .date{margin-top: 2rem; padding: 0 2rem 2.5rem; font-size: 1.5rem; line-height: 1.4; font-weight: var(--font-weight400); color: var(--black700); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
#mainGallery .mg_list .mg_items a:hover .img img{transform: translate(-50%, -50%) scale(1.2);}
#mainGallery .mg_controller{margin-top: 2rem; padding-bottom: 5rem; width: 100%; max-width: 141rem;}
#mainGallery .mg_controller .mg_controller_inner{display: flex; justify-content: space-between; align-items: center; width: 100%;}
#mainGallery .mg_controller .mg_controller_inner .mg_prev,
#mainGallery .mg_controller .mg_controller_inner .mg_next{width: 4rem; height: 4rem; background: var(--color-333333); display: flex; justify-content: center; align-items: center; cursor: pointer; transition: background-color 0.5s;}
#mainGallery .mg_controller .mg_controller_inner .mg_prev i,
#mainGallery .mg_controller .mg_controller_inner .mg_next i{font-size: 2rem; color: var(--white);}
#mainGallery .mg_controller .mg_controller_inner .mg_prev:hover,
#mainGallery .mg_controller .mg_controller_inner .mg_next:hover{background: var(--color-c53428);}
#mainGallery .progress-container{width: 15rem; bottom:6.85rem; height: 3px; background: rgba(0,0,0,0.1); left: 50%; transform: translateX(-50%); position: absolute; border-radius: 3px; overflow: hidden;}
#mainGallery .progress-container .progress-bar{height: 100%; background: rgba(0,0,0,0.5); transition: width 0.3s ease-in-out;}
/* 메인 갤러리 */

/* 메인 포트폴리오 */
#mainPortfolio{padding: 5rem 0 10rem; max-width: 143rem; width: 100%; margin: 0 auto; position: relative;}
#mainPortfolio h2{font-size: 3rem; line-height: 1.4; font-weight: var(--font-weight700); color: var(--black); text-align: center; text-transform: uppercase;}
#mainPortfolio .sub_tit{padding: 1rem 0 2rem; font-size: 1.8rem; line-height: 1.4; font-weight: var(--font-weight400); color: var(--black700); text-align: center; word-break: keep-all;}
#mainPortfolio .mp_area{margin-top: 5rem;}
#mainPortfolio .mp_tab{display: flex; justify-content: space-around; align-items: stretch; border: 1px solid var(--color-dddddd);}
#mainPortfolio .mp_tab a{height:5.8rem; font-size: 1.5rem; line-height: 1.4; font-weight: var(--font-weight400); color: var(--black300); width: 100%; flex-grow: 1; display: flex; align-items: center; justify-content: center; transition: all 0.5s; border-right: 1px solid var(--color-dddddd);}
#mainPortfolio .mp_tab a.active{background: var(--black); color: var(--white); border-right: 1px solid var(--black);}
#mainPortfolio .mp_tab a:last-of-type{border-right: 0;}
#mainPortfolio .mp_tab a:last-of-type.active{border-right: 0;}
#mainPortfolio .mp_container{margin-top: 4rem;}
#mainPortfolio .mp_container .mp_inner .mp_list{display: flex; align-items: stretch; justify-content: space-around;}
#mainPortfolio .mp_container .mp_inner .mp_list .mp_items{width: 25%; padding: 0 1.4rem;}
#mainPortfolio .mp_container .mp_inner .mp_list .mp_items a{padding-bottom: 3rem; width: 100%; display: block; border: 1px solid var(--color-dddddd);}
#mainPortfolio .mp_container .mp_inner .mp_list .mp_items a .img{height: 23rem; width: 100%; position: relative; overflow: hidden; display: block;}
#mainPortfolio .mp_container .mp_inner .mp_list .mp_items a .img img{width: auto; height: auto; max-width: 150%; max-height: 150%; min-width: 100%; min-height: 100%; display: block; position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%);}
#mainPortfolio .mp_container .mp_inner .mp_list .mp_items a .tit{margin-top: 2rem; padding: 0 1.6rem; font-size: 2rem; line-height: 1.4; font-weight: var(--font-weight500); color: var(--black300); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
#mainPortfolio .mp_container .mp_inner .mp_list .mp_items a .desc{height: 4.2rem; margin-top: 1rem; padding: 0 1.6rem; font-size: 1.5rem; line-height: 1.4; font-weight: var(--font-weight400); color: var(--black700); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-word;}
#mainPortfolio .mp_container .mp_inner .mp_list .mp_items a:hover{transform: translateY(-1rem); box-shadow: 0 3px 10px 6px rgba(0,0,0,0.3); transition: all 0.5s;}
/* 메인 포트폴리오 */

/* 메인 문의하기 */
#mainInquiry{position: relative; overflow: hidden;}
#mainInquiry:before{width: 100%; height: 100%; background: rgba(0,0,0,0.3); content: ""; z-index: 0; top: 0; left: 0; position: absolute}
#mainInquiry .mi_inner{height: 40rem; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; background-position: 50% 50%; background-repeat: no-repeat; background-attachment: fixed; background-size: cover;}
#mainInquiry .mi_inner .tit{font-size: 3rem; line-height: 1.4; font-weight: var(--font-weight700); color: var(--white);}
#mainInquiry .mi_inner div{margin: 1.5rem 0; font-size: 1.8rem; line-height: 1.4; font-weight: var(--font-weight400); color: var(--white); word-break: keep-all; text-align: center;}
#mainInquiry .mi_inner div *{font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit;}
#mainInquiry .mi_inner a{margin-top: 2rem; padding: 1rem 1.5rem; max-width: max-content; font-size: 1.8rem; line-height: 1.4; font-weight: var(--font-weight400); color: var(--white); background: var(--color-c53428); border: 1px solid var(--color-c53428); width: 100%; display: flex; align-items: center; justify-content: center;}
#mainInquiry .mi_inner a:hover{background: transparent; border: 1px solid var(--white); transition: all 0.5s;}
/* 메인 문의하기 */

/* 메인 보드 */
#mainBoard{padding: 10rem 0; position: relative; overflow: hidden;}
#mainBoard .mb_list{max-width: 143rem; margin: 0 auto; display: flex;}
#mainBoard .mb_list > div{display: flex; flex-direction: column; width: 30%; margin-right: 5%;}
#mainBoard .mb_list > div:last-of-type{margin-right: 0;}
#mainBoard .mb_list > div .mb_items_top{margin-bottom: 2rem; display: flex; align-items: center; justify-content: space-between;}
#mainBoard .mb_list > div .mb_items_top h2{font-size: 2.2rem; line-height: 1.4; font-weight: var(--font-weight400); color: var(--black);}
#mainBoard .mb_list > div .mb_items_top .more{width: 3rem; height: 3rem; background: url("/theme/template/img/main/icon_plus.svg") center center no-repeat; background-size: 50% 50%; border: 1px solid var(--color-dddddd); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.5s;}
#mainBoard .mb_list > div .mb_items_top .more:hover{border: 1px solid var(--color-c53428); background: url("/theme/template/img/main/icon_plus_on.svg") center center no-repeat; background-size: 50% 50%;}
#mainBoard .mb_list > div .mb_items_box a{padding-left: 1rem; display: flex; justify-content: space-between; position: relative;}
#mainBoard .mb_list > div .mb_items_box a:before{width: 4px; height: 4px; top: 9px; left: 0; background: var(--color-e2dccc); content:""; position: absolute;}
#mainBoard .mb_list > div .mb_items_box a + a{margin-top: 1rem;}
#mainBoard .mb_list > div .mb_items_box a .subject{width: calc(100% - 10rem); font-size: 1.5rem; line-height: 1.4; font-weight: var(--font-weight400); color: var(--black500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
#mainBoard .mb_list > div .mb_items_box a .date{width: 10rem; font-size: 1.5rem; line-height: 1.4; font-weight: var(--font-weight400); color: var(--black800); text-align: right;}
#mainBoard .mb_list > div .mb_items_box a:hover .subject,
#mainBoard .mb_list > div .mb_items_box a:hover .date{color: var(--color-c53428); transition: color 0.5s;}
/* 메인 보드 */

/* 메인 고객센터 */
#mainCs{position: relative; overflow: hidden;}
#mainCs .mc_inner{display: flex; align-items: stretch;}
#mainCs .mc_inner .left{height: 20rem; display: flex; align-items: center; justify-content: flex-end; width: 50%; background-size: cover; background-repeat: no-repeat; background-position: center center; position: relative;}
#mainCs .mc_inner .left:after{content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; background: rgba(0,0,0,0.6);}
#mainCs .mc_inner .left .box{width: 100%; max-width: 71.5rem; position: relative; z-index: 1;}
#mainCs .mc_inner .left .box h2{font-size: 1.8rem; line-height: 1.4; font-weight: var(--font-weight400); color: var(--white);}
#mainCs .mc_inner .left .box > p{margin: 1rem 0; font-size: 3rem; line-height: 1.4; font-weight: var(--font-weight400); color: var(--white);}
#mainCs .mc_inner .left .box div{font-size: 1.5rem; line-height: 1.4; font-weight: var(--font-weight400); color: var(--color-cccccc); display: block;}
#mainCs .mc_inner .left .box div *{font-size: inherit; line-height: inherit; font-weight: inherit; color: inherit;}
#mainCs .mc_inner .right{height: 20rem; width: 50%; position: relative; overflow: hidden;}
#mainCs .mc_inner .right:before{content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; background: rgba(0,0,0,0.6);}
#mainCs .mc_inner .right .map{width: 100%; height: 100%; position: relative; z-index: -1;}
#mainCs .mc_inner .right .map .root_daum_roughmap{width: 100%;}
#mainCs .mc_inner .right .map .root_daum_roughmap .wrap_map{height: 20rem;}
#mainCs .mc_inner .right .map .root_daum_roughmap .wrap_btn_zoom,
#mainCs .mc_inner .right .map .root_daum_roughmap .wrap_controllers{display: none;}
#mainCs .mc_inner .right .map_btn{padding: 1rem 2rem; font-size: 1.5rem; line-height: 1.4; font-weight: var(--font-weight400); color: var(--white); background: transparent; border: 1px solid var(--white); top:50%; left: 50%; transform: translate(-50%, -50%); display: block; position: absolute; z-index: 1; transition: all 0.5s;}
#mainCs .mc_inner .right .map_btn:hover{background: var(--white); color: var(--black);}
/* 메인 고객센터 */

/* 미디어 쿼리 */
@media all and (max-width: 1430px) {
    /* 메인 비주얼 */
    .mvArea .mv_controller .mv_controller_inner{width: auto;}
    .mv_items .mv_infoArea .mv_info{width: auto;}
    /* 메인 비주얼 */

    /* 메인 네비2 영역 */
    #mainNav2{padding: 6rem 1.5rem 5rem;}
    /* 메인 네비2 영역 */

    /* 메인 갤러리 */
    #mainGallery{margin: 10rem auto 0; padding: 0 1.5rem;}
    #mainGallery .mg_list .mg_items{width: 23.64vw !important; max-width: 33.8rem; margin-right: 1.4vw;}
    #mainGallery .mg_list .mg_items a .img{height: 18.18vw;}
    /* 메인 갤러리 */

    /* 메인 포트폴리오 */
    #mainPortfolio{padding: 5rem 1.5rem 10rem;}
    /* 메인 포트폴리오 */

    /* 메인 보드 */
    #mainBoard .mb_list{padding: 0 1.5rem;}
    /* 메인 보드 */

    /* 메인 고객센터 */
    #mainCs .mc_inner .left .box{width: calc(100% - 1.5rem);}
    /* 메인 고객센터 */
}

/* 미디어 쿼리 */
@media all and (max-width: 991px) {
    /* 메인 비주얼 */
    .mvArea .mv_controller{padding: 0 20px; top: auto; bottom: 20px; transform: translateY(0);}
    .mvArea .mv_controller .mv_controller_inner{justify-content: flex-start;}
    .mvArea .mv_controller .mv_controller_inner > div{width: 46px; height: 46px;}
    .mvArea .mv_controller .mv_controller_inner > div + div{margin-left: 8px;}
    .mvArea .mv_controller .mv_controller_inner > div i{font-size: 24px;}
    .mv_items{height: 50vh; min-height: unset;}
    .mv_items .mv_bg img,
    .mv_items .mv_bg iframe{width: 1000px; height: 800px;}
    .mv_items .mv_bg iframe{min-width: 1920px; min-height: 1080px;}
    .mv_items .mv_infoArea{padding: 20px;}
    .mv_items .mv_infoArea .mv_info .mv_tit{font-size: 25px;}
    .mv_items .mv_infoArea .mv_info .mv_desc{margin-top:20px; font-size: 14px;}
    /* 메인 비주얼 */

    /* 메인 네비 영역 */
    #mainNav{margin: 0 auto;}
    #mainNav ul li:last-of-type{border-right: 0;}
    #mainNav ul li a{height: 10rem; gap: 10px; flex-direction: column; justify-content: center;}
    #mainNav ul li a i{padding: 0 10px;}
    #mainNav ul li a span{font-size: 14px;}
    /* 메인 네비 영역 */

    /* 메인 네비2 영역 */
    #mainNav2{padding: 4rem 0 3rem; max-width: 90%;}
    #mainNav2 ul li{width: 50%; border-top: 1px solid var(--color-dddddd);}
    #mainNav2 ul li:nth-of-type(2n){border-right: 0;}
    #mainNav2 ul li:nth-of-type(1),
    #mainNav2 ul li:nth-of-type(2){border-top: 0;}
    /* 메인 네비2 영역 */

    /* 메인 ABOUT US */
    #mainAbout .ma_inner{padding-bottom: 4rem; flex-direction: column;align-items: flex-start; background: var(--color-f7f7f7);}
    #mainAbout .ma_inner .img{width: 100%; height: 45rem; position: relative;}
    #mainAbout .ma_inner .img img{position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
    #mainAbout .ma_inner .text{padding: 2rem; width: 90%; margin: -4rem auto 0; background-color: var(--white);}
    #mainAbout .ma_inner .text_con{align-self: center;}
    #mainAbout .ma_inner .text_con h2{font-size: 3rem;}
    #mainAbout .ma_inner .text_con > p{font-size: 2rem;}
    #mainAbout .ma_inner .text_con span{padding: 2.5rem 0; font-size: 1.5rem;}
    #mainAbout .ma_inner .text_con a{height: 5rem; font-size: 1.5rem; max-width: 18rem;}
    /* 메인 ABOUT US */

    /* 메인 갤러리 */
    #mainGallery{margin: 4rem auto 0; padding: 0 4rem;}
    #mainGallery .mg_list .mg_items{width: 33.33% !important; max-width: 29.26vw; margin-right: 2.02vw;}
    #mainGallery .mg_list .mg_items a .img{height: 29.36vw;}
    #mainGallery .mg_list .mg_items a .title{padding: 2.52vw 2.02vw 0; font-size: 1.8rem;}
    #mainGallery .mg_list .mg_items a .desc{height: 4.2rem; margin-top: 1.01vw; padding: 0 2.02vw; font-size: 1.5rem;}
    #mainGallery .mg_list .mg_items a .date{margin-top: 2.02vw; padding: 0 2.02vw 2.5rem; font-size: 1.5rem;}
    /* 메인 갤러리 */

    /* 메인 포트폴리오 */
    #mainPortfolio{padding: 4rem 0 10rem; max-width: 90%;}
    #mainPortfolio h2{font-size: 2.6rem;}
    #mainPortfolio .sub_tit{padding: 1rem 0 2rem; font-size: 1.4rem;}
    #mainPortfolio .mp_area{margin-top: 0;}
    #mainPortfolio .mp_tab{flex-wrap: wrap;}
    #mainPortfolio .mp_tab a{width: 50%; height:5rem; font-size: 1.4rem; border-top: 1px solid var(--color-dddddd);}
    #mainPortfolio .mp_tab a:nth-of-type(1),
    #mainPortfolio .mp_tab a:nth-of-type(2){border-top: 0;}
    #mainPortfolio .mp_tab a:nth-of-type(2n){border-right: 0;}
    #mainPortfolio .mp_container{margin-top: 4rem;}
    #mainPortfolio .mp_container .mp_inner .mp_list{flex-wrap: wrap; align-items: flex-start; justify-content: stretch;}
    #mainPortfolio .mp_container .mp_inner .mp_list .mp_items{margin-top: 2.8rem; width: 50%; padding: 0 1.4rem;}
    #mainPortfolio .mp_container .mp_inner .mp_list .mp_items:nth-of-type(1),
    #mainPortfolio .mp_container .mp_inner .mp_list .mp_items:nth-of-type(2){margin-top: 0;}
    #mainPortfolio .mp_container .mp_inner .mp_list .mp_items a{padding-bottom: 3rem;}
    #mainPortfolio .mp_container .mp_inner .mp_list .mp_items a .img{height: 23rem;}
    #mainPortfolio .mp_container .mp_inner .mp_list .mp_items a .tit{margin-top: 2rem; padding: 0 1.6rem; font-size: 2rem;}
    #mainPortfolio .mp_container .mp_inner .mp_list .mp_items a .desc{height: 4.2rem; margin-top: 1rem; padding: 0 1.6rem; font-size: 1.5rem;}
    /* 메인 포트폴리오 */

    /* 메인 문의하기 */
    #mainInquiry .mi_inner{height: 24rem;}
    #mainInquiry .mi_inner .tit{font-size: 2.4rem;}
    #mainInquiry .mi_inner div{margin: 1.5rem 0; font-size: 1.4rem;}
    #mainInquiry .mi_inner a{margin-top: 1rem; padding: 1rem 1.5rem; font-size: 1.4rem;}
    /* 메인 문의하기 */

    /* 메인 보드 */
    #mainBoard{padding: 5rem 0;}
    #mainBoard .mb_list{flex-direction: column; padding: 0;}
    #mainBoard .mb_list > div{width: 90%; margin: 0 auto 5rem;}
    #mainBoard .mb_list > div:last-of-type{margin: 0 auto;}
    /* 메인 보드 */

    /* 메인 고객센터 */
    #mainCs .mc_inner{align-items: flex-start; flex-direction: column;}
    #mainCs .mc_inner .left{height: 18rem; justify-content: flex-start; width: 100%;}
    #mainCs .mc_inner .left .box{width: 90%; margin: 0 auto; max-width: 100%;}
    #mainCs .mc_inner .left .box h2{font-size: 1.5rem;}
    #mainCs .mc_inner .left .box > p{margin: 1rem 0; font-size: 2.6rem;}
    #mainCs .mc_inner .left .box div{font-size: 1.3rem;}
    #mainCs .mc_inner .right{height: 20rem; width: 100%;}
    #mainCs .mc_inner .right .map .root_daum_roughmap .wrap_map{height: 20rem;}
    #mainCs .mc_inner .right .map_btn{padding: 1rem 2rem; font-size: 1.3rem;}
    /* 메인 고객센터 */
}

@media all and (max-width: 768px) {
    /* 메인 네비2 영역 */
    #mainNav2{padding: 4rem 0 3rem;}
    #mainNav2 ul li a{padding: 1rem; height: 16rem;}
    #mainNav2 ul li a i{width: 3.8rem; height: 3.4rem;}
    #mainNav2 ul li a .tit{padding-top: 1rem; font-size: 1.6rem;}
    #mainNav2 ul li a .desc{display: none;}
    #mainNav2 ul li a .arrow{margin-top: 2rem; width: 3rem; height: 3rem; background-size: 1.5rem 1.5rem;}
    /* 메인 네비2 영역 */

    /* 메인 갤러리 */
    #mainGallery{padding: 0 5.21vw;}
    #mainGallery .mg_list{width: 100%; position: relative; overflow: hidden;}
    #mainGallery .mg_list .mg_items{width: 50% !important; max-width: 65vw; min-width: 30rem; margin-right: 2.6vw;}
    #mainGallery .mg_list .mg_items a .img{height: 52.08vw; min-height: 20rem;}
    #mainGallery .mg_list .mg_items a .title{padding: 2.5rem 2rem 0; font-size: 1.8rem;}
    #mainGallery .mg_list .mg_items a .desc{height: 4.2rem; margin-top: 1rem; padding: 0 2rem; font-size: 1.5rem;}
    #mainGallery .mg_list .mg_items a .date{margin-top: 2rem; padding: 0 2rem 2.5rem; font-size: 1.5rem;}
    /* 메인 갤러리 */

    /* 메인 포트폴리오 */
    #mainPortfolio .mp_container .mp_inner .mp_list{flex-wrap: wrap; align-items: flex-start; justify-content: stretch;}
    #mainPortfolio .mp_container .mp_inner .mp_list .mp_items{margin-top: 2.8rem; width: 100%; padding: 0 1.4rem;}
    #mainPortfolio .mp_container .mp_inner .mp_list .mp_items:nth-of-type(2){margin-top: 2.8rem;}
    #mainPortfolio .mp_container .mp_inner .mp_list .mp_items a{padding-bottom: 3rem;}
    #mainPortfolio .mp_container .mp_inner .mp_list .mp_items a .img{height: 20rem;}
    #mainPortfolio .mp_container .mp_inner .mp_list .mp_items a .tit{margin-top: 2rem; padding: 0 1.6rem; font-size: 1.8rem;}
    #mainPortfolio .mp_container .mp_inner .mp_list .mp_items a .desc{height: 4.2rem; margin-top: 1rem; padding: 0 1.6rem; font-size: 1.4rem;}
    /* 메인 포트폴리오 */
}

@media all and (max-width: 450px) {
    /* 메인 네비 영역 */
    #mainNav ul li a{height: 8rem;}
    #mainNav ul li a i img{width: 18px;}
    #mainNav ul li a span{font-size: 12px;}
    /* 메인 네비 영역 */

    /* 메인 ABOUT US */
    #mainAbout .ma_inner .img{height: 35rem;}
    #mainAbout .ma_inner .text_con a{height: 4rem; max-width: 15rem; margin: 0 auto;}
    /* 메인 ABOUT US */
}