@charset "utf-8";




@media only screen and (min-width: 1200px) {

            /*main visual*/
            #main_vis { 
                width: 100%;
                height: 720px;
                background: url(../img/support_mainvis.jpg);
                background-position: 50% 50%;
                background-repeat: no-repeat;
                background-attachment: fixed;
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
            }

            /*contents*/
            #container ul {
                width: 1235px; 
                margin: 0 auto;
                overflow: hidden;
                margin-top: 50px;
            }

            #container ul > li {
            	width: 370px;
            	height: 350px;
                border: 1px solid #bbb;
                float: left;
            }

            #container ul > li:hover {
                border-bottom: 1px solid #c42127;
            }


            /*-----box img--------------------------------------------------*/

            #container ul > li.box1 {
                background: #efefef url(../img/support_hw.png);
            }

            #container ul > li.box2 {
                background: #efefef url(../img/support_tk.png);
            }

            #container ul > li.box3 {
                background: #efefef url(../img/support_fire.png);
            }
			
			#container ul > li.box4 {
                background: #efefef url(../img/clash/support_clash.png);
            }
			
			#container ul > li.box5 {
                background: #efefef url(../img/atlan/support_atlan.png);
            }
			#container ul > li.box6 {
                background: #efefef url(../img/herosky/support_herosky.png);
            }
			#container ul > li.box7 {
                background: #efefef url(../img/everytown_sweet/support_ES.png);
            }
			#container ul > li.box8 {
                background: #efefef url(../img/chasefire/support_CF.png);
            }
			#container ul > li.box9 {
                background: #efefef url(../img/playlasvegas/support_PL.png);
            }
			#container ul > li.box10 {
                background: #efefef url(../img/heroes5/support_H5.png);
            }
			
            /*--------------------------------------------------------------*/


            #container ul > li{
            	margin-left: 20px;
				margin-top: 20px;
				margin-bottom: 20px;
				margin-right: 20px;
            }

            #container ul > li > a {
            	display: block;
            	width: 1200px;
            	height: 280px;
            	text-decoration: none;
            	color: #1a1a1a;
            	padding: 30px;
            }

            #container ul > li > a h4 {
                font-family: 'Titillium Web', sans-serif;
                font-weight: 300; letter-spacing: 1px;
            }

}


@media only screen and (max-width: 1200px) {

            /*main visual*/
            #main_vis { 
                width: 100%;
                height: 600px;
                background: url(../img/support_mainvis.jpg);
                background-position: 50% 50%;
                background-repeat: no-repeat;
                background-attachment: fixed;
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
            }

            /*contents*/
            #container {width:100%;}

            #container ul {
                width: 850px; 
                margin: 0 auto;
                overflow: hidden;
                margin-top: 50px;
            }

            #container ul > li {
                width: 252px;
                height: 350px;
                border: 1px solid #bbb;
                float: left;
            }

            #container ul > li:hover {
                border-bottom: 4px solid #c42127;
            }


            #container ul > li.box1 {
                background: #efefef url(../img/support_hw2.png);
            }

            #container ul > li.box2 {
                background: #efefef url(../img/support_tk2.png);
            }

            #container ul > li.box3 {
                background: #efefef url(../img/support_fire2.png);
            }
			#container ul > li.box4 {
                background: #efefef url(../img/clash/support_clash2.png);
            }
			#container ul > li.box5 {
                background: #efefef url(../img/atlan/support_atlan2.png);
            }
			#container ul > li.box6 {
                background: #efefef url(../img/herosky/support_herosky2.png);
            }
			#container ul > li.box7 {
                background: #efefef url(../img/everytown_sweet/support_ES2.png);
            }
			#container ul > li.box8 {
                background: #efefef url(../img/chasefire/support_CF2.png);
            }
			#container ul > li.box9 {
                background: #efefef url(../img/playlasvegas/support_PL2.png);
            }
			#container ul > li.box10 {
                background: #efefef url(../img/heroes5/support_H52.png);
            }
            #container ul > li {
                margin-left: 15px;
				margin-top: 15px;
				margin-bottom: 15px;
				margin-right: 15px;
            }

            #container ul > li > a {
                display: block;
                width: 100%;
                height: 280px;
                text-decoration: none;
                color: #1a1a1a;
                padding: 30px;
            }

            #container ul > li > a h4 {
                font-family: 'Titillium Web', sans-serif;
                font-size: 18pt;
                font-weight: 300; letter-spacing: 1px;
            }
}







@media only screen and (max-width: 820px) {


            /*main visual*/
            #main_vis { 
                width: 100%;
                height: 420px;
                background: url(../img/support_mainvis2.jpg) no-repeat center;
                position: relative; 
            }

            #main_vis h3{
                padding-top: 180px;
            }

            /*contents*/
            #container ul {
                width: 85%;
                margin: 0 auto;
                overflow: hidden;
                margin-top: 50px;
            }

            #container ul > li {
                width: 100%;
                height: 180px;
                border: 1px solid #bbb;
                float: left;
            }

            #container ul > li:hover {
                border-bottom: 4px solid #c42127;
            }


            /*-----box img--------------------------------------------------*/
            #container ul > li.box1 {
                background: #efefef url(../img/support_hw3.png) no-repeat;
                background-position: 100% 0;
            }

            #container ul > li.box2 {
                background: #efefef url(../img/support_tk3.png) no-repeat;
                background-position: 100% 0;
            }

            #container ul > li.box3 {
                background: #efefef url(../img/support_fire3.png) no-repeat;
                background-position: 100% 0;
            }
			#container ul > li.box4 {
                background: #efefef url(../img/clash/support_clash3.png) no-repeat;
				background-position: 100% 0;
            }
			
			#container ul > li.box5 {
                background: #efefef url(../img/atlan/support_atlan3.png) no-repeat;
				background-position: 100% 0;
            }
			#container ul > li.box6 {
                background: #efefef url(../img/herosky/support_herosky3.png) no-repeat;
				background-position: 100% 0;
            }
			#container ul > li.box7 {
                background: #efefef url(../img/everytown_sweet/support_ES3.png);
            }
			#container ul > li.box8 {
                background: #efefef url(../img/chasefire/support_CF3.png);
            }
			#container ul > li.box9 {
                background: #efefef url(../img/playlasvegas/support_PL3.png);
            }
			#container ul > li.box10 {
                background: #efefef url(../img/heroes5/support_H53.png);
            }
            /*--------------------------------------------------------------*/


            #container ul > li {
                margin-left: 0; margin-top: 20px;
            }

            #container ul > li > a {
                display: block; 
                width: 100%;
                height: 280px;
                text-decoration: none;
                color: #1a1a1a;
                padding: 30px;
            }

            #container ul > li > a h4 {
                font-family: 'Titillium Web', sans-serif;
                font-size: 18pt;
                font-weight: 300; letter-spacing: 1px;
            }

            #footer { margin-top: 45px; }
}