@charset "utf-8";

@media only screen and (min-width: 1200px) {
            /*main visual*/
            #main_vis { 
                width: 100%;
                height: 720px;
                background: url(../img/index_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:1200px; margin: 0 auto;}

            #container > ul {
                overflow: hidden;
                margin-top: 50px;
            }


            #container > .game > li {height: 500px; float: left;}

            #container > .row3 > li {height: 280px; float: left;}

            #container > ul > li.box1 {
                width: 750px;
            }

            #container > ul > li.box2 {
                width: 450px; 
                padding: 0;
                background-color: #efefef;
                position: relative;
            }

            #container > ul > li.hw {
                background: url(../img/heroeswill.png);
            }

            #container > ul > li.tk {
                background: url(../img/threekingdoms.png);
            }

            #container > ul > li.fire {
                background: url(../img/fire.png);
            }
			
			#container > ul > li.herosky {
                background: url(../img/herosky/herosky.png);
            }
			
			#container > ul > li.heroes_of_atlan {
                background: url(../img/atlan/atlan.png);
            }
			
			#container > ul > li.clash_heroeswill {
                background: url(../img/clash/clash.png);
            }
			
			#container > ul > li.everytown_sweet {
                background: url(../img/everytown_sweet/ES.png);
            }
			#container > ul > li.chasefire {
                background: url(../img/chasefire/CF.png);
            }
			#container > ul > li.playlasvegas {
                background: url(../img/playLasvegas/PL.png);
            }
			#container > ul > li.vegasholic {
                background: url(../img/vegasholic/VEGASHOLIC.png);
            }
			#container > ul > li.heroes5 {
                background: url(../img/heroes5/H5.png);
            }

            #container > ul > li.box2 ul{
                width: 400px;
                height: 220px;
                margin: 0 auto;
                margin-top: 100px;
            }

            #container > ul > li.box2 li{
                margin: 0 auto;
                text-align: center;
            }

            #container > ul > li.box2 .gamelogo{
                width: 300px;
                height: 110px;
                margin-bottom: 20px;
            }
			
			#container > ul > li.box2 .gamelogo140{
                width: 300px;
                height: 140px;
                margin-bottom: 20px;
            }
			
			#container > ul > li.box2 .gamelogo155{
                width: 360px;
                height: 155px;
                margin-bottom: 20px;
            }
			#container > ul > li.box2 .playlasvegas_gamelogo{
                width: 305px;
                height: 135px;
                margin-bottom: 20px;
            }
			
			#container > ul > li.box2 .heroes5_gamelogo{
                width: 100px;
                height: 135px;
                margin-bottom: 20px;
            }
            #container > ul > li.box2 .info {
                color: #1a1a1a;
                font-family: 'Titillium Web', sans-serif;
                font-size: 14pt;
                letter-spacing: 1px;
                line-height: 140%;
            }

            #container > ul > li.box2 .bullet {
                width: 20px;
                height: 2px;
                background-color: #c42127;
                margin: 0 auto;
                margin-bottom: 20px;
            }

            #container > ul > li.box2 .button {
                width: 296px;
                height: 46px;
                border: 2px solid #6f6f6f;
                margin: 0 auto; margin-top: 80px;
                overflow: hidden;
            }

            #container > ul > li.box2 .button:hover{
                border-color: #c42127;
            }

            #container > ul > li.box2 .button a{
                display: block;
                width: 0;
                height: 44px;
                -webkit-transition: width 0.2s; /* For Safari 3.1 to 6.0 */
                transition: width 0.2s;
            }

            #container > ul > li.box2 .button a:hover{
                text-decoration: none;
                background-color: #c42127;
                width: 294px;
            }

            #container > ul > li.box2 .button span{
                display: block;
                width: 292px;
                height: 42px;
                font-family: 'Titillium Web', sans-serif;
                font-size: 13pt;
                color: #333;
                letter-spacing: 1px;
                padding-top: 9px; text-align: left; padding-left: 20px;
                background: url(../img/arrow_right.png) no-repeat 93% 48%;
            }

            #container > ul > li.box2 .button span:hover{
                color: #efefef;
                background: url(../img/arrow_right_over.png) no-repeat 93% 48%;
            }

            #container > ul > li.box3 {
                width: 370px;
                height: 280px;
                background-color: #efefef;
            }

            #container > ul.row3 > li~li {
                margin-left: 45px;
            }

            #container > ul.row3 > li h4 {
                color: #1a1a1a;
                font-weight: 300;
                text-align: center;
                margin-top: 30px;
            }

            #container > ul.row3 > li span {
                display: block;
                width: 20px;
                height: 2px;
                background-color: #c42127;
                margin: 0 auto;
                margin-top: 20px;
                margin-bottom: 20px;
            }

            #container > ul.row3 > li p {
                color: #1a1a1a;
                opacity: 0.8;
                text-align: center;
            }
}







