@charset "utf-8";
@import url(reset.css);


@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');


*{
font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}




/* ######## 공통스타일 ######### */
.wrap{ width: 72.72%; margin: 0 auto; }

.sub_tit_box{
	text-align: center;
	padding-bottom: 20px;
	position: relative;
}
.sub_tit_box::after{
	content: "";
	width: 45px; height: 1px;
	background-color: #999;
	position: absolute;
	bottom: 0; left: 50%;
	transform: translateX(-50%);
}
.sub_tit_box p{
	font-size: 0.8125rem;
	color: #999;
	letter-spacing: 0.1rem;
}
.sub_tit_box h4{
	line-height: 1.4;
	font-size: 1.5625rem;
	font-weight: 400; color: #222;
	margin-top: 10px;
}
.sub_tit_box h4 .color{
	color: #0dacd0; font-size: 2.1875rem;
	font-weight: 600;
}




/* ####### CSS 시작 ####### */


.modal_bg{
	width: 100%; height: 100vh;
	background: rgba(0,0,0,0.3);
	position: fixed; top: 0; left: 0;
	z-index: 1000;
    display: none;
}


.modal{
	width: 1100px; height: 70vh;
	position: fixed; top: 52%; left: 50%;
	transform: translate(-50%, -50%);
	background: #fff; overflow-y: scroll;
	z-index: 1001;
    display: none;
}

.modal .main_tit{
	padding: 45px 0 50px;
	text-align: center;
	margin-top: 0;
}
	.modal01 .main_tit{
		background: url(/img/modal/01/tit_bg.jpg) no-repeat;
		background-position: center;
		background-size: cover;
	}
	.modal02 .main_tit{
		background: url(/img/modal/02/tit_bg.jpg) no-repeat;
		background-position: center;
		background-size: cover;
	}
	.modal03 .main_tit{
		background: url(/img/modal/03/tit_bg.jpg) no-repeat;
		background-position: center;
		background-size: cover;
	}
	.modal04 .main_tit{
		background: url(/img/modal/04/tit_bg.jpg) no-repeat;
		background-position: center;
		background-size: cover;
	}
	.modal05 .main_tit{
		background: url(/img/modal/05/tit_bg.jpg) no-repeat;
		background-position: center;
		background-size: cover;
	}


.modal .main_tit p{
	color: #fff;
	font-size: 1rem;
}
.modal .main_tit h2{
	font-size: 3.75rem;
	color: #f7b146;
	font-weight: 600;
	margin-top: 24px;
}



.modal .main_desc{
	text-align: center;
	padding: 80px 0;
}
.modal .main_desc h3{
	font-size: 1.875rem; font-weight: 600;
	padding-bottom: 20px;
	position: relative;
}
.modal .main_desc h3::after{
	content: "";
	width: 45px; height: 1px;
	background-color: #999;
	position: absolute;
	bottom: 0; left: 50%;
	transform: translateX(-50%);
}

.modal .main_desc p{
	margin-top: 20px;
	font-size: 1rem; line-height: 1.2;
}
.modal .main_desc p .color{
	font-size: inherit;
	color: #0dacd0;
}


.modal .modal_sec01{
	background-color: #f8f8f8;
	padding: 80px 0;
}
.modal .modal_sec01 .type_box{
	display: flex; justify-content: center;
	margin-top: 30px;
}
.modal .modal_sec01 .type_box .type{
	/* width: 30%; */
	width: 33%;
	overflow: hidden;
	border-bottom: 7px solid #0dacd0;
}
.modal .modal_sec01 .type_box .type:not(:last-of-type){
	/* margin-right: 5%; */
	margin-right: 3%;
}
.modal .modal_sec01 .type_box .type .img_box{
	position: relative;
	background-color: #fff;
	width: 100%; padding-bottom: 175px;
	overflow: hidden;
}
.modal .modal_sec01 .type_box .type .img_box img{
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%,-50%);
}

.modal .modal_sec01 .type_box .type .txt_box{
	background-color: #fff;
	box-sizing: border-box;
	padding: 25px 0;
	text-align: center;
}
.modal .modal_sec01 .type_box .type .txt_box h5{
	color: #0dacd0;
	font-size: 1.375rem; font-weight: 600;
}
.modal .modal_sec01 .type_box .type .s_font h5{
    font-size: 1.2rem;
}

.modal .modal_sec01 .type_box .type .txt_box p{
	margin-top: 25px;
	line-height: 1.2;
}


