반응형 css 도와주세요!! 채택완료

#main{background:#efdbba; width:100%; height:400px;}
    .section{overflow:hidden; width:1300px; margin:0 auto;}
    .main_img{float:left;}
    .main_text{float:left;margin:50px 0 0 200px;}
    .main_text p{color:#fff; line-height:130%; font-size:35px;}
    .main_text p strong{font-size:40px; font-weight:200;}
    .main_btn{
    background:none;
    border:1px solid #fff;
    margin-top:20px;
    padding:15px 32px;
    text-align:center;
    text-decoration: none;
    font-size: 16px;
    color:#fff;
    cursor:pointer;
    }
    .main_btn:hover{background:#fff; color:#000;}

}

위에 부분은 css 소스입니다

밑에는 html

    <div id="main">
        <div class="section">
            <div class="main_img">
                <img src="<?php echo G5_THEME_IMG_URL;?>/main3.png" alt="메인슬라이드1"></div>
            <div>
            <div class="main_text">
                <p><strong>피크는</strong><br>고객의 니즈를 생각하고<br>실현해갑니다</p>
                <button class="main_btn"> 자세히 </button>
            </div>
            </div>
        </div>
    </div>
 </body>

인데 반응형으로 할려면 어떻게 해야할까요 ?..