@charset "utf-8";

.caution-wrap {margin: 0 auto 95px; width: 100%; max-width: 500px; }
.caution-wrap .caution-head {margin: 0 auto; width: 70%; height: 20px; background: #b5b5b5; border-radius: 0 0 15px 15px;}

.caution-wrap .logo-img {text-align: center; margin-top: 40px;}
.caution-wrap .logo-img img {width: 70%;}

.caution-wrap .caution-list {display: flex; margin-top: 40px;}
.caution-wrap .caution-list > .step1 {margin-right: 20px;}
.caution-wrap .caution-list > .step2 {flex:1;}
.caution-wrap .caution-list > .step1 > ul {display: flex; flex-direction:column;}
.caution-wrap .caution-list > .step1 > ul > li {display: flex; padding: 0 15px 0 5px; justify-content:center; align-items:center; border: 1px solid #eee; border-radius:10px;
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; cursor: pointer;}
.caution-wrap .caution-list > .step1 > ul > li:not(:first-child) {margin-top: 12px;}
.caution-wrap .caution-list > .step1 > ul > li.on {background: #c7e8f9;}

.caution-wrap .caution-list > .step2 > ul {display: none; flex-direction:column;}
.caution-wrap .caution-list > .step2 > ul.on {display: flex;}
.caution-wrap .caution-list > .step2 > ul > li {text-align: center; border: 1px solid #c7e8f9; border-radius:10px; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; }
.caution-wrap .caution-list > .step2 > ul > li:not(:first-child) {margin-top: 10px;}
.caution-wrap .caution-list > .step2 > ul > li a {display: inline-block; padding: 8px 5px; width: 100%;}

.caution-quick {position: fixed; bottom: 0; left: 0; width: 100%;}
.caution-quick > ul {display: flex;}
.caution-quick > ul > li {flex:1; background: #2580ca;}
.caution-quick > ul > li a {display: flex; padding: 2px; width: 100%; height: 100%; flex-direction:column; justify-content:center; align-items:center; text-align: center;}
.caution-quick > ul > li a img {max-width: 50px; width: 100%;}
.caution-quick > ul > li a p {margin-top: 5px; white-space: pre-line; color: #fff;}

.caution-top {position: fixed; padding: 15px; bottom: 114px; right: 10px; background: #eee; border-radius:15px; cursor: pointer; opacity: 0.8;}

.caution-box {background: #eee; padding: 15px; text-align: center;}
.caution-box p {white-space: pre-line; font-family:"nanumSQ"; transform: skew(-0.1deg);}

.caution-back {margin: 20px 0; width: 100%; background: #eee; text-align: center;}
.caution-back a {display: inline-block; padding: 15px 0; cursor: pointer;}
.caution-back a ul > li:first-child {margin-right: 10px;}
.caution-back img {max-width: 30px; width: 100%;}

.caution-tit {text-align: center;}
.caution-tit > div {position: relative;}
.caution-tit > div:before{position: absolute; content: ''; left: 50%; top: 50%; transform:translate(-50%, -50%); width: 100%; height: 2px; background: #333;}
.caution-tit > div h3 {display: inline-block; background: #fff; padding: 5px 10px; color: #2580ca;}

.caution-content {padding: 20px;}
.caution-content p {font-family:"nanumSQ"; transform: skew(-0.1deg); white-space: pre-line;}
.caution-content > ul {display: flex;}
.caution-content > ul:not(:first-child) {margin-top: 10px;}
.caution-content > ul > li:first-child {margin-right: 10px;}
.caution-content > ul > li:first-child p {color: #2580ca;}

.caution-sub p {padding-bottom: 30px; text-align: center; line-height: 1.3; font-family: 'Cafe24Shiningstar'; transform: skew(-0.1deg); white-space: pre-line;}

.caution-check-list {margin-top: 20px;}
.caution-check-list li{position: relative;padding-left: 40px;}
.caution-check-list li:before{content: '';position: absolute; top: -10px;  left: 0; width: 35px; height: 35px; background: url(../img/caution/check.svg) center/cover no-repeat;}
.caution-check-list li:not(:first-child) {margin-top: 15px;}
.caution-check-list li p {font-family:"nanumSQB"; transform: skew(-0.1deg);}

.sleep-caution {margin-top: 20px; text-align: center;}
.sleep-caution p {font-family:"nanumSQB"; transform: skew(-0.1deg); white-space: pre-line; padding: 10px 20px; border: 1px solid #2580ca; border-radius:20px;}

@media screen and (max-width: 425px) {
.caution-top {bottom: 100px; right: 5px;}
.caution-top img {max-width: 25px;}
} 

@media screen and (max-width: 320px) {
.caution-quick > ul > li a img {max-width: 45px;}
.caution-quick > ul > li a p {font-size: 11px;}
}