@charset "utf-8";

body, html { height: 100%; min-height: 100%; overflow: hidden !important; touch-action: none; position: fixed; }

.main .titleArea { background: none; box-shadow: none; height: auto; border: none; }
.main #contents { width: 100%; height: 100%; position: relative; }
.main .main_bg { width: 1200px; position: absolute; top: 110px; left: 50%; transform: translateX(-50%); }
.main .app_wrap { position: absolute; top: 116px; left: 50.5%; transform: translateX(-50%); display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: space-around; align-items: center; margin: auto; width: 1500px; }
.main .app_wrap .app_box { border-radius: 30px; width: 165px; height: 165px; text-align: center; cursor: pointer; background: url(../images/common/app_img1.png) no-repeat; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-position: center center; }
.app_border { width: 180px; height: 180px; margin-right: 10px; margin-bottom: 140px; background: #fff; border-radius: 35px; position: relative; }
.app_border:hover { background-image: linear-gradient(45deg, #44a5df, #d37cf7); }
.app_box>p { font-size: 33px; font-family: 'NotoM'; position: absolute; bottom: -50px; left: 50%; transform: translateX(-50%); width: 100%; letter-spacing: -1px; }
.main .titleArea h1 { background: transparent; position: absolute; top: 66px; }
.main .app_bg { background: #fff4e7; width: 1600px; height: 750px; position: absolute; top: 160px; left: 50%; transform: translateX(-50%); border-radius: 50px; border: 12px solid #d9c2b8; }
#app_border_blank, #app_blank { background: none; border: none; }
#app_box1 { background-image: url(../images/common/app_img1.png); background-color: #fff; background-size: 108%; background-position: center -14px; }
#app_box2 { background-image: url(../images/common/app_img2.png); background-color: #fff; background-size: 181%; background-position: center -18px; }
#app_box3 { background-image: url(../images/common/app_img3.png); background-color: #fff9ce; background-size: 284px; background-position: -9px 17px; }
#app_box4 { background-image: url(../images/common/app_img4.png); background-color: #b3e7ba; background-size: 42px; background-position: center bottom; }
#app_box5 { background-image: url(../images/common/app_img5.png); background-color: #dff3e6; background-size: 146px; background-position: center 37px; }
#app_box6 { background-image: url(../images/common/app_img6.png); background-color: #d7e3f7; background-size: 159px; background-position: center 16px; }
#app_box7 { margin-right: 0; background-image: url(../images/common/app_img7.png); background-color: #9f9f9f; background-size: 89px; background-position: center center; }
#app_box8 { background-image: url(../images/common/app_img8.png); background-color: #edefff; background-size: 150px; background-position: center center; }
#app_box9 { background-image: url(../images/common/app_img9.png); background-color: #e2f7ff; background-size: 23px; background-position: center 10px; }
#app_box10 { background-image: url(../images/common/app_img10.png); background-color: #ffdcdc; background-size: 363px; background-position: 13px center; }
#app_box11 { background-image: none; background-color: #e8daff; }
#app_box12 { background-image: none; background-color: #c6d2f5; }
#app_box13 { margin-right: 0; background-image: url(../images/common/app_img13.png); background-color: #bfebe3; background-size: 97px; background-position: center 10px; }
#app_box11>p { width: 220px; }
#app_box12>p { width: 170px; }
.app_title { position: absolute; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; bottom: initial !important; font-family: 'CookieRunR' !important; color: #6900c5; font-size: 36px !important; }
#app_border12 .app_title { color: #2b2d91; }
.main .close { position: absolute; top: 90px; right: 170px; }
.main .footer>img { display: inline-block; vertical-align: middle; }
.main .footer>p:after { content: '|'; position: absolute; top: 0; left: -10px; font-family: 'NotoM'; }
.main .footer>p { display: inline-block; vertical-align: middle; position: relative; margin-left: 20px; font-family: 'NotoM'; }
.main .footer { position: absolute; bottom: 60px; left: 134px; }