@charset "utf-8";




main {
overflow-x: hidden;
}


#AreaMain h2 { font-size: var(--fz-60); letter-spacing: -0.01rem;  }



#BannerWrap { position: relative; height:100vh; overflow: hidden; }

#BannerWrap .mainBanner {height: 100%; overflow: hidden;background: #f9f9f9;  }
#BannerWrap .mainBanner video { 
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#BannerWrap .vdo_bx { position: relative;  z-index: 1; }
#BannerWrap .vdo_bx:after { content:''; position: absolute; top: 0; left:0; width: 100% ; height: 100%; display: block; background: linear-gradient(179.01deg, rgba(0, 0, 0, 0.9) 6.54%, rgba(0, 0, 0, 0.3) 55.19%);
z-index: 3;}

#BannerWrap  .mainBanner .swiper-slide  img{ width: 100%; height: 100%; object-fit: cover; }
#BannerWrap .main_title {width: 250px;   position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);  z-index: 8}

#BannerWrap .mainBanner_btnbx {   display: flex;  gap:1rem; justify-content: center; align-items: center; margin-top: 2rem;  }
#BannerWrap .mainBanner_btnbx > div {position: static ; cursor:pointer; }
#BannerWrap .mainBanner_btnbx .swiper-pagination  { width: 200px !important;   }


#BannerWrap .mainBanner_btnbx .swiper-pagination  .swiper-pagination-progressbar-fill {background: var(--secondary-white); }




/********************************배너 end********************************/



#section1 {position: relative; height: 100vh;  background: url(../images/main/sec1_bg.svg)no-repeat right bottom; padding: 16.2rem 0 0 0;   }
#section1:before{ content:''; position: absolute; top: 0; left:0; width: 100%; height: 100%;  display: block; border-radius: 50rem 0 0 0; background: rgba(0, 82, 190, 0.06); z-index: -1;  }
#section1 .s1_container {display: flex; justify-content: space-between;  } 
#section1 .s1_container h2 { margin-bottom: 3.4rem;   }
#section1 .s1_container p { font-size: var(--fz-20);  }
#section1 .s1_infobox  { margin-top: 6rem; display: flex; flex-direction: column; gap:1.4rem;  }
#section1 .s1_infobox h5 {  display: flex; align-items: center; gap:1rem ; font-size:var(--fz-32) ;font-weight: 700; margin-bottom: 1.6rem; }
#section1 .s1_container .s1_infobox p {font-size: var(--fz-24);}
#section1 .s1_infobox > div {display: flex; align-items: center; gap:2rem; }

#section1 .s1_container a { margin-top:3rem; }
.resv_Btn   { display: inline-block;
    position: relative;
    overflow: hidden;
    z-index: 1;

    font-size: var(--fz-24);
    border-radius: var(--border-radius-m);
    border: 1px solid var(--primary);
    padding: 1.2rem 2.6rem;
    color: var(--primary);
    text-decoration: none;
    transition: color .4s ease, transform .3s ease; }

.resv_Btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s cubic-bezier(.77,0,.18,1);
    z-index: -1;
}

.resv_Btn:hover {
    color: #fff;
    transform: translateY(-2px);
}

.resv_Btn:hover::before {
    transform: scaleX(1);
}
.resv_Btn:active {
    transform: translateY(0);
}

#section1 .s1_slidewrap { width: 560px;  position: relative;  overflow: hidden; }
#section1 .s1_slidewrap h3 { font-size: var(--fz-40); margin-bottom: 2.2rem; }

#section1 .s1_slidewrap .s1_weekslide  {overflow: hidden;}

#section1 .s1_slidewrap .swiper-slide { line-height: 0;  border-radius: 1.5rem; overflow: hidden; line-height: 0; aspect-ratio: 1 / 1;  }
#section1 .s1_slidewrap .swiper-slide a {display: block;  width: 100%;  height: 100%; margin-top: 0;  }
#section1 .s1_slidewrap .swiper-slide img { width: 100%; height: 100%; object-fit: cover;  }

#section1 .s1_slidewrap .s1_btnbx { position: absolute; top:0.4rem ; right:0; display: flex; gap:1rem; }

#section1 .s1_slidewrap .s1_btnbx > div  { cursor: pointer;}

#section2 { padding: 10.4rem 0 ; }
#section2 .s2_container { display: flex;  gap:12.6rem; justify-content: space-between;    align-items: flex-start; }
#section2 .s2_container h3 { font-size: var(--fz-50) ; margin-bottom: 3.2rem; }
#section2 .s2_container .s2_noti_wrap {position: relative; }
#section2 .s2_container .s2_noti_wrap .more  { position: absolute; top:2rem ; right:0; }

#section2 .s2_noti_list { display: flex; flex-wrap: wrap; gap:2rem;  width: 860px; }
#section2 .s2_noti_list  > div {padding: 4.2rem 1.6rem; width: calc( 50% - 1rem); border-bottom: 1px solid #dbdbdb; min-width: 420px;  }
#section2 .s2_noti_list  > div:nth-child(1) { border-top:2px solid #333; }
#section2 .s2_noti_list  > div:nth-child(2) { border-top:2px solid #333; }
#section2 .s2_noti_list a {font-size: var(--fz-24); ;letter-spacing: -0.03rem ;font-weight: 600; margin-bottom: 4rem;display: block; transition: all 0.3s ease;   }
#section2 .s2_noti_list a:hover {color: var(--primary)}
#section2 .s2_noti_list span {font-size: var(--fz-16); color:#787878 }
#section2 .s2_container .s2_slide_wrap {  width: 450px; }

.s2_slide_wrap { position: relative; }
.s2_eventslide {width: 450px; height: 450px; border-radius: 2rem ; overflow: hidden;   }
.s2_eventslide img {width: 100%; height: 100%; object-fit: cover ;}

.s2_btnbx { display: flex; gap:1rem;    justify-content: flex-end; margin-bottom: 1.6rem; }

.s2_btnbx  > div {cursor: pointer;}

#section3 { padding: 12rem 0;  position: relative; overflow: hidden;  }

.s3_bg{
position:absolute;
inset:0;
background: url(../images/main/s3_bg.png)no-repeat bottom center;
background-size: cover;
z-index: -1;
  animation: floatUpDown 4s ease-in-out infinite;
will-change: transform;
} 

@keyframes floatUpDown{
    0%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(-10%);
    }
    100%{
        transform: translateY(0);
    }
} 

.s3_container {position: relative; }
.s3_top  { position: absolute; top: 7rem; left: 7rem;  z-index: 2; display: flex; gap:6.4rem; align-items: center; }
.s3_top button{ font-size: var(--fz-24);   position: relative; color:var(--text-white); padding: 0 0.4rem 0.2rem 0.4rem}
.s3_top button:hover , .s3_top button.on { border-bottom: 2px solid var(--secondary-white); font-weight: 700; }
.s3_top button:before{ content:''; position: absolute; top: 1.6rem;  left:-3.2rem; width: 5px; height: 5px; border-radius: 50%; display: block; background: var(--secondary-white)}
.s3_exslide { z-index: 1 ; background: #009EE2;  height: 100%; }

.s3_top button:first-child:before {display: none; }
.s3_exslide .s3_card {  display: flex; align-items: center; height: 500px; overflow: hidden;    }
.s3_exslide .s3_card .txtbx { padding: 8rem 7rem 0 7rem; width: 50%;   display: flex; flex-direction: column; }
.s3_exslide .s3_card .txtbx a { display: block; color:var(--text-white) ; font-weight: 700; font-size: var(--fz-36);  line-height: 1.2; margin-bottom: 8.6rem;   }
.s3_exslide .s3_card .txtbx p { color:var(--text-white) ; font-size: var(--fz-24);   font-weight: 400; letter-spacing: -0.03rem }
.s3_exslide .s3_card .txtbx span { margin-top: 1rem; ;font-size: var(--fz-18); color:var(--text-white) ;} 
.s3_exslide .s3_card .imgbx { margin-left: 1px;    overflow: hidden;}

.s3_exslide .s3_card .imgbx{

    width: 50%;
position: relative;
overflow: hidden;
aspect-ratio: 719 / 500;

}
 

#section3 .s3_card .imgbx img{
width:100%; height: 100%; object-fit: cover;
display:block; 
will-change: transform; 
}


