@import url("common.css");

/* 서브탑 */
#visual{position:relative; width:100%; height:600px; background:var(--black);}
#visual .visual_in {position:absolute; left:50%; top:60%; transform:translate(-50%,-50%); z-index:9; display:flex; flex-direction:column;}
#visual .v_txt {text-align:center; width:100%; order:2;}
#visual .v_txt h3{ color:var(--white); font-family:var(--eng); font-size: 65px; font-weight:700; line-height:120%; letter-spacing: -1.625px; text-transform: uppercase; transform:translateY(60px); opacity:0; animation:v_txt 1.0s 0.6s; animation-fill-mode:both;}
#visual .v_bg {position:absolute; left:0; top:0; width:100%; height:100%; overflow: hidden;}
#visual .v_bg .bg {position:absolute; left:0; top:0; width:100%; height:100%; transform: scale(1); animation: m_vsImg 1.8s;}
#visual .v_bg .bg.mo{display: none; z-index: 9;}

@keyframes m_vsImg {
	0% { -webkit-transform:scale(1.1); -ms-transform:scale(1.1); transform:scale(1.1); }
	20% { -webkit-transform:scale(1.1); -ms-transform:scale(1.1); transform:scale(1.1); }
	100% { -webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1); }
}
@keyframes v_txt {
	0% { transform:translateY(60px); opacity:0; }
	100% { transform:translateY(0); opacity:1; }
}

/**** 공통 css ****/
.w940 {max-width:940px; width: 100%; margin:0 auto;}
.marB20 {margin-bottom:20px;}
.mart20 {margin-top:20px;}

.pc_br {display: block !important;}
.mo_br {display: none !important;}
/**** 공통 css ****/

#contents {margin:0 auto 0;}

/**** 서브 lnb ****/
.sub_lnb{margin-top: 50px;}
.sub_lnb dl{display: flex; align-items:center;}
.sub_lnb.ver2 {margin-bottom:30px;}
.sub_lnb.ver2 dl {justify-content: center}
.sub_lnb.ver2 dl dd a.txt {font-family:var(--kor) !important; letter-spacing: -0.3px;}
.sub_lnb dl dt{padding: 0 18px; padding-left: 0 !important; }
.sub_lnb dl dt a{display: flex; align-items:center; width: 24px; font-size:0; }
.sub_lnb dl dt a:hover{opacity: 1;}
.sub_lnb dl dt a svg{width: 100%; height: 100%; }
.sub_lnb dl dt a svg path {transition:all .3s linear;}
.sub_lnb dl dt:hover a svg path {fill:var(--colorBlue)}
.sub_lnb dl dd{position:relative;}
.sub_lnb dl dd:before{content:''; display:block; width:1px; height:16px; background:rgba(34,34,34,.2); position:absolute; left:0; top:50%; margin-top:-7px;}
.sub_lnb dl dd .txt{padding:0 48px 0 18px; box-sizing:border-box; position: relative; font-size:14px; letter-spacing:0.28px; line-height:32px; color:var(--black); text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block; font-family:var(--eng); font-weight:600; }
.sub_lnb dl dd .txt:after{content:''; display:block; font-size:18px; box-sizing:border-box; font-family:var(--icon); content:'\e313'; position: absolute; right:18px; top:0; transition:all .3s linear;opacity: 0.5; font-weight:400; color:var(--black);}
.sub_lnb dl dd .txt.on:after{transform:rotate(180deg);}
.sub_lnb dl dd .txt:first-child{ padding:0 18px !important;}
.sub_lnb dl dd .txt:first-child::after {display: none;}
.sub_lnb dl dd .dlst{position: absolute; z-index: 999; margin: 10px 0 0; min-width:200px; width: 100%; background-color: var(--white); padding: 15px; box-sizing:border-box; display: none; box-shadow:5px 5px 15px rgba(0,0,0,0.05);}
.sub_lnb dl dd .dlst.on{display: block;}
.sub_lnb dl dd .dlst ul{}
.sub_lnb dl dd .dlst ul li {line-height: 120%; margin:8px 0 0; }
.sub_lnb dl dd .dlst ul li:first-of-type {margin:0;}
.sub_lnb dl dd .dlst ul li a{font-size:13px; transition:all .2s linear; line-height: 120%; letter-spacing:0; font-family:var(--eng); display:block;}
.sub_lnb dl dd .dlst ul li a:hover {color:var(--main);}
.sub_lnb dl dd .dlst ul li a.on{color:var(--main);}
.search_none .sub_lnb dl dd:last-child{display: none;}
/**** 서브 lnb ****/

