@charset "utf-8";


@media only screen and (min-width: 1200px) {
            /*main visual*/
            #main_vis { 
                width: 100%;
                height: 720px;
                background: url(../img/atlan/atlan_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 .about {
                height: 1050px;
                background: #1a1a1a url(../img/atlan/atlan_bg.png) no-repeat center 100%;
            }

            #container .about ul {
                width: 1200px;
                margin: 0 auto;
                text-align: center;
            }

            #container .about ul h4 {
                text-align: center;
                font-weight: 300;
                color: #efefef; 
                padding-top: 50px;
            }

            #container .about ul .text {
                width: 980px;
                margin: 0 auto;
                text-align: center;
                font-family: 'Titillium Web', sans-serif;
                font-size: 14pt;
                font-weight: 300;
                letter-spacing: 1px;
                line-height: 150%;
                color: #efefef; opacity: 0.9;
                padding-top: 20px;
            }

            #container .about .bgimg {
                display: none;
            }

            #container .app {
                height: auto;
                background: #c42127;;
            }

            #container .app div {
                width: 1200px; 
                margin: 0 auto;
                position: relative;
            }

            #container .app ul {
                width: 1200px;
                height: 400px;
                margin: 0 auto;
                position: absolute;
                top: -100px; z-index: 100;
            }

            #container .app ul li {
                width: 370px;
                height: 400px; 
                float: left; 
                position: relative; cursor: pointer;
            }

            #container .app ul li.kf1 {
                background: url(../img/atlan/atlan_kf1.jpg);
            }

            #container .app ul li.kf2 {
                background: url(../img/atlan/atlan_kf2.jpg);
            }

            #container .app ul li.kf3 {
                background: url(../img/atlan/atlan_kf3.jpg);
            }

            #container .app ul li h5 {
                font-size: 24pt;
                color: #1a1a1a; height: 400px;
                text-align: center; 
                padding-top: 45%;
                transition: all 0.3s ease 0s;
            }

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

            #container .app ul .hidden {
                display: none;
                color: #efefef;
                text-align: left; 
                position: absolute;
                width: 370px; height: 300px;
                top: 60px;
                left: 0;
                padding: 30px;  
            }

            #container .app ul .hidden p~p {
                margin-top: 12px;
            }

            #container .app ul li:hover h5 {
                background: #1a1a1a;
                color: #efefef;
                padding-top: 30px;
            }

            #container .app ul li:hover .hidden {
                display: block;

            }

            #container .app ul li:hover .hidden p {
                line-height: 22px; opacity: 0.8; font-size: 13pt; font-weight: 300;
            }

            #container .app img {
                display: block;
                width: 974px;  
                margin: 0 auto;
                padding-top: 350px;
                padding-bottom: 20px;
            }

            #container .app ul .hidden span{
                    display: block;
                    width: 20px;
                    height: 2px;
                    background-color: #c42127;
                    margin: 0 auto;
                    /*margin-top: 20px;*/
                    margin-bottom: 20px;
                }







            #container div.links {
                width: 1200px; 
                margin: 0 auto;
            }

            #container ul.links {
                width: 1200px;
            }

            #container ul.links > li {
                width: 600px;
                height: 190px;
                float: left;
            }

            #container ul.links > li > a{
                display: block;
                width: 600px;
                height: 190px;
                text-decoration: none;
            }

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

            #container ul.links > li h4{
                color: #1a1a1a;
                font-weight: 300;
                padding: 30px;
            }

            #container ul.links > li h4.nolink{
                color: #efefef;
            }


            #container ul.links > li.black {
                background-color: #1a1a1a;
            }

            #container ul.links > li.link_fb {
                background: #e7e7e7 url(../img/fb_icon2.png) no-repeat 90% 80%;
            }

            #container ul.links > li.link_support {
                background: #e7e7e7 url(../img/support_icon2.png) no-repeat 90% 80%;
            }

            #container ul.links > li.link_forum {
                background: #efefef url(../img/forum_icon2.png) no-repeat 90% 80%;
            }

            #container ul.links > li.link_appstore {
                background: #efefef url(../img/appstore_icon.png) no-repeat 90% 80%;
            }

            #container ul.links > li.link_google {
                background: #e7e7e7 url(../img/google_icon.png) no-repeat 90% 80%;
            }

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




