/*웹폰트*/
@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;}

@font-face {
    font-family: 'SfHambakneun';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2106@1.1/SF_HambakSnow.woff') format('woff');
    font-weight: normal;
    font-display: swap;}

@font-face {
    font-family: 'NexonLv1Gothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF Light.woff') format('woff');
    font-weight: 300;
    font-display: swap;}



/*reset css*/
* {
    margin: 0; padding: 0;}
body {
    font-family: 'Pretendard-Regular';
    font-size: 12px;
    color: #333;}
ul {list-style: none;}
img {border: 0;}
a {text-decoration: none;
    color: inherit;}



/*메인 페이지*/
#wrap {
    width: auto; height: auto;}


#header_wrap {
    width: auto; height: 200px;
    margin: 0 auto;}

    #header_wrap #header {
    width: 80%;
    margin: 40px auto 0 auto;
    display: flex;}

    #header .logo {
        width: 80px; height: auto;
        margin-top: 36px;}

    #header .gnb {
        width: 65%; height: 50px;
        margin: 70px auto 0 auto;
        display: flex; justify-content: space-between;}
    #header .gnb .gnb_list {
        position: relative;
        font-size: 18px;
        font-weight: 700;
        line-height: 50px;}
    #header .gnb .gnb_list a {
        transition: color 0.2s ease-in-out;}
    #header .gnb .gnb_list a:hover {
        color: #C0E0FF;
        transition-delay: 0s;}

    #header .gnb .gnb_list .lnb {
        visibility: hidden;
        width: 100px; height: auto;
        padding-left: 20px;
        position: absolute;
        top: 50px; left: 0; z-index: 100;
        opacity: 0;
        transition: opacity 0.2s ease-in-out, visibility 0.2s linear 0.2s;
        background-color: #f9fcff;}
    #header .gnb .gnb_list:hover .lnb {
        visibility: visible;
        opacity: 1;
        transition-delay: 0s;}
    #header .gnb .gnb_list .lnb .lnb_list {
        font-size: 14px;
        font-weight: 500;}

    #header .SNS {
        width: 50px;
        margin: 70px 0 0 60px;}
    #header .SNS svg .icon-outline {
        fill: none;
        stroke: #333333;
        stroke-width: 10;
        transition: stroke 0.2s ease-in-out;}
    #header .SNS svg .icon-fill {
        fill: #333333;
        transition: fill 0.2s ease-in-out;}
    #header .SNS:hover svg .icon-outline {
        stroke: #C0E0FF;}
    #header .SNS:hover svg .icon-fill {
        fill: #C0E0FF;}

