@import url('/css/popup.css');

/* visual */
.area_visual{position:relative; margin:auto; padding-top:var(--header-height); background-size:cover; background-position:50%;}
.area_visual .swiper{height:700rem; border-radius:30rem;}
.area_visual .swiper-slide:before{content:''; position:absolute; display:block; top:0; left:0; width:100%; height:100%;}
.area_visual .swiper-slide.slide1:before{background:url(/images/main/main_06-1.jpg)no-repeat center/cover;}
.area_visual .swiper-slide.slide2:before{background:url(/images/main/main_04.jpg)no-repeat center/cover;}
.area_visual .swiper-slide.slide3:before{background:url(/images/main/main_05.jpg)no-repeat center/cover;}
.area_visual .swiper-slide.slide4:before{background:url(/images/main/main_03.jpg)no-repeat center/cover;}
.area_visual .swiper-slide-active:before{animation:visual_bg 3s both;}
.area_visual .inr{display:flex; align-items:center; height:100%;}
.area_visual .txt{margin-top:-90rem; color:#fff; opacity:0;}
.area_visual .swiper-slide-active .txt{animation:visual_txt 1.5s both;}
.area_visual .txt h3{font-size:var(--fs35); font-weight:500;}
.area_visual .txt h2{font-size:var(--fs50);}
.area_visual .swiper-pagination{position:absolute; margin-top:90rem; top:50%; bottom:-90rem; left:50%; transform:translate(-50%,-50%); max-width: calc(var(--inr) * 1rem); width: calc(var(--inr-width) * 100%); height:6rem; text-align:left; font-size:0;}
.area_visual .swiper-pagination-bullet{height:6rem; width:30rem; border-radius:5rem; margin-right:15rem; background:#fff; opacity:0.4;}
.area_visual .swiper-pagination-bullet-active{width:60rem; opacity:1;}
@keyframes visual_bg{
    0%{transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1);}
    100%{transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1);}
}
@keyframes visual_txt{
    0%{transform:translateX(30rem); opacity:0;}
    100%{transform:translateX(0); opacity:1;}
}
@media(max-width:1279px){
    .area_visual .swiper{height:70vh;}
}
@media(max-width:767px){
    .area_visual .swiper{border-radius:20rem; height:50vh}
    .area_visual .txt{margin-top:-60rem;}
    .area_visual .swiper-pagination{margin-top:60rem;}
}


