@charset "utf-8";

@import url('../fonts/font.css');


/* ---------------------------------- *
    * ROOT
 * ---------------------------------- */
:root{
    --text-base-color:#000;

	--mainColor1:#a1c42c; /* LIME */
	--mainColor2:#60c1bd; /* JADE GREEN */

    --subColor:#3164fe; /* COBALT */
}


/* ---------------------------------- *
    * FONTS
 * ---------------------------------- */
@font-face {font-family:'SchoolSafetyRoundedSmile'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimDunggeunmisoTTF-B.woff2') format('woff2'); font-weight:700; font-display:swap;}


/* ---------------------------------- *
    * RESET
 * ---------------------------------- */
*{margin:0; padding:0; font-family:'NotoSans', sans-serif; font-style:normal; font-optical-sizing:auto; -webkit-text-size-adjust:none; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
html, body{font-family:'NotoSans', sans-serif; font-weight:300; width:100%; height:100%; min-width:360px; position:relative; -webkit-touch-callout:none; -webkit-tap-highlight-color:rgba(0,0,0,0); margin:0 auto; font-size:62.5%; font-weight:300; color:var(--text-base-color); letter-spacing:-0.06em; line-height:2.0rem;}

a{text-decoration:none; outline:none; color:var(--text-base-color);}
fieldset, img{border:0;}
i, em, address{font-style:normal; font-weight:normal;}
ul, li, dl{list-style:none}
table{table-layout:fixed; border-collapse:collapse;}

h1, h2, h3, h4, h5{font-weight:600;}

.cf:after{clear:both; content:''; display:block}
.sr-only{display:block; width:100%; height:100%; position:absolute; top:0; left:0; text-indent:-9999px;}


/* ---------------------------------- *
    * FORM
 * ---------------------------------- */
input, textarea, select{font-size:1.8rem; line-height:2.2rem; background-color:#fff; padding:15px; border:1px solid #d9d9d9; border-radius:5px; vertical-align:middle; outline:none;}

input[type="text"], input[type="tel"], input[type="password"], input[type="email"]{-webkit-appearance:none; appearance:none;}
input[type="checkbox"], input[type="radio"]{width:12px; height:12px; cursor:pointer;}
input[type="button"], input[type="submit"], button{background-color:transparent; -webkit-tap-highlight-color:transparent; border:0; outline:0; cursor:pointer;}
input[type="file"]{padding:2px; border:none;}
input[disabled], input[readonly], select[disabled]{background-color:#f5f5f5; font-weight:500; color:#8d8d8d; opacity:1;}

textarea{width:100%; resize:none;}
textarea[contenteditable]{-webkit-appearance:none; appearance:none}

select{padding:15px 40px 15px 15px; appearance:none; -moz-appearance:none; -webkit-appearance:none; background:url(../img/common/aw_select.svg) no-repeat right center #fff; background-size:40px;}
select::-ms-expand{display:none;}


/* ---------------------------------- *
    * TEXT
 * ---------------------------------- */
.ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
.ellipsis-2{overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-word;}
.ellipsis-3{overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; word-wrap:break-word;}
.ellipsis-4{overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:4; line-clamp:4; -webkit-box-orient:vertical; word-wrap:break-word;}
.ellipsis-5{overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:5; line-clamp:5; -webkit-box-orient:vertical; word-wrap:break-word;}

.txt_center{text-align:center !important;}
.txt_left{text-align:left !important;}
.txt_right{text-align:right !important;}

.text-main-color1{color:var(--mainColor1) !important;}
.text-main-color2{color:var(--mainColor2) !important;}
.text-sub-color{color:var(--subColor) !important;}
.text-red{color:#ea4d4d !important;}
.text-lgrey{color:#9d9d9d !important;}
.text-dgrey{color:#444444 !important;}
.text-grey{color:#606060 !important;}

b, strong{font-weight:500;}


/* ---------------------------------- *
    * BUTTON
 * ---------------------------------- */
.btn-area{display:flex; flex-wrap:wrap; align-items:center; gap:10px;}
.btn-area.bottom{margin-top:80px;}
.btn-area.center{justify-content:center;}
.btn-area.right{justify-content:flex-end;}

.btn{display:inline-block; border-radius:10px; border:1px solid transparent; text-align:center; word-break:keep-all;}
.btn:hover{opacity:0.8; transition-duration:0.3s;}

.btn.xsmall{border-radius:99px; font-size:1.6rem; line-height:2.0rem; padding:12px 15px;}
.btn.small{font-size:1.8rem; line-height:2.4rem; padding:15px;}
.btn.small img{width:16px;}
.btn.medium{border-radius:99px; font-size:2.0rem; font-weight:500; line-height:2.6rem; padding:15px 30px;}
.btn.large{min-width:160px; border-radius:99px; font-size:2.4rem; font-weight:500; line-height:3.0rem; padding:20px 40px;}
.btn.xlarge{width:calc(50% - 5px); max-width:300px; font-size:1.25rem; font-weight:600; line-height:1em; padding:30px;}
.btn.full{width:100%;}

.btn.icon{display:inline-flex; justify-content:center; align-items:center;}
.btn.icon img{margin-right:5px; filter:invert(100%);}
.btn.icon_s{display:inline-flex; justify-content:space-between; align-items:center;}

.btn-main-color1{background-color:var(--mainColor1); border-color:var(--mainColor1); color:#fff;}
.btn-main-color2{background-color:var(--mainColor2); border-color:var(--mainColor2); color:#fff;}
.btn-sub-color{background-color:var(--subColor); border-color:var(--subColor); color:#fff;}
.btn-deep-color{background-color:#414961; border-color:#414961; color:#fff;}

.btn-red{background-color:#ff4200; border-color:#ff4200; color:#fff;}
.btn-lgrey{background-color:#dadada; border-color:#dadada; color:#666;}
.btn-grey{background-color:#787878; border-color:#787878; color:#fff;}
.btn-dgrey{background-color:#333333; border-color:#333333; color:#fff;}
.btn-black{background-color:#000; border-color:#000; color:#fff;}
.btn-black-line{background-color:transparent; border-color:#000; color:#000;}
.btn-dgrey-line{background-color:transparent; border-color:#666; color:#666;}
.btn-grey-line{background-color:transparent; border-color:#cacaca; color:#585858;}
.btn-white-line{background-color:transparent; border-color:#fff; color:#fff;}


/* ---------------------------------- *
    * PADDING
 * ---------------------------------- */
.pt5 {padding-top:5px !important;}
.pt10 {padding-top:10px !important;}
.pt15 {padding-top:15px !important;}
.pt20 {padding-top:20px !important;}
.pt25 {padding-top:25px !important;}
.pt30 {padding-top:30px !important;}
.pt35 {padding-top:35px !important;}
.pt40 {padding-top:40px !important;}
.pt45 {padding-top:45px !important;}
.pt50 {padding-top:50px !important;}

.pr5 {padding-right:5px !important;}
.pr10 {padding-right:10px !important;}
.pr15 {padding-right:15px !important;}
.pr20 {padding-right:20px !important;}
.pr25 {padding-right:25px !important;}
.pr30 {padding-right:30px !important;}
.pr35 {padding-right:35px !important;}
.pr40 {padding-right:40px !important;}
.pr45 {padding-right:45px !important;}
.pr50 {padding-right:50px !important;}

.pb5 {padding-bottom:5px !important;}
.pb10 {padding-bottom:10px !important;}
.pb15 {padding-bottom:15px !important;}
.pb20 {padding-bottom:20px !important;}
.pb25 {padding-bottom:25px !important;}
.pb30 {padding-bottom:30px !important;}
.pb35 {padding-bottom:35px !important;}
.pb40 {padding-bottom:40px !important;}
.pb45 {padding-bottom:45px !important;}
.pb50 {padding-bottom:50px !important;}

.pl5 {padding-left:5px !important;}
.pl10 {padding-left:10px !important;}
.pl15 {padding-left:15px !important;}
.pl20 {padding-left:20px !important;}
.pl25 {padding-left:25px !important;}
.pl30 {padding-left:30px !important;}
.pl35 {padding-left:35px !important;}
.pl40 {padding-left:40px !important;}
.pl45 {padding-left:45px !important;}
.pl50 {padding-left:50px !important;}


/* ---------------------------------- *
    * MARGIN
 * ---------------------------------- */
.mt5 {margin-top:5px !important;}
.mt10 {margin-top:10px !important;}
.mt15 {margin-top:15px !important;}
.mt20 {margin-top:20px !important;}
.mt25 {margin-top:25px !important;}
.mt30 {margin-top:30px !important;}
.mt35 {margin-top:35px !important;}
.mt40 {margin-top:40px !important;}
.mt45 {margin-top:45px !important;}
.mt50 {margin-top:50px !important;}

.mr5 {margin-right:5px !important;}
.mr10 {margin-right:10px !important;}
.mr15 {margin-right:15px !important;}
.mr20 {margin-right:20px !important;}
.mr25 {margin-right:25px !important;}
.mr30 {margin-right:30px !important;}
.mr35 {margin-right:35px !important;}
.mr40 {margin-right:40px !important;}
.mr45 {margin-right:45px !important;}
.mr50 {margin-right:50px !important;}

.mb5 {margin-bottom:5px !important;}
.mb10 {margin-bottom:10px !important;}
.mb15 {margin-bottom:15px !important;}
.mb20 {margin-bottom:20px !important;}
.mb25 {margin-bottom:25px !important;}
.mb30 {margin-bottom:30px !important;}
.mb35 {margin-bottom:35px !important;}
.mb40 {margin-bottom:40px !important;}
.mb45 {margin-bottom:45px !important;}
.mb50 {margin-bottom:50px !important;}

.ml5 {margin-left:5px !important;}
.ml10 {margin-left:10px !important;}
.ml15 {margin-left:15px !important;}
.ml20 {margin-left:20px !important;}
.ml25 {margin-left:25px !important;}
.ml30 {margin-left:30px !important;}
.ml35 {margin-left:35px !important;}
.ml40 {margin-left:40px !important;}
.ml45 {margin-left:45px !important;}
.ml50 {margin-left:50px !important;}



/* RESPONSIVE */
@media screen and (max-width:768px){
    /* ---------------------------------- *
        * RESET
    * ---------------------------------- */
    html, body{font-size:50%;}


    /* ---------------------------------- *
        * FORM
    * ---------------------------------- */
    input, textarea, select{padding:13px;}

    select{padding:13px 34px 13px 13px; background-size:34px;}


    /* ---------------------------------- *
        * BUTTON
    * ---------------------------------- */
    .btn-area{gap:5px;}

    .btn{border-radius:5px;}

    .btn.small{padding:13px;}
    .btn.small img{width:14px;}
    .btn.medium{padding:12px 25px;}
    .btn.large{min-width:auto; padding:15px 25px;}
}