@charset "utf-8";

@import url("font.css");
@import url("common.css");

/* 공통 */
.wrapper {width:650px; margin:0 auto;}

section {padding-bottom:100px;}
.ft_namum {font-family:'NanumSquareRound' !important;}
.fc_000 {color:#000 !important;}

/* table */
.cm_table {border-bottom:1px solid #DADADA;}
.cm_table .w110 {width:110px;}
.cm_table tbody th,
.cm_table tbody td {font-weight:700; border:1px solid #DADADA;}
.cm_table tbody th {text-align:center; padding:17px 0; border-bottom:0;}
.cm_table tbody td {text-align:left; color:#333; line-height:1.4; padding:16px 16px; border-left:0; border-bottom:0; background:#FEFEFE;}
.cm_table tbody td a {display:block; text-decoration:underline; text-underline-position:under; color:#1285FF;}

.red .cm_table tbody th {font-weight:700; color:#E24C4C; background:#FFF0F2; border-color:#FFC0C2}
.org .cm_table tbody th {font-weight:700; color:#FF6C18; background:#FFF6E9; border-color:#FFC5BA}


/* list */
.num_list {padding-inline-start:15px;}
.num_list li {list-style:auto;}
.num_list li + li {margin-top:40px;}
.num_list .cm_table {margin-left:-15px; width:550px;}
.num_list .pic {margin-left:-15px;}
.num_list .pic + .cm_table {margin-top:20px;}
.num_list .more_text {margin-left:-16px;}

.num_list.no_mg li + li {margin-top:0;}

.num_list02 {font-size:15px; line-height:1.6; color:#555; font-family: 'suit';}
.num_list02 li {position:relative; padding-left:18px;}
.num_list02 li span {position:absolute; z-index:1; left:0; top:1px; font-weight:500;}

.numround_list li {display:flex; gap:8px;}
.numround_list li > span {width:30px; height:30px; color:#fff; text-align:center; font-weight:700; background:#F56A6A; border-radius:30px; padding-top:6px;}
.numround_list li > p {flex-grow:1; font-family: 'suit'; line-height:1.5; font-weight:500; padding:4px 0 0 0;}
.numround_list li + li {margin-top:16px;}

.dot_list {padding-inline-start:0; margin-left:21px; font-weight:700; line-height:1.4; color:#555; letter-spacing: -0.32px;}
.dot_list li {list-style:disc;}
.dot_list li + li {margin-top:8px;}
.dot_list li.red {color:#FF3E3E;}

.dash_list li {font-weight:900; color:#666; line-height:1.6; font-size:18px; letter-spacing: -0.36px;}
.dash_list li:before {content:'-'; display:inline-block; margin-right:5px; font-weight:900;}

.kor_list {font-size:15px; line-height:1.6; color:#555; font-family: 'suit';}
.kor_list li {display:flex;}
.kor_list li span {margin-right:8px; font-weight:700;}
.kor_list li + li {margin-top:16px;}


/* button */
.btn_wrap {margin-top:60px;}

.arrow_btn {display:inline-block; padding:12px 36px; border-radius:100px;}
.arrow_btn span {display:inline-block; color:#fff; font-weight:700; line-height:1.5; padding-right:28px; background:url(../images/ico/ico_btn_arrow01.png) no-repeat right center; background-size:20px;}
.arrow_btn.red {background:#FF3E3E;}
.arrow_btn.org {background:#FF8A49;}
.arrow_btn.grn {background:#26B766;}
.arrow_btn.blue {background:#1285FF;}

.more_btn {display:inline-block; color:#fff; font-size:14px; line-height:1.5; font-family: 'suit'; letter-spacing:-.5px; padding:4px 13px; border-radius:100px;}
.more_btn span {display:inline-block; padding-right:15px; font-weight:500; background:url(../images/ico/ico_more_btn_w.png) no-repeat right -1px center; background-size:12px;}
.more_btn.red {background:#FF3E3E;}
.more_btn.org {background:#FF8A49;}
.more_btn.grn {background:#26B766;}
.more_btn.blue {background:#1285FF;}

/* img */
.pic {overflow:hidden;}
.round_pic {border-radius:16px; overflow:hidden;}

/* common */
.more_text {margin-top:24px; line-height:1.5; letter-spacing:-.6px;}
.more_text > strong {display:block; margin-bottom:16px; font-size:20px; font-weight:700;font-family: 'suit';}
.more_text > p {font-family: 'suit';}
.more_text > p + p {margin-top:24px;}
.more_text > p > strong {display:block; margin-bottom:12px; font-family:'NanumSquareRound'; font-weight:900;}
.more_text .fs14 {font-size:14px;}
.more_text .more_btn {margin-top:24px;}
.more_text .more_btn + p {margin-top:24px;}

.more_text.greybox {padding:24px; border-radius:16px; background:#F8F8F8;}
.more_text.greybox > strong {font-size:16px;}

.info_t {margin-bottom:24px; line-height:1.5; letter-spacing:-.6px;}
.info_t + .info_t {margin-top:-8px;}
.info_t.ff_suit {font-family: 'suit';}
.info_t.fw_600 {font-weight:600;}
.info_t.fs18 {font-size:18px;}
.info_t strong {font-weight:900;}

.point_red {color:#FF3E3E;}

.webzin {text-align:left;}
.webzin > tbody {display:table; width:100%; padding-top:60px;}
.webzin > tbody .dot_list {color:#333;}
.webzin > tbody > tr:not(.footer) {display:table; width:100%; padding-left:34px; padding-right:34px;}
.webzin > tbody > tr + tr {margin-top:100px;}
.webzin > tbody > tr.banner {margin-top:120px;}
.webzin > tbody > tr.banner td {padding:0;}
.webzin > tbody > tr.footer {margin-top:150px;}
.webzin > tbody > tr .main_tit {display:block; width:100%; padding:19.5px 24px; border-radius:16px;}
.webzin > tbody > tr .main_tit h2 {display:block; font-size:22px; font-weight:900; line-height:1.5; padding-left:46px; background-repeat:no-repeat; background-position:left center; background-size:36px;}
.webzin > tbody > tr > td {display:block; padding:24px 16px 0;}
.webzin > tbody > tr > td .num_list li strong {display:block; margin-bottom:16px; font-weight:900; font-size:18px;}
.webzin > tbody > tr > td .num_list li::marker {font-weight:900;}

.webzin tbody .red .main_tit {background:#FFF2F4;}
.webzin tbody .red .main_tit h2 {color:#FF3E3E; background-image:url(../images/ico/ico_main_tit01.png);}
.webzin tbody .org .main_tit {background:#FFF6E9;}
.webzin tbody .org .main_tit h2 {color:#FF6C18; background-image:url(../images/ico/ico_main_tit02.png);}
.webzin tbody .grn .main_tit {background:#E5FFF0;}
.webzin tbody .grn .main_tit h2 {color:#26B766; background-image:url(../images/ico/ico_main_tit03.png);}
.webzin tbody .blue .main_tit {background:#E9F9FF;}
.webzin tbody .blue .main_tit h2 {color:#1285FF; background-image:url(../images/ico/ico_main_tit04.png);}

.webzin tbody .brown_cafe .main_tit {background:#FBF1E0 url(../images/ico/ico_maintit_cafe01.png) no-repeat right 24px center; background-size:99px;}
.webzin tbody .brown_cafe .main_tit h2 {color:#532D18; padding-left:0;}
.webzin tbody .brown_cafe .main_tit p {margin-top:2px; font-family: 'suit'; color:#613319; line-height:1.5; letter-spacing: -0.28px; font-size:14px;}

/* subpage */
.sub_para01 {padding:70px 34px 0;}

.sub_tit {margin-bottom:60px; text-align:center;}
.sub_tit h2 {font-size:34px; line-height:1.4; color: #453333; font-weight:800; letter-spacing: -1.36px;}
.sub_tit .name_tag {display:inline-flex; align-items:center; justify-content:center; margin-top:20px; font-family: 'suit'; padding:6px 24px; gap:8px; border-radius: 50px; border: 1px solid #EEE; background: #F9F9F9;}
.sub_tit .name_tag ul {display: flex; align-items: center; gap: 4px; color: #888; font-size: 14px; font-weight: 500; /*line-height: 1.8;*/ letter-spacing: -0.35px;}
.sub_tit .name_tag ul li {position:relative; padding-left:6px;}
.sub_tit .name_tag ul li:after {content:''; position:absolute; z-index:1; top:50%; transform:translateY(-50%); left:0; width:1px; height:11px; background:#ccc;}
.sub_tit .name_tag ul li:first-child:after {display:block;}
.sub_tit .name_tag.two ul li {padding-left:4px;}
.sub_tit .name_tag.two ul li:after {display:none;}
.sub_tit .name_tag.two span {color:#453333; font-weight:500;}

.con_txt {color: #555; line-height: 1.6; font-family: 'suit'; letter-spacing: -0.32px; word-break:keep-all;}
.con_txt p + p {margin-top:24px;}
.con_txt p.sm_mg {margin-top:8px;}
.con_txt > div + div {margin-top:40px;}
.con_txt div > strong {display:block; margin-bottom:8px; font-weight:900; font-size:18px; color:#000; font-family:'NanumSquareRound';}
.con_txt div > p + strong {margin-top:24px;}
.con_txt ol,
.con_txt ul {margin-top:24px; font-weight:400;}
.con_txt ol li + li {margin-top:24px;}

.con_list_txt > * + * {margin-top:24px;}

.cm_tittxt.mt60 > div:first-child {margin-top:60px;}
.cm_tittxt.no_tit > div {margin-top:60px;}

.cm_tittxt > div {margin-top:80px;}
.cm_tittxt .cm_tit {margin-bottom:25px; padding-bottom:15px; border-bottom:2px solid #FF3E3E;}
.cm_tittxt .cm_tit h3 {display:flex; gap:5px; font-size:22px; font-weight:900; line-height:1.5; color:#FF3E3E; padding-left:46px; background:url(../images/ico/ico_main_tit01.png) no-repeat left center; background-size:36px;}

.quiz_box {margin-top:24px; padding:40px 34px; border:1px solid #FFF0DD; border-radius:8px; background:#FFFBF6;}
.quiz_box.cm_tittxt > div {margin-top:0;} 
.quiz_box.cm_tittxt .cm_tit {padding-bottom:0; border-bottom:0;}
.quiz_box.cm_tittxt .cm_tit .sub_t {margin-top:24px; font-weight:700; line-height:1.6; color:#FF3E3E; font-family: 'suit';}
.quiz_box.cm_tittxt .quiz_txt {display:block; margin-bottom:24px; font-family: 'suit'; font-size:17px; font-weight:600; color:#000;}
.quiz_box.cm_tittxt .con_list_txt .num_list02 li {display:flex; align-items:flex-start; justify-content:space-between; gap:24px;}
.quiz_box.cm_tittxt .con_list_txt .num_list02 li + li {margin-top:24px;}
.quiz_box.cm_tittxt .con_list_txt .num_list02 .quiz_list_img {flex-shrink:0; width:200px;}

.greeting_wrap {font-family: 'suit'; line-height:1.5; color:#333; font-size:16px; letter-spacing: -0.32px;}
.greeting_wrap p + p {margin-top:24px;}
.greeting_wrap img {width:210px; margin-left:24px; margin-bottom:27px;}
.greeting_wrap a {margin-top:24px;}

.greeting_wrap.subpage {padding-top:16px;}
.greeting_wrap.subpage img {width:274px; margin-left:0; margin-right:36px; margin-bottom:0; margin-top:-16px;}
.greeting_wrap.subpage div + div {margin-top:55px;}
.greeting_wrap.subpage .sign {margin-top:60px; line-height:1.6; letter-spacing: -0.4px; text-align:right;}
.greeting_wrap.subpage .sign strong {display:inline-block; margin-left:8px;}

.webzin > tbody > tr > td .num_list .more_text > strong {font-family: 'suit'; font-size:18px; font-weight:700;}
.webzin > tbody > tr > td .num_list .more_text .dot_list {font-size:15px; color:#333; line-height:1.5; font-weight:400; letter-spacing: -0.28px; font-family: 'suit';}
.webzin > tbody > tr > td .num_list .more_text .dot_list.flexver {display:flex; align-items:flex-start; gap:0 16px; width:100%; font-size:14px; padding-right:15px;}
.webzin > tbody > tr > td .num_list .more_text .dot_list.flexver li {width:33.33%; margin:0;}
.webzin > tbody > tr > td .num_list .more_text .dot_list li strong {font-size:14px; margin-bottom:0; font-weight:700;}
.webzin > tbody > tr > td .num_list .more_text .dot_list li + li {margin-top:16px;}

.table_haslink {position:relative;}
.table_haslink a {position:absolute; z-index:1; width:23%; height:6%; text-indent:-9999px; opacity:0;}
.table_haslink .link01 {top:14%; right:30%;}
.table_haslink .link02 {top:38%; right:10%;}

.line_txt {text-decoration:underline; text-underline-position:under;}
/***************************************************************************************************************************************************************/

@media all and (max-width:650px){
	/* 공통 */
    .wrapper {width:100%; margin:0;}
	
	.num_list .cm_table {width:100%;}
	.webzin tbody .brown_cafe .main_tit {padding-right:110px; background-size:79px;}
	
	.quiz_box.cm_tittxt .con_list_txt .num_list02 li {gap:3.69vw}
	.quiz_box.cm_tittxt .con_list_txt .num_list02 li + li  {margin-top:3.69vw;}
	.quiz_box.cm_tittxt .con_list_txt .num_list02 .quiz_list_img {width:30.76vw;}
	
	.greeting_wrap.subpage {padding-top:2.4615vw;}
	.greeting_wrap.subpage img {width:42.15vw; margin-right:5.53vw;}
	.greeting_wrap.subpage .sign {margin-top:9.2308vw;}

}

@media all and (max-width:640px){
	.greeting_wrap.subpage div + div {margin-top:24px;}
}

@media all and (max-width:480px){
	.num_list {font-size:14px; padding-inline-start:10px;}
	.num_list li + li {margin-top:20px;}
	.num_list .cm_table {margin-left:-10px;}
	
	.num_list02 {font-size:13px;}
	
	.numround_list li > span {font-size:12px; width:20px; height:20px; padding-top:3px;}
	.numround_list li > p {padding-top:0; font-size:14px;}
	.numround_list li + li {margin-top:6px;}
	
	.dot_list {font-size:14px;}
	.dot_list li {text-indent:-3px;}
	.dot_list li + li {margin-top:6px;}
	
	.dash_list li {font-size:16px;}
	
	.kor_list {font-size:14px;}
	.kor_list li span {margin-right:5px;}
	.kor_list li + li {margin-top:10px;}
	
	.btn_wrap {margin-top:30px;}
	
	.arrow_btn {padding:10px 20px; font-size:14px;}
	.arrow_btn span {padding-right:24px; background-size:15px;}
	
	.more_btn {font-size:10px;}
	.more_btn span {padding-right:13px; background-position:right -1px top 3px; background-size:9px;}
	
	.cm_table {font-size:14px;}
	.cm_table .w110 {width:80px;}
	.cm_table tbody th {padding:15px 0;}
	.cm_table tbody td {padding:13px 10px;}
	
	.more_text {margin-top:18px;}
	.more_text > strong {margin-bottom:10px; font-size:16px;}
	.more_text > p {font-size:14px;}
	.more_text .more_btn {margin-top:16px;}
	.more_text .more_btn + p {margin-top:16px;}
	
	.more_text.greybox {padding:18px;}
	.more_text.greybox > strong {font-size:14px;}
	
	.info_t {font-size:18px; font-size:14px;}
	
	.webzin > tbody {padding-top:45px;}
	.webzin > tbody > tr:not(.footer) {padding-left:16px; padding-right:16px;}
	.webzin > tbody > tr + tr {margin-top:70px;}
	.webzin > tbody > tr.banner {margin-top:90px;}
	.webzin > tbody > tr.footer {margin-top:110px;}
	.webzin > tbody > tr .main_tit {padding:15px 16px; border-radius:12px;}
	.webzin > tbody > tr .main_tit h2 {font-size:16px; padding-left:38px; background-size:30px; word-break:keep-all;}
	.webzin > tbody > tr .main_tit h2 br {display:none;}
	.webzin > tbody > tr > td {padding:12px 16px 0;}
	.webzin > tbody > tr > td .num_list li strong {margin-bottom:10px; font-size:14px;}
	
	.info_t {word-break:keep-all;}
	.info_t.fs18 {font-size:16px;}
	.info_t br {display:none;}
	
	.greeting_wrap {font-size:14px;}
	.greeting_wrap img {width:38.11vw; margin-left:14px; margin-bottom:17px;}
	
	.webzin > tbody > tr > td .num_list .more_text > strong {font-size:15px;}
	
	.webzin > tbody > tr > td .num_list .more_text .dot_list li + li {margin-top:6px;}
	
	/* subpage */
	.sub_para01 {padding:50px 16px 0;}

	.sub_tit {margin-bottom:40px;}
	.sub_tit h2 {font-size:24px;}
	.sub_tit .name_tag {font-size:14px; padding:2px 18px;}
	.sub_tit .name_tag ul {font-size: 12px;}
	.sub_tit .name_tag.two {flex-wrap:wrap; justify-content:center; align-items:center; gap:0 4px;}
	.sub_tit .name_tag span {display:none;}

	.cm_tit {word-break:keep-all;}
	.cm_tit h3 br {display:none;}
	.con_txt {font-size:14px;}
	.con_txt p + p {margin-top:18px;}
	.con_txt p.sm_mg {margin-top:5px;}
	.con_txt > div + div {margin-top:25px;}
	.con_txt div > strong {margin-bottom:5px; font-size:15px;}

	.con_list_txt > * + * {margin-top:18px;}
	
	.cm_tittxt > div {margin-top:60px;}
	.cm_tittxt .cm_tit {margin-bottom:18px; padding-bottom:10px;}
	.cm_tittxt .cm_tit h3 {font-size:16px; padding-left:38px; background-size:30px;}
	
	.quiz_box {margin-top:18px; padding:25px 20px;}
	.quiz_box.cm_tittxt .quiz_txt {margin-bottom:12px; font-size:15px;}
	.quiz_box.cm_tittxt .cm_tit .sub_t {margin-top:18px; font-size:14px; word-break:keep-all;}
	/*.quiz_box.cm_tittxt .cm_tit .sub_t br {display:none;}*/
	.quiz_box.cm_tittxt .con_list_txt .num_list02 li br {display:none;}
	
	.webzin > tbody > tr > td .num_list .more_text .dot_list {font-size:14px;}
	.webzin > tbody > tr > td .num_list .more_text .dot_list li strong {font-size:14px;}
	.webzin > tbody > tr > td .num_list .more_text .dot_list.flexver {flex-wrap:wrap; gap:10px; font-size:13px;}
	.webzin > tbody > tr > td .num_list .more_text .dot_list.flexver li {width:100%;}
	
}

@media all and (max-width:374px){
	.num_list {padding-inline-start:7px;}
	.num_list .cm_table {margin-left:-7px;}
	
	.dot_list {font-size:13px;}
	
	.dash_list li {font-size:14px;}
	
	.kor_list {font-size:13px;}
	
	.arrow_btn {font-size:13px;}
	
	.cm_table {font-size:13px;}
	
	.more_text > strong {font-size:14px;}
	.more_text > p {font-size:13px;}
	.more_text.greybox > strong {font-size:13px;}
	
	.info_t {font-size:13px;}
	.sub_tit h2 {font-size:22px; word-break:keep-all;}
	.sub_tit h2 br {display:none; word-break:keep-all;}
	
	.webzin > tbody > tr > td {padding:12px 10px;}
	
	.webzin > tbody > tr .main_tit h2 {font-size:14px;}
	.webzin > tbody > tr > td .num_list li strong {margin-right:-9px;}
	
	.cm_tittxt .cm_tit h3 {font-size:14px; padding-left:32px; background-size:25px;}
	
	.quiz_box.cm_tittxt .cm_tit .sub_t {margin-top:15px; font-size:13px;}
}