/* 메인 공통 */
main{overflow:hidden;}
h2.main_tit{font-size:var(--fs40); color:#111; line-height:1.4; font-weight:500;}
h2.main_tit span{display:block; margin-bottom:12rem; font-size:18rem; font-weight:bold; color:var(--primary);}
h2.main_tit em{display:inline-block; color:var(--secondary); font-weight:bold;}
a.btn_more01{display:flex; align-items:center; justify-content:space-between; position:relative; padding:0 35rem; font-size:20rem; color:#111; font-weight:600; width:260rem; height:66rem; border-radius:35rem; box-shadow:15rem 15rem 40rem 12rem rgba(78,65,130,0.2); background:#fff;}
a.btn_more01 svg{display:block; width:20rem; fill:#aaa; transition:0.2s;}
a.btn_more02{display:block;}
a.btn_more02 svg{display:block; width:30rem; fill:#aaa; transition:0.2s;}
.quick .box{display:flex; justify-content:space-between; flex-direction:column; flex-wrap:wrap; position:relative; padding:30rem; width:300rem; height:170rem; border-radius:20rem;}
.quick .box:first-child{background:var(--secondary);}
.quick .box:last-child{background:var(--primary);}
.quick .box .icon{display:block; height:30rem; margin-right:auto;}
.quick .box svg{display:block; position:absolute; right:30rem; top:30rem; width:20rem; fill:#fff; opacity:0.5; transition:0.2s;}
.quick .box em{display:block; font-size:var(--fs25); font-weight:600; color:#fff;}
@media(hover:hover){
    a.btn_more01:hover svg,
    a.btn_more02:hover svg{fill:var(--secondary);}
    .quick .box:hover svg{opacity:1;}
}
@media(max-width:1279px){
    h2.main_tit{font-size:30rem;}
    .quick .box{padding:25rem;}
    .quick .box .icon{height:25rem;}
    .quick .box svg{top:28rem; right:25rem;}
}
@media(max-width:767px){
    h2.main_tit{font-size:28rem;}
    h2.main_tit span{margin-bottom:10rem; font-size:16rem;}
    a.btn_more01{padding:0 28rem; height:56rem; width:240rem;}
    a.btn_more01 svg{width:16rem;}
    a.btn_more02 svg{width:22rem;}
    .quick .box{padding:20rem; border-radius:15rem; width:calc(50% - 5rem) !important; height:120rem !important;}
    .quick .box .icon{height:22rem;}
    .quick .box svg{right:20rem; top:22rem;}
}


/* 협회소개 */
.area_about{padding:140rem 0;}
.area_about a.btn_more01{margin-top:60rem;}
.area_about img{display:block; position:absolute; top:-21%; right:0; width:565rem;}
@media(max-width:1279px){
    .area_about{padding:120rem 0;}
    .area_about img{top:-9%; width:45%;}
}
@media(max-width:767px){
    .area_about{padding:80rem 0;}
    .area_about .inr{padding-bottom:170rem;}
    .area_about a.btn_more01{margin-top:35rem;}
    .area_about img{top:auto; bottom:0; width:66%;}
}


/* 비전,사업 */
.area_vision-biz .inr-wide{display:flex; justify-content:space-between; margin:auto;}
.area_vision-biz .box{position:relative; width:calc(50% - 25rem);}
.area_vision-biz .box .img{display:block; margin-bottom:40rem; border-radius:30rem; overflow:hidden;}
.area_vision-biz .box .img img{display:block; width:100%;}
.area_vision-biz .box h2.main_tit{padding-left:60rem; font-weight:bold;}
.area_vision-biz .box .btn_more02{position:absolute; bottom:12rem; right:60rem;}
@media(max-width:1279px){
    .area_vision-biz .box{width:calc(50% - 10rem);}
}
@media(max-width:767px){
    .area_vision-biz .box{width:calc(50% - 5rem);}
    .area_vision-biz .box .img{margin-bottom:25rem; border-radius:15rem; height:130rem;}
    .area_vision-biz .box .img img{height:100%; object-fit:cover;}
    .area_vision-biz .box h2.main_tit{padding-left:15rem;}
    .area_vision-biz .box .btn_more02{right:15rem; bottom:7rem;}
}


/* 회원안내 */
.area_member{padding:140rem 0;}
.area_member .inr{display:flex; flex-direction:row-reverse; align-items:flex-end;}
.area_member .main_tit{position:absolute; left:0; top:0;}
.area_member .tab_wrap{position:relative; width:50%;}
.area_member .tab_btn{display:flex; margin-bottom:40rem;}
.area_member .tab_btn li{font-weight:500; font-size:20rem; color:#aaa; width:160rem; height:50rem; line-height:50rem; border-radius:30rem; border:2rem solid #ddd; text-align:center; cursor:pointer;}
.area_member .tab_btn li.active{font-weight:bold; color:var(--primary); border-color:var(--primary);}
.area_member .tab_btn li+li{margin-left:10rem;}
.area_member .tab_content{height:300rem;}
.area_member .tab_content ul{}
.area_member .tab_content ul li+li{margin-top:30rem;}
.area_member .tab_content ul li a{display:flex; align-items:center;}
.area_member .tab_content ul li .date{display:flex; flex-direction:column; align-items:center; justify-content:center; width:80rem; height:80rem; border-radius:18rem; border:2rem solid var(--secondary); color:var(--secondary); transition:0.3s; text-align:center; font-weight:600;}
.area_member .tab_content ul li .date .day{display:block; font-size:var(--fs30);}
.area_member .tab_content ul li .date .year{display:block; font-size:13rem;}
.area_member .tab_content ul li .txt{padding-left:25rem; width:calc(100% - 80rem);}
.area_member .tab_content ul li .txt em{display:block; margin-bottom:6rem; font-size:var(--fs22); color:#222; font-weight:600; transition:0.3s; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.area_member .tab_content ul li .txt i{display:block; font-size:16rem; color:#777; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.area_member .tab_content .btn_more02{position:absolute; right:0; top:10rem;}
.area_member .quick{display:flex; padding-right:80rem; width:50%;}
.area_member .quick .box+.box{margin-left:15rem;}
@media(hover:hover){
    .area_member .tab_content ul li a:hover .date{color:#fff; background:var(--secondary);}
    .area_member .tab_content ul li a:hover .txt em{color:var(--secondary);}
}
@media(max-width:1279px){
    .area_member{padding:120rem 0;}
    .area_member .tab_wrap{width:55%;}
    .area_member .tab_btn{margin-bottom:30rem;}
    .area_member .tab_btn li{width:140rem;}
    .area_member .tab_content{height:240rem;}
    .area_member .tab_content ul li+li{margin-top:15rem;}
    .area_member .tab_content ul li .date{width:70rem; height:70rem; border-radius:15rem;}
    .area_member .tab_content ul li .txt{width:calc(100% - 70rem)}
    .area_member .quick{padding-right:50rem; width:45%;}
    .area_member .quick .box{height:145rem;}
}
@media(max-width:767px){
    .area_member{padding:80rem 0;}
    .area_member .inr{display:block;}
    .area_member .main_tit{position:relative; margin-bottom:25rem;}
    .area_member .tab_wrap{width:100%;}
    .area_member .tab_btn{margin-bottom:20rem;}
    .area_member .tab_btn li{font-size:18rem; width:120rem; height:46rem; line-height:46rem;}
    .area_member .tab_content{height:auto;}
    .area_member .tab_content .btn_more02{top:14rem;}
    .area_member .tab_content ul li .txt{padding-left:15rem;}
    .area_member .tab_content ul li+li{margin-top:10rem;}
    .area_member .tab_content ul li .txt em{font-size:20rem}
    .area_member .quick{justify-content:space-between; margin-top:25rem; padding-right:0; width:100%;}
    .area_member .quick .box+.box{margin-left:0;}
}


/* 오시는길 */
.area_contact{position:relative;}
.area_contact .inr{display:flex; justify-content:space-between;}
.area_contact .txt{padding-top:50rem; width:calc(100% - 900rem);}
.area_contact .txt a.btn_more01{margin-top:60rem;}
.area_contact a.btn_more01.mo{display:none;}
.area_contact .map_wrap{width:900rem; overflow:hidden; border-radius:30rem; height:500rem;}
.root_daum_roughmap{width:100% !important; height:100%;}
.root_daum_roughmap .wrap_map{height:100%  !important;}
.root_daum_roughmap .wrap_controllers,
.root_daum_roughmap .map_border{display:none;}
.area_contact .obj{display:block; position:absolute; left:0; bottom:-15rem; width:485rem;}

/* 오시는길 > 전시회보러가기로 변경 */
.area_contact .exhibition{width:900rem; overflow:hidden; border-radius:30rem; height:500rem;}
.area_contact .exhibition img {max-width:100%;}

@media(max-width:1279px){
    .area_contact .obj{bottom:5rem; width:35%;}
    .area_contact .txt{padding-top:30rem; width:40%;}
    .area_contact .map_wrap{width:60%; height:380rem;}
}
@media(max-width:767px){
    .area_contact .obj{display:none;}
    .area_contact .inr{display:block;}
    .area_contact .txt{padding-top:0; margin-bottom:25rem; width:100%;}
    .area_contact .txt h2.main_tit > br{display:none;}
    .area_contact .txt a.btn_more01.pc{display:none;}
    .area_contact .map_wrap{width:100%; height:320rem;}
    .area_contact a.btn_more01.mo{display:flex; margin-left:auto; margin-top:25rem;}

	
	/* 오시는길 > 전시회보러가기로 변경 */
	.area_contact .exhibition{width:100%; height:320rem; }
	.area_contact .exhibition img {max-width:150%; margin:0 auto;}
}

/* 커뮤니티 */
.area_community{padding:140rem 0;}
.area_community .inr{display:flex;}
.area_community .notice{position:relative; width:780rem;}
.area_community .notice .btn_more02{position:absolute; top:52rem; right:0;}
.area_community .notice ul{display:flex; justify-content:space-between; margin-top:30rem;}
.area_community .notice ul li{width:calc(50% - 10rem);}
.area_community .notice ul li a{display:block; position:relative; padding:30rem; width:100%; border:1px solid #ddd; border-radius:20rem; transition:0.3s;}
.area_community .notice ul li a:after{content:'내용보기 +'; display:block; position:absolute; right:30rem; bottom:30rem; font-size:18rem; color:var(--secondary); font-weight:500; opacity:0; transition:0.3s;}
.area_community .notice ul li a em{display:block; margin-bottom:12rem; font-size:var(--fs22); color:#222; font-weight:600; transition:0.3s; overflow:hidden; text-overflow:ellipsis; text-align:left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; height:66rem;}
.area_community .notice ul li a p{font-size:16rem; color:#777; overflow:hidden; text-overflow:ellipsis; text-align:left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; height:48rem;}
.area_community .notice ul li a i{display:block; margin-top:30rem; font-size:13rem; color:#aaa;}
.area_community .quick_wrap{display:flex; justify-content:space-between; padding-left:80rem; width:calc(100% - 780rem); height:100%;}
.area_community .quick_wrap .quick{display:flex; flex-direction:column; justify-content:space-between;}
.area_community .quick_wrap .img{width:220rem; border-radius:20rem; overflow:hidden;}
.area_community .quick_wrap .img img{ width:100%;}
@media(hover:hover){
    .area_community .notice ul li a:hover{border-color:var(--secondary);}
    .area_community .notice ul li a:hover:after{opacity:1;}
    .area_community .notice ul li a:hover em{color:var(--secondary);}
}
@media(max-width:1279px){
    .area_community{padding:120rem 0;}
    .area_community .notice{width:65%;}
    .area_community .notice .btn_more02{top:46rem;}
    .area_community .notice ul li a{padding:25rem;}
    .area_community .notice ul li a em{height:60rem;}
    .area_community .quick_wrap{padding-left:50rem; width:calc(100% - 65%);}
    .area_community .quick_wrap .quick{width:100%;}
    .area_community .quick_wrap .quick .box{width:100%; height:162rem;}
    .area_community .quick_wrap .quick .box:last-child{margin-top:11rem;}
    .area_community .quick_wrap .img{display:none;}
}
@media(max-width:767px){
    .area_community{padding:80rem 0;}
    .area_community .inr{display:block;}
    .area_community .notice{width:100%;}
    .area_community .notice .btn_more02{top:40rem;}
    .area_community .notice ul{margin-top:25rem;}
    .area_community .notice ul li a{padding:20rem;}
    .area_community .notice ul li{width:calc(50% - 5rem);}
    .area_community .notice ul li a em{font-size:20rem;}
    .area_community .quick_wrap{margin-top:25rem; padding-left:0; width:100%;}
    .area_community .quick_wrap .quick{flex-direction:row;}
    .area_community .quick_wrap .quick .box:last-child{margin-top:0;}
}

/* dialog modal */
body:has(#dialog[open]){ overflow: hidden; }
.dialogBtn.show{ display: contents; background: 0; font-size: inherit; }
#dialog{ position: fixed; inset: 0; margin: auto; display: block; width: min(600px, 92vw); padding: 0; background: #fff; border: 0; z-index: 151; }
#dialog:not([open]){ visibility: hidden; opacity: 0; }
#dialog::backdrop{ display: none; }
.dialogHead{ display: flex; align-items: center; justify-content: space-between; height: 3.4375em; padding: .9375em; background: #686e82; box-sizing: border-box; color: #fff; }
.dialogBtn.close{ position: relative; width: 1.1875em; height: 1.1875em; background: url('/images/module/btn_close.png') no-repeat 50% / contain; font-size: inherit; }
.dialogBtn.close::before{ content: ''; position: absolute; inset: -5px; }
.dialogBody,
.dialogIframe{ overflow: auto; display: block; width: 100%; height: min(590px, calc(85vh - 3.4375em)); padding: .9375em; background: #fff; box-sizing: border-box; border: 0; }
.dialogBackdrop{ position: fixed; inset: 0; background: #000; opacity: .8; z-index: -1; }
@media(prefers-reduced-motion:no-preference){
	#dialog{ transition: opacity .4s, visibility .4s; }
	.dialogBackdrop{ transition: .4s; }
}