@charset "utf-8";
    #vs {
        position: relative;
        overflow: hidden;
    }


    #vs .img_box {
        width:300vw;
        overflow: hidden;
        transition: 0.6s; 
    }

    #vs .img_box li {
        width: 100vw;
        float:left;
        position: relative;
    }

    #vs img {
        width: 100%;
        height: 600px;
        display: block;
    }

    .tit_box {
        position: absolute;
        top: -30px;
        width: 100%; 
        left: 40px;
        color: #fff;
        
    }
/* 이미지 텍스트 위치조정 */
    .tit_box h3 {
        text-align:center;
        margin-right: 60px;
        margin-top: 500px; 
        font-family: 'YesMyungjo';
        font-size: 50px;
        text-shadow: 2px 2px 1px rgba(26, 27, 30, 0.632); 
        color: rgb(255, 255, 255);
    }
/* 
    .tit_box a {
        display: block;
        width: 700px;
        line-height: 50px;
        text-align: center;
        font-size: 18px;
        font-weight: 400px;
        clear: both;
        margin: 30px auto;
        color: #fff;
        text-shadow: 1px 1px 0px #000000;
         background-color: rgba(255, 252, 252, 0.558); 
        transition: 0.4s; 
        border-radius: 10px 10px 10px 10px; 
        margin-left:0px;
    } */
/* 
    .tit_box a:hover {
        border-radius: 100px 100px 100px 100px;
    } */

    .btn_box {
        position:absolute;
        left: 0;
        bottom: 0; 
        z-index: 10;
        width: 100%;
        height:30px;
    }

    .btn_wrap {
        width: 80px;
        margin: -30px auto;
        display: flex;
        gap: 24px;
    }
    .btn_wrap li {
        width: 25px;
    }
    .vs_btn {
        display: block;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background-color: #fff;
        cursor: pointer;
        border:1px solid #020202fd;
        /*box-shadow: 1px 1px 0px #fff;*/
        
    }
    .ra {
        display: none; 
    }
    #ra1:checked ~ .img_box {
        margin-left: 0;
    }
    #ra2:checked ~ .img_box {
        margin-left:-100vw;
    }
    #ra3:checked ~ .img_box {
        margin-left:-200vw;
    }
    #ra1:checked ~ .btn_box #vs_btn1 {
        outline: 1px solid rgb(255, 255, 255);  /* 클릭시테두리 */
        outline-offset: 3px;                    /*  테두리 띄우기 */
       /* background-color: #0c0732; */
    }
    #ra2:checked ~ .btn_box #vs_btn2 {
        outline: 1px solid rgb(255, 255, 255);
        outline-offset: 3px;
        /* background-color: #0c0732; */
    }
    #ra3:checked ~ .btn_box #vs_btn3 {
        outline: 1px solid rgb(255, 255, 255);
        outline-offset: 3px;
        /* background-color: #0c0732; */
    }

    /* 검색창 */

    .sc {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;

        width: min(1250px, calc(100% - 32px)); /* 화면 작아도 안뚫림 */
        margin: 50px auto 10px;  
    }

    .sc #sc1{
        flex: 1;
        max-width: 1200px; 
        min-width: 0;
        height: 50px;
        text-align: center;
        font-size: 24px;
        font-family: 'Pretendard';
        font-weight: 400;
        background-color: #ffffff;
        border: 3px solid #9e9e9e;
        box-shadow: 1px 0.5px 0.5px 1px black;
        margin: 0; 
    }

    .sc #btn_sc {
        width: 50px;
        height: 50px;
    }