@charset "utf-8";
.usri_sec1, .usri_sec2 {margin-bottom:120px}
.usri_sec1 > p {font-size:24px;text-align: center;margin-bottom: 2rem;font-weight: 600;background-color: #f7f7f7;padding: 2rem;border-radius: 5rem;}
.usri_sec1 p span {color:var(--color-main)}
.user_list_wrap {
    /* background-color: #f8f8f8; */
    /* padding: 2rem; */
    border-radius: 2rem;
    border: 1px solid #ddd;
    padding: 1rem 0;
}
.user_list_wrap > li {/* padding: 60px 0; *//* background-color: #fff; */padding: 0 3rem;}
.user_list_wrap > li:last-child .user_list {border-bottom:unset;}
.user_list_wrap .user_list {
	display: flex;
	flex-direction: row;
	width: 100%;
	justify-content: space-between;
	align-items: flex-start;
	padding: 2rem 0;
	border-bottom: 1px dashed #ddd;
}
.user_list h5 {font-size: 20px;/* color: var(--color-main); */font-family: var(--font-point);width: 20%;word-break: keep-all;line-height: 1.5;letter-spacing: -.5px;}
.user_list p {
	width: 80%;
	color: #302d2c;
	line-height: 1.6;
	/* word-break: keep-all; */
}
.user_list_wrap .user_list ul, .user_list_wrap .user_list dl {width:82%}
.user_list_wrap .step li {width: 15.5%;}
.user_list_wrap .step li  p {width:85%}
.user_list dl {
    display: flex;
    flex-wrap: wrap;
}
.user_list dt {
    font-weight: 500;
    width: 10%;
    background-color: #f1f1f1;
    text-align: center;
    border-radius: 2rem;
    margin: 5px 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.user_list dd {
    width: 85%;
    padding: 5px;
    margin: 5px 0;
    margin-left: 1rem;
}
.usri_sec3 {padding-bottom:120px}
.usri_sec3 .user_list dt {width:15%}
.usri_sec3 .user_list dd {width: 83%;}
.usri_box {
    background-color: #EFF7FC;
    padding: 2rem 2rem 3rem;
    border-radius: 20px;
	margin:5rem 0 10%;
}
.usri_conts {
    background-color: #fff;
    padding: 4rem 3rem;
}
.usri_conts h4 {
    font-family: var(--font-point);
    text-align: center;
    margin-bottom: 2rem;
    font-size: 40px;
}
.usri_conts p {
}
.usri_conts p.ct {
    text-align: center;
    word-break: keep-all;
}
.usri_conts strong {font-weight:500;display: inline-block;margin: 1rem 0 .5rem;}
.usri_conts .conts_tit {
    padding-bottom: 3rem;
    margin-bottom: 3rem;
    border-bottom: 1px dashed #ccc;
}
.usri_conts dl {width: 100%;margin-bottom: 2rem;}
.usri_conts dl dt {
	display: inline-flex;
	align-items: center;
	color: var(--color-main);
	font-weight: 600;
	font-size: 20px;
	margin-bottom: .5rem;
	}
.usri_conts dl:last-of-type {margin-bottom:0}
.usri_conts dl dd {}
.usri_conts dl.one_line {
    display: inline-flex; 
    align-items: center;
    margin-top: 1rem;
    flex-wrap: wrap;
}
.usri_conts dl.one_line  dt {
    width: 7%;
    margin-bottom: 0;
}
.usri_conts dl.one_line  dd {
    width: 93%;
}
.usri_conts .conts_group {
    padding-left: 10px;
}
.usri_conts .conts_group > li {
    margin-bottom: .5rem;
}
.usri_conts i {
    font-size: 28px;
    margin-right: 8px;
}
.usri_logo {
    text-align: center;
    margin-top: 3rem;
}

.usri_conts .decimal {
    list-style: decimal;
    margin-left: 25px;
}
.usri_conts .decimal li, .usri_conts .square li {
    padding: 0 0 .2rem .5rem;
}
.usri_conts .square {list-style: square;margin-left: 30px;}
.square li::marker {color: #bebaba;}
li.none {list-style:none;}
li.none::before {display:none;}
li.none ul {}
.usri_conts .bar {}
.usri_conts .bar li {
    position: relative;
}
.usri_conts .bar li:before {
	content:"";
	width:8px;
	height: 1px;
	background-color: #2f6988;
	position:absolute;
	left:-10px;
	top: 13px;
}

.subbox {
    margin: 1rem 0;
    background-color: #f5f5f5;
    padding: 1rem 2rem;
}
.subbox ul {}
.subbox p, .subbox ul li {margin-bottom:.5rem}
.subbox span {
    color: #5b5b5b;
    text-align: right;
    display: block;
    font-size: 16px;
}
.subbox ul li p {margin-bottom:0}
.step {
    display: flex;
    width: 100%;
    justify-content: space-between;
    /* margin: 1rem 0; */
    flex-wrap: wrap;
}
.step li {width: calc(100% / 6);position: relative;margin-right: 1%;padding: 0;}
.step li:last-child {margin-right:0}
.step li p {
    /* border: 1px solid var(--color-main2); */
    /* box-shadow: 3px 3px 10px rgb(113 25 55 / 15%); */
    background: #FEF5F5;
    font-weight: 500;
    border-radius: 1rem;
    text-align: center;
    padding: 1rem;
    /* color: #fff; */
}
.step li:after {content:'';position: absolute;top: 50%;right: 0;width: 11px;height: 16px;background-image: url(/img/common/step.png);background-repeat: no-repeat;transform: translateY(-50%);}
.step li:last-child::after {display:none;}
.step2 {
    display: flex;
    justify-content: space-between;
    gap: 4rem;
}
.step2 li {
    width: 100%;
    text-align: center;
    background-color: #FEF5F5;
    font-weight: 500;
    border-radius: 1rem;
    padding: 2rem;
    position: relative;
}
.step2 li:after {content:'';position: absolute;top: 50%;right: 0;width: 11px;height: 16px;background-image: url(/img/common/step.png);background-repeat: no-repeat;transform: translateY(-50%);margin-right: -2.2rem;}
.step2 li:last-child::after {display:none}
.sflow {
    display: flex;
    justify-content: space-between;
}
.sflow li {
    width: 30%;
    padding: 1.5rem;
    border: 1px solid #eee;
    border-radius: 1rem;
    text-align: center;
    box-shadow: 0 2px 10px rgb(0 0 0 / 6%);
}
.sflow li p {width: 100%;color: #333;font-weight: 400;}
.sflow li strong {/* background-color: var(--color-main); */color: var(--color-main);width: 100%;display: inline-flex;align-items: center;justify-content: center;/* padding: .5rem; */border-radius: 2rem;margin-bottom: .6rem;font-weight: 600;}
.sflow li a:hover {color: var(--color-main);}
.sflow2 {
    flex-wrap: wrap;
    gap: 2rem;
}
.sflow2 li {width: 48%;padding: 2rem;text-align: left;position: relative;} 
.sflow2 li strong {
    background-color: unset;
    /* border: 1px solid var(--color-main); */
    color: var(--color-main);
    border-bottom: 1px dashed #ddd;
    padding-bottom: 1rem;
    border-radius: 0;
    display: inline-flex;
    justify-content: flex-start;
    font-weight: 600;
    margin-bottom: 1rem;
}
.sflow2 li span {background-color:var(--color-main);/* padding:.5rem; */margin-left:1rem;border-radius:2rem;display: inline-block;position: absolute;right: 0;margin-right: 2rem;}
.sflow2 li span a {color:#fff;font-size:16px;display: block;width:100%;height:100%;padding: .5rem 1rem;border-radius: 2rem;transition: all .3s;}
.sflow2 li span a:hover {box-shadow: 3px 3px 10px rgb(231 51 113 / 30%);color:#fff}
.usri_wrap {
    display: flex;
    justify-content: center;
    border: 8px solid #eee;
    padding: 2rem;
    border-radius: 2rem;
}
.usri_wrap .user_list {display: inline-flex;width: 80%;justify-content: center;}
.usri_wrap .user_list h5 {
    width: 20%;
}
.usri_wrap .user_list ul {width: 42%;}

/* PC */ 
@media only screen and (min-width:1024px) and (max-width: 1400px)  {
	.usri_conts {padding: 3rem 2rem;}
	.usri_conts dl.one_line dt {width: 9%;}
	.usri_conts dl.one_line dd {width:90%}
	.step li {word-break:keep-all}
}

/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1023px)*/ 
@media all and (max-width:1023px) {
	.usri_sec2 {/* padding:10% 0; */}
	.usri_sec1 > p {border-radius:2rem; word-break:keep-all}
	.user_list_wrap {border: 4px solid #eee;}
	.user_list_wrap .user_list {flex-wrap:wrap;padding: 2rem 0;}
	.user_list_wrap .user_list ul, .user_list_wrap .user_list dl {width:100%}
	.user_list_wrap .user_list ul {
    /* flex-wrap: wrap; */
    margin: 0;
    margin-top: .5rem;
}
	.user_list_wrap > li {padding: 0 1rem;}
	.user_list_wrap .step li {width:30%}
	.user_list h5 {font-size: 20px;width: 100%;word-break: break-word;margin-bottom: .5rem;}
	.user_list p {font-size: 18px;width: 100%;}
	.usri_sec3 .user_list dt {}
	.usri_sec3 .user_list dd {width:80%}
	
	.sflow {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
	.sflow li {
    width: 46%;
    margin-bottom: 1rem;
    padding: 1.5rem;
}
	.step ul.sflow {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
	.step ul.sflow li {
    width: 31%;
    margin-bottom: 1rem;
}
	.sflow li p {word-break:break-word;}
	.sflow2 li p {word-break:keep-all}
	.usri_box {
    margin: 3rem 0 10%;
    padding: 1rem 1rem 3rem;
}
	.usri_conts {
    padding: 2rem 1rem;
}
	.usri_conts dl.one_line {
    display: flex;
    align-items: flex-start;
}
	.usri_conts dl.one_line dt {width: 15%;font-size: 2.5vw;}
	.usri_conts dl.one_line dd {width: 85%;padding-bottom: .5rem;}
	.step > ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
	.step {
    margin: 0;
}
	.step li {
    width: 31%;
    margin-right: 0;
    padding-right: 2%;
    margin-bottom: 1rem;
}
	.step li p {width: 90%;padding: 1rem .5rem;}
	.step2 li {
    padding: 1rem;
    word-break: keep-all;
}
	.usri_wrap .user_list {width:100%}
	.usri_wrap .user_list h5 {width: 28%;}
	.usri_wrap .user_list ul {width: 72%;}
	.step.wd25 li {padding:0;width: 23%;margin-bottom: 0;}
}

/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/ 
@media all and (max-width:767px) {
	.usri_sec1, .usri_sec2 {margin-bottom:4rem} 
	.usri_sec1 > p {padding: 1.5rem;border-radius:1rem;font-size: 1.25rem;word-break: keep-all;}
	.user_list h5 {font-size:1.1rem}
	.user_list h5 br {display:none}
	.user_list p {font-size:1rem}
	.step li {width: 49%;}
	.user_list_wrap .user_list ul {flex-wrap: wrap;gap: 1rem;justify-content: flex-start;}
	.step2 li {width: 47%;padding: 1rem;letter-spacing: -1px;}
	.step2 li:after {
    margin-right: -1rem;
    height: 8px;
    background-size: contain;
}
	.usri_sec3 .user_list dt {width: 30%;padding: .3rem 0;margin-bottom: 0;}
	.usri_sec3 .user_list dd {width:100%;margin-left: 0;font-size: 1rem;margin-top: 0;}
	.sflow li {
    width: 100%;
    padding: 2rem 1rem;
    margin-bottom: 0;
}
	.usri_box {
    margin: 1rem 0 15%;
}
	.usri_conts dl.one_line dt, .usri_conts dl.one_line dd {font-size:4.5vw;width: 100%;}
	.usri_conts h4 {
    font-size: 7vw;
}
	.usri_conts .decimal{
    margin-left: 1rem;
}
	.usri_conts .conts_group {padding-left:0}
	.subbox {padding:1rem}

	.usri_conts .square {margin-left:1.5rem}
	.user_list_wrap .step li {width: 47%;}
	.step ul.sflow li{width:100%}
	.step .step_1 > li {
    width: 94%;
    margin-right: 0;
	}
	.step .step_2 li.etc div {width: 100%;}
	.step .step_2 li.etc {margin-top: -1.5rem;padding: 0;margin-bottom: 1.5rem;}
	.step .step_2 li.etc div {padding:.5rem}
	.step > ul.h_fix li.tit:after {
    transform: rotate(90deg);
    left: 50%;
    top: unset;
    bottom: 0;
    margin-bottom: -1rem;
}
	.step .step_2 li.etc:before {
    top: 7%;
}
	.step .step_2 li.tit {height: 63px;margin-bottom: 0;}
	.usri_wrap .user_list {
    width: 100%;
    flex-wrap: wrap;
} 
	.usri_wrap .user_list h5, .usri_wrap .user_list ul {width:100%}
	.usri_wrap {padding: 2rem 1rem;}
	.step.wd25 li {width: 47.5%;margin-bottom: 1rem;}
	.step.wd25 li:last-child, .step.wd25 li:nth-last-child(2) {margin-bottom:0}
}