/**************************************************************/
  /**************************************************************/
  /***************************** main ***************************/
  /**************************************************************/
  /**************************************************************/
  /* ----------------------- video visual ----------------------*/
  /* .main_copy {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    left: 50%;
    bottom: 5rem;
    transform: translate(-50%);
    text-align: center;
    z-index: 2;
    color: #fff;
}
.main_copy img {
    margin-bottom: 1.25rem;
}
.main_copy p {
    display: block;
    width: 100%;
    font-size: 1.75rem;
    font-family: var(--main-font);
    font-weight: 600;
    letter-spacing: 1px;
} */


/* 페이지별 헤더 색상 교체 */

#header.mainheader .logo a img.on {display: block;}
#header.mainheader .logo a img.off {display: none;}
/* #header.mainheader {border-bottom: 1px solid var(--c-black-5);}
#header.mainheader.on .top_header .wrap a { color: var(--c-black-1);}
#header.mainheader.on nav #gnb li .nav_dep1 {color: var(--c-black-1);}
#header.mainheader.on .open .join a {color: var(--c-black-3);}
#header.mainheader.on .open .login a {color: var(--c-black-3);}
#header.mainheader.on .open ul li a {color: var(--c-black-3);}

#header.mainheader.on .open ul li a .material-icons-round, #header.mainheader.on .open ul li a .material-icons-outlined {color: var(--c-black-3);} */

.fp-viewing-HOME #header.mainheader .menu_area ul li a.btn_ham_menu {background-image: url(../images/common/ic_ham_menu.png);}
.fp-viewing-HOME #header.mainheader.on .menu_area ul li a.btn_ham_menu {background-image: url(../images/common/ic_ham_menu_on.png);}
.fp-viewing-HOME #header.mainheader .menu_area ul li a.searchbtn {background-image: url(../images/common/ic_search.png);}
.fp-viewing-HOME #header .top_header .wrap a {color: #fff;}
.fp-viewing-HOME #header.mainheader.on nav #gnb li .nav_dep1 {color: var(--c-black-1);text-shadow: none;}
.fp-viewing-HOME #header.mainheader .top_header .wrap a {
    color: #fff;
}
.fp-viewing-HOME #header.mainheader.on .top_header .wrap a {
    color: var(--c-black-1);
}
.fp-viewing-HOME #header{background: none; border-bottom: none;}
.fp-viewing-HOME #header .menu_area ul li a{color: #fff;}
.fp-viewing-HOME #header nav #gnb li .nav_dep1 {color: #fff; }
.fp-viewing-HOME #header.mainheader .logo a img.on {display: none !important;}
.fp-viewing-HOME #header.mainheader .logo a img.off {display: block !important;}
.fp-viewing-HOME #header.mainheader.on .logo a img.off{display: none !important;}
.fp-viewing-HOME #header.mainheader.on .logo a img.on{display: block !important;}


.fp-viewing-INTRODUCTION #header .menu_area ul li a.btn_ham_menu {background-image: url(../images/common/ic_ham_menu_on.png);}
.fp-viewing-INTRODUCTION #header.on .menu_area ul li a.btn_ham_menu {background-image: url(../images/common/ic_ham_menu_on.png);}
.fp-viewing-INTRODUCTION #header .menu_area ul li a.searchbtn {background-image: url(../images/common/ic_search_on.png);}
.fp-viewing-INTRODUCTION #header .menu_area ul li a{color: var(--c-black-1)}
.fp-viewing-INTRODUCTION #header nav #gnb li .nav_dep1 {color: var(--c-black-1); text-shadow: none;}
.fp-viewing-INTRODUCTION #header nav #gnb li .nav_dep1 a {color: var(--c-black-1); }
.fp-viewing-INTRODUCTION #header .top_header .wrap a {color: var(--c-black-1);}
.fp-viewing-INTRODUCTION #header.on nav #gnb li .nav_dep1 {color: var(--c-black-1);text-shadow: none;}
.fp-viewing-INTRODUCTION #header .top_header .wrap a {
    color: var(--c-black-1);
}
.fp-viewing-INTRODUCTION #header.mainheader .logo a img.on{display: block !important;}
.fp-viewing-INTRODUCTION #header.mainheader .logo a img.off{display: none !important;}
.fp-viewing-INTRODUCTION #header {background: #fff;}

