/* visual */
.opacity-0{ opacity: 0; }
#player{ position: absolute; top: 0; left: 50%; transform: translate(-50%); aspect-ratio: 16/9; width: auto; height: 100%; pointer-events: none; z-index: -1; }
.area_visual{position:relative; width:100%; height: calc(100vh - 0px); background: #000; background-size: cover; background-position:50%;}
.area_visual .swiper-wrapper{ position: relative; z-index: 5; }
.area_visual .swiper-slide {display: flex; align-items: center; opacity: 0!important;}
.area_visual .swiper-slide::before{ content: ''; position: absolute; inset: 0; background-repeat: no-repeat; background-size: cover; background-position: 70%; z-index: -10;}
.area_visual .swiper-slide-active{ opacity: 1!important; }
.area_visual .slide1::before{ background-image: url(/images/main/main_visual.jpg);}
.area_visual .slide2::before{ background-image: url(/images/main/main_visual04.jpg);}
.area_visual .slide3::before{ background-image: url(/images/main/main_visual05.jpg);}
.area_visual .visual_text {margin: 55rem 0;}
.area_visual .visual_text h2 {font-size: 66rem; line-height: 1.4; font-weight: 400; color: #fff; text-shadow: 2rem 2rem 20rem rgb(0 0 0 / 20%); margin-bottom: 40rem; transition: 0.5s;}
.area_visual .visual_text h2 strong {display: block; font-weight: 600;}
.area_visual .visual_text p {font-size: 24rem; font-weight: 300; color: #fff; opacity: 0.85; transition: 0.5s;}
.area_visual .visual_control {display: flex; gap: 11rem; align-items: center;}
.area_visual .visual_pause { position: relative; width: 10px; height:10px; margin-top: 3rem; background: url(/images/main/btn_visual_pause.svg) no-repeat 50% / cover; ;}
.area_visual .visual_pause.play {background: url(/images/main/btn_visual_play.svg) no-repeat 50%;}
.area_visual .visual_pagination {width: auto;}
.area_visual .visual_pagination .swiper-pagination-bullet:first-child {margin-left: 0;}
.area_visual .visual_pagination .swiper-pagination-bullet {width: 6px; height: 6px; position: relative; margin: 0 14rem; background: rgba(255, 255, 255, 0.7);}
.area_visual .visual_pagination .swiper-pagination-bullet-active {background:#fff;}
.area_visual .visual_pagination .swiper-pagination-bullet-active::before {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 24px; height: 24px; border: 1px solid rgba(255, 255, 255, 0.6); box-sizing: border-box; border-radius: 100%;}

@media(prefers-reduced-motion:no-preference){
    .area_visual .swiper-slide-active::before{ animation: slide_bg 3s both; }
    @keyframes slide_bg {
        0%{ transform: scale(1.05); }
        100%{ transform: scale(1); }
    }
    .area_visual .visual_text h2 { opacity: 0; }
    .area_visual .visual_text p { opacity: 0; }
    .area_visual .swiper-slide-active .visual_text h2{ animation: visual_txt .6s .5s both;}
    .area_visual .swiper-slide-active .visual_text p{ animation: visual_txt .6s .7s both;}

    @keyframes visual_txt {
        0%{ transform: translateX(20px); opacity: 0; }
        100%{ transform: translateX(0); opacity: 1; }
    }
}

@media(min-width:1280px){
	#player{ width: 100%; height: auto; }
}


/* 공통영역*/
.main_tit {z-index: 5;}
.main_tit small {display: block; font-size: 18rem; font-weight: 600; letter-spacing: -0.25rem; color: #cbb796; margin-bottom: 25rem;}
.main_tit h2 {font-size: 42rem; font-weight: 400;}
.main_tit h2 strong {font-weight: 600;}

/* area_about */
.area_about {padding: 240rem 0; text-align: center;}
.area_about .inr {position: relative; max-width: 1650rem; height: 100%;}
.area_about .main_tit h2 {margin-bottom: 35rem;}
.area_about .about_text p {font-size: 18rem; line-height: 1.8; letter-spacing: -0.2rem; color: #333; z-index: 1;}
.area_about .main_tit h2 strong {display: block;}
.area_about .about_img1 img, .area_about .about_img2 img {max-width: 100%; width: 100%; transition: 0.5s;}
/* .area_about .m_list */
.m_list {}
.m_list li {position: absolute;  top: 50%; transform: translateY(-50%); opacity:0; z-index: -1; transition:all 2.0s cubic-bezier(0.25, 0.52, 0.15, 0.99); box-shadow: 7px 10px 20px 5px rgb(82 75 104 / 20%);}
.m_list li img {display: block;}
.m_list.acitve li{opacity: 0.9; transform:translateY(0rem) translateX(0rem)!important;}
.m_list li.about_img1 {left: 35%;}
.m_list li.about_img2 {right: 35%;}
.m_list.acitve li.about_img1 {top: -140rem; left: 0;}
.m_list.acitve li.about_img2 {right: 0;}

/* area_work */
.area_work {position: relative; padding: 120rem 0;}
.area_work .inr {position: relative;}
.area_work::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height:100%; background: url(/images/main/main_work_bg.jpg) no-repeat; background-size: cover; background-position: 50%; z-index: -10;}
.area_work .main_tit {margin-bottom: 60rem; text-align: center;}
.area_work .work_slide {position: relative; padding-bottom: 50rem;}
.area_work .swiper-slide .img {overflow: hidden;}
.area_work .swiper-slide img {max-width: 100%; width: 100%; transition: 0.3s;}
.area_work .swiper-slide img:hover {transform: scale(1.03);}
.area_work .swiper-slide dt {position: relative; font-size: 24rem; font-weight: 500; padding-left: 16rem; margin: 35rem 0 20rem; color: #fff;}
.area_work .swiper-slide dt::before {content: ''; position: absolute; top: 14px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: #fff; opacity: 0.7;}
.area_work .swiper-slide dd { color: #fff; font-size: 17px; font-weight: 300;}
/* button . pagination */
.area_work .work_pagination {position: absolute; top: auto; bottom: 0 !important; width: 100% !important; height: 3px; transform-origin: left bottom; background: rgba(255, 255, 255, 0.25);}
.area_work .swiper-pagination-progressbar-fill {background: rgba(255, 255, 255, 1);}
.area_work .work_next, 
.area_work .work_prev {position: absolute; top: 43%; width: 65px; height: 65px; background: #2b2b2b; background-position: center; background-size: 25rem; background-repeat: no-repeat; z-index: 10;}
.area_work .work_next {right: -35rem; background-image: url(/images/main/work_next.svg);}
.area_work .work_prev {left: -35rem; background-image: url(/images/main/work_prev.svg);}

/* area_location */
.area_location {padding: 100rem 0; display: flex; gap: 40rem; justify-content: space-between;}
.area_location .location {width: 60%; max-width: 780rem;}
.area_location .location_tit { display: flex; justify-content: space-between; margin-bottom: 30rem;}
.area_location .location_tit h2 {font-size: 35rem; font-weight: 700; line-height: 1;}
.area_location .location_tit a {position: relative; display: block; width: 35px; height: 35px; border: 1px solid #e8e8e8; box-sizing: border-box;}
.area_location .location_tit a::before {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 15px; height: 15px; background: url(/images/common/icon_more.svg) no-repeat center;}
.area_location .location_tit a:hover {border-color: #cbb796;}
.area_location .location_tit a:hover::before {background: url(/images/common/icon_more_on.svg) no-repeat center;}
.area_location .root_daum_roughmap {width: 100% !important;}
.area_location .root_daum_roughmap .wrap_map {border-bottom: 1px solid #ccc; height: 280px !important;}
.area_location .root_daum_roughmap .wrap_controllers {display: none;}

/* quick_menu */
.area_location .quick_menu {width: 550px; margin-top: 60rem;}
.area_location .quick_menu h3 {font-size: 18rem; font-weight: 700; color: #cbb796; margin-bottom: 20rem;}
.area_location .quick_menu ul {display: grid; gap: 10rem; grid-template-columns: repeat(4, 1fr); margin-bottom: 16rem;}
.area_location .quick_menu li img {width: 29px; transition: 0.5s;}
.area_location .quick_menu li a {height: 130rem; border: 1px solid #e8e8e8; font-size: 14rem; color: #666; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10rem; transition: 0.5s;}
.area_location .quick_menu li a:hover {border-color: #cbb796; color: #cbb796;}
.area_location .quick_menu li a:hover img {display: none;}
.area_location .quick_menu li a:hover img.on {display: block;}
.area_location .quick_menu img.on {display: none;}
.area_location .quick_menu .call {background: #cbb796 url(/images/main/main_quick_bg.png) no-repeat right 20px center; padding: 35rem 15rem; font-weight: 500; text-align: center; color: #fff;}
.area_location .quick_menu .call a {padding-right: 12rem;}
.area_location .quick_menu .call span {position: relative; padding-left: 15rem;}
.area_location .quick_menu .call span::before {content: ''; position: absolute; top: 5px; left: 0; width: 1px; height: 10px; background: rgba(255, 255, 255, 0.8);}
.area_location .quick_menu .call img {width: 18px; vertical-align: middle; margin-top: -2rem; margin-right: 8rem;}

@media all and (max-width:1280px){
	.area_about .about_img1,
	.area_about .about_img2 {width: 250rem; box-shadow: none;}
	.m_list.acitve li.about_img1 {top: auto !important; bottom: 240rem !important; }
	.m_list.acitve li.about_img2 {top: 240rem !important;}
}
@media all and (max-width:1080px){
	.area_visual .visual_text {margin: 50rem 0;}
	.area_visual .visual_text h2 {font-size: 55rem; margin-bottom: 25rem}
	.area_visual .visual_text p {font-size: 20rem;}
	/* 공통영역*/
	.main_tit small {font-size: 16rem; margin-bottom: 20rem;}
	.main_tit h2 {font-size: 35rem;}
	/* .area_about */
	.area_about {padding: 200rem 0;}
	.area_about .main_tit h2 {margin-bottom: 25rem;}
	.area_about .about_img1, .area_about .about_img2 {width: 220rem;}
	/* .area_work */
	.area_work {padding: 80rem 0;}
	.area_work .main_tit {margin-bottom: 40rem;}
	.area_work .swiper-slide dt {margin: 30rem 0 20rem;}
	.area_work .work_next, .area_work .work_prev {top: 44%; width: 54rem; height: 54rem; background-size:20rem}
	.area_work .work_next {right: -25rem;}
	.area_work .work_prev {left: -25rem;}
	/* .area_location */
	.area_location {padding: 80rem 0; flex-direction: column;}
	.area_location .location {width: 100%; max-width: 100%;}
	.area_location .location_tit {margin-bottom: 25rem;}
	.area_location .location_tit h2 {font-size: 28rem;}
	.area_location .location_tit a {width: 28px; height: 28px;}
	.area_location .quick_menu {width: 100%; margin-top: 0;}
	.area_location .quick_menu li a {height: 150rem;}
}

@media all and (max-width:767px){
	.area_visual .visual_text {margin: 0 0 50rem 0;}
	.area_visual .visual_text h2 {font-size: 40rem;}
	.area_visual .visual_text p {font-size: 16rem;}
	/* 공통영역*/
	.main_tit small {font-size: 15rem; margin-bottom: 14rem;}
	.main_tit h2 {font-size: 25rem; line-height: 1.4;}
	/* .area_about */
	.area_about .about_img1, .area_about .about_img2 {display: none;}
	.area_about {padding: 65rem 0;}
	.area_about .about_text p {font-size: 15rem; line-height: 1.6;}
	/* .area_work */
	.area_work .work_next,
	.area_work .work_prev {display: none;}
	.area_work {padding: 60rem 0;}
	.area_work .main_tit {margin-bottom: 30rem;}
	.area_work .swiper-slide dt {font-size: 20rem; margin: 20rem 0 15rem;}
	.area_work .swiper-slide dd {font-size: 15rem; padding-left: 12rem;}
	.area_work .swiper-slide dt::before {width: 4px; height: 4px; top: 12px;}
	.area_work .work_pagination {height: 2px;}
	.area_work .work_slide {padding-bottom: 35rem;}
	/* .area_location */
	.area_location {padding: 60rem 0; }
	.area_location {gap: 20rem;}
	.area_location .location_tit {margin-bottom: 20rem; align-items: center;}
	.area_location .location_tit h2 {font-size: 24rem;}
	.area_location .location_tit a::before {width: 13px; height: 13px;}
	.area_location .quick_menu h3 {font-size: 17rem; margin-bottom: 15rem;}
	.area_location .quick_menu .call {padding: 25rem 15rem; background-size: 110rem; font-size: 15rem;}
}

@media all and (max-width:600px){
	.hide_mo {display: none;}
	.area_visual .visual_text {text-align: center; margin: 0 0 30rem 0}
	.area_visual .visual_text h2 {font-size: 32rem; margin-bottom: 20rem;}
	.area_visual .visual_text p {font-size: 15rem;}
	.area_visual .visual_control {justify-content: center; gap: 8rem;}
	.area_visual .visual_pagination .swiper-pagination-bullet {margin: 0 12rem;}
	.area_visual .visual_pause {width: 9px; height: 9px;}
	.area_visual .visual_pagination .swiper-pagination-bullet-active::before {width: 22px; height: 22px;}
	.area_about .main_tit h2 strong {display: inline-block;}
	.area_location .quick_menu ul {grid-template-columns:repeat(2, 1fr); gap: 8rem; margin-bottom: 8rem;}
	.area_location .quick_menu li a {gap: 8rem; height: 130rem;}
	.area_location .quick_menu li img {width: 25px;}
	.area_location .quick_menu .call img {width: 15rem; margin-right: 2rem;}
	.area_location .quick_menu .call a {padding-right: 0; display: block; margin-bottom: 8rem;} 
	.area_location .quick_menu .call span {padding-left: 0;}
	.area_location .quick_menu .call span::before {display: none;}
}