@charset "utf-8";
/* 
* content CSS Document
* KOWEB
*/

/* sub header */
#header{background:#fff; border-bottom:1px solid #ddd;}
.header_logo .logo_w{opacity:0;}
#header .gnb [data-gnb="1"]{color:#111;}


/* sub visual */
.area_subVisual{overflow:hidden; display:flex; justify-content:center; align-items:center; position:relative; margin-top:100rem; height:500rem; text-align:center; color:#fff; }
.area_subVisual::before{ content: ''; position: absolute; inset: 0; background: 50% / cover;}
.area_subVisual.about::before{ background-image:url(../images/content/sub_visual01.jpg);}
.area_subVisual.facility::before{ background-image:url(../images/content/sub_visual02.jpg);}
.area_subVisual.use::before{ background-image:url(../images/content/sub_visual03.jpg);}
.area_subVisual.lesson::before{ background-image:url(../images/content/sub_visual04.jpg);}
.area_subVisual.location::before{ background-image:url(../images/content/sub_visual05.jpg);}
.area_subVisual.board_notice::before{ background-image:url(../images/content/sub_visual06.jpg);}
.area_subVisual.common::before{ background-image:url(../images/content/sub_visual01.jpg);}
.area_subVisual .wrapper{display:flex; flex-direction:column; flex-wrap:wrap; height:100%;}
.area_subVisual .tit{display:flex; flex-direction:column; justify-content:center; height:calc(100% - 60rem); width:100%;}
.area_subVisual .tit h2{position:relative; font-size:var(--fs40); font-weight:500;}
.area_subVisual .tit h2:after{content:''; display:block; position:relative; margin:30rem auto; width:50rem; height:2px; background:#fff;}
.area_subVisual .tit p{font-size:18rem; opacity:0.8;}
.lnb{display:flex; align-items:center; width:100%; background:#fff; text-align:center; height:60rem;}
.lnb ul{margin: 0 auto; width:100%; }  
.lnb ul li {display:inline-block; padding:5rem 30rem;}
.lnb ul li a {font-weight:600; font-size:18rem; color:#aaa; transition:0.2s;}
.lnb ul li:hover a, 
.lnb ul li a.on{color:var(--primary);}
.lnb ul li a.on{font-weight:bold;}

.about .lnb,
.location .lnb,
.board_notice .lnb,
.about+.sub .sub_title,
.location+.sub .sub_title,
.board_notice+.sub .sub_title{display:none !important;}
.about .tit,
.location .tit,
.board_notice .tit{height:100%;}

@media(prefers-reduced-motion:no-preference){
	.area_subVisual::before{ animation: sub_visual_bg 1.8s both; }
	@keyframes sub_visual_bg {
		0%{ transform: scale(1.05); }
		100%{ transform: scale(1); }
	}
	.area_subVisual .inr *{ opacity: 0; animation: sub_visual_text .6s .2s both; }
	.area_subVisual .inr *:nth-child(2){ animation-delay: .4s; }
	@keyframes sub_visual_text {
		0%{ transform: translateY(20px); opacity: 0; }
		100%{ transform: translateY(0); opacity: 1; }
	}
}
@media(max-width:1279px){
	.area_subVisual{margin-top:80rem; height:350rem;}
    .area_subVisual .tit h2:after{margin:20rem auto;}
}
@media (max-width:767px){
	.lnb{overflow-x:auto; width:100%; overflow-y:hidden;}
	.lnb ul{display:table; margin:0 auto; table-layout:auto; overflow-y:hidden;}
	.lnb ul li{display:table-cell; padding:0 20rem; vertical-align:middle;}
	.lnb ul li a{display:block; padding:0; white-space:nowrap;}
}


/* common content */
#content{min-height:300px; padding:100rem 0;}
.sub_title{margin-bottom:70rem;}
.sub_title h2{text-align:center; font-size:var(--fs35); color:#111;}

.cont+.cont{margin-top:100rem;}
.cont_tit{margin-bottom:25rem; font-size:25rem; color:var(--primary);}
.cont_tit i{display:inline-block; font-size:20rem;}

.common_table{ border-top: 2px solid #222; text-align: center; }
.common_table :is(th, td){ padding: 14rem 1em 12rem; border: 1rem solid #e5e5e5; }
.common_table col:is(:nth-of-type(1), :nth-of-type(2)){ width: 18.33333333%; }
.common_table :is(th, td):first-child{ border-left: 0; }
.common_table :is(th, td):last-child{ border-right: 0; }
.common_table :is(thead, tfoot){ background: #f6f7f9; font-size: 17rem; font-weight: 500; }
#content table.table thead th:last-child[rowspan]{border-right:0; border-left:1rem dashed #cecece;}

#content table.table_st01{margin-top:0 !important}
#content table.table_st01 th{background:#f3f5f5 !important;}
#content table.table_st01 tr:first-child th{border-top:2px solid var(--primary) !important;}
#content table.table_st01 th, #content table.table_st01 td{padding:15rem 10rem; font-size:18rem;}
#content .table_ui{display:none; align-items:center; margin-top:12rem;}
#content .table_ui img{display:block; margin-top:-1rem; margin-right:8rem; width:45rem; opacity:0.4;}
#content .table_ui i{font-size:15rem; color:#aaa;}
#content .table .mo_br{display:none;}
#content .table strong{color:#d53232;}

p+p{margin-top:20rem;}
@media(max-width:1279px){
    #content{padding:60rem 0;}
    .cont+.cont{margin-top:80rem;}
}
@media (max-width:767px){
    #content{padding:60rem 0;}
    .sub_title{margin-bottom:40rem;}
    .cont+.cont{margin-top:60rem;}
    .cont_tit{font-size:24rem; margin-bottom:20rem;}
    #content .table_wrap{overflow-x:scroll;}
    #content .table_wrap.w540 table{width:540rem;}
    #content table.table_st01 th, #content table.table_st01 td{padding:12rem 5rem;}
    #content .table_ui{display:flex;}
    #content .table .mo_br{display:block;}
}


/* 성안웨스트 골프클럽 소개 */
.area_about{display:flex; align-items:center; justify-content:center;}
.area_about .img{width:400rem; height:480rem;}
.area_about .img img{display:block; width:100%; height:100%; object-fit:cover;}
.area_about .txt{margin-left:80rem;}
.area_about .txt h3{margin-bottom:20rem; font-size:35rem; color:#aaa;}
.area_about .txt h3 em{display:inline-block; color:var(--primary);}
.area_about .txt p{font-size:18rem; color:#444;}
@media(max-width:1279px){
    .area_about .txt{margin-left:60rem;}
}
@media(max-width:767px){
    .area_about{display:block;}
    .area_about .img{width:100%; height:auto;}
    .area_about .txt{margin-left:0; margin-top:30rem;}
    .area_about .txt h3{font-size:30rem;}
    .area_about .txt p > br{display:none;}
}


/* 성안웨스트 골프클럽 소개 */
.area_location .info{display:flex; margin-bottom:30rem; align-items:center; justify-content:space-between;}
.area_location h2{font-size:var(--fs30); color:var(--primary);}
.area_location ul{display:flex; justify-content:center;}
.area_location ul li+li{padding-left:50rem; margin-left:50rem; border-left:1px solid #ddd;}
.area_location ul li div{display:flex; padding:5rem 0; align-items:center;}
.area_location ul li .icon{display:flex; margin-right:10rem; align-items:center; justify-content:center; height:20rem;}
.area_location ul li .icon img{display:block; height:100%;}
.area_location ul li a{font-size:18rem; color:#444;}
.root_daum_roughmap_landing{width:100% !important;}
.root_daum_roughmap .wrap_map{height:450rem !important;}
.root_daum_roughmap .wrap_controllers,
.root_daum_roughmap .map_border{display:none;}
@media(max-width:1279px){
    .area_location h2{font-size:25rem;}
    .root_daum_roughmap .wrap_map{height:400rem !important;}
}
@media(max-width:767px){
    .area_location .info{display:block; margin-bottom:25rem;}
    .area_location h2{margin-bottom:20rem; text-align:center;}
    .area_location ul li+li{margin-left:20rem; padding-left:20rem;}
}





















/* vw 반응형을 활용한 사이트입니다
16px은 16rem처럼 단위를 바꿔서 사용해주세요
글씨 크기의 경우 base에 있는 변수 var(--fs16)을 활용하세요 */