CSS:Wide Screen

@charset "utf-8"; /* CSS Document */ body,html{ height:100% } div#header_wrap{ width:	100%; height:114px; background:url(file:///N|/04_Responsive_Web/03_RWD_project_01/images/header_bg.gif) repeat-x; } header{ width:980px; height:114px; margin:0px auto; position:relative;	left:0px; top:0px; } span#logo{ position:absolute; left:0px; top:45px; } ul#topmenu_list li{ float:left; margin-right:10px; } ul#topmenu_list{ width:150px; height:20px; position:absolute; right:0px; top:5px; } ul#menu_list li{ width:25%; height:16px; float:left; text-indent:-9999px; background:url(file:///N|/04_Responsive_Web/03_RWD_project_01/images/navi_text.png) no-repeat 0px 0px; } ul#menu_list{ width:70%; height:16px; position:absolute; left:50%; margin-left:-38%; top:70px; } ul#menu_list li:nth-child(1){ background-position:0px 0px; } ul#menu_list li:nth-child(2){ background-position:0px -36px; } ul#menu_list li:nth-child(3){ background-position:0px -70px; } ul#menu_list li:nth-child(4){ background-position:0px -105px; } span#best_btn{ position:absolute; right:0px; top:70px; } span#menu_icon{ position:absolute; left:0px; top:2px;display:none; } div#visual_wrap{ width:100%; background:url(file:///N|/04_Responsive_Web/03_RWD_project_01/images/visual_bg.jpg) repeat-x; } section#visual{ width:980px; margin:0px auto; overflow:hidden; } ul#visual_list{ width:100%; } ul#visual_list li{ width:100%; float:left; } ul#visual_list li img{ width:100%; } /*div#visual_wrap{ background:100%; height:469px; 	background:url(file:///N|/04_Responsive_Web/03_RWD_project_01/images/visual_bg.jpg) repeat-x; } section#visual{ width:980px; height:100%; margin:0px auto; overflow:hidden; } ul#visual_list li{ width:100%; height:100%; float:left; } ul#visual_list{ width:100%; height:100%; } ul#visual_list li:nth-child(1){ background:url(file:///N|/04_Responsive_Web/03_RWD_project_01/images/visual_img_01.jpg) no-repeat center 0px; background-size:cover; } ul#visual_list li:nth-child(2){ background:url(file:///N|/04_Responsive_Web/03_RWD_project_01/images/visual_img_02.jpg) no-repeat center 0px; background-size:cover; } ul#visual_list li:nth-child(3){ background:url(file:///N|/04_Responsive_Web/03_RWD_project_01/images/visual_img_03.jpg) no-repeat center 0px; background-size:cover; } div#contents_wrap{ width:100%; height:270px; background:#ececec; } section#contents{ width:980px; height:270px; margin:0px auto; } ul#contents_list li{ width:20%; height:120px; float:left; margin-right:6.66%; } ul#contents_list li:last-child{ margin-right:0px; } ul#contents_list{ width:100%; height:120px;margin-top:50px; float:left; } p.sum_title{ text-align:center; margin-bottom:10px; } p.sum_img{ width:100%; text-align:center; margin-bottom:10px; } p.sum_img img{ width:100%; } p.sum_text{ text-align:center; } @media screen and (max-width:980px){ header,section#visual,section#contents{ width:95%; } 	ul#menu_list{ width:60%; margin-left:-35%; } 	span#menu_icon{ display:none; } 	section#visual{ width:95%; } } @media screen and (max-width:800px){ ul#menu_list{ display:none; } 	span#menu_icon{ display:block; } 	span#logo{ left:50%; margin-left:-63px; } 	ul#visual_list li{ background-image:url(file:///N|/04_Responsive_Web/03_RWD_project_01/images/visual_img_02.jpg); } 	ul#contents_list li{ width:45%; margin-right:10%; margin-bottom:50px; } 	ul#contents_list li:nth-child(2n){ margin-right:0px; } 	div#contents_wrap{ height:400px; } 	section#contents{ height:400px; } } @media screen and (max-width:480px){ span#best_btn{ display:none; } 	ul#contents_list li{ width:100%; margin-right:0px; } 	ul#contents_list li:nth-child(3), ul#contents_list li:nth-child(4){ display:none; } }