#contents_wrap {
    width: auto; height: auto;}

    #contents_wrap #contents {
        width: 80%;
        margin: 40px auto 0 auto;}

    #hero_sec {
        width: auto; height: 400px;
        margin-bottom: 180px;
        overflow: hidden;
        position: relative;}

    #hero_sec::after {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background-image: url(../img/booth.jpg);
        background-size: 160%;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.2;
        z-index: -1;}
    
    #hero_sec .hero_txt {
        padding-top: 30px;
        margin-bottom: 40px;}
    #hero_sec .hero_txt h1 {
        margin-bottom: 20px;
        font-family: 'SfHambakneun';
        font-size: 80px;
        line-height: 160%;
        text-align: center;
        color: #466380;}
    #hero_sec .hero_txt p {
        font-family: "Noto Sans KR";
        font-size: 16px;
        font-weight: 500;
        line-height: 160%;
        text-align: center;}
    
    #hero_sec a button {
        width: 250px; height: 60px;
        margin: 0 auto;
        display: block;
        font-size: 18px;
        font-weight: 600;
        text-align: center;
        border: none;
        border-radius: 30px;
        color: #fff;
        background-color: #333;
        transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;}
    #hero_sec a button:hover {
        cursor: pointer;
        color: #333;
        background-color: #C0E0FF;}

    #event_notice {
        width: auto; height: 300px;
        margin-bottom: 180px;
        overflow: hidden;}
    
    #event_notice .title_box {
        display: flex;
        gap: 40px;}
    #event_notice .title_box .title {
        width: auto; height: 60px;
        margin-bottom: 40px;
        font-family: 'NexonLv1Gothic';
        font-size: 30px;
        line-height: 60px;
        color: #466380;}
    #event_notice .title_box .title_sub {
        width: auto; height: 60px;
        font-family: 'Pretendard-Regular';
        font-size: 16px;
        line-height: 60px;
        color: #466380;}
    #event_notice .title_box hr {
        flex: 1;
        height: 0px;
        border: none;
        border-top: 1px solid #466380;
        margin-top: 30px;}

    #event_notice .event_txt {
        width: auto; height: 240px;
        text-align: center;
        position: relative;}
    #event_notice .event_txt::after {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background-image: url(../img/logo_illustarfes.png);
        background-size: 80%;
        background-repeat: no-repeat;
        background-position: top;
        opacity: 0.2;
        z-index: -1;}

    #event_notice .event_txt h3 {
        padding-top: 40px;
        margin-bottom: 20px;
        font-size: 40px;
        font-weight: 900;}
    #event_notice .event_txt p {
        font-size: 20px;
        font-weight: 600;
        line-height: 160%;}

    #works_preview {
        width: auto; height: 240px;
        margin-bottom: 180px;
        overflow: hidden;}

    #works_preview .title_box {
        display: flex;
        gap: 40px;} 
    #works_preview .title_box .title {
        width: auto; height: 60px;
        margin-bottom: 40px;
        font-family: 'NexonLv1Gothic';
        font-size: 30px;
        line-height: 60px;
        color: #466380;}
    #works_preview .title_box .title_sub {
        width: auto; height: 60px;
        font-family: 'Pretendard-Regular';
        font-size: 16px;
        line-height: 60px;
        color: #466380;}
    #works_preview .title_box hr {
        flex: 1;
        height: 0px;
        border: none;
        border-top: 1px solid #466380;
        margin-top: 30px;}
    
    #works_preview .preview_box_wrap {
        width: 800px;
        margin: 0 auto;
        display: flex;
        justify-content: space-around;}
    #works_preview .preview_box_wrap a {
        position: relative;}
    #works_preview .preview_box_wrap a .img_box {
        opacity: 1;
        transition: opacity 0.3s ease-in-out, visibility 0.3s linear 0.3s;}
    #works_preview .preview_box_wrap a .img_box img {
        width: 140px;
        opacity: 1;
        transition: opacity 0.3s ease-in-out, visibility 0.3s linear 0.3s;}
    #works_preview .preview_box_wrap a p {
        visibility: hidden;
        position: absolute;
        bottom: 40%; left: 50%;
        transform: translate(-50%, 0);
        font-size: 18px;
        font-weight: 600;
        text-align: center;
        opacity: 0;
        transition: opacity 0.3s ease-in-out, visibility 0.3s linear 0.3s;}
    #works_preview .preview_box_wrap a:hover .img_box {
        background-color: #fff;
        opacity: 0.2;}
    #works_preview .preview_box_wrap a:hover .img_box img {
        opacity: 0.5;
        transition-delay: 0s;}
    #works_preview .preview_box_wrap a:hover p {
        visibility: visible;
        opacity: 1;
        transition-delay: 0s;} 


#footer_wrap {
    width: auto; height: 40px;
    margin: 0 auto;}

    #footer_wrap #footer {
        width: 80%; height: auto;
        margin: 0 auto;}
    #footer p {
        font-size: 14px;
        font-weight: 400;
        line-height: 40px;
        text-align: center;}



/*introduce*/
#intro_sec01 {
    background-color: #ccc;
    height: 300px;
    margin-bottom: 180px;}

    #intro_sec01 h1 {}
    #intro_sec01 p {}

#intro_sec02 {
    background-color: #ddd;
    height: 500px;
    margin-bottom: 180px;}

    #intro_sec02 h1 {}

    #intro_sec02 .history_year {
        margin-bottom: 100px;}

    #intro_sec02 .history_year h2 {}
    #intro_sec02 .history_year ol {margin-bottom: 20px;}
    #intro_sec02 .history_year ol li {list-style: none;}

#intro_sec03 {background-color: #ddd;
    height: auto;
    margin-bottom: 180px;
    padding-bottom: 20px;}

    #intro_sec03 h1 {}

    #intro_sec03 .member {}
    
    #intro_sec03 .member ul {
        width: 60%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 20px 4%;}
    #intro_sec03 .member ul li {}
    #intro_sec03 .member ul li img {
        width: 150px;
        height: auto;}
    #intro_sec03 .member ul li h3 {}
    #intro_sec03 .member ul li p {}