@import url(main_mobile.css);

* { margin: 0; padding: 0; box-sizing: border-box; font-family : 'NotoSans', 'Malgun Gothic', 'Apple SD Gothic Neo', 'dotum', sans-serif; font-weight: 300; letter-spacing: -.5px; scroll-behavior: smooth; color : #333333; letter-spacing: -1.5px; } 

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
main,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline}

i { font : inherit } 
a { text-decoration: none; } 

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section { display: block}

[hidden] { display: none}

body { line-height: 120%}

menu,
ol,
ul { list-style: none}

blockquote,
q { quotes: none}

blockquote:after,
blockquote:before,
q:after,
q:before { content: ''; content: none}

table { border-collapse: collapse; border-spacing: 0}
table caption { position:relative; visibility:hidden; height:0; font-size:0; line-height:0 } 
html,
body { font-size: 20px; overflow-x : hidden; } 

:root { --blue: #007bff; --lightblue: #3c8dbc; --navy: #001f3f; --indigo: #6610f2; --purple: #6f42c1; --pink: #e83e8c; --red: #dc3545; --fuchsia: #f012be; --maroon: #d81b60; --orange: #fd7e14; --yellow: #ffc107; --green: #28a745; --teal: #20c997; --olive: #3d9970; --cyan: #17a2b8; --lime: #01ff70; --white: #fff; --dark: #343a40; --black: #000000; --gray: #6c757d; --lightgray: #e9e9e9; --darkgray: #343a40; --primary: #007bff; --secondary: #6c757d; --success: #28a745; --info: #17a2b8; --warning: #ffc107; --danger: #dc3545; --success: #008A1E; --point: #1b5d08; --point1: #6fc117; --gray5: #F8F8F8; --gray10: #f4f4f4; --gray20: #E4E4E4; --gray30: #D8D8D8; --gray40: #C6C6C6; --gray50: #808080; --gray60: #717171; --gray70: #555555; --gray80: #2D2D2D; --gray90: #1D1D1D; } 

b,
h1,
h2,
h3,
h4,
h5,
h6,
strong { font-weight: bold; } 

a { transition: all .3s ease; color: #333}

[class*=trans] { transition: all .3s ease } 

label { font-size : .85rem } 

select,
input,
textarea { border : 1px solid var(--gray20); font-size : .85rem } 
input:disabled { background: var(--gray10) !important } 

.hidden { display : none; } 
button { cursor : pointer; background-color: transparent; transition : all .3s ease; border : 1px solid transparent } 
.btn { display : inline-flex; transition : all .3s ease; border : 1px solid transparent; align-items: center; justify-content: center; } 
.btn_xs { padding: .25rem .5rem; font-size: .7rem; line-height: 1.5 } 
.btn_sm { padding: .4rem .9rem; font-size: .8rem; line-height: 1.5 } 
.btn_md { padding: .4rem 1.7rem; font-size: .8rem; line-height: 1.5 } 


.mgt0 { margin : 0 !important } 
.mgt { margin-top : .5rem !important } 
.mgt1 { margin-top : 1rem !important } 
.mgt2 { margin-top : 2rem !important } 
.mgt3 { margin-top : 3rem !important } 
.mgt4 { margin-top : 4rem !important } 
.mgt5 { margin-top : 5rem !important } 
.mgt6 { margin-top : 6rem !important } 
.mgt7 { margin-top : 7rem !important } 
.mgt8 { margin-top : 8rem !important } 
.mgt9 { margin-top : 9rem !important } 
.mgt10 { margin-top : 10rem !important } 


@media ( max-width : 900px ) { 
    html,
    body { font-size: 18px; } 
}



@media ( max-width : 600px ) { 
    html,
    body { font-size: 16px; } 
}