.modal .modal_point_sec{
	padding: 80px 0;
}
.modal .point_tit{
	text-align: center;
    display: flex; flex-direction: column;
    align-items: center;
}
.modal .point_tit img{
    width: 48px;
}

.modal .point_tit h3{
    font-size: 2.1875rem;
    font-weight: 600;
    display: inline-block;
    position: relative;
    padding: 0 30px;
    margin-top: 30px;
}

.modal .point_tit h3 .tri_left{
    position: absolute;
    top: 41%; left: 0;
    transform: translateY(-50%);
    width: 0; height: 0;
    border-left: 9px solid #f7b146;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-right: 9px solid transparent;
}
.modal .point_tit h3 .tri_right{
    position: absolute;
    top: 41%; right: 0;
    transform: translateY(-50%);
    width: 0; height: 0;
    border-right: 9px solid #f7b146;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 9px solid transparent;
}

.modal .point_tit p{
    font-size: 0.875rem;
    margin-top: 18px;
}

.modal .modal_point_sec .point_box{
    margin-top: 80px;
    display: flex; align-items: center;
}

.modal .modal_point_sec .point_box .point_left{
    width: 50%; padding-bottom: 45%;
    padding-right: 2.5%;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}
.modal .modal_point_sec .point_box .point_left img{
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
}

.modal .modal_point_sec .point_box .point_right{
    width: 50%;
    padding-left: 2.5%;
    box-sizing: border-box;
}

.modal .modal_point_sec .point_box .point_right h4{
    font-size: 1.5625rem;
    font-weight: 400; line-height: 1.3;
    padding-bottom: 25px;
    position: relative;
}
.modal .modal_point_sec .point_box .point_right h4::after{
    content: "";
    width: 45px; height: 1px;
    background-color: #999;
    position: absolute;
    bottom: 0; left: 0;
}
.modal .modal_point_sec .point_box .point_right h4 .color{
    font-size: 2.1875rem;
    color: #0dacd0; font-weight: 600;
}

.modal .modal_point_sec .point_box .point_right ul{
    margin-top: 25px;
}

.modal .modal_point_sec .point_box .point_right ul li{
    font-size: 1rem;
}
.modal .modal_point_sec .point_box .point_right ul li:not(:last-of-type){
    margin-bottom: 20px;
}
.modal .modal_point_sec .point_box .point_right ul li .number{
    display: inline-block;
    width: 30px; height: 30px;
    border-radius: 50%;
    background-color: #0dacd0; color: #fff;
    line-height: 30px; text-align: center;
    font-size: 1rem; font-weight: 600;
    margin-right: 10px;
}
.modal .modal_point_sec .point_box .point_right ul li:nth-of-type(2n) .number{
    background-color: #f7b146;
}


.modal .modal_step_sec{
    padding: 85px 0;
    position: relative;
}
.modal .modal_step_sec::after{
    content: "";
    width: 85%; height: 1px;
    border-bottom: 2px dashed #999;
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
}

    .modal02 .modal_step_sec::after{display: none;}
    .modal03 .modal_step_sec::after{display: none;}
    .modal05 .modal_step_sec::after{display: none;}

.modal .modal_step_sec ul{
    display: flex; justify-content: center;
    margin-top: 25px;
}
    .modal03 .modal_step_sec ul{
        margin-top: 80px;
    }

.modal .modal_step_sec ul li{
    width: 23.125%;
}
.modal .modal_step_sec ul li:not(:last-of-type){
    margin-right: 2.5%;
}

.modal .modal_step_sec ul li .img_box{
    width: 100%; height: 220px;
    position: relative;
    overflow: hidden;
}
.modal .modal_step_sec ul li .img_box img{
    position: absolute;
    top: 50%; transform: translateY(-50%);
}
    .modal01 .modal_step_sec ul .step01 .img_box img{
        left: -20%;
    }
    .modal01 .modal_step_sec ul .step02 .img_box img{
        left: -35%;
    }
    .modal01 .modal_step_sec ul .step03 .img_box img{
        left: -20%;
    }
    .modal01 .modal_step_sec ul .step04 .img_box img{
        left: -25%; top: 2%;
    }

    .modal:not(.modal01) .modal_step_sec ul li .img_box img{
        left: 50%; transform: translate(-50%,-50%);
    }

