@charset "utf-8";



@media only screen and (min-width: 1200px) {
            /*main visual*/
            #main_vis { 
                width: 100%;
                height: 720px;
                background: url(../img/lostfantasy/LF_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;
            }
            #main_vis .title_logo {
                padding-top: 9em;

            }


            #main_vis div.links {
                width: 100%; 
                margin: 0 auto;
            }
            #main_vis ul.links {
                float: right;
                position: relative;
                left: -50%;
            }

            #main_vis ul.links > li {
                width: 330px;
                height: 93px;
                float: left;
                position: relative;
                left: 50%;
                margin-top: 150px;
                margin-left: 4px;
                margin-right: 4px;
            }
            #main_vis ul.links > li > a{
                display: block;
                width: 330px;
                height: 93px;
                text-decoration: none;
            }


            #main_vis ul.links > li.link_google2 {
                background: url(../img/Button/btn_down_goolge.png) no-repeat;
            }
            #main_vis ul.links > li.link_appstore2 {
                background: url(../img/Button/btn_down_apple.png) no-repeat;
            }

            #main_vis ul.links > li.link_google2 > a:hover{
                background: url(../img/Button/btn_down_goolge_hover.png) no-repeat;
            }
            #main_vis ul.links > li.link_appstore2 > a:hover{
                background: url(../img/Button/btn_down_apple_hover.png) no-repeat;
            }





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

            }

            #container .title_logo img{
                width: 260px;
                margin: 1.1em;
            }

            #container .about {
                height: 1220px;
                background: #3f6d84 url(../img/lostfantasy/LF_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: 1020px;
                margin: 0 auto;
                text-align: center;
                font-family: 'Noto Sans', 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: #becdd6 url(../img/lostfantasy/LF_bg_footer.jpg) no-repeat center 100%;
                background-size: 100%;
            }

            #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: 376px;
                height: 387px; 
                float: left; 
                position: relative; cursor: pointer;

            }

            #container .app ul li.kf1 {
                background: url(../img/lostfantasy/LF_kf1.png);
            }

            #container .app ul li.kf2 {
                background: url(../img/lostfantasy/LF_kf2.png);
            }

            #container .app ul li.kf3 {
                background: url(../img/lostfantasy/LF_kf3.png);
            }

            #container .app ul li h5 {
                font-size: 26pt;
                letter-spacing:0.3px;
                color: #ffffff;
                text-shadow: 0px 0px 10px #3f6d84;
                font-weight: 500; 
                height: 387px;
                text-align: center; 
                padding-top: 45%;
                transition: all 0.3s ease 0s;
            }

            #container .app ul li .pd38{
                padding-top: 38%;
                padding-left: 5px;
                padding-right: 5px;
            }

            #container .app ul li .pd40{
                padding-top: 40px;
            }

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

            #container .app ul .hidden {
                display: none;
                color: #fae8d9;
                text-align: center; 
                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: url(../img/lostfantasy/LF_kf4.png);
                color: #efefef;
                padding-top: 30px;
                text-shadow: none;
            }

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

            }

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

            #container .app img {
                display: block;
                width: 939px; 
                margin: 0 auto;
                padding-top: 370px;
                padding-bottom: 180px;
            }

    







            #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 #034ea2;
            }

            #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: #efefef 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%;
            }

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

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

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

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




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

            #main_vis .title_logo {
                    width: 500px;
                    padding-top: 9em;
                }


            #main_vis div.links {
                width: 100%; 
                margin: 0 auto;
            }
            #main_vis ul.links {
                float: right;
                position: relative;
                left: -50%;
            }

            #main_vis ul.links > li {
                width: 330px;
                height: 93px;
                float: left;
                position: relative;
                left: 50%;
                margin-top: 65px;
                margin-left: 4px;
                margin-right: 4px;
            }
            #main_vis ul.links > li > a{
                display: block;
                width: 330px;
                height: 93px;
                text-decoration: none;
            }


            #main_vis ul.links > li.link_google2 {
                background: url(../img/Button/btn_down_goolge.png) no-repeat;
            }
            #main_vis ul.links > li.link_appstore2 {
                background: url(../img/Button/btn_down_apple.png) no-repeat;
            }

            #main_vis ul.links > li.link_google2 > a:hover{
                background: url(../img/Button/btn_down_goolge_hover.png) no-repeat;
            }
            #main_vis ul.links > li.link_appstore2 > a:hover{
                background: url(../img/Button/btn_down_apple_hover.png) no-repeat;
            }



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

            #container .title_logo img{
                width: 230px;
                margin: 1.5em;
            }

            #container .about {
                height: 970px;
                background: #3f6d84 url(../img/lostfantasy/LF_bg.png) no-repeat center 100%;
                background-size: 900px;
            }

            #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: 'Noto Sans', 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: #becdd6 url(../img/lostfantasy/LF_bg_footer.jpg) no-repeat center 100%;
                background-size: 100%;
            }

            #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: 826px;
                height: 207px;  
                background: #efefef; float: none;
                position: relative; cursor: pointer;
            }

            #container .app ul li.kf1 {
                background: url(../img/lostfantasy/LF_kf11.png);
            }

            #container .app ul li.kf2 {
                background: url(../img/lostfantasy/LF_kf22.png);
            }

            #container .app ul li.kf3 {
                background: url(../img/lostfantasy/LF_kf33.png);
            }


            #container .app ul li h5 {
                font-size: 24pt;
                font-weight: 500;
                color: #ffffff; height: 200px;
                text-shadow: 0px 0px 10px #3f6d84;
                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: url(../img/lostfantasy/LF_kf44.png);
                color: #efefef;
                padding-top: 20px;
                font-weight: 500;
            }

            #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: 500;
            }

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





            #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 #034ea2;
            }

            #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: #efefef 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%;
            }

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

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

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


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





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

            #main_vis .title_logo{
                display: none;
            }

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

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

            #main_vis div.links {
                width: 530px; 
                margin: 0 auto;
                display: inline-block;
            }
            #main_vis ul.links {
                float: right;
                position: relative;
                left: -50%;
            }

            #main_vis ul.links > li {
                width: 172px;
                height: 82px;
                float: left;
                position: relative;
                left: 50%;
                margin-top: 322px;
            }
            #main_vis ul.links > li > a{
                display: block;
                width: 172px;
                height: 82px;
                text-decoration: none;
            }


            #main_vis ul.links > li.link_google2 {
                background: url(../img/Button/btn_down_goolge_m.png) no-repeat;
            }
            #main_vis ul.links > li.link_appstore2 {
                background: url(../img/Button/btn_down_apple_m.png) no-repeat;
            }

            #main_vis ul.links > li.link_google2 > a:hover{
                background: url(../img/Button/btn_down_goolge_m.png) no-repeat;
            }
            #main_vis ul.links > li.link_appstore2 > a:hover{
                background: url(../img/Button/btn_down_apple_m.png) no-repeat;
            }



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

            #container .about { 
                height: auto;
                background: #3f6d84;
            }

            #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: 'Noto Sans', 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: #becdd6 url(../img/lostfantasy/LF_bg_footer.jpg) no-repeat center 100%;
                background-size: 100%;
            }

            #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: #6796ab;
                float: none;
                position: initial; cursor: initial;
            }

            #container .app ul li.kf1 {
                background: #6796ab url(../img/bg_dot.png);
                border-radius: 16px;
            }

            #container .app ul li.kf2 {
                background: #6796ab url(../img/bg_dot.png);
                border-radius: 16px;
            }

            #container .app ul li.kf3 {
                background: #6796ab url(../img/bg_dot.png);
                border-radius: 16px;
            }

            #container .app ul li:hover h5 {
                background: #6796ab url(../img/bg_dot.png);
            }


            #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: #fff8ea;
                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: 21px; opacity: 0.8; font-size: 12pt; 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: 21px; opacity: 0.8; font-size: 12pt; font-weight: 300;
                padding-left: 0; padding-right: 10px;
            }

            #container .app .muimg {
                width: 100%;
                padding: 3em;
                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: #034ea2;
                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 #034ea2;
            }

            #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: #e7e7e7 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;
            }
            #container ul.links > li.link_tw {
                background: #efefef url(../img/twitter_icon2.png) no-repeat 95% 70%;
                background-size: 45px;
            }

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

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


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



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

            #main_vis .title_logo{
                display: none;
            }

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

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

            #main_vis div.links {
                width: 100%; 
                margin: 0 auto;
                display: inline-block;
            }
            #main_vis ul.links > li > a{
                display: block;
                width: 100%;
                height: 68px;
                text-decoration: none;
            }



            #main_vis ul.links > li.link_google2 {
                background: url(../img/Button/btn_down_goolge_m.png) no-repeat 100%;
                margin-left: 0;   
            }
            #main_vis ul.links > li.link_appstore2 {
                background: url(../img/Button/btn_down_apple_m.png) no-repeat 100%;
                width: 172px;
            }

            #main_vis ul.links > li.link_google2 > a:hover{
                background: url(../img/Button/btn_down_goolge_m.png) no-repeat;
            }
            #main_vis ul.links > li.link_appstore2 > a:hover{
                background: url(../img/Button/btn_down_apple_m.png) no-repeat;
            }

        }



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

        #main_vis ul.links > li {
                margin-top: 366px;
            }

        #main_vis ul.links > li.link_google2 {
                background: url(../img/Button/btn_down_goolge_m2.png) no-repeat 100%;
                margin-left: 0;
                width: 92px;
                height: 93px; 
            }
            #main_vis ul.links > li.link_appstore2 {
                background: url(../img/Button/btn_down_apple_m2.png) no-repeat 100%;
                width: 92px;
                height: 93px; 
            }

            #main_vis ul.links > li.link_google2 > a:hover{
                background: url(../img/Button/btn_down_goolge_m2.png) no-repeat;
            }
            #main_vis ul.links > li.link_appstore2 > a:hover{
                background: url(../img/Button/btn_down_apple_m2.png) no-repeat;
            }

            #main_vis ul.links > li > a{
                display: block;
                width: 92px;
                height: 93px; 
                text-decoration: none;
            }



    }