* {margin: 0; padding: 0;}
a {text-decoration: none;}
ul, li {list-style: none;}
html, body {font-family: 'Noto Sans KR', sans-serif; height: 100%;}
.black {color: #000 !important;}
.red {color: #e74c3c !important;}
.bold {font-weight: bold !important;}
.check {position: absolute; left: 0; bottom: 30px; z-index:1;}

.container {display: flex; flex-direction: column; height: 100%;}

/* Wrapper */
.wrapper {position: relative; width: 100%; height: 100vh; max-width: 1200px; margin: 50px auto 0px; overflow: auto;}
.wrapper > ul {width: 100%; display: flex; flex-wrap: wrap; align-items: center;}
.wrapper > ul > li {position: relative; width: 24%; height: 200px; background-color: #fff; border-radius: 10px; text-align: center; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; margin-right: 1%}
.wrapper > ul > li:nth-of-type(4n) {margin-right: 0;}
.wrapper > ul > li > a {display: block; width: 100%; height: 100%; box-sizing: border-box; padding-top: 60px;}
.wrapper > ul > li > a > img {width: 50px;}
.wrapper > ul > li > a > span {display: block; color: #fff; font-size: 22px; letter-spacing: -1px; font-weight: bold; margin-top: 5px;}
.wrapper > .supercharger {display: none; width: 100%; height: 100%;}
.wrapper > .supercharger > iframe {width: 100%; height: 100%;}

.quick {position: absolute; right: 20px; top: 20px; display: flex; flex-direction: row; z-index: 1;}
.quick > button {display: inline-block; width: 30px; height: 30px; border-radius: 50%; border: 0; background-color: #e74c3c; color: #fff; cursor: pointer;}
.quick > button:nth-of-type(1) {background-color: #27ae60; margin-right: 5px;}
/* Footer */
footer {position: relative; left: 0; bottom: 0; width: 100%; height: 150px; background-color: #e5e5e5; display: flex; justify-content: center; align-items: center;}
footer > ul {max-width: 600px; width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-between;}
footer > ul > li {position: relative; width: 20%; height: 100%; box-sizing: border-box;}
footer > ul > li > a {display: block; text-align: center; width: 100%; height: 100%; box-sizing: border-box; color: #333; transition: color 0.3s ease-in-out; padding-top: 35px;}
footer > ul > li.active > a {color: #e74c3c}
footer > ul > li > a:hover {color: #e74c3c;}
footer > ul > li > a > span {display: block; font-size: 18px; letter-spacing: -1px; font-weight: bold; margin-top: 5px;}

.mylink__add {display: inline-block; border-radius: 50%; width: 70px; height: 70px; position: absolute; left: 50%; margin-left: -35px; bottom: 30px; color: #fff; font-size: 18px; background-color: #e74c3c; line-height: 70px; text-align: center;}
.modal {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.6); z-index: 89;}
.modal > .form {position: absolute; width: 400px; height: 610px; left: 50%; top: 50%; margin-left: -200px; margin-top: -305px; z-index: 90; background-color: #fff;}
.modal > .form > .form__head {display: flex; box-sizing: border-box; padding: 10px 15px; justify-content: space-between; border-bottom: 1px solid #e3e3e3;}
.modal > .form > .form__head > h1 {font-size: 18px; letter-spacing: -1px;}
.modal > .form > .form__head > .form__times {color: #000;}
.modal > .form > .form__body {box-sizing: border-box; padding: 10px 15px; display: flex; flex-wrap: wrap; flex-direction: column;}
.modal > .form > .form__body > .form__group {position: relative; width: 100%; min-height: 40px; margin-bottom: 10px;}
.modal > .form > .form__body > .form__group > input {width: 100%; height: 40px; border: 1px solid #e3e3e3; padding: 0px 10px; box-sizing: border-box; outline: 0;}
.modal > .form > .form__body > .form__group > select {width: 100%; height: 40px; border: 1px solid #e3e3e3; padding: 0px 10px; box-sizing: border-box; outline: 0;}
.modal > .form > .form__body > .form__group > .preview {width: 100%; height: 200px; text-align: center; border-radius: 10px; display: flex; justify-content: center; align-items: center; flex-direction: column; box-sizing: border-box; transition: all 0.3s ease-in-out;}
.modal > .form > .form__body > .form__group > .preview > h1 {transition: all 0.3s ease-in-out;}
.modal > .form > .form__body > .form__group > .preview > span {transition: all 0.3s ease-in-out;}
.modal > .form > .form__body > .form__group > .form__btn {width: 100%; height: 40px; border: 0; background-color: #e74c3c; color: #fff; text-align: center;}

.form__flex {display: flex; flex-wrap: wrap;}
.form__p {font-size: 14px; letter-spacing: -1px; width: 100%; margin-bottom: 10px;}
.form__radio {position: relative; margin-right: 5px;}
.form__radio:last-of-type {margin-right: 0;}
#mylinkAdd .form__radio > label {display: inline-block; width: 20px; height: 20px; box-sizing: border-box; border-radius: 50%;}
#mylinkAdd .form__radio > label[for="form__bg__01"], #mylinkAdd .form__radio > label[for="form__border__01"], #mylinkAdd .form__radio > label[for="form__color__01"] {background-color: white;}
#mylinkAdd .form__radio > label[for="form__bg__02"], #mylinkAdd .form__radio > label[for="form__border__02"], #mylinkAdd .form__radio > label[for="form__color__02"] {background-color: black;}
#mylinkAdd .form__radio > label[for="form__bg__03"], #mylinkAdd .form__radio > label[for="form__border__03"], #mylinkAdd .form__radio > label[for="form__color__03"] {background-color: red;}
#mylinkAdd .form__radio > label[for="form__bg__04"], #mylinkAdd .form__radio > label[for="form__border__04"], #mylinkAdd .form__radio > label[for="form__color__04"] {background-color: orange;}
#mylinkAdd .form__radio > label[for="form__bg__05"], #mylinkAdd .form__radio > label[for="form__border__05"], #mylinkAdd .form__radio > label[for="form__color__05"] {background-color: yellow;}
#mylinkAdd .form__radio > label[for="form__bg__06"], #mylinkAdd .form__radio > label[for="form__border__06"], #mylinkAdd .form__radio > label[for="form__color__06"] {background-color: green;}
#mylinkAdd .form__radio > label[for="form__bg__07"], #mylinkAdd .form__radio > label[for="form__border__07"], #mylinkAdd .form__radio > label[for="form__color__07"] {background-color: blue;}
#mylinkAdd .form__radio > label[for="form__bg__08"], #mylinkAdd .form__radio > label[for="form__border__08"], #mylinkAdd .form__radio > label[for="form__color__08"] {background-color: navy;}
#mylinkAdd .form__radio > label[for="form__bg__09"], #mylinkAdd .form__radio > label[for="form__border__09"], #mylinkAdd .form__radio > label[for="form__color__09"] {background-color: purple;}
#mylinkAdd .form__radio > input[type="radio"]:checked+label {border: 2px solid #e74c3c;}
#mylinkAdd .form__radio > input[type="radio"] {width: 0px; height: 0px; position: absolute; left: 0; top: 0;}

#mylinkEdit .form__radio > label {display: inline-block; width: 20px; height: 20px; box-sizing: border-box; border-radius: 50%;}
#mylinkEdit .form__radio > label[for="fform__bg__01"], #mylinkEdit .form__radio > label[for="fform__border__01"], #mylinkEdit .form__radio > label[for="fform__color__01"] {background-color: white;}
#mylinkEdit .form__radio > label[for="fform__bg__02"], #mylinkEdit .form__radio > label[for="fform__border__02"], #mylinkEdit .form__radio > label[for="fform__color__02"] {background-color: black;}
#mylinkEdit .form__radio > label[for="fform__bg__03"], #mylinkEdit .form__radio > label[for="fform__border__03"], #mylinkEdit .form__radio > label[for="fform__color__03"] {background-color: red;}
#mylinkEdit .form__radio > label[for="fform__bg__04"], #mylinkEdit .form__radio > label[for="fform__border__04"], #mylinkEdit .form__radio > label[for="fform__color__04"] {background-color: orange;}
#mylinkEdit .form__radio > label[for="fform__bg__05"], #mylinkEdit .form__radio > label[for="fform__border__05"], #mylinkEdit .form__radio > label[for="fform__color__05"] {background-color: yellow;}
#mylinkEdit .form__radio > label[for="fform__bg__06"], #mylinkEdit .form__radio > label[for="fform__border__06"], #mylinkEdit .form__radio > label[for="fform__color__06"] {background-color: green;}
#mylinkEdit .form__radio > label[for="fform__bg__07"], #mylinkEdit .form__radio > label[for="fform__border__07"], #mylinkEdit .form__radio > label[for="fform__color__07"] {background-color: blue;}
#mylinkEdit .form__radio > label[for="fform__bg__08"], #mylinkEdit .form__radio > label[for="fform__border__08"], #mylinkEdit .form__radio > label[for="fform__color__08"] {background-color: navy;}
#mylinkEdit .form__radio > label[for="fform__bg__09"], #mylinkEdit .form__radio > label[for="fform__border__09"], #mylinkEdit .form__radio > label[for="fform__color__09"] {background-color: purple;}
#mylinkEdit .form__radio > input[type="radio"]:checked+label {border: 2px solid #e74c3c;}
#mylinkEdit .form__radio > input[type="radio"] {width: 0px; height: 0px; position: absolute; left: 0; top: 0;}

.mylink__ready {text-align: center; letter-spacing: -1px;}
.mylink__ready > h1 {margin-bottom: 10px;}

.ifr {width: 1px; height: 1px; position: absolute; bottom: 0; left: 0;}

@media (max-width: 640px) {
    .wrapper {height: auto; padding-bottom: 100px;}
    .wrapper > ul {padding: 0px 10px; box-sizing: border-box;}
    .wrapper > ul > li {width: 95%; margin-right: 0;}

    footer {position: fixed; height: auto;}
    footer > ul > li > a {padding: 10px 0px;}
    footer > ul > li > a > span {font-size: 14px;}
    .mylink__add {bottom: 0;}
    .modal > .form {width: 90%; margin-left: -45%; margin-top: -275px;}
    .weather__info {max-width: 95% !important; margin:0 auto;}
}

@media (prefers-color-scheme: light) {
    body {background-color: #fff;}
    .mylink__ready > h1 {color: #000;}
    .mylink__ready > p {color: #000;}
    .date__info {border: 1px solid #000;}
    .date__info > a > p {color: #000 !important;}
    .weather__info {background-color:rgba(0, 0, 0, 0.5) !important}
}

@media (prefers-color-scheme: dark) {
    body {background-color: #333;}
    .mylink__ready > h1 {color: #fff;}
    .mylink__ready > p {color: #fff;}
    .date__info > a > p {color: #fff !important;}
}