@charset "UTF-8";

    
#container {
    background-color: #f4f4f4;
}

#front>#title>p{
    font-family: "Special Gothic Expanded One", sans-serif;
}

#title>span{
    font-family: "Special Gothic Expanded One", sans-serif;
}
    
#top_btn div {
    background-color: #121212;
}
section h1 {
    font-family: "Special Gothic Expanded One", sans-serif;
    color: #222222;
}
section p {
    font-family: "42dot Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    color: #121212;
}
section img {
    width: 100%;
}
    
#sec1 {
    width: 70vw; 
    padding: 10vh 15vw;
}
#sec1 h1 {
    font-family: "Special Gothic Expanded One", sans-serif;
    font-size: 42px;
    transition: all 0.5s;
    margin-bottom: 20px;
}
#sec1 h1:hover{
    font-family: "Special Gothic Expanded One", sans-serif;
    font-size: 42px;
    color: rgb(0, 81, 255);
    text-shadow: 1px 1px 2px#777777;
}

#sec1 p{
    font-family: "42dot Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

#sec2 {
    width: 80vw; 
    padding: 0 10vw 10vh;
}
/*#sec2 #vid {
    width: 100%; 
    padding: 5vw; 
    box-sizing: border-box; 
    border-top: 2px solid #000000;
    border-bottom: 2px solid #000000;
}
#sec2 video {
    width: 100%;
}*/
    
#sec3 {
    width: 100%;
    height: 1500px;
    padding: 0 0 10vh; 
    position: relative;
    background: url(./images/2151891118.jpg) right;
    background-size: cover;
}
#sec3::before{
    content: "";
    display: block;
    position: absolute;
    width: 300px;
    height: 300px;
    top: 1000px;
    left: 35%;
    background: url(./images/);
    background-size: cover;
    animation-name: bounce 8s infinite linear;
}


#font5{
    font-size:20px;
    padding-left:200px;
    color:red;
}


#sec3 #img {
    animation: ball  8s infinite linear;
}
    @keyframes ball {
        0% {
            background: url(./images/농구선수1.png);
            background-size: cover;
            position: absolute;
            width: 500px;
            height: 750px;
            top: 400px;
            left: 60%;
        }
        20%{
            background: url(./images/농구선수2.png);
            background-size: cover;
            position: absolute;
            width: 500px;
            height: 750px;
            top: 100px;
            left: 60%;
        }
        50%{
            background: url(./images/농구선수2.png);
            background-size: cover;
            position: absolute;
            width: 500px;
            height: 750px;
            top: 400px;
            left: 60%;
        } 
        100% {
            background: url(./images/농구선수2.png);
            background-size: cover;
            position: absolute;
            width: 500px;
            height: 750px;
            top: 400px;
            left: 60%;
        }
    } 

#sec3 #img2 {
    width: 100px;
    height: 100px; 
    position: absolute; 
    left: -20vw; 
    animation: move 8s infinite linear;
}
    @keyframes move {
        0% {left: 50%; opacity: 0;} 
        5% {
            opacity: 1;
            top: 50px;
        } 
        90% {
            left: 35%;
            top: 600px;
            opacity: 1;
        } 
        100% {
            left: 35%;
            top: 600px;
            opacity: 0;
        }
    }
#sec3 #text {
    position: absolute; 
    left: 15vw; 
    top: 37.5%;
}
#sec3 h1, #sec3 h2 {
    font-family: "42dot Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    color: white;
    text-shadow: 0 0 2px #a0a0a0;
    font-size: 42px;
    transition: all 0.5s;
}  
#sec3 h1:hover, #sec3 h2:hover{
    color: rgb(32, 32, 132);
}
#sec3 p {
    font-family: "42dot Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 20px;
    color: white;
    margin-top: 5%;
}
#sec3 p span {
    display: block; 
    margin: 3% 0; 
    color: inherit; 
    font-size: 16px;
    font-family: "42dot Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}  
    
#sec4 {
    width: 70vw; 
    height: 25vw;
    padding: 0 15vw 10vh; 
    position: relative;
}
#sec4 #img {
    width: 50%; 
    position: absolute; 
    right: 0; 
    bottom: 5vh;
}
#sec4 p {
    margin-top: 3%; 
    font-size: 1vmax;
}
     
#sec5 {
    width: 100vw; 
    padding: 0 0 10vh;
}
#sec5 h1 {
    font-family: "Special Gothic Expanded One", sans-serif;
    padding-left: 15vw; 
    margin-bottom: 3%;
}
#sec5 #bg {
    width: 100%; 
    box-sizing: border-box; 
    background-color: #f2f2f2; 
    position: relative;
}
#sec5 #slide {
    width: 80vw; 
    margin: 0 auto; 
    overflow: hidden;
}
#sec5 #slide_wrap {
    width: 400vw;
}
#sec5 #slide_wrap li {
    width: 80vw; 
    float: left;
}
#sec5 #pager {
    width: 100%; 
    height: 5vw; 
    position: absolute; 
    margin: auto; 
    top: 0; 
    bottom: 0;
}
#sec5 #pager li {
    width: 6vw; 
    height: 5vw; 
    text-align: center; 
    font-size: 2vw; 
    line-height: 5vw; 
    color: #ffe6f6; 
    cursor: pointer; 
    position: absolute; 
    top: 0; 
    transition: 0.5s all;
}
#sec5 #pager li:nth-child(1) {
    left: 0;
}
#sec5 #pager li:nth-child(2) {
    right: 0;
}
#sec5 #bg:hover li {
    text-shadow: 0 0 0.8vw #fff;
}
    