.modal .modal_step_sec ul li .txt_box{
    box-sizing: border-box;
    padding-top: 30px;
}
.modal .modal_step_sec ul li .txt_box .step_tit{
    text-align: center;
}
.modal .modal_step_sec ul li .txt_box .step_tit span{
    display: inline-block;
    background: #f7b146; color: #fff;
    font-size: 0.8125rem; font-weight: 600;
    padding: 5px 12px; border-radius: 20px;
    letter-spacing: -0.01rem;
}
.modal .modal_step_sec ul li .txt_box .step_tit h5{
    margin-top: 20px;
    color: #0dacd0; font-size: 1.125rem;
    font-weight: 600;
}

.modal .modal_step_sec ul li .txt_box p{
    margin-top: 15px;
    line-height: 1.3; color: #666;
    font-size: 0.875rem; text-align: center;
}



.modal_different_sec{
    padding: 80px 0;
}

.modal_different_sec .different_img_box{
    display: flex;
    align-items: center;
    margin-top: 35px;
}
.modal_different_sec .different_img_box .different01,
.modal_different_sec .different_img_box .different03{
    width: 37%;
    position: relative;
    display: flex; flex-direction: column;
    align-items: center;
}

.modal_different_sec .different_img_box .different01 p,
.modal_different_sec .different_img_box .different03 p{
    width: 200px; padding: 10px 0;
    border-radius: 30px;
    text-align: center;
    color: #333; font-size: 1.25rem;
    background-color: #e3e3e3;
}

.modal_different_sec .different_img_box .different03 p{
    background-color: #f7b146; color: #fff;
    font-weight: 700;
}

.modal_different_sec .different_img_box .different01 .img_box,
.modal_different_sec .different_img_box .different03 .img_box{
    margin-top: 45px;
}

.modal_different_sec .different_img_box .different01 .img_box img,
.modal_different_sec .different_img_box .different03 .img_box img{}

.modal_different_sec .different_img_box .different02{
    width: 26%;
    position: relative;
}
.modal_different_sec .different_img_box .different02 p{
    text-align: center;
    font-size: 4.375rem; font-weight: 600;
    position: relative;
}
.modal_different_sec .different_img_box .different02 p::before{
    content: "";
    width: 75px; height: 75px;
    border-radius: 50%; background-color: #e9e9e9;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    z-index: -1;
}

.modal_different_sec .different_table{
    width: 100%;
    border-collapse: collapse;
    margin-top: 35px;
}
.modal_different_sec .different_table tr{}
.modal_different_sec .different_table tr .td_normal{
    width: 37%;
    text-align: center;
    border: 1px solid #f0f0f0;
    padding: 15px 0;
    font-size: 1rem;
}
.modal_different_sec .different_table tr th{
    width: 26%;
    border: 1px solid #f0f0f0;
    padding: 15px 0;
    font-size: 1.125rem;
    font-weight: 700;
}
.modal_different_sec .different_table tr .td_special{
    width: 37%;
    text-align: center;
    border: 1px solid #f0f0f0;
    padding: 15px 0;
    font-size: 1rem;
    color: #0dacd0;
    font-weight: 600;
}



.modal_recommend_sec{
    padding: 80px 0;
    background: #f8f8f8;
}

.modal_recommend_sec .recommend_box{
    margin-top: 25px;
    display: flex; justify-content: center;
}
.modal_recommend_sec .recommend_box .recommend{
    width: 19.75%;
    box-sizing: border-box;
    border: 1px solid #0dacd0;
    background-color: #0dacd0;
    padding: 20px 0;
    text-align: center;
}
.modal_recommend_sec .recommend_box .recommend:not(:last-of-type){
    margin-right: 2.75%;
}
.modal_recommend_sec .recommend_box .recommend h5{
    font-weight: 400; font-size: 0.875rem;
    color: #fff;
}
.modal_recommend_sec .recommend_box .recommend h5 i{
    display: inline-block;
    width: 36px; height: 23px;
    background: url(/img/modal/01/icn_check.png) no-repeat;
    background-position: left top;
}
.modal_recommend_sec .recommend_box .recommend p{
    margin-top: 35px;
    color: #fff;
    line-height: 1.4; font-weight: 600;
}

.modal_recommend_sec .recommend_box .recommend:nth-of-type(2n){
    background-color: #fff;
}

