@charset "utf-8";

/* 비교과 프로그램 회원가입 양식 */
.pro_join_guide{ width:1000px; margin: 80px auto 0 auto;}
.pro_join_box{display: flex; justify-content: space-between; padding-top: 100px;}

.pro_join_box dl{ border-radius: 30px; overflow: hidden; box-shadow: 1px 10px 10px rgba(0,0,0,0.1);  width: 47%; background: #fff; }

.pro_join_box dl dt{ background:#5379ff url(../../images/com/pro_bg01.png) right center  no-repeat;text-align: center; color: #fff; background-size: 250px;}
.pro_join_box dl dt > strong{ font-size: 25px; font-weight:700; display: inline-block;background: url(../../images/com/pro_icon01.png) left center  no-repeat; padding:40px 0 40px 55px;}

.pro_join_box dl dd{ text-align: center; padding: 50px;}
.pro_join_box dl dd div{ height: 180px;font-size: 15px; }
.pro_join_box dl dd strong{line-height: 28px; font-size: 20px; }
.pro_join_box dl dd a{border-radius: 50px; background: #5379ff; color: #fff; font-weight: 600; font-size: 14px; padding: 15px 10px; width: 80%; display: inline-block;box-shadow: 1px 10px 10px rgba(0,0,0,0.1);  }

.pro_join_box dl dd a:hover,
.pro_join_box dl dd a:focus{transform: translate(0, -10px);}

.pro_join_box dl dd ul{justify-content: center;margin-top:20px; font-size: 15px; line-height: 20px; width: 100%; display: inline-flex; flex-wrap: wrap;  }
.pro_join_box dl dd ul li{ background: url(../../images/com/point02.png) left center  no-repeat; padding-left: 10px; margin-left: 12px; line-height: 25px;}
.pro_join_box dl dd ul li:first-child{padding-left: 0; background: none; margin-left: 0;}


.pro_join_box .pro_join_txt02 dt{background-color: #38c767;} 
.pro_join_box .pro_join_txt02 dt > strong{background-image: url(../../images/com/pro_icon02.png);} 

.pro_join_box .pro_join_txt02 a{background: #38c767;}
.pro_join_box .pro_join_txt02 dd div{ padding-top: 25px}

@media all and (max-width :1520px) {
.pro_join_guide{ width:900px;}
.pro_join_box dl{ border-radius: 25px; width: 48%; }
.pro_join_box dl dd strong{line-height: 25px; font-size: 18px; }
}

@media all and (max-width :1280px) {
.pro_join_box{ padding-top: 50px;}
.pro_join_box dl{ border-radius: 25px; width: 48%; }
.pro_join_box dl dt{background-size: 200px;}
.pro_join_box dl dt > strong{ font-size: 20px; padding:25px 0 25px 40px; background-size: 30px;}
}

@media all and (max-width :1024px) {
.pro_join_guide{ width:90%; margin: 50px auto 0 auto;}
.pro_join_box dl{ border-radius: 15px; width: 49%; }
.pro_join_box dl dt > strong{ font-size: 20px; padding:25px 0 25px 40px; background-size: 30px;}
.pro_join_box dl dd{padding: 30px 20px;}
.pro_join_box dl dd strong{line-height: 22px; font-size: 16px; }
.pro_join_box dl dd ul{ font-size: 14px; line-height: 20px;}
.pro_join_box dl dd ul li{  padding-left: 10px; margin-left: 7px; line-height: 20px;}
}

@media all and (max-width :767px) {
.pro_join_box{flex-wrap: wrap; padding-top: 30px;}

.pro_join_box dl{ border-radius: 15px; width: 100%; margin-bottom: 20px; }
.pro_join_box dl dd div{ height:auto;font-size: 14px; margin-bottom: 30px;}
.pro_join_box dl dt{background-size: 100px;}
.pro_join_box dl dt > strong{ font-size: 14px; padding:12px 0 12px 25px; background-size: 20px;}
.pro_join_box dl dd{padding: 25px 20px 30px 20px;}
.pro_join_box dl dd strong{line-height: 20px; font-size: 15px; }
.pro_join_box dl dd a{ font-size: 12px; padding: 12px 10px;}

}







#wrap_member *{box-sizing: border-box;}
#wrap_member{background:#d0e5f6; height: 100%; overflow-x: hidden; overflow-y: auto; min-width: 360px;}
#wrap_member .member_guide01{padding: 60px 10%;}
#wrap_member h1 a{display: inline-block;}
#wrap_member h2{font-size: 35px; font-weight: 800; text-align: center; color: #1a1e54;}

#wrap_member .member_center{ width:1000px; margin: 0 auto;}

#wrap_member .member_box_top{text-align: center; margin:40px auto; width: 500px;background: url(../../images/com/line02.png) center 20px no-repeat;}
#wrap_member .member_box_top ul{ display: flex; align-items: center; justify-content: space-between;}
#wrap_member .member_box_top ul li span{  width: 30px; height: 30px; line-height: 30px; border-radius: 50%; text-align: center; color: #d0e5f6; background: #fff; display: inline-block; font-weight: 800;}
#wrap_member .member_box_top ul li strong{display: block; margin-top: 12px;}
#wrap_member .member_box_top ul li.active span{background: #3669ff; color: #fff; width: 40px; height: 40px; line-height: 40px; box-shadow: 1px 5px 5px rgba(0,0,0,0.2);}
#wrap_member .member_box_top ul li.active strong{color:#3669ff; font-weight: 800;}



#wrap_member .member_box_center{background: #fff; border-radius: 20px; padding: 10px 40px;box-shadow: 1px 0 20px rgba(0,61,180,0.2); }
#wrap_member .member_txt{ margin: 0 10px 10px 10px; display: flex; justify-content: space-between;  align-items:flex-end;}
#wrap_member .member_txt strong{margin-left: 5px; font-size: 18px; font-weight: 800; background:url("../../images/com/point.png") left center no-repeat; padding-left: 15px;}
#wrap_member .ct_down01{ border-radius: 100px; background: #a6c0f3; text-align:center;min-width: 110px;display: inline-block; padding: 0 10px; color: #fff; white-space: nowrap;}
#wrap_member a.ct_down01:hover,
#wrap_member a.ct_down01:focus{ background: #1779ff;}
#wrap_member .ct_down01 i{ display: block; padding-left:30px; background:url("../../images/com/icon_donw02.png") left center no-repeat;font-size: 11px;height: 38px; line-height: 38px;}

#wrap_member .member_info{ background: #fff;  border: 1px dashed #ddd; border-radius: 20px 8px 20px 20px;padding: 20px; overflow-y: auto; overflow-x: hidden; height: 200px;}

#wrap_member .member_info .layer_info_guide01 .layer_info_txt01 {margin-bottom: 0;}
#wrap_member .member_box01{margin: 20px 0;}
#wrap_member .member_box01 .layer_info_table01 {overflow: auto!important;}

@media all and (max-width :1720px) {
#wrap_member .member_guide01{padding: 50px 5%;}
}

@media all and (max-width :1520px) {
#wrap_member .member_guide01{padding: 30px 5%;}
}

@media all and (max-width :1280px) {
#wrap_member .member_top h1 img{width:150px;}
#wrap_member h2{font-size: 30px;}
#wrap_member .member_center{ width:100%; }
#wrap_member .member_box_center{padding: 10px 30px;}
#wrap_member .member_txt strong{ font-size: 16px;  font-weight: 700;}
}

@media all and (max-width :767px) {
#wrap_member .member_guide01{padding: 12px 5%}
#wrap_member .member_top h1 img{width:120px;}
#wrap_member h2{font-size: 18px; margin-top: 10px;}

#wrap_member .member_box_top{margin:20px auto; width: 300px; background-size: 260px; background-position: center 16px;}
#wrap_member .member_box_top ul li span{width: 19px; height: 19px; line-height: 19px; font-size: 11px;}
#wrap_member .member_box_top ul li strong{ font-size: 12px; margin-top: 8px;}
#wrap_member .member_box_top ul li.active span{ width: 28px; height: 28px; line-height: 28px;}


#wrap_member .member_txt {align-items: flex-start;margin: 0 0 10px 0;}
#wrap_member .member_txt em {display: flex; align-items: center; gap:10px;}
#wrap_member .member_txt strong{ font-size: 13px; width: 100%;}
#wrap_member .member_box_center{border-radius: 10px;padding: 10px 20px;}
#wrap_member .member_box01{margin: 5px 0 20px 0;}
#wrap_member .member_info{ border-radius: 10px 8px 10px 10px;padding: 10px; }

#wrap_member .ct_down01{padding: 0 5px;min-width: 80px;}
#wrap_member .ct_down01 i{ padding-left:18px;background-size:18px;  height: 30px; line-height: 30px;}


#wrap_member .member_info .layer_info_guide01 h4{font-size: 13px;}
#wrap_member .member_info .layer_info_guide01 dl dt,
#wrap_member .member_info .layer_info_guide01 dl dd,
#wrap_member .member_info .layer_info_guide01 ul li span,
#wrap_member .member_info .layer_info_guide01 .layer_info_table01 table td{font-size: 12px!important;}

}













#wrap_member .member_box02 select,
#wrap_member .member_box02 input{ padding: 0 10px; border: 1px solid #d6deeb; height: 38px; line-height: 38px;}

#wrap_member .member_box02{ padding: 30px 40px; border: 1px dashed #ddd; border-radius: 20px; margin: 30px 0;}
#wrap_member .member_box02 ul > li{display: inline-flex; flex-wrap: wrap; width: 100%; align-items: center; margin: 10px 0;}
#wrap_member .member_box02 ul > li > strong{ width: 80px;}
#wrap_member .member_box02 ul > li > span{ width: calc(100% - 80px); display: flex; align-items: center; gap:5px; justify-content: space-between;}
#wrap_member .member_box02 ul > li > p{width: 100%; margin-top: 10px;color: #ff0000; font-size: 13px; font-weight: 500; padding-left: 80px;}

@media all and (max-width :767px) {
#wrap_member .member_box02{ padding: 10px 20px; border-radius: 10px; margin: 10px 0;}
#wrap_member .member_box02 ul > li{ margin:5px 0; font-size: 13px;}
#wrap_member .member_box02 ul > li > strong{ width: 50px;}
#wrap_member .member_box02 ul > li > span{ width: calc(100% - 50px);}
#wrap_member .member_box02 ul > li > p{ padding-left: 50px;}
}







#wrap_member .member_box03{display: flex; justify-content: space-between; padding: 30px 0; gap:50px;}
#wrap_member .member_box03_01{ display: flex; align-items: center; justify-content: center; text-align: center; width: 50%; padding: 0 30px;}
.member_box03_01_txt strong{font-size: 20px;font-weight: 700; background:url("../../images/com/layer_bicon01.png") center top no-repeat; padding-top: 100px; background-size: 80px; display: block;}
.member_box03_01_txt p {line-height: 22px; font-size: 14px; margin: 10px 0;word-break: keep-all;}
.member_box03_01_txt p em{color: #ff0000; font-weight: 700;}
.member_box03_01_txt a{ border: 2px solid #3161f1; text-align: center; line-height: 41px; height: 45px; border-radius: 50px; background: #fff; color: #3161f1; padding: 0 25px; display: inline-block; font-weight: 800;}
.member_box03_01_txt a:hover,
.member_box03_01_txt a:focus{background: #3161f1; color: #fff;}


#wrap_member .member_box03_02{padding: 30px 40px;  background: #00b1ff; border-radius: 60px 0 60px 60px; overflow: hidden;width: 50%;}
#wrap_member .member_box03_02 h3{ margin-bottom: 15px;}
#wrap_member .member_box03_02 h3 strong{ color: #fff; font-size: 20px; font-weight: 800;background: url(../../images/com/login_icon04.png) left center no-repeat; padding-left: 30px;}
#wrap_member .member_box03_02 ul li{margin: 5px 0; white-space: nowrap;}
#wrap_member .member_box03_02 ul li span{  border-radius: 30px; padding: 0 10px; line-height: 28px; height: 28px;  font-size: 12px; display: inline-block; margin-right: 10px; font-weight: 600; background: #fff;} 
 #wrap_member .member_box03_02 ul li strong{ color: #fff; font-weight: 800;}
 
@media all and (max-width :1024px) {
#wrap_member .member_box03{ gap:0; flex-wrap: wrap;}
#wrap_member .member_box03_01{ width:100%;}
#wrap_member .member_box03_02{ width:100%; margin-top: 30px;border-radius: 20px 0 20px 20px;padding:20px 30px;}
}

@media all and (max-width :767px) {
#wrap_member .member_box03_01{ padding: 0; flex-wrap: wrap;}
.member_box03_01_txt {width: 100%;}
.member_box03_01_txt strong{font-size: 16px;padding-top: 70px; background-size: 60px;}
.member_box03_01_txt p {line-height: 18px; font-size: 12px;}
.member_box03_01_txt a{ line-height: 36px; line-height: 32px;height: 36px;font-size: 13px; font-weight: 700;}

#wrap_member .member_box03_02{padding: 10px 15px;  border-radius:0 0 10px 10px; margin-left: -20px; margin-right: -20px; margin-bottom: -40px; width: calc(100% + 40px);}
#wrap_member .member_box03_02 h3{ margin-bottom: 10px;}
#wrap_member .member_box03_02 h3 strong{font-size: 14px; padding-left: 20px; background-size: 16px; font-weight: 700;}
#wrap_member .member_box03_02 ul li span{  padding: 0 5px; line-height: 20px; height: 20px;  font-size: 11px; margin-right: 5px;  }
#wrap_member .member_box03_02 ul li strong{font-size: 13px;}
}





.member_box04{display: flex; align-items: center; justify-content: center;text-align: center;min-height: 300px; flex-wrap: wrap; padding: 30px 0;}
.member_box04_txt01 {width: 100%;}
.member_box04_txt01 strong{font-size: 20px;font-weight: 700; background:url("../../images/com/layer_bicon02.png") center top no-repeat; padding-top: 100px; background-size: 80px; display: block; color:#ff0000}
.member_box04_txt01 strong.micon01{background-image:url("../../images/com/layer_bicon00.png"); color: #0039e1;}
.member_box04_txt01 p{margin-top:10px; font-weight: 500; font-size: 16px;}
.member_box04_txt01 p em{color: #ff0000; font-weight: 600;}

.member_box04_txt02{width: 400px; background: #f5f9ff; padding: 20px;border-radius: 20px; margin-top: 20px; border: 2px solid #3669ff;}
.member_box04_txt02 ul{display: inline-block;}
.member_box04_txt02 ul li{ display: flex; align-items: center;text-align: left;  margin: 10px 0;}
.member_box04_txt02 ul li span{ min-width: 100px; font-size: 13px; font-weight: 500;background:url("../../images/com/point04.png") left center no-repeat; padding-left: 8px;}
.member_box04_txt02 ul li strong{color: #ff0000;}
.member_box04_txt02 ul li a{ background: #1a1e54; color: #fff; border-radius: 4px; padding: 0 10px; line-height: 25px; height: 25px; font-size: 11px; font-weight: 600; margin-left: 10px;}



@media all and (max-width :767px) {
.member_box04{min-height: 250px;}
.member_box04_txt01 strong{font-size: 16px;padding-top: 70px; background-size: 60px;}
}









/*버튼 스타일************************************************************************************/
.member_btn_guide{  margin: 30px 0; display: flex; justify-content: center; gap:5px; align-items: center;}
.member_btn_guide .mbtn_style{background:#1779ff; color: #fff; height: 50px; line-height: 50px; border-radius: 6px;font-size: 14px; font-weight: 600; display: inline-block; min-width: 160px; padding:0 30px; text-align: center;} 

.member_btn_guide .mbtn_style01{background:#999; color: #ccc; height: 50px; line-height: 50px; border-radius: 6px;font-size: 14px; font-weight: 600; display: inline-block; min-width: 160px; padding:0 30px; text-align: center;} 

.member_btn_guide .m_white{background:#fff; color: #1779ff; line-height: 46px; border: 2px solid #1779ff;}  

@media all and (max-width :767px) {
.member_btn_guide{margin: 20px 0;}
.member_btn_guide .mbtn_style01,
.member_btn_guide .mbtn_style{ height: 40px; line-height: 40px;min-width: 100px; font-size: 13px;} 

}




.bbs_btn_guide{ margin-bottom:50px; vertical-align:top;text-align: right;}

.cbtn_style{font-size:12px; padding:0px 10px; border-radius:3px; border:0;display:inline-block; height: 28px; line-height: 28px; font-weight: 600;white-space: nowrap;} 

.crbtn_style{font-size:11px; padding:0px 10px; border-radius:30px; display:inline-block; height: 24px; line-height: 24px; font-weight: 600; background-color: #fff; color: #ff0000;border:1px solid #ff0000 !important;} 


.sbtn_style{font-size:11px; padding:0 7px;height: 24px; line-height: 22px;font-weight: 500;border-radius:3px; border: 1px solid #ff0000;text-align: center;}



.btn_red {color: #fff;background:#ea2c00;}
.btn_red_r {color: #ff0000;}
.btn_blue {color: #fff!important;background:#3669ff!important;}
.btn_blue01 {background:#e7f1ff!important;}
.btn_purple {color: #fff;background:#4e00de;}
.btn_navy {color: #fff;background:#1e2459;}
.btn_orange{color: #fff;background:#ff6000;}
.btn_green {color: #fff;background:#539801;}
.btn_sky {color: #fff;background:#00c5dc;}
.btn_black {color: #fff;background:#000;}
.btn_gray {color: #fff;background:#555;}

.btn_white {color:#000;background:#f5f5f5; border:1px solid #ccc !important;}
.btn_white:hover, .btn_white:focus{ border:1px solid #ccc !important;}






/* bbs_w setting */
.bbs_w10{ width:10%;}
.bbs_w15{ width:15%;}
.bbs_w20{ width:20%;}
.bbs_w25{ width:25%;}
.bbs_w30{ width:30%;}
.bbs_w35{ width:35%;}
.bbs_w40{ width:40%;}
.bbs_w45{ width:45%;}
.bbs_w50{ width:50%;}
.bbs_w55{ width:55%;}
.bbs_w60{ width:60%;}
.bbs_w65{ width:65%;}
.bbs_w70{ width:70%;}
.bbs_w75{ width:75%;}
.bbs_w80{ width:80%;}
.bbs_w85{ width:85%;}
.bbs_w90{ width:90%;}
.bbs_w95{ width:95%;}
.bbs_w100{ width:100%;}


.bbs_w50px{ width:50px;}
.bbs_w70px{ width:70px;}
.bbs_w80px{ width:80px;}
.bbs_w100px{ width:100px;}
.bbs_w150px{ width:150px;}
.bbs_w200px{ width:200px;}
.bbs_w250px{ width:250px;}
.bbs_w300px{ width:300px;}