commit 76dae92cbe1977c380d31d6ea3e83d170ddffdcf
Author: DohyunJegal <dohyunm14@chungbuk.ac.kr>
Date:   Tue Aug 9 16:42:46 2022 +0900

    22-08-09

diff --git a/copy-css.txt b/copy-css.txt
new file mode 100644
index 0000000..9c36ea2
--- /dev/null
+++ b/copy-css.txt
@@ -0,0 +1,928 @@
+* {
+    font-family: 'Noto Sans KR', 'sans-serif';
+}
+body {
+    margin: 0 auto;
+    overflow-x: hidden;
+}
+ul {
+    list-style: none;
+    padding: 0;
+}
+a:visited, a:link {
+    text-decoration: none;
+    color: black;
+}
+h1, h2, h3, h4, h5, p {
+    margin: 0;
+}
+div, section, nav, main, footer, span {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+.hide {
+    display: none !important;
+}
+/*notice효과들*/
+.notice-fade-in {
+    transform: translateY(0px);
+    opacity: 1;
+}
+.notice-fade-out {
+    transform: translateY(80px);
+    opacity: 0;
+}
+/*notice banner 효과들*/
+.notice-banner-animation0-off {
+    transform: translateY(150px);
+    opacity: 0;
+}
+.notice-banner-animation1-off {
+    transform: translateY(200px);
+    opacity: 0;
+}
+.notice-banner-animation2-off {
+    transform: translateY(250px);
+    opacity: 0;
+}
+.notice-banner-animation0-on {
+    transform: translateY(0px);
+    transition: all 1s;
+    opacity: 1;
+}
+.notice-banner-animation1-on {
+    transform: translateY(0px);
+    transition: all 1s;
+    opacity: 1;
+}
+.notice-banner-animation2-on {
+    transform: translateY(0px);
+    transition: all 1s;
+    opacity: 1;
+}
+/*bot slider효과들*/
+.bot-slider-fade-in {
+    transform: translateY(0px);
+    opacity: 1;
+}
+.bot-slider-fade-out {
+    transform: translateY(200px);
+    opacity: 0;
+}
+.fixed{
+    position: fixed;
+    top: 0;
+}
+.dot-color {
+    background-color: #7CE063 !important;
+}
+.cusor-p {
+    cursor: pointer;
+}
+.nav {
+    width: 100%;
+    height: auto;
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
+    justify-content: flex-start;
+    text-align: center;
+    padding-top: 15px;
+    overflow: hidden;
+    background-color: #fff;
+    z-index: 999;
+}
+.nav .login-sec {
+    width: 100%;
+    height: auto;
+    padding-bottom: 10px;
+}
+.nav .login-sec .login-menu {
+    width: 100%;
+    max-width: 1080px;
+    margin: 0 auto;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: flex-end;
+    align-items: center;
+    font-size: 16px;
+    font-weight: 600;
+    color: #000;
+}
+.nav .login-sec .login-menu li:nth-child(2) {
+    margin-left: 8px;
+    margin-right: 8px;
+}
+.nav .logo-sec {
+    width: auto;
+    max-width: 1080px;
+    height: auto;
+}
+.nav .logo-sec .nav-logo{
+    width: 355px;
+    height: auto;
+}
+.nav .logo-sec .nav-logo-m {
+    display: none;
+}
+.nav .gnb {
+    width: 100%;
+    max-width: 1150px;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: flex-start;
+    align-items: center;
+    margin-top: 15px;
+}
+.nav .gnb .main-menu {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-around;
+    align-items: center;
+    font-size: 22px;
+    font-weight: 600;
+    margin-bottom: 20px;
+    flex: 5;
+}
+.nav .gnb .gnb-sns {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-around;
+    align-items: center;
+    margin-bottom: 20px;
+    flex: 1;
+}
+.nav .gnb .gnb-sns li {
+    width: 28px;
+    height: 28px;
+    transition: all 0.2s;
+}
+.nav .gnb-line{
+    width: 100%;
+    height: 5px;
+    background: url("./main/main/line.png") no-repeat center;
+    background-size: cover;
+}
+.nav .toggle-btn {
+    display: none;
+}
+.m-menu-box {
+    transition: all 1s;
+}
+/*********************************************************************/
+#main {
+    width: 100%;
+    height: auto;
+    margin: 0;
+    padding: 0;
+}
+#main .slider-sec{
+    width: 100%;
+    height: auto;
+}
+#main .slider-sec .slider-outer{
+    width: 100%;
+    height: auto;
+    min-height: 240px;
+    position: relative;
+    overflow: hidden;
+}
+#main .notice-sec {
+    width: 100%;
+    height: auto;
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    margin-top: 50px;
+    
+}
+#main .notice-sec .notice {
+    width: 100%;
+    max-width: 1080px;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    margin-bottom: 20px;
+    transition: all 1s;
+}
+#main .notice-sec .notice h4 {
+    font-size: 22px;
+    font-weight: 800;
+    flex: 1;
+}
+#main .notice-sec .notice .notice-roll-box{
+    width: 900px;
+    height: 24px;
+    font-size: 18px;
+    font-weight: 700;
+    margin-left: 25px;
+    position: relative;
+    overflow: hidden;
+}
+#main .notice-sec .notice .notice-roll-box .notice-roll{
+    width: 100%;
+    height: auto;
+    margin: 0;
+    animation: noticeRoll 5s infinite;
+}
+@keyframes noticeRoll {
+    0% { transform: translateY(0px);}
+    25% { transform: translateY(-24px);}
+    50% { transform: translateY(-48px);}
+    50.05% { transform: translateY(0px);}
+    100% { transform: translateY(0px);}
+}
+#main .notice-sec .notice .notice-roll li{
+    width: 100%;
+    height: 24px;
+}
+#main .notice-sec .notice .notice-btn {
+    border: none;
+    background: transparent;
+} 
+#main .notice-sec .banner {
+    width: 100%;
+    max-width: 1080px;
+    height: auto;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 80px;
+    transition: all 1s;
+}
+#main .bot-slider-sec {
+    width: 100%;
+    background-color: #B4A0FF;
+    transition: all 1s;
+}
+#main .bot-slider-sec .bot-slider-box {
+    width: 100%;
+    max-width: 1080px;
+    margin: 0 auto;
+    padding-top: 50px;
+    padding-bottom: 50px;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    align-items: center;
+}
+#main .bot-slider-sec .bot-slider-box .bot-slider-text-box {
+    width: 300px;
+    height: auto;
+    display: flex;
+    flex-flow: column;
+}
+#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text {
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: flex-start;
+    color: #fff;
+}
+#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:first-child{
+    font-size: 2em;
+    display: block;
+    font-weight: normal;
+}
+#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:nth-child(2){
+    font-size: 2.4em;
+    margin-bottom: 30px;
+}
+#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:nth-child(3){
+    font-size: 1.5em;
+    font-weight: normal;
+}
+#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:last-child{
+    font-size: 1.3em;
+    padding-bottom: 30px;
+}
+#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .bot-slider-btn-box {
+    width: 150px;
+    height: auto;
+}
+#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .bot-slider-btn-box .bot-slider-btn{
+    border: none;
+    background: transparent;
+    filter: contrast(170%);
+}
+#main .bot-slider-sec .bot-slider-box .bot-slider-outer {
+    width: 780px;
+    height: auto;
+    padding: 0px 15px 0px 15px;
+    box-sizing: border-box;
+}
+#main .bot-slider-sec .bot-slider-box .bot-slider-outer .swiper-slide{
+    padding: 0px 10px 0px 10px;
+    box-sizing: border-box;
+}
+#main .alliance-sec {
+    width: 100%;
+    height: auto;
+    border-top: 1px solid #e0e0e0;
+    display: flex;
+    flex-flow: row;
+    justify-content: center;
+    transition: all 1s;
+}
+#main .alliance-sec .alliance-bar {
+    width: 100%;
+    max-width: 1080px;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    margin-top: 15px;
+    margin-bottom: 15px;
+}
+#main .alliance-sec .alliance-bar a {
+    margin-right: 70px;
+}
+#footer {
+    width: 100%;
+    height: auto;
+    border-top: 1px solid #e0e0e0;
+    padding-top: 50px;
+    padding-bottom: 30px;
+    display: flex;
+    flex-flow: row;
+    justify-content: center;
+}
+#footer .footer-box {
+    width: 100%;
+    max-width: 1080px;
+    display: flex;
+    flex-flow: row;
+    justify-content: space-between;
+    align-items: center;
+}
+#footer .footer-box .footer-logo {
+    width: auto;
+    height: auto;
+    flex: 1;
+}
+#footer .footer-box .footer-logo img {
+    width: 50%;
+}
+#footer .footer-box .footer-sns {
+    display: none;
+}
+#footer .footer-box .footer-text {
+    display: flex;
+    flex-flow: column;    
+    color: #666;
+    font-size: 14px;
+    flex: 2;
+}
+#footer .footer-box .footer-text span {
+    margin-bottom: 5px;
+}
+#footer .footer-box .footer-text span:last-child {
+    margin-top: 10px;
+}
+#footer .footer-box .call-num {
+    flex: 1;
+}
+#footer .footer-box .call-num h1{
+    font-size: 18px;
+    font-weight: 500
+}
+#footer .footer-box .call-num p {
+    font-size: 14px;
+    font-weight: 500;
+}
+#footer .footer-box .call-num p > strong{
+    font-size: 35px;
+    font-weight: 600
+}
+.nav-scroll{
+    width: 100%;
+    height: auto;
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    background-color: #fff;
+    z-index: 9999;
+}
+.nav-scroll .scroll-nav-top {
+    width: 100%;
+    max-width: 1080px;
+    height: auto;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: flex-end;
+    align-items: center;
+}
+.nav-scroll .scroll-nav-top .gnb-sns {
+    width: auto;
+    height: auto;
+    display: flex;
+    flex-flow: row;
+}
+.nav-scroll .scroll-nav-top .gnb-sns li {
+    width: 28px;
+    height: 28px;
+    margin-right: 25px;
+    transition: all 0.2s;
+}
+.nav-scroll .scroll-nav-top .login-sec {
+    width: auto;
+    height: auto;
+}
+.nav-scroll .scroll-nav-top .login-sec .login-menu{
+    width: auto;
+    height: auto;
+    display: flex;
+    flex-flow: row nowrap;
+    font-size: 16px;
+    font-weight: 600;
+}
+.nav-scroll .scroll-nav-top .login-sec .login-menu li:nth-child(2) {
+    margin-left: 8px;
+    margin-right: 8px;
+}
+.nav-scroll .scroll-nav-bottom {
+    width: 100%;
+    max-width: 1080px;
+    height: auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.nav-scroll .scroll-nav-bottom .logo-sec{
+    width: 100%;
+    height: auto;
+    flex: 1;
+    text-align: center;
+}
+.nav-scroll .scroll-nav-bottom .logo-sec img{
+    width: 60%;
+    height: auto;
+}
+.nav-scroll .scroll-nav-bottom .gnb{
+    width: 100%;
+    height: auto;
+    flex: 2;
+}
+.nav-scroll .scroll-nav-bottom .gnb .main-menu{
+    width: 100%;
+    height: auto;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: space-between;
+}
+.nav-scroll .scroll-nav-bottom .gnb .main-menu li{
+    font-size: 22px;
+    font-weight: 600;
+}
+.nav-scroll .gnb-line{
+    width: 100%;
+    height: 5px;
+    background: url(./main/main/line.png) no-repeat center;
+    background-size: cover;
+}
+.swiper {
+    width: 100%;
+    height: 100%;
+}
+.swiper-wrapper {
+    width: 100%;
+    height: 100%;
+    min-height: 240px ;
+}
+.swiper-slide{
+    width: 100%;
+    height: 100%;
+}
+.swiper-slide img {
+    display: block ;
+    width: 100% ;
+    height: 100%;
+    object-fit: cover;
+} 
+.swiper .swiper-pagination-bullet {
+    width: 12px;
+    height: 12px;
+    background-color: #7CE063;
+    margin: 0 15px !important;
+}
+@media (max-width: 425px) {
+    #scroll-nav {
+        display: none !important;
+    }
+    .m-menu-box {
+        width: 100vw;
+        height: 100vh;
+        background-color: rgba(0, 0, 0, 0.6);
+        z-index: 9999;
+        position: absolute;
+    }
+    .m-menu-box .m-menu {
+        width: 85%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        background-color: #fff;
+    }
+    .m-menu-box .m-menu .m-login-sec {
+        width: 100%;
+        height: auto;
+        padding: 25px 0px;
+        text-align: center;
+    }
+    .m-menu-box .m-menu .m-login-sec .m-login-menu {
+        margin: 0;
+        display: flex;
+        flex-flow: row-reverse nowrap;
+        justify-content: center;
+        align-items: center;
+        font-size: 1rem;
+    }
+    .m-menu-box .m-menu .m-login-sec .m-login-menu > li:nth-child(2){
+        margin-left: 30px;
+        margin-right: 30px;
+    }
+    .m-menu-box .m-menu .m-gnb {
+        width: 100%;
+        height: auto;
+    }
+    .m-menu-box .m-menu .m-gnb .m-main-menu {
+        margin: 0;
+    }
+    .m-menu-box .m-menu .m-gnb .m-main-menu > li {
+        width: 100%;
+        height: auto;
+        font-size: 20px;
+        font-weight: 800;
+        padding: 15px 30px;
+        box-sizing: border-box;
+    }
+    .nav .login-sec {
+        width: 100%;
+        height: 70px;
+        display: none;
+    }
+    .nav .logo-sec {
+        width: 50%;
+        max-width: 1080px;
+        height: auto;
+    }
+    .nav .logo-sec .nav-logo{
+        display: none;
+    }
+    .nav .logo-sec .nav-logo-m {
+        display: block;
+        margin: 0 auto;
+        width: 100%;
+    }
+    .nav .gnb {
+        display: none;
+    }
+    .nav .gnb-line{
+        width: 100%;
+        height: 5px;
+        background: url("./main/main/line.png") no-repeat center;
+        background-size: cover;
+        margin-top: 10px;
+    }
+    .nav .toggle-btn{
+        width: 50px;
+        height: 29px;
+        position: absolute;
+        top: calc((80px - 29px) / 2);
+        left: calc((100% - 60px ));
+        padding: 0px ;
+        display: flex;
+        flex-flow: column;
+        justify-content: space-around;
+        align-items: center;
+    }
+    .nav .toggle-btn > div {
+        width: 30px;
+        height: 4px;
+        background-color: #B4A0FF;
+        display: block;
+        margin: 0;
+    }
+    /* nav m-menu */
+
+    /*silder-sec*/
+    #main .slider-sec .slider-outer .slider-btn {
+        width: 100%;
+        height: 50px;
+        position: absolute;
+        bottom: 0;
+        display: flex;
+        flex-flow: row;
+        justify-content: center;
+        align-items: center;
+    }
+    #main .slider-sec .slider-outer .slider-btn .slider-bullet {
+        content: "";
+        display: inline-block;
+        vertical-align: middle;
+        width: 10px;
+        height: 10px;
+        background-color: rgba(0, 0, 0, 0.4);
+        border-radius: 100%;
+    }
+    #main .slider-sec .slider-outer .slider-btn .slider-bullet:nth-child(2) {
+        margin-left: 25px;
+        margin-right: 25px;
+    }
+    #main .notice-sec {
+        width: 100%;
+        height: auto;
+        display: flex;
+        flex-flow: column;
+        align-items: center;
+        margin-top: 0px;
+    }
+    #main .notice-sec .notice {
+        width: 100%;
+        max-width: 1080px;
+        height: auto;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        padding: 10px 20px;
+        margin-bottom: 0px;
+    }
+    #main .notice-sec .notice h4 {
+        width: 25%;
+        font-size: 18px;
+        font-weight: bold;
+    }
+    #main .notice-sec .notice .notice-roll-box{
+        width: 70%;
+        height: 35px;
+        font-size: 16px;
+        font-weight: 500;
+        margin-left: 0px;
+        position: relative;
+        overflow: hidden;
+    }
+    #main .notice-sec .notice .notice-roll-box .notice-roll{
+        width: 100%;
+        height: auto;
+        margin: 0;
+        animation: noticeRoll  5s infinite;
+    }
+    @keyframes noticeRoll {
+        0% { transform: translateY(7px);}
+        25% { transform: translateY(-27px);}
+        50% { transform: translateY(-64px);}
+        50.5% { transform: translateY(0px);}
+        100% { transform: translateY(7px);}
+    }
+    #main .notice-sec .notice .notice-roll li{
+        width: 100%;
+        height: 35px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+    #main .notice-sec .notice .notice-btn {
+        width: auto;
+        border: none;
+        background: transparent;
+    } 
+    #main .notice-sec .notice .notice-btn img{
+        width: 15px;
+        height: 15px;
+    } 
+    #main .notice-sec .banner {
+        width: 100%;
+        max-width: 1080px;
+        height: auto;
+        display: flex;
+        flex-flow: column nowrap;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0px 20px 20px 20px;
+    }
+    #main .notice-sec .banner a{
+        width: 100%;
+        height: auto;
+    }
+    #main .notice-sec .banner a img{
+        width: 100%;
+    }
+    /*notice*/
+    #main .bot-slider-sec {
+        width: 100%;
+        background-color: #B4A0FF;
+    }
+    #main .bot-slider-sec .bot-slider-box {
+        width: 100%;
+        max-width: 1080px;
+        margin: 0 auto;
+        padding-top: 50px;
+        padding-bottom: 50px;
+        display: flex;
+        flex-flow: column nowrap;
+        justify-content: space-between;
+        align-items: center;
+    }
+    #main .bot-slider-sec .bot-slider-box .bot-slider-text-box {
+        width: auto;
+        height: auto;
+        display: flex;
+        flex-flow: column;
+        align-items: center;
+    }
+    #main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text {
+        display: block;
+        color: #fff;
+        text-align: center;
+    }
+    #main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:first-child{
+        font-size: 1.75rem;;
+        display: inline-block;
+        font-weight: normal;
+    }
+    #main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:nth-child(2){
+        font-size: 1.6em;
+        margin-bottom: 30px;
+    }
+    #main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:nth-child(3){
+        font-size: 18px;
+        display: inline-block;
+        font-weight: normal;
+        margin-top: 10px;
+    }
+    #main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:last-child{
+        font-size: 18px;
+        padding-bottom: 0px;
+    }
+    #main .bot-slider-sec .bot-slider-box .bot-slider-text-box .bot-slider-btn-box {
+        width: auto;
+        height: auto;
+        padding-top: 20px;
+        padding-bottom: 25px;
+    }
+    #main .bot-slider-sec .bot-slider-box .bot-slider-text-box .bot-slider-btn-box .bot-slider-btn{
+        border: none;
+        background: transparent;
+        filter: contrast(170%);
+    }
+    #main .bot-slider-sec .bot-slider-box .bot-slider-outer {
+        width: 100%;
+        height: auto;
+    }
+    #main .bot-slider-sec .bot-slider-box .bot-slider-outer .bot-slider-inner {
+        width: auto;
+        height: auto;
+        padding: 0px 0px;
+        overflow: hidden;
+    }
+    #main .bot-slider-sec .bot-slider-box .bot-slider-outer .bot-slider-inner .bot-slider-items {
+        width: 100%;
+        height: auto;
+        display: flex;
+        padding: 0px;
+        transition: all 1s;
+    }
+    #main .bot-slider-sec .bot-slider-box .bot-slider-outer .bot-slider-inner .bot-slider-items a {
+        width: 100%;
+        height: auto;
+        padding: 0px 30px;
+    }
+    #main .bot-slider-sec .bot-slider-box .bot-slider-outer .bot-slider-inner .bot-slider-items a:nth-child(2n) {    
+        margin-left: 0px;
+        margin-right: 0px;
+    }
+    /*bot-slider-sec*/
+    #main .alliance-sec {
+        width: 100%;
+        height: auto;
+        border-top: 1px solid #e0e0e0;
+        display: flex;
+        flex-flow: row;
+        justify-content: center;
+    }
+    #main .alliance-sec .alliance-bar {
+        width: 100%;
+        max-width: 1080px;
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 15px;
+        margin-bottom: 15px;
+    }
+    #main .alliance-sec .alliance-bar a {
+        margin-right: 0px;
+        text-align: center;
+    }
+    #main .alliance-sec .alliance-bar a img{
+        width: 80%;
+    }
+    /*.alliance-sec*/
+    #footer {
+        width: 100%;
+        height: auto;
+        border-top: 1px solid #e0e0e0;
+        padding-top: 0px;
+        padding-bottom: 30px;
+        display: flex;
+        flex-flow: row;
+        justify-content: center;
+    }
+    #footer .footer-box {
+        width: 100%;
+        max-width: 1080px;
+        display: flex;
+        flex-flow: column;
+        justify-content: space-between;
+        align-items: center;
+    }
+    #footer .footer-box .footer-logo {
+            width: auto;
+            height: auto;
+            flex: 1;
+            display: none;
+    }
+    #footer .footer-box .footer-logo img {
+        width: 50%;
+    }
+    #footer .footer-box .footer-sns {
+        width: 100%;
+        height: auto;
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: center;
+        align-items: center;
+    }
+    #footer .footer-box .footer-sns li:first-child{
+        margin-right: 5px;
+    }
+    #footer .footer-box .footer-sns li:nth-child(2){
+        margin: 0px 5px 0px 5px;
+    }
+    #footer .footer-box .footer-sns li:nth-child(3){
+        margin: 0px 5px 0px 5px;
+    }
+    #footer .footer-box .footer-sns li:last-child{
+        margin-left: 5px;
+    }
+    #footer .footer-box .footer-text {
+        display: flex;
+        flex-flow: column;    
+        align-items: center;
+        color: #666;
+        font-size: 14px;
+        flex: 2;
+        text-align: center;
+    }
+    #footer .footer-box .footer-text span {
+        margin-bottom: 5px;
+    }
+    #footer .footer-box .footer-text span:last-child {
+        margin-top: 10px;
+    }
+    #footer .footer-box .call-num {
+        flex: 1;
+        display: none;
+    }
+    #footer .footer-box .call-num h1{
+        font-size: 18px;
+        font-weight: 500
+    }
+    #footer .footer-box .call-num p {
+        font-size: 14px;
+        font-weight: 300;
+    }
+    #footer .footer-box .call-num p > strong{
+        font-size: 35px;
+        font-weight: 500;
+    }
+    .mySwiper {
+        width: 100%;
+        height: 100%;
+    }
+    .mySwiper  .swiper-wrapper {
+        width: 100%;
+        height: 100%;
+    }    
+    .mySwiper .swiper-wrapper .swiper-slide{
+        width: 100%;
+        height: 100%;
+        max-height: 240px;
+    }
+    .mySwiper .swiper-wrapper .swiper-slide img {
+        display: block;
+        width: 100%;
+        height: 100%;
+        max-height: 240px !important;
+        object-fit: fill;
+    }
+    .mySwiper .swiper-pagination-bullet {
+        width: 9px;
+        height: 9px;
+        background-color: #7CE063;
+        margin: 0 5px !important;
+    }
+    
+}
\ No newline at end of file
diff --git a/copy.txt b/copy.txt
new file mode 100644
index 0000000..96e1e0f
--- /dev/null
+++ b/copy.txt
@@ -0,0 +1,393 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>음성명작페스티벌</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
+    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+    <link rel="stylesheet" href="./main.css">
+</head>
+
+<body>
+    <!--네비-->
+    <nav id="nav" class="nav">
+        <div class="login-sec">
+            <ul class="login-menu">
+                <li class="sign-up cusor-p "><a href=""> 회원가입</a></li>
+                <li>|</li>
+                <li class="login cusor-p ">로그인</li>
+            </ul>
+        </div>
+        <div class="logo-sec">
+            <img class="nav-logo" src="./main/logo/logo_big.png" alt="음성명작 페스티벌">
+            <img class="nav-logo-m" src="./main/logo/logo_small.png" alt="음성명작 페스티벌 모바일 홈페이지">
+        </div>
+        <div class="gnb">
+            <ul class="main-menu">
+                <li class="cusor-p ">축제소개</li>
+                <li class="cusor-p ">주요 콘텐츠</li>
+                <li class="cusor-p ">이벤트</li>
+                <li class="cusor-p ">명작스토리</li>
+                <li class="cusor-p ">커뮤니티</li>
+            </ul>
+            <ul class="gnb-sns">
+                <li class="cusor-p  gnb-sns-item insta"></li>
+                <li class="cusor-p  gnb-sns-item blog"></li>
+                <li class="cusor-p  gnb-sns-item youtube"></li>
+                <li class="cusor-p  gnb-sns-item face"></li>
+            </ul>
+        </div>
+        <div class="gnb-line"></div>
+        <div class="toggle-btn cusor-p">
+            <div class="toggle-bar"></div>
+            <div class="toggle-bar"></div>
+            <div class="toggle-bar"></div>
+        </div>
+    </nav>
+    <!-- 스크롤 네비-->
+    <nav id="scroll-nav" class="nav-scroll hide">
+        <div class="scroll-nav-top">
+            <ul class="gnb-sns">
+                <li class="cusor-p  gnb-sns-item insta"></li>
+                <li class="cusor-p  gnb-sns-item face"></li>
+                <li class="cusor-p  gnb-sns-item blog"></li>
+                <li class="cusor-p  gnb-sns-item youtube"></li>
+            </ul>
+            <div class="login-sec">
+                <ul class="login-menu">
+                    <li class="sign-up cusor-p "><a href=""> 회원가입</a></li>
+                    <li>|</li>
+                    <li class="login cusor-p ">로그인</li>
+                </ul>
+            </div>
+        </div>
+        <div class="scroll-nav-bottom">
+            <div class="logo-sec">
+                <img class="nav-logo-m" src="./main/logo/logo_small.png" alt="음성명작 페스티벌 홈페이지">
+            </div>
+            <div class="gnb">
+                <ul class="main-menu">
+                    <li class="cusor-p ">축제소개</li>
+                    <li class="cusor-p ">축제안내</li>
+                    <li class="cusor-p ">명작스토리</li>
+                    <li class="cusor-p ">게시판</li>
+                </ul>
+            </div>
+        </div>
+        <div class="gnb-line"></div>
+        <div class="toggle-btn cusor-p">
+            <div class="toggle-bar"></div>
+            <div class="toggle-bar"></div>
+            <div class="toggle-bar"></div>
+        </div>
+    </nav>
+    <!--모바일 네비-->
+    <div class="m-menu-box hide">
+        <div class="m-menu">
+            <div class="m-login-sec">
+                <ul class="m-login-menu">
+                    <li class="m-sign-up cusor-p "><a href=""> 회원가입</a></li>
+                    <li>|</li>
+                    <li class="m-login cusor-p ">로그인</li>
+                </ul>
+            </div>
+            <div class="m-gnb">
+                <ul class="m-main-menu">
+                    <li class="cusor-p ">축제소개</li>
+                    <li class="cusor-p ">축제안내</li>
+                    <li class="cusor-p ">명작스토리</li>
+                    <li class="cusor-p ">커뮤니티</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+    <!--메인-->
+    <main id="main">
+        <!--메인 슬라이드-->
+        <section class="slider-sec">
+            <div class="slider-outer">
+                <div class="swiper mySwiper">
+                    <div class="swiper-wrapper">
+                        <div class="swiper-slide">
+                            <a href="">
+                                <img src="./main/main/img_slide1.png" alt="음성명작 페스티벌 배너 광고1">
+                            </a>
+                        </div>
+                        <div class="swiper-slide">
+                            <a href="">
+                                <img src="./main/main/img_slide2.png" alt="음성명작 페스티벌 배너 광고2">
+                            </a>
+                        </div>
+                        <div class="swiper-slide">
+                            <a href="">
+                                <img src="./main/main/img_slide3.png" alt="음성명작 페스티벌 배너 광고3"></a>
+                        </div>
+                    </div>
+                    <div class="swiper-pagination"></div>
+                </div>
+            </div>
+        </section>
+        <!--메인 공지-->
+        <section class="notice-sec">
+            <div class="notice notice-fade-out ">
+                <h4>공지사항</h4>
+                <div class="notice-roll-box">
+                    <ul class="notice-roll">
+                        <li class="cusor-p">
+                            <a class="notice-text" href="">음성군 6월 대표과일!</a>
+                        </li>
+                        <li class="cusor-p">
+                            <a class="notice-text" href="">2021 음성명작 페스티벌 사이트가 리뉴얼 되었습니다~</a>
+                        </li>
+                        <li class="cusor-p">
+                            <a class="notice-text" href="">음성군 6월 대표과일!</a>
+                        </li>
+                    </ul>
+                </div>
+                <button class="notice-btn cusor-p "><img src="./main/icon/more.png" alt="공지사항 더보기 버튼"></button>
+            </div>
+            <div class="banner">
+                <a href="" class="notice-banner-animation0-off">
+                    <img src="./main/main/con1.png" alt="음성명작 페스티벌 잔치잔치 열렸네! - 포스터">
+                </a>
+                <a href="" class="notice-banner-animation1-off">
+                    <img src="./main/main/con2.png" alt="문예공모전 결과 발표 - 포스터">
+                </a>
+                <a href="" class="notice-banner-animation2-off">
+                    <img src="./main/main/con3.png" alt="명작 스토리 안심농가 방문 - 포스터">
+                </a>
+            </div>
+        </section>
+        <!--메인 바텀 슬라이드-->
+        <section class="bot-slider-sec bot-slider-fade-out">
+            <div class="bot-slider-box">
+                <div class="bot-slider-text-box">
+                    <div class="text">
+                        <span>음성명작페스티벌</span>
+                        <span><strong>둘러보기!</strong></span>
+                        <span>음성명작페스티벌</span>
+                        <span>백배 즐기기</span>
+                    </div>
+                    <div class="bot-slider-btn-box">
+                        <button class="cusor-p bot-slider-btn bot-swiper-button-prev " id="prev">
+                            <img src="./main/icon/card_left.png" alt="음성명작 페스티벌 둘러보기 이미지 넘기기 이전">
+                        </button>
+                        <button class="cusor-p bot-slider-btn bot-swiper-button-next" id="next">
+                            <img src="./main/icon/card_right.png" alt="음성명작 페스티벌 둘러보기 이미지 넘기기 다음">
+                        </button>
+                    </div>
+                </div>
+                <div class="bot-slider-outer">
+                    <div class="swiper bot-swiper">
+                        <div class="swiper-wrapper">
+                            <a href="" class="swiper-slide">
+                                <img src="./main/main/ban1.png" alt="축제공간구성 위치확인하고 빠르게 찾아가자 바로가기">
+                            </a>
+                            <a href="" class="swiper-slide">
+                                <img src="./main/main/ban2.png" alt="축제프로그램 다양한 공연과 체험 프로그램 바로가기">
+                            </a>
+                            <a href="" class="swiper-slide">
+                                <img src="./main/main/ban3.png" alt="지난이야기 음성명작 페스티벌 발자취 바로가기">
+                            </a>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!--메인 협업사-->
+        <section class="alliance-sec">
+            <div class="alliance-bar">
+                <a href=""><img src="./main/logo/btm_banner1.png" alt="음성군 홈페이지 바로가기"></a>
+                <a href=""><img src="./main/logo/btm_banner2.png" alt="음성장터 바로가기"></a>
+                <a href=""><img src="./main/logo/btm_banner3.png" alt="음성명작페스티벌 바로가기"></a>
+            </div>
+        </section>
+    </main>
+    <!--푸터-->
+    <footer id="footer">
+        <div class="footer-box">
+            <div class="footer-logo">
+                <img src="./main/logo/footer_logo.png" alt="음성명작 페스티벌 로고">
+            </div>
+            <ul class="footer-sns">
+                <li><a><img src="./main/icon/sns_insta_on.png" alt="인스타그램 바로가기"></a></li>
+                <li><a><img src="./main/icon/sns_face_on.png" alt="인스타그램 바로가기"></a></li>
+                <li><a><img src="./main/icon/sns_blog_on.png" alt="인스타그램 바로가기"></a></li>
+                <li><a><img src="./main/icon/sns_youtube_on.png" alt="인스타그램 바로가기"></a></li>
+            </ul>
+            <div class="footer-text">
+                <span><strong>음성명작페스티벌 사업단</strong></span>
+                <span>충청북도 음성군 음성읍 반기문로 27 2층</span>
+                <span>사업자등록번호 : 308-82-73169 | 대표자 : 조용주</span>
+                <span>Copyright ⓒ2020 EUMSEONG MYEONGJAK. ALL RIGHTS RESERVED.</span>
+            </div>
+            <div class="call-num">
+                <h1>대표전화</h1>
+                <p><strong>043-873-8940</strong></p>
+                <p>09:00 ~ 18:00 토·일요일·공휴일 휴무</p>
+            </div>
+        </div>
+    </footer>
+
+    <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script>
+        var swiper = new Swiper(".mySwiper", {
+            direction: 'horizontal',
+            loop: true,
+            speed: 1000,
+            autoplay: {
+                delay: 2000,
+            },
+            setWrapperSize: true,
+            autoHeight: true,
+            pagination: {
+                el: ".swiper-pagination",
+                clickable: true,
+                type: "bullets"
+            },
+            breakpoints: { //반응형 조건 속성
+                320: { //640 이상일 경우
+                    slidesPerView: 1, //레이아웃 2열
+                },
+            }
+        });
+        var swiper = new Swiper(".bot-swiper", {
+            direction: 'horizontal',
+            pagination: false,
+            loop: true,
+            speed: 1000,
+            autoplay: {
+                delay: 2000,
+            },
+            navigation: {
+                nextEl: '.bot-swiper-button-next',
+                prevEl: '.bot-swiper-button-prev',
+            },
+            breakpoints: { //반응형 조건 속성
+                426: { //640 이상일 경우
+                    slidesPerView: 2.2, //레이아웃 2열
+                },
+                320: { //640 이상일 경우
+                    slidesPerView: 1, //레이아웃 2열
+                },
+            }
+        });
+    </script>
+    <script>
+        $(document).ready(function () {
+            $(".notice-text").each(() => {
+                var length = 16;
+                $(this).each(() => {
+                    if ($(this).text().length >= length) {
+                        $(this).text($(this).text().substr(0, length) + '...');
+                    }
+                })
+            })
+            
+            $(".toggle-btn").click(() => {
+                $(".m-menu-box").toggleClass("hide")
+            })
+            $(".notice").removeClass("notice-fade-out")
+            $(".notice").addClass("notice-fade-in")
+
+            const bannerFn = function () {
+                $(".banner a").each((index, item) => {
+                    $(item).removeClass(`notice-banner-animation${index}-off`)
+                    $(item).addClass(`notice-banner-animation${index}-on`)
+                })
+            }
+            setTimeout(bannerFn, 500)
+        })
+        $(window).resize(function() {
+            if ($(this).width() >= 426) {
+                    $(".m-menu-box").addClass("hide")
+                }else if($(this).width() < 426) {
+                    console.log("작음");
+                    $(".m-menu-box").addClass("hide")
+                }
+        })
+    </script>
+    <script>
+        const navScroll = document.querySelector("#scroll-nav");
+        const navSns = document.querySelectorAll("#nav .gnb-sns .gnb-sns-item")
+        const arryNavSns = Array.from(navSns)
+        const scrollNavSns = document.querySelectorAll("#scroll-nav .gnb-sns .gnb-sns-item")
+        const arryScrollNavSns = Array.from(scrollNavSns)
+        const snsKind = ['insta', 'face', 'blog', 'youtube']
+        const ON = "on"
+        const OFF = "off"
+        // SNS 호버 이벤트
+        const snsBg = (listArray)=>{
+            if(listArray) {
+                listArray.forEach((element, index, array)=>{
+                    element.style.background = `url('./main/icon/sns_${snsKind[index]}_${OFF}.png') no-repeat`
+                })
+            }
+        }
+        const mouseEnter = (listArray)=>{
+            listArray.forEach((element, index, array)=>{
+                element.addEventListener('mouseenter', ()=>{
+                    element.style.background = `url('./main/icon/sns_${snsKind[index]}_${ON}.png') no-repeat`
+                })
+            })
+        }
+        const mouseLeave = (listArray)=>{
+            listArray.forEach((element, index, array)=>{
+                element.addEventListener('mouseleave', ()=>{
+                    element.style.background = `url('./main/icon/sns_${snsKind[index]}_${OFF}.png') no-repeat`
+                })
+            })
+        }
+
+        snsBg(arryNavSns)
+        mouseEnter(arryNavSns)
+        mouseLeave(arryNavSns)
+        snsBg(arryScrollNavSns)
+        mouseEnter(arryScrollNavSns)
+        mouseLeave(arryScrollNavSns)
+        
+        const scrollNavFn = () => {
+            let Y = document.documentElement.scrollTop
+            if (Y >= 300) {
+                navScroll.classList.add("fixed")
+                navScroll.classList.remove("hide")
+            } else {
+                navScroll.classList.remove("fixed")
+                navScroll.classList.add("hide")
+            }
+        }
+        const scrollBotSliderFn = () => {
+            let Y = document.documentElement.scrollTop
+            const botSliderSec = document.querySelector(".bot-slider-sec")
+            const allianceSec = document.querySelector(".alliance-sec")
+            const botSliderSecH = document.querySelector(".bot-slider-sec").scrollHeight
+            if (Y >= botSliderSecH) {
+                botSliderSec.classList.remove("bot-slider-fade-out")
+                botSliderSec.classList.add("bot-slider-fade-in")
+                allianceSec.classList.remove("bot-slider-fade-out")
+                allianceSec.classList.add("bot-slider-fade-in")
+            } else {
+                botSliderSec.classList.remove("bot-slider-fade-in")
+                botSliderSec.classList.add("bot-slider-fade-out")
+                allianceSec.classList.remove("bot-slider-fade-in")
+                allianceSec.classList.add("bot-slider-fade-out")
+            }
+        }
+
+        const scrollFn = () => {
+            scrollNavFn()
+            scrollBotSliderFn()
+        }
+
+        document.addEventListener("scroll", scrollFn)
+
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/effect.js b/effect.js
new file mode 100644
index 0000000..b2208f4
--- /dev/null
+++ b/effect.js
@@ -0,0 +1,27 @@
+// SNS리스트 호버 이벤트(백그라운드 이미지)
+const snsKind = ['insta', 'face', 'blog', 'youtube']
+const ON = "on"
+const OFF = "off"
+
+// listArray = 리스트 DOM이 담긴 배열
+const snsBg = (listArray) => {
+    if (listArray) { 
+        listArray.forEach((element, index, array) => {
+            element.style.background = `url('./main/icon/sns_${snsKind[index]}_${OFF}.png') no-repeat`
+        })
+    }
+}
+const mouseEnter = (listArray) => {
+    listArray.forEach((element, index, array) => {
+        element.addEventListener('mouseenter', () => {
+            element.style.background = `url('./main/icon/sns_${snsKind[index]}_${ON}.png') no-repeat`
+        })
+    })
+}
+const mouseLeave = (listArray) => {
+    listArray.forEach((element, index, array) => {
+        element.addEventListener('mouseleave', () => {
+            element.style.background = `url('./main/icon/sns_${snsKind[index]}_${OFF}.png') no-repeat`
+        })
+    })
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..c550e01
--- /dev/null
+++ b/index.html
@@ -0,0 +1,378 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>음성명작페스티벌</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
+    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+    <link rel="stylesheet" href="./main.css">
+</head>
+
+<body>
+    <!--네비-->
+    <nav id="nav" class="nav">
+        <div class="login-sec">
+            <ul class="login-menu">
+                <li class="sign-up cusor-p "><a href=""> 회원가입</a></li>
+                <li>|</li>
+                <li class="login cusor-p ">로그인</li>
+            </ul>
+        </div>
+        <div class="logo-sec">
+            <img class="nav-logo" src="./main/logo/logo_big.png" alt="음성명작 페스티벌">
+            <img class="nav-logo-m" src="./main/logo/logo_small.png" alt="음성명작 페스티벌 모바일 홈페이지">
+        </div>
+        <div class="gnb">
+            <ul class="main-menu">
+                <li class="cusor-p ">축제소개</li>
+                <li class="cusor-p ">주요 콘텐츠</li>
+                <li class="cusor-p ">이벤트</li>
+                <li class="cusor-p ">명작스토리</li>
+                <li class="cusor-p ">커뮤니티</li>
+            </ul>
+            <ul class="gnb-sns">
+                <li class="cusor-p  gnb-sns-item insta"></li>
+                <li class="cusor-p  gnb-sns-item blog"></li>
+                <li class="cusor-p  gnb-sns-item youtube"></li>
+                <li class="cusor-p  gnb-sns-item face"></li>
+            </ul>
+        </div>
+        <div class="gnb-line"></div>
+        <div class="toggle-btn cusor-p">
+            <div class="toggle-bar"></div>
+            <div class="toggle-bar"></div>
+            <div class="toggle-bar"></div>
+        </div>
+    </nav>
+    <!-- 스크롤 네비-->
+    <nav id="scroll-nav" class="nav-scroll hide">
+        <div class="scroll-nav-top">
+            <ul class="gnb-sns">
+                <li class="cusor-p  gnb-sns-item insta"></li>
+                <li class="cusor-p  gnb-sns-item face"></li>
+                <li class="cusor-p  gnb-sns-item blog"></li>
+                <li class="cusor-p  gnb-sns-item youtube"></li>
+            </ul>
+            <div class="login-sec">
+                <ul class="login-menu">
+                    <li class="sign-up cusor-p "><a href=""> 회원가입</a></li>
+                    <li>|</li>
+                    <li class="login cusor-p ">로그인</li>
+                </ul>
+            </div>
+        </div>
+        <div class="scroll-nav-bottom">
+            <div class="logo-sec">
+                <img class="nav-logo-m" src="./main/logo/logo_small.png" alt="음성명작 페스티벌 홈페이지">
+            </div>
+            <div class="gnb">
+                <ul class="main-menu">
+                    <li class="cusor-p ">축제소개</li>
+                    <li class="cusor-p ">축제안내</li>
+                    <li class="cusor-p ">명작스토리</li>
+                    <li class="cusor-p ">게시판</li>
+                </ul>
+            </div>
+        </div>
+        <div class="gnb-line"></div>
+        <div class="toggle-btn cusor-p">
+            <div class="toggle-bar"></div>
+            <div class="toggle-bar"></div>
+            <div class="toggle-bar"></div>
+        </div>
+    </nav>
+    <!--모바일 네비-->
+    <div class="m-menu-box hide">
+        <div class="m-menu">
+            <div class="m-login-sec">
+                <ul class="m-login-menu">
+                    <li class="m-sign-up cusor-p "><a href=""> 회원가입</a></li>
+                    <li>|</li>
+                    <li class="m-login cusor-p ">로그인</li>
+                </ul>
+            </div>
+            <div class="m-gnb">
+                <ul class="m-main-menu">
+                    <li class="cusor-p ">축제소개</li>
+                    <li class="cusor-p ">축제안내</li>
+                    <li class="cusor-p ">명작스토리</li>
+                    <li class="cusor-p ">커뮤니티</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+    <!--메인-->
+    <main id="main">
+        <!--메인 슬라이드-->
+        <section class="slider-sec">
+            <div class="slider-outer">
+                <div class="swiper mySwiper">
+                    <div class="swiper-wrapper">
+                        <div class="swiper-slide">
+                            <a href="">
+                                <img src="./main/main/img_slide1.png" alt="음성명작 페스티벌 배너 광고1">
+                            </a>
+                        </div>
+                        <div class="swiper-slide">
+                            <a href="">
+                                <img src="./main/main/img_slide2.png" alt="음성명작 페스티벌 배너 광고2">
+                            </a>
+                        </div>
+                        <div class="swiper-slide">
+                            <a href="">
+                                <img src="./main/main/img_slide3.png" alt="음성명작 페스티벌 배너 광고3"></a>
+                        </div>
+                    </div>
+                    <div class="swiper-pagination"></div>
+                </div>
+            </div>
+        </section>
+        <!--메인 공지-->
+        <section class="notice-sec">
+            <div class="notice aos-init aos-animate" data-aos="fade-up" data-aos-once="true">
+                <h4>공지사항</h4>
+                <div class="notice-roll-box">
+                    <ul class="notice-roll">
+                        <li class="cusor-p">
+                            <a class="notice-text" href="">음성군 6월 대표과일!</a>
+                        </li>
+                        <li class="cusor-p">
+                            <a class="notice-text" href="">2021 음성명작 페스티벌 사이트가 리뉴얼 되었습니다~</a>
+                        </li>
+                        <li class="cusor-p">
+                            <a class="notice-text" href="">음성군 6월 대표과일!</a>
+                        </li>
+                    </ul>
+                </div>
+                <button class="notice-btn cusor-p "><img src="./main/icon/more.png" alt="공지사항 더보기 버튼"></button>
+            </div>
+            <div class="banner">
+                <a href="" data-aos="fade-up" data-aos-delay="600"  data-aos-once="true" data-aos-duration="1000">
+                    <img src="./main/main/con1.png" alt="음성명작 페스티벌 잔치잔치 열렸네! - 포스터">
+                </a>
+                <a href="" data-aos="fade-up" data-aos-delay="700"  data-aos-once="true" data-aos-duration="1000">
+                    <img src="./main/main/con2.png" alt="문예공모전 결과 발표 - 포스터">
+                </a>
+                <a href="" data-aos="fade-up" data-aos-delay="800"  data-aos-once="true" data-aos-duration="1000">
+                    <img src="./main/main/con3.png" alt="명작 스토리 안심농가 방문 - 포스터">
+                </a>
+            </div>
+        </section>
+        <!--메인 바텀 슬라이드-->
+        <section class="bot-slider-sec" data-aos="fade-up" data-aos-offset="300">
+            <div class="bot-slider-box">
+                <div class="bot-slider-text-box">
+                    <div class="text">
+                        <span>음성명작페스티벌</span>
+                        <span><strong>둘러보기!</strong></span>
+                        <span>음성명작페스티벌</span>
+                        <span>백배 즐기기</span>
+                    </div>
+                    <div class="bot-slider-btn-box">
+                        <button class="cusor-p bot-slider-btn bot-swiper-button-prev " id="prev">
+                            <img src="./main/icon/card_left.png" alt="음성명작 페스티벌 둘러보기 이미지 넘기기 이전">
+                        </button>
+                        <button class="cusor-p bot-slider-btn bot-swiper-button-next" id="next">
+                            <img src="./main/icon/card_right.png" alt="음성명작 페스티벌 둘러보기 이미지 넘기기 다음">
+                        </button>
+                    </div>
+                </div>
+                <div class="bot-slider-outer">
+                    <div class="swiper bot-swiper">
+                        <div class="swiper-wrapper">
+                            <a href="" class="swiper-slide">
+                                <img src="./main/main/ban1.png" alt="축제공간구성 위치확인하고 빠르게 찾아가자 바로가기">
+                            </a>
+                            <a href="" class="swiper-slide">
+                                <img src="./main/main/ban2.png" alt="축제프로그램 다양한 공연과 체험 프로그램 바로가기">
+                            </a>
+                            <a href="" class="swiper-slide">
+                                <img src="./main/main/ban3.png" alt="지난이야기 음성명작 페스티벌 발자취 바로가기">
+                            </a>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!--메인 협업사-->
+        <section class="alliance-sec">
+            <div class="alliance-bar">
+                <a href=""><img src="./main/logo/btm_banner1.png" alt="음성군 홈페이지 바로가기"></a>
+                <a href=""><img src="./main/logo/btm_banner2.png" alt="음성장터 바로가기"></a>
+                <a href=""><img src="./main/logo/btm_banner3.png" alt="음성명작페스티벌 바로가기"></a>
+            </div>
+        </section>
+    </main>
+    <!--푸터-->
+    <footer id="footer">
+        <div class="footer-box">
+            <div class="footer-logo">
+                <img src="./main/logo/footer_logo.png" alt="음성명작 페스티벌 로고">
+            </div>
+            <ul class="footer-sns">
+                <li><a><img src="./main/icon/sns_insta_on.png" alt="인스타그램 바로가기"></a></li>
+                <li><a><img src="./main/icon/sns_face_on.png" alt="인스타그램 바로가기"></a></li>
+                <li><a><img src="./main/icon/sns_blog_on.png" alt="인스타그램 바로가기"></a></li>
+                <li><a><img src="./main/icon/sns_youtube_on.png" alt="인스타그램 바로가기"></a></li>
+            </ul>
+            <div class="footer-text">
+                <span><strong>음성명작페스티벌 사업단</strong></span>
+                <span>충청북도 음성군 음성읍 반기문로 27 2층</span>
+                <span>사업자등록번호 : 308-82-73169 | 대표자 : 조용주</span>
+                <span>Copyright ⓒ2020 EUMSEONG MYEONGJAK. ALL RIGHTS RESERVED.</span>
+            </div>
+            <div class="call-num">
+                <h1>대표전화</h1>
+                <p><strong>043-873-8940</strong></p>
+                <p>09:00 ~ 18:00 토·일요일·공휴일 휴무</p>
+            </div>
+        </div>
+    </footer>
+
+    <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script>
+        var swiper = new Swiper(".mySwiper", {
+            direction: 'horizontal',
+            loop: true,
+            speed: 1000,
+            autoplay: {
+                delay: 2000,
+            },
+            setWrapperSize: true,
+            autoHeight: true,
+            pagination: {
+                el: ".swiper-pagination",
+                clickable: true,
+                type: "bullets"
+            },
+            breakpoints: { //반응형 조건 속성
+                320: { //320 이상일 경우
+                    slidesPerView: 1, //레이아웃 2열
+                },
+            }
+        });
+        var swiper = new Swiper(".bot-swiper", {
+            direction: 'horizontal',
+            pagination: false,
+            loop: true,
+            speed: 1000,
+            autoplay: {
+                delay: 2000,
+            },
+            navigation: {
+                nextEl: '.bot-swiper-button-next',
+                prevEl: '.bot-swiper-button-prev',
+            },
+            breakpoints: { //반응형 조건 속성
+                426: { //426 이상일 경우
+                    slidesPerView: 2.2, //레이아웃 2열
+                },
+                320: { //320 이상일 경우
+                    slidesPerView: 1, //레이아웃 2열
+                },
+            }
+        });
+    </script>
+    <script>
+        AOS.init({
+            easing: 'ease-out-back',
+        });
+    </script>
+
+    <script>
+        $(document).ready(function () {
+            // 공지사항 롤링 👇
+            let height = $(".notice-roll-box").height()
+            let leng = $(".notice-roll li").length
+            let count = 0
+            function noticeRoll() {
+                count++
+                $('.notice-roll').animate({"top":`-${height * count}px` }, 1000,
+                ()=>{
+                    if (count >= (leng-1)) {
+                        count = 0
+                        $('.notice-roll').css({top: "0"})
+                    }}
+                )
+            }
+            setInterval(noticeRoll, 2000)
+            //모바일 메뉴 버튼 클릭 👇
+            $(".toggle-btn").click(() => {
+                $(".m-menu-box").toggleClass("hide")
+            })
+        })
+        //모바일 메뉴 리사이징시 숨김👇
+        $(window).resize(function () {
+            if ($(this).width() >= 426) {
+                $(".m-menu-box").addClass("hide")
+            } else if ($(this).width() < 426) {
+                $(".m-menu-box").addClass("hide")
+            }
+        })
+    </script>
+    <script>
+        const navScroll = document.querySelector("#scroll-nav");
+        const navSns = document.querySelectorAll("#nav .gnb-sns .gnb-sns-item")
+        const arryNavSns = Array.from(navSns)
+        const scrollNavSns = document.querySelectorAll("#scroll-nav .gnb-sns .gnb-sns-item")
+        const arryScrollNavSns = Array.from(scrollNavSns)
+        const snsKind = ['insta', 'face', 'blog', 'youtube']
+        const ON = "on"
+        const OFF = "off"
+        // SNS 리스트 백그라운드 깔기 👇
+        const snsBg = (listArray) => {
+            if (listArray) {
+                listArray.forEach((element, index, array) => {
+                    element.style.background = `url('./main/icon/sns_${snsKind[index]}_${OFF}.png') no-repeat`
+                })
+            }
+        }
+        // SNS 리스트 마우스 enter, leave 효과 👇
+        const mouseEnter = (listArray) => {
+            listArray.forEach((element, index, array) => {
+                element.addEventListener('mouseenter', () => {
+                    element.style.background = `url('./main/icon/sns_${snsKind[index]}_${ON}.png') no-repeat`
+                })
+            })
+        }
+        const mouseLeave = (listArray) => {
+            listArray.forEach((element, index, array) => {
+                element.addEventListener('mouseleave', () => {
+                    element.style.background = `url('./main/icon/sns_${snsKind[index]}_${OFF}.png') no-repeat`
+                })
+            })
+        }
+
+        snsBg(arryNavSns)
+        mouseEnter(arryNavSns)
+        mouseLeave(arryNavSns)
+        snsBg(arryScrollNavSns)
+        mouseEnter(arryScrollNavSns)
+        mouseLeave(arryScrollNavSns)
+        // 스크롤에 따른 NAV 변경 👇
+        const scrollNavFn = () => {
+            let Y = document.documentElement.scrollTop
+            if (Y >= 300) {
+                navScroll.classList.add("fixed")
+                navScroll.classList.remove("hide")
+            } else {
+                navScroll.classList.remove("fixed")
+                navScroll.classList.add("hide")
+            }
+        }
+        const scrollFn = () => {
+            scrollNavFn()
+        }
+
+        document.addEventListener("scroll", scrollFn)
+
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/main.css b/main.css
new file mode 100644
index 0000000..b972246
--- /dev/null
+++ b/main.css
@@ -0,0 +1,870 @@
+* {
+    font-family: 'Noto Sans KR', 'sans-serif';
+}
+body {
+    margin: 0 auto;
+    overflow-x: hidden;
+}
+ul {
+    list-style: none;
+    padding: 0;
+}
+a:visited, a:link {
+    text-decoration: none;
+    color: black;
+}
+h1, h2, h3, h4, h5, p {
+    margin: 0;
+}
+div, section, nav, main, footer, span {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+.hide {
+    display: none !important;
+}
+.fixed{
+    position: fixed;
+    top: 0;
+}
+.dot-color {
+    background-color: #7CE063 !important;
+}
+.cusor-p {
+    cursor: pointer;
+}
+.nav {
+    width: 100%;
+    height: auto;
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
+    justify-content: flex-start;
+    text-align: center;
+    padding-top: 15px;
+    overflow: hidden;
+    background-color: #fff;
+    z-index: 999;
+}
+.nav .login-sec {
+    width: 100%;
+    height: auto;
+    padding-bottom: 10px;
+}
+.nav .login-sec .login-menu {
+    width: 100%;
+    max-width: 1080px;
+    margin: 0 auto;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: flex-end;
+    align-items: center;
+    font-size: 16px;
+    font-weight: 600;
+    color: #000;
+}
+.nav .login-sec .login-menu li:nth-child(2) {
+    margin-left: 8px;
+    margin-right: 8px;
+}
+.nav .logo-sec {
+    width: auto;
+    max-width: 1080px;
+    height: auto;
+}
+.nav .logo-sec .nav-logo{
+    width: 355px;
+    height: auto;
+}
+.nav .logo-sec .nav-logo-m {
+    display: none;
+}
+.nav .gnb {
+    width: 100%;
+    max-width: 1150px;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: flex-start;
+    align-items: center;
+    margin-top: 15px;
+}
+.nav .gnb .main-menu {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-around;
+    align-items: center;
+    font-size: 22px;
+    font-weight: 600;
+    margin-bottom: 20px;
+    flex: 5;
+}
+.nav .gnb .gnb-sns {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-around;
+    align-items: center;
+    margin-bottom: 20px;
+    flex: 1;
+}
+.nav .gnb .gnb-sns li {
+    width: 28px;
+    height: 28px;
+    transition: all 0.2s;
+}
+.nav .gnb-line{
+    width: 100%;
+    height: 5px;
+    background: url("./main/main/line.png") no-repeat center;
+    background-size: cover;
+}
+.nav .toggle-btn {
+    display: none;
+}
+.m-menu-box {
+    transition: all 1s;
+}
+/*********************************************************************/
+#main {
+    width: 100%;
+    height: auto;
+    margin: 0;
+    padding: 0;
+}
+#main .slider-sec{
+    width: 100%;
+    height: auto;
+}
+#main .slider-sec .slider-outer{
+    width: 100%;
+    height: auto;
+    min-height: 240px;
+    position: relative;
+    overflow: hidden;
+}
+#main .notice-sec {
+    width: 100%;
+    height: auto;
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    margin-top: 50px;
+    
+}
+#main .notice-sec .notice {
+    width: 100%;
+    max-width: 1080px;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    margin-bottom: 20px;
+    transition: all 1s;
+}
+#main .notice-sec .notice h4 {
+    font-size: 22px;
+    font-weight: 800;
+    flex: 1;
+}
+#main .notice-sec .notice .notice-roll-box{
+    width: 900px;
+    height: 24px;
+    font-size: 18px;
+    font-weight: 700;
+    margin-left: 25px;
+    position: relative;
+    overflow: hidden;
+}
+#main .notice-sec .notice .notice-roll-box .notice-roll{
+    width: 100%;
+    height: auto;
+    margin: 0;
+    position: relative;
+}
+#main .notice-sec .notice .notice-roll li{
+    width: 100%;
+    height: 24px;
+}
+#main .notice-sec .notice .notice-btn {
+    border: none;
+    background: transparent;
+} 
+#main .notice-sec .banner {
+    width: 100%;
+    max-width: 1080px;
+    height: auto;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 80px;
+    transition: all 1s;
+}
+#main .bot-slider-sec {
+    width: 100%;
+    background-color: #B4A0FF;
+    transition: all 1s;
+}
+#main .bot-slider-sec .bot-slider-box {
+    width: 100%;
+    max-width: 1080px;
+    margin: 0 auto;
+    padding-top: 50px;
+    padding-bottom: 50px;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    align-items: center;
+}
+#main .bot-slider-sec .bot-slider-box .bot-slider-text-box {
+    width: 300px;
+    height: auto;
+    display: flex;
+    flex-flow: column;
+}
+#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text {
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: flex-start;
+    color: #fff;
+}
+#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:first-child{
+    font-size: 2em;
+    display: block;
+    font-weight: normal;
+}
+#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:nth-child(2){
+    font-size: 2.4em;
+    margin-bottom: 30px;
+}
+#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:nth-child(3){
+    font-size: 1.5em;
+    font-weight: normal;
+}
+#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:last-child{
+    font-size: 1.3em;
+    padding-bottom: 30px;
+}
+#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .bot-slider-btn-box {
+    width: 150px;
+    height: auto;
+}
+#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .bot-slider-btn-box .bot-slider-btn{
+    border: none;
+    background: transparent;
+    filter: contrast(170%);
+}
+#main .bot-slider-sec .bot-slider-box .bot-slider-outer {
+    width: 780px;
+    height: auto;
+    padding: 0px 15px 0px 15px;
+    box-sizing: border-box;
+}
+#main .bot-slider-sec .bot-slider-box .bot-slider-outer .swiper-slide{
+    padding: 0px 10px 0px 10px;
+    box-sizing: border-box;
+}
+#main .alliance-sec {
+    width: 100%;
+    height: auto;
+    border-top: 1px solid #e0e0e0;
+    display: flex;
+    flex-flow: row;
+    justify-content: center;
+    transition: all 1s;
+}
+#main .alliance-sec .alliance-bar {
+    width: 100%;
+    max-width: 1080px;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    margin-top: 15px;
+    margin-bottom: 15px;
+}
+#main .alliance-sec .alliance-bar a {
+    margin-right: 70px;
+}
+#footer {
+    width: 100%;
+    height: auto;
+    border-top: 1px solid #e0e0e0;
+    padding-top: 50px;
+    padding-bottom: 30px;
+    display: flex;
+    flex-flow: row;
+    justify-content: center;
+}
+#footer .footer-box {
+    width: 100%;
+    max-width: 1080px;
+    display: flex;
+    flex-flow: row;
+    justify-content: space-between;
+    align-items: center;
+}
+#footer .footer-box .footer-logo {
+    width: auto;
+    height: auto;
+    flex: 1;
+}
+#footer .footer-box .footer-logo img {
+    width: 50%;
+}
+#footer .footer-box .footer-sns {
+    display: none;
+}
+#footer .footer-box .footer-text {
+    display: flex;
+    flex-flow: column;    
+    color: #666;
+    font-size: 14px;
+    flex: 2;
+}
+#footer .footer-box .footer-text span {
+    margin-bottom: 5px;
+}
+#footer .footer-box .footer-text span:last-child {
+    margin-top: 10px;
+}
+#footer .footer-box .call-num {
+    flex: 1;
+}
+#footer .footer-box .call-num h1{
+    font-size: 18px;
+    font-weight: 500
+}
+#footer .footer-box .call-num p {
+    font-size: 14px;
+    font-weight: 500;
+}
+#footer .footer-box .call-num p > strong{
+    font-size: 35px;
+    font-weight: 600
+}
+.nav-scroll{
+    width: 100%;
+    height: auto;
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    background-color: #fff;
+    z-index: 9999;
+}
+.nav-scroll .scroll-nav-top {
+    width: 100%;
+    max-width: 1080px;
+    height: auto;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: flex-end;
+    align-items: center;
+}
+.nav-scroll .scroll-nav-top .gnb-sns {
+    width: auto;
+    height: auto;
+    display: flex;
+    flex-flow: row;
+}
+.nav-scroll .scroll-nav-top .gnb-sns li {
+    width: 28px;
+    height: 28px;
+    margin-right: 25px;
+    transition: all 0.2s;
+}
+.nav-scroll .scroll-nav-top .login-sec {
+    width: auto;
+    height: auto;
+}
+.nav-scroll .scroll-nav-top .login-sec .login-menu{
+    width: auto;
+    height: auto;
+    display: flex;
+    flex-flow: row nowrap;
+    font-size: 16px;
+    font-weight: 600;
+}
+.nav-scroll .scroll-nav-top .login-sec .login-menu li:nth-child(2) {
+    margin-left: 8px;
+    margin-right: 8px;
+}
+.nav-scroll .scroll-nav-bottom {
+    width: 100%;
+    max-width: 1080px;
+    height: auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.nav-scroll .scroll-nav-bottom .logo-sec{
+    width: 100%;
+    height: auto;
+    flex: 1;
+    text-align: center;
+}
+.nav-scroll .scroll-nav-bottom .logo-sec img{
+    width: 60%;
+    height: auto;
+}
+.nav-scroll .scroll-nav-bottom .gnb{
+    width: 100%;
+    height: auto;
+    flex: 2;
+}
+.nav-scroll .scroll-nav-bottom .gnb .main-menu{
+    width: 100%;
+    height: auto;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: space-between;
+}
+.nav-scroll .scroll-nav-bottom .gnb .main-menu li{
+    font-size: 22px;
+    font-weight: 600;
+}
+.nav-scroll .gnb-line{
+    width: 100%;
+    height: 5px;
+    background: url(./main/main/line.png) no-repeat center;
+    background-size: cover;
+}
+.swiper {
+    width: 100%;
+    height: 100%;
+}
+.swiper-wrapper {
+    width: 100%;
+    height: 100%;
+    min-height: 240px ;
+}
+.swiper-slide{
+    width: 100%;
+    height: 100%;
+}
+.swiper-slide img {
+    display: block ;
+    width: 100% ;
+    height: 100%;
+    object-fit: cover;
+} 
+.swiper .swiper-pagination-bullet {
+    width: 12px;
+    height: 12px;
+    background-color: #7CE063;
+    margin: 0 15px !important;
+}
+@media (max-width: 425px) {
+    #scroll-nav {
+        display: none !important;
+    }
+    .m-menu-box {
+        width: 100vw;
+        height: 100vh;
+        background-color: rgba(0, 0, 0, 0.6);
+        z-index: 9999;
+        position: absolute;
+    }
+    .m-menu-box .m-menu {
+        width: 85%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        background-color: #fff;
+    }
+    .m-menu-box .m-menu .m-login-sec {
+        width: 100%;
+        height: auto;
+        padding: 25px 0px;
+        text-align: center;
+    }
+    .m-menu-box .m-menu .m-login-sec .m-login-menu {
+        margin: 0;
+        display: flex;
+        flex-flow: row-reverse nowrap;
+        justify-content: center;
+        align-items: center;
+        font-size: 1rem;
+    }
+    .m-menu-box .m-menu .m-login-sec .m-login-menu > li:nth-child(2){
+        margin-left: 30px;
+        margin-right: 30px;
+    }
+    .m-menu-box .m-menu .m-gnb {
+        width: 100%;
+        height: auto;
+    }
+    .m-menu-box .m-menu .m-gnb .m-main-menu {
+        margin: 0;
+    }
+    .m-menu-box .m-menu .m-gnb .m-main-menu > li {
+        width: 100%;
+        height: auto;
+        font-size: 20px;
+        font-weight: 800;
+        padding: 15px 30px;
+        box-sizing: border-box;
+    }
+    .nav .login-sec {
+        width: 100%;
+        height: 70px;
+        display: none;
+    }
+    .nav .logo-sec {
+        width: 50%;
+        max-width: 1080px;
+        height: auto;
+    }
+    .nav .logo-sec .nav-logo{
+        display: none;
+    }
+    .nav .logo-sec .nav-logo-m {
+        display: block;
+        margin: 0 auto;
+        width: 100%;
+    }
+    .nav .gnb {
+        display: none;
+    }
+    .nav .gnb-line{
+        width: 100%;
+        height: 5px;
+        background: url("./main/main/line.png") no-repeat center;
+        background-size: cover;
+        margin-top: 10px;
+    }
+    .nav .toggle-btn{
+        width: 50px;
+        height: 29px;
+        position: absolute;
+        top: calc((80px - 29px) / 2);
+        left: calc((100% - 60px ));
+        padding: 0px ;
+        display: flex;
+        flex-flow: column;
+        justify-content: space-around;
+        align-items: center;
+    }
+    .nav .toggle-btn > div {
+        width: 30px;
+        height: 4px;
+        background-color: #B4A0FF;
+        display: block;
+        margin: 0;
+    }
+    /* nav m-menu */
+
+    /*silder-sec*/
+    #main .slider-sec .slider-outer .slider-btn {
+        width: 100%;
+        height: 50px;
+        position: absolute;
+        bottom: 0;
+        display: flex;
+        flex-flow: row;
+        justify-content: center;
+        align-items: center;
+    }
+    #main .slider-sec .slider-outer .slider-btn .slider-bullet {
+        content: "";
+        display: inline-block;
+        vertical-align: middle;
+        width: 10px;
+        height: 10px;
+        background-color: rgba(0, 0, 0, 0.4);
+        border-radius: 100%;
+    }
+    #main .slider-sec .slider-outer .slider-btn .slider-bullet:nth-child(2) {
+        margin-left: 25px;
+        margin-right: 25px;
+    }
+    #main .notice-sec {
+        width: 100%;
+        height: auto;
+        display: flex;
+        flex-flow: column;
+        align-items: center;
+        margin-top: 0px;
+    }
+    #main .notice-sec .notice {
+        width: 100%;
+        max-width: 1080px;
+        height: auto;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        padding: 10px 10px;
+        margin-bottom: 0px;
+    }
+    #main .notice-sec .notice h4 {
+        width: 25%;
+        font-size: 16px;
+        font-weight: bold;
+    }
+    #main .notice-sec .notice .notice-roll-box{
+        width: 70%;
+        height: 24px;
+        font-size: 16px;
+        font-weight: 500;
+        margin-left: 0px;
+        position: relative;
+        overflow: hidden;
+    }
+    #main .notice-sec .notice .notice-roll-box .notice-roll{
+        width: 100%;
+        height: auto;
+        margin: 0;
+        position: relative;
+    }
+    #main .notice-sec .notice .notice-roll li{
+        width: 100%;
+        height: 24px;
+        font-size: 14px;
+        font-weight: 400;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+    #main .notice-sec .notice .notice-btn {
+        width: auto;
+        border: none;
+        background: transparent;
+    } 
+    #main .notice-sec .notice .notice-btn img{
+        width: 15px;
+        height: 15px;
+    } 
+    #main .notice-sec .banner {
+        width: 100%;
+        max-width: 1080px;
+        height: auto;
+        display: flex;
+        flex-flow: column nowrap;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0px 20px 20px 20px;
+    }
+    #main .notice-sec .banner a{
+        width: 100%;
+        height: auto;
+    }
+    #main .notice-sec .banner a img{
+        width: 100%;
+    }
+    /*notice*/
+    #main .bot-slider-sec {
+        width: 100%;
+        background-color: #B4A0FF;
+    }
+    #main .bot-slider-sec .bot-slider-box {
+        width: 100%;
+        max-width: 1080px;
+        margin: 0 auto;
+        padding-top: 50px;
+        padding-bottom: 50px;
+        display: flex;
+        flex-flow: column nowrap;
+        justify-content: space-between;
+        align-items: center;
+    }
+    #main .bot-slider-sec .bot-slider-box .bot-slider-text-box {
+        width: auto;
+        height: auto;
+        display: flex;
+        flex-flow: column;
+        align-items: center;
+    }
+    #main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text {
+        display: block;
+        color: #fff;
+        text-align: center;
+    }
+    #main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:first-child{
+        font-size: 1.75rem;;
+        display: inline-block;
+        font-weight: normal;
+    }
+    #main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:nth-child(2){
+        font-size: 1.6em;
+        margin-bottom: 30px;
+    }
+    #main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:nth-child(3){
+        font-size: 18px;
+        display: inline-block;
+        font-weight: normal;
+        margin-top: 10px;
+    }
+    #main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:last-child{
+        font-size: 18px;
+        padding-bottom: 0px;
+    }
+    #main .bot-slider-sec .bot-slider-box .bot-slider-text-box .bot-slider-btn-box {
+        width: auto;
+        height: auto;
+        padding-top: 20px;
+        padding-bottom: 25px;
+    }
+    #main .bot-slider-sec .bot-slider-box .bot-slider-text-box .bot-slider-btn-box .bot-slider-btn{
+        border: none;
+        background: transparent;
+        filter: contrast(170%);
+    }
+    #main .bot-slider-sec .bot-slider-box .bot-slider-outer {
+        width: 100%;
+        height: auto;
+    }
+    #main .bot-slider-sec .bot-slider-box .bot-slider-outer .bot-slider-inner {
+        width: auto;
+        height: auto;
+        padding: 0px 0px;
+        overflow: hidden;
+    }
+    #main .bot-slider-sec .bot-slider-box .bot-slider-outer .bot-slider-inner .bot-slider-items {
+        width: 100%;
+        height: auto;
+        display: flex;
+        padding: 0px;
+        transition: all 1s;
+    }
+    #main .bot-slider-sec .bot-slider-box .bot-slider-outer .bot-slider-inner .bot-slider-items a {
+        width: 100%;
+        height: auto;
+        padding: 0px 30px;
+    }
+    #main .bot-slider-sec .bot-slider-box .bot-slider-outer .bot-slider-inner .bot-slider-items a:nth-child(2n) {    
+        margin-left: 0px;
+        margin-right: 0px;
+    }
+    /*bot-slider-sec*/
+    #main .alliance-sec {
+        width: 100%;
+        height: auto;
+        border-top: 1px solid #e0e0e0;
+        display: flex;
+        flex-flow: row;
+        justify-content: center;
+    }
+    #main .alliance-sec .alliance-bar {
+        width: 100%;
+        max-width: 1080px;
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 15px;
+        margin-bottom: 15px;
+    }
+    #main .alliance-sec .alliance-bar a {
+        margin-right: 0px;
+        text-align: center;
+    }
+    #main .alliance-sec .alliance-bar a img{
+        width: 80%;
+    }
+    /*.alliance-sec*/
+    #footer {
+        width: 100%;
+        height: auto;
+        border-top: 1px solid #e0e0e0;
+        padding-top: 0px;
+        padding-bottom: 30px;
+        display: flex;
+        flex-flow: row;
+        justify-content: center;
+    }
+    #footer .footer-box {
+        width: 100%;
+        max-width: 1080px;
+        display: flex;
+        flex-flow: column;
+        justify-content: space-between;
+        align-items: center;
+    }
+    #footer .footer-box .footer-logo {
+            width: auto;
+            height: auto;
+            flex: 1;
+            display: none;
+    }
+    #footer .footer-box .footer-logo img {
+        width: 50%;
+    }
+    #footer .footer-box .footer-sns {
+        width: 100%;
+        height: auto;
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: center;
+        align-items: center;
+    }
+    #footer .footer-box .footer-sns li:first-child{
+        margin-right: 5px;
+    }
+    #footer .footer-box .footer-sns li:nth-child(2){
+        margin: 0px 5px 0px 5px;
+    }
+    #footer .footer-box .footer-sns li:nth-child(3){
+        margin: 0px 5px 0px 5px;
+    }
+    #footer .footer-box .footer-sns li:last-child{
+        margin-left: 5px;
+    }
+    #footer .footer-box .footer-text {
+        display: flex;
+        flex-flow: column;    
+        align-items: center;
+        color: #666;
+        font-size: 14px;
+        flex: 2;
+        text-align: center;
+    }
+    #footer .footer-box .footer-text span {
+        margin-bottom: 5px;
+    }
+    #footer .footer-box .footer-text span:last-child {
+        margin-top: 10px;
+    }
+    #footer .footer-box .call-num {
+        flex: 1;
+        display: none;
+    }
+    #footer .footer-box .call-num h1{
+        font-size: 18px;
+        font-weight: 500
+    }
+    #footer .footer-box .call-num p {
+        font-size: 14px;
+        font-weight: 300;
+    }
+    #footer .footer-box .call-num p > strong{
+        font-size: 35px;
+        font-weight: 500;
+    }
+    .mySwiper {
+        width: 100%;
+        height: 100%;
+    }
+    .mySwiper  .swiper-wrapper {
+        width: 100%;
+        height: 100%;
+    }    
+    .mySwiper .swiper-wrapper .swiper-slide{
+        width: 100%;
+        height: 100%;
+        max-height: 240px;
+    }
+    .mySwiper .swiper-wrapper .swiper-slide img {
+        display: block;
+        width: 100%;
+        height: 100%;
+        max-height: 240px !important;
+        object-fit: fill;
+    }
+    .mySwiper .swiper-pagination-bullet {
+        width: 9px;
+        height: 9px;
+        background-color: #7CE063;
+        margin: 0 5px !important;
+    }
+    
+}
\ No newline at end of file
diff --git a/main/icon/card_left.png b/main/icon/card_left.png
new file mode 100644
index 0000000..7ff09bb
Binary files /dev/null and b/main/icon/card_left.png differ
diff --git a/main/icon/card_right.png b/main/icon/card_right.png
new file mode 100644
index 0000000..779ee89
Binary files /dev/null and b/main/icon/card_right.png differ
diff --git a/main/icon/join.png b/main/icon/join.png
new file mode 100644
index 0000000..f2c912c
Binary files /dev/null and b/main/icon/join.png differ
diff --git a/main/icon/more.png b/main/icon/more.png
new file mode 100644
index 0000000..dfba7bd
Binary files /dev/null and b/main/icon/more.png differ
diff --git a/main/icon/sns_blog_off.png b/main/icon/sns_blog_off.png
new file mode 100644
index 0000000..676efa4
Binary files /dev/null and b/main/icon/sns_blog_off.png differ
diff --git a/main/icon/sns_blog_on.png b/main/icon/sns_blog_on.png
new file mode 100644
index 0000000..ebdf65b
Binary files /dev/null and b/main/icon/sns_blog_on.png differ
diff --git a/main/icon/sns_face_off.png b/main/icon/sns_face_off.png
new file mode 100644
index 0000000..b3f242b
Binary files /dev/null and b/main/icon/sns_face_off.png differ
diff --git a/main/icon/sns_face_on.png b/main/icon/sns_face_on.png
new file mode 100644
index 0000000..7eaaf09
Binary files /dev/null and b/main/icon/sns_face_on.png differ
diff --git a/main/icon/sns_insta_off.png b/main/icon/sns_insta_off.png
new file mode 100644
index 0000000..e51283f
Binary files /dev/null and b/main/icon/sns_insta_off.png differ
diff --git a/main/icon/sns_insta_on.png b/main/icon/sns_insta_on.png
new file mode 100644
index 0000000..2c2952c
Binary files /dev/null and b/main/icon/sns_insta_on.png differ
diff --git a/main/icon/sns_youtube_off.png b/main/icon/sns_youtube_off.png
new file mode 100644
index 0000000..37b3f42
Binary files /dev/null and b/main/icon/sns_youtube_off.png differ
diff --git a/main/icon/sns_youtube_on.png b/main/icon/sns_youtube_on.png
new file mode 100644
index 0000000..cd47f90
Binary files /dev/null and b/main/icon/sns_youtube_on.png differ
diff --git a/main/logo/btm_banner1.png b/main/logo/btm_banner1.png
new file mode 100644
index 0000000..98634f1
Binary files /dev/null and b/main/logo/btm_banner1.png differ
diff --git a/main/logo/btm_banner2.png b/main/logo/btm_banner2.png
new file mode 100644
index 0000000..46debff
Binary files /dev/null and b/main/logo/btm_banner2.png differ
diff --git a/main/logo/btm_banner3.png b/main/logo/btm_banner3.png
new file mode 100644
index 0000000..a4a9f7b
Binary files /dev/null and b/main/logo/btm_banner3.png differ
diff --git a/main/logo/footer_logo.png b/main/logo/footer_logo.png
new file mode 100644
index 0000000..3668265
Binary files /dev/null and b/main/logo/footer_logo.png differ
diff --git a/main/logo/logo_big.png b/main/logo/logo_big.png
new file mode 100644
index 0000000..4b6bd16
Binary files /dev/null and b/main/logo/logo_big.png differ
diff --git a/main/logo/logo_small.png b/main/logo/logo_small.png
new file mode 100644
index 0000000..594140a
Binary files /dev/null and b/main/logo/logo_small.png differ
diff --git a/main/main/ban1.png b/main/main/ban1.png
new file mode 100644
index 0000000..097317a
Binary files /dev/null and b/main/main/ban1.png differ
diff --git a/main/main/ban2.png b/main/main/ban2.png
new file mode 100644
index 0000000..dd07a45
Binary files /dev/null and b/main/main/ban2.png differ
diff --git a/main/main/ban3.png b/main/main/ban3.png
new file mode 100644
index 0000000..ea17440
Binary files /dev/null and b/main/main/ban3.png differ
diff --git a/main/main/con1.png b/main/main/con1.png
new file mode 100644
index 0000000..da0ea19
Binary files /dev/null and b/main/main/con1.png differ
diff --git a/main/main/con2.png b/main/main/con2.png
new file mode 100644
index 0000000..0f5265b
Binary files /dev/null and b/main/main/con2.png differ
diff --git a/main/main/con3.png b/main/main/con3.png
new file mode 100644
index 0000000..5cb616d
Binary files /dev/null and b/main/main/con3.png differ
diff --git a/main/main/img_slide1.png b/main/main/img_slide1.png
new file mode 100644
index 0000000..5ad3e2c
Binary files /dev/null and b/main/main/img_slide1.png differ
diff --git a/main/main/img_slide2.png b/main/main/img_slide2.png
new file mode 100644
index 0000000..4182294
Binary files /dev/null and b/main/main/img_slide2.png differ
diff --git a/main/main/img_slide3.png b/main/main/img_slide3.png
new file mode 100644
index 0000000..70b888c
Binary files /dev/null and b/main/main/img_slide3.png differ
diff --git a/main/main/line.png b/main/main/line.png
new file mode 100644
index 0000000..dd35b3a
Binary files /dev/null and b/main/main/line.png differ
diff --git a/test.html b/test.html
new file mode 100644
index 0000000..d5c206e
--- /dev/null
+++ b/test.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <section id="fade">
+        <div class="swiper-container swiper-container-h">
+            <div class="swiper-wapper">
+                <?php foreach ($mainbanner as $o): ?> 
+                <!--$mainbanner라는 배열을 foreach함수를 사용하여 swiper-slide를 생성-->
+                <div class="swiper-slide">
+                    <a href="<?=$o->href?>">
+                        <!--$mainbanner 라는 변수(배열)에 오브젝트속 키워드가 href인 갑을 추출 한다-->
+                        <img src="/data/banner/<?=$o->bf_file?>" alt="음성명작페스티벌" width="100%">
+                        <!--$mainbanner 라는 변수(배열)에 오브젝트속 키워드가 "bf_file" 갑을 추출 한다-->
+                    </a>
+                </div>
+                <?php endforeach; ?>
+            </div>
+            <div class="swiper-pagination swiper-pagination-h"></div>
+        </div>
+    </section>
+</body>
+</html>
\ No newline at end of file