/* font start */
@font-face {
	font-family: "Pretendard";
	src: url("../fonts/Pretendard-Thin.woff") format("woff"), url("../fonts/Pretendard-Thin.woff2") format("woff2");
	font-weight: 200;
	font-style: normal;
}
@font-face {
	font-family: "Pretendard";
	src: url("../fonts/Pretendard-Light.woff") format("woff"), url("../fonts/Pretendard-Light.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
}
@font-face {
	font-family: "Pretendard";
	src: url("../fonts/Pretendard-Regular.woff") format("woff"), url("../fonts/Pretendard-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: "Pretendard";
	src: url("../fonts/Pretendard-Medium.woff") format("woff"), url("../fonts/Pretendard-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
}
@font-face {
	font-family: "Pretendard";
	src: url("../fonts/Pretendard-SemiBold.woff") format("woff"), url("../fonts/Pretendard-SemiBold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
}
@font-face {
	font-family: "Pretendard";
	src: url("../fonts/Pretendard-Bold.woff") format("woff"), url("../fonts/Pretendard-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
}
@font-face {
	font-family: "Pretendard";
	src: url("../fonts/Pretendard-ExtraBold.woff") format("woff"), url("../fonts/Pretendard-ExtraBold.woff2") format("woff2");
	font-weight: 800;
	font-style: normal;
}
@font-face {
    font-family: 'OTEnjoystoriesBA';
	src: url("../fonts/OTEnjoystoriesBA_Medium.woff") format("woff"), url("../fonts/OTEnjoystoriesBA_Medium.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'KOHIBaeumOTF';
	src: url("../fonts/KOHIBaeum.woff") format("woff"), url("../fonts/KOHIBaeum.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
/* font end */


.subpage_img::before{
	display: none;
}

.sub_top_title{
	font-size: 35px;
	font-weight: 600;
	margin-bottom: 70px;
	text-align: center;
	font-weight: 800;
}
@media screen and (max-width: 1200px) {
	.sub_top_title{
		margin-bottom: 40px;
	}
}

@media screen and (max-width: 767px) {
	.sub_top_title{
		font-size: 24px;
		margin-bottom: 30px;
	}
}
@media screen and (max-width: 580px) {
	.sub_top_title{
		font-size: 22px;
		margin-bottom: 20px;
	}
}


/* 헤더 */



/* 공통 */
.textColor.green{
	color: #00A990;
}
.textColor.orange{
	color:#f47216;
}
.textColor.blue{
	color: #1c63b7;
}


/* contents 공통 */
.summary_common {
    display: flex;
    flex-flow: row nowrap;
	padding: 0 0 30px 0;
    justify-content: space-between;
    align-items: center;
	border-bottom: 2px solid #222;
}

.summary_common .logo img
{
	width: 110px;
}

.summary_common .text
{
	width: calc(100% - 137px);
	margin: 0px;
}

.summary_common .text p
{
	color: #222;
	font-size: 18px;
	line-height: 27px;
}

.summary_common .text .emphasis
{
	margin: 0 0 15px 0;
	color: #222;
	font-size: 22px;
	font-weight: 600;
}

@media screen and (max-width: 1024px) {
    .summary_common > .text > .emphasis {
        font-size: 20px;
        line-height: 28px;
    }

    .summary_common .text p {
        word-break: break-all;
    }
}

@media screen and (max-width: 850px) {
    .summary_common .logo img {
        width: 90px;
    }

    .summary_common > .text {
        width: calc(100% - 110px);        
    }

    .summary_common .text .emphasis {
        margin: 0 0 7px 0;
    }
}

@media screen and (max-width: 767px) {
    .summary_common > .text > .emphasis {
        font-size: 18px;
        line-height: 23px;
    }

}

@media screen and (max-width: 630px) {
    .summary_common {
        align-items: flex-start;
		padding: 0 0 15px 0;
    }

    .summary_common .logo img {
        width: 40px;
    }

    .summary_common > .text {
        width: calc(100% - 50px);        
    }

    .summary_common .text p {
        font-size: 16px;        
        line-height: 23px;
    }
}

.info_title_box {
	display: flex;
	flex-flow: column;
	gap: 15px;
	margin-bottom: 50px;
}

.info_text {
	font-size: 18px;
	font-weight: 500;
	line-height: 25px;
	word-break: keep-all;
}

.info_title {
    font-size: 30px;
    font-weight: 800;
    line-height: 40px;
}

.list_top70 { margin-top: 70px; }

.info_list {
    display: flex;
    flex-flow: row wrap;
    gap: 50px 150px;
    justify-content: space-between;
}

.info_list > div {
    display: flex;
    flex-flow: column;
    gap: 35px;
    width: calc(50% - 75px);
    padding-bottom: 50px;
    border-bottom: 1px solid #ECECEC;
}

.info_list > div.min100 {
	width: 100%;
}

.info_list > div.bb_none,
.info_list > div:last-child {
    border-bottom: 0px;
}

.info_list > div > h3 {
    position: relative;
    font-size: 25px;
    font-weight: 700;
    line-height: 25px;   
    padding-bottom: 15px; 
}

.info_list > div > h3::after {
    position: absolute;
    content: '';
    width: 100px;
    height: 1px;
    background: #222222;
    bottom: 0px;
    left: 0px;
}

.info_list > div > ul {
    display: flex;
    flex-flow: column;
    gap: 15px;
}

.info_list > div > ul > li {
    position: relative;
    font-size: 18px;
    font-weight: 400; 
    line-height: 27px;
    padding-left: 15px;
}

.info_list > div > ul > li::after {
    position: absolute;
    content: '';
    width: 5px;
    height: 5px;
    background: #00A990;
    border-radius: 50%;
    top: 10px;
    left: 0px;
}

.info_list > div > ul > li.title {
	padding-left: 0px;
	font-weight: 700;	
	color: #1C63B7;
}

.info_list > div > ul > li.text {
	padding-left: 0px;
}

.info_list > div > ul > li.title::after,
.info_list > div > ul > li.text::after {
	display: none;
}

.info_list .txt_etc {
    position: relative;
    display: block;
    font-size: 16px;    
    margin-top: 5px;
    padding-left: 18px;
    color: #00A990;
	line-height: 22px;
}

.info_list .txt_etc::after {
    position: absolute;
    content: '※';
    width: 16px;
    height: 100%;
    top: 1px;    
    left: 0px;
    font-family: 'Roboto';
    font-weight: 600;
}

.info_list .txt_etc.blue_txt {
    font-size: 20px;
    color: #1C63B7;
    font-weight: 700;
    padding-left: 22px;
}

.info_list .blue_txt::after {
    top: 0px;
    width: 18px;
    line-height: 22px;
}

.flow_chart {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: stretch;
	width: 100%;
	gap: 30px;
}

.flow_chart > li {
	position: relative;	
	background: #2064B4;	
}

.flow_chart > li::after {
	position: absolute;
	content: url('../images/flow_arrow.svg');
	width: 30px;
	height: 30px;
	top: 50%;
	right: -30px;	
	transform: translateY(-50%);
	text-align: center;
	line-height: 30px;
}

.flow_chart > li:last-child:after {
	display: none;	
}

.flow_chart > li > div {
	position: relative;
	display: flex;
    flex-flow: column;
    border: 1px solid #DEDEDE;
    border-top: 3px solid #b4b4b4;
	background: #FFF;
    height: 100%;
    justify-content: space-between;
    align-items: center;	
	padding: 25px 15px;
	border-radius: 0 0 30px 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 23px;
	word-break: keep-all;
	text-align: center;
}

.flow_chart > li:first-child > div::after,
.flow_chart > li:last-child > div::after {
	position: absolute;
	content: '';
	width: 100%;
	height: 3px;
	background: linear-gradient(92deg, #08BFA4, #FB7B21, #1C63B7);
	top: -3px;
	left: 0px;
	z-index: 1;
}

.flow_chart > li > div > span {
	word-break: keep-all;
	font-size: 16px;
	line-height: 20px;
	font-weight: 500;
	color: #1C63B7;
	text-align: center;
	margin-top: 10px;
}


.flow_03 > li { width: 33.3334%; }
.flow_04 > li { width: 25%; }
.flow_05 > li { width: 20%; }

.btn_type01 {
	position: relative;
    display: flex;
    flex-flow: row nowrap;
    gap: 15px;
    border: 1px solid #222222;
    border-radius: 11px;
    padding: 25px 35px 25px 30px;
    font-size: 18px;
    line-height: 27px;
	font-weight: 600;
	width: 340px;
	align-items: center;
	transition: 0.3s;
	box-shadow: 5px 5px 15px hsla(0, 0%, 0%, 0.07);
}

.btn_type01 > span {
	display: flex;
	width: 36px;
	height: 36px;	
}

.btn_type01::after {
	position: absolute;
	content: url('../images/counsel_button_arrow.svg');
	width: 25px;
	height: 25px;
	top: 50%;
	right: 30px;	
	transform: translateY(-50%);
	transition: 0.3s;
}

.btn_type01:hover {
	box-shadow: none;
}

.btn_type01.btn_gdn > span {
	width: auto;
	height: auto;
}

@media screen and (max-width: 1200px) {
    .info_list {
		gap: 50px 80px;
	}
	
	.info_list > div {
		width: calc(50% - 40px);
	}
}

@media screen and (max-width: 1024px) {
	.info_title {
        font-size: 27px;
        line-height: 35px;
    }

	.list_top70 {
		margin-top: 50px;
	}

	.info_list {
		gap: 35px 0px;
	}
	
	.info_list > div {
		width: 100%;
		gap: 25px;
		padding-bottom: 35px;
	}

	.info_list > div > h3 {
		font-size: 23px;
	}
	
	.info_list > div.bb_none {
		border-bottom: 1px solid #ECECEC;
	}
}

@media screen and (max-width: 768px) {
	.info_title {
        font-size: 25px;
        line-height: 32px;
    }

	.info_list > div > h3 {
        font-size: 21px;
    }

	.info_list > div > ul {
		gap: 10px;
	}

	.flow_chart {
		flex-flow: row wrap;
		justify-content: flex-start;
		gap: 15px 30px;
	}

	.flow_03 > li { width: calc(33.3334% - 30px); }

	.flow_04 > li { width: calc(25% - 30px); }

	.flow_05 > li { width: calc(33.3334% - 30px);}

	.flow_chart > li > div {
		padding: 17px 0;
		font-size: 16px;
		line-height: 20px;
	}
}

@media screen and (max-width: 630px) {
	.info_title {
        font-size: 23px;
        line-height: 30px;
    }

	.info_text {
		font-size: 17px;
		line-height: 23px;
		word-break: break-all;
	}

	.list_top70 {
		margin-top: 30px;
	}

	.info_list {
        gap: 25px 0px;
    }

	.info_list > div {
        gap: 20px;
        padding-bottom: 25px;
    }

	.info_list > div > h3 {
        font-size: 20px;
    }

	.info_list > div > ul {
        gap: 7px;
    }

	.info_list > div > ul > li {
		font-size: 17px;
		line-height: 23px;
		word-break: break-all;
		padding-left: 12px;
	}

	.info_list > div > ul > li::after {
		width: 4px;
		height: 4px;
	}

	.flow_03 > li { width: calc(50% - 30px); }
	
	.flow_04 > li { width: calc(50% - 30px); }

	.flow_05 > li {
		width: calc(50% - 30px);
	}

	.btn_type01 {
		padding: 20px 30px 20px 25px;
		font-size: 17px;
		line-height: 24px;
		width: 280px;
		margin: 0 auto;
	}

	.btn_type01 > span {
		width: 30px;
		height: 30px;
	}

	.btn_type01::after {
		right: 25px;
	}

	.info_list .txt_etc {
		font-size: 15px;
		padding-left: 16px;
	}
	
}



/* table 공통 */
.table_common {
	border-top: 2px solid #222222;	
}

.table_common thead {
	border-bottom: 1px solid #222222;
}

.table_common thead th,
.table_common thead td {
	padding: 17px 5px;
	text-align: center;
	font-weight: 600;
}

.table_common tbody th,
.table_common tbody td {
	border-bottom: 1px solid #ECECEC;
	padding: 20px;
	font-weight: 400;
}

.table_common th {
	background: #F2F7FF;	
}

.table_common td:not(:last-child) {
	border-right: 1px solid #ECECEC;
}

.table_common th,
.table_common td {
    text-align: center;
	font-size: 18px;
	word-break: keep-all;
}

.rowBorder { border-bottom: 1px solid #222222; }
.colBorderR { border-right: 1px solid #ECECEC; }
.colBorderL { border-left: 1px solid #ECECEC; }

@media screen and (max-width: 1024px) {
	.table_common thead th,
	.table_common thead td {
		padding: 13px 5px;
	}

	.table_common tbody th,
	.table_common tbody td {
		padding: 15px 10px;
	}
}

@media screen and (max-width: 767px) {
	.table_common thead th,
	.table_common thead td {
		padding: 10px 5px;
	}

	.table_common tbody th,
	.table_common tbody td {
		padding: 12px 5px;
	}

	.table_common th,
	.table_common td {
		font-size: 17px;
		word-break: break-all;
	}
}

@media screen and (max-width: 630px) {
	.table_box {
		display: block;
		width: 100%;
		overflow-x: auto;
	}
}