@media only screen and (max-width: 1200px) {
            /*main visual*/
            #main_vis { 
                width: 100%;
                height: 600px;
                background: url(../img/atlan/atlan_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 .about {
                height: 950px;
                background: #1a1a1a url(../img/atlan/atlan_bg.png) no-repeat center 100%;
                background-size: 1500px;
            }

            #container .about ul {
                width: 100%;
                margin: 0 auto;
                text-align: center;
            }

            #container .about ul h4 {
                text-align: center;
                font-weight: 300;
                color: #efefef; 
                padding-top: 50px; 
            }

            #container .about ul .text {
                width: 100%;
                height: auto;
                margin: 0 auto;
                text-align: center;
                font-family: 'Titillium Web', sans-serif;
                font-size: 14pt;
                font-weight: 300;
                letter-spacing: 1px;
                line-height: 150%;
                color: #efefef; opacity: 0.9;
                padding-top: 20px;
                padding-left: 30px; padding-right: 30px;
            }

            #container .about .bgimg {
                display: none;
            }

            #container .app {
                height: auto;
                background: #c42127;;
            }

            #container .app div {
                width: 820px; 
                margin: 0 auto;
                position: relative;
            }

            #container .app ul {
                width: 820px; 
                height: 400px;
                margin: 0 auto;
                position: absolute;
                top: -100px; z-index: 100;
            }

            #container .app ul li {
                width: 820px;
                height: 200px; 
                background: #efefef; float: none;
                position: relative; cursor: pointer;
            }

            #container .app ul li.kf1 {
                background: url(../img/atlan/atlan_kf11.jpg);
            }

            #container .app ul li.kf2 {
                background: url(../img/atlan/atlan_kf22.jpg);
            }

            #container .app ul li.kf3 {
                background: url(../img/atlan/atlan_kf33.jpg);
            }


            #container .app ul li h5 {
                font-size: 24pt;
                color: #1a1a1a; height: 200px;
                text-align: center; 
                padding-top: 80px; 
                transition: all 0.3s ease 0s;
            }

            #container .app ul li~li {
                margin-left: 0;
                margin-top: 20px;
            }

            #container .app ul .hidden {
                display: none;
                color: #efefef;
                text-align: center; 
                position: absolute;
                width: 820px; height: 250px;
                top: 55px;
                left: 0;
                padding: 0; padding-top: 10px;  
            }

            #container .app ul .hidden p~p {
                margin-top: 3px;
            }

            #container .app ul li:hover h5 {
                background: #1a1a1a;
                color: #efefef;
                padding-top: 20px;
            }

            #container .app ul li:hover .hidden {
                display: block;

            }

            #container .app ul li:hover .hidden p {
                line-height: 22px; opacity: 0.8; font-size: 13pt; font-weight: 300;
            }

            #container .app img {
                display: block;
                width: 820px;  
                margin: 0 auto;
                padding-top: 590px;
                padding-bottom: 20px;
            }

            #container .app ul .hidden span{
                display: block;
                width: 20px;
                height: 2px;
                background-color: #c42127;
                margin: 0 auto;
                /*margin-top: 20px;*/
                margin-bottom: 5px;
            }




            #container div.links {
                width: 100%; 
                margin: 0 auto;
            }

            #container ul.links {
                width: 100%;
            }

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

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

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

            #container ul.links > li h4{
                color: #1a1a1a;
                font-weight: 300;
                padding: 30px;
            }

            #container ul.links > li h4.nolink{
                color: #efefef;
            }


            #container ul.links > li.black {
                background-color: #1a1a1a;
            }

            #container ul.links > li.link_fb {
                background: #e7e7e7 url(../img/fb_icon2.png) no-repeat 90% 80%;
            }

            #container ul.links > li.link_support {
                background: #e7e7e7 url(../img/support_icon2.png) no-repeat 90% 80%;
            }

            #container ul.links > li.link_forum {
                background: #efefef url(../img/forum_icon2.png) no-repeat 90% 80%;
            }

            #container ul.links > li.link_appstore {
                background: #efefef url(../img/appstore_icon.png) no-repeat 90% 80%;
            }

            #container ul.links > li.link_google {
                background: #e7e7e7 url(../img/google_icon.png) no-repeat 90% 80%;
            }

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





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

            #main_vis h3{
                padding-top: 180px;
            }
            
            /*contents*/
            #container {
                width: 100%;
            }

            #container .about { 
                height: auto;
                background: #1a1a1a;
            }

            #container .about ul {
                width: 100%; 
                margin: 0 auto; 
                text-align: center;
            }

            #container .about ul h4 {
                text-align: center;
                font-weight: 300;
                color: #efefef; 
                padding-top: 50px; 
            }

            #container .about ul .text {
                width: 100%;
                height: auto;
                margin: 0 auto;
                text-align: center;
                font-family: 'Titillium Web', sans-serif;
                font-size: 14pt;
                font-weight: 300;
                letter-spacing: 1px;
                line-height: 150%;
                color: #efefef; opacity: 0.9;
                padding-top: 20px;
                padding-left: 30px; padding-right: 30px;
            }

            #container .about .bgimg {
                display: block; width: 100%; padding: 0;
                margin-top: 30px;
            }

            #container .about .bgimg img {
                display: block; width: 100%;  margin: 0; 
            }


            #container .app {
                width: 100%;
                height: auto; 
                background: #c42127;
            }

            #container .app > div {
                width: 100%;
                height: auto;
                position: static;
                margin: 0 auto;
            }

            #container .app ul {
                width: 85%; 
                height: auto;
                position: static;
                margin: 0 auto; padding-top: 30px;
                z-index: 100; 
            }

            #container .app ul li {
                width: 100%; 
                height: auto; overflow: hidden;
                background: #1a1a1a; float: none;
                position: initial; cursor: initial;
            }

            #container .app ul li.kf1 {
                background: #1a1a1a;
            }

            #container .app ul li.kf2 {
                background: #1a1a1a;
            }

            #container .app ul li.kf3 {
                background: #1a1a1a;
            }


            #container .app ul li h5 {
                font-size: 16pt;
                color: #efefef; height: auto;
                text-align: left; 
                padding: 30px; padding-bottom: 0; 
                transition: none; 
            }

            #container .app ul li~li {
                margin-left: 0;
                margin-top: 30px;
            }

            #container .app ul .hidden {
                display: block;
                color: #efefef;
                text-align: left; 
                position: initial;
                width: 100%; height: auto;
                padding: 30px; padding-top: 10px;
            }

            #container .app ul .hidden p~p {
                margin-top: 10px;
            }

            #container .app ul li .hidden p {
                line-height: 22px; opacity: 0.8; font-size: 11pt; font-weight: 300;
                padding-left: 0; padding-right: 10px;
            }

            #container .app ul li:hover h5 {
                padding: 30px; padding-bottom: 0;
            }

            #container .app ul li:hover .hidden p {
                line-height: 22px; opacity: 0.8; font-size: 11pt; font-weight: 300;
                padding-left: 0; padding-right: 10px;
            }

            #container .app .muimg {
                width: 100%;
                margin-top: 30px;
            }

            #container .app .muimg img{
                display: block; 
                width: 100%; 
                margin: 0 auto;
                padding-top: 0;
                padding-bottom: 10px;
            }

            #container .app ul .hidden span{
                display: block;
                width: 100%;
                height: 2px;
                background-color: #c42127;
                margin: 0 auto;
                /*margin-top: 20px;*/
                margin-bottom: 10px;
                opacity: 0.3;
            }

            #container div.links {
                width: 100%; 
                margin: 0 auto;
            }

            #container ul.links {
                width: 100%;
            }

            #container ul.links > li {
                width: 100%;
                height: 140px;
                float: left;
            }

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

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

            #container ul.links > li h4{
                color: #1a1a1a;
                font-weight: 300; font-size: 20pt; letter-spacing: 2px;
                padding: 30px; width: 300px;
            }

            #container ul.links > li h4.nolink{
                color: #efefef;
            }


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

            #container ul.links > li.link_fb {
                background: #e7e7e7 url(../img/fb_icon2.png) no-repeat 95% 70%;
                background-size: 45px;
            }

            #container ul.links > li.link_support {
                background: #efefef url(../img/support_icon2.png) no-repeat 95% 70%;
                background-size: 45px;
            }

            #container ul.links > li.link_forum {
                background: #e7e7e7 url(../img/forum_icon2.png) no-repeat 95% 70%;
                background-size: 45px;
            }

            #container ul.links > li.link_appstore {
                background: #efefef url(../img/appstore_icon.png) no-repeat 95% 70%;
                background-size: 45px;
            }

            #container ul.links > li.link_google {
                background: #e7e7e7 url(../img/google_icon.png) no-repeat 95% 70%;
                background-size: 45px;
            }

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