@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css");
html * {
    font-size: 14px;
    font-family: 'Roboto','Noto Sans KR', 'Malgun Gothic', '맑은 고딕', 'Dotum', '돋움', 'Arial', sans-serif;
}
body {background: #fafafa;}
.inner_wrap {height: 100%; width: 1200px; margin: 0 auto; }
.flex {display: flex; align-items: center;}
a {text-decoration:none !important; border:none;}
p {margin: 0;}

header {width: 100%; height: 83px; background: #fff; border-bottom: 1px solid #dfdfdf;}
header .inner_wrap {justify-content: space-between;}
header h1 {margin: 0;}
header li {float: left; margin-left: 50px;}
header li a {font-size: 16px; color: #252525; font-weight: 500;}
header li a:hover {color: #252525;}

#footer {
    width:100%;
    height:53px;
    text-align: center;
    color: #8f8f8f;
    font-size: 12px;
    font-weight: 700;
    margin-top: 120px;
    letter-spacing: 0.5px;
}

.snb_depth li {line-height: 40px;}
.snb_depth li a {font-size: 16px; font-weight:300 !important; color: #555;}
.snb_depth li.active a, .snb_depth li a:hover {color: #2a82df; text-decoration: underline !important;}

/*서브컨텐츠*/
.sub_inner {align-items: flex-start !important; justify-content: space-between; padding-top: 38px;}
.inner_wrap .sub_contents {width: 940px; min-height: 600px; padding-bottom: 60px;}
.cont_title {
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #000;
    margin-bottom: 35px;
    padding-top: 8px;
    position: relative;
}
.cont_title h3 {font-size: 23px; font-weight: bold; margin: 0; font-family:'Roboto','Noto Sans KR', sans-serif;}
.cont_title h3 small {font-size: 15px; color: #707070; font-family:'Roboto','Noto Sans KR', sans-serif;}
.cont_title .right_text {position: absolute; right: 0; bottom: 7px; color: #707070;}


/*---------------------------------------------------------------------------
                             회원가입안내
 * ------------------------------------------------------------------------*/
#join_btn {
	position: fixed; 
	bottom: 90px;
	width: 100%;
	text-align: center;
	z-index: 99999;
}
#join_btn a {
	padding: 28px 100px;
	background: #2a82df;
	color: #fff;
	font-size: 24px;
	border-radius: 50px;
	transition: all .3s ease;
}
#join_btn a:hover {background: #267bd6;}

.join_top {width: 100%; height:705px;  background: url(/images/info21c/join/join_top_bg.jpg) center no-repeat; background-size: cover; color: #fff;}
.join_top .inner_wrap {padding-top: 240px;}
.join_top h2 {margin: 0; font-size: 65px; font-weight: bold; margin-bottom: 20px; line-height: 77px; letter-spacing: -2px;}
.join_top p {font-size: 40px; font-weight: 300; letter-spacing: -1px;}

.section {padding-top: 100px; overflow: hidden;}
.join_title {text-align: center; margin-bottom: 50px;}
.join_title h3 {font-size: 48px; font-weight:900; color: #1f1f1f; margin: 0; line-height: 60px;}
.join_title p {font-size: 24px; font-weight:300; color: #676767; margin-top: 12px;}

.join_section1, .join_section3, .join_section5 {background: #fff;}
.join_section2 {background: #f8f8f8;}
.join_section4 {background: #e6eef1;}
.join_section6 {background: #eef2f9;}

.join_section1, .join_section2, .join_section3, .join_section4, .join_section5, .join_section6 {text-align: center;}
.join_section2 img{box-shadow:0px 3px 20px 0px #e6e8e9;}
.join_section6 img {border-radius: 13px; box-shadow:0px 3px 20px 0px #d8dfeb; margin-bottom: 90px;}

.join_section7 {
	background: url(/images/info21c/join/section7_bg.png) center no-repeat; 
	background-size: cover;
	height: 786px;
}
.join_section7 .inner_wrap {display: flex; justify-content: space-between;}
.join_section7 .join_title {text-align: left}
.join_section7 .join_title h3, .join_section7 .join_title p {color: #fff;}
.join_section7 .join_title h3 {margin-bottom: 16px;}
.join_section7 .slider {width: 800px;}
.join_section7 .cycle-slideshow {
	background: #fff;
	border-radius: 15px;
	max-height: 593px !important;
	box-shadow: 1px 1px 30px 1px #414a55;
}
.cycle-slideshow .slider_ct {
	padding: 25px 40px;
	border-bottom: 1px solid #dedede;
	display: flex;
	align-items: center;
}
.cycle-slideshow .slider_ct span {display: block; font-size: 16px; color: #686868; line-height: 25px; font-weight: 300;}
.cycle-slideshow .slider_ct span:nth-child(2) {padding-left: 30px;}
.cycle-slideshow .slider_ct b {font-size: 18px; color: #181818; font-weight: 700; display: block; margin-bottom: 5px;}

.join_section8 .S5_con {
    width: 100%;
    height: 411px;
    background: url(/images/info21c/join/section8_bg.png) no-repeat;
}
.join_section8 .join_title {margin-bottom: 10px;}
.join_section8 .slider {height:280px;overflow-y: hidden; margin-top: 80px; padding-left: 55px;}
.join_section8 .slider .overlay-mask {position: absolute; z-index: 10; width:700px; height:280px; background: linear-gradient(0deg,rgb(240,241,243) 10%, transparent 70%);}
.join_section8 .slider:first-child {border-left: 0;}
.join_section8 .slider .cycle-head{font-size: 19px; font-weight: 700; color: #5889d2; border:none !important; font-family:'Noto Sans KR', sans-serif;}
.join_section8 .slider .cycle-item{font-size: 30px; font-weight: 800; color: #1c1c1c; line-height: 56px; font-family: 'Pretendard', sans-serif;border:none  !important;}