/* 타이틀 */
#subtitle {padding: 150px 0 50px;}
#subtitle.noTop {padding-top:0 !important;}
#subtitle h3 {position:relative; color: var(--basic); font-family: var(--kor); font-size: 38px; font-weight: 700; line-height: 150%; letter-spacing: -1.05px;}

#about #subtitle h3 {font-size: 42px; font-weight: 400; line-height: 140%; letter-spacing: -1.05px;}
#about .about_cnt {display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
#about .about_cnt dt h4 { color: var(--colorLight); font-family: var(--eng); font-size: 50px; font-weight: 900; line-height: 120%; letter-spacing: -1.25px; margin-bottom: 20px;}
#about .about_cnt dt img { display: block; max-width: 100%; border-radius: 10px;}
#about .about_cnt dd h5 {color: var(--colorBk); font-family: var(--kor); font-size: 32px; font-weight: 700; line-height: 120%; letter-spacing: -0.8px; margin-top: 20px;}
#about .about_cnt dd p {color: var(--colorBk); font-family: var(--kor); font-size: 16px; font-weight: 400; line-height: 140%; letter-spacing: -0.4px; margin-top: 20px;}

#gallery .gallery_cnt ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
#gallery .gallery_cnt ul li img { max-width: 100%; border-radius: 10px;aspect-ratio: 1 / 1;object-fit: cover;}

.root_daum_roughmap .cont {display:none !important;}
#location .location_map {border:1px solid var(--border); box-sizing:border-box;}
#location .location_map .root_daum_roughmap {width:100%;}
#location .location_map .wrap_map{width:100%; height:479px;}
#location .location_map .map_border{display:none !important;}
#location .location_map .wrap_controllers{display:none !important;}

#location .location_cnt .location_info{position:relative; padding:50px; display:flex; flex-wrap:wrap; align-items:center; justify-content: space-between;}
#location .location_cnt .location_info .location_btn {text-align: right;}
#location .location_cnt .location_info ul li, #location .location_cnt .location_info .location_btn p { color: var(--colorBk);font-family: var(--kor); font-size: 20px; font-weight: 400; line-height: 160%; letter-spacing: -0.5px;}

.sticky-cont {display:flex;}
.sticky-cont .sticky_in {width:405px; padding:0 138px 0 0; box-sizing:border-box; }
.sticky-cont .cont_in {width: calc(100% - 405px);}

