@charset "utf-8";

#mVisual{width: 100%; background: url(/images/main/mv.png) center center / cover no-repeat;padding-top: 100px; letter-spacing: -0.1em;}
#mVisual .inner{padding: 120px 0 90px;}
#mVisual .top{text-align: center; margin-bottom: 50px;color: #fff;}
#mVisual .top h3{font-size: 5rem;}
#mVisual .top h3 span{color: #f8b62c;}
#mVisual .top p{font-size: 2.3rem; margin-top: 20px;}
#mVisual #m_price{background: rgba(0, 0, 0, 0.7); border-radius: 10px;padding: 40px 45px 20px;}
#mVisual #m_price .title{color: #fff; display: flex; align-items: center;justify-content: space-between;margin-bottom: 20px;}
#mVisual #m_price .title h3{font-size: 3.5rem;}
#mVisual #m_price .title p{font-size: 2rem; opacity: 0.5;}
#mVisual #m_price .cont{display: flex;gap: 30px;}
#mVisual #m_price .cont .gold{width: calc(100% - 320px); background: #fff; border-radius: 15px 15px 10px 10px;}
#mVisual #m_price .cont .silver{width: 290px; background: #fff; border-radius: 15px 15px 10px 10px;}
#mVisual #m_price .cont div > h3{text-align: center; color: #fff;font-size: 3rem;padding: 20px; border-radius: 10px 10px 0 0;}
#mVisual #m_price .cont .gold > h3{background: linear-gradient(to right, #dabc7b, #b18018);}
#mVisual #m_price .cont .silver > h3{background: linear-gradient(to right, #3e6393, #233c5b);}
#mVisual #m_price .price_list{padding: 25px 35px;}
#mVisual #m_price .price_list ul{display: flex;gap: 25px;}
#mVisual #m_price .price_list ul li{width: 170px;text-align: center; color: #222;}
#mVisual #m_price .price_list ul li:first-child{text-align: left;}
#mVisual #m_price .price_list ul li:first-child .name{background: transparent;}
#mVisual #m_price .price_list ul li .name{background: #b18018; border-radius: 10px; text-align: center;padding: 10px; color: #fff; height: 80px; display: flex;align-items: center;gap: 5px; flex-wrap: wrap;justify-content: center;}
#mVisual #m_price .price_list ul li .name h4{font-size: 3rem;width: 100%;}
#mVisual #m_price .price_list ul li .name p{font-size: 1.6rem; font-family: 'Montserrat';}
#mVisual #m_price .price_list ul li .sold{margin-top: 25px; min-height: 54px;}
#mVisual #m_price .price_list ul li .sold > h4{font-size: 3rem;}
#mVisual #m_price .price_list ul li .sold > p{font-size: 1.4rem;margin-top: 5px;}
#mVisual #m_price .price_list ul li .und{display: flex; text-align: right; justify-content: end;font-size: 1.6rem;font-family: 'Montserrat';gap: 5px;padding-right: 12px;font-weight: 500;}
#mVisual #m_price .price_list ul li .und p{color: #777;}
#mVisual #m_price .price_list ul li .und > span{color: #000;}
#mVisual #m_price .price_list ul li .und .down{color: #0012ff; font-size: 12px;}
#mVisual #m_price .price_list ul li .und .up{color: #ff0000; font-size: 12px;}
#mVisual #m_price .price_list ul li .und .same{color: #fdc400;font-family: 'pretendard'; font-weight: 900; font-size: 12px;}
#mVisual #m_price .price_list ul li .buy{margin-top: 20px;}
#mVisual #m_price .price_list ul li .buy > h4{font-size: 3rem;}
#mVisual #m_price .silver .price_list ul{justify-content: center;}
#mVisual #m_price .silver .price_list ul li{text-align: center;}
#mVisual #m_price .silver .price_list ul li .name{background: #233c5b; text-align: center;}
#mVisual #m_price .silver .price_list ul li .und{ padding-right: 0; justify-content: center;}
#mVisual .ntc{font-size: 1.4rem; color: #fff; opacity: 0.5; text-align: right;margin-top: 20px;}


