@charset "utf-8";
@import url("layout_v1.0.css");
/*-------------------------------------------------
title       : default
Create date : 2024-06
-------------------------------------------------*/

/*---------- font ----------*/
/* Pretendard */

@font-face {
	font-family: 'Pretendard';
	font-weight: 900;
	font-display: swap;
	src: local('Pretendard Black'), url(../fonts/Pretendard-Black.subset.woff2) format('woff2'), url(../fonts/Pretendard-Black.subset.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 800;
	font-display: swap;
	src: local('Pretendard ExtraBold'), url(../fonts/Pretendard-ExtraBold.subset.woff2) format('woff2'), url(../fonts/Pretendard-ExtraBold.subset.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 700;
	font-display: swap;
	src: local('Pretendard Bold'), url(../fonts/Pretendard-Bold.subset.woff2) format('woff2'), url(../fonts/Pretendard-Bold.subset.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 600;
	font-display: swap;
	src: local('Pretendard SemiBold'), url(../fonts/Pretendard-SemiBold.subset.woff2) format('woff2'), url(../fonts/Pretendard-SemiBold.subset.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	font-display: swap;
	src: local('Pretendard Medium'), url(../fonts/Pretendard-Medium.subset.woff2) format('woff2'), url(../fonts/Pretendard-Medium.subset.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	font-display: swap;
	src: local('Pretendard Regular'), url(../fonts/Pretendard-Regular.subset.woff2) format('woff2'), url(../fonts/Pretendard-Regular.subset.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 300;
	font-display: swap;
	src: local('Pretendard Light'), url(../fonts/Pretendard-Light.subset.woff2) format('woff2'), url(../fonts/Pretendard-Light.subset.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 200;
	font-display: swap;
	src: local('Pretendard ExtraLight'), url(../fonts/Pretendard-ExtraLight.subset.woff2) format('woff2'), url(../fonts/Pretendard-ExtraLight.subset.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 100;
	font-display: swap;
	src: local('Pretendard Thin'), url(../fonts/Pretendard-Thin.subset.woff2) format('woff2'), url(../fonts/Pretendard-Thin.subset.woff) format('woff');
}

/* gmarket */
@font-face {
  font-family: 'GmarketSans';
  font-weight: 800;
  font-display: swap;
  src: local('GmarketSans Bold'), url(../fonts/GmarketSansTTFBold.woff) format('woff');
}
@font-face {
  font-family: 'GmarketSans';
  font-weight: 600;
  font-display: swap;
  src: local('GmarketSans Medium'), url(../fonts/GmarketSansTTFMedium.woff) format('woff');
}
@font-face {
    font-family: 'GmarketSans';
    font-weight: 400;
    font-display: swap;
    src: local('GmarketSans Light'), url(../fonts/GmarketSansTTFLight.woff) format('woff');
}


/*---------- Reset ----------*/
/*basic*/
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, button {margin:0; padding:0; border:0; vertical-align:baseline; box-sizing:border-box;}
input, select, textarea {margin:0; padding:0; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing: border-box;}
textarea {resize:none;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}
i, em {font-style:normal;}
blockquote, q {quotes:none;}
sub {vertical-align:sub; font-size:smaller; line-height:0;}
sup {vertical-align:super; font-size:smaller; line-height:0;}
img, fieldset {vertical-align:middle;}
a {color:inherit; vertical-align:inherit; text-decoration:none; }
a:link, a:hover {text-decoration:none; cursor: pointer;}
h1,h2,h3,h4,h5,h6 {color:inherit; font-weight:inherit; font-size: inherit;}
ol, ul, li {list-style:none;}
table {width:100%; border-collapse:collapse; border-spacing:0; table-layout:fixed; word-break:normal;}
th, td {text-align:center; vertical-align:middle;}
caption, legend {width:1px; height:1px; margin:-1px 0 0 0; padding:0; border:0; overflow:hidden; font-size:0; color:transparent; line-height:0;}
fieldset, legend {border:0; background-color:transparent;}
hr {height:0; border:0; background-color:transparent;}
button {display:inline-block; border:0; background-color:transparent; font-size:inherit; text-align:center; cursor:pointer; overflow:visible;}
[role="button"] {cursor:pointer;}
a[href^=tel] {cursor:text; pointer-events:none;}
a[href^=tel]:hover {color:currentColor; text-decoration:none;}
button:focus-visible, [role="button"]:focus-visible {outline:2px solid #000;}
:focus {outline: -webkit-focus-ring-color auto 1px !important; box-sizing: border-box;}
html, body {width: 100%;margin: 0; padding: 0;font-size: 16px;}
body { min-width: 350px; font-weight:400; background-color: #ffffff;}
*{margin:0;padding:0;font:inherit;color:inherit; font-family: 'Pretendard', sans-serif; letter-spacing: -.04rem;}
*, :after, :before {box-sizing:border-box;flex-shrink:0;}

/* skip */
.skip a {display: block; position: absolute; left: 0; top: -9999px; overflow: hidden; width: 100%; background: black; color: #fff; font-size: 1.2em; font-weight: bold; text-align: center;}
.skip a:focus {position: absolute; top: 0; padding: 1.1em 0; z-index: 99999; outline: none !important;}

*:focus-visible{outline:0;}
/* input, select */
input[type=text], input[type=password],input[type=number] {border: 1px solid #c7d6ea; padding: 0 10px; height: 38px; line-height: 38px; box-sizing: border-box; color: #555; border-radius: 4px; width:150px; font-weight: 400;}
input[type=checkbox] {width: 22px; height: 22px; display: inline-block; vertical-align: middle; background: url(../images/img_checkbox.png) 50% 50% no-repeat #C3CFDC; border: 0; margin-top: -2px; border-radius: 2px; overflow: hidden;}
input[type=checkbox]:checked::before {content: ''; width: 100%; height: 100%; display: block; background: url(../images/img_checkbox.png) 50% 50% no-repeat var(--blue); overflow: hidden; border-radius: 4px;}

input[type=radio] {width: 22px;height: 22px; border-radius: 50%; vertical-align: middle;background: #c7d6ea; margin-right: 5px;margin-top: -3px; box-sizing: border-box;}
input[type=radio]::after {content: ''; border: 6px solid #c7d6ea; background: #fff; display: block; box-sizing: border-box; width: 100%; height: 100%; border-radius: 50%;}
input[type=radio]:checked::after {content: ''; border: 6px solid var(--blue); background: #fff; display: block; box-sizing: border-box; width: 100%; height: 100%; border-radius: 50%;}

input[type=radio].radio_md {width: 16px;height: 16px; border-radius: 50%;}
input[type=radio].radio_md::after {content: ''; border: 4px solid #c7d6ea;}
input[type=radio].radio_md:checked::after {content: ''; border: 4px solid var(--blue);}

select{border: 1px solid #c7d6ea; height: 38px; line-height: 36px; border-radius: 4px; box-sizing: border-box; background: url(../images/img_select.png) no-repeat calc(100% - 1rem) 50% #fff; padding: 0 20px 0 10px; vertical-align: top; appearance: none; -webkit-appearance: none; min-width: 100px; text-align: left; cursor: pointer; color: #555;font-weight: 400;}
select::-ms-expand {display: none;}
.select2 {min-width: 200px !important;}
::placeholder {color: #999;}
textarea {width: 100%; border: 1px solid #c7d6ea; border-radius: 4px; padding: 12px; font-size: .9rem;}
/* chrome blue line */
input:-webkit-autofill {-webkit-box-shadow:0 0 0 30px #fff inset ; -webkit-text-fill-color:#000;}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {transition:background-color .6s ease-in-out 0s, color .6s 0s;}

/* width(rem) */
.w50{width:5rem !important;}
.w55{width:5.5rem !important;}
.w60{width:6rem !important;}
.w65{width:6.5rem !important;}
.w70{width:7rem !important;}
.w75{width:7.5rem !important;}
.w80{width:8rem !important;}
.w85{width:8.5rem !important;}
.w90{width:9rem !important;}
.w95{width:9.5rem !important;}
.w100{width:10rem !important;}
.w150{width:15rem !important;}
.w200{width:20rem !important;}
.w250{width:25rem !important;}
.w300{width:30rem !important;}
.w350{width:35rem !important;}
.w400{width:40rem !important;}
.w450{width:45rem !important;}
.w500{width:50rem !important;}
/* width(%) */
.w10p{width:10% !important;}
.w15p{width:15% !important;}
.w20p{width:20% !important;}
.w25p{width:25% !important;}
.w30p{width:30% !important;}
.w35p{width:35% !important;}
.w40p{width:40% !important;}
.w45p{width:45% !important;}
.w50p{width:50% !important;}
.w55p{width:55% !important;}
.w60p{width:60% !important;}
.w65p{width:65% !important;}
.w70p{width:70% !important;}
.w75p{width:75% !important;}
.w80p{width:80% !important;}
.w85p{width:85% !important;}
.w90p{width:90% !important;}
.w95p{width:95% !important;}
.w100p{width:100% !important;}

/* margin */
.mg0{margin:0 !important;}
.mg2{margin:.2rem !important;}
.mg5{margin:.5rem !important;}
.mg10{margin:1rem !important;}
.mg15{margin:1.5rem !important;}
.mg20{margin:2rem !important;}
.mg25{margin:2.5rem !important;}
.mg30{margin:3rem !important;}
.mg35{margin:3.5rem !important;}
.mg40{margin:4rem !important;}
.mg45{margin:4.5rem !important;}
.mg50{margin:5rem !important;}
.mg55{margin:5.5rem !important;}
.mg60{margin:6rem !important;}


.mgt0{margin-top:0 !important;}
.mgt3{margin-top:.3rem !important;}
.mgt5{margin-top:.5rem !important;}
.mgt10{margin-top:1rem !important;}
.mgt15{margin-top:1.5rem !important;}
.mgt20{margin-top:2rem !important;}
.mgt25{margin-top:2.5rem !important;}
.mgt30{margin-top:3rem !important;}
.mgt35{margin-top:3.5rem !important;}
.mgt40{margin-top:4rem !important;}
.mgt45{margin-top:4.5rem !important;}
.mgt50{margin-top:5rem !important;}
.mgt55{margin-top:5.5rem !important;}
.mgt60{margin-top:6rem !important;}
.mgb0{margin-bottom:0 !important;}
.mgb3{margin-bottom:.3rem !important;}
.mgb5{margin-bottom:.5rem !important;}
.mgb10{margin-bottom:1rem !important;}
.mgb15{margin-bottom:1.5rem !important;}
.mgb20{margin-bottom:2rem !important;}
.mgb25{margin-bottom:2.5rem !important;}
.mgb30{margin-bottom:3rem !important;}
.mgb35{margin-bottom:3.5rem !important;}
.mgb40{margin-bottom:4rem !important;}
.mgb45{margin-bottom:4.5rem !important;}
.mgb50{margin-bottom:5rem !important;}
.mgb55{margin-bottom:5.5rem !important;}
.mgb60{margin-bottom:6rem !important;}
.mgl0{margin-left:0 !important;}
.mgl5{margin-left:.5rem !important;}
.mgl10{margin-left:1rem !important;}
.mgl15{margin-left:1.5rem !important;}
.mgl20{margin-left:2rem !important;}
.mgl25{margin-left:2.5rem !important;}
.mgl30{margin-left:3rem !important;}
.mgl35{margin-left:3.5rem !important;}
.mgl40{margin-left:4rem !important;}
.mgl45{margin-left:4.5rem !important;}
.mgl50{margin-left:5rem !important;}
.mgl55{margin-left:5.5rem !important;}
.mgl60{margin-left:6rem !important;}
.mgr0{margin-right:0 !important;}
.mgr2{margin-right:.2rem !important;}
.mgr3{margin-right:.3rem !important;}
.mgr5{margin-right:.5rem !important;}
.mgr10{margin-right:1rem !important;}
.mgr15{margin-right:1.5rem !important;}
.mgr20{margin-right:2rem !important;}
.mgr25{margin-right:2.5rem !important;}
.mgr30{margin-right:3rem !important;}
.mgr35{margin-right:3.5rem !important;}
.mgr40{margin-right:4rem !important;}
.mgr45{margin-right:4.5rem !important;}
.mgr50{margin-right:5rem !important;}
.mgr55{margin-right:5.5rem !important;}
.mgr60{margin-right:6rem !important;}

/* Padding */
.pd0 {padding:0 !important;}
.pt0 {padding-top:0 !important;}
.pb0 {padding-bottom:0 !important;}
.pl0 {padding-left:0 !important;}
.pr0 {padding-right:0 !important;}
.pt10 {padding-top:10px !important;}
.pt20 {padding-top:20px !important;}
.pt30 {padding-top:30px !important;}
.pt40 {padding-top:40px !important;}
.pt50 {padding-top:50px !important;}
.pt60 {padding-top:60px !important;}
.pt70 {padding-top:70px !important;}
.pt80 {padding-top:80px !important;}
.pt90 {padding-top:90px !important;}
.pt100 {padding-top:100px !important;}
.pb10 {padding-bottom:10px !important;}
.pb20 {padding-bottom:20px !important;}
.pb30 {padding-bottom:30px !important;}
.pb40 {padding-bottom:40px !important;}
.pb50 {padding-bottom:50px !important;}

/* align */
.ta_l {text-align:left !important;}
.ta_c {text-align:center !important;}
.ta_r {text-align:right !important;}
.va_t {vertical-align:top !important;}
.va_m {vertical-align:middle !important;}
.va_b {vertical-align:bottom !important;}

/* border-no */
.bd_n {border: none !important;}
.bd_n_t {border-top: none !important;}
.bd_n_b {border-bottom: none !important;}
.bd_n_l {border-left: none !important;}
.bd_n_r {border-right: none !important;}

/* float */
.fr {float: right !important;}
.fl {float: left !important;}

/* show hide */
.show, .block {display:block !important;}
.hide {display:none !important;}

/* clear */
.clear {display: block !important; min-height: 1% !important;}
.clear::after {content: " "; height: 0; display: block; visibility: hidden; clear: both;}

/* overflow */
.ov_hidden {overflow-x: hidden !important; overflow-y: hidden !important;}
.ov_hidden_y {overflow-y: hidden !important;}
.ov_hidden_x {overflow-x: hidden !important;}
.ov_scroll {overflow: scroll !important;}
.ov_scroll_y {overflow-y: scroll !important;}
.ov_scroll_x {overflow-x: scroll !important;}
/* display */
.d_ib {display: inline-block !important;}
.d_i {display: inline !important;}
.d_b {display: block !important;}
/*---------- root ----------*/
:root {
  /* color */
  --black: #121212;
  --gray: #7C889E;
  --lightgray: #f5f5f5;
  --darkgray: #333333;
  --white: #ffffff;
  --red: #ff0000;
  --orange: #ff6c2e;
  --yellow: #FFD232;
  --gold: #e0b413;
  --green: #34A853;
  --lightgreen: #10BF75;
  --blue: #117BFA;
  --indigo: #1C2D76;
  --royalblue: #468AFF;
  --sapphire: #2EA8B6;
  --iceblue: #F7FAFF;
  --violet: #6f42c1;
  --purple : #ac42c1;
  --gdred : #CB225A;
  --gdpurple :  #46417D;
  /* text */
  --text-title-lg: 5rem;
  --text-title-md: 3rem;
  --text-title-sm: 2.25rem;
  --text-content-1: 2rem;
  --text-content-2: 1.875rem;
  --text-content-3: 1.25rem;
  --text-content-4: 1rem;
  --text-content-5: .9rem;
  --text-content-6: .8rem;
  /* transition */
  --transition-1: all 0.2s ease-in-out;
  --transition-2: all 0.4s ease-in-out;
  --transition-2: all 0.8s ease-in-out;
  --transition-2: all 0.12s ease-in-out;
  /* font bisic */
  --fonttype-1:'Pretendard', 'Malgun Gothic', '맑은 고딕', sans-serif;
  --fonttype-2:'GmarketSans';
}

/*---------- text ellipsis ----------*/
.text-el-1 {text-overflow: ellipsis; white-space:nowrap; word-wrap:normal; width:100px; overflow:hidden;}/* line1 */
.text-el-2 {text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; word-wrap:break-word; line-height: 1.4em; height: 1.8em; -webkit-line-clamp: 2;}/* line2 */
.text-el-3 {text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; word-wrap:break-word; line-height: 1.4em; height: 4.2em; -webkit-line-clamp: 3;}/* line3 */
.text-el-4 {text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; word-wrap:break-word; line-height: 1.4em; height: 5.6em; -webkit-line-clamp: 4;}/* line4 */

/*---------- text color ----------*/
.text-blue {color: var(--blue) !important;}
.text-black {color: var(--black) !important;}
.text-gray {color: var(--darkgray) !important;}
.text-red {color: var(--red) !important;}
.text-green {color: var(--green) !important;}
.text-orange {color: var(--orange) !important;}
.text-gold {color: var(--gold) !important;}

/*---------- button ----------*/
button[type=button], input[type=submit] input[type=button] {cursor: pointer; transition: all .2s;}
button[type=button]:hover, input[type=submit]:hover, input[type=button]:hover {opacity: .8;}
button[type=button]:disabled, input[type=submit]:disabled, input[type=button]:disabled {cursor: default;}
.btn_wrap select {display: inline-block; width: auto; border-radius: 4px; padding: 0 1.5rem 0 .8rem;}
button[type=button], button[type=submit], input[type=submit], input[type=button] {cursor: pointer !important; transition: all .2s; border-radius: 4px;}
button[type=button]:hover, button[type=submit]:hover, input[type=submit]:hover, input[type=button]:hover, .btn:hover {opacity: .9 !important; cursor: pointer;}
button[type=button]:disabled, button[type=submit]:disabled, input[type=submit]:disabled, input[type=button]:disabled {cursor: default !important; background-color: #c8c8c8 !important; border: 1px solid rgba(0,0,0, .1);}
button[type=button]:disabled:hover, button[type=submit]:disabled:hover, input[type=submit]:disabled:hover, input[type=button]:disabled:hover {opacity: 1 !important;}
.btn {border: 0; text-align: center; letter-spacing: -0.02em; display: inline-block; border-radius: 4px; vertical-align: top; height: 1.8rem; line-height: 1.6rem; padding: 0 1.25em; color: #fff; background: #666; font-size: .9em; white-space: nowrap; transition: all .2s ease; border: 1px solid rgba(0,0,0, .3); box-sizing: border-box;}
.btn i {margin: -1px 5px 0 -5px;}
.btn i img {vertical-align: middle; width: 17px; height: 17px;}
.btn-round {border-radius: 2rem !important;}
.btn > strong {font-weight: 800;}
.btn > small {font-weight: 500;font-size: .7em;}
.btn-lg {height: 54px; line-height: 52px; padding: 0 1em; font-size: 1.1em; min-width: 160px;}
.btn-md {height: 38px; line-height: 36px; padding: 0 1em; font-size: .9em; min-width: 100px;}
.btn-sm {height: 30px; line-height: 28px; padding: 0 .4em; font-size: .8em; min-width: 50px;}
.btn-xsm {height: 1.5em; line-height: 1.3em; padding: 0 .4em; font-size: .8em; }
.btn-blue {background-color: var(--blue);}
.btn-royalblue {background-color: var(--royalblue);}
.btn-lightgray {background-color: #b0b0b0;}
.btn-gray {background-color: #7C889E;}
.btn-darkgray {background-color: var(--darkgray) !important;}
.btn-darkblue {background-color: var(--indigo);}
.btn-orange {background-color: var(--orange);}
.btn-green {background-color: var(--green);}
.btn-red {background-color: var(--gdred);}
.btn-skyblue {background-color: #D1EAFB;color: #666; border-color: #9FCBE9;}
.btn-sapphire {background-color: var(--sapphire);}
.btn-white {background-color: var(--white) !important; color: #222 !important;}
.btn-white:hover {border: 1px solid #888 !important; background-color: #f6f6f6 !important;}
.btn_resultdown {height: auto !important; line-height: 1.4 !important; padding: 2rem; font-size: 1.1rem !important;}
.btn_comment {display: block; color: #999; font-size: 1rem; margin: .5em 0 0 0;}
@media screen and (max-width: 1240px) {
	html, body {font-size: 15px}
}
@media screen and (max-width: 640px) {
  html, body {font-size: 14px}
.btn-lg {height: 38px; line-height: 36px; font-size: 1rem; min-width: 100px;}
.btn-md {height: 28px; line-height: 26px;}
.btn-sm {height: 24px; line-height: 22px;}
}