.fp-viewing-ARCHIVE #header.on .top_header .wrap a {
    color: var(--c-black-1);
}
.fp-viewing-ARCHIVE #header .menu_area ul li a.btn_ham_menu {background-image: url(../images/common/ic_ham_menu_on.png);}
.fp-viewing-ARCHIVE #header.on .menu_area ul li a.btn_ham_menu {background-image: url(../images/common/ic_ham_menu_on.png);}
.fp-viewing-ARCHIVE #header .menu_area ul li a.searchbtn {background-image: url(../images/common/ic_search_on.png);}
.fp-viewing-ARCHIVE #header .menu_area ul li a{color: var(--c-black-1)}
.fp-viewing-ARCHIVE #header nav #gnb li .nav_dep1 {color: var(--c-black-1); text-shadow: none;}
.fp-viewing-ARCHIVE #header nav #gnb li .nav_dep1 a {color: var(--c-black-1); }
.fp-viewing-ARCHIVE #header .top_header .wrap a {color: var(--c-black-1);}
.fp-viewing-ARCHIVE #header.on nav #gnb li .nav_dep1 {color: var(--c-black-1);text-shadow: none;}
.fp-viewing-ARCHIVE #header .top_header .wrap a {
    color: var(--c-black-1);
}
.fp-viewing-ARCHIVE #header.on .top_header .wrap a {
    color: var(--c-black-1);
}
.fp-viewing-ARCHIVE #header.mainheader .logo a img.on{display: block !important;}
.fp-viewing-ARCHIVE #header.mainheader .logo a img.off{display: none !important;}
.fp-viewing-ARCHIVE #header {background: #fff;}

.fp-viewing-NOTICE #header .menu_area ul li a.btn_ham_menu {background-image: url(../images/common/ic_ham_menu_on.png);}
.fp-viewing-NOTICE #header.on .menu_area ul li a.btn_ham_menu {background-image: url(../images/common/ic_ham_menu_on.png);}
.fp-viewing-NOTICE #header .menu_area ul li a.searchbtn {background-image: url(../images/common/ic_search_on.png);}
.fp-viewing-NOTICE #header .menu_area ul li a{color: var(--c-black-1)}
.fp-viewing-NOTICE #header nav #gnb li .nav_dep1 {color: var(--c-black-1); text-shadow: none;}
.fp-viewing-NOTICE #header nav #gnb li .nav_dep1 a {color: var(--c-black-1); }
.fp-viewing-NOTICE #header .top_header .wrap a {color: var(--c-black-1);}
.fp-viewing-NOTICE #header.on nav #gnb li .nav_dep1 {color: var(--c-black-1);text-shadow: none;}
.fp-viewing-NOTICE #header .top_header .wrap a {
    color: var(--c-black-1);
}
.fp-viewing-NOTICE #header.on .top_header .wrap a {
    color: var(--c-black-1);
}
.fp-viewing-NOTICE #header .open ul li a {
    color: var(--c-black-1);
}
.fp-viewing-NOTICE #header.mainheader .logo a img.on{display: block !important;}
.fp-viewing-NOTICE #header.mainheader .logo a img.off{display: none !important;}
.fp-viewing-NOTICE #header {background: #fff;}

.fp-viewing-FOOTER #header.mainheader {background: #fff;}
.fp-viewing-FOOTER #header.mainheader .menu_area ul li a.btn_ham_menu {background-image: url(../images/common/ic_ham_menu_on.png);}
.fp-viewing-FOOTER #header .menu_area ul li a{color: var(--c-black-1)}
.fp-viewing-FOOTER #header nav #gnb li .nav_dep1 { color: var(--c-black-1); text-shadow: none;}
.fp-viewing-FOOTER #header.mainheader .logo a img.on{display: block !important;}
.fp-viewing-FOOTER #header.mainheader .logo a img.off{display: none !important;}

/* ------------------- sec basic setting ---------------------*/

.section .inner {
    width: var(--web-width);
    margin: 0 auto;
}

/* -------------------------- sec1 ---------------------------*/
@keyframes scroll {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-20px);
    }
}
.sec1 {
    position: relative;
}
.sec1::before {
    content: "";
    display: block;
    width: 14px;
    height: 134px;
    background: url(../images/main/scrollimg.png) no-repeat center center;
    position: absolute;
    right: 35px;
    top: 78%;
    background-size: cover;
    opacity: 1;
    z-index: 9999;
    animation: scroll .8s infinite alternate;
}

/* .sec1::after {
    content: "Scroll";
    position: absolute;
    left: 50%;
    bottom: 8em;
    font-size: 1rem;
    color: #fff;
    font-weight: 400;
    opacity: 1;
    z-index: 9999;
    margin-left: -0.5rem;
    letter-spacing: 0.5px;
} */
#main_full .section.active::before,
#main_full .section.active::after {
    opacity: 1;
    transition: .8s .6s
}

