@import url('reset.css');

@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansLight';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'PuradakGentleGothicR';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.1/PuradakGentleGothicR.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}




#wrap { width: 100%; }

header { width: 100%; border-bottom: 2px solid #c17539;}
#header { width: 1200px; margin: 0 auto;}
#header h1 { 
    float: left; 
    width: 30%; 
    padding: 67px 0 30px 0px;
}

nav { float: left; width: 70%;}
nav > ul.gnb { float: right; margin-top: 90px;}
nav > ul.gnb > li { position: relative; float: left; }
nav > ul.gnb > li > a { padding: 15px 30px 20px 30px; font-size: 22px; color: #000; font-weight: 500; display: block;}
nav > ul.gnb > li:hover > a { background: #f3640e; color: #fff;}


nav ul.sub{ position: absolute; top: 59px; left: 0; z-index:777; width: 100%; display: none;}
nav ul.sub li {background:#eee ; text-align: center;}
nav ul.sub li a{ padding:10px 0;display: block;}
nav ul.sub li a:hover {background:#ddd; color:#000 ;}

.nav_bg{
    position: absolute;
    top: 150px;
    left: 0;
    width: 100%;
    height: 180px;
    background: #fff;
    z-index: 776;
    display: none;
    border-bottom:#9999;
}



.toggle { display: none;}

.nav_480{ 
    width:0;
    height: 100%;
    top: 0;
    right:0;
    position: fixed;
    z-index:66666677777;
    right: 0 ;
    overflow: hidden;
    transition: 0.5s;
    padding-top:60px ;
    background: #9531f3;
}
.nav_480 a {
    color: #000;
    font-size: 18px;
    padding:10px 0 10px 20px;
    display: block;
}
.nav_480 .cloesbtn{
    position: absolute ;
    top: 10px;
    right:10px;
    color: #000;
}

ul.menu { width: 250px; }

.sns_480 { 
    display: flex; 
    position: absolute;
    bottom: 2%;
    left: 45%;
    transform: translate(-50%, -50%);
}

.sns_480 a i { font-size: 24px; }

.fixed-header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background: rgb(255 ,255,255 ,1);
    animation: slide-down 0.5s;
    z-index: 999999999999;
    border-bottom: 1px solid #9999;
}
@keyframes slide-down{
    0%{  transform: translateY(-100%); opacity; 0;}
    100%{ transform :translateY( 0); opacity: 1;}
    
}


@media(max-width:1220px) {
    #header { width: 100%; }
    nav > ul.gnb { float: right; margin-top: 90px; width: 100%;}
    nav > ul.gnb > li { width: 20%; text-align: center;}
    nav > ul.gnb > li > a { padding: 15px 0px 20px 0px;}
}


@media(max-width:768px){
    #header h1 { width: 100%; padding: 20px 0 20px 20px;}
    #header h1 img { width: 15%;}
    nav { width: 100%;}
    nav > ul.gnb { margin-top: 0px; background: #e90dcc; width: 100%;}
    nav > ul.gnb > li > a { color: #fff; padding: 10px 0; display: block; font-size: 18px;}
    nav > ul.gnb > li:hover > a { background: #000;}
    nav ul.sub{ top: 43px; z-index: 777777;}
    .nav_bg { top: 153px; height: 160px;}
    .fixed-header{ height: 100px;}
}



@media(max-width:480px){
    nav > ul.gnb { display: none;}  
    .toggle {
        display: block;
        position: absolute;
        top: 20px;
        right:10px;
    } 
    .toggle a i { font-size: 26px}
    #header h1 { padding: 10px 0 15px 20px;}
    #header h1 img { width: 20%;}
    .fixed-header {display: none;}
}



#banner { position:relative ; width:100% ;background-color: #ccc;}



#sub_menu_wrap{ width: 100%; border-bottom: 1px solid #c17539;}
.sub_menu { width: 1200px; margin: 0 auto;}
.sub_menu li { float: left; padding: 15px 20px;}
.sub_menu li.line { border-right: 1px solid #ccc;}
.sub_menu li a { font-size: 18px; font-weight: 500;}
.sub_menu li:hover { border-bottom: 2px solid #000;}
.sub_menu li.active { border-bottom: 2px solid #c17539;}

@media(max-width:1220px){
    .sub_menu { width: 100%; }
}
@media(max-width:768px){
    .sub_menu li{ padding: 10px; }
    .sub_menu li a { font-size: 16px;}
}
@media(max-width:480px){
    .sub_menu li{ padding: 7px 0;  }
    .sub_menu li {width: 25%; text-align: center;}
    .sub_menu li a { font-size: 14px; font-weight: 500;}
}




/* 행사포스터 내용 */

.img_box_wrap { float: left; width: 25%; padding: 0 20px; margin:0 0% 5% 0%;}

.img_box { position: relative; overflow: hidden; }
.img_box img { width: 100%; max-width: 100%; height: auto; }

.img_box:hover img { opacity: 0.1; transform: scale(1.2); }
.img_box *{ transition: all 0.4s ease-in-out; }

.img_box_text_480 { display: none; }
.ib_text_1_480 { color: rgb(82, 7, 75); font-size: 16px; font-weight: 500; }
.ib_text_1_480 span { color: #836407; font-size: 14px; font-weight: 300; }
.ib_text_2_480 { color: #110342; font-size: 14px; font-weight: 300; }


.img_box h3 {  
    position: absolute;
    top: 20%;
    left: 10%;
    z-index: 999;
    transform: translateX(-40%);
    color: rgb(99, 10, 117);;
    font-size: 22px;
    font-weight: 500;
    opacity: 0;
    padding: 20px 0 0 0px;
    line-height: 30px;
}
.img_box:hover h3 {
    transition-delay: 0.3s;
    transform: translateX(0);
    opacity: 1;
}

.img_box h3 span { font-size: 14px; color: #722323; font-weight: 300;}

.ib_text_1 {
    position: absolute;
    top: 40%;
    left: 10%;
    z-index: 91;
    transform: translateX(-40%);
    color: #ce1d1d;
    font-size: 16px;
    opacity: 0;
    padding: 0px 0 0 0px;
    font-weight: 300;
    line-height: 50px;
}

.img_box:hover .ib_text_1 {
    transition-delay: 0.5s;
    transform: translateX(0);
    opacity: 1;
}

.ib_text_2 {
    position: absolute;
    top: 50%;
    left: 10%;
    z-index: 91;
    transform: translateX(-40%);
    color: #2a0555;
    font-size: 20px;
    opacity: 0;
    padding: 0px 0 0 0px;
    font-weight: 300;
    line-height: 80px;

}

.img_box:hover .ib_text_2 {
    transition-delay: 0.7s;
    transform: translateX(0);
    opacity: 1;
}


#contents_wrap_1 { width: 100%; margin-top: 150px;}
#contents_wrap_2 { width: 100%; margin-top: 100px;}

#contents { position: relative; width: 1200px; margin: 0 auto;}

.sub_title { 
    width: 100%; 
    text-align: center; 
    font-size: 55px;
    font-family: 'GmarketSansBold';
    padding-bottom: 20px;
    color: #000;
}
.sub_text { 
    text-align: center;
    font-size: 14px;
    color: #999;
    margin-bottom: 70px;
    font-family: 'GmarketSansMedium';
}
.sub_text:after {
    content: "";
    display: block;
    width: 30%; /* 밑줄 길이 조절 */
    border-bottom: 2px solid #e77d03;
    margin: 1px auto;
}


@media(max-width:1220px){
    #contents { width: 100%; padding: 0 5% ; }
    .box_wrap  { width: 100%;}
    .sub_text:after {width: 35%;}

}

@media(max-width:768px){
    .sub_title { font-size: 40px; padding-bottom: 15px;}
    .sub_text { font-size: 12px; margin-bottom: 50px;}
    .img_box_wrap  { width: 50%; margin-bottom: 30px;}
    .img_box h3 { top: 10%; left: 5%;}
    .ib_text_1 {top: 32%; left: 5%;}
    .ib_text_2 {top: 45%; left: 5%; }
    .sub_text:after {width: 45%;}

}

@media(max-width:480px){
    .sub_title { font-size: 35px; padding-bottom: 10px;}
    .sub_text { font-size: 10px; margin-bottom: 30px; padding: 5px 0 0 0;}
    .sub_text:after {width: 60%;}

}



@media( max-width:480px ){
    .img_box_wrap  { width: 100%; }
    .img_box_wrap img  { width: 100%; }
    .img_box_text { display: none; }
    .img_box_text_480 { display: block; padding: 0 3%; margin:20px 0 50px 0;}

    body > header > h1 {width: 100%; padding: 10px 0 10px 20px; margin: 0; color: rgb(77, 67, 7); font-size: 1.2rem; border-bottom: 1px solid rgba(206, 204, 204, 0.3); text-align: center; background: rgba(39, 39, 39, 0.8);}
    body > header > nav { width: 100%; border-bottom: 1px solid rgba(206, 204, 204, 0.3); background: rgba(39, 39, 39, 0.8);}
    body > header ul { }
    body > header ul li{ width: 33.333%; text-align: center;}
    body > header a{ display: block; padding:5px 0; margin: 0;}

    
}


.info_img_wrap { margin: 0 -15px; }
.info_img_wrap::after { display: table; content: ''; clear: both;}

.info_img { float: left; width: 33.333%; padding: 0  15px;}

.info_text{ font-size: 18px; line-height: 28px;}
.info_img_text { text-align: center; font-size: 24px; padding-top: 20px; }

@media(max-width:768px){
    #contents_wrap_1{ margin-top: 70px; }
    .info_img_bottom { display: block;}
    .info_text{ font-size: 16px; text-align: justify;}
    .info_img_text{ font-size: 18px; }

}
@media(max-width:480px){
    #contents_wrap_1{margin-top: 50px; }
    .info_img { width: 100%;}
    .info_img img{ width: 100%;}
    .info_img_bottom { margin-bottom: 30px; }
    .info_img_text { font-size: 18px; padding-top: 10px;}
    }

















.img_box { width: 100%; }
.img_box img{ width: 100%; }

.img_title { 
    width: 100%; 
    background: #1a4e6a; 
    color: #fff; 
    text-align: center; 
    padding: 1.3vw 0; 
    margin-bottom: 30px;
    font-size: 1.5vw;
    font-weight: 500;
}
.img_title span{ color: #eefa0a; }
.bar_bg_1 { background: #64b2bf; }
.bar_bg_2 { background: #64b2bf; }
.bar_bg_3 { background: #bb5d91; }



@media(max-width:1220px){
    .img_title { font-size: 2vw;}
}
@media(max-width:768px){
    .img_title { font-size: 2.7vw;}
} 
@media(max-width:480px){
    .img_title { font-size: 3vw; padding: 2vw 0;}
}











footer { width: 100%; border-top: 1px solid #999;}
#footer { width: 1200px; height: 250px; margin: 0 auto; }

.f_logo { float: left; padding: 60px 0 0 0;}
.copy { float: left; font-size: 16px; color: #777; padding:55px 0 0 50px; }
.copy_480{ float: left;font-size: 3.5vw;color: #777; display: none;}
.sns { float: right; padding-top: 50px;}
.sns a i { font-size: 2rem; color: #999; padding: 10px 10px 0 10px;}
.sns a:hover i {color: #000;}

@media(max-width:1220px){
    #footer  { width: 100%; padding: 0 5%;}
    .f_logo { width: 100%; text-align: center;}
    .f_logo img { width: 12%;}
    .copy { width: 100%; font-size: 15px; padding:15px 0 0 0px; text-align: center; }
    .sns { width: 100%; padding-top: 20px; text-align: center;}
}

@media(max-width:768px){
    #footer { height:300px;}
    .f_logo { width: 100%; text-align: center;}
    .f_logo img { width: 15%;}
    .copy { width: 100%; font-size: 13px; padding:15px 0 0 0px; text-align: center; }
    .sns { width: 100%; padding-top: 18px; text-align: center;}
}
@media(max-width:480px){
    .f_logo {  margin-bottom:0px;}
    .f_logo img { width: 20%;}
    .copy {font-size: 10px; }
    #footer { height:200px;}
    .sns{ display: none;}
}