/* 전체 */

    


    body {
    background-repeat: no-repeat;
    background-position: top center;
    background-color:#03030f;
    background-image: url("img/배경/Media_0.gif");
    background-size: cover;
    }


    article {
        display: flex;
        flex-direction: column;
    }
    
    .result{
        display: none;
    }

    .copyright-text {
        font-family: "Noto Sans KR", sans-serif;
        font-size: 12px;
        color: #7c7c7c;
    }

    button:focus{

        outline:none !important;
    
        box-shadow:none !important;
    
        -webkit-box-shadow:none !important;
    
    }

    input:focus {
        outline:none !important;
    
        box-shadow:none !important;
    
        -webkit-box-shadow:none !important;
    }

    textarea:focus {
        outline:none !important;
    
        box-shadow:none !important;
    
        -webkit-box-shadow:none !important;
    }

    @font-face {
        font-family: 'MaruBuri-Regular';
        src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/MaruBuri-Regular.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }
 
    /* 시작화면 */


    .start{
        width: 60%;
        margin: 0 auto;
        margin-top: 50px;
        background-color: rgba(92, 92, 102, 0.4);
        border-radius: 50px;
    }


    .question {
        display: none;
    }

    .main-title {
        font-family: 'Song Myung', sans-serif;
        font-size: 26px;
        font-weight: 700;
        color: #ffffff;
        border-bottom: 3px solid #757474;
        border-top: 3px solid #757474;
        padding: 3vh;
        width: 60%;
        margin: 0 auto;
        margin-bottom: 200px;
       
    }

    .leaf{
        width: 170px;
        margin: 0 auto;
        margin-top: 30px;
        margin-bottom: 0;
    }

    .sub-title {
        font-family: 'MaruBuri-Regular';
        font-size: 22px;
        font-weight: 700;
        color: #ffffff;
        line-height: 40px;
        margin: auto;
        margin-bottom: 50px;
    }

    .start-cover {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 20%;
        margin: auto;
    }



    .btn-start {
        font-family: 'MaruBuri-Regular';
        font-size: 18px;
        color:#ffffff;
        background-color: #004c8c;
        width: 250px;
        height: 100px;
    }

    .btn-start:visited {
        font-family: 'MaruBuri-Regular';
        font-size: 18px;
        color:#ffffff;
        background-color: #1f1f1f;
        border: 3px solid #1f1f1f;
    }

    .btn-start:active, .btn-start:focus {
        font-family: 'MaruBuri-Regular';
        background-color: #74aa86 !important;
        border:#1f1f1f !important;
        font-size: 18px;
        color:#ffffff;
    }

    .btn-start:hover {
        font-family: 'MaruBuri-Regular';
        background-color: #74aa86;
        color: #1f1f1f;
        border: 3px solid #74aa86;
    }



    /* 문제 화면 */

    .btn-answer, .btn-answer:visited, .btn-answer:active, .btn-answer:focus {
        font-size: 18px;
        font-family: 'MaruBuri-Regular';
        background-color: #525764;
        border: 3px solid #525764;
        width: 288px;
        margin: 0 auto;
        color: #ffffff;
    }

    .btn-answer:hover {
        font-size: 18px;
        font-family: 'MaruBuri-Regular';
        background-color: #74aa86;
        border: 3px solid #1f1f1f;
        width: 288px;
        margin: 0 auto;
        color: #ffffff;
    }

    .progress-bar {
        background-color: #74aa86;
    }

    .progress {
        background-color: #525764;
        margin: 0 auto;
        width: 400px;
    }

    .question-content {
        font-family: 'MaruBuri-Regular';
        font-size: 20px;
        font-weight: 700;
        color: #ffffff;
        width: 400px;
        margin: 0 auto;
    }

    .rectangle {
        width: 288px;
        height: 8px;
        background-color: #383a43;
        margin: 0 auto;
    }

    .mid-rectangle {
        width: 288px;
        height: 1px;
        background-color: #383a43;
        margin: 0 auto;
    }

    .question {
            width: 60%;
            margin: 0 auto;
            margin-top: 30px;
            background-color: rgba(92, 92, 102, 0.4);
            border-radius: 50px;
        }

    .bird-icon {
        width: 20px;
        height: 20px;
        margin: 0 auto;
    }

    /* 결과 화면 */

    .result-message {
        font-family: 'Song Myung', sans-serif;
        font-size: 30px;
        color: #94553f;
        margin: auto auto;
        font-weight: 700;
        margin: 0 auto;
        -webkit-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }

    .result-animal {
        font-family: 'Song Myung', sans-serif;
        font-size: 2rem;
        font-weight: 800;
        color: #94553f;
  
    }

    .result-explain{
        font-size: 16px;
        font-weight: 700;
        color: #74aa86;
        font-family: 'MaruBuri-Regular';
        line-height: 30px;
        margin: 0 auto;
        -webkit-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }

    .share-message {
        font-family: 'Song Myung';
        color:wheat;
        font-size: 24px;
        font-weight: 400;
        margin: 0 auto;
    }

    .result {
        width: 50%;
        height: 60%;
        margin: 0 auto;
        margin-top: 30px;
        background-color: rgba(92, 92, 102, 0.4);
        border-radius: 50px;
    }

    #img{
        width: 250px;
        object-fit: cover;
        margin: 0 auto;
    }

    .share {
        margin: 0 auto;
    }

    .kakao_ad {
        width: 320px;
        margin: 0 auto;
    }

    .banner {
        display: flex;
        justify-content: center;
        width: 300px;
        margin: 0 auto;
    }

    .banner-img {
        width: 300px;
        height: 405.17px;
    }

    .supporters {
        width: 85%;
        height: 105%;
        margin: 0 auto;
        margin-top: 120px;
        margin-bottom: 80px;
        border-radius: 30px;
    }


    /*SNS 공유*/

    .sns-go {
        display: block;
        margin: 0;
    }

    .sns-go li {
        display:inline-block; 
        margin: 0 5px;
    }

    .sns-go li img {
        border-radius:10px;
    }

    ul{
        padding: 0;
        margin-bottom: 30vh;
    }


    /*푸터*/

    .footer{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 80px;
    }

    .instagram{
        font-family: 'Montserrat', sans-serif;
        font-size: 22px;
        font-weight: 500;
        color:wheat;
        border: 1px solid wheat;
        border-radius: 5px;
    }
    
    .instagram:hover{
        font-family: 'Montserrat', sans-serif;
        font-size: 22px;
        font-weight: 700;
        font-style: italic;
        transition: 0.6s !important;
        color: wheat;
        background: linear-gradient(to bottom left, #833ab4, #fd1d1d,#fcb045);
        border-radius: 5px;
    }

    .orsaelogo{
        width: 170px;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 50px;
        margin-top: 80px;
        margin-bottom: 20px;
    }


/*미디어 쿼리*/

@media (max-width: 768px) {
    

    .start{
        width: 90%;
        height: 60%;
        margin: 0 auto;
        margin-top: 20px;
        background-color: rgba(92, 92, 102, 0.4);
        border-radius: 50px;
    }

    .question{
        width: 90%;
        margin: 0 auto;
        background-color: rgba(92, 92, 102, 0.4);
        border-radius: 50px;
    }

    .result{
        width: 90%;
        margin: 0 auto;
        background-color: rgba(92, 92, 102, 0.4);
        border-radius: 50px;
    }

    .result-explain{
        width: 100%
    }

    .main-title {
        font-family: 'Song Myung', sans-serif;
        font-size: 22px;
        font-weight: 500;
        color: #ffffff;
        border-bottom: 3px solid #757474;
        border-top: 3px solid #757474;
        padding: 10px;
        width: 100%;
        margin: 0 auto;
        margin-bottom: 150px;
        
    }

    .sub-title {
        font-family: 'Noto Sans KR', sans-serif;
        font-size: 22px;
        font-weight: 500;
        color: #ffffff;
        line-height: 40px;
        margin: auto;
        margin-bottom: 50px;
    }

    .question-content {
        font-family: 'Noto Sans KR', sans-serif;
        font-size: 20px;
        color: #ffffff;
        width: 100%;
        margin: 0 auto;
    }

    .progress-bar {
        background-color: #74aa86;
    }

    .progress {
        background-color: #525764;
        margin: 0 auto;
        width: 80%;
    }

    .result-explain{
        display: flex;
        flex-direction: column;
        font-size: 16px;
        font-weight: 700;
        color: #74aa86;
        font-family: 'Noto Sans KR', sans-serif;
        line-height: 30px;
        text-align: left;
        margin: 0 auto;
        -webkit-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }

    .supporters {
        width: 90%;
        height: 105%;
        margin: 0 auto;
        margin-top: 120px;
        margin-bottom: 80px;
        border-radius: 30px;
    }


}

/*애니메이션*/