button.btn_viewmore{
    display: inline-flex;
    align-items: center;          
    font-size: var(--txt-md);
    font-weight: 600;
    color: var(--c-black-1);
    cursor: pointer;
    transition: color .25s, transform .2s ease;
    position: relative;
    margin-right: 0.6rem;
}

button.btn_viewmore .label{
  font-family: var(--sub-font);
  line-height: 140%;
  transition: transform .25s ease;
  margin-right: 6px;
  margin-top: 4px;
}
button.btn_viewmore .arrow{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    background: var(--c-black-1);    
    border-radius: 50%; 
    position: relative;
    transform: translateX(0);
    transition: transform .25s ease;
}

button.btn_viewmore .arrow::before{
    content: "";
    display: block;
    width: 4px;
    height: 4px;
    margin-right: 2px;
    border-top: 2px solid #fff; 
    border-right: 2px solid #fff;
    transform: rotate(45deg)
}
button.btn_viewmore .arrow::after{
  content:"";
  position:absolute; inset:-2px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0;
  transform: scale(.8);
  transition: opacity .35s ease, transform .35s ease;
}

button.btn_viewmore:hover .label{
  transform: translateX(2px);    
}
button.btn_viewmore:hover .arrow
{
  transform: translateX(6px);   
}
button.btn_viewmore:hover .arrow::after{
  opacity: .6;
  transform: scale(1.1);         
}
/* -------------------------- sec_introduction ---------------------------*/
.sec_introduction {
    position: relative;
}
.section .inner {
    margin: 2rem auto 0;
    position: relative;
}
.section .sec_tit{
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 3rem;
}
.section .sec_tit h2{
    font-size: var(--txt-3xl-2);
    font-family: var(--sub-font);
    font-weight: 500;
}
.section .sec_tit .tit_line{
    flex: 1 1 auto;
    height: 1px;
    background-color: var(--c-black-1);
}
.sec_introduction .introduction_wrap{
    display: flex;
    gap: 2rem;
}
.sec_introduction .introduction_wrap .intro_left{
    display: flex;
    gap: 50px;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    width: 50%;
}
.fade_slider {
    position: relative;
    width: 100%;
    height: 100%;
}

.fade_slider .fade_slide {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

/* 보여질 이미지 */
.fade_slider .fade_slide.active {
    opacity: 1;
}
.sec_introduction .introduction_wrap .intro_left .intro_img{
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: -4px -4px 26.2px rgba(114,114,114,0.07) ;
    display: inline-block;
    width: 450px;
    height: 450px;
}
.sec_introduction .introduction_wrap .intro_left .intro_img img{
    width: 100%;
    height: 100%;
}
.sec_introduction .introduction_wrap .intro_left .intro_ring{
    position: absolute;
    bottom: 10px;
    left: 30px;
    animation: ringFloat 3s ease-in-out infinite;
}
@keyframes ringFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-16px); }
}
.sec_introduction .introduction_wrap .intro_left .intro_ring img > g > path{
    fill: red;
}
.sec_introduction .introduction_wrap .intro_left .intro_cirtxt{
    position: absolute;
    right: 60px;
    top: 0px;
    width: 135px;
    height: 135px;
    animation: spin 20s linear infinite;
}
@keyframes spin{
    from{transform: rotate(0deg);}
    to{transform: rotate(360deg);}
}
.sec_introduction .introduction_wrap .intro_right{
    width: 50%;
}
.sec_introduction .introduction_wrap .intro_right .intro_headline{
    display: flex;
    flex-direction: column;
}
.sec_introduction .introduction_wrap .intro_right .intro_headline .hl_left,
.sec_introduction .introduction_wrap .intro_right .intro_headline .hl_right{
    font-size: var(--txt-4xl);
    font-family: var(--sub-font);
    font-weight: 400;
}
.sec_introduction .introduction_wrap .intro_right .intro_headline .hl_right em{
    font-family: var(--sub-font) !important;
}
.sec_introduction .introduction_wrap .intro_right p{
    line-height: 150%;
    text-align: justify;
}
.sec_introduction .introduction_wrap .intro_right .intro_link_wrap{
    display: flex;
    flex-direction: column;
}
.sec_introduction .introduction_wrap .intro_right .intro_link_wrap .intro_link{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    justify-content: center;
    padding: 16px 40px 16px 8px;
    border-top: 1px solid var(--c-black-6);
    text-decoration: none;
    overflow: hidden;
    transition: color 0.2s ease;
}
.sec_introduction .introduction_wrap .intro_right .intro_link_wrap .intro_link:last-child{
    border-bottom: 1px solid var(--c-black-6);
}
.sec_introduction .introduction_wrap .intro_right .intro_link_wrap .intro_link .link_tit{
    font-size: var(--txt-2xl);
    font-family: var(--sub-font);
}
.sec_introduction .introduction_wrap .intro_right .intro_link_wrap .intro_link .link_sub{
    font-size: var(--txt-md);
    color: var(--c-black-4);
}