@media screen and (max-width:1400px){
    #mVisual .top h3{font-size: 4rem;}
    #mVisual .top p{font-size: 2rem;}
    #mVisual #m_price .title h3{font-size: 3rem;}
    #mVisual #m_price .title p{font-size: 1.8rem;}
    #mVisual #m_price .price_list ul li .name h4{font-size: 2.7rem;}
    #mVisual #m_price .price_list ul li .name p{font-size: 1.5rem;}
    #mVisual #m_price .price_list ul li .sold > h4{font-size: 2.5rem;}
    #mVisual #m_price .price_list ul li .buy > h4{font-size: 2.5rem;}
}
@media screen and (max-width:1280px){
    #mVisual{padding-top: 80px;}
    #mVisual .inner{padding: 80px 0;}
    #mVisual #m_price {padding: 25px 25px 15px;}
    #mVisual #m_price .cont{gap: 10px;}
    #mVisual #m_price .cont div > h3{font-size: 2.5rem; padding: 15px;}
    #mVisual #m_price .cont .gold{width: calc(100% - 240px);}
    #mVisual #m_price .cont .silver{width: 230px;}
    #mVisual #m_price .price_list {padding: 25px 20px;}
    #mVisual #m_price .price_list ul {gap: 15px;}
    #mVisual #m_price .gold .price_list ul li:first-child{width: 120px;}
}
@media screen and (max-width:1080px){
    #mVisual #m_price .title h3{font-size: 2.8rem;}
    #mVisual #m_price .title p{font-size: 1.6rem;}
    #mVisual #m_price .price_list ul li .name h4{font-size: 2.2rem;}
    #mVisual #m_price .price_list ul li .name p{font-size: 1.4rem;}
    #mVisual #m_price .price_list ul li .sold > h4{font-size: 2.2rem;}
    #mVisual #m_price .price_list ul li .buy > h4{font-size: 2.2rem;}
    #mVisual #m_price .price_list ul li .name{height: 65px;padding: 5px;gap: 0px;}
}
@media screen and (max-width:980px){
    #mVisual #m_price .cont{flex-wrap: wrap;}
    #mVisual #m_price .cont .gold{width: 100%;}
    #mVisual #m_price .cont .silver{width: 100%;}
    #mVisual #m_price .price_list ul {flex-wrap: wrap;}
    #mVisual #m_price .price_list ul li{width: 100%;display: flex;justify-content: space-between; text-align: center;align-items: center;}
    #mVisual #m_price .price_list ul li:first-child{text-align: center;}
    #mVisual #m_price .gold .price_list ul li:first-child{width: 100%;}
    #mVisual #m_price .gold .price_list ul li:first-child .buy{min-height: 38px;}
    #mVisual #m_price .price_list ul{gap: 10px;}
    #mVisual #m_price .price_list ul li .name{width: 150px;height: 55px;}
    #mVisual #m_price .price_list ul li .sold{margin-top: 0; width: 150px;min-height: 0;}
    #mVisual #m_price .price_list ul li .sold > p{font-size: 1.4rem;margin-top: 0px;}
    #mVisual #m_price .price_list ul li .buy{margin-top: 0; width: 150px; min-height: 0;}
    #mVisual #m_price .price_list ul li .und{justify-content: center;padding-right: 0;font-size: 1.4rem;}
    #mVisual #m_price .gold .price_list{padding: 10px 20px 25px;}
}
@media screen and (max-width:680px){
    #mVisual{padding-top: 60px;}
    #mVisual .inner{padding: 60px 0;}
    #mVisual #m_price .price_list ul li .name{width: calc(100%/3 - 20px/3);}
    #mVisual #m_price .price_list ul li .sold{width: calc(100%/3 - 20px/3);}
    #mVisual #m_price .price_list ul li .buy{width: calc(100%/3 - 20px/3);}
    #mVisual #m_price .title{flex-wrap: wrap;gap: 5px;justify-content: flex-end;}
    #mVisual #m_price .title h3{width: 100%;}
	#mVisual #m_price .price_list ul li .und .down{font-size: 10px;}
	#mVisual #m_price .price_list ul li .und .up{font-size: 10px;}
	#mVisual #m_price .price_list ul li .und .same{font-size: 10px;}
}
@media screen and (max-width:480px){
    #mVisual .top{margin-bottom: 40px;}
    #mVisual .top h3{font-size: 3.5rem;}
    #mVisual .top p{font-size: 1.7rem;}
    #mVisual #m_price .title{justify-content: start;}
    #mVisual #m_price .title h3{font-size: 2.5rem;}
    #mVisual #m_price .title p{font-size: 1.5rem;}
    #mVisual #m_price .cont div > h3 {font-size: 2.2rem;padding: 10px;}
    #mVisual #m_price .price_list ul li .sold > h4 {font-size: 1.9rem;}
    #mVisual #m_price .price_list ul li .buy > h4 {font-size: 1.9rem;}
    #mVisual #m_price .price_list ul li .sold > p{font-size: 1.2rem;}
    #mVisual #m_price .gold .price_list ul li:first-child .buy{min-height: 39px;}
    #mVisual #m_price .price_list ul li .name{height: 50px;}
    #mVisual #m_price .price_list ul li .name h4 {font-size: 2rem;}
    #mVisual #m_price .price_list ul li .name p {font-size: 1.2rem;}
    #mVisual #m_price .price_list ul li .und{font-size: 1.2rem;}
    #mVisual #m_price .gold .price_list {padding: 10px 15px 20px;}
    #mVisual #m_price .price_list {padding: 20px 15px;}
}


