@charset "utf-8";

.user_list_wrap {
    /* background-color: #f8f8f8; */
    /* padding: 2rem; */
    border-radius: 3rem;
    border: 8px solid #eee;
}
.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: 3rem 0;
	border-bottom: 1px dashed #ddd;
}
.user_list h5 {font-size: 22px;color: var(--color-main);font-family: var(--font-point);width: 16%;word-break: keep-all;line-height: 1.5;}
.user_list p {
	width: 82%;
	font-size: 19px;
	color: #676767;
	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_sec2 {
    padding: 120px 0;
}
.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: 2px 2px 5px rgb(0 0 0 / 20%);
    background: var(--color-main);
    font-weight: 500;
    border-radius: 3rem;
    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;}
.step.wd25 li {width: calc(100% / 4);padding: 0 2rem;margin-right: 0;}
.step.wd25 li:after {right: -6px;}
.sflow {
    display: flex;
    justify-content: space-between;
}
.sflow li {
    width: 30%;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 1rem;
    text-align: center;
}
.sflow li p {width: 100%;color: #333;font-weight: 400;}
.sflow li strong {background-color: var(--color-main);color: #fff;width: 100%;display: inline-flex;align-items: center;justify-content: center;padding: .5rem;border-radius: 2rem;margin-bottom: 1rem;font-weight: 500;}
.sflow li a:hover {color: var(--color-main);}
.sflow2 {}
.sflow2 li {width: 23%;padding: 2rem;} 
.sflow2 li strong {
    background-color: #fff;
    border: 1px solid var(--color-main);
    color: var(--color-main);
}
.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:1280px) and (max-width: 1600px)  {
	.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 ~ 1024px)*/ 
@media all and (max-width:1024px) {
	.usri_sec2 {padding:10% 0}
	.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;
}
	.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;}
	.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_sec2 {padding:20% 0}
	.step li {width: 49%;}
	.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: 18px;margin-top: 0;}
	.sflow li {
    width: 100%;
}
	.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:48%}
	.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}
}