body {
    background: #0000ff;
    margin:0;
    padding:0;
    overflow-x: hidden;
}
section{
    width: 100%;
    height: 100vh;
    /*border: 2px solid white;*/
}
.logo
{   
    /*position: fixed;
    height: 108px;
    padding-left: 2%;
    padding-top: 0.5%;
    border: 2px solid white; */
    z-index: 2000;   
}

.athlete1{
     padding-top: 1.75%;
}
.circle_middle
{
    z-index: -1000;
    position: relative;
    width:472px;
    top: 214px;
    left:50%;
    transform: translate(-50%);
    
}
.sohn_image
{   
    z-index: -100;
    position: absolute;
    left:50%;
    transform: translate(-60%);
    top: 90px;
    
    
}
.animation_button{
    opacity: 0;
}
.mini_circle1, .mini_circle2, .mini_circle3, .mini_circle4, .mini_circle5, .mini_circle6 {
    width: 29px;
    height: 29px;
    border-radius: 29px;
    background-color: #f2f2f2;
}
.mini_circle1{
    position: relative;
    top: -200px;
    left: 35.8%;
    opacity: 0.3;
}

.mini_circle2{
    position: relative;
    top: -170px;
    left: 34%;
    opacity: 0.3;
      
}

.name01, .name02, .name03, .name04, .name05, .name06{
    /*border: 2px solid white;*/
    text-align: right;
    
    color: #f2f2f2;
    font-family: 'Noto Sans', sans-serif;
    font-size: 32px;
    font-weight: 900;
    font-style: italic; 
    
}



.name01{
    position: absolute;
    top: 300px;
    left: 30.7%;
    opacity: 0;
    -webkit-transform: scale(1);
	transform: scale(1);
    -webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out; 
}

.mini_circle1:hover+.name01{
    opacity: 1;
    left: 30.2%
}
.mini_circle1:hover{
    opacity: 0.6;
    -webkit-transform: scale(1.1);
	transform: scale(1.1);
}

.name02{
    position: absolute;
    top: 355px;
    left: 29.5%;
    opacity: 0;
    -webkit-transform: scale(1);
	transform: scale(1);
    -webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.mini_circle2:hover+.name02{
    opacity: 1;
    left: 28.5%;
}
.mini_circle2:hover{
    opacity: 0.6;
    -webkit-transform: scale(1.1);
	transform: scale(1.1);
}

.name03{
    position: absolute;
    top: 425px;
    left: 28.7%;
    opacity: 0; 
    -webkit-transform: scale(1);
	transform: scale(1);
    -webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.mini_circle3:hover+.name03{
    opacity: 1;
    left: 28.2%
}
.mini_circle3:hover{
    opacity: 0.6;
    -webkit-transform: scale(1.1);
	transform: scale(1.1);
}

.name04{
    position: absolute;
    top: 495px;
    left: 29.1%;
    opacity: 0;
    -webkit-transform: scale(1);
	transform: scale(1);
    -webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.mini_circle4:hover+.name04{
    opacity: 1;
    left: 28.6%
}
.mini_circle4:hover{
    opacity: 0.6;
    -webkit-transform: scale(1.1);
	transform: scale(1.1);
}

.name05{
    position: absolute;
    top: 565px;
    left: 31.3%;
    opacity: 0; 
    -webkit-transform: scale(1);
	transform: scale(1);
    -webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.mini_circle5:hover+.name05{
    opacity: 1;
    left: 30.8%
}
.mini_circle5:hover{
    opacity: 0.6;
    -webkit-transform: scale(1.1);
	transform: scale(1.1);
}
.name06{
    position: absolute;
    top: 630px;
    left: 31.65%;
    opacity: 0;
    -webkit-transform: scale(1);
	transform: scale(1);
    -webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out; 
}
.mini_circle6:hover+.name06{
    opacity: 1;
    left: 31.05%
}
.mini_circle6:hover{
    opacity: 0.6;
    -webkit-transform: scale(1.1);
	transform: scale(1.1);
}
.mini_circle3{
    position: relative;
    top: -130px;
    left: 33.4%;
    opacity: 0.3
}
.mini_circle4{
    position: relative;
    top: -90px;
    left: 33.4%;
    opacity: 0.3
}
.mini_circle5{
    position: relative;
    top: -52px;
    left: 34.2%;
    opacity: 0.3   
}
.mini_circle6{
    position: relative;
    top: -17px;
    left: 35.8%;
       
}


.sohn_record1, .sohn_record2{
    color: #0000ff;
    font-family: 'Roboto', sans-serif;
    font-size: 220px;
    font-weight: 900;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: white;
    transform: rotate(90deg);
    transform-origin: left;
    
}
.sohn_record1{
    position: relative;
    top: -85%;
    left: 95%;
    
}
.sohn_record2{
    position: relative;
    top: -113%;
    left: 85%;
    text-align: left;
    
}

.athlete2{
    padding-top: 1.75%;
}
.sohn_mask1{
    position: absolute;
    right: 160px;
    top: 1000px;
    z-index: 10;
    
}
.sohn_mask2{
    position: absolute;
    top: 1000px;
    right: 80px;
    z-index: 5;
    opacity: 0.7;
    
}
.sohn_mask3{
    position: absolute;
    top: 1000px;
    right: 0;
    z-index: -500;
    opacity: 0.4;
    
}
#name{    
    padding-top: 5%;   
    text-align: left;
    padding-left: 90px;
    color: #f2f2f2;
    font-family: 'Noto Sans', sans-serif;
    font-size: 96px;
    font-weight: 900;
    font-style: italic; 
    
}
#birth{
    position: relative;
    top: 40px; 
    padding-left: 90px;
    text-align: left;
    left: 0px;
    color: #f2f2f2;
    font-family: 'Noto Sans', sans-serif;
    font-size: 64px;
    font-weight: 100;
    
}
#olympic{
    position: relative;
    top: 299px;   
    text-align: left;
    padding-left: 90px;
    color: #f2f2f2;
    font-family: 'Noto Sans', sans-serif;
    font-size: 64px;
    font-weight: 100;
    line-height: 87px;
    
}
.athlete3{
    justify-content: center;
    align-items: center;
    padding-top: 1.75%;
}
.record3{
    position: relative;
    top:15%;   
    text-align: left;
    padding-left: 90px;

    color: #f2f2f2;
    font-size: 150px;
    font-weight: 900;
    color: #0000ff;
    font-family: 'Roboto', sans-serif;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: white;
}
.athlete_news{
    position: relative;
    padding-left: 90px;
    padding-right: 90px;
    top:20%;
    font-family: Noto Sans;
    font-style: italic;
    font-weight: 600;
    font-size: 36px;
    line-height: 49px;
    text-align: justify;
    color: #f2f2f2;
    
}