@charset "utf-8";

/* RESET */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,
em,img,ins,kbd,q,samp,small,strong,sub,sup,var,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,
caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,
menu,nav,section,summary,time,mark,audio,video,input{ margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent;color:#333;font-style:normal; }
body{line-height:1.2;word-break:break-all}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav,ul,li{list-style:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none;color:#333}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #f2f2f2;margin:15px 0 20px;padding:0}
input,select{vertical-align:middle}
html{font-size:13px}
caption{overflow:hidden;visibility:hidden;width:0;height:0;font-size:1px}
img { vertical-align:top; }
html,body{height:100%;}
*{font-family: 'Malgun Gothic', sans-serif;}

.text-hidden {position: absolute;text-indent: -9999em;font-size: 0;}
img {max-width: 100%;}

#wrap{width: 100%; margin: 0 auto; position: relative;}
.container, .foot {width: 100%;}
.inner {position: relative; width: 100%; max-width: 720px; margin: 0 auto;}

section {position: relative;}
.main {background: linear-gradient(to bottom, #fce6a9, #fff8d2, #fff9d6);}
.s1 {background: linear-gradient(to bottom, #dcfae2 10%, #faf9d8, #fff9d7);}
.s2 {background: linear-gradient(to bottom, #f3e5fc 15%, #e7cdf3, #e7cdf3);}

.tab-wrap {overflow: hidden;}
.tab-wrap a {float: left; display: block; width: 50%;}

button {display: block; padding: 0; border: 0; background: transparent; font-size: 0; cursor: pointer;}
section button {position: absolute; left: 50%; width: 92.2%; transform: translateX(-50%);}
.main .btn {bottom: 4.1%; height: 5.8%;}
.s1 .btn {bottom: 3.2%; height: 4.6%;}
.s2 .btn {bottom: 2.5%; height: 3.5%;}

footer {background: #303030;}

.btn-floating {overflow: hidden; position: fixed; left: 0; bottom: 0; width: 100%; z-index: 99;}
.btn-floating .btn {float: left; width: 100%; height: 100%; background: #ff5a01;}
.btn-floating .btn img {max-width: 720px; width: 100%;}

#layer-pop {display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5); z-index: 999;}
#layer-pop .layer-container {position: absolute; left: 50%; top: 50%; width: 630px; margin-top: -220px; transform: translateX(-50%);}
#layer-pop .layer-container .btn-close {display: block; position: absolute; left: 50%; bottom: -18%; width: 17.462%; height: 37.805%; border-radius: 50%; background: #fff; transform: translateX(-50%);}
#layer-pop .layer-container .btn-close::before,
#layer-pop .layer-container .btn-close::after {position: absolute; left: 50%; top: 50%; content: ''; width: 7%; height: 73%; transform-origin: left top;}
#layer-pop .layer-container .btn-close::before {transform: rotate(-45deg) translate(-50%, -50%);}
#layer-pop .layer-container .btn-close::after {transform: rotate(45deg) translate(-50%, -50%);}
#layer-pop.layer-pop1 .btn-close::before,
#layer-pop.layer-pop1 .btn-close::after {background: #ff5a01;}
#layer-pop.layer-pop2 .btn-close::before,
#layer-pop.layer-pop2 .btn-close::after {background: #067c6d;}
#layer-pop.layer-pop3 .btn-close::before,
#layer-pop.layer-pop3 .btn-close::after {background: #6402af;}

@media (max-width: 720px) {
  #layer-pop .layer-container {width: 90%;}
}