@media only screen and (max-width: 1200px) {
            /*main visual*/
            #main_vis { 
                width: 100%;
                height: 600px;
                background: url(../img/index_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%; margin: 0 auto;}

            #container > ul {
                overflow: hidden;
                margin-top: 50px;
            }

            #container > .game {width: 100%;}

            #container > .game > li {height: 500px; float: left;}

            #container > .row3 > li {height: 280px; float: left;}

            #container > ul > li.box1 { 
                width: 50%;
            }

            #container > ul > li.box2 { 
                width: 50%;
                padding: 0;
                background-color: #efefef;
                position: relative;
            }

            #container > ul > li.hw {
                background: url(../img/heroeswill.png) 50%;
            }

            #container > ul > li.tk {
                background: url(../img/threekingdoms.png) 75%;
            }

            #container > ul > li.fire {
                background: url(../img/fire.png) 70%;
            }
			
			#container > ul > li.herosky {
                background: url(../img/herosky/herosky.png) 50%;
            }
			
			#container > ul > li.heroes_of_atlan {
                background: url(../img/atlan/atlan.png) 50%;
            }
			
			#container > ul > li.clash_heroeswill {
                background: url(../img/clash/clash.png) 50%;
            }
			
			#container > ul > li.everytown_sweet {
                background: url(../img/everytown_sweet/ES.png) 50%;
            }
			
			#container > ul > li.chasefire {
                background: url(../img/chasefire/CF.png) 50%;
            }
			#container > ul > li.playlasvegas {
                background: url(../img/playLasvegas/PL.png) 50%;
            }
			#container > ul > li.vegasholic {
                background: url(../img/vegasholic/VEGASHOLIC.png) 50%;
            }
			#container > ul > li.heroes5 {
                background: url(../img/heroes5/H5.png) 50%;
            }
			
            #container > ul > li.box2 ul{
                width: 400px;
                height: 220px;
                margin: 0 auto;
                margin-top: 100px;
            }

            #container > ul > li.box2 li{
                margin: 0 auto;
                text-align: center;
            }

            #container > ul > li.box2 .gamelogo{
                width: 300px;
                height: 110px;
                margin-bottom: 20px;
            }
			
			#container > ul > li.box2 .gamelogo140{
                width: 300px;
                height: 140px;
                margin-bottom: 20px;
            }
			
			#container > ul > li.box2 .gamelogo155{
                width: 360px;
                height: 155px;
                margin-bottom: 20px;
            }
			
			
			#container > ul > li.box2 .playlasvegas_gamelogo{
                width: 305px;
                height: 135px;
                margin-bottom: 20px;
            }
			
			
			#container > ul > li.box2 .vegasholic_gamelogo{
                width: 130;
                height: 130px;
                margin-bottom: 20px;
            }
			
			#container > ul > li.box2 .heroes5_gamelogo{
                width: 100px;
                height: 135px;
                margin-bottom: 20px;
            }
            #container > ul > li.box2 .info {
                color: #1a1a1a;
                font-family: 'Titillium Web', sans-serif;
                font-size: 14pt;
                letter-spacing: 1px;
                line-height: 140%;
            }

            #container > ul > li.box2 .bullet {
                width: 20px;
                height: 2px;
                background-color: #c42127;
                margin: 0 auto;
                margin-bottom: 20px;
            }

            #container > ul > li.box2 .button {
                width: 296px;
                height: 46px;
                border: 2px solid #6f6f6f;
                margin: 0 auto;
                margin-top: 80px;
                overflow: hidden;
            }

            #container > ul > li.box2 .button:hover{
                border-color: #c42127;
            }

            #container > ul > li.box2 .button a{
                display: block;
                width: 0;
                height: 44px;
                -webkit-transition: width 0.2s; /* For Safari 3.1 to 6.0 */
                transition: width 0.2s;
            }

            #container > ul > li.box2 .button a:hover{
                text-decoration: none;
                background-color: #c42127;
                width: 294px;
            }

            #container > ul > li.box2 .button span{
                display: block;
                width: 292px;
                height: 42px;
                font-family: 'Titillium Web', sans-serif;
                font-size: 13pt;
                color: #333;
                letter-spacing: 1px;
                padding-top: 9px; text-align: left; padding-left: 20px;
                background: url(../img/arrow_right.png) no-repeat 93% 48%;
            }

            #container > ul > li.box2 .button span:hover{
                color: #efefef;
                background: url(../img/arrow_right_over.png) no-repeat 93% 48%;
            }

            #container > ul > li.box3 {
                width: 100%;
                height: 280px;
                background-color: #efefef;
            }

            #container > ul.row3 > li~li {
                margin-top: 45px;
            }

            #container > ul.row3 > li h4 {
                color: #1a1a1a;
                font-weight: 300;
                text-align: center;
                margin-top: 30px;
            }

            #container > ul.row3 > li span {
                display: block;
                width: 20px;
                height: 2px;
                background-color: #c42127;
                margin: 0 auto;
                margin-top: 20px;
                margin-bottom: 20px;
            }

            #container > ul.row3 > li p {
                color: #1a1a1a;
                opacity: 0.8;
                text-align: center;
            }
}