.modal_recommend_sec .recommend_box .recommend:nth-of-type(2n) h5{
    font-weight: 400; font-size: 0.875rem;
    color: #0dacd0;
}
.modal_recommend_sec .recommend_box .recommend:nth-of-type(2n) h5 i{
    background-position: left bottom;
}
.modal_recommend_sec .recommend_box .recommend:nth-of-type(2n) p{
    color: #222;
}


.modal_qna_sec .qna_box{
    margin-top: 75px;
}

.modal_qna_sec .qna_box dl{}
.modal_qna_sec .qna_box dl:not(:last-of-type){
    margin-bottom: 30px;
}

.modal_qna_sec .qna_box dl dt{
    box-sizing: border-box;
    background-color: #0dacd0;
    font-size: 1.125rem; font-weight: 600;
    color: #fff;
    vertical-align: middle;
    padding: 15px 20px; line-height: 1.875rem;
}
.modal_qna_sec .qna_box dl dt span{
    display: inline-block;
    font-size: 1.875rem; color: inherit;
    font-weight: inherit;
    vertical-align: inherit;
    margin-right: 35px;
}

.modal_qna_sec .qna_box dl dd{
    box-sizing: border-box;
    padding: 12px 20px;
    font-weight: 400;
    display: flex;
    align-items: center;
    line-height: 1.3;
    border: 1px solid #0dacd0;
    word-break: keep-all;
    font-size: 1.125rem;
}
.modal_qna_sec .qna_box dl dd span{
    display: inline-block;
    font-size: 1.875rem; color: #0dacd0;
    font-weight: 600;
    vertical-align: inherit;
    margin-right: 35px;
}

.modal_qna_sec .qna_box dl:nth-of-type(2n) dt{
    background-color: #f7b146;
}
.modal_qna_sec .qna_box dl:nth-of-type(2n) dd{
    border-color: #f7b146;
}
.modal_qna_sec .qna_box dl:nth-of-type(2n) dd span{
    color: #f7b146;
}



.modal_list_sec{
    padding: 80px 0;
    background-color: #f8f8f8;
}
.modal_list_sec ul{
    margin-top: 25px;
}
.modal_list_sec ul li{
    font-size: 1.125rem;
    background-color: #fff;
    box-sizing: border-box;
    padding: 10px; border-radius: 50px;
}
.modal_list_sec ul li:not(:last-of-type){
    margin-bottom: 15px;
}
.modal_list_sec ul li .number{
    display: inline-block;
    width: 40px; height: 40px;
    background-color: #0dacd0;
    color: #fff;
    font-size: 1.5rem; font-weight: 600;
    border-radius: 50%;
    text-align: center; line-height: 40px;
    margin-right: 35px;
}
.modal_list_sec ul li:nth-of-type(2n) .number{
    background-color: #f7b146;
}