#m_product{padding: 120px 0 140px;}
#m_product .m_txt{text-align: center;}
#m_product .m_txt h4{color: #f8b62c; font-size: 2rem; font-family: 'Montserrat';}
#m_product .m_txt h3{color: #222;font-size: 5rem; margin: 30px 0 40px;}
#m_product .m_txt p{font-weight: 500; font-size: 2rem; color: #222; line-height: 3rem;}
#m_product .p_list{margin-top: 50px; display: flex; flex-wrap: wrap; gap: 20px;}
#m_product .p_list li{width: calc(100%/2 - 10px); overflow: hidden;}
#m_product .p_list li a{display: inline-block; width: 100%; height: 100%; position: relative;}
#m_product .p_list li a:hover .img img{transform: scale(1.1); transition: 0.5s;}
#m_product .p_list li a .img{width: 100%; border-radius: 10px; overflow: hidden;}
#m_product .p_list li a .img img{width: 100%;transition: 0.5s;}
#m_product .p_list li a .txt{position: absolute; width: 100%; height: 100%; top: 0; left: 0; padding: 35px; color: #fff;}
#m_product .p_list li a .txt p{font-size: 2rem; margin-bottom: 10px;}
#m_product .p_list li a .txt h3{font-size: 3rem;}


@media screen and (max-width:1280px){
    #m_product{padding: 100px 0 120px;}
    #m_product .m_txt h4{font-size: 1.8rem;}
    #m_product .m_txt h3{font-size: 4rem;}
    #m_product .m_txt p{font-size: 1.8rem;}
    #m_product .p_list{margin-top: 40px;}
    #m_product .p_list li a .txt p{font-size: 1.8rem;}
    #m_product .p_list li a .txt h3{font-size: 2.8rem;}
}
@media screen and (max-width:980px){
    #m_product{padding: 80px 0 100px;}
    #m_product .m_txt h4{font-size: 1.6rem;}
    #m_product .m_txt h3{font-size: 3rem;margin: 20px 0 30px;}
    #m_product .m_txt p{font-size: 1.6rem; line-height: 2.6rem;}
    #m_product .p_list li a .txt{padding: 25px;}
    #m_product .p_list li a .txt p{font-size: 1.6rem;margin-bottom: 5px;}
    #m_product .p_list li a .txt h3{font-size: 2.6rem;}
}
@media screen and (max-width:780px){
    #m_product{padding: 60px 0 80px;}
    #m_product .p_list{gap: 10px;}
    #m_product .p_list li{width: 100%;}
}
@media screen and (max-width:480px){
    #m_product .m_txt h4{font-size: 1.4rem;}
    #m_product .m_txt h3{font-size: 2.8rem;margin: 10px 0 20px;}
    #m_product .m_txt p{font-size: 1.5rem; line-height: 2.5rem;}
    #m_product .p_list{margin-top: 30px;}
    #m_product .p_list li a .txt p{font-size: 1.5rem;}
    #m_product .p_list li a .txt h3{font-size: 2.2rem;}
}


#m_company{background: url('/images/main/m_company_bg.png') center center / cover no-repeat;  background-attachment: fixed; padding: 120px 0; color: #fff;}
#m_company p{font-size: 3rem; line-height: 4rem;}
#m_company h3{font-size: 5rem; margin: 30px 0 50px;}
#m_company a{color: #fff; padding: 15px 40px; border: 1px solid #fff; border-radius: 100px; font-size: 1.6rem; display: inline-block;}
#m_company a:hover{color: #222; background: #fff; transition: 0.3s;}
#m_company a span{font-family: 'suit'; margin-left: 30px;}