#sec6 {
    width: 70vw; 
    height: 50vw; 
    padding: 0 15vw 10vh;
}
#sec6 #left, #sec6 #right {
    width: 34vw; 
    height: 34vw; 
    float: left; 
    box-sizing: border-box;
    border-radius: 3vw; 
    overflow: hidden;
}
#sec6>div>ul {
    width: 100%; 
    height: 100%; 
    position: relative;
}
#sec6>div>ul>li {
    position: absolute;
}
    
#sec6 #left {
    margin-right: 2vw; 
    border: 0.5vw solid #000000;
}

#sec6 #left li {
    background-color: #0ff; 
    transition: 0.3s all;
}
#sec6 #left li:nth-child(1){
    width: 20%; 
    height: 40%; 
    background: url('./images/나이키\ 물병.png') no-repeat center/100% auto; 
    left: 6%; 
    top: 18%;
}
#sec6 #left li:nth-child(2){
    width: 34%; 
    height: 48%; 
    background: url('./images/나이키\ 손목\ 밴드.png') no-repeat center/100% auto; 
    left: 26%; 
    top: 13%;
}
#sec6 #left li:nth-child(3){
    width: 34%; 
    height: 22%; 
    background: url('./images/나이키\ 선글라스.png') no-repeat center/100% auto; 
    left: 59%; 
    top: 17%;
}
#sec6 #left li:nth-child(4){
    width: 46%; 
    height: 30%; 
    background: url('./images/나이키\ 스냅백.png') no-repeat center/100% auto; 
    left: 14%; 
    top: 56%;}
#sec6 #left li:nth-child(5){
    width: 24%; 
    height: 50%; 
    background: url('./images/농구공1.png') no-repeat center/100% auto; 
    left: 64.5%; 
    top: 38%;
}
    
#sec6 #left li:nth-child(1):hover {
    background-image: url('./images/나이키\ 물병.png');
    filter: brightness(180%);
    background-size: 150%;
}
#sec6 #left li:nth-child(2):hover {
    background-image: url('./images/나이키\ 손목\ 밴드.png');
    filter: brightness(130%);
    background-size: 130%;
}
#sec6 #left li:nth-child(3):hover {
    background-image: url('./images/나이키\ 선글라스.png');
    filter: brightness(180%);
    background-size: 130%;
}
#sec6 #left li:nth-child(4):hover {
    background-image: url('./images/나이키\ 스냅백.png');
    filter: brightness(180%);
    background-size: 130%;
}
#sec6 #left li:nth-child(5):hover {
    background-image: url('./images/농구공1.png');
    filter: brightness(180%);
    background-size: 130%;
}
    /* addClass */
#sec6 #left li:nth-child(1).on {
    background-image: url('./images/나이키\ 물병.png');
}
#sec6 #left li:nth-child(2).on {
    background-image: url('./images/나이키\ 손목\ 밴드.png');
}
#sec6 #left li:nth-child(3).on {
    background-image: url('./images/나이키\ 선글라스.png');
}
#sec6 #left li:nth-child(4).on {
    background-image: url('./images/나이키\ 스냅백.png');
}
#sec6 #left li:nth-child(5).on {
    background-image: url('./images/농구공1.png');
}
    
#sec6 #right {
    border: 0.5vw solid gray;
}
#sec6 #right li {
    display: none; 
    width: 100%; 
    height: 100%;
}   
#sec6 #right li #img {
    margin: auto; 
    position: absolute; 
    left: 0; 
    right: 0;
}
#sec6 #right li p {
    width: 100%; 
    height: 42%; 
    margin-top: 58%; 
    text-align: center; 
    color: #1e5b59;
}
#sec6 #right li p span {
    display: block; 
    font: 500 2vmax/2.5 'Noto Sans KR'; 
}

#sec6 #right li:nth-child(1) #img {
    width: 60%; 
    height: 60%; 
    /* transform: rotate(90deg);  */
    top: 20%;
}
#sec6 #right li:nth-child(2) #img {
    width: 60%; 
    height: 48%; 
    top: 15%;
}
#sec6 #right li:nth-child(3) #img {
    width: 74%; 
    height: 30%; 
    top: 10%;
}
#sec6 #right li:nth-child(4) #img {
    width: 80%; 
    height: 40%; 
    top: 10%;
}
#sec6 #right li:nth-child(5) #img {
    width: 64%; 
    height: 50%; 
    top: 1%;
}

#sec6 #text {
    clear: both; 
    padding-right: 3vw; 
    text-align: right;
}
#sec6 #text h1 {
    height: 6vw; 
    font-size: 1vw; 
    line-height: 9vw; 
    color: #1acdd6;
}
#sec6 p {
    font-size: 0.875vmax; 
    color: #1e5b59;
}
    
#sec7 {
    width: 100vw; 
    padding-top: 5vh; 
    position: relative;
}
#sec7 #text {
    width: 70vw; 
    padding: 0 15vw 5vh;
}
#sec7 #slide {
    width: 100%; 
    height: 42vw; 
    overflow: hidden;
}
#sec7 #slide_wrap {
    width: 300vw; 
    height: 100%;
}
#sec7 #slide_wrap li {
    width: 100vw; 
    height: 100%; 
    float: left;
}
#sec7 img {
    width: 100%; 
    display: block;
    margin-bottom:200px;
}
    
#sec8 {
    width: 100%; 
    height: fit-content;
}
#sec8 img {
    display: block; 
    width: 100%;
    margin-top:200px;
}


/*
#sec8 {
    width: 80vw; 
    padding: 0 10vw 10vh;
}
#sec8 #vid {
    width: 100%; 
    padding: 5vw; 
    box-sizing: border-box; 
    border-top: 2px solid #000000;
    border-bottom: 2px solid #000000;
    
}
#sec8 video {
    width: 100%;
}*/