.modal .last_banner{
    background: url(/img/modal/01/last_bg.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    padding: 65px 0;
}
.modal .last_banner .tit_wrap{}
.modal .last_banner .tit_wrap > span{
    font-size: 0.9375rem;
    color: #cbcbcb; letter-spacing: 0.3rem;
}
.modal .last_banner .tit_wrap h3{
    margin-top: 35px;
    font-size: 2.25rem; color: #fff;
    line-height: 1.3;
    font-weight: 400;
}
.modal .last_banner .tit_wrap h3 span{
    font-size: inherit;
    color: #f7b146; font-weight: 600;
}
.modal .last_banner .tit_wrap p{
    font-size: 0.9375rem;
    color: #fff; letter-spacing: 0.3rem;
    margin-top: 35px;
}


.modal_info_sec{
    padding: 80px 0;
}

.modal_info_sec .info_table{
    border-collapse: collapse;
    margin-top: 25px;
    border: 1px solid #999;
    width: 100%;
}

.modal_info_sec .info_table tr{
    
}

.modal_info_sec .info_table tr th{
    font-size: 1.125rem; font-weight: 700;
    background-color: #0dacd0; color: #fff;
    padding: 15px 8px; box-sizing: border-box;
    vertical-align: middle;
    position: relative;
    width: 17%;
}
.modal_info_sec .info_table tr:not(:last-of-type) th::after{
    content: "";
    width: 90%; height: 2px;
    background-color: #fff;
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
}

.modal_info_sec .info_table tr td{
    font-size: 1.125rem; line-height: 1.3;
    padding: 15px 8px; box-sizing: border-box;
    vertical-align: middle;
    position: relative;
    text-align: center;
}
.modal_info_sec .info_table tr:not(:last-of-type) td::after{
    content: "";
    width: 90%; height: 2px;
    background-color: #999;
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
}

.modal_info_sec .info_table tr td .color{
    font-weight: 600; font-size: inherit;
    color: #0dacd0;
}



a.btn_close{
    width: 1100px; height: 50px;
    line-height: 50px;
    position: fixed;
    top: 12vh; left: 50%;
    transform: translateX(-50%);
    z-index: 1002;
    background-color: #0dacd0;
    color: #fff; font-size: 20px;
    font-weight: 600; text-align: center;
    display: none;
}
a.btn_close span{
    display: inline-block;
    width: 20px; height: 20px;
    position: relative;
}
a.btn_close span i{
    width: 100%; height: 3px;
    background-color: #fff;
    position: absolute;
    left: 50%;
}
a.btn_close span i:nth-of-type(1){
    transform: rotate(45deg) translateX(-50%);
    top: 87%;
}
a.btn_close span i:nth-of-type(2){
    transform: rotate(-45deg) translateX(-50%);
    top: 17%;
}












/* ###################################################
반응형 ######################################
####################################################### */

@media screen and (max-width: 1100px){
    .modal{ width: 90%; }

    .wrap{
        width: 90%;
    }

    a.btn_close{ width: 90%; }
}


@media screen and (max-width: 912px){
    .modal .modal_sec01 .type_box .type{
        width: 33%;
    }
    .modal .modal_sec01 .type_box .type:not(:last-of-type){
        margin-right: 3%;
    }

    .modal .modal_point_sec .point_box .point_left{
        width: 45%;
    }
    .modal .modal_point_sec .point_box .point_right{
        width: 55%;
        padding-left: 4.5%;
    }
}


@media screen and (max-width: 820px){


    .modal .main_desc{
        padding: 65px 0;
    }

    .modal .modal_sec01{
        padding: 65px 0;
    }

    .modal .modal_point_sec{
        padding: 65px 0;
    }

    .modal .modal_point_sec .point_box .point_left{
        width: 40%;
    }
    .modal .modal_point_sec .point_box .point_right{
        width: 60%;
    }

    .modal .modal_step_sec{
        padding: 65px 0;
    }

    .modal_different_sec{
        padding: 65px 0;
    }

    .modal_recommend_sec{
        padding: 65px 0;
    }
    .modal .modal_recommend_sec .recommend_box{
        flex-wrap : wrap;
    }
    .modal .modal_recommend_sec .recommend_box .recommend{
        width: 30%;
    }
    .modal .modal_recommend_sec .recommend_box .recommend:nth-of-type(3){
        margin-right: 0;
    }
    .modal .modal_recommend_sec .recommend_box .recommend:nth-last-of-type(-n+2){
        margin-top: 2.75%;
    }


    .modal01 .modal_qna_sec .qna_box dl:nth-of-type dd br{
        display: none;
    }

    .modal03 .modal_step_sec ul{
        margin-top: 65px;
    }

    .modal_info_sec .info_table tr td{
        word-break: keep-all;
    }



}


@media screen and (max-width: 768px){
    .modal .main_tit h2{
        font-size: 50px;
        margin-top: 10px;
    }

    .modal .main_desc h3{
        font-size: 25px;
    }
    .modal .main_desc p{
        font-size: 15px;
    }


    .modal .modal_sec01 .type_box .type:not(:last-of-type) {
        margin-right: 2%;
    }
    .modal .modal_sec01 .type_box .type .txt_box h5{
        font-size: 20px;
    }

    .modal .modal_sec01 .type_box .type .txt_box p{
        word-break: keep-all;
        font-size: 15px;
    }

    .modal .point_tit h3{
        font-size: 30px;
    }
    .modal .point_tit h3 .tri_left {
        border-left: 7px solid #f7b146;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
        border-right: 7px solid transparent;
    }
    .modal .point_tit h3 .tri_right {
        border-right: 7px solid #f7b146;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
        border-left: 7px solid transparent;
    }

    .modal .modal_point_sec .point_box .point_right h4{
        font-size: 22px;
    }
    .modal .modal_point_sec .point_box .point_right h4 .color{
        font-size: 30px;
    }
    .modal .modal_point_sec .point_box .point_right ul li{
        font-size: 15px;
    }

    .sub_tit_box h4{
        font-size: 22px;
    }
    .sub_tit_box h4 .color{
        font-size: 30px;
    }

    .modal .modal_step_sec ul li .txt_box{
        padding-top: 20px;
    }
    .modal .modal_step_sec ul li .txt_box p{
        margin-top: 10px;
    }

    .modal_different_sec .different_img_box .different01,
    .modal_different_sec .different_img_box .different03{
        width: 40%;
    }
    .modal_different_sec .different_img_box .different02{
        width: 24%;
    }

    .modal_different_sec .different_img_box .different02 p{
        font-size: 60px;
    }


    .modal_different_sec .different_table tr .td_normal{
        font-size: 15px;
        width: 40%;
    }
    .modal_different_sec .different_table tr th{
        font-size: 16px;
        width: 24%;
    }
    .modal_different_sec .different_table tr .td_special{
        font-size: 15px;
        width: 40%;
    }

    .modal_recommend_sec .recommend_box .recommend p{
        font-size: 15px;
    }

    .modal_qna_sec .qna_box dl dt{
        font-size: 17px;
    }
    .modal_qna_sec .qna_box dl dd{
        font-size: 17px;
    }

    .modal_list_sec ul li{
        font-size: 15px;
    }
    .modal_list_sec ul li .number{
        font-size: 20px;
    }

    .modal .last_banner .tit_wrap h3{
        font-size: 32px;
    }


    .modal_info_sec .info_table tr th{
        font-size: 16px;
    }
    .modal_info_sec .info_table tr td{
        font-size: 16px;
    }

}


@media screen and (max-width: 600px){
    .modal{
        width: 95%;
    }

    a.btn_close{
        width: 95%; height: 43px;
        line-height: 43px;
        font-size: 16px;
    }
    a.btn_close span{
        width: 16px; height: 16px;
    }

    .sub_tit_box h4{
        margin-top: 5px;
        font-size: 20px;
    }
    .sub_tit_box h4 .color{
        font-size: 27px;
    }
    .sub_tit_box p{
        font-size: 11px;
    }


    .modal .main_tit p{
        font-size: 14px;
    }

    .modal .main_tit h2{
        font-size: 35px;
    }

    .modal .main_desc p{
        word-break: keep-all;
    }

    .modal .main_desc {
        padding: 50px 0;
    }
    .modal .main_desc h3{
        font-size: 20px;
    }
    .modal .main_desc p{
        font-size: 14px;
        margin-top: 15px;

        padding: 0 15px;
    }


    .modal .modal_sec01{
        padding: 50px 0;
    }
    .modal .modal_sec01 .type_box{
        flex-wrap: wrap;
    }
    .modal .modal_sec01 .type_box .type{
        width: 100%;
    }
    .modal .modal_sec01 .type_box .type:not(:last-of-type){
        margin-right: 0;
        margin-bottom: 25px;
    }



    .modal .modal_point_sec{
        padding: 50px 0;
    }
    .modal .point_tit img {
        width: 35px;
    }
    .modal .point_tit h3{
        font-size: 27px;
        padding: 0 22px;
    }
    .modal .modal_point_sec .point_box{
        flex-wrap: wrap;
        margin-top: 50px;
    }

    .modal .modal_point_sec .point_box .point_left{
        width: 100%; padding-bottom: 85%;
    }

    .modal .modal_point_sec .point_box .point_right{
        width: 100%;
        margin-top: 25px;
    }
    .modal .modal_point_sec .point_box .point_right h4{
        font-size: 20px;
    }
    .modal .modal_point_sec .point_box .point_right h4 .color{
        font-size: 27px;
    }

    .modal .modal_point_sec .point_box .point_right ul li{
        font-size: 14px;
    }
    .modal .modal_point_sec .point_box .point_right ul li .number{
        width: 25px; height: 25px;
        line-height: 25px;
        font-size: 14px;
        margin-right: 5px;
    }


    .modal .modal_step_sec{
        padding: 50px 0;
    }
    .modal .modal_step_sec ul{
        flex-wrap: wrap;
    }

        .modal03 .modal_step_sec ul{
            margin-top: 50px;
        }

    .modal .modal_step_sec ul li{
        width: 100%;
    }

    .modal .modal_step_sec ul li .txt_box .step_tit h5{
        font-size: 16px;
        margin-top: 14px;
    }
    .modal .modal_step_sec ul li:not(:last-of-type){
        margin-bottom: 30px;
    }
    .modal01 .modal_step_sec ul .step01 .img_box img {
        left: -20%; width: 175%;
    }
    .modal01 .modal_step_sec ul .step02 .img_box img {
        left: -9%;
    }
    .modal01 .modal_step_sec ul .step03 .img_box img {
        left: 0%; width: 100%;
    }
    .modal01 .modal_step_sec ul .step04 .img_box img {
        left: -1%;
    }


    .modal_different_sec{
        padding: 50px 0;
    }

    .modal_different_sec .different_img_box .different02{
        display: none;
    }
    .modal_different_sec .different_table tr th{
        display: none;
    }

    .modal_different_sec .different_img_box .different01,
    .modal_different_sec .different_img_box .different03{
        width: 50%;
    }
    .modal_different_sec .different_img_box .different01 p,
    .modal_different_sec .different_img_box .different03 p{
        width: 85%;
        font-size: 15px;
    }

    .modal_different_sec .different_img_box .different03 .img_box img{
        width: 100%;
    }
    .modal_different_sec .different_img_box .different01 .img_box img{
        width: 76%;
    }

    .modal_different_sec .different_table tr .td_normal{
        width: 50%;
        word-break: keep-all;
        padding: 10px;
        vertical-align: middle;
        font-size: 14px;
    }
    .modal_different_sec .different_table tr .td_special{
        width: 50%;
        word-break: keep-all;
        padding: 10px;
        vertical-align: middle;
        font-size: 14px;
    }


    .modal_recommend_sec{
        padding: 50px 0;
    }
    .modal .modal_recommend_sec .recommend_box .recommend{
        width: 47%;
    }
    .modal .modal_recommend_sec .recommend_box .recommend:nth-of-type(2n){
        margin-right: 0;
    }
    .modal .modal_recommend_sec .recommend_box .recommend:nth-of-type(3){
        margin-right: 2.75%;
    }
    .modal .modal_recommend_sec .recommend_box .recommend:nth-last-of-type(-n+3){
        margin-top: 2.75%;
    }

    .modal03 .modal_recommend_sec01 .recommend_box .recommend:nth-of-type(2){
        margin-top: 0;
    }
    .modal03 .modal_recommend_sec03 .recommend_box .recommend:nth-of-type(2){
        margin-top: 0;
    }



    .modal .modal_point_sec{
        padding: 50px 0;
    }
    .modal_qna_sec .qna_box{
        margin-top: 50px;
    }

    .modal_qna_sec .qna_box dl dt{
        font-size: 16px;
        word-break: keep-all;
        padding: 10px 15px;
    }
    .modal_qna_sec .qna_box dl dt span{
        font-size: 18px; margin-right: 25px;
    }

    .modal_qna_sec .qna_box dl dd{
        font-size: 15px;
        word-break: keep-all;
        padding: 7px 15px;
        align-items: flex-start;
    }
    .modal_qna_sec .qna_box dl dd span{
        font-size: 18px; margin-right: 25px;
    }


    .modal_list_sec{
        padding: 50px 0;
    }

    .modal_list_sec ul li{
        font-size: 14px; word-break: keep-all;
        position: relative;
        padding: 25px 16px 16px;
        text-align: center; line-height: 1.3;
    }
    .modal_list_sec ul li:not(:last-of-type) {
        margin-bottom: 25px;
    }
    .modal_list_sec ul li .number{
        width: 25px; height: 25px;
        font-size: 15px; line-height: 25px;
        margin-right: 25px;
        position: absolute;
        top: 0; left: 50%;
        transform: translate(-50%,-50%);
    }


    .modal .last_banner{
        padding: 40px 0;
    }
    .modal .last_banner .tit_wrap{
        text-align: center;
    }
    .modal .last_banner .tit_wrap > span{
        font-size: 11px;
    }
    .modal .last_banner .tit_wrap h3 {
        font-size: 24px;
        margin-top: 15px;
    }
    .modal .last_banner .tit_wrap p{
        font-size: 11px;
        word-break: keep-all;
        margin-top: 15px;
        line-height: 1.3;
    }


    .modal_info_sec .info_table tr{ 
        display: flex; flex-direction: column;
    }
    .modal_info_sec .info_table tr th{
        font-size: 14px; width: 100%;
    }
    .modal_info_sec .info_table tr th::after{
        display: none;
    }
    .modal_info_sec .info_table tr td{
        font-size: 14px; width: 100%;
    }
    .modal_info_sec .info_table tr td::after{ display: none; }
}