/* layout */
#wrap {width:100% ; position:relative; z-index:1; max-width: 800px !important; margin: 0 auto}

/* top 버튼 */
.go-top {
	display:block;
	position:fixed;
	bottom:80px;
	right:10px;
	-webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
	z-index: 999;
}


.go-top img { width: 40px !important}
.go-top:hover { cursor: pointer}


/*공용*/
em { font-weight:normal; font-style:normal; }
.clearfix:after {content:"";display:block;clear:both;}

.cont { clear: both; float: left; width: 100%; margin:0 ; padding: 0 0 6rem 0 ; box-sizing: border-box; background: #ffffff}
.cont img {width:100%; height:auto}
.cont h2 { margin-bottom:2.5rem; font-size:2.2rem; line-height:4rem; font-weight: 800; letter-spacing: -1px; border-bottom: 1px solid #333333}
.cont h3 { margin-bottom:1rem; font-size:1.8rem; line-height:2rem; font-weight: 700; letter-spacing: -1px; }
.cont h4 { margin-bottom:0.4rem; font-size:1.2rem; line-height:1.6rem; font-weight: 700; letter-spacing: -1px; }

.inner_box {width:95%; padding: 0 2.5%; margin:0 auto; overflow:hidden;position:relative; }

.float_box {width:100%; overflow:hidden;}
.float_box .box {float:left;}
.float_box .box_c { margin: 0 auto !important; overflow:hidden; text-align: center;  padding: 0 25% ; box-sizing: border-box}

/* 탭버튼 */
.float_box {width:100%; overflow:hidden;}
.float_box .box {float:left;}
.float_box .box_c { margin: 0 auto !important; overflow:hidden; text-align: center;  padding: 0 25% ; box-sizing: border-box}

.float_box.boxs1 .boxs {width:calc(100%);}
.float_box.boxs2 .boxs {width:calc(100%/2);}
.float_box.boxs3 .boxs {width:calc(100%/3);}
.float_box.boxs4 .boxs {width:calc(100%/4);}
.float_box.boxs5 .boxs {width:calc(100%/5);}
.float_box.boxs6 .boxs {width:calc(100%/6);}
.float_box.boxs7 .boxs {width:calc(100%/7);}

.tab {width: 100%; clear: both; border: 1px solid #d4d4d4; border-bottom: none; border-right: none; box-sizing: border-box; margin: 2.5rem 0 0 0 }
.tab ul {display: grid; grid-template-columns: repeat(auto-fit, minmax(25%, auto)); align-items: stretch; justify-content: stretch; grid-auto-rows: minmax(2.9rem, auto);}
.tab li { text-align: center; padding:0.3rem; font-size:1rem; line-height:1.1rem; color:#989898; background:#ffffff; box-sizing: border-box; font-weight: 400; border-right: 1px solid #d4d4d4; border-bottom: 1px solid #d4d4d4; }
.tab li:hover {color:#fff; background:#7000d8; cursor: pointer}
.tab li.on {color:#fff; background:#7000d8; font-weight: 600}

.tab2 {width: 100%; clear: both; border-right: none; box-sizing: border-box; margin: 3rem 0;}
.tab2 ul {display: grid; grid-template-columns: repeat(auto-fit, minmax(23%, auto)); align-items: stretch; justify-content: stretch; grid-gap: 0.3rem; gap: 0.3rem}
.tab2 li { text-align: center; padding:0.6rem 0; font-size:1rem; line-height:1.1rem; color:#989898; background:#ffffff; box-sizing: border-box; font-weight: 400; border: 1px solid #d4d4d4; border-radius: 5px; }
.tab2 li:hover {color:#fff; background:#7000d8; cursor: pointer}
.tab2 li.on {color:#fff; background:#7000d8; font-weight: 600}

.tab3 {width: 100%; clear: both; border-right: none; box-sizing: border-box; margin: 4.5rem 0 0 0;}
.tab3 ul {display: grid; grid-template-columns: repeat(auto-fit, minmax(23%, auto)); align-items: stretch; justify-content: stretch; grid-gap: 0.3rem; gap: 0.3rem}
.tab3 li { text-align: center; padding:3rem 0 0.5rem 0; font-size:1rem; line-height:1.1rem; color:#000000; background:#ffffff; box-sizing: border-box; font-weight: 400; border: 1px solid #d4d4d4; border-radius: 5px; }
.tab3 li:nth-child(1) { background: url("/images/menu_icon01.png") no-repeat center 15%; background-size: 3rem; }
.tab3 li:nth-child(2) { background: url("/images/menu_icon02.png") no-repeat center 15%; background-size: 3rem; padding:3.5rem 0 0.5rem 0}
.tab3 li:nth-child(3) { background: url("/images/menu_icon03.png") no-repeat center 15%; background-size: 3rem;}
.tab3 li:nth-child(4) { background: url("/images/menu_icon04.png") no-repeat center 15%; background-size: 3rem; padding:3.5rem 0 0.5rem 0}
.tab3 li:nth-child(5) { background: url("/images/menu_icon05.png") no-repeat center 15%; background-size: 3rem; }
.tab3 li:nth-child(6) { background: url("/images/menu_icon06.png") no-repeat center 15%; background-size: 3rem;}
.tab3 li:nth-child(7) { background: url("/images/menu_icon07.png") no-repeat center 15%; background-size: 3rem; padding:3.5rem 0 0.5rem 0}
.tab3 li:hover {color:#fff; background:#7000d8; cursor: pointer}
.tab3 li.on {color:#fff; background:#7000d8; font-weight: 600}
.tab3 li:nth-child(1):hover,.tab3 li.on:nth-child(1) { color:#fff; cursor: pointer; background: #7000d8 url("/images/menu_icon01_on.png") no-repeat center 15%; background-size: 3rem; }
.tab3 li:nth-child(2):hover,.tab3 li.on:nth-child(2) { color:#fff; cursor: pointer; background: #7000d8 url("/images/menu_icon02_on.png") no-repeat center 15%; background-size: 3rem; padding:3.5rem 0 0.5rem 0}
.tab3 li:nth-child(3):hover,.tab3 li.on:nth-child(3) { color:#fff; cursor: pointer; background: #7000d8 url("/images/menu_icon03_on.png") no-repeat center 15%; background-size: 3rem; }
.tab3 li:nth-child(4):hover,.tab3 li.on:nth-child(4) { color:#fff; cursor: pointer; background: #7000d8 url("/images/menu_icon04_on.png") no-repeat center 15%; background-size: 3rem; padding:3.5rem 0 0.5rem 0}
.tab3 li:nth-child(5):hover,.tab3 li.on:nth-child(5) { color:#fff; cursor: pointer; background: #7000d8 url("/images/menu_icon05_on.png") no-repeat center 15%; background-size: 3rem; }
.tab3 li:nth-child(6):hover,.tab3 li.on:nth-child(6) { color:#fff; cursor: pointer; background: #7000d8 url("/images/menu_icon06_on.png") no-repeat center 15%; background-size: 3rem; }
.tab3 li:nth-child(7):hover,.tab3 li.on:nth-child(7) { color:#fff; cursor: pointer; background: #7000d8 url("/images/menu_icon07_on.png") no-repeat center 15%; background-size: 3rem; padding:3.5rem 0 0.5rem 0}

/*서브 배경 공통*/
.content {padding: 2.4rem 0; text-align:left; clear: both; overflow: hidden}
.content0 {padding:0; text-align:left; clear: both; overflow: hidden}
.content_120b {padding:0 0 3rem 0; text-align:left; clear: both; overflow: hidden}
.content_120t {padding:1rem 0 0 0; text-align:left; clear: both; overflow: hidden}

.content.white_bg,.content0.white_bg,.content_120b.white_bg,.content_120t.white_bg {background:#fff;}
.content.gray_bg,.content0.gray_bg,.content_120b.gray_bg,.content_120t.gray_bg {background:#f0f0f0;}
.content.darkgray_bg,.content0.darkgray_bg,.content_120b.darkgray_bg,.content_120t.darkgray_bg {background:#2d2e33; }

/*서브 box 공통*/
.sub_box_width100 { width: 100%}
.sub_box_width90 { width: 90%}
.sub_box_width80 { width: 80%}
.sub_box_gray_dot { background: #ffffff; border: 1px dashed #c9c9c9; box-sizing: border-box; padding: 1rem; margin: 0 auto;}

/*서브 line 공통*/
.line_gyay_top { border-top:1px solid #e4e4e4;}
.line_gyay_bottom { border-bottom:1px solid #e4e4e4;}
.line_gyay_right { border-right:1px solid #e4e4e4;}
.line_gyay_left { border-left:1px solid #e4e4e4;}

.line_white_top { border-top:1px solid #ffffff;}
.line_white_bottom { border-bottom:1px solid #ffffff;}
.line_white_right { border-right:1px solid #ffffff;}
.line_white_left { border-left:1px solid #ffffff;}

.line_black_top { border-top:1px solid #333333;}
.line_black_bottom { border-bottom:1px solid #333333;}
.line_black_right { border-right:1px solid #333333;}
.line_black_left { border-left:1px solid #333333;}

/*서브 텍스트 공통*/
.sub_txt {text-align:left;}
.sub_txt.right {text-align:right;}
.sub_txt.center {text-align:center;}
.sub_txt { font-weight:400; font-size:1.1rem; line-height:1.6rem; margin:0; color: #3a3a3a ; letter-spacing: -1px}
.sub_txt span  { font-weight: 800; line-height:1.6rem;}
.sub_txt mark{ font-size: 1.2rem; color: #000000; font-weight: 700; line-height:2rem; text-align: center; }

/*게시판 기본 테이블*/
.board {width: 100%; clear:both; border-collapse:collapse; }
.board caption{display:none}
.board tbody tr {border:1px solid #e4e4e4; }
.board thead td { background:#ffffff; padding: 0.8rem 0.5rem; text-align: center; font-size: 1.1rem ; color:#333333; font-weight: 600; }
.board thead th { background:#333333; padding: 0.8rem 0.5rem; text-align: center; font-size: 1.1rem ; color:#ffffff; font-weight: 700 !important}
.board tbody th { background:#f6f6f6; padding: 0.8rem 0.5rem; font-size: 1.1rem; text-align: center; color:#333333; font-weight: 700 !important; border-right:1px solid #e4e4e4; }
.board tbody td {padding: 0.8rem 0.5rem ; text-align: left; font-size: 1.1rem; color: #333333; line-height:24px; font-weight: 400;}

/*Q&A*/
.qa_box { clear: both; width: 100%; overflow: hidden; margin: 2rem 0 0 0; border-bottom: 1px solid #333333; border-top: 1px solid #333333}
.qa_box ul { width: 100%}
.qa_box li { width: 100%; float: left}

.qa_box li dt { display: flex; align-items: stretch; font-size: 1.1rem; padding: 1rem; box-sizing: border-box; color: #333333; font-weight: 700}
.qa_box li dt .txt{ width: 100%; clear: both; line-height: 1.5rem }
.qa_box li dt .qtxt { padding-right: 10px; line-height: 1.5rem}

.qa_box li dd { display: flex; align-items: stretch; background: #f7f7f7; border-bottom: 1px solid #dddddd; padding: 1rem; box-sizing: border-box; font-size: 1.1rem}
.qa_box li dd .txt{ width: 100%; clear: both; color: #333333; font-weight: 400; line-height: 1.5rem}
.qa_box li dd .atxt { color: #7000d8; padding-right: 10px; font-weight: 700; line-height: 1.5rem}

/*공통 좌측 숫자 리스트*/
.number_list { clear: both; width: 100%; overflow: hidden; margin: 1rem 0}
.number_list ul {width: 100%; display: flex; flex-direction: column}
.number_list li { width: 100%; background: #ffffff; padding: 0.5rem 0; box-sizing: border-box; text-align: left;}
.number_list li:nth-child { margin-bottom: 0; }
.number_list li dt { width: 1.5rem; height: 1.5rem; background: #7000d8; font-weight:600; color: #ffffff ; font-size:1rem; text-align: center; float: left; border-radius: 0.75rem; line-height: 1.4rem}
.number_list li dd { padding: 0 0 0 1.9rem; font-weight:700; color: #333333 ; font-size:1.1rem; line-height: 1.4rem}
.number_list li dd span { font-weight:800;}

/*체크리스트*/
.sub_checklist { clear: both; width: 100%; float: left; margin: 0}
.sub_checklist ul { float: left; margin: 0 auto; }
.sub_checklist li { background: #f0f0f0 url("/images/checklist_icon.png") no-repeat 3% 50%; background-size: 1.4rem; opacity: 5; float: left; box-sizing: border-box; margin-top: 10px; padding: 0.8rem 0 0.8rem 3%; width: 100%}
.sub_checklist li p { font-size: 1.1rem; font-weight: 500; color: #333333; text-align: left; width: 96%; float: left; padding-left: 2rem; box-sizing: border-box}

/*동그라미 이미지+하단 제목*/
.box_circle_img { clear: both; width: 100%; overflow: hidden; padding: 0}
.box_circle_img ul { width: 100%}
.box_circle_img li { width: 31%; padding: 0.5rem; box-sizing: border-box; text-align: center; float: left}
.box_circle_img dl { width: 100%; float: left}
.box_circle_img dt { text-align: center; margin-bottom: 1rem }
.box_circle_img dd { clear: both; overflow: hidden; text-align: center; font-size: 1rem; }
.box_circle_img .off {  background: #f0f0f0; color: #333333; font-weight: 600; padding: 0.3rem; margin: 1rem auto;}
.box_circle_img .on {  background: #7000d8; color: #ffffff; font-weight: 600; padding: 0.3rem;margin: 1rem auto;}
.box_circle_img img {width: 100%}

/*사각 이미지+하단 제목*/
.box_square_img { clear: both; width: 100%; overflow: hidden; padding: 0}
.box_square_img ul { width: 100%}
.box_square_img li { width: 25%; padding: 1%; box-sizing: border-box; text-align: center; float: left}
.box_square_img dl { width: 100%; float: left}
.box_square_img dt { text-align: center; margin-bottom: 1rem }
.box_square_img dd { clear: both; overflow: hidden; text-align: center; font-size: 1rem; }
.box_square_img .off {  background: #f0f0f0; color: #333333; font-weight: 600; padding: 0.5rem; margin: 1rem auto;}
.box_square_img .on {  background: #7000d8; color: #ffffff; font-weight: 600; padding: 0.5rem;margin: 1rem auto;}
.box_square_img img {width: 100%}

/*전후 화살표 + 이미지 공통*/
.sub_tbox_img { clear: both; width: 100%; overflow: hidden; padding: 0 }
.sub_tbox_img dl { width: 50%; float: left; box-sizing: border-box; padding: 0 5%}
.sub_tbox_img dt { text-align: center; margin-bottom: 1rem }
.sub_tbox_img dd { clear: both; overflow: hidden; text-align: center; font-size: 1rem; }
.sub_tbox_img .off {  background: #f0f0f0; color: #333333; font-weight: 600; padding: 0.5rem; margin: 1rem auto;}
.sub_tbox_img .on {  background: #7000d8; color: #ffffff; font-weight: 600; padding: 0.5rem;margin: 1rem auto;}
.sub_tbox_img .arrow { padding: 0 1rem 4rem 1rem;  text-align: center; margin: 0 auto}
.sub_tbox_img .arrow img { width: 80%;}
.sub_tbox_img img {width: 100%}
.radiusimg img {width: 100%; border-radius: 0 7px 7px 0}

.sub_tbox_img2 { clear: both; width: 100%; overflow: hidden; padding: 0 }
.sub_tbox_img2 dl { width: 50%; float: left; box-sizing: border-box; padding: 0}
.sub_tbox_img2 dt { text-align: center; margin-bottom: 1rem }
.sub_tbox_img2 dd { clear: both; overflow: hidden; text-align: center; font-size: 1rem; }
.sub_tbox_img2 .off {  background: #f0f0f0; color: #333333; font-weight: 600; padding: 0.5rem; margin: 1rem auto;}
.sub_tbox_img2 .on {  background: #7000d8; color: #ffffff; font-weight: 600; padding: 0.5rem;margin: 1rem auto;}
.sub_tbox_img2 .arrow { padding: 0 1rem 4rem 1rem;  text-align: center; margin: 0 auto}
.sub_tbox_img2 .arrow img { width: 80%;}
.sub_tbox_img2 img {width: 100%}

/*하단공통버튼*/
.go_home { position:fixed; bottom:0px; padding:0.9rem 0; width:100%; z-index: 9999; display:block; max-width: 800px; text-align: center; background: rgb(112,0,216); background: linear-gradient(0deg, rgba(112,0,216,1) 0%, rgba(150,54,238,1) 100%); border: 1px solid #5300a0; box-sizing: border-box; box-shadow: 3px 3px 0 #af69f1 inset; opacity: 90%}
.go_home span { font-size: 1.2rem; color: #ffffff; font-weight: 700; line-height:2rem; text-align: center; }
.go_home span img { width: 1.2rem; padding: 0.35rem 0.7rem 0 0}
.go_home:hover { cursor: pointer}

/* =============== Display =============== */
.block { display: block; }
.inline-block { display: inline-block; }

.flex { display: -webkit-box; display: -ms-flexbox; display: flex; }
.flex-wrap{display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;flex-wrap: wrap;}
.flex-center {display: flex; align-items: center; justify-content: center;}
.flex-between {display: flex; justify-content: space-between;}

.flex-column{display: flex; flex-direction: column;}

.justify-start { justify-content:flex-start !important}
.justify-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.justify-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.justify-end { justify-content: flex-end; }

.items-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
.items-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.items-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }

.align-self-start{-ms-flex-item-align: start;align-self: flex-start}
.align-self-center{-ms-flex-item-align:center;align-self: center}
.align-self-end{-ms-flex-item-align:end;align-self: flex-end}


@media all and (max-width:767px) and (min-width:0px) {
	
/*사각 이미지+하단 제목*/
.box_square_img { clear: both; width: 100%; overflow: hidden; padding: 0}
.box_square_img ul { width: 100%}
.box_square_img li { width: 50%; padding: 2%; box-sizing: border-box; text-align: center; float: left}
.box_square_img dl { width: 100%; float: left}
.box_square_img dt { text-align: center; margin-bottom: 1rem }
.box_square_img dd { clear: both; overflow: hidden; text-align: center; font-size: 1rem; }
.box_square_img .off {  background: #f0f0f0; color: #333333; font-weight: 600; padding: 0.5rem; margin: 1rem auto;}
.box_square_img .on {  background: #7000d8; color: #ffffff; font-weight: 600; padding: 0.5rem;margin: 1rem auto;}
.box_square_img img {width: 100%}	
	
/*전후 화살표 + 이미지 공통*/
.sub_tbox_img { clear: both; width: 100%; overflow: hidden; padding: 0 }
.sub_tbox_img dl { width: 50%; float: left; box-sizing: border-box; padding: 0}
.sub_tbox_img dt { text-align: center; margin-bottom: 1rem }
.sub_tbox_img dd { clear: both; overflow: hidden; text-align: center; font-size: 1rem; }
.sub_tbox_img .off {  background: #f0f0f0; color: #333333; font-weight: 600; padding: 0.5rem; margin: 1rem auto;}
.sub_tbox_img .on {  background: #7000d8; color: #ffffff; font-weight: 600; padding: 0.5rem;margin: 1rem auto;}
.sub_tbox_img .arrow { padding: 0 0.4rem 4rem 0.4rem;  text-align: center; margin: 0 auto}
.sub_tbox_img .arrow img { width: 60%;}
.sub_tbox_img img {width: 100%}
.radiusimg img {width: 100%; border-radius: 0 7px 7px 0}
	
.sub_tbox_img2 { clear: both; width: 100%; overflow: hidden; padding: 0 }
.sub_tbox_img2 dl { width: 50%; float: left; box-sizing: border-box; padding: 0}
.sub_tbox_img2 dt { text-align: center; margin-bottom: 1rem }
.sub_tbox_img2 dd { clear: both; overflow: hidden; text-align: center; font-size: 1rem; }
.sub_tbox_img2 .off {  background: #f0f0f0; color: #333333; font-weight: 600; padding: 0.5rem; margin: 1rem auto;}
.sub_tbox_img2 .on {  background: #7000d8; color: #ffffff; font-weight: 600; padding: 0.5rem;margin: 1rem auto;}
.sub_tbox_img2 .arrow { padding: 0 0.4rem 4rem 0.4rem;  text-align: center; margin: 0 auto}
.sub_tbox_img2 .arrow img { width: 60%;}
.sub_tbox_img2 img {width: 100%}
	
}