.sticky-cont .sticky_in .sticy_tit h4 {color: var(--colorBk); font-family: var(--eng); font-size: 32px; font-weight: 400; line-height: 120%; letter-spacing: -0.8px;}
.sticky-cont .sticky_in .sticy_tit h4 span {font-family: var(--kor); font-size: 22px;}
.sticky-cont .cont_in .cont_list dl {display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 20px;}
.sticky-cont .cont_in .cont_list dd .cont_desc {width: 460px; height: 245px; background: var(--grayBg); padding: 4px;box-sizing: border-box;}
.sticky-cont .cont_in .cont_list dd .cont_desc .tit { height: 42px; padding: 0 10px; margin-bottom: 4px; box-sizing: border-box;}
.sticky-cont .cont_in .cont_list dd .cont_desc .tit h5 {color: var(--colorBk); font-family: var(--kor); font-size: 16px; font-weight: 500; line-height: 42px; letter-spacing: -0.4px;}
.sticky-cont .cont_in .cont_list dd .cont_desc .txt {  height: 191px; background: var(--white); padding: 20px 15px; box-sizing: border-box;}
.sticky-cont .cont_in .cont_list dd .cont_desc .txt li {font-size: 14px; line-height: 160%; letter-spacing: -0.4px;}
.sticky-cont .cont_in .cont_list dd .cont_desc .txt li::before {content: "•"; font-weight: bold; display: inline-block; width: 1em;}
.sticky-cont .cont_in .cont_list dd .cont_desc .txt p {font-size: 12px; padding: 10px 15px;}
.sticky-cont .cont_in .cont_list .cont_desc2 {max-width: 940px; width: 100%; background: var(--grayBg); padding: 4px;box-sizing: border-box;}
.sticky-cont .cont_in .cont_list .cont_desc2 .tit { height: 42px; padding: 0 10px; margin-bottom: 4px; box-sizing: border-box;}
.sticky-cont .cont_in .cont_list .cont_desc2 .tit h5 {color: var(--colorBk); font-family: var(--kor); font-size: 16px; font-weight: 500; line-height: 42px; letter-spacing: -0.4px;}
.sticky-cont .cont_in .cont_list .cont_desc2 .txt { background: var(--white); padding: 20px 15px; box-sizing: border-box;}
.sticky-cont .cont_in .cont_list .cont_desc2 .txt ul {display: flex; flex-wrap: wrap;}
.sticky-cont .cont_in .cont_list .cont_desc2 .txt li {font-size: 14px; line-height: 160%; letter-spacing: -0.4px; margin-right: 20px;}
.sticky-cont .cont_in .cont_list .cont_desc2 .txt li::before {content: "•"; font-weight: bold; display: inline-block; width: 1em;}

.basic_tit h4 {color: var(--colorBk); font-family: var(--kor); font-size: 22px; font-weight: 600; line-height: 120%; letter-spacing: -0.8px; padding-top: 20px; margin-bottom: 20px;}
.basic-cont {display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 20px;}
.basic-cont dt img {max-width: 100%;}
.basic-cont dd .cont_desc {width: 460px; height: 245px; background: var(--grayBg); padding: 4px;box-sizing: border-box;}
.basic-cont dd .cont_desc .txt {  height: 100%; background: var(--white); padding: 20px 15px; box-sizing: border-box;}
.basic-cont dd .cont_desc .txt li {font-size: 16px; line-height: 180%; letter-spacing: -0.4px;}
.basic-cont dd .cont_desc .txt li::before {content: "•"; font-weight: bold; display: inline-block; width: 1em;}
.basic-cont dd .cont_desc .txt p {font-size: 16px; line-height: 180%; letter-spacing: -0.4px;}

.basic-cont2 {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px;}
.basic-cont3 {display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 20px;}
.basic-cont3 li img {max-width: 100%;}

.cont_desc3 {width: 100%; background: var(--grayBg); padding: 4px;box-sizing: border-box;}
.cont_desc3 .txt { background: var(--white); padding: 20px 15px; box-sizing: border-box;}
.cont_desc3 .txt p {font-size: 16px; line-height: 180%; letter-spacing: -0.4px;}
.img_area {width: 100%; text-align: center;}


select {font-size:1rem; color:var(--basic); -webkit-appearance: none; -webkit-border-radius: 0; border:1px solid var(--border); padding:0 15px; box-sizing:border-box; width: 50%; line-height:45px; outline:none;}
.input {font-size:1rem; color:var(--basic); -webkit-appearance: none; -webkit-border-radius: 0; border:1px solid var(--border); padding:0 15px; box-sizing:border-box; width: 50%; line-height:45px; outline:none;}
.input_file {display:block; font-size:1rem; color:var(--basic); -webkit-appearance: none; -webkit-border-radius: 0; border:1px solid var(--border); padding:0 15px; box-sizing:border-box; width: 50%; height:45px; line-height:45px; outline:none;}
.input.input_l{width: 100%;}
.textarea {font-size:1rem; color:var(--basic); border:1px solid var(--border); padding:15px; box-sizing:border-box; width: 100%; height: 250px; outline:none; -webkit-appearance: none; -webkit-border-radius: 0;}
.blind {font-size:0; line-height:0; width:0px; height:0px;}

