@charset "utf-8";



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

            #container ul > li{
                width: 600px;
                height: 300px;
                float: left;
            }

            #container ul li a {
                display: block;
                width: 600px;
                height: 300px;
                text-decoration: none;
            }


            #container ul > li h4 {
                padding: 30px;
                color: #efefef;
                font-weight: 300;
            }

            #container ul > li.contact_insta h4, #container ul > li.contact_support h4 {
                color: #1a1a1a;
            }


            #container ul > li.contact_fb {
                background: #c42127 url(../img/fb_icon.png) no-repeat 90% 80%;
                transition: all 0.3s ease 0s;
            }


            #container ul > li.contact_insta {
                background: #efefef url(../img/insta_icon2.png) no-repeat 90% 80%;
                transition: all 0.3s ease 0s;
            }


            #container ul > li.contact_support {
                background: #efefef url(../img/support_icon2.png) no-repeat 90% 80%;
                transition: all 0.3s ease 0s;
            }

            #container ul > li.contact_forum {
                background: #1a1a1a url(../img/forum_icon.png) no-repeat 90% 80%;
                transition: all 0.3s ease 0s;
            }

            /*hover*/
            #container ul > li.contact_fb:hover {
                background: #1a1a1a url(../img/fb_icon.png) no-repeat 90% 80%;
            }


            #container ul > li.contact_insta:hover {
                background: #1a1a1a url(../img/insta_icon.png) no-repeat 90% 80%;
            }

            #container ul > li.contact_insta:hover h4 {
                color: #efefef;
            }


            #container ul > li.contact_support:hover {
                background: #1a1a1a url(../img/support_icon.png) no-repeat 90% 80%;
            }

            #container ul > li.contact_support:hover h4 {
                color: #efefef;
            }

            #container ul > li.contact_forum:hover {
                background: #c42127 url(../img/forum_icon.png) no-repeat 90% 80%;
            }


            /*-------------------------------------------------------------------------*/

            #container ul li.contact {
                padding: 0;
            }

            #container ul li.contact ul {
                width: 600px; height: 300px; margin-top: 0;
            }

            #container ul > li.contact h5{
                color: #efefef; font-weight: 300; text-align: center; margin-top: 132px; 
            }

            #container ul > li.contact p{
                color: #1a1a1a; font-weight: 300; text-align: center; margin-top: 135px; 
            }

            #container ul > li > ul > li {
                width: 300px; height: 300px;
            }

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

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

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

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




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

            #container ul > li.img2{
                height: 600px;
                background: url(../img/contact_img2.png);
            }

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




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

            #container ul > li{
                width: 50%;
                height: 300px;
                float: left;
            }

            #container ul li a {
                display: block;
                width: 100%;
                height: 300px;
                text-decoration: none;
            }


            #container ul > li h4 {
                padding: 30px;
                color: #efefef;
                font-weight: 300;
            }

            #container ul > li.contact_insta h4, #container ul > li.contact_support h4 {
                color: #1a1a1a;
            }


            #container ul > li.contact_fb {
                background: #c42127 url(../img/fb_icon.png) no-repeat 90% 80%;
                transition: all 0.3s ease 0s;
            }


            #container ul > li.contact_insta {
                background: #efefef url(../img/insta_icon2.png) no-repeat 90% 80%;
                transition: all 0.3s ease 0s;
            }


            #container ul > li.contact_support {
                background: #efefef url(../img/support_icon2.png) no-repeat 90% 80%;
                transition: all 0.3s ease 0s;
            }

            #container ul > li.contact_forum {
                background: #1a1a1a url(../img/forum_icon.png) no-repeat 90% 80%;
                transition: all 0.3s ease 0s;
            }

            /*hover*/
            #container ul > li.contact_fb:hover {
                background: #1a1a1a url(../img/fb_icon.png) no-repeat 90% 80%;
            }


            #container ul > li.contact_insta:hover {
                background: #1a1a1a url(../img/insta_icon.png) no-repeat 90% 80%;
            }

            #container ul > li.contact_insta:hover h4 {
                color: #efefef;
            }


            #container ul > li.contact_support:hover {
                background: #1a1a1a url(../img/support_icon.png) no-repeat 90% 80%;
            }

            #container ul > li.contact_support:hover h4 {
                color: #efefef;
            }

            #container ul > li.contact_forum:hover {
                background: #c42127 url(../img/forum_icon.png) no-repeat 90% 80%;
            }




            /*-------------------------------------------------------------------------*/

            #container ul li.contact {
                padding: 0;
            }

            #container ul li.contact ul {
                width: 100%; height: 300px; margin-top: 0;
            }

            #container ul > li.contact h5{
                color: #efefef; font-weight: 300; text-align: center; margin-top: 132px; 
            }

            #container ul > li.contact p{
                color: #1a1a1a; font-weight: 300; text-align: center; 
                width: 90%;  margin: 0 auto; margin-top: 135px;
            }

            #container ul > li > ul > li {
                width: 50%; height: 300px;
            }

            #container ul > li.c_1{
                background: url(../img/contact_1.png) center;
                /*background: #c42127;*/
            }

            #container ul > li.c_2{
                background: url(../img/contact_2.png) center;
                /*background: #1a1a1a;*/
            }

            #container ul > li.c_3{
                background: url(../img/contact_3.png) center;
                /*background: #c42127*/
            }

            #container ul > li.c_4{
               background: url(../img/contact_4.png) center;
               /*background: #1a1a1a;*/
            }

            #container ul > li.img1{
                background: url(../img/contact_img1.png) center;
            }

            #container ul > li.img2{
                height: 600px;
                background: url(../img/contact_img2.png) center;
            }

            #container ul > li.img3{
                background: url(../img/contact_img3.png) center;
            }
}




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

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


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

            #container ul > li{
                width: 50%;
                height: 220px;
                float: left;
            }

            #container ul li a {
                display: block;
                width: 100%;
                height: 190px;
                text-decoration: none;
            }


            #container ul > li h4 {
                padding: 30px;
                color: #efefef;
                font-weight: 300; font-size: 16pt; letter-spacing: 2px;
            }

            #container ul > li.contact_insta h4, #container ul > li.contact_support h4 {
                color: #1a1a1a;
            }


            #container ul > li.contact_fb {
                background: #1a1a1a url(../img/fb_icon.png) no-repeat 90% 85%;
                background-size: 45px;
                transition: all 0.3s ease 0s;
            }


            #container ul > li.contact_insta {
                background: #efefef url(../img/insta_icon2.png) no-repeat 90% 85%;
                background-size: 45px;
                transition: all 0.3s ease 0s;
            }


            #container ul > li.contact_support {
                background: #efefef url(../img/support_icon2.png) no-repeat 90% 85%;
                background-size: 45px;
                transition: all 0.3s ease 0s;
            }

            #container ul > li.contact_forum {
                background: #1a1a1a url(../img/forum_icon.png) no-repeat 90% 85%;
                background-size: 45px;
                transition: all 0.3s ease 0s;
            }

            /*hover*/
            #container ul > li.contact_fb:hover {
                background: #1a1a1a url(../img/fb_icon.png) no-repeat 90% 85%;
                background-size: 45px;
            }


            #container ul > li.contact_insta:hover {
                background: #efefef url(../img/insta_icon2.png) no-repeat 90% 85%;
                background-size: 45px;
            }

            #container ul > li.contact_insta:hover h4 {
                color: #1a1a1a;
            }

            #container ul > li.contact_support:hover {
                background: #efefef url(../img/support_icon2.png) no-repeat 90% 85%;
                background-size: 45px;
            }

            #container ul > li.contact_support:hover h4 {
                color: #1a1a1a;
            }

            #container ul > li.contact_forum:hover {
                background: #1a1a1a url(../img/forum_icon.png) no-repeat 90% 85%;
                background-size: 45px;
            }


            /*-------------------------------------------------------------------------*/

            #container ul li.contact {
                padding: 0; height: 200px;
            }

            #container ul li.contact ul {
                width: 100%; height: 200px; margin-top: 0;
            }

            #container ul > li.contact h5{
                color: #1a1a1a; font-weight: 300; text-align: center; 
                margin-top: 0; padding-top: 62px;
            }

            #container ul > li.contact p{
                color: #1a1a1a; font-weight: 300; text-align: center; 
                width: 100%;  margin: 0 auto; margin-top: 0;
            }

            #container ul > li > ul > li {
                width: 100%; height: 50%;
            }

            #container ul > li.c_1{ 
                width: 100%;
                /*background: url(../img/contact_11.png) no-repeat center;*/
                background: #c42127;
            }

            #container ul > li.c_2{
                width: 100%;
                /*background: url(../img/contact_44.png) no-repeat center;*/
                background: #efefef;
            }

            #container ul > li.c_3{
                width: 100%;
                /*background: url(../img/contact_11.png) no-repeat center;*/
                background: #c42127;
                position: relative;
            }

            #container ul > li.c_3 li.title {
                position: absolute;
                top: 0;
            }

            #container ul > li.c_3 li.add {
                position: absolute;
                bottom: 0;
            }

            #container ul > li.c_4{
                width: 100%;
                /*background: url(../img/contact_44.png) no-repeat center;*/
                background: #efefef;
                position: relative;
            }

            #container ul > li.c_4 li.title {
                position: absolute;
                top: 0;
            }

            #container ul > li.c_4 li.add {
                position: absolute;
                bottom: 0;
            }

            #container ul > li.img1{
                display: none;
            }

            #container ul > li.img2{
                display: none;
            }

            #container ul > li.img3{
                display: none;
            }


}