/*mobile*/   
@media screen and (max-width:767px){
    #div1 {width: 90%;}
    #div1 li:first-child{font-size: 40px;line-height: 60px}
    
    .swid .warn1{font-size: 25px;line-height: 40px;} 
    .swid .warn1 .impact{font-size: 25px;} 
    .swid .warn2{font-size: 17px;line-height: 30px;}
    
    .swid #gradient{padding: 20px 0}
    .swid .logo img{height: 30px;}
    .swid .title{font-size: 30px;margin: 10px 0}
    .swid .title_b{font-size: 30px;}
    
    .swid .warn2 .underline1 {margin-top: 30px;} 
    .swid .warn2 .underline2 {margin-top: 30px;} 
    .swid .warn2 .underline3 {margin-top: 30px;}
    
    .sel_box #mbti_btn{width: 100%;line-height: 40px;font-size: 25px;}
    .sel_box #mbti_btn div{width: 230px;height: 230px;padding: 60px 0}
    .sel_box #mbti_btn .mbti_btn_2{font-size: 30px;margin-top: 145px;}
    .result {width: 50%;}
    .info {width: 90%;}
    
}
 
/*tablet2*/
@media screen and (min-width:768px) and (max-width:1023px){
    #div1 {width: 90%;}
    #div1 li:first-child{font-size: 50px;line-height: 70px}
    
    .swid .warn1{font-size: 25px;line-height: 40px;} 
    .swid .warn1 .impact{font-size: 25px;} 
    .swid .warn2{font-size: 17px;line-height: 30px;} 
    .swid #gradient{padding: 35px 0}
    .swid .logo img{height: 50px;}
    .swid .title{font-size: 30px;margin: 20px 0}
    .swid .title_b{font-size: 30px;}
    
    .swid .warn2 .underline1 {margin-top: 30px;} 
    .swid .warn2 .underline2 {margin-top: 30px;} 
    .swid .warn2 .underline3 {margin-top: 30px;}
    
    .sel_box #mbti_btn{width: 97%;line-height: 50px;font-size: 30px;}
    .sel_box #mbti_btn div{width: 270px;height: 270px;padding: 60px 0}
    .sel_box #mbti_btn .mbti_btn_2{font-size: 6.8vw;margin-top: 165px;}
    .result {width: 30%;}
    .info {width: 70%;}
    
    }
    
/*tablet1*/
@media screen and (min-width:1024px) and (max-width:1200px){
    #div1 {width: 60%;}
    #div1 li:first-child{font-size: 50px;line-height: 70px}
    
    .swid .warn1{font-size: 25px;line-height: 40px;} 
    .swid .warn1 .impact{font-size: 25px;} 
    .swid .warn2{font-size: 17px;line-height: 30px;} 
    .swid #gradient{padding: 35px 0}
    .swid .logo img{height: 50px;}
    .swid .title{font-size: 30px;margin: 20px 0}
    .swid .title_b{font-size: 30px;}
    
    .swid .warn2 .underline1 {margin-top: 30px;} 
    .swid .warn2 .underline2 {margin-top: 30px;} 
    .swid .warn2 .underline3 {margin-top: 30px;}
    
    .sel_box #mbti_btn{width: 90%;line-height: 50px;font-size: 30px;}
    .sel_box #mbti_btn div{width: 333px;height: 333px;padding: 100px 0}
    .sel_box #mbti_btn .mbti_btn_2{font-size: 70px;margin-top: 195px;}
    .result {width: 30%;}
    .info {width: 50%;}
    }
    
/*pc*/  
@media screen and (min-width: 1201px){
    #div1 {width: 60%;}
    #div1 li:first-child{font-size: 50px;line-height: 70px}
    
    .swid .warn1{font-size: 25px;line-height: 40px;} 
    .swid .warn1 .impact{font-size: 30px;} 
    .swid .warn2{font-size: 20px;line-height: 40px;} 
    .swid #gradient{padding: 50px 0}
    .swid .logo img{height: 50px;}
    .swid .title{font-size: 45px;margin: 20px 0}
    .swid .title_b{font-size: 45px;}
    
    .swid .warn2 .underline1 {margin-top: 40px;} 
    .swid .warn2 .underline2 {margin-top: 40px;} 
    .swid .warn2 .underline3 {margin-top: 40px;}
    
    .sel_box #mbti_btn{width: 77%;line-height: 50px;font-size: 30px;}
    .sel_box #mbti_btn div {width: 333px;height: 333px;padding: 100px 0}
    .sel_box #mbti_btn .mbti_btn_2{font-size: 70px;margin-top: 200px;}
    .result {width: 30%;}
    .info {width: 50%;}
    
}