.sec_introduction .introduction_wrap .intro_right .intro_link_wrap .intro_link::after{
    content: url(../images/main/introduction_arrow.svg);
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.25s ease;
}
.sec_introduction .introduction_wrap .intro_right .intro_link_wrap .intro_link:hover::after{
    transform: translate(0px,-8px) translateY(-50%) translateX(20%);  
}

/* -------------------------- sec_archive ---------------------------*/
.sec_archive .archive_wrap{
    display: grid;
    grid-template-columns: 32% 68%;
}
.sec_archive .left_area{
    display: flex;
    align-items: flex-end;
}
.sec_archive .txt{
    font-size: var(--txt-3xl);
    font-family: var(--sub-font) !important;
    line-height: 100%;
}
.sec_archive .right_area .img_grid{
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}
.sec_archive .img_grid .card{
    position: relative;
    overflow: hidden;
    aspect-ratio: 1/1;
    flex:0 0 calc((100% - 2*24px)/3);
    cursor: pointer;
}

.sec_archive .img_grid .card.wide{
    flex-basis: calc((200% - 24px)/3);
    max-height: 330px
}
.sec_archive .img_grid .card.wide::before{
    padding-top: 50%;
}

.sec_archive .img_grid .cluster{
    flex:0 0 calc((100% - 2*24px)/3);
    display:flex;
    flex-direction: column;
    justify-content: space-between;
  
    min-width:0;
}
.sec_archive .img_grid .card.short{
    aspect-ratio:auto;
    flex: initial;
    height: 165px;
}
.sec_archive .img_grid .txt.right{
    display:flex;        
    align-items:flex-end; 
    justify-content: end;                
    white-space:nowrap;
    text-align: right;
}
.sec_archive .img_grid .card img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.sec_archive .img_grid .card .card_overlay{
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0 ,0.8);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.sec_archive .img_grid .card .card_overlay .card_caption{
    max-width: 90%;
    font-size: var(--txt-md-1);
    line-height: 120%;
}
.sec_archive .img_grid .card:hover img{
    transform: scale(1.05);
}
.sec_archive .img_grid .card:hover .card_overlay{
    opacity: 1;
}

/* -------------------------- sec_notice ---------------------------*/
.sec_notice .notice_wrap{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    align-items: start;
}
.sec_notice .feature .feature_img{
    position: relative;
    overflow: hidden;
    aspect-ratio: 3/2;
    margin-bottom: 1rem;
}
.sec_notice .feature .feature_img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translateZ(0);
    transition: transform .35s ease;
}
.sec_notice .feature a:hover .feature_img img{
    transform: scale(1.05);
}
.sec_notice .feature_desc .badge{
    display: inline-block;
    font-size: var(--txt-md);
    color: var(--main-color);
    margin-bottom: 4px;
    font-weight: 600;
}
.sec_notice .feature_desc .title{
    font-size: var(--txt-lg);
    font-weight: 500;
    line-height: 1.35;
    max-height: 1.35em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    margin-bottom: 1rem;
}
.sec_notice .feature_desc .date{
    font-size: var(--txt-md);
    color: var(--c-black-4);
}
.sec_notice .side_list{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.sec_notice .side_list .side_item{
    display: flex;
    gap: 1rem;
    align-items: center;
    border-bottom: 1px solid var(--c-black-6);
    padding-bottom: 1rem;
    cursor: pointer;
}
.sec_notice .side_list .side_item .side_img{
    position: relative;
    aspect-ratio: 3/2;
    overflow: hidden;
    max-width: 216px;
}
.sec_notice .side_list .side_item .side_img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.sec_notice .side_list .side_item:hover .side_img img{
    transform: scale(1.05);
}
.sec_notice .side_list .side_item:hover .feature_desc .title,
.sec_notice .feature:hover .feature_desc .title{
    text-decoration: underline;
}