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;
}

.mo_txt {display: none;}
.container {width: 100%; height: auto; min-height: 100vh; background: #F0F8FF; 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 .head h2 {font-size: 23px; text-align: center; line-height: 1.1; margin: 0 0 26px 0;}
.container .head h2 span {display: block; font-family: 'pre_B';}
.container .head h3 {text-align: center; color: #505050; margin: 0 0 40px 0;}
.container .box {background: #fff;padding: 50px 80px;border-radius: 50px;min-width: 595px;position: relative;}
.container .box.box_2 {margin: 20px 0 0 0;}
.container .box .step {display: flex; justify-content: center; align-items: center; gap: 10px; margin: 0 0 20px 0;}
.container .box .step span {background: #353EEA; color: #fff; padding: 4px 10px; border-radius: 7px; font-family: pre_SB;}
.container .box .step p {font-size: 23px; font-family: 'pre_B';}
.container .box .text {text-align: center; color: #505050; font-size: 18px; margin: 0 0 20px 0; line-height: 1.4; font-family: pre_R;}
.container .box .text span {font-family: 'pre_SB'; color: #111; line-height: 1.4;}
.container .box .point {color: #414AFF; margin: 0 0 30px 0;}
.container .box img {width: 180px; margin: 0 auto;}
.container .box .sub {text-align: center; color: #777; margin: 10px 0 0 0;}
.container .icon { position: absolute;  z-index: 2;}
.container .icon.icon_1 { width: 38%;  bottom: 9%;  left: -23%;}
.container .icon.icon_2 { width: 25%; top: 50%;  right: -13%;}

@media screen and (max-width:800px){
    .container {padding:0 20px 200px 20px}
    .container .box {width: 100%; min-width: 100%; padding: 50px 20px;}
    .container .icon.icon_1 {    width: 28%; bottom: -31%;  left: -7%;}
    .container .icon.icon_2 {width: 17%; top: -17%; right: 2%;}
    .container .box .point {text-align: center}
}
@media screen and (max-width:500px){
    .pc_txt {display: none;}
    .mo_txt {display: block;}
    .container .head {margin: 50px 0 0 0;}
    .container .head img {width: 150px;}
    .container .head h1 {font-size: 26px; transform: none; margin: 0 0 10px 0;}
    .container .head h2 {font-size: 18px;}
    .container .icon.icon_2 { width: 25%;  top: -4%;}
    .container .box {border-radius: 30px;}
    .container .icon.icon_1 {width: 40%;}
    .container .box .text {font-size: 16px; line-height: 1.2}
    
}