.s3_exslide .s3_card .imgbx::after{
content:'';
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
background:#009EE2;
transform:translateX(0);
transition:1s cubic-bezier(.77,0,.18,1);
z-index:2;
pointer-events:none;
}

.s3_card .imgbx::after{
    content:'';
    position:absolute;
    inset:0;
    background:#009EE2;
    z-index:2;
    transform:translateX(0);
}

.s3_card.motion .imgbx::after{
    animation: s3Reveal 1s cubic-bezier(.77,0,.18,1) forwards;
}

@keyframes s3Reveal{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-100%);
    }
}


.s3_tabcont {
display: none;
}

.s3_tabcont.on {
display: block;
}




.quickArea {  position: fixed; z-index: 99; right:3%; bottom: 3%; }
.circle_logo{
    position:relative;
    width:200px;
    height:200px;
    cursor: pointer;
}

.rotate_text{
    position:absolute;
    inset:0;
    animation:circle_rotate 12s linear infinite;
}

.rotate_text svg{
    width:100%;
    height:100%;
    overflow:visible;
}

.rotate_text text{
    fill:#c5c5c5;
    font-size:13px;
    font-weight:100;
    letter-spacing:2px;
}

.center_circle{
    position:absolute;
    inset:42px;
    background:#444;
    border-radius:50%;
    transition:  all 0.3s ease;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

.center_circle p {
    margin-top:0.8rem;
    color:#fff;
    font-size: var(--fz-14);
}


.circle_logo:hover .center_circle {background:var(--primary);} 

@keyframes circle_rotate{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}



.circle_contens {  position: absolute; bottom: 200px; ; width: 200px;  border-radius: 5rem 5rem 5rem 0 ; background: #474747; padding: 4rem 2.6rem 4rem 2.6rem;  
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all .35s ease;
    pointer-events: none;}

    .circle_contens.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
} 
.circle_contens a {display: flex; padding: 1.2rem ;gap: 2rem; align-items: center; color:#fff; font-weight: 300;border-bottom: 1px solid #dbdbdb; cursor: pointer;   }
.circle_contens a:hover { font-weight: 700;  }
.quick_close { position: absolute; top: 2.6rem; right:2.6rem; ;}


/********************************서브********************************/

#AreaSub {  margin-top: 149px; position: relative; z-index: 1; }
/***서브페이시 상단 메뉴*****/
.SNavWrap{
border-top:1px solid #e5e5e5;
border-bottom:1px solid #e5e5e5;
background:#f8f8f8;
}

.SNavWrap .nav_container { height:60px;
display:flex;
align-items:center;}


.SNavWrap .snav_home:after { content:' '; position: absolute; top:50%; transform: translateY(-50%); left:0 ; width: 1px; height: 20px; display: inline-block; background: #787878 }

.SNavWrap .ver_line  { position: relative;  display: block; }
.SNavWrap .ver_line:before { content:' '; position: absolute; top:50%; transform: translateY(-50%); right:0 ; width: 1px; height: 20px; display: inline-block; background: #787878 }

.SNavWrap .snav_home{
width:60px;
height:60px;
display:flex;
align-items:center;
justify-content:center;
}



.SNavWrap .sub_depth1,
.SNavWrap .sub_depth2,
.SNavWrap .sub_depth3{
position:relative;
min-width:280px;
}

.SNavWrap .depth_btn{
width:100%;
height:60px;font-size: var(--fz-16);
padding:0 50px 0 20px;
border:0;
background:none;
text-align:left;
cursor:pointer;
position:relative;
}

.SNavWrap .depth_btn:after{
content:'';
position:absolute;
top:50%;
right:20px;
width:8px;
height:8px;
border-right:1px solid #333;
border-bottom:1px solid #333;
transform:translateY(-70%) rotate(45deg);
transition:.3s;
}

.SNavWrap .depth_btn.active:after{
transform:translateY(-30%) rotate(-135deg);
}

.SNavWrap .depth_list{
display:none;
position:absolute;
left:0;
top:60px;
width:100%;
background:#fff;
border:1px solid #ddd;
z-index:100;
}

.SNavWrap .depth_list li a{
display:block;
padding:14px 20px;
transition:.2s; font-size: var(--fz-14);
}

.SNavWrap .depth_list li a:hover{
background:#f7f7f7;
}









.share_section { padding: 170px 0 500px 0 ; ;background: url(../images/contents/sub_common_bg.png)no-repeat bottom right  }


.watch1Wrap .inner {display: flex; flex-direction:column; justify-content: center ; 
align-items: center;    height: 100%;  }

.watchWrap  {  }
.sub_container { height: 100%;  width: 100%;    }



.S_titbx { display: flex; flex-direction: column; align-items: center; width: 100%;   margin-bottom: 9rem; }
.S_titbx h3  { font-size: var(--fz-42);  font-weight: 700; margin-bottom: 3rem;} 
.S_titbx .sub_category {  display: flex; align-items: center;  
justify-content: center; gap: 1rem; }
.S_titbx .sub_category span {font-size:  var(--fz-16);  color:#787878 }
.S_titbx .sub_category a {font-size:  var(--fz-16); color:#787878 }

.contentBox { width: 100%; border-top: 2px solid #333; padding-top: 70px; }



.watch1Wrap .contentBox { width: 100%; border-top: 2px solid #333;  display: flex; flex-direction: column;  gap: 13.4rem }

.watch1_cont { display: flex;  flex-direction: column;  width: 100%; }
.watch_box { display: flex; align-items: center; padding: 7rem; border-bottom: 1px solid #dbdbdb;    }
.watch_box .titbx { width : 40rem;  display: flex ; gap: 3.8rem; align-items: center;   font-weight: 700; }
.watch_box .titbx p {font-size: var(--fz-32); }
.watch_box .txtbx { width:  calc( 100% - 40rem); display: flex;  flex-direction: column; gap:2.4rem; }
.watch_box .txtbx h4 { font-size: var(--fz-46); font-weight: 800; letter-spacing: -0.3rem; display: flex; align-items: center; gap: 0.8rem ;   }
.watch_box .txtbx h4 span {font-size:var(--fz-28); font-weight: 200;  }
.watch_box .txtbx h5 {font-size: var(--fz-32); letter-spacing: -0.1rem  }
.watch_box .txtbx h5 span { font-weight: 700 ;padding: 0 0.4rem; border-bottom: 3px solid var(--primary); color: var(--primary); line-height: 1.2; }
.watch_box .txtbx p { font-size: var(--fz-20); line-height: 1.8;}



.watch1_cont h4 { font-size: var(--fz-36); font-weight: 700; }
.warried_list { display: flex; flex-wrap: wrap; gap:4.4rem;  margin-top: 4rem;    }
.warried_list  > div { border: 1px solid #dbdbdb;  width: calc( 50% - 2.2rem) ;  padding: 3.4rem 5rem;   display: flex;  align-items: center; gap:4rem;  }




.watch2Wrap {} 
.watch2_cont { }




.watch3Wrap .contentBox  {display: flex; flex-direction: column; gap:10rem;  }

.watch3_cont .sub_tabwrap{ margin-top: 6rem;  }

.sub_tabwrap {margin-bottom: 6rem; }
.sub_tabwrap .tabbx { display: flex ;  align-items: center; width: 100%;    }
.sub_tabwrap .tabbx > a {flex: 1; font-size: var(--fz-20);  text-align: center;  padding: 2rem 1rem; font-weight: 400; border-bottom:2px transparent;  border: 1px solid var(--primary-hover) ; transition: all 0.3s ease ; color :  var(--primary-hover)}
.sub_tabwrap .tabbx > a:hover { font-weight: 700;  background:  var(--primary-hover);  color:#fff;}
.sub_tabwrap .tabbx > a.on { font-weight: 700;  background:  var(--primary-hover);  color:#fff; }

.watch2_list { border-top: 1px solid #333; margin-top: 60px;  }


.watch3_cont .imgbx{position: relative; width: 100%; height: 100%; }
.watch3_cont .imgbx img{ width: 100%; }
.watch3_cont .imgbx .loca {position: absolute;  border-radius: 20px 5px 20px 5px; border: 3px solid var(--primary);  width: 300px; height: 80px; z-index: 4; background: url('../images/contents/map_icon.svg')no-repeat 20px center #fff;  padding: 0 20px 0 80px; ; display: flex; align-items: center; justify-content: space-between; font-size: var(--fz-20);  color:var(--primary) ;  font-weight: 500;  }
.watch3_cont .loca p {font-size: var(--fz-20); }
.watch3_cont .imgbx .loca:hover { background-color: #F4FBFF; font-weight: 700; }
.watch3_cont .loca.loca1 {  left:39%; top: 15%; }

.watch3_cont .loca.loca1 span img { transform: rotate(180deg);} 
.watch3_cont .loca.loca2 {  right:29%; top: 61%;}
.watch3_cont .loca.loca2 span img { transform: rotate(-90deg);} 



.watch3_cont .loca.loca3 { left:9%; top: 50%;}
.watch3_cont .loca.loca3 span img { transform: rotate(-90deg);} 
 

.map_imgbx .root_daum_roughmap .wrap_map  { height: 500px !important; }
.map_imgbx .root_daum_roughmap .cont .section {display: none; ;}

.map_imgbx .root_daum_roughmap .wrap_controllers {display: none; ;}


.w3_infoBox {
position: relative;
height: auto;
padding: 42px 70px;
background: #FAFAFA;
}
.w3_infoBox .floor {  border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center;  font-size: var(--fz-40);  color:#fff;   font-weight: 600; width: 100px; height: 100px; }


.w3_infoBox .imgbx {
position: relative;
width: 100%;
}

.w3_infoBox .imgbx > img {
width: 100%;
display: block;
}

/* 번호 마커 */
.w3_infoBox  .w3_num {
position: absolute;
z-index: 3;

transform: translate(-50%, -50%);
width: 40px;
height: 40px;
border: 1px solid var(--primary);
background: var(--primary);
color: #fff;

display: flex;
align-items: center;
justify-content: center;

font-size: 24px;
font-weight: 500;
cursor: pointer;
transition: all .3s ease;
}

.w3_infoBox .w3_num:hover,
.w3_infoBox .w3_num.on {
background: #fff;
color: var(--primary);
}

.w3_s1 { left:48%; top: 72%; }
.w3_s2 { left: 15%; top: 74%; }
.w3_s3 { left: 80%; top: 74%; }
.w3_s4 { left: 50%; top: 30%; }
.w3_s5 { left: 72%; top: 35%; }
.w3_s6 { left: 20%; top: 60%; }
.w3_s7 { left: 76%; top: 60%; }


/* 툴팁 */
.watch3_cont .w3_infoBox .loca {
position: absolute;
  transform: translateY(-50%);
z-index: 5;
width: 250px;
min-height: 70px; height: auto; 
padding: 10px 20px 10px 80px;
border-radius: 20px 5px 20px 5px;
border: 3px solid var(--primary);
background: url('../images/contents/map_icon.svg') no-repeat 20px center #fff;

opacity: 0;
visibility: hidden;
pointer-events: none;

transition: opacity .25s ease;

display: flex;flex-direction: column ; gap:0.6rem;
justify-content: center;
align-items: flex-start;
}

.w3_infoBox .loca.active {
opacity: 1;
visibility: visible;
}

.w3_infoBox .loca h6 {

color: var(--primary);
font-weight: 700;
}

.w3_infoBox .loca p {
margin-top: 4px;
font-size: var(--fz-16);
color: #787878;
font-weight: 400;
word-break: keep-all;
}


.watch3_cont .w3_infoBox .loca1 { left: calc(48% + 30px); top: 72%; }

.watch3_cont .w3_infoBox .loca2 { left: calc(15% + 30px); top: 74%; }
.watch3_cont .w3_infoBox .loca3 { left: calc(80% + 30px); top: 74%; }
.watch3_cont .w3_infoBox .loca4 { left: calc(50% + 30px); top: 30%; }
.watch3_cont .w3_infoBox .loca5 { left: calc(72% + 30px); top: 35%; }

.watch3_cont .w3_infoBox .loca6 { left: calc(20% + 30px); top: 60%; }
.watch3_cont .w3_infoBox .loca7 { left: calc(76% + 30px); top: 60%; }




.watch3_cont .w3_infoBox .loca p {
white-space:normal;
word-break:keep-all; color:#787878; font-weight: 400;  font-size:  var(--fz-16);}

.w3_txtbx { margin-top: 9.4rem; }
.watch3_cont h5 { font-size: var(--fz-42); align-items: flex-end; font-weight: 700; display: flex;  gap:1rem;   margin-bottom: 4.8rem; }
.w3_txtbx > div {display: flex; align-items: center;     flex-wrap: wrap;; }
.w3_txtbx > div .txt { display: flex; align-items: center; gap:1rem; flex:1;    flex-wrap: wrap;  }
.w3_txtbx > div .txt .num {   display: flex; align-items: center; justify-content: center; font-size: var(--fz-24); background: var(--primary); color:#fff; font-weight: 500; width: 40px; height: 40px; display: flex;  align-items: center; gap:2rem; }
.w3_txtbx > div .txt  p { font-size: var(--fz-22); font-weight: 500; }


.w3_infoBox.floor2 { margin-top: 16rem; }


.w3_2_conbox .w3_infoBox  { padding:0; }
.w3_2_tbox { margin-top: 6rem; align-items: flex-start !important;
flex-direction: column; gap:2rem;    flex-wrap:wrap;}
.w3_2_tbox .txt { margin-bottom:3.6rem; }
.w3_2_tbox .txt p:last-of-type{ font-size: var(--fz-18);  font-weight:400;
width:100%;
}

.w3_s9 { right:10%; top: 84%; }
.w3_s10 { left: 56%; top: 78%; }
.w3_s11 { left: 72%; top: 46%; }
.w3_s12 { left: 60%; top: 50%; }
.w3_s13 { left: 22%; top: 35%; }
.w3_s14 { left: 26%; top: 20%; }


.watch3_cont .w3_2_conbox .imgbx .loca {   justify-content: center; }
.watch3_cont .w3_infoBox .loca9 { right: calc(13% + 30px); top: 84%; }
.watch3_cont .w3_infoBox .loca10 { left: calc(56% + 30px); top: 78%; }
.watch3_cont .w3_infoBox .loca11 { left: calc(72% + 30px); top: 46%; }
.watch3_cont .w3_infoBox .loca12 { left: calc(60% + 30px); top: 50%; }
.watch3_cont .w3_infoBox .loca13 { left: calc(22% + 30px); top: 35%; }
.watch3_cont .w3_infoBox .loca14 { left: calc(26% + 30px); top: 20%; }




.watch4Wrap .watch1_cont { border-top:  1px solid #333;  margin-top: 6rem; }



.mid_tit { display:flex; gap:2rem; align-items:flex-end; margin-bottom: 6rem;   }




.exhi2_cont .imgbx{position:relative;  }
.exhi2_cont .txtbx {   padding-top:6rem; }
.exhi2_cont .txtbx p {font-size: var(--fz-20); line-height: 2;  }
.expot span {line-height: 1.1; font-size: var(--fz-14) ; font-weight:600; color:var(--primary);  }
.expot_icon { width: 34px; height: 40px; background: url('/common/images/contents/map_icon.svg')no-repeat top center;  }
.expot{
position:absolute;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
width:100px;
height:100px;
border-radius:50%;
background:#fff;
border:2px solid var(--primary);
gap:.2rem;
cursor:pointer;
transition:all .35s ease;
z-index:2;
gap: 0.6rem

}

.expot::before{
content:"";
position:absolute;
inset:-8px;
border:2px solid var(--primary);
border-radius:50%;
opacity:0;
}

.expot:hover{
background:var(--primary);
transform:translateY(-5px);
box-shadow:0 12px 25px rgba(0, 143, 255, .25);
}

.expot:hover span{
color:#fff;
}


.expot:hover::before{
animation:ring 1s ease infinite;
}

@keyframes ring{
0%{
	transform:scale(1);
	opacity:.7;
}
100%{
	transform:scale(1.25);
	opacity:0;
}
}


.expot1 { top: 56%; left: 36%; } 
.expot2 { top: 26%; left: 39%; } 
.expot3 { top: 40%; left: 33%; } 
.expot4 { top: 20%; left: 19%; } 
.expot5 { top: 20%; right: 22%; } 
.expot6 { top: 40%; right: 18%; 
border:2px solid var(--secondary-mint); }
.expot6 span { color: var(--secondary-mint)  }

.expot6 .expot_icon { width: 34px; height: 40px; background: url('/common/images/contents/map_icon2.svg')no-repeat top center;  } 
.expot7 { top: 32%; right: 10%;  
border:2px solid var(--secondary-mint);}
.expot7 span { color: var(--secondary-mint)  }

.expot.expot7 .expot_icon { width: 34px; height: 40px; background: url('/common/images/contents/map_icon2.svg')no-repeat top center;  } 

.expot.expot6::before , .expot.expot7::before {
content:"";
position:absolute;
inset:-8px;
border:2px solid var(--secondary-mint);
border-radius:50%;
opacity:0;
}




.expot.expot6:hover , .expot.expot7:hover{
background:var(--secondary-mint);
transform:translateY(-5px);
box-shadow:0 12px 25px rgba(53, 230, 132, 0.555);
}



.expot:hover .expot_icon { background: url('/common/images/contents/map_icon_hover.svg')no-repeat top center;  }



.flamebx { margin-top: 12rem;  border-top: 1px solid #dbdbdb; padding-top:6rem; display:flex;
flex-direction: column;
gap: 3rem;   }
.flamebx h4 { margin-bottom: 3rem; }

.imgbx img {width: 100%; }


.videobx {width: 100%;  aspect-ratio:16/9; margin-bottom: 6rem;  }
.videobx video { width: 100%; height: 100%; 
    object-fit: cover; display:block;  }



.descbx img{ width: 100%; } 

/*전시뷰*/
.exhi3_cont { display:flex; justify-content: space-between; gap:8rem; 
    align-items: center; }
.exhi3_cont  .gallbox { width: 40rem;}
.exhi3_cont .gallbox  span {display: block; overflow: hidden;  width: 100%;  aspect-ratio: 400 / 566;  } 
.exhi3_cont  .gallbox  img{ width: 100%; height: 100%; object-fit: cover;}
.exhi3_cont  .boardWrap {width: calc( 100% - 48rem); }
.exhi3_cont table{ min-width: 100%; }
.exhi3_cont table td { text-align:left; padding-left: 4rem; }
.exhi3_cont table td:first-child { text-align:center; padding-left: 0;  font-weight:600; background: #FAFAFA; }
.exhi3_cont .titBox h5{margin-bottom: 1.6rem; }
.exhi3_cont .titBox p {color:#787878}


.exhi3_cont  .titBox h5 {  margin-top:2rem; font-weight: 700; }
.exhi3_cont .titBox a { margin-top: 4rem; }
.exhi3_cont .descbx  { margin-top: 6rem; border-top:1px solid #333;  padding: 6rem 3rem; display:flex; 
    flex-direction: column;
    gap: 4rem;  border-bottom: 1px solid #dbdbdb;  }

.exhi_tag { color:#fff;  padding: 0.6rem 2rem; background: var(--secondary-purple);}


.exhi3Wrap .photo_list .imgbx { aspect-ratio:400 / 566; }
.exhi3Wrap .photo_list .imgbx img {width: 100%; height: 100%; object-fit: cover;}

.exhi3_cont .download_bnt {margin-top: 2rem; }

.exhi3Wrap .descbx  { margin-top: 6rem; border-top:1px solid #333;  padding: 6rem 3rem; display:flex; 
    flex-direction: column;
    gap: 4rem;  border-bottom: 1px solid #dbdbdb;  }


.exhi3Wrap .audio_box { padding: 2rem; background: #f9f9f9; display: flex; flex-wrap: wrap;  align-items: center; }
.exhi3Wrap .audio_box > div {width: 33.3%;  display: flex; flex-direction: column ;gap: 1.4rem; padding: 0 20px;  }
.exhi3Wrap .audio_box > div p { font-weight: 600; }
.exhi3Wrap .audio_box audio { width: 100%; }

.exhi3_slideBox { width: 100%; }
.exhi3_slideBox .slider-for { margin-bottom:4rem;  }
.exhi3_slideBox img{ width:100%; height: 100%; object-fit:cover;  }

.exhi3_slideBox .slider-nav .slick-slide { width: 200px; height: auto; 
    aspect-ratio: 2.76 / 1 ;  }  

.exhi3_slideBox .slider-for .slick-slide  { height:500px;  }
.exhi3_slideBox .slider-for .slick-prev { left: 1rem;  width: 60px; height: 60px;  background: url('/common/images/contents/coll3_prev.svg')no-repeat center rgba(255,255,255,0.5);
    z-index:10;  }
.exhi3_slideBox .slider-for .slick-next { right: 1rem;  width: 60px; height: 60px;  background: url('/common/images/contents/coll3_next.svg')no-repeat center rgba(255,255,255,0.5);
    z-index:10;  }
.exhi3_slideBox .slider-nav{
    margin:0 -5px;
}

.exhi3_slideBox .slider-nav .slick-slide{
    padding:0 5px;
    cursor:pointer;
    opacity:.4;
    transition:.3s;
}

.exhi3_slideBox .slider-nav .slick-current{
    opacity:1;
}

.exhi3_slideBox .slider-nav img{
    width:100%;
    display:block;
}
.exhi3_slideBox .slick-dots {display:none !important;; }


.exhi4_cont .txtbx p {font-size:  var(--fz-20); line-height: 2; }




















.intro1cont .txtbx h4{ margin-bottom: 4rem; font-weight:200; letter-spacing: -0.03rem }
.intro1cont .txtbx p {font-size: var(--fz-20); line-height: 1.8; margin-bottom: 2rem;  font-weight:300; letter-spacing: -0.02rem}


.intro2Wrap .contentBox {border-top: 0;   }





.intro2Wrap .share_section { background: none;  padding-bottom: 0; }



#com_sec1 { position: relative ;  height: 500px;}
#com_sec1 .imgbx { width: 100%; height: 500px; position: absolute; top:0; left:50%; transform:translateX(-50%); ; }
#com_sec1 .imgbx img {width: 100%; height: 100%; object-fit: cover; }
#com_sec1 .titbx {  position: absolute; top:50% ; left:50%; transform:translate(-50%, -50%); display:flex;  
    justify-content: center;
    flex-direction: column;
    align-items: center;  gap:3rem;   }
	#com_sec1 .titbx img{ width: 50%;  }
#com_sec1 .titbx p {font-size: var(--fz-20); font-weight:300; color:#fff; }



/* 메인 타임라인 섹션 */
.timeline_section {
width: 100%;
min-height: 100vh;
padding: 100px 0;
position: relative;  overflow: hidden; background-color: #FAFEFF;
}

.timeline_container {
max-width: 1440px;
margin: 0 auto;
display: flex;
position: relative ; 
}

/* 왼쪽 고정 영역 */
.left_box { 
width: 469px;
position: sticky;
top: 100px; 
display: flex;
flex-direction: column;
justify-content: flex-start;
}

.timeline_container .left_box h4 {
font-size: var(--fz-40);
font-weight: 800;
}

/* 오른쪽 스크롤 영역 */
.timeline_container .right_box {
width: calc( 100% - 569px);
position: relative; padding-top:130px;  
margin-left:100px;  
}

/* 중앙을 관통하는 세로 가이드선 */
.center_line {
position: absolute;
left: 200px;
top: 0;
bottom: 0;
z-index: 1;
width: 1px;
background: linear-gradient(to bottom, transparent 0%, #333 20%, #333 80%, transparent 100%);
}

/* 연도별 그룹 */
.timeline_container .year_group {
display: flex;
position: relative;
margin-bottom: 180px; /* 그룹 간 간격 */
}

.timeline_container .year_group:last-child {
margin-bottom: 30vh; /* 마지막 요소 스크롤 유지용 */
}

/* 연도 글자가 머무는 스티키 박스 */
.timeline_container .year_label_wrapper {
width: 200px;
height: 100%; 
padding-top: 16px; 
}

.timeline_container .year_label {
position: sticky;
top: 50vh;
transform: translateY(-50%);
font-size:var(--fz-42);
font-weight: bold;
color: #333;
transition: color 0.3s ease;
}

/* 활성화된 연도 스타일 */
.timeline_container .year_group.active .year_label {
color: #009EE2;
}

/* 우측 진짜 내용 리스트 */
.timeline_container .content_list {
flex: 1;
padding-left: 62px; 
position: relative;
z-index: 2;
}

.timeline_container .content_item {
position: relative;
margin-bottom: 180px;
}

.timeline_container .content_item:last-child {
margin-bottom: 0;
}

/* 세로선 위에 놓일 동그라미(인디케이터) */
.timeline_container .content_item .dot {
    position: absolute;
    left: -70px;
    top: 10px;
    width: 16px;
    height: 16px;
    background-color: #787878;
    border-radius: 50%;
    transition: background-color .3s ease, transform .3s ease;
}

/* 퍼지는 원 */
.timeline_container .content_item .dot::after{
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    width:100%;
    height:100%;
    border-radius:50%;
    border:10px solid rgba(0,158,226,.3);
    transform:translate(-50%,-50%) scale(1);
    opacity:0;
    pointer-events:none;
}

/* 중앙 진입 시 */
.timeline_container .content_item.active .dot{
    background-color:#009EE2;
}

.timeline_container .content_item.active .dot::after{
    animation:pulse 1.5s ease-out infinite;
}

@keyframes pulse{
    0%{
        transform:translate(-50%,-50%) scale(1);
        opacity:.8;
    }
    100%{
        transform:translate(-50%,-50%) scale(2);
        opacity:0;
    }
}


.timeline_container .text_wrap { padding-top: 10px; }
.timeline_container .text_wrap p {
font-size: var(--fz-20); 

}





.coll_cont { display:flex; flex-direction: column; gap:6rem;  }
.coll_cont  > a {display:flex;   gap:5rem; align-items: center; border-bottom: 1px solid #dbdbdb;  padding-bottom:6rem;  }
.coll_cont .imgbx { width: 540px; height:360px; }
.coll_cont .imgbx img{ width: 100%; height: 100%; object-fit:cover; }
.coll_cont .txtbx { width: calc( 100% - 59rem) ; padding: 0 4rem}
.coll_cont h4 {  margin-bottom:3.2rem;  font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.coll_cont .txtbx > div{ display:flex; gap:3rem; margin-bottom:1rem;    }
.coll_cont .txtbx p { font-weight: 300; }

.collection3Wrap .board_schbx  {margin-bottom:3.2rem; }




.csll3_cont { display:flex; justify-content: space-between; gap:8rem; }
.coll_slideBox { width: 50%; }
.coll_slideBox .slider-for { margin-bottom:4rem;  }
.coll_slideBox img{ width:100%; height: 100%; object-fit:cover;  }

.coll_slideBox .slider-nav .slick-slide { width: 200px; height: auto; 
    aspect-ratio: 3 / 2;  }  

.coll_slideBox .slider-for .slick-slide  { height:500px;  }
.coll_slideBox .slider-for .slick-prev { left: 1rem;  width: 60px; height: 60px;  background: url('/common/images/contents/coll3_prev.svg')no-repeat center rgba(255,255,255,0.5);
    z-index:10;  }
.coll_slideBox .slider-for .slick-next { right: 1rem;  width: 60px; height: 60px;  background: url('/common/images/contents/coll3_next.svg')no-repeat center rgba(255,255,255,0.5);
    z-index:10;  }
.coll_slideBox .slider-nav{
    margin:0 -5px;
}

.coll_slideBox .slider-nav .slick-slide{
    padding:0 5px;
    cursor:pointer;
    opacity:.4;
    transition:.3s;
}

.coll_slideBox .slider-nav .slick-current{
    opacity:1;
}

.coll_slideBox .slider-nav img{
    width:100%;
    display:block;
}
.coll_slideBox .slick-dots {display:none !important;; }

.slick-prev:before { display:none;  }
.slick-next:before { display:none;  }
.csll3_cont table{ min-width: 100%; }
.csll3_cont table td { text-align:left; padding-left: 4rem; }
.csll3_cont table td:first-child { text-align:center; padding-left: 0;  font-weight:600; background: #FAFAFA; }
.csll3_cont .titBox h5{margin-bottom: 1.6rem; }
.csll3_cont .titBox p {color:#787878}


.collection3Wrap .coll3_view .titBox h5 {  margin-bottom:2rem; font-weight: 700; }
.collection3Wrap .coll3_view .titBox a { margin-top: 4rem; }
.collection3Wrap .descbx  { margin-top: 6rem; border-top:1px solid #333;  padding: 6rem 3rem; display:flex; 
    flex-direction: column;
    gap: 4rem;  border-bottom: 1px solid #dbdbdb;  }





    .intro4Wrap .contentBox {  display: flex; flex-direction: column; gap:6rem }
.intro4_bgbx { background: #f9f9f9;  padding: 12rem;  display: flex; flex-direction: column; justify-content: center; ;}
.intro4_bgbx  h5 {  }

.intro4_bgbx:first-child img { width: 50%; margin: 0 auto; }

.flex_box { display: flex; width: 100%;   }
.tresbx { gap:1.6rem; margin-top:10rem;  }
.tresbx > div { flex:1;  text-align: center; ;}

.intro4_bgbx .flex_box h5 { background: #333; color: var(--secondary-white); text-align: center; ; margin-bottom: 1.2rem;   }
.intro4_bgbx .txtbx { margin-top: 6rem; display: flex; flex-direction: column; gap: 1.6rem;; }
.intro4_bgbx .txtbx h4{ margin-bottom: 1.6rem;  border-bottom: 1px solid #333; }
.intro4_bgbx .txtbx  p{ margin-left: 1rem; line-height: 1.6; }

.intro4_cont .title {margin-bottom:4rem; }
.intro4_cont .dot { position: relative;  padding-left: 1.2rem; }
.intro4_cont .dot:before { content:''; position: absolute; top:10px; left:0;   width: 4px; height: 4px; display: inline-block; background-color: #333 ;}

.intro4_bgbx:nth-child(2) .tresbx  { gap:5rem; }
.intro4_bgbx:nth-child(2)  img{ width: 100%; }
.intro4_bgbx:nth-child(2) .tresbx > div {  text-align: left;}
.intro4_bgbx:nth-child(2) .tresbx span {display: inline-block; font-size: var(--fz-14) ; margin-bottom: 0.4rem; letter-spacing: -0.03rem; color: #787878 ; font-weight: 500;}
.intro4_bgbx:nth-child(2) .tresbx h5{ background: none ;text-align: left ;  }

.intro4_bgbx:nth-child(2) .tresbx p{ margin-top: 0.4rem; }

.sigbx { gap:6rem; }
.sigbx > div {  gap: 6rem;  align-items: center; ;
    }

     .sigbx > div h6 { width:20%; }
    .sigbx > div span { width: 100%; }



.intro3Wrap .boardList tr td:nth-child(2) {line-height: 1.8;} 



/*전시뷰*/
.edu_cont { display:flex; justify-content: space-between; gap:8rem; 
    align-items: center; }
.edu_cont  .gallbox { width: 40%;}
.edu_cont .gallbox  span {display: block; overflow: hidden;  width: 100%;  aspect-ratio: 400 / 566;  } 
.edu_cont  .gallbox  img{ width: 100%; height: 100% ; object-fit: cover;}
.edu_cont  .boardWrap {width: calc( 100% - 48rem); }
.edu_cont table{ min-width: 100%; }
.edu_cont table td { text-align:left; padding-left: 4rem;  }
.edu_cont table td:first-child { text-align:center; padding-left: 0;  font-weight:600; background: #FAFAFA; }
.edu_cont table td:nth-child(3) { text-align:center; padding-left: 0;  font-weight:600; background: #FAFAFA; } 
.edu_cont .titBox h5{margin-bottom: 1.6rem; }
.edu_cont .titBox p {color:#787878}


.edu_cont  .titBox h5 {  margin-top:2rem; font-weight: 700; }
.edu_cont .titBox a { margin-top: 4rem; }
.eduWrap .descbx  { margin-top: 6rem; border-top:1px solid #333;  padding: 6rem 3rem; display:flex; 
    flex-direction: column;
    gap: 4rem;  border-bottom: 1px solid #dbdbdb;  }





.eduWrap .file ul {}
.eduWrap .file li {font-size:var(--fz-16);}
.eduWrap .file dl {width:100%; padding:2rem 0; border-bottom:1px solid #e2e2e2; overflow:hidden;}
.eduWrap .file dt  {position:relative; float:left; width:15rem; text-align:center; font-size:var(--fz-16); font-weight:bold;}
.eduWrap .file dd  {font-size:1.6rem; color:#333 }
.eduWrap .file dd a {display: block; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fz-16);} 
 
.edu_cont .btnbx { margin-top: 3rem;}
.edu_cont .resv_Btn {font-size: var(--fz-18);  }

.tel_bx { display: flex;  align-items: center ; background: #f9f9f9;  padding: 2rem 4rem ;   gap:2rem; }
.tel_bx .tel_icon { display: inline-block; width: 40px;height: 40px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center ; color:#fff; }





/*전시뷰*/
.event_cont { display:flex; justify-content: space-between; gap:8rem; 
    align-items: center; }
.event_cont  .gallbox { width: 40%;}
.event_cont .gallbox  span {display: block; overflow: hidden;  width: 100%;  aspect-ratio: 400 / 566;  } 
.event_cont  .gallbox  img{ width: 100%; height: 100% ; object-fit: cover;}
.event_cont  .boardWrap {width: calc( 100% - 48rem); }
.event_cont table{ min-width: 100%; }
.event_cont table td { text-align:left; padding-left: 4rem;  }
.event_cont table td:first-child { text-align:center; padding-left: 0;  font-weight:600; background: #FAFAFA; }
.event_cont table td:nth-child(3) { text-align:center; padding-left: 0;  font-weight:600; background: #FAFAFA; } 
.event_cont .titBox h5{margin-bottom: 1.6rem; }
.event_cont .titBox p {color:#787878}


.event_cont  .titBox h5 {  margin-top:2rem; font-weight: 700; }
.event_cont .titBox a { margin-top: 4rem; }
.eventWrap .descbx  { margin-top: 6rem; border-top:1px solid #333;  padding: 6rem 3rem; display:flex; 
    flex-direction: column;
    gap: 4rem;  border-bottom: 1px solid #dbdbdb;  }




.eventWrap .file ul {}
.eventWrap .file li {font-size:var(--fz-16);}
.eventWrap .file dl {width:100%; padding:2rem 0; border-bottom:1px solid #e2e2e2; overflow:hidden;}
.eventWrap .file dt  {position:relative; float:left; width:15rem; text-align:center; font-size:var(--fz-16); font-weight:bold;}
.eventWrap .file dd  {font-size:1.6rem; color:#333 }
.eventWrap .file dd a {display: block; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fz-16);} 
 


.event_cont .btnbx {
    margin-top: 3rem;  } 
.event_cont .resv_Btn {font-size: var(--fz-18); }


.collect1_list { border-top: 1px solid #333; margin-top: 6rem; }



.step_wrap {display: flex; flex-direction: column ; width:  calc( 100% - 40rem); gap:40px;    }
.stepbox {display: flex; gap:30px ;flex-wrap: wrap;  justify-content: space-around; }
.stepbox:nth-child(2) { flex-direction: row-reverse;}
.stepbox > div { position: relative ;  width: calc( 33.3% - 30px) ; border-radius: 1rem ; border: 1px solid #dbdbdb; padding: 2rem 2rem 2rem 2rem; display: flex; flex-direction: column ; gap:1.6rem; align-items: center ;  text-align: center ; }
.stepbox .number  {background: var(--primary); width: 40px; height: 40px; border-radius: 50%; color:#fff; font-weight: 600;  display: flex; align-items: center ; justify-content: center; }
.stepbox > div::before { content:''; 
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -30px;
    display: block;
    width:20px;
    height: 20px;
    background: url(../images/contents/coll3_step_icon.svg) no-repeat center;
    background-size: contain; }

.stepbox:first-child > div:nth-child(3)::before  { right:50%;   top:auto; bottom: -30px;   transform: translate(0) rotate(90deg);  }
.stepbox:nth-child(2) > div::before  {   transform:  rotate(-180deg); }
.stepbox:nth-child(2) > div:first-child::before { display: none; }


.collect2_cont .collect1_list {border-top:0; margin-top: 0;   }

/********************************서브 end ********************************/






/*반응형*/

@media (max-width:1440px){

.inner { width: 100%; padding: 0 3%; }
.share_section { padding-top: 10rem; padding-bottom: 40rem  ; background-size:80% auto ; }
#section1 { height: 100%; padding: 12rem 0 10rem 0; }
#section1:before { border-radius: 34.7222vw 0 0 0;}
#section1 .s1_container {gap:3rem; }
#section1 .s1_container > div {width: 50%;  }
#section1 .s1_slidewrap { width: 50%; }
#section1 .s1_infobox {margin-top: 5.5555vw;} 

#section2 .s2_container {gap:8%}
#section2 .s2_container .s2_noti_wrap { width: 60%; }
#section2 .s2_noti_list  {gap: 1rem; }
#section2 .s2_container .s2_slide_wrap { width: 32%; }
.s2_eventslide { width: 100%; height: auto; aspect-ratio:1/1;}
#section2 .s2_noti_list > div { padding: 2rem 1.6rem;  }

.s3_exslide .s3_card {height: auto;}
.s3_exslide .s3_card .imgbx { width: 50%; height: auto;   aspect-ratio:1/1;
}
.s3_exslide .s3_card .imgbx  img {width: 100%; height: 100%; object-fit: cover}
.s3_top { left: 4rem; }
.s3_exslide .s3_card .txtbx { padding: 0 4rem;}
.s3_top button:before {  top:  0.9rem}




.watch_box .titbx { width: 35%; gap:2rem;  }    
.watch_box .txtbx { width: calc( 100% - 35%); }
.step_wrap { width: 65%;}


.watch3_cont .imgbx .loca { width: auto; height: auto; padding: 16px 20px 16px 80px; gap:2rem;  }


.timeline_container {width: 100%; padding: 0 3%; max-width: 100%; ;  }

}





@media (max-width:960px){

#AreaSub { margin-top: 70px; }
.share_section { padding-top: 8rem; }
.SNavWrap .snav_home  {display: none; }
.SNavWrap .nav_container { height: 50px; }
.SNavWrap .depth_list { top: 55px; }
.SNavWrap .sub_depth1, .SNavWrap .sub_depth2, .SNavWrap .sub_depth3 { min-width: auto;  flex:1; }
.SNavWrap .sub_depth1:after { content: ' ';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 1px;
    height: 20px;
    display: inline-block;
    background: #787878;}

#section2 .s2_container { flex-direction: column; }
#section2 .s2_container .s2_noti_wrap {width: 100%; }
#section2 .s2_noti_list { width: 100%; }
#section2 .s2_noti_list > div { min-width: auto; ;}
#section2 .s2_container .s2_slide_wrap { width: 100%; margin-top: 4rem; }
.s2_eventslide img{width: 100%; height: 100%;object-fit: cover; } 


.exhi3_cont {    flex-direction: column; gap:4rem; }
.exhi3_cont .gallbox {width: 100%; }

.exhi3_cont .boardWrap {width: 100%; }
.exhi3_slideBox { width: 100%; }

.exhi3Wrap .coll3_view .titBox a { margin-top: 2rem; }
.exhi3Wrap .descbx { padding: 4rem 1rem;  margin-top:4rem;  gap:2rem; }
.exhi3Wrap .slider-for { margin-bottom: 2rem; }
.exhi3Wrap .slider-for .slick-slide { height: auto; aspect-ratio: 3 / 2; }
.coll_sexhi3WraplideBox .slider-for .slick-next { width: 30px; height: 30px;   background-size: 50%; }
.exhi3Wrap .slider-for .slick-prev {width: 30px; height: 30px;   background-size: 50% }

.exhi3Wrap .audio_box > div { width: 50%; }






.s3_exslide .s3_card .txtbx {margin-top: 6rem;    }
.s3_exslide .s3_card .txtbx a { margin-bottom: 4.6rem; }




#section3 { padding-top: 0; }


.warried_list > div { padding: 2rem 3rem; }

 
.watch3_cont .imgbx .loca { padding: 10px 20px 10px 50px;  background-size: 30px auto;   gap:1rem; }
.watch3_cont .loca p { font-size: 1.6rem ;}
.watch3_cont .imgbx .loca span img {width: 26px; height: 26px; } 

.coll_cont  > a  { flex-direction: column; gap: 2.4rem; padding-bottom: 3rem;  }
.coll_cont .imgbx {width: 100%; }

.coll_cont .txtbx { width: 100%;  padding: 0 ;}
.coll_cont h4 { margin-bottom: 1.6rem; }
.csll3_cont {    flex-direction: column; gap:4rem; }
.coll_slideBox { width: 100%; }
.coll3_view { width: 100%;} 


.collection3Wrap .coll3_view .titBox a { margin-top: 2rem; }
.collection3Wrap .descbx { padding: 4rem 2rem;  margin-top:4rem;  gap:2rem; }
.coll_slideBox .slider-for { margin-bottom: 2rem; }
.coll_slideBox .slider-for .slick-slide { height: auto; aspect-ratio: 3 / 2; }
.coll_slideBox .slider-for .slick-next { width: 30px; height: 30px;   background-size: 50%; }
.coll_slideBox .slider-for .slick-prev {width: 30px; height: 30px;   background-size: 50% }



.intro4_bgbx { padding: 8rem; }
.tresbx { margin-top: 8rem; }
.sigbx img {width: 100% !important}




.edu_cont {    flex-direction: column; gap:4rem; }
.edu_cont .gallbox {width: 100%; }

.edu_cont .boardWrap {width: 100%; }
.exhi3_slideBox { width: 100%; }

.edu_cont .titBox a { margin-top: 2rem; }
.eduWrap  .descbx { padding: 4rem 1rem;  margin-top:4rem;  gap:2rem; }
.w3_txtbx > div {gap:1rem; }
.w3_txtbx > div .txt { flex: auto; width: calc( 50% - 1rem);  }
.w3_txtbx > div .txt .num { width: 32px;height: 32px; }

.w3_2_tbox .txt { width: 100% !important; }
.stit_icon { width: 40px; height: 40px; }
.stit_icon img {width: 100%;  }

.timeline_section {padding-top: 0; height: 100%;}
.timeline_container {flex-direction: column; gap:130px;}
.timeline_container .left_box  {width: 100%; }
.timeline_container .right_box {width: 100%; margin-left: 0;   }


.expot { width: 72px; height: 72px;  gap:0.2rem}
.expot_icon { width: 24px; height: 24px; background-size: contain; }
 .expot.expot6 .expot_icon{ width: 24px; height: 24px; background-size: contain; }
.expot.expot7 .expot_icon{ width: 24px; height: 24px; background-size: contain; }


}


@media (max-width:768px){


#BannerWrap {height:60vh; margin-top:70px; }
#BannerWrap .main_title { width: 32vw; }
#BannerWrap .main_title img {width: 100%; }


#section1 { padding: 6rem 0; background-size: 80% auto !important;  }
#section1:before { border-radius: 0; }
#section1 .s1_container {flex-direction: column; gap: 10rem      }
#section1 .s1_container > div {width: 100%; }
#section1 .s1_container h2  {font-size: var(--fz-40); margin-bottom: 2.4rem;  }
#section1 .s1_container p {line-height: 1.5; }
#section1 .s1_infobox {margin-top: 4rem;  gap:1rem; }
#section1 .s1_infobox h5 span { width: 2.4rem; height: 2.4rem;  }
#section1 .s1_infobox h5 span  img { width:100%; height: 100%; object-fit: cover; }
#section1 .s1_container a {margin-top: 0rem;  }
#section1 .s1_slidewrap h3 {margin-bottom: 1.2rem; }
#section1 .s1_slidewrap .s1_btnbx > div {width: 2.4rem; height: 2.4rem; }
#section1 .s1_slidewrap .s1_btnbx > div  img {width: 100%; height: 100% ; object-fit: cover}

#section2 { padding: 6rem 0 ; width: 100%;  overflow: hidden; }
#section2 .s2_container .s2_noti_wrap .more { width: 6vw; height: 6vw; top:1rem;  }
#section2 .s2_container .s2_noti_wrap .more img { width: 100%; height: auto;  }
#section2 .s2_noti_list > div {width: 100%; }
#section2 .s2_noti_list > div:nth-child(2) { border-top:0; }
#section2 .s2_noti_list a {margin-bottom: 1.2rem; }
.s2_btnbx > div { width: 6vw; height: 6vw; }
.s2_btnbx > div img { width: 100%; height: 100%; object-fit: cover;  }




.s3_exslide .s3_card { flex-direction: column; }
.s3_exslide .s3_card .txtbx {width: 100%; padding: 6rem 2.4rem; 
align-items: center; }
.s3_exslide .s3_card .imgbx {width: 100%;        aspect-ratio: 3 / 1.5; }
.s3_top {left:50%; transform: translateX(-50%); top:6rem ; gap: 2.6rem ; }
.s3_top button:before {left: -14px; }
.s3_exslide .s3_card .txtbx a {text-align: center; margin-bottom: 3rem;  }



.contentBox { padding-top: 3rem; }
.share_section { padding-bottom:  20vh; padding-top: 6rem;   }
.S_titbx { margin-bottom: 4rem; }
.S_titbx h3 { margin-bottom: 2rem; }

.watch1Wrap .contentBox { gap: 6rem     }
.watch_box { width: 100%;  padding: 3rem 2.4rem;  flex-direction: column; align-items: flex-start; }

.watch_box .txtbx {gap: 1.5rem; width: 100%;  }
.watch_box .titbx  {margin-bottom: 2rem; width: 100%; gap:1rem;  }
.watch_box .txtbx h4 { font-size: 4rem; }
.watch_box .txtbx p { line-height: 1.6;  letter-spacing: -0.1rem ;font-size :var(--fz-18)    }
.tit_icon { width: 32px; height: 32px; }
.tit_icon img {width: 100%; height: 100%; object-fit: contain; }


.warried_list { flex-direction: column;  gap:2.4rem; margin-top: 3.2rem;  }
.warried_list > div { width: 100%; gap:2rem;  }


.warried_list .iconbx {  width: 60px; height: 60px; }
.warried_list .iconbx img{ width: 100%; }
.warried_list .txtbx { width:  calc( 100% - 80px) ;}



.w3_infoBox .floor { width: 50px;height: 50px; }
.sub_tabwrap .tabbx > a { padding: 1rem  1rem;  font-size: var(--fz-16);  }

.w3_infoBox { padding: 16px; }

.map_imgbx  .root_daum_roughmap .wrap_map { height:300px !important;}
.map_imgbx .root_daum_roughmap iframe{
height:300px !important;
}

.intro4_bgbx { padding: 6rem 2rem; }
.intro4_bgbx img {width: 100%; }
.intro4_bgbx:first-child img{ width: 80%; }

.tresbx { flex-direction: column ; margin-top: 4rem; }
.intro4_bgbx:nth-child(2) .tresbx {margin-top: 0; }
.intro4_bgbx:nth-child(2) .tresbx span { margin-top: 2rem; }
.sigbx > div { flex-direction: column ;align-items: flex-start; gap:2.4rem; }
.sigbx > div h6 {width: 100%;  }
.sigbx > div span {width: 100%; }

.intro4_bgbx .txtbx p {margin-left: 0; }
.intro4_cont .title {margin-bottom: 2.4rem; }

.tel_bx { padding: 1rem 1.8rem; gap:1.2rem }

.w3_infoBox .w3_num { width: 26px; height: 26px; font-size: 1.4rem;}
.watch3_cont .imgbx .loca  { }
.w3_txtbx h5 {margin-bottom: 2.4rem;  }

.w3_txtbx h5 span img {width: 100%; } 
.w3_txtbx > div .txt p { font-size: 1.6rem;}
.w3_txtbx > div .txt .num {width: 26px; height: 26px; font-size: 1.4rem;}
.w3_infoBox.floor2 {margin-top: 6rem; }



 .quickArea{
        transform: scale(0.6); bottom:2%; right:2%; 
        transform-origin: right bottom;
    }



.step_wrap { width: 100%; }
.stepbox > div { padding: 1.6rem  ; }

.mid_tit {margin-bottom: 4rem;  gap:1.2rem;}
 .mid_tit span { width: 40px; height: 40px; }
 .mid_tit span img {width: 100%; height: 100%; object-fit: contain;}


#com_sec1 { height: 300px; }
#com_sec1 .titbx {gap:1.4rem;}
#com_sec1 .titbx p {font-size: var(--fz-16);}
#com_sec1 .imgbx {height: 100%; }

.timeline_container .left_box {  width: 100%; }
.timeline_container .right_box { padding-top: 6rem; }
.timeline_container .year_group { flex-direction: column;  margin-bottom: 6rem; ;}
.center_line { left:5px; }
.timeline_container .year_label {position: static; padding-left: 20px;  font-size: 2rem; }
.timeline_container .year_label_wrapper { width: 100%;  padding-top: 0; height: auto;;}
.timeline_container .content_list { padding-left: 0; }
.timeline_container .content_item {display: flex; align-items: center; gap:1rem;}
.timeline_container .content_item .dot { position: static; width: 10px;height: 10px;  }
.timeline_container .text_wrap {padding-top: 0; width: calc( 100% - 20px); }

.expot { }
.watch3Wrap .contentBox { gap:4rem;}
.exhi2_cont .txtbx p{ line-height: 1.6; }
.watch3_cont .imgbx .loca {background:none; background-color: #fff; padding: 6px 16px; } 
.watch3_cont .imgbx .loca span img { width: 20px; height: 20px; }
.watch3_cont .loca p {font-size: 1.4rem; }
.watch3_cont .w3_infoBox .loca { min-height: auto ; border-radius : 10px 3px 10px 3px; border: 2px solid var(--primary)}
.w3_infoBox .loca h6 {font-size: 1.4rem; }
.w3_txtbx {margin-top: 4rem; }



@keyframes s3Reveal{
    from{
        transform:translateY(0);
    }
    to{
        transform:translateY(100%);
    }
}

.s3_top button { font-size:  var(--fz-18);}
.sub_tabwrap .tabbx {flex-wrap: wrap; }
.sub_tabwrap .tabbx > a  {flex: auto;  width: 50%; margin-top: -1px; }
.SNavWrap .depth_btn {font-size: 1.2rem; padding:0 30px 0 10px }



}

@media (max-width:600px){

    #section1 .s1_container .s1_infobox p {font-size: 1.6rem;}
.stepbox > div { width: 100%; }
.stepbox > div::before {right: 0; left: 50%; 
    top: auto;
    bottom: -26px;
    transform: translate(-50% , 0 ) rotate(90deg); }
.stepbox:first-child > div:nth-child(3)::before {right: 0; left: 50%; 
    top: auto;
    bottom: -26px;
    transform: translate(-50% , 0 ) rotate(90deg); }
    .stepbox:nth-child(2) > div::before {right: 0; left: 50%; 
    top: auto;
    bottom: -26px;
    transform: translate(-50% , 0 ) rotate(90deg);}
.stepbox:nth-child(2) > div:last-child:before { display: none;}

.stepbox:nth-child(2) > div:first-child::before { display: block; }
 



.expot { width: 54px; height: 54px;}
.expot_icon { display: none; }
 .expot.expot6 .expot_icon{ display: none;  }
.expot.expot7 .expot_icon{  display: none; }

.watch3_cont .loca.loca2 {right: 9%;
    top: 55%;  }
    .watch3_cont .loca.loca3 {left: 5% ; }
.w3_infoBox .w3_num { width: 20px; height: 20px; }

.s3_exslide .s3_card .imgbx {aspect-ratio: 1.2 / 1; }
.s2_btnbx { gap: 0.4rem   }

.expot1 {  top: 52%; left: 32%;  }
.expot3 {left: 26% ; top: 37% }
.expot4 { left: 10%; }
.expot6  {top:37%; }
.expot7 { right: 4%; }
}