@media (min-width: 320px){
    .wrap{width: 310px;}  
    .wrap-2{padding: 50px 0;}
    .main-detail iframe{width: 300px; height: 174px;}
    .header{height: 50vh;}
    .header-button{left: 10px;}
    .header-button-2{right: 10px; left: initial;}
    .logo{width: 100px; margin: 5px auto;}
    .footer-top{text-align: center;}
    .footer-logo{margin-bottom: 30px;}
    .footer-name{padding: 0 0 30px 0;}
    .footer-list li a{padding: 0 10px;}
}
@media (min-width: 360px){
    .wrap{width: 350px;}
    .main-detail iframe{width: 330px; height: 186px;}
    .footer-list li a{padding: 0 11px; font-size: 16px;}
}
@media (min-width:410px){
    .wrap{width: 400px;}
    .main-detail iframe{width: 370px; height: 208px;}
    .footer-list li a{padding: 0 19px;}
}
@media (min-width: 480px){
    .wrap{width: 480px;}
    .logo{width: 200px; margin: 10px auto 5px;}
    .header-wrap-2 .logo{width: 100px; margin: 5px auto;}
    .main-detail iframe{width: 480px; height: 270px;}
    .footer-list li a{padding: 0 20px;}
}
@media (min-width: 580px){
    .wrap{width: 580px;}
    .main-detail iframe{width: 560px; height: 315px;}
    .footer-top{text-align: left;}
    .footer-name, .footer-info{float: left; width: calc((100% - 60px)/2); padding: 0 15px;}
    .footer-info{text-align: right;}
}
@media (min-width: 768px){
    .wrap{width: 768px;}
    .main-detail iframe{width: 660px; height: 371px;}
    .header{height: 75vh;}
    .header-button{left: 50px;}
    .header-button-2{right: 50px; left: initial;}
}
@media (min-width: 970px){
    .wrap{width:970px;}
    .wrap-2{padding: 8vh 0 50px;}
    .main-detail iframe{width: 760px; height: 428px;}
    .header{height: 100vh;}
    .footer-logo{float: left; width: calc(100%/3); margin-bottom: 0;}
    .footer-name{box-sizing: border-box; width: calc(100%/3); padding: 0 25px;}
    .footer-info{width: calc(100%/3); padding: 0; text-align: left;}
}
@media (min-width: 1170px){
    .wrap{width: 1170px;}
}