@charset "utf-8";

body {background: #1a1a1a}




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

            /*main visual*/
            #main_vis { 
                width: 100%;
                height: 720px;
                background: url(../img/forums_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: 1200px; 
                margin: 0 auto;
                overflow: hidden;
                margin-top: 50px;
            }

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

            #container ul > li:hover {
                border-bottom: 4px 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~li {
                margin-left: 45px;
            }

            #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/forums_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: 820px; 
                margin: 0 auto;
                overflow: hidden;
                margin-top: 50px;
            }

            #container ul > li {
                width: 252px;
                height: 350px;
                border: 1px solid #1a1a1a;
                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~li {
                margin-left: 32px;
            }

            #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/forums_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 #1a1a1a;
                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~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; }
}