@media only screen and (max-width: 820px) {
            /*main visual*/
            #main_vis { 
                width: 100%;
                height: 420px;
                background: url(../img/index_mainvis2.jpg) no-repeat center;
                position: relative; 
            }

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

 

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

            #container > ul {
                overflow: hidden;
                margin-top: 0;
            }

            #container > .game {width: 100%;}

            #container > .game > li.box1 {height: 380px;}
            #container > .game > li.box2 {height: 400px;}

            #container > .row3 > li {height: 280px; float: left;}

            #container > ul > li.box1 { 
                width: 100%;
            }

            #container > ul > li.box2 { 
                width: 100%;

                padding: 0;
                background-color: #efefef;
                position: relative; 
            }

            #container > ul > li.hw {
                background: #1a1a1a url(../img/heroeswill.png) no-repeat 50%; background-size: 600px;
            }

            #container > ul > li.tk {
                background: #1a1a1a url(../img/threekingdoms.png) no-repeat 50%; background-size: 600px;
            }

            #container > ul > li.fire {
                background: #1a1a1a url(../img/fire.png) no-repeat 50%; background-size: 600px;
            }
			
			#container > ul > li.herosky {
                background: #1a1a1a url(../img/herosky/herosky.png) no-repeat 50%; background-size: 600px;
            }
			
			#container > ul > li.heroes_of_atlan {
                background: #1a1a1a url(../img/atlan/atlan.png) no-repeat 50%; background-size: 600px;
            }
			
			#container > ul > li.clash_heroeswill {
                background: #1a1a1a url(../img/clash/clash.png) no-repeat 50%; background-size: 600px;
            }
			
			#container > ul > li.everytown_sweet {
                background: #1a1a1a url(../img/everytown_sweet/ES.png) no-repeat 50%; background-size: 600px;
            }
			
			#container > ul > li.chasefire {
                background: #1a1a1a url(../img/chasefire/CF.png) no-repeat 50%; background-size: 600px;
            }
			
			#container > ul > li.playlasvegas {
                background: #1a1a1a url(../img/playLasvegas/PL.png) no-repeat 50%; background-size: 600px;
            }
			
			#container > ul > li.heroes5 {
                background: #1a1a1a url(../img/heroes5/H5.png) no-repeat 50%; background-size: 600px;
            }

            #container > ul > li.box2 ul{
                width: 95%;
                height: 220px;
                margin: 0 auto;
                margin-top: 50px;
            }

            #container > ul > li.box2 li{
                margin: 0 auto;
                text-align: center;
            }

            #container > ul > li.box2 .gamelogo{
                width: 200px;
                height: 110px;
                margin-bottom: 0px;
            }
			
            #container > ul > li.box2 .gamelogo140{
                width: 200px;
                height: 140px;
                margin-bottom: 0px;
            }
			
			#container > ul > li.box2 .gamelogo155{
                width: 360px;
                height: 155px;
                margin-bottom: 0px;
            }
    		#container > ul > li.box2 .playlasvegas_gamelogo{
                width: 305px;
                height: 135px;
                margin-bottom: 20px;
            }  
    		#container > ul > li.box2 .heroes5_gamelogo{
                width: 100px;
                height: 135px;
                margin-bottom: 20px;
            } 
            #container > ul > li.box2 .gamelogo img {
                width: 100%;
            }
			
            #container > ul > li.box2 .gamelogo140 img {
                width: 100%;
            }
            #container > ul > li.box2 .gamelogo155 img {
                width: 100%;
            }
			#container > ul > li.box2 .playlasvegas_gamelogo img {
                width: 100%;
            }
		    #container > ul > li.box2 .heroes5_gamelogo img {
                width: 100%;
            }
            #container > ul.row2 > li.box2 .gamelogo {
                margin-bottom: -15px;
            }
			
			#container > ul.row2 > li.box2 .gamelogo140 {
                margin-bottom: -15px;
            }
			
			#container > ul.row2 > li.box2 .gamelogo155 {
                margin-bottom: 15px;
            }
			#container > ul.row2 > li.box2 .playlasvegas_gamelogo {
                margin-bottom: 15px;
            }
			#container > ul.row2 > li.box2 .heroes5_gamelogo {
                margin-bottom: 15px;
            }
            #container > ul > li.box2 .info {
                color: #1a1a1a;
                font-family: 'Titillium Web', sans-serif;
                font-size: 12pt;
                letter-spacing: 1px;
                line-height: 140%;
            }

            #container > ul > li.box2 .bullet {
                width: 20px;
                height: 2px;
                background-color: #c42127;
                margin: 0 auto;
                margin-bottom: 20px;
            }

            #container > ul > li.box2 .button {
                width: 296px;
                height: 46px;
                border: 2px solid #6f6f6f;
                margin: 0 auto;
                margin-top: 30px;
                overflow: hidden;
            }

            #container > ul > li.box2 .button:hover{
                border-color: #c42127;
            }

            #container > ul > li.box2 .button a{
                display: block;
                width: 0;
                height: 44px;
                -webkit-transition: width 0.2s; /* For Safari 3.1 to 6.0 */
                transition: width 0.2s;
            }

            #container > ul > li.box2 .button a:hover{
                text-decoration: none;
                background-color: #c42127;
                width: 294px;
            }

            #container > ul > li.box2 .button span{
                display: block;
                width: 292px;
                height: 42px;
                font-family: 'Titillium Web', sans-serif;
                font-size: 13pt;
                color: #333;
                letter-spacing: 1px;
                padding-top: 9px; text-align: left; padding-left: 20px;
                background: url(../img/arrow_right.png) no-repeat 93% 48%;
            }

            #container > ul > li.box2 .button span:hover{
                color: #efefef;
                background: url(../img/arrow_right_over.png) no-repeat 93% 48%;
            }

            #container > ul.row2 { height: 780px; position: relative;}

            #container > ul.row2 > li.box2 {
                position: absolute;
                bottom: 0;
            }

            #container > ul > li.box3 {
                width: 100%;
                height: 280px;
                border: 4px solid #1a1a1a;
                background-color: #efefef;
            }

            #container > ul.row3 > li~li {
                margin-top: -4px;
            }

            #container > ul.row3 > li h4 {
                color: #1a1a1a;
                font-weight: 300;
                text-align: center;
                margin-top: 30px;
            }

            #container > ul.row3 > li span {
                display: block;
                width: 20px;
                height: 2px;
                background-color: #c42127;
                margin: 0 auto;
                margin-top: 20px;
                margin-bottom: 20px;
            }

            #container > ul.row3 > li p {
                color: #1a1a1a;
                opacity: 0.8;
                text-align: center;
            }


}