@media screen and (max-width:1280px){
    #m_company{padding: 100px 0;}
    #m_company p{font-size: 2.5rem; line-height: 3.5rem;}
    #m_company h3{font-size: 4rem; margin: 20px 0 40px;}
    #m_company a{padding: 10px 30px; font-size: 1.5rem;}
}
@media screen and (max-width:780px){
    #m_company{padding: 80px 0;}
    #m_company p{font-size: 2rem; line-height: 3rem;}
    #m_company h3{font-size: 3.5rem;}
}
@media screen and (max-width:480px){
    #m_company{padding: 60px 0;}
    #m_company p{font-size: 1.8rem; line-height: 2.8rem;}
    #m_company h3{font-size: 3rem;margin: 10px 0 30px;}
    #m_company a span{margin-left: 20px;}
}


.root_daum_roughmap .cont,
.root_daum_roughmap .wrap_controllers{display: none;}
#daumRoughmapContainer1744259252920 img[src*="marker_bus"] {display: none !important;}

#m_info{padding: 140px 0;}
#m_info .inner{display: flex; gap: 20px; height: 100%; flex-wrap: wrap;}
#m_info .lt{width: calc(100%/2 - 10px);}
#m_info .lt .top{width: 100%; text-align: center; background: #f5f5f5; border-radius: 10px; padding: 40px; color: #222;}
#m_info .lt .top h4{font-size: 3rem;}
#m_info .lt .top h3{font-size: 6rem; font-family: 'Montserrat'; margin: 25px 0;}
#m_info .lt .top dl{ display: flex; gap: 30px;font-size: 2.3rem; align-items: center; justify-content: center;}
#m_info .lt .top dl dt{font-weight: bold; }
#m_info .lt .bot{display: flex; margin-top: 20px; gap: 20px;}
#m_info .lt .bot li{width: calc(100%/2 - 10px);}
#m_info .lt .bot li a{display: inline-block;padding: 30px; border-radius: 10px; width: 100%; text-align: center;}
#m_info .lt .bot li:nth-child(1) a{background: #00c046;}
#m_info .lt .bot li:nth-child(2) a{background: #fae100;}
#m_info .lt .bot li a p{color: #fff; font-size: 2.3rem; margin-top: 25px; font-weight: bold;}
#m_info .lt .bot li:nth-child(2) a p{color: #222;}
#m_info .rt{width: calc(100%/2 - 10px);}
#m_info .rt .m_area{height: calc(100% - 120px);border-radius: 10px; overflow: hidden;}
#m_info .root_daum_roughmap .wrap_map{height: 100% !important;}
#m_info .rt .add{height: 100px; display: flex; justify-content: center; gap: 15px; align-items: center; background: #fef8e9; border-radius: 10px; margin-top: 20px;padding: 10px 20px;}
#m_info .rt .add h3{color: #222; font-weight: 600; font-size: 2.3rem;}
br.mo{display: none;}

@media screen and (max-width:1280px){
    #m_info{padding: 120px 0;}
    #m_info .lt .top h4{font-size: 2.5rem;}
    #m_info .lt .top h3{font-size: 5rem; margin: 20px 0;}
    #m_info .lt .top dl{font-size: 2rem;}
    #m_info .lt .bot li a{padding: 20px;}
    #m_info .lt .bot li a img{width: 60px;}
    #m_info .lt .bot li a p{font-size: 2rem;}
    #m_info .rt .add h3{font-size: 2rem;}
}
@media screen and (max-width:980px){
    #m_info{padding: 100px 0;}
    #m_info .lt{width: 100%; order: 2;}
    #m_info .rt{width: 100%; order: 1;}
    #m_info .rt .m_area{height: 400px;}
}
@media screen and (max-width:780px){
    #m_info{padding: 80px 0;}
}
@media screen and (max-width:480px){
    #m_info .inner{gap: 10px;}
    #m_info .lt .top{padding: 25px;}
    #m_info .lt .top h4{font-size: 2.2rem;}
    #m_info .lt .top h3{font-size: 4rem; margin: 10px 0;}
    #m_info .lt .top dl{font-size: 1.8rem;gap: 20px;}
    #m_info .rt .m_area{height: 350px;}
    #m_info .rt .add{height: auto; padding: 20px; justify-content: center; flex-wrap: wrap; margin-top: 10px;}
    #m_info .rt .add h3{width: 100%; text-align: center;}
    #m_info .lt .bot{gap: 10px; margin-top: 10px;}
    #m_info .lt .bot li{width: calc(100%/2 - 5px);}
    #m_info .lt .bot li a p{font-size: 1.8rem; margin-top: 20px;}
    br.mo{display: block;}
}