html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video { margin: 0; padding: 0; border: 0; vertical-align: center; font-weight: normal; font-size: inherit; line-height: 1.5; } 
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section { display: block; } 
body { line-height: 1; font-family: 'NanumSquareNeo-bRg'; } 
ol,
ul { list-style: none; } 
blockquote,
q { quotes: none; } 
blockquote:before,
blockquote:after,
q:before,
q:after { content: ''; content: none; } 
table { border-collapse: collapse; border-spacing: 0; } 
input { border: 0; outline: 0; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } 
/* IE10 이상에서 input box 에 추가된 지우기 버튼 제거 */
input::-ms-clear { display: none; } 

input[type='number']::-webkit-inner-spin



/* Select box 스타일 초기화 */
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(/images/select_icon.png) 95% 50% no-repeat; background-size: 10px; cursor: pointer; } 
/* IE 에서 Select box 화살표 제거 */
select::-ms-expand { display: none; } 

/* 크롬의 경우 */
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoraion { display: none; } 

html { overflow-x: hidden; height: 100%; } 
img { display: block; } 
* { box-sizing: border-box; font-family: 'pre_M'; } 
a { color: #000; text-decoration: none; } 

@font-face {
    font-family: "pre_L";
    src: url("../font/Pretendard-Light.woff2") format("woff2");
    font-weight: normal;
}
@font-face {
    font-family: "pre_R";
    src: url("../font/Pretendard-Regular.woff2") format("woff2");
    font-weight: normal;
}
@font-face {
    font-family: "pre_M";
    src: url("../font/Pretendard-Medium.woff2") format("woff2");
    font-weight: normal;
}
@font-face {
    font-family: "pre_SB";
    src: url("../font/Pretendard-SemiBold.woff2") format("woff2");
    font-weight: normal;
}

@font-face {
    font-family: "pre_B";
    src: url("../font/Pretendard-Bold.woff2") format("woff2");
    font-weight: normal;
}



.container {width: 100%; height: auto; min-height: 100vh; background: #F0FAF7; display: flex; align-items: center; flex-direction: column; padding: 0 0 100px 0;}
.container .head {margin: 90px 0 0 0;}
.container .head img {width: 207px; margin: 0 auto;}
.container .head h1 {text-align: center; font-size: 39px; font-family: pre_B; transform: translateY(-20px);}
.container .boxwrap {background: #fff; padding: 71px 60px; border-radius: 60px; margin: 30px 0 0 0;}
.container .boxwrap .top {text-align: center;}
.container .boxwrap .top .text .title {font-family: 'pre_B'; font-size: 25px; color: #111;}
.container .boxwrap .top .text .sub {font-size: 18px; color: #505050;}
.container .boxwrap .top .btnwrap {display: flex; gap: 50px; margin: 30px 0 0 0;}
.container .boxwrap .top .btnwrap a p {font-size: 18px; font-family: 'pre_B';}
.container .boxwrap .top .btnwrap a img {width: 180px; margin: 10px 0 0 0;}
.container .boxwrap .bottom {text-align: center; margin: 80px 0 0 0;}
.container .boxwrap .bottom .text .title {font-family: 'pre_B'; color: #111; font-size: 22px;}
.container .boxwrap .bottom .text .sub {color: #505050; font-size: 18px;}
.container .boxwrap .bottom .qrwrap {display: flex; gap: 50px; justify-content: center; margin: 20px 0 0 0;}
.container .boxwrap .bottom .qrwrap .box p {font-size: 18px; font-family: 'pre_B'; margin: 10px 0 0 0;}
.container .boxwrap .bottom .qrwrap .box img {width: 100px;}

@media screen and (max-width:900px){
    .container .head {margin: 70px 0 0 0;}
    .container .head img {width: 180px;}
    .container .head h1 {font-size: 32px;}
    .container .boxwrap {padding: 56px 44px; border-radius: 44px;}
    .container .boxwrap .top .text .title {font-size: 22px;}
    .container .boxwrap .top .text .sub {font-size: 16px;}
    .container .boxwrap .top .btnwrap {gap: 24px;}
    .container .boxwrap .bottom {margin: 60px 0 0 0;}
    .container .boxwrap .bottom .text .title {font-size: 20px;}
    .container .boxwrap .bottom .text .sub {font-size: 16px;}
    .container .boxwrap .bottom .qrwrap {gap: 24px;}
}

@media screen and (max-width:600px){
    .container {padding: 0 16px 50px 16px;}
    .container .head {margin: 50px 0 0 0;}
    .container .head img {width: 150px;}
    .container .head h1 {font-size: 26px; transform: none; margin: 10px 0 0 0;}

    .container .boxwrap {padding: 40px 22px; border-radius: 28px; margin: 20px 0 0 0;}
    .container .boxwrap .top .text .title {font-size: 20px;}
    .container .boxwrap .top .text .sub {font-size: 14px;}

    .container .boxwrap .top .btnwrap a {width: 100%;}
    .container .boxwrap .top .btnwrap a p {font-size: 16px;}
    .container .boxwrap .top .btnwrap a img { max-width: 220px; width: 120PX;}

    .container .boxwrap .bottom {margin: 40px 0 0 0;}
    .container .boxwrap .bottom .text .title {font-size: 18px;}
    .container .boxwrap .bottom .text .sub {font-size: 14px;}

    .container .boxwrap .bottom .qrwrap .box p {font-size: 16px;}
    .container .boxwrap .bottom .qrwrap .box img {width: 110px;}
}

@media screen and (max-width:360px){
    .container .boxwrap {padding: 32px 18px;}
    .container .head h1 {font-size: 22px;}
    .container .boxwrap .top .text .title {font-size: 18px;}
}