.bbs_table {margin-top: 60px;}
.bbs_table .bbs_con { margin-bottom: 20px; width: 100%; text-align: left !important; border-top: 2px solid; color: var(--colorBk);}
.bbs_table .bbs_con tbody th {padding: 20px; background-color: #f6f6f6; color: var(--colorBk); font-size: 15px; font-weight: 500; border-bottom: 1px solid #BCBCBC; }
.bbs_table .bbs_con tbody td {padding: 20px; color: var(--basic); font-size: 14px; border-bottom: 1px solid #BCBCBC;}
.bbs_table select{width:100%;}
.bbs_table textarea { font-family:inherit; color:var(--basic); line-height:150%; letter-spacing:-0.5px; padding:15px; border: 1px solid var(--border); background-color:var(--white); box-sizing:border-box; -webkit-appearance: none; -webkit-border-radius: 0;}

.bbs_table .formBtn {text-align: center;}
.bbs_table .btn_area {display: flex; justify-content: space-between;}

/* .formBtn{text-align:center; padding:30px 0 0; font-size:0;} */
.bbs_table .btn_confirm{display:inline-block; vertical-align: top; padding: 0 36px; margin: 0; outline:none; cursor:pointer; width:195px; height:60px; box-sizing:border-box; text-align:left; transition:all .3s linear; border:1px solid var(--pointColor); background:var(--pointColor); position:relative; }
.bbs_table .btn_confirm:last-child{margin:0;}
.bbs_table .btn_confirm:before{content:''; display:block; width:0; height: 100%; background:var(--white); position:absolute; left:0; top:0; transition:all .3s linear;}

.bbs_table .btn_confirm span{display:block; position:relative; z-index: 1; font-size:16px; line-height:58px; letter-spacing:1.4px; font-weight:700; color:var(--white); transition:all .3s linear; position:relative; }
.bbs_table .btn_confirm span:before {transition:all .3s linear; display:block; content:'\f88d'; font-family:var(--icon); color:var(--white); font-weight:400; font-size:24px; position:absolute; right:0;  }

.bbs_table .btn_confirm:hover:before{width: 100%;}
.bbs_table .btn_confirm:hover span {color:var(--pointColor); }
.bbs_table .btn_confirm:hover span:before {color:var(--pointColor); }

.bbs_con .mo_line_wrap{display:none;}
.bbs_con .mo_line{display:none;}

@media all and (max-width: 680px) {
	.bbs_con {
        display: block; /* table 구조를 block으로 변경 */
        width: 100% !important;
    }
    .bbs_con tbody,
    .bbs_con tr,
    .bbs_con td {
        display: block; /* 각 셀을 세로로 쌓이게 함 */
        width: 100%;
    }

	.bbs_con th {display: none;}
    .bbs_con td {padding: 0 !important; border-bottom: 0 !important; text-align: left !important;}
    .bbs_con td.empty_table {text-align: center !important;padding: 20px 0 !important;}
    .bbs_con .pc_line{display:none !important;}
    .bbs_con .mo_line{display:block !important; position: relative; padding: 10px !important;}

	.bbs_con .mo_line_wrap {display: block !important;width: 100% !important;position: relative;}
    .bbs_con .mo_table_tr { 
        display: flex !important; /* 확실하게 flex 적용 */
        width: 100% !important;
        align-items: stretch; /* th와 td의 높이를 맞춤 */
        border-bottom: 1px solid #BCBCBC;
    }

    .bbs_con .mo_table_tr .table_th { 
        width: 80px; 
        font-weight: 500; 
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 6px !important;
    }

    .bbs_con .mo_table_tr .table_td { 
        flex: 1 !important; 
        padding: 6px !important;
        min-width: 0 !important; 
        text-align: left !important;
    }

    .bbs_con .mo_line { display: block; position: relative; text-align: left; padding: 5px; }


    .bbs_con .mo_table_tr .table_th { width: 100px; background: #f6f6f6; color: #333; font-weight: 500; padding: 12px; border-bottom: 1px solid #dee2e6; }
    .bbs_con .mo_table_tr .table_td { 
        width: calc(100% - 100px); /* 1. 공백 추가 */
        flex: 1;                   /* 2. 남은 공간을 꽉 채우도록 설정 */
        padding: 12px; 
        border-bottom: 1px solid #f1f1f1; 
        text-align: left;          /* 3. 부스명 등 내용이 길어질 수 있으므로 왼쪽 정렬 추천 */
        color: #444; 
        word-break: break-all;     /* 4. 내용이 너무 길 때 줄바꿈 처리 */
    }
    /* 2. 마지막 줄(table_tr)에 속한 셀들의 보더만 제거합니다. */
    .bbs_con .mo_line .table_tr:last-child .table_th {
        border-bottom: 1px solid #f1f1f1; 
    }
    .bbs_con .mo_line .table_tr:first-child {
        border-top: 1px solid #f1f1f1; 
    }


    .bbs_con .mo_line .table_tr { 
        width: 100%;
        display: flex;
        align-items: stretch;
    }

    .input_date { width: 100%; border:1px solid var(--border); background-color:var(--white); padding:0 5px !important; font-family:inherit; height:32px !important; box-sizing:border-box; -webkit-appearance: none; -webkit-border-radius: 0;}
}


/*******************************************************************************
    @media 1350px
*******************************************************************************/
@media all and (max-width:1700px){



}



/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){




}


/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){

	.pc_br {display: none !important;}
	.mo_br {display: block !important;}

	#visual { height:330px !important;}
	#visual .v_txt h3{  font-size: 36px; letter-spacing: -0.9px;}
	#visual .v_bg .bg.pc{display: none;}
	#visual .v_bg .bg.mo{display: block;}

	#subtitle h3 { font-size: 32px; line-height: 140%; letter-spacing: -0.8px;}

	#about #subtitle h3 {font-size: 36px; letter-spacing: -0.9px;}
	#about .about_cnt {  grid-template-columns: repeat(1, 1fr); gap: 50px;}
	#about .about_cnt dt img {width: 100%;}

	#gallery .gallery_cnt ul { grid-template-columns: repeat(1, 1fr); gap: 20px;}

	#location .location_map .wrap_map{ height:380px;} 
	#location .location_cnt .location_info{position:relative; padding:30px 25px;}
	#location .location_cnt .location_info .location_btn {text-align: left; margin-top: 30px;}
	#location .location_cnt .location_info ul li, #location .location_cnt .location_info .location_btn p { font-size: 16px; letter-spacing: -0.4px;}

	.sticky-cont {flex-wrap: wrap;}
	.sticky-cont .sticky_in { width: 100%;}
	.sticky-cont .cont_in {width: 100%;}

	.sticky-cont .sticky_in .sticy_tit h4 {font-size: 26px; margin-bottom: 20px;}

	.sticky-cont .cont_in .cont_list dl {grid-template-columns: repeat(1, 1fr); gap: 20px;}
	.sticky-cont .cont_in .cont_list dt img {width: 100%;}
	.sticky-cont .cont_in .cont_list dd .cont_desc {width: 100%; height: auto; }
	.sticky-cont .cont_in .cont_list dd img {width: 100%;}
	.sticky-cont .cont_in .cont_list dd .cont_desc .tit h5 { font-size: 15px;}
	.sticky-cont .cont_in .cont_list dd .cont_desc .txt {height: auto;}
	.sticky-cont .cont_in .cont_list dd .cont_desc .txt li {font-size: 13px;}
	.sticky-cont .cont_in .cont_list dd .cont_desc .txt p {font-size: 11px; padding: 8px 15px;}
	.sticky-cont .cont_in .cont_list .cont_desc2 .tit h5 {font-size: 15px;}
	.sticky-cont .cont_in .cont_list .cont_desc2 .txt li {font-size: 13px; margin-right:0;}

	.basic-cont {grid-template-columns: repeat(1, 1fr);margin-bottom: 20px;}
	.basic-cont li img {max-width: 100%;}
	.basic-cont dd .cont_desc {width: 100%; height: auto; }
	.basic-cont dd .cont_desc .txt li {font-size: 15px;}
	.basic-cont dd .cont_desc .txt p {font-size: 15px;}

	.basic-cont2 {grid-template-columns: repeat(2, 1fr);}
	.basic-cont2 img {width: 100%;}
	.basic-cont3 {grid-template-columns: repeat(2, 1fr);}
	
	.cont_desc3 .txt p {font-size: 15px;}

	.img_area img {width: 100%;}
}


/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:480px){




}