.content { position: relative; width: 90%; max-width: 1270px; margin: 0 auto; } .content_100 { width: 100%; } /*****페이지 위치 *****/ .location_inner {display: none; } @media screen and (min-width: 992px) { .location_inner { display: block; width: 100%; list-style: none; text-align: right; padding: 15px 0px 0px 0px; } .location_inner li { display: inline-block; box-sizing: border-box; } .location_inner li a { text-decoration: none; color: #958e95; font-size: 13px; } .location_inner li a i { display: inline-block; padding-right: 4px; padding-left: 3px; color: #dadada; } .location_inner li:first-child { padding-right: 5px; } } /***** 이미지 및 서브메뉴 *****/ .sub_visual { width: 100%; } .sub_visual .img_visual { display: none; box-sizing: border-box; background:#d6cdc7 url('/dgn/ver02/images/img_keli_v03_2022.jpg') center bottom; height: 135px; position: relative; text-align: center; } /*background-image: */ .sub_visual .img_visual .visual_box { max-width: 1276px; width: 100%; margin: 0 auto; } /*.sub_visual .img_visual .sub_menu {border-radius: 5px; display: inline-block; margin-top: 57px; } .sub_visual .img_visual .sub_menu li {display: inline-block; box-sizing: border-box; color: #948e94; height: 47px; line-height: 47px; padding: 0px 25px; } .sub_visual .img_visual .sub_menu li a{text-decoration: none; color: #948e94; font-size: 14px; }*/ .sub_visual .sub_menu_box { background: #fafafa;border-bottom: 1px solid #dadada; } .sub_visual .sub_menu {text-align: left; border-top: 1px solid #dadada; margin-top: 100px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; flex-basis: 33.3%; } .sub_visual .sub_menu li { box-sizing: border-box; width: 33%; padding:12px 0px; text-align: center; border-left: 1px solid #dadada; } .sugang_edu .sub_visual .sub_menu li { box-sizing: border-box; width: 50%; padding:12px 0px; text-align: center; border-left: 1px solid #dadada; } .sub_visual .sub_menu li.sub_menu_logo {display: none; } .sub_visual .sub_menu li:last-child {border-right: 1px solid #dadada; } .sub_visual .sub_menu li a{display:inline-block; line-height: 20px; font-size: 13px; text-decoration: none; color: #374047; font-weight: normal; } .sub_visual .sub_menu li a:hover {color: #000; text-decoration: underline;} .sub_visual .sub_menu li a.on{ color: #d6000f; } .sub_visual .sub_menu li a i{display: none; } .sub_visual .sub_menu li a.on i {display: none; } .m_hide {display: none; } @media screen and (min-width: 992px) { .sub_visual { width: 100%; margin: 0 auto; } /*width: calc(100% - 160px);*/ .sub_visual .img_visual { display: block; width:calc(100% ); margin: 0 auto; height: 280px; padding-top: 118px; } .sub_visual .img_visual .visual_box h1 { display: block; width: 100%; text-align: center; font-size: 20px; color: #fff; letter-spacing: -1px; font-weight: 900; padding: 40px 0px 10px 0px ; } .sub_visual .img_visual .visual_box .img_line { display: block; width: 30px; height: 2px; margin: 9px auto; background: #adcae6; } .sub_visual .img_visual .visual_box h2 { display: block; padding-top: 1px; } .sub_visual .img_visual .visual_box h2 span { display:inline-block; text-align: center; font-size: 32px; color: #a9a4a3; background: #fff; letter-spacing: -1px; font-weight: 900; padding:3px 10px 5px 10px; } .sub_visual .sub_menu_box { border-bottom: 1px solid #ebebeb; background: #fff; } .sub_visual .sub_menu { width: 100%; max-width:1270px; margin: 0 auto; border-top: 0px; text-align: left; height: 55px; border-top: 0px; } .sub_visual .sub_menu li { box-sizing: border-box; flex-basis: 200px; height: 55px; line-height: 55px; padding: 0px 0px 0px 16px; border-left: 1px solid #ebebeb; background: url('/dgn/ver02/images/sub_menu_arrow.png') no-repeat right 23px; } .sugang_edu .sub_visual .sub_menu li { box-sizing: border-box; flex-basis: 270px; height: 55px; line-height: 55px; padding: 0px 0px 0px 16px; border-left: 1px solid #ebebeb; background: url('/dgn/ver02/images/sub_menu_arrow.png') no-repeat right 23px; } .sub_visual .sub_menu li.sub_menu_logo { display: inline-block; box-sizing: border-box; padding: 0px; flex-basis: 55px; background:white url('/dgn/ver02/images/sub_menu_kpffc.png') no-repeat center; } .sub_visual .sub_menu li:last-child {border-right: 1px solid #ebebeb; } .sub_visual .sub_menu li a{ display: block; height: 100%; line-height: 55px; text-align: left; font-size: 14px; text-decoration: none; color: #979597; font-weight: bold; } .m_hide {display: inline-block; } } /***************게시판 리스트 ***********************/ .tableA { width: 100%; padding: 10px 0px; } .tableA_header {display: none;} .tableA_content { display:block; width: 100%; border-bottom: 1px solid #ebebeb; border-top: 2px solid #374047; position: relative; } /*공지사항 */ .notice .tableA_content > li { position: relative; border-top: 1px solid #ebebeb; height: 80px; } .notice .tableA_content > li div.num { position: absolute; left: 4px; bottom: 20px; width: 75px; font-size: 14px; color: #979597; } .notice .tableA_content > li div.num:after {content: '번 공지';} .notice .tableA_content > li div.day { position: absolute; left: 90px; bottom: 17px; width: 100px; font-size: 16px; color: #979597; } .notice .tableA_content > li .title{position: absolute; display: inline-block; left: 4px; top: 20px; width: 100%; font-size: 16px; text-decoration: none; color: #000; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-weight: 900; } .notice .tableA_content > li.new { background: #fbf6ec; } .notice .tableA_content > li.new div.num { position: absolute; left: 4px; bottom: 20px; width: 60px; font-size: 12px; color: #979597; text-indent: -999px; } .notice .tableA_content > li.new div.num:after { display: block; width: 70px; text-indent: 0px; content: '새로운 공지'; color: #f57712; } /*q&a*/ .qna .tableA_content > li {position: relative; border-top: 1px solid #ebebeb; height: 80px; } .qna .tableA_content > li div { display: table-cell; height: 55px; color: #716e71; font-size: 16px; vertical-align: middle; text-align: center; } .qna .tableA_content > li .title { position: absolute; display: inline-block; left: 4px; top: 18px; width: 100%; font-size: 16px; text-decoration: none; color: #004899; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-weight: 900; } .qna .tableA_content > li div.day {position: absolute; left: 50px; bottom: 15px; height: 18px; width: 100px; font-size: 16px; color: #979597; } .qna .tableA_content > li div.answer { position: absolute; left: 4px; bottom: 15px; height: 18px; width: 60px; text-align: left; font-size: 12px; color: #979597; } /*학습자료 */ .reference .tableA_content > li { position: relative; border-top: 1px solid #ebebeb; height: 102px; } .reference .tableA_content > li div.num { position: absolute; left: 2px; bottom: 16px; width: 100px; font-size: 14px; color: #979597; } .reference .tableA_content > li div.num:after {content: '번 학습자료';} .reference .tableA_content > li div.day { position: absolute; left: 120px; bottom: 14px; width: 100px; font-size: 16px; color: #979597; } .reference .tableA_content > li .title{ position: absolute; left: 0px; top: 48px; display: inline-block; width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 16px; text-decoration: none; color: #000; font-weight: 900; } .reference .tableA_content > li div.village { position: absolute; left: 0px; top: 16px; width: 70px; font-size: 12px; color: #fff; background: #6da790; height: 24px; height: 20px; line-height: 20px; text-align: center; } /* 나의 학습장 */ .sugang .tableA_content > li { display: block; flex-wrap: wrap; box-sizing: border-box; padding: 20px 6%; background: #f3f3f5; border-top: 1px solid #ebebeb; border-bottom:1px solid #dddcdd; margin-bottom: 30px; } .sugang .tableA_content > li div { text-align: center; } .sugang .tableA_content > li div.time:before {content: '교육인정시간 : ';} .sugang .tableA_content > li div.completion:before {content: '수료여부 : ';} .sugang .tableA_content .subject { display: block; width: 100%; text-align: center; text-decoration: none; } .sugang .tableA_content .subject .img { display: block; width: 100%; text-align: center; } .sugang .tableA_content .subject .img img{width: 100%; height: auto; } .sugang .tableA_content .subject .title { display: block; width: 100%; text-align: left; box-sizing: border-box; padding: 4px 20px 4px 0px; line-height: 24px; font-size: 16px; color: #000000; font-weight: 900; letter-spacing: -1px; } .sugang .tableA_content .time, .sugang .tableA_content .period, .sugang .tableA_content .completion, .sugang .tableA_content .entrance { width: 100%; font-size: 14px; color: #0d58ad; padding: 1px 0px; text-align: left; } .sugang .tableA_content .entrance { margin-top: 15px;} /* 수강신청 */ .apply .tableA_content > li { display: block; flex-wrap: wrap; box-sizing: border-box; padding: 20px 6%; background: #f3f3f5; border-top: 1px solid #ebebeb; border-bottom:1px solid #dddcdd; margin-bottom: 30px; } .apply .tableA_content > li div { text-align: center; } .apply .tableA_content > li div.time:before {content: '교육인정시간 : ';} .apply .tableA_content > li div.completion:before {content: '수료여부 : ';} .apply .tableA_content .subject { display: block; width: 100%; text-align: center; text-decoration: none; } .apply .tableA_content .subject .img { display: block; width: 100%; text-align: center; } .apply .tableA_content .subject .img img{width: 100%; height: auto; } .apply .tableA_content .subject .title { display: block; width: 100%; text-align: left; box-sizing: border-box; padding: 4px 20px 4px 0px; line-height: 24px; font-size: 16px; color: #000000; font-weight: 900; letter-spacing: -1px; } .sugang .tableA_content .time, .apply .tableA_content .period, .apply .tableA_content .completion, .apply .tableA_content .entrance { width: 100%; font-size: 14px; color: #0d58ad; padding: 1px 0px; text-align: left; } .apply .tableA_content .apply_02 { margin-top: 15px;} /*온라인 학습장02 */ .sugang02 .tableA_content > li { display: block; flex-wrap: wrap; box-sizing: border-box; padding: 16px 6%; border-top: 1px solid #ebebeb; overflow: hidden; margin-bottom: 15px; } .sugang02 .tableA_content > li div { text-align: center; } .sugang02 .tableA_content > li div.time:before {content: '교육인정시간 : ';} .sugang02 .tableA_content > li div.completion:before {content: '수료여부 : ';} .sugang02 .tableA_content .subject { display: block; width: 100%; text-align: center; text-decoration: none; } .sugang02 .tableA_content .subject .img { display: block; width: 100%; text-align: center; } .sugang02 .tableA_content .subject .img img{width: 100%; height: auto; } .sugang02 .tableA_content .subject .title { display: block; width: 100%; text-align: left; box-sizing: border-box; padding: 4px 20px 4px 0px; line-height: 24px; font-size: 16px; color: #000; font-weight: 900; } .sugang02 .tableA_content .time, .sugang02 .tableA_content .period, .sugang02 .tableA_content .completion, .sugang02 .tableA_content .entrance, .sugang02 .tableA_content .review { width: 100%; font-size: 14px; color: #949294; padding: 1px 0px; } .sugang02 .tableA_content .entrance, .sugang02 .tableA_content .review { width: 50%; float: left; font-size: 14px; color: #949294; padding: 2px 0px; } .sugang02 .tableA_content .entrance, .sugang02 .tableA_content .review { margin-top: 15px;} .certificate {display: none; } @media screen and (min-width: 992px) { .tableA_header{ display: table; width: 100%; background: #f8f8f8; border-top: 2px solid #374047;} .tableA_header li{ display: table-row; list-style: none; height: 55px; } .tableA_header li:after, .tableA_header li:before {-webkit-box-sizing:inherit; box-sizing:inherit;} .tableA_content { display: table; width: 100%; border-bottom: 1px solid #ebebeb; border-top: 0px; } .tableA_content > li > div.title { display: table-cell; text-align: left; max-width: 750px; vertical-align: middle; box-sizing: border-box; } .tableA_content > li > div.title a{ display: inline-block; text-align: left; overflow: hidden; max-width: 100%; white-space: nowrap; text-overflow: ellipsis; padding-top: 4px; font-size: 16px; } /*공지사항*/ .notice .tableA_header li > div { display: table-cell; vertical-align: middle; text-align: center; height: 55px; font-size: 14px; color: #374047; font-weight: bold; } .notice .tableA_content > li {display: table; width: 100%; flex-wrap: wrap; box-sizing: border-box; border-top: 1px solid #ebebeb; } .notice .tableA_content > li div { display: table-cell; height: 55px; color: #716e71; font-size: 16px; vertical-align: middle; text-align: center; } .notice .tableA_header li > div.num, .notice .tableA_content > li div.num { position: relative; left: 0px; bottom:0px; top: 0px; width: 135px; font-size: 14px; } .notice .tableA_content > li.new div.num { position: relative; left: 0px; bottom:0px; top: 0px; width: 135px; font-size: 14px; text-indent: -999px; } .notice .tableA_content > li.new div.num:before { display: table-cell; position: relative; left: 0px; bottom:0px; top: 0px; width: 135px; font-size: 14px; color: #f57712; content: 'New'; } .qna .tableA_header li > div.title{ position: relative; display: table-cell; left: 0px; bottom:0px; top: 0px; font-size: 16px; text-align: center; padding-left: 20px; width: calc(100% - 335px); vertical-align: middle; white-space: normal!important; } .notice .tableA_content > li .title { position: relative; display: table-cell; left: 0px; bottom:0px; top: 0px; text-align: left; padding-left: 40px; width: calc(100% - 335px); vertical-align: middle; white-space: normal!important; font-size: 16px; } .notice .tableA_header li > div.day, .notice .tableA_content > li div.day {position: relative; left: 0px; bottom:0px; top: 0px; width: 200px; font-size: 14px; } /*q&a*/ .qna .tableA_header li > div { display: table-cell; vertical-align: middle; text-align: center; height: 55px; font-size: 14px; color: #374047; font-weight: bold; } .qna .tableA_content > li {display: table; width: 100%; flex-wrap: wrap; box-sizing: border-box; border-top: 1px solid #ebebeb; } .qna .tableA_content > li div { display: table-cell; height: 55px; color: #716e71; font-size: 16px; vertical-align: middle; text-align: center; } .qna .tableA_header li > div.title { position: relative; display: table-cell; left: 0px; bottom:0px; top: 0px; text-align: center; font-size: 16px; padding-left: 20px; width: calc(100% - 335px); vertical-align: middle; white-space: normal!important; text-decoration: none; } .qna .tableA_content > li .title { position: relative; display: table-cell; left: 0px; bottom:0px; top: 0px; text-align: left; padding-left: 40px; width: calc(100% - 335px); vertical-align: middle; white-space: normal!important; text-decoration: none; } .qna .tableA_header li > div.day, .qna .tableA_content > li div.day {position: relative; left: 0px; bottom:0px; top: 0px; width: 200px; font-size: 14px; } .qna .tableA_header li > div.answer, .qna .tableA_content > li div.answer { position: relative; left: 0px; bottom:0px; top: 0px; width: 135px; font-size: 16px; text-align: center; } /*학습자료*/ .reference .tableA_header li > div { display: table-cell; vertical-align: middle; text-align: center; height: 55px; font-size: 14px; color: #374047; font-weight: bold; } .reference .tableA_content > li {display: table; width: 100%; flex-wrap: wrap; box-sizing: border-box; border-top: 1px solid #ebebeb;} .reference .tableA_content > li div { display: table-cell; height: 55px; color: #716e71; font-size: 16px; vertical-align: middle; text-align: center; } .reference .tableA_header li > div.num, .reference .tableA_content > li div.num { position: relative; left: 0px; bottom:0px; top: 0px; width: 135px; } .reference .tableA_header li > div.village, .reference .tableA_content > li div.village { position: relative; left: 0px; bottom:0px; top: 0px; width: 200px; font-size: 16px; background: none; color: #716e71; height: 55px; } .reference .tableA_content > li .title { position: relative; display: table-cell; left: 0px; bottom:0px; top: 0px; text-align: left; padding-left: 40px; width: calc(100% - 535px)!important; vertical-align: middle; white-space: normal!important; line-height: 22px;} .reference .tableA_header li > div.day, .reference .tableA_content > li div.day {position: relative; left: 0px; bottom:0px; top: 0px; width: 200px; } .tableA_content > li div.num:after {content: ''!important;} /*수강신청 */ .apply .tableA_content > li { display: table; width: 100%; flex-wrap: wrap; box-sizing: border-box; padding: 15px 0px; background: #fff; border-top: 1px solid #ebebeb; border-bottom: 0px solid #ebebeb; margin-bottom: 0px; } .apply .tableA_header li > div { display: table-cell; vertical-align: middle; text-align: center; height: 55px; font-size: 16px; color: #374047; font-weight: bold; } .apply .tableA_content > li div { display: table-cell; height: 55px; color: #716e71; font-size: 16px; line-height: 22px; vertical-align: middle; text-align:center; } .apply .tableA_header .subject { width: calc(100% - 750px); } .apply .tableA_header .period { width: 390px; text-align: center;} .apply .tableA_header .apply_02 { width: 180px; text-align: center;} .apply .tableA_header .apply_03 { width: 180px; text-align: center;} .apply .tableA_content .subject {display: table-cell; width: calc(100% - 750px); text-decoration: none; } .apply .tableA_content .subject .title { display: table-cell; box-sizing: border-box; width: calc(100%); padding: 10px 10px 10px 60px; text-align: left; font-size: 18px; line-height: 24px; } .apply .tableA_content .period { width: 390px; text-align: center; font-size: 16px; } .apply .tableA_content .apply_02 { width: 180px;} .apply .tableA_content .apply_03 { width: 180px;} /*나의 학습장 */ .sugang .tableA_content > li { display: table; width: 100%; flex-wrap: wrap; box-sizing: border-box; padding: 15px 0px; background: #fff; border-top: 1px solid #ebebeb; border-bottom: 0px solid #ebebeb; margin-bottom: 0px; } .sugang .tableA_header li > div { display: table-cell; vertical-align: middle; text-align: center; height: 55px; font-size: 14px; color: #374047; font-weight: bold; } .sugang .tableA_content > li div { display: table-cell; height: 55px; color: #716e71; font-size: 14px; line-height: 18px; vertical-align: middle; text-align:center; } .sugang .tableA_header .subject { width: calc(100% - 750px); } .sugang .tableA_header .period { width: 390px; text-align: center;} .sugang .tableA_header .entrance { width: 180px; text-align: center;} .sugang .tableA_header .review { width: 180px; text-align: center;} .sugang .tableA_content .subject {display: table-cell; width: calc(100% - 750px); text-decoration: none; } .sugang .tableA_content .subject .title { display: table-cell; box-sizing: border-box; width: calc(100%); padding:10px 10px 10px 60px; text-align: left; font-size: 18px; line-height: 24px; } .sugang .tableA_content .period { width: 390px; text-align: center; font-size: 16px; } .sugang .tableA_content .entrance { width: 180px; text-align: center; } .sugang .tableA_content .review { width: 180px;} /*온라인 학습장02 */ .sugang02 .tableA_content > li { display: table; width: 100%; flex-wrap: wrap; box-sizing: border-box; padding: 15px 0px; border-top: 1px solid #ebebeb; } .sugang02 .tableA_header li > div { display: table-cell; vertical-align: middle; text-align: center; height: 55px; font-size: 14px; color: #374047; font-weight: bold; } .sugang02 .tableA_content > li div { display: table-cell; height: 55px; color: #716e71; font-size: 14px; line-height: 18px; vertical-align: middle; text-align:center; } .sugang02 .tableA_header .subject { width: calc(100% - 635px); } .sugang02 .tableA_header .time { width: 120px;} .sugang02 .tableA_header .period { width: 235px;} .sugang02 .tableA_header .review { width: 150px;} .sugang02 .tableA_header .entrance { width: 150px;} .sugang02 .tableA_content .subject {display: table-cell; width: calc(100% - 635px); text-decoration: none; } .sugang02 .tableA_content .subject .title { display: table-cell; box-sizing: border-box; width: 100%; padding: 10px 60px; text-align: left; font-size: 18px; line-height: 24px; } .sugang02 .tableA_content .time { width: 120px;} .sugang02 .tableA_content .period { width: 235px;} .sugang02 .tableA_content .review { width: 150px; float: none; } .sugang02 .tableA_content .entrance { width: 150px; float: none; text-align: center; } .sugang02 .tableA_content > li div.time:before {content: ''!important;} .sugang02 .tableA_content > li div.completion:before {content: ''!important;} /*수료증 */ .certificate {display: block; } .certificate .tableA_content > li { display: table; width: 100%; flex-wrap: wrap; box-sizing: border-box; padding: 15px 0px; background: #fff; border-top: 1px solid #ebebeb; border-bottom: 0px solid #ebebeb; margin-bottom: 0px; } .certificate .tableA_header li > div { display: table-cell; vertical-align: middle; text-align: center; height: 55px; font-size: 16px; color: #374047; font-weight: bold; } .certificate .tableA_content > li div { display: table-cell; height: 55px; color: #716e71; font-size: 18px; line-height: 20px; vertical-align: middle; text-align:center; } .certificate .tableA_header .num { width: 80px; } .certificate .tableA_header .type { width: 150px; } .certificate .tableA_header .title { width: calc(100% - 830px); } .certificate .tableA_header .period { width: 300px; text-align: center;} .certificate .tableA_header .yn { width: 120px; } .certificate .tableA_header .print { width: 180px; } .certificate .tableA_content .num { width: 80px; text-align: center; font-size: 18px; } .certificate .tableA_content .type { width: 150px; text-align: center; font-size: 18px; } .certificate .tableA_content .title {display: table-cell; width: calc(100% - 830px); color: #000; font-size: 18px; font-weight: 900; } .certificate .tableA_content .period { width: 300px; text-align: center; font-size: 18px; color: #0d58ad; } .certificate .tableA_content .yn { width: 120px; color: #0d58ad; } .certificate .tableA_content .print { width: 180px; } } /************* 게시판 상세 *********************/ .tableA_view h4{ display: block; width: 100%; border-top: 2px solid #374047; background: #f8f8f8; font-size: 18px ; line-height: 30px; text-align: left; color: #374047; box-sizing: border-box; padding: 24px 5% 20px 5%; font-weight: 900; border-bottom: 1px solid #ebebeb; } .tableA_view_headert { width: 100%; } .tableA_view_headert li { border-bottom: 1px solid #ebebeb; overflow: hidden; padding: 20px 5%; color: #716e71; font-size: 14px; } .tableA_view_headert li span.title { display: inline-block; padding-right: 10px; color: #848484; font-size: 14px; } .tableA_view_headert li span.title i {display: inline-block; padding-right: 5px; } .tableA_view_headert li div.village { width:100%; float: left; text-align: left; font-size: 16px; } .tableA_view_headert li div.day {width:100%; float: right; text-align: left; font-size: 14px; margin-top: 10px; } .tableA_view_content { box-sizing: border-box; width: 100%; padding: 30px 5%; border-bottom: 2px solid #ebebeb; line-height: 160%; } .tableA_view .btn_box {width: 100%; text-align: right; margin-top: 20px;} /*q&a*/ .qna .tableA_view h4{ display: block; width: 100%; border-top: 2px solid #374047; background: #f8f8f8; font-size: 18px ; line-height: 30px; text-align: left; color: #374047; box-sizing: border-box; padding: 24px 5% 20px 5%; font-weight: 900; border-bottom: 1px solid #ebebeb; } .qna .tableA_view_headert { width: 100%; } .qna .tableA_view_headert li { border-bottom: 1px solid #ebebeb; overflow: hidden; padding: 20px 5%; color: #716e71; font-size: 14px; } .qna .tableA_view_headert li span.title { display: inline-block; padding-right: 10px; color: #a5a5a7; font-size: 16px; } .qna .tableA_view_headert li span.title i {display: inline-block; padding-right: 5px; } .qna .tableA_view_headert li div.village { width: 60%; float: left; text-align: left; font-size: 16px; } .qna .tableA_view_headert li div.day { width: 200px; float: right; text-align: right; font-size: 14px; } .qna .tableA_view_content { box-sizing: border-box; width: 100%; padding: 30px 5%; border-bottom: 2px solid #ebebeb; line-height: 160%; } .qna .tableA_view_content span.title { display: block; width: 100%; background: #eee; } .qna .tableA_view_answer {display: block; width: 100%; border-top: 2px solid #374047; border-bottom: 1px solid #ebebeb; line-height: 160%; color: #409f89; } .qna .tableA_view_answer > span {display: block; width: 100%; padding: 15px 5%; font-size: 14px ; line-height: 30px; box-sizing: border-box; } .qna .tableA_view_answer .title { background: #f8f8f8; text-align: left; color: #374047; font-weight: 900; border-bottom: 1px solid #ebebeb;} .tableA_view_answer_li{ width: 100%; } .tableA_view_answer_li li { border-bottom: 1px solid #ebebeb; overflow: hidden; padding: 15px 5%; color: #716e71; font-size: 14px; } .tableA_view_answer_li li span.title { display: inline-block; padding-right: 10px; color: #a5a5a7; } .tableA .btn_box {width: 100%; text-align: right; margin-top: 20px;} .qna .next_line { display: block; margin-top: 12px; height: 18px } @media screen and (min-width: 992px) { .tableA_view_headert li div.village { width: 60%; float: left; text-align: left; font-size: 14px; } .tableA_view_headert li div.day { width: 200px; float: right; text-align: right; font-size:14px; margin-top: 0px; } } /************* 게시판 글쓰기 *********************/ .tableA_write_content { display: table; width: 100%; border-top: 2px solid #374047; } .tableA_write_content li { display: table ; box-sizing: border-box; width: 100%; border-bottom: 1px solid #ebebeb; overflow: hidden; padding: 15px 5%; color: #716e71; font-size: 16px; } .tableA_write_content li span.title { display: block; padding-right: 10px; color: #374047; width: 100%; font-weight: 900; vertical-align: middle; } .tableA_write_content li span.title i {display: inline-block; padding-right: 5px; } .tableA_write_content li .input_box { display: block; width: 100%; margin-top: 12px; } .tableA_write_content li .radio_box { display: block; width: 100%; margin-top: 12px; } .tableA_write_content li .input_box input { width: 100%; height: 34px; border: 1px solid #a9a9a9; color: #999; font-size: 14px; line-height: 34px; } .tableA_write_content li .input_box textarea { width: 100%; border: 1px solid #a9a9a9; padding: 10px; color: #999; min-height: 200px; } .tableA_write .btn_box {width: 100%; text-align: right; margin-top: 20px;} .tableA_write_content li .input_box input[type="file"] { border: 0px; background: #fff; ; padding: 0 30px 0 0px; } .tableA_write_content li .radio_box input[type="radio"] { width: 0px; border: 0px; background: #fff; padding: 0 30px 0 0px; } @media screen and (min-width: 992px) { .tableA_write_content { display: table; width: 100%; border-top: 2px solid #374047; } .tableA_write_content li { display: table ; box-sizing: border-box; width: 100%; border-bottom: 1px solid #ebebeb; overflow: hidden; padding: 15px 5%; color: #716e71; font-size: 16px; } .tableA_write_content li span.title { display:table-cell; padding-right: 10px; color: #374047; width: 120px; font-weight: 900; vertical-align: middle; } .tableA_write_content li span.title i {display: inline-block; padding-right: 5px; } .tableA_write_content li .input_box { display:table-cell; width: calc(100% - 120px); margin-top: 0px; } .tableA_write_content li .radio_box { display:table-cell; width: calc(100% - 120px); margin-top: 0px; } .tableA_write_content li .input_box input { width: 100%; height: 34px; padding: 0 30px 0 10px; border: 1px solid #a9a9a9; color: #999; font-size: 14px; line-height: 34px; } .tableA_write_content li .input_box input.input_half { width: 43%; height: 34px; padding: 0 30px 0 10px; border: 1px solid #a9a9a9; color: #999; font-size: 14px; line-height: 34px; } .tableA_write_content li .input_box textarea { width: 100%; border: 1px solid #a9a9a9; padding: 10px; color: #999; min-height: 200px; } .tableA_write .btn_box {width: 100%; text-align: right; margin-top: 20px;} } /*****페이징 *****/ .pagination { text-align: center; margin-top: 25px; } .pagination > a { position: relative; display: inline-block; width: 40px; height: 40px; border: 1px solid #ddd; vertical-align: top; } .pagination > a i { line-height: 40px; } /* position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;*/ .pagination > a.is-disabled { cursor: default; } .pagination > a.is-disabled i { opacity: 0.62; } .pagination > a + a { margin-left: 10px; } .pagination > span { display: inline-block; width: 120px; font-size: 17px; line-height: 38px; vertical-align: top; } .pagination .current { color: #0072de; } .pagination .total { color: #000; } .pagination .total:before { content: ' / '; } @media (max-width: 359px) { .pagination > span { width: 100px; } } /*셀렉트 박스 */ .village_select_box { overflow: hidden; width: 245px; float: right; margin-bottom: 6px; } .select-css { display: block; float: left; font-size: 14px; font-family: sans-serif; font-weight: 700; color: #949497; line-height: 1.3; padding: .6em 1.4em .5em .8em; width: 180px; height: 40px; border-radius: 5px; box-sizing: border-box; margin: 0; border: 1px solid #bfbdbb; -moz-appearance: none; -webkit-appearance: none; appearance: none; background-color: #fff; background-image: url('/dgn/ver02/images/select_check.png'); background-repeat: no-repeat, repeat; background-position: right .7em top 50%, 0 0; background-size: .65em auto, 100%; } .select-css::-ms-expand { display: none; } .select-css:hover { border-color: #888; } .select-css:focus { border-color: #000; box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7); box-shadow: 0 0 0 3px -moz-mac-focusring; color: #1671c7; outline: none; } .select-css option { font-weight:normal; } .select-mail { display: inline-block; font-size: 14px; font-family: sans-serif; font-weight: 700; color: #949497; line-height: 1.3; padding: .6em 1.4em .5em .8em; width: 48%; height: 38px; box-sizing: border-box; margin: 0; border: 1px solid #bfbdbb; -moz-appearance: none; -webkit-appearance: none; appearance: none; background-color: #fff; background-image: url('/dgn/ver02/images/select_check.png'); background-repeat: no-repeat, repeat; background-position: right .7em top 50%, 0 0; background-size: .65em auto, 100%; } .select-mail::-ms-expand { display: none; } .select-mail:hover { border-color: #888; } .select-mail:focus { border-color: #000; box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7); box-shadow: 0 0 0 3px -moz-mac-focusring; color: #1671c7; outline: none; } .select-mail option { font-weight:normal; } /***** 기타 *****/ .title_box { width: 100%; padding: 32px 0px 12px 0px; } .title_box h3 { font-size: 22px; color: #374047; text-align: left; font-weight: 900; letter-spacing: -2px; } .control_box {overflow: hidden; width: 100%; margin-top: -22px;} @media screen and (min-width: 992px) { .title_box { width: 100%; padding: 0px 0px 20px 0px; } .title_box h3 { font-size: 26px; color: #374047; text-align: left; font-weight: 900; letter-spacing: -2px; padding-top: 16px; } } .info_box { background: #f3f3f5; padding: 22px 2%; display: block; align-items: center; margin-bottom: 25px;} .info_box span.info { display: block; padding: 8px 0px 0px 10px ; } .info_box span.title { color: #004899; font-size: 16px; font-weight: 900; width: 180px ; } .info_box span.title i{ display: inline-block; color: #004899; padding-right: 5px; } .info_box span ul {} .info_box span li { list-style: circle; color: #9b9795; font-size: 12px; line-height: 16px; margin-top: 4px; } .info_box span li span.point { color: #e03945; } .img_info_box {width: 100%; } .img_info_box span {margin: 0 auto; width: 100%; } .img_info_box span img{width: 100%; } .img_web {display: none; } .img_mobile {display: block; } .info_box .info .info_tit { display: block; color:#000; padding-bottom: 4px; margin-top: 7px; margin-left: -10px; } @media screen and (min-width: 992px) { .info_box { background: #f3f3f5; padding: 30px 2%; display: flex; align-items: center; margin-bottom: 30px;} .info_box span.info { padding-left: 20px; } .info_box span.title { color: #004899; font-size: 16px; font-weight: 900; display: inline-block; width: 180px ;} .info_box span.title i{ display: inline-block; color: #004899; padding-right: 5px; } .info_box span ul {} .info_box span li { list-style: circle; color: #9b9795; font-size: 14px; line-height: 20px; margin-top: 0px; } .info_box span li span.point { color: #e03945; } .img_web {display: block; } .img_mobile {display: none; } } /***** 버튼 *****/ .btn_list { background: #fff; height: 48px; line-height: 48px; font-size: 14px; font-weight: 900; border: 1px solid #bfbdbb; color: #374047; padding: 0 24px; border-radius: 4px; text-align: center; cursor: pointer; } .btn_del { background: #fff; height: 48px; line-height: 48px; font-size: 14px; font-weight: 900; border: 1px solid #bfbdbb; color: #374047; padding: 0 24px; border-radius: 4px; text-align: center; cursor: pointer;} .btn_modify { background: #fff; height: 48px; line-height: 48px; font-size: 14px; font-weight: 900; border: 1px solid #bfbdbb; color: #374047; padding: 0 24px; border-radius: 4px; text-align: center; cursor: pointer; } .btn_save { background: #fff; height: 48px; line-height: 48px; font-size: 14px; font-weight: 900; border: 1px solid #bfbdbb; color: #374047; padding: 0 24px; border-radius: 4px; text-align: center; cursor: pointer; } .btn_write { background: #fff; height: 48px; line-height: 48px; font-size: 14px; font-weight: 900; border: 1px solid #bfbdbb; color: #374047; padding: 0 24px; border-radius: 4px; text-align: center; cursor: pointer; } .btn_cancel { background: #fff; height: 48px; line-height: 48px; font-size: 14px; font-weight: 900; border: 1px solid #bfbdbb; color: #374047; padding: 0 24px; border-radius: 4px; text-align: center; cursor: pointer;} .btn_re { height: 48px; line-height: 48px; border: 1px solid #1671c7; color: #1671c7; padding: 0 24px; border-radius: 4px; text-align: center; cursor: pointer; } .btn_choice { float: left; margin-left: 5px; height: 40px; border: 0px; line-height: 40px; color: #ebecec; padding: 0 16px; background: #374047; border-radius: 4px; text-align: center; cursor: pointer; font-size: 14px; } .btn_entrance { width: 100%; height: 44px; line-height: 44px; font-size: 14px; border: 0px; color: #ebecec; padding: 0 10px; background: #004899; border-radius: 4px; text-align: center; box-shadow:none; font-size: 14px; box-shadow: 4px 4px 5px 3px #f0eeee; cursor: pointer; } .btn_review { width: 100%; height: 48px; line-height: 48px; font-size: 14px; border: 0px; color: #ebecec; padding: 0; background: #374047; border-radius: 4px; text-align: center; margin-top: 4px; cursor: pointer; } .btn_apply { width: 100%; height: 44px; line-height: 44px; font-size: 14px; border: 0px; color: #ebecec; padding: 0 10px; background: #004899; border-radius: 4px; text-align: center; box-shadow:none; font-size: 14px; box-shadow: 4px 4px 5px 3px #f0eeee; cursor: pointer; } .btn_applycancel { width: 100%; height: 48px; line-height: 48px; font-size: 14px; border: 0px; color: #ebecec; padding: 0; background: #374047; border-radius: 4px; text-align: center; margin-top: 4px; cursor: pointer; } .btn_applyfinish { width: 100%; height: 48px; line-height: 48px; font-size: 14px; border: 0px; color: #fff; padding: 0; background: #161616; border-radius: 4px; text-align: center; margin-top: 4px; cursor: pointer; } .sugang02 .btn_entrance { width: 100%; height: 44px; line-height: 44px; border: 0px; color: #11a381; padding: 0; background: #fff; border-radius: 2px; text-align: center; border: 1px solid #dfdfdf; box-shadow: 4px 4px 5px 3px #f0eeee; font-size: 15px; cursor: pointer; } .sugang02 .btn_review { width: 100%; height: 44px; line-height: 44px; border: 0px; color: #004899; padding: 0 30px; background: #fff; border-radius: 4px; text-align: center; border: 1px solid #004899; box-shadow: 4px 4px 5px 3px #f0eeee; font-size: 15px; cursor: pointer; } .btn_send { background: #fff; height: 48px; line-height: 48px; font-size: 15px; font-weight: 900; border: 1px solid #bfbdbb; color: #374047; padding: 0 30px; border-radius: 4px; text-align: center; cursor: pointer; } @media screen and (min-width: 992px) { .btn_entrance { width: 120px; height: 44px; line-height: 44px; border: 0px; color: #ebecec; padding: 0 10px; background: #004899; border-radius: 4px; text-align: center; box-shadow:none; font-size: 14px; } .btn_review { width: 120px; height: 44px; font-size: 14px; line-height: 44px; border: 0px; color: #004899; padding: 0 30px; background: #fff; border-radius: 4px; text-align: center; border: 1px solid #004899; margin-top: 0px; } .btn_apply { width: 120px; height: 44px; line-height: 44px; border: 0px; color: #ebecec; padding: 0 10px; background: #004899; border-radius: 4px; text-align: center; box-shadow:none; font-size: 14px; } .btn_applycancel { width: 120px; height: 44px; font-size: 14px; line-height: 44px; border: 0px; color: #004899; padding: 0 10px; background: #fff; border-radius: 4px; text-align: center; border: 1px solid #004899; margin-top: 0px; } .btn_applyfinish { width: 120px; height: 44px; font-size: 14px; line-height: 44px; border: 0px; color: #fff; padding: 0 10px; background: #161616; border-radius: 4px; text-align: center; border: 1px solid #004899; margin-top: 0px; } } /***** 탭 *****/ .curriculum_box header { font-size: 30px; font-weight: 600; margin-bottom: 20px; } .curriculum_box nav{ position: relative; height: 55px; width: 100%; display: flex; align-items: center; border-left: 1px solid #bfbdbb; } .curriculum_box nav label { display: block; box-sizing: border-box; height: 100%; width: 100%; text-align: center; line-height: 50px; cursor: pointer; color: #949497; font-size: 18px; position: relative; z-index: 1; border-top: 1px solid #bfbdbb; border-right: 1px solid #bfbdbb; border-bottom: 2px solid #374047; font-weight: 900; } @media screen and (min-width: 992px) { font-size: 16px; } #su01:checked ~ nav label.su01, #su02:checked ~ nav label.su02, #su03:checked ~ nav label.su03 {color: #374047; border: 0px; } .curriculum_box input[type="radio"]{display: none; } .curriculum_box nav label i {padding-right: 7px; } .curriculum_box nav .slider {position: absolute; height: 100%; width: 33.3%; color: #374047; bottom: 0; left: 0px; z-index: 0; border: 2px solid #374047; border-bottom: 2px solid #fff; box-sizing: border-box; background: #fff; } #su02:checked ~ nav .slider { left: 33.3%; } #su03:checked ~ nav .slider { left: 66.6%; } section .curriculum_content { display : none; } #su01:checked ~ section .content-1, #su02:checked ~ section .content-2, #su03:checked ~ section .content-3 { display: block; } /***** 교육안내 *****/ .curriculum_content {padding-top: 40px; } .curriculum_content .text_box {background: #f3f3f5; width: 100%; padding: 20px 0px 30px 0px; font-size: 14px; line-height: 20px; color: #949497; text-align: center; } .curriculum_content .text_box .point { display: inline-block; color: #f58612; font-size: 18px; font-weight: 900; padding: 10px 0px; } /*******라디오버튼******/ input[type=radio]:not(old) { margin:0; padding:0; opacity:0; background:url(radio02_off.png) no-repeat 0 0; width:0; } input[type=radio]:not(old) + label { display: inline-block; text-align: left; height:20px; padding-left: 25px; padding-right: 10px; background: url(/dgn/ver02/images/radio02_on.png) no-repeat 0 0; line-height: 110%; vertical-align: top; } input[type=radio]:not(old):checked + label { background: url(/dgn/ver02/images/radio02_off.png) no-repeat 0 0; } /*사업소개 */ .business_box { border-top: 2px solid #374047; } .business_box > .text_box {text-align: center; } .business_box > .text_box h4 { font-size: 20px; color: #374047 ; font-weight: 900; letter-spacing: -1px; } .business_box > .text_box .txt { font-size: 14px; color: #374047; margin-top: 16px; line-height: 20px; } .business_box > .text_box .txt span {display: block; text-align:center; width: 100%; } .business_box > .business_img { width: 100%; } .curriculum_info { background: #fff; height: 700px; } .curriculum_info > .text_box {text-align: center; padding-top: 60px; } .curriculum_info > .text_box h4 { font-size: 23px; font-weight: 900; color: #328d6c; } .curriculum_info > .text_box .txt { font-size: 23px; line-height: 24px; color: #374047; font-weight: 900; letter-spacing: -1px; padding-top:11px; } .curriculum_info02 { display: block; align-items: center; justify-content: center; margin-top:35px; } .curriculum_info02 li a { text-decoration: none; } .curriculum_info02 li { display: block; position: relative; box-sizing: border-box; border: 1px solid #d6d6d6; width: 100%; padding: 49px 21px 37px 40px; } .curriculum_info02 li:first-child { margin-left: 0px; } .curriculum_info02 li .title_box02 { font-size: 18px; font-weight: 900; color: #328d6c; font-family: 'Noto Sans KR', sans-serif; } .curriculum_info02 li .text_box { font-size: 15px; line-height: 21px; color: #5f656a; padding: 15px 0px ; } .curriculum_info02 li .text_box span { display: block; text-align: left; } .curriculum_info02 li .img_box { position: absolute; top: 10px; right: 10px; height: 115px; width: 90px; background: url(/dgn/ver02/images/icon_business.png) no-repeat } .curriculum_info02 li.curriculum_01 .img_box { background-position: -32px 13px; } .curriculum_info02 li.curriculum_02 .img_box { background-position: -32px -466px; } .curriculum_info02 li.curriculum_03 .img_box { background-position: -26px -982px; } .curriculum_info03 {list-style: none; } .curriculum_info03 > li {width: 100%; display: block; margin-bottom: 15px; box-sizing: border-box; padding: 60px 0px 60px 7%; } .curriculum_info03 li.curriculum_01 { background:#7e827b url(/dgn/ver02/images/curriculum_01.jpg) no-repeat right bottom; } .curriculum_info03 li.curriculum_02 {background:#6a7279 url(/dgn/ver02/images/curriculum_02.jpg) no-repeat right bottom; } .curriculum_info03 li.curriculum_03 {background:#b99286 url(/dgn/ver02/images/curriculum_03.jpg) no-repeat right top; } .curriculum_info03 li .title_box02 {font-size: 30px; color: #000000; font-weight: 900; } .curriculum_info03 li .text_box {font-size: 15px; color: #374047; font-weight: 300; padding-top: 15px; } .curriculum_info04 {list-style: none; margin-top: 40px; } .curriculum_info04 li {width: 100%; display: block; margin-bottom: 15px; } .curriculum_info04 li .title { display: block; color: #f3cf02; font-size: 20px; font-weight: bold; padding-bottom: 10px; } .curriculum_info04 li .sub_text { display: block; color: #fff; font-size: 15px; font-weight: 300; } .null_box01 { height: 40px ;} .null_box02 { height: 25px ;} .btn_more { display: inline-block; padding-left: 8px; background: #fff; border: 0px; color: #7f8387; letter-spacing: -1px; margin-left: -7px; font-size: 12px; } @media screen and (min-width: 992px) { .parallax-window { min-height: 200px; background: transparent; } .business_box { border-top: 2px solid #374047; } .business_box > .text_box {text-align: center; } .business_box > .text_box h4 { font-size: 30px; color: #374047 ; font-weight: 900; letter-spacing: -2px; } .business_box > .text_box .txt { font-size: 16px; color: #374047; margin-top: 16px; line-height: 22px; } .business_box > .text_box .txt span {display: block; text-align:center; width: 100%; } .curriculum_info { background: #fff; height: 510px; } .curriculum_info > .text_box {text-align: center; padding-top: 60px; } .curriculum_info > .text_box h4 { font-size: 24px; font-weight: 900; color: #328d6c; } .curriculum_info > .text_box .txt { font-size: 27px; line-height: 24px; color: #374047; font-weight: 900; letter-spacing: -1px; padding-top:11px; } .curriculum_info02 { display: flex; align-items: center; justify-content: center; margin-top: 35px; } .curriculum_info02 li { box-sizing: border-box; border: 1px solid #d6d6d6; width: 25%; margin-left: 5%; padding: 49px 21px 37px 40px; } .curriculum_info02 li:first-child { margin-left: 0px; } .curriculum_info02 li .title_box02 { font-size: 22px; font-weight: 900; color: #328d6c; font-family: 'Noto Sans KR', sans-serif; } .curriculum_info02 li .text_box { font-size: 15px; line-height: 21px; color: #5f656a; padding: 15px 0px ; } .curriculum_info02 li .text_box span { display: block; text-align: left; } .curriculum_info02 li .img_box { position: relative; top: 0px; right: 0px; height: 115px; width: 100%; background: url(/dgn/ver02/images/icon_business.png) no-repeat } .curriculum_info02 li.curriculum_01 .img_box { background-position: -32px 13px; } .curriculum_info02 li.curriculum_02 .img_box { background-position: -32px -466px; } .curriculum_info02 li.curriculum_03 .img_box { background-position: -26px -982px; } .null_box01 { height: 60px ;} .null_box02 { height: 40px ;} .btn_more { background: #fff; border: 0px; color: #7f8387; letter-spacing: -1px; font-size: 12px; } } /**********설문조사 **********/ .e_question { list-style: none; border-bottom: 1px solid #ebebeb; } .e_question > li {width: 100%; font-size: 14px; color: #716e71; text-align: left; padding: 25px 0px; } .e_question > li.title { background: #f8f8f8; border-top: 2px solid #374047; border-bottom: 1px solid #ebebeb; box-sizing: border-box; font-size: 15px; font-weight: 400; color: #374047; padding: 25px 5%; } .e_question li .e_choice { list-style: none; } .e_question li .e_choice { width: 100%; } .e_question li .e_choice li { font-size: 14px; color: #716e71; text-align: left; padding: 5px 5%; } .e_question li .e_choice li span textarea { width: calc(100% - 20px); border: 1px solid #a9a9a9; padding: 10px; color: #999; min-height: 40px; margin-left: 30px; margin-top: 3px; } .e_question li .e_choice li span textarea.textarea_big { width: 100%; border: 1px solid #a9a9a9; padding: 10px; color: #999; min-height: 120px; margin: 0px; } .evaluation .btn_box {width: 100%; text-align: center; margin-top: 20px;} input.e_check[type=checkbox]:not(old) { margin:0; padding:0; opacity:0; background:url(/dgn/ver02/images/check02_on.png) no-repeat 0 0; width:0; } input.e_check[type=checkbox]:not(old) + label.e_check { display: inline-block; text-align: left; height:21px; padding-left: 25px; background: url(/dgn/ver02/images/check02_off.png) no-repeat 0 0; vertical-align: top; } input.e_check[type=checkbox]:not(old):checked + label.e_check { background: url(/dgn/ver02/images/check02_on.png) no-repeat 0 0; } /***********개인정보처리 ***********/ .policy_box { font-size: 14px; color: #5f656a; line-height: 24px; } .dan_box { margin-top: 40px; } .dan_box .title { display: block; font-size: 16px; color: #328d6c; margin-bottom: 10px; padding: 10px 0px; border-bottom: 1px solid #328d6c; border-top: 2px solid #328d6c; font-weight: bold; letter-spacing: -1px; } .dan_box .title i {margin :0 10px; } .dan_box table {border-top: 2px solid #374047; font-size: 14px; width: 100%; margin: 15px 0px 10px 0px; } .dan_box table th { background: #f8f8f8; border-bottom: 1px solid #e2e2e2; text-align: center; font-weight: bold; color: #000; padding: 8px 0px; } .dan_box table td { background: #fff; box-sizing: border-box; border-bottom: 1px solid #e2e2e2; text-align: center; padding: 6px 20px; } .dan_box02 { margin-bottom: 30px; color: #000; } .dan_box03 { display: block; margin: 16px 0px; } .dan_box04 { display: block; padding-left: 10px; } .pop_close_box { text-align:left; padding: 30px 0 30px 0; } .pop_close_box .btn_close { display: inline-block; background: #fff; height: 48px; line-height: 48px; font-weight: 900; border: 1px solid #bfbdbb; padding: 0 30px; border-radius: 4px; text-align: center; cursor: pointer; font-size: 18px; text-decoration: none; } .pop_close_box .btn_close span { color: #374047; font-size: 18px; text-decoration: none; } /**************온라인 교육 학습현황*****************/ .study_box { overflow: hidden; display: block; justify-content: center; align-items: center; } .video_box {height: 100%; width: 410px; } .chatting_box { height: 350px; width: 410px; margin-left: 1%; } @media screen and (min-width: 992px) { .study_box { overflow: hidden; display: flex; justify-content: center; align-items: center; height: 100vh; max-height: 520px; } .video_box {height: 100%; width: 64%; } .chatting_box { height: 100%; width: 35%; margin-left: 1%; } } /****퀵메뉴 ***/ .quick_menu {display: none; } @media screen and (min-width: 1280px) { .quick_menu { display: block; position:fixed; top: 280px; right: 0px; width: 110px; height: 505px; } .quick_menu ul li { display: block; } .quick_menu ul li a {text-decoration: none; display: block; padding: 20px 0px 10px 0px; height: 70px; border-bottom: 1px solid #2160a6; background: #004899; } .quick_menu ul li a:hover {background: #d6000f; } .quick_menu ul li:nth-child(1) a .icon_box:after { content: '\f46d'; font-size: 20px; font-family: "Font Awesome 5 Free"; font-weight: 900; } .quick_menu ul li:nth-child(2) a .icon_box:after { content: '\f274'; font-size: 20px; font-family: "Font Awesome 5 Free"; font-weight: 900; } .quick_menu ul li:nth-child(3) a .icon_box:after { content: '\f083'; font-size: 20px; font-family: "Font Awesome 5 Free"; font-weight: 900; } .quick_menu ul li:nth-child(4) a .icon_box:after { content: '\f187'; font-size: 20px; font-family: "Font Awesome 5 Free"; font-weight: 900; } .quick_menu ul li:nth-child(5) a .icon_box:after { content: '\f46c'; font-size: 20px; font-family: "Font Awesome 5 Free"; font-weight: 900; } .quick_menu ul li a span { display: block; color: #fff; font-size: 15px; letter-spacing: -1px; line-height: 120%; text-align: center; margin-top: 10px; } } /*******************************************gnb**************************************************/ .header.sub-header .pc-nav .menu-list>a, .header:hover .pc-nav .menu-list>a, .header.fixed .pc-nav .menu-list>a {color:#333} .header.sub-header .menu-btn .line,.header:hover .menu-btn .line, .header.fixed .menu-btn .line,.header.sub-header .menu-btn .line:before, .header:hover .menu-btn .line:before, .header.fixed .menu-btn .line:before, .header.sub-header .menu-btn .line:after, .header:hover .menu-btn .line:after, .header.fixed .menu-btn .line:after {background-color:#11a381} .header.sub-header .btn-search, .header:hover .btn-search, .header.fixed .btn-search {background-image:url(/dgn/ver02/images/logo_kpffc_2.png)} /**/ .header.sub-header .logo .logo-img, .header:hover .logo .logo-img, .header.fixed .logo .logo-img {background-image:url(/dgn/ver02/images/logo_kpffc_2.png)} body.pc-nav-open{overflow:hidden} .header {position:relative;top:0;left:0;width:100%;-webkit-transition:all .4s;transition:all .4s;z-index:700} .header.sub-header {position:relative;height:70px} @media screen and (min-width: 992px) {.header.sub-header{height:90px}} @media screen and (min-width: 992px) {.header.is-hide .fixed-wrap{top:-90px !important}} .header.fixed .fixed-wrap {background-color:#fff;border-bottom:1px solid #ddd} @media screen and (min-width: 992px) {.header.fixed .header-inner{height:90px}.header.fixed .navBg{top:90px;border-top:0}.header.fixed .sub-menu-list-wrap{top:90px}.header.fixed .fixed-wrap{height:90px}} .header.fixed.sub-header{position:relative !important} .header .fixed-wrap{position:fixed;top:0;left:0;width:100%;height:100px;background-color:#fff;transition:all .4s} /*pc용 메뉴 높이 */ @media screen and (min-width: 992px) {.header .fixed-wrap{height:100px; background: #fff; }.pc-nav-open .header .fixed-wrap:after{content:'';display:inline-block;position:absolute;bottom:0;left:0;width:100%;height:1px;border-bottom:1px solid #ddd;z-index:701}} .header .fixed-wrap:hover{background-color:#fff} .header .header-inner{position:relative;display:flex;justify-content:center;margin:0 auto;height:100px; background: #fff;} @media screen and (min-width: 992px){.header .header-inner{height:90px;padding:0 15px;transition:height .4s}} .header .logo{position:absolute;top:0%;left:15px;transform:translateY(-50%);width:100%;height:100px;z-index:701; } @media screen and (min-width: 992px){.header .logo{width:378px; top: 65%; }} @media screen and (min-width: 1325px){.header .logo{left:calc((100% - 1280px) / 2)}} .header .logo .logo-img{display:block; width:100%; height:150px; background:#fff url(/dgn/ver02/images/logo_kpffc_2.png) no-repeat left 90px/170px auto ; } /* width:100%; max-width: 288px; no-repeat center/100% auto*/ .pc-nav-open .header .logo .logo-img{background-image:url(/dgn/ver02/images/logo_kpffc_2.png) no-repeat; } .header .logo .logo-img span {display: inline-block; font-size: 12px; text-indent: -9999px; } /* */ .header .navBg{display:none} @media screen and (min-width: 992px) { .header .logo .logo-img{display:block;width:80%; max-width: 288px; height:100%; background:url(/dgn/ver02/images/logo_kpffc_2.png) no-repeat left 6px/84% auto; } /* width:100%; no-repeat center/100% auto*/ .header .navBg{display:block;position:absolute;left:0;top:90px;display:none;width:100%;height:245px;border-bottom:1px solid #ddd;border-top:1px solid #ddd;background-color:#fff;transition:top .4s;overflow:hidden}} @media screen and (min-width: 992px) {.header .bg-img{position:absolute;top:50px;right:0;width:508px;height:272px;background:#fff url(/views/res/imgs/common/menu-bg-img.jpg) no-repeat right bottom/contain}}@media screen and (min-width: 1310px){.header .bg-img{right:calc((100% - 1280px)/2 + 100px)}} .pc-nav{display:none} @media screen and (min-width: 992px) {.pc-nav{display:flex; padding-top: 20px; padding-left: 0%; }.pc-nav .menu-list-wrap{display:flex}.pc-nav .menu-list{position:relative;display:flex;justify-content:center;padding:0 19px}} @media screen and (min-width: 992px) and (min-width: 1200px) {.pc-nav .menu-list{padding:0; width:146px}} /*pc용 */ @media screen and (min-width: 992px){.pc-nav .menu-list>a{position:relative;display:flex;align-items:center;justify-content:center;font-size:17.5px; text-decoration: none; letter-spacing:-1px;color:#374047; transition:color .4s;-webkit-transition:color .4s;cursor:pointer; font-weight: 900; } .pc-nav .menu-list>a:after{content:"";display:inline-block;position:absolute;bottom:0;left:0;width:100%;height:3px;background-color:#d6000f;opacity:0;transition:opacity .4s} body.search-nav-open .pc-nav .menu-list>a:after{content:none}.pc-nav .menu-list:hover>a:after{opacity:1} .pc-nav .menu-list.on>a{color:#d6000f !important}.pc-nav .sub-menu-list-wrap{display:none;position:absolute;left:0;top:90px;width:100%;height:315px;text-align:center;z-index:1;transition:top .4s}.pc-nav .sub-menu-list:nth-of-type(1){padding-top:0px} .pc-nav .sub-menu-list.on>a{color:#d6000f}.pc-nav .sub-menu-list a{position:relative;display:flex;align-items:center;justify-content:center;height:52px;font-size:18px; letter-spacing: -1px; color:#777;opacity:0.98;transition:color .4s;-webkit-transition:color .4s}.pc-nav .sub-menu-list:hover>a{color:#d6000f}.pc-nav .sub-menu-list:hover>a:after{transform:scaleX(1);-webkit-transform:scaleX(1)}.pc-nav .sub-menu-list .text{word-break:keep-all; line-height: 24px; font-size: 16px; }} .header-right-wrap{position:absolute;right:15px;top:35px;height:40px;display:flex;align-items:center; background: #fff; } @media screen and (min-width: 1325px){.header-right-wrap{right:calc((100% - 1280px) / 2)}} .header-right-wrap .menu-btn-wrap{position:relative;display:flex;align-items:center;justify-content:center;padding-left:15px; padding-right:15px;height:100%;cursor:pointer;z-index:701; background: #004899; border-radius: 4px; } @media screen and (max-width: 991.98px){.pc-nav-open .header-right-wrap .menu-btn-wrap{z-index:701}} /*@media screen and (min-width: 992px){*/.header-right-wrap .btn-nav-eggsc{position:relative;z-index:701; font-size: 13px; font-weight: 900; padding: 0 10px; color: #848383; text-decoration: none; } @media screen and (min-width: 992px){.header-right-wrap .btn-nav-eggsc{ color: #848383; font-size: 13px; padding: 0 10px; font-weight: 900; }} .menu-btn .line{margin:7px 0;transition:transform .4s} .menu-btn .line{margin:7px 0;transition:transform .4s} .pc-nav-open .menu-btn .line{background-color:rgba(0,0,0,0) !important} .menu-btn .line,.menu-btn .line:before,.menu-btn .line:after {content:"";display:block;width:20px;height:1px;background-color:#fff;transition:transform .4s} @media screen and (min-width: 992px){.menu-btn .line,.menu-btn .line:before,.menu-btn .line:after{background-color:#fff}} .pc-nav-open .menu-btn .line:before,.pc-nav-open .menu-btn .line:after{background-color:#fff !important} .menu-btn .line:before{transform:translateY(-7px)} .pc-nav-open .menu-btn .line:before{-webkit-transform:translateY(0) rotateZ(135deg);transform:translateY(0) rotateZ(135deg)} .menu-btn .line:after{transform:translateY(5px)} .pc-nav-open .menu-btn .line:after{-webkit-transform:translateY(-1px) rotateZ(-135deg);transform:translateY(-1px) rotateZ(-135deg)} .open-nav-wrap{position:fixed;top:0;left:0;right:0;bottom:0;width:100%; background-color:#fff;opacity:0;transform:translateX(100%);transition:opacity .4s;z-index:700; padding-bottom: 100px; overflow-y: scroll; } .pc-nav-open .open-nav-wrap{opacity:1;transition:opacity .4s,transform .4s;transform:translateX(0);background:#fff url(/views/res/imgs/common/menu-bg-img-m-n.jpg) no-repeat right bottom/contain} @media screen and (min-width: 992px) {.pc-nav-open .open-nav-wrap{background-image:url(/views/res/imgs/common/nav_open_bg.jpg)}} .open-nav-wrap .inner-wrap{position:relative; max-width:1280px;margin:0 auto;height:inherit; padding:100px 30px 0; } /*padding:100px 30px 0;*/ @media screen and (min-width: 992px){.open-nav-wrap .inner-wrap{display:flex;align-items:center;justify-content:center; padding:100px 30px 0;}} .open-nav-wrap .menu-list-wrap{width:100%; height: 750px; padding-bottom: 30px; overflow-x:hidden} /* overflow-y:scroll;*/ @media screen and (min-width: 992px){.open-nav-wrap .menu-list-wrap{display:flex;flex-wrap:nowrap;display:block;width:auto;height:auto;counter-reset:section;overflow:hidden}.open-nav-wrap .menu-list-wrap:hover .menu-list{transition-delay:0s !important}.open-nav-wrap .menu-list-wrap:hover .menu-list>a,.open-nav-wrap .menu-list-wrap:hover .sub-menu-list{color:#aaa;opacity:0.3}} .open-nav-wrap .menu-list-wrap>*{width:100%} @media screen and (min-width: 992px){.open-nav-wrap .menu-list-wrap>*{flex:1 1 0%}} .open-nav-wrap .menu-list{opacity:0;transition:opacity .4s 0.2s} @media screen and (min-width: 992px){.open-nav-wrap .menu-list{position:relative;display:flex;align-items:center;transform:translateX(45px);margin-bottom:37px;transition:transform 0.55s, opacity 0.55s} .open-nav-wrap .menu-list:hover{transform:translateX(25px) !important}.open-nav-wrap .menu-list:hover:before{opacity:1;transform:translateX(-35px)} .open-nav-wrap .menu-list:hover>a{opacity:1 !important;color:#333 !important} .open-nav-wrap .menu-list:hover>a,.open-nav-wrap .menu-list:hover .sub-menu-list{opacity:1;color:#333}} .pc-nav-open .open-nav-wrap .menu-list{opacity:1} @media screen and (min-width: 992px) {.pc-nav-open .open-nav-wrap .menu-list{transform:translateX(0)}.pc-nav-open .open-nav-wrap .menu-list:nth-child(1){transition-delay:.4s}.pc-nav-open .open-nav-wrap .menu-list:nth-child(2){transition-delay:.46s}.pc-nav-open .open-nav-wrap .menu-list:nth-child(3){transition-delay:.52s}.pc-nav-open .open-nav-wrap .menu-list:nth-child(4){transition-delay:.58s}.pc-nav-open .open-nav-wrap .menu-list:nth-child(5){transition-delay:.64s}} .open-nav-wrap .menu-list>a {display:flex;align-items:center;height:40px;border-bottom:1px solid rgba(238,238,238,0.98);font-size:16px;font-weight:500;letter-spacing:0.72px;color:#333; text-decoration: none; transition:color 0.15s} @media screen and (min-width: 992px) {.open-nav-wrap .menu-list>a{height:auto;font-size:34px;letter-spacing:-1.5px;border-bottom:0;width:330px;transition:color 0.4s, opacity 0.4s; font-weight: 900; }} .open-nav-wrap .menu-list.on>a{color:#1671c7} @media screen and (min-width: 992px){.open-nav-wrap .menu-list.on>a{color:#333; text-decoration: none; }} .open-nav-wrap .menu-list:before{counter-increment:section;content:"0" counter(section);position:absolute;top:3px;left:10px;line-height:25px;font-size:13px;font-weight:600;font-family:"Roboto", sans-serif;opacity:0;color:#000;transform:translateX(0px);transition:all 0.5s cubic-bezier(0.63, 0.03, 0.21, 1),color 0s} .open-nav-wrap .menu-list .has-sub{position:relative} .open-nav-wrap .menu-list .has-sub:before,.open-nav-wrap .menu-list .has-sub:after{content:"";position:absolute;top:25px;right:16px;display:inline-block;width:17px;height:1px;background-color:#555;z-index:1;transition:transform 0.2s linear} @media screen and (min-width: 992px) {.open-nav-wrap .menu-list .has-sub:before,.open-nav-wrap .menu-list .has-sub:after{display:none}} .open-nav-wrap .menu-list .has-sub:before{transform:rotate(-90deg)} @media screen and (max-width: 991.98px){.open-nav-wrap .menu-list .has-sub.open{border-bottom:1px solid #8dd889} .open-nav-wrap .menu-list .has-sub.open:before{transform:rotate(0)}.open-nav-wrap .menu-list .has-sub.open:after{transform:rotate(180deg)}} .open-nav-wrap .sub-menu-list-wrap{padding:0 14px;border-bottom:1px solid rgba(238,238,238,0.98)}/*display:none; */ @media screen and (min-width: 992px){.open-nav-wrap .sub-menu-list-wrap{display:flex !important; padding-left:0;border-bottom:0}.pc-nav-open .open-nav-wrap .sub-menu-list-wrap{height:auto !important}} .open-nav-wrap .sub-menu-list{font-size:14px;color:#999} @media screen and (min-width: 992px) {.open-nav-wrap .sub-menu-list{position:relative;font-size:18px;margin-right:40px;color:#333;transition:opacity 0.3s}.open-nav-wrap .sub-menu-list:not(:last-child):after{content:"";position:absolute;top:10px;right:-20px;display:block;width:1px;height:13px;transform:skew(-30deg);background-color:#999}.open-nav-wrap .sub-menu-list:hover{color:#1671c7 !important}} .open-nav-wrap .sub-menu-list:first-child{margin-top:4px} @media screen and (min-width: 992px){.open-nav-wrap .sub-menu-list:first-child{margin-top:0}} .open-nav-wrap .sub-menu-list:last-child{margin-bottom:4px} @media screen and (min-width: 992px){.open-nav-wrap .sub-menu-list:last-child{margin-bottom:0}} .open-nav-wrap .sub-menu-list.on{color:#333} @media screen and (min-width: 992px) {.open-nav-wrap .sub-menu-list.on{color:#8dd889 !important}} .open-nav-wrap .sub-menu-list .text{display:inline-flex;align-items:center;height:34px;transition:color 0.2s; color: #000; } .sub-menu-list a {text-decoration: none; } .open-nav-wrap .bottom-wrap{display:flex;padding:50px 15px 20px} @media screen and (min-width: 992px){.open-nav-wrap .bottom-wrap{display:none}} .open-nav-wrap .bottom-wrap .txt{position:relative;font-size:14px;color:#ccc} .open-nav-wrap .bottom-wrap .txt:not(:last-child){margin-right:25px} .open-nav-wrap .bottom-wrap .txt:not(:last-child):after{content:"";display:inline-block;position:absolute;top:4px;right:-13px;width:1px;height:10px;background-color:#ccc} .open-nav-wrap .eggsc-wrap{position:absolute;bottom:30px;left:0;padding:0 30px;width:100%;text-align:center;opacity:0} @media screen and (min-width: 992px){.open-nav-wrap .eggsc-wrap{display:none}} .open-nav-wrap .eggsc-wrap .btn-nav-eggsc{width:100%} .pc-nav-open .open-nav-wrap .eggsc-wrap{opacity:1;transition:opacity 0.5s 0.35s} .header-btn-box{ width:76px; height: 100%; border-radius: 4px; line-height: 40px; background: #fff; border: 1px solid #fff; margin-right: 6px; text-align: center; } .btn_member {display: none; } .btn_logout {border-left: 0px solid #dbdbdb; height: 100%; } .btn_login {border-left: 0px solid #dbdbdb; height: 100%; } @media screen and (min-width: 992px){ .header-btn-box{ width: 150px; height: 100%; border-radius: 4px; line-height: 40px; background: #f8f8f8; border: 1px solid #dbdbdb; margin-right: 6px; text-align: center; } .btn_member {display: inline-block; } .btn_login {border-left: 1px solid #dbdbdb; height: 100%; } .btn_logout {border-left: 0px solid #dbdbdb; height: 100%; } } /******************************************* // gnb **************************************************/ /***** 사이트 정보 *****/ .footer { width: 100%; background: #161616; height: 170px; margin-top: 80px; } .footer_box { width: 100%; padding-top: 30px; overflow: hidden; } .footer_box ul { width: 90%; margin: 0 auto; } .footer_box ul li { font-size: 12px; text-align: left; color: #fff; line-height: 16px; } .footer_box ul li:first-child {padding-bottom: 10px; } .footer_box ul li .footer_company { display: inline-block; text-indent: -9999px; background: url(/dgn/ver02/images/logo_kpffc_footer.png) no-repeat left top ; height: 40px; width: 283px ; margin-bottom: 6px; background-size: 68%; } .footer_box .btn_box { width: 90%; margin: 0 auto; text-align:left; margin-top: 10px; } .footer_box .btn_box a {box-sizing: border-box; display: inline-block; text-align: left; padding: 0px 0px; width: 110px; height: 35px; line-height: 35px; color: #c8c9c9; margin-left: 10px; font-size: 12px; text-decoration: none; border-radius: 5px; background: none; } @media screen and (min-width: 992px) { .footer { width: 100%; background: #161616; height: 170px; margin-top: 80px; } .footer_box { width: 90%; max-width: 1270px; margin: 0 auto; padding-top: 18px; overflow: hidden; } .footer_box ul { width: 40%; float: left;} .footer_box ul li { font-size: 12px; text-align: left; color: #fff; line-height: 18px; } .footer_box ul li:first-child {padding-bottom: 10px; } .footer_box ul li .footer_company { display: inline-block; text-indent: -9999px; background: url(/dgn/ver02/images/logo_kpffc_footer.png) no-repeat left top ; height: 40px; width: 283px ; background-size: 68%; } .footer_box .btn_box { width: 60%; float: right; text-align: right; margin-top: 0px; } .footer_box .btn_box a {box-sizing: border-box; display: inline-block; text-align: left; padding: 0px 20px; width: 160px; height: 35px; line-height: 35px; border: 1px solid #7e8080; color: #c8c9c9; margin-left: 10px; font-size: 12px; text-decoration: none; border-radius: 5px; background: url(/new_main/gate/tpl8/images/icon_ehrd03.png) no-repeat 133px -991px; } } /*********** 교육안내***********/ .tableB { width: 100%; padding: 10px 0px; font-size: 14px;} .tableB_content { display:block; width: 100%; border-bottom: 1px solid #c8c8c8; border-top: 2px solid #374047; position: relative; background: #f8f8f8; } .tableB_content > li { position: relative; border-top: 1px solid #c8c8c8; padding: 8px; overflow: hidden; font-size: 14px; line-height: 140%; } .tableB_content > li div.title{ width: 30%; vertical-align: top; text-align: center; float: left; height: 50px; line-height: 50px; font-weight: bold; } .tableB_content > li div.td_content{ width: 70%; text-align: left; float: left; padding-top: 13px; padding-bottom: 10px; color: #848383; } .tableC { width: 100%; padding: 10px 0px; } .tableC_header { display:block; width: 100%; border-bottom: 1px solid #c8c8c8; border-top: 2px solid #374047; position: relative; } .tableC_header {width: 100%; overflow: hidden; font-size: 14px; } .tableC_header li {width: 100%; overflow: hidden; } .tableC_header > li div { float: left; position: relative; color: #fff; background: #262626; height: 40px; line-height: 40px; font-weight: bold; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .tableC_header > li div.edu {width: 40%; text-align: center; } .tableC_header > li div.day {width: 40%; text-align: center; border-left: 1px solid #c8c8c8; border-right: 1px solid #c8c8c8; } .tableC_header > li div.time {width: 20%; text-align: center; } .tableC_content {width: 100%; overflow: hidden; background: #f8f8f8; font-size: 14px; border-bottom: 1px solid #c8c8c8; } .tableC_content > li { float: left; position: relative; } .tableC_content > li.edu {width: 40%; text-align: center; } .tableC_content > li.day {width: 40%; text-align: center; } .tableC_content > li.titme {width: 20%; text-align: center; padding-top: 60px; } .tableC_content > li.titme div {font-size: 12px; width: 44px; text-align: left; margin: 0 auto; line-height: 160%; letter-spacing: -0.7px; } .tableC_content > li.edu div {border-top: 1px solid #c8c8c8; width: 100%; font-size: 12px; padding: 8px 0px; line-height: 120%; } .tableC_content > li.day div {border-top: 1px solid #c8c8c8; border-left: 1px solid #c8c8c8; border-right: 1px solid #c8c8c8; font-size: 12px; padding: 8px 0px; line-height: 120%; } @media screen and (min-width: 992px) { .tableC_content > li.edu div { font-size: 14px; } .tableC_content > li.day div { font-size: 14px; } .tableC_content > li.titme div { font-size: 14px; } } .content { position: relative; width: 90%; max-width: 1270px; margin: 0 auto; } .content_100 { width: 100%; } /*****페이지 위치 *****/ .location_inner {display: none; } @media screen and (min-width: 992px) { .location_inner { display: block; width: 100%; list-style: none; text-align: right; padding: 15px 0px 0px 0px; } .location_inner li { display: inline-block; box-sizing: border-box; } .location_inner li a { text-decoration: none; color: #958e95; font-size: 13px; } .location_inner li a i { display: inline-block; padding-right: 4px; padding-left: 3px; color: #dadada; } .location_inner li:first-child { padding-right: 5px; } } /***** 이미지 및 서브메뉴 *****/ .sub_visual { width: 100%; } .sub_visual .img_visual { display: none; box-sizing: border-box; background:#d6cdc7 url('/dgn/ver02/images/img_keli_v03_2022.jpg') center bottom; height: 135px; position: relative; text-align: center; } /*background-image: */ .sub_visual .img_visual .visual_box { max-width: 1276px; width: 100%; margin: 0 auto; } /*.sub_visual .img_visual .sub_menu {border-radius: 5px; display: inline-block; margin-top: 57px; } .sub_visual .img_visual .sub_menu li {display: inline-block; box-sizing: border-box; color: #948e94; height: 47px; line-height: 47px; padding: 0px 25px; } .sub_visual .img_visual .sub_menu li a{text-decoration: none; color: #948e94; font-size: 14px; }*/ .sub_visual .sub_menu_box { background: #fafafa;border-bottom: 1px solid #dadada; } .sub_visual .sub_menu {text-align: left; border-top: 1px solid #dadada; margin-top: 100px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; flex-basis: 33.3%; } .sub_visual .sub_menu li { box-sizing: border-box; width: 33%; padding:12px 0px; text-align: center; border-left: 1px solid #dadada; } .sub_visual .sub_menu li.sub_menu_logo {display: none; } .sub_visual .sub_menu li:last-child {border-right: 1px solid #dadada; } .sub_visual .sub_menu li a{display:inline-block; line-height: 20px; font-size: 13px; text-decoration: none; color: #374047; font-weight: normal; } .sub_visual .sub_menu li a:hover {color: #000; text-decoration: underline;} .sub_visual .sub_menu li a.on{ color: #d6000f; } .sub_visual .sub_menu li a i{display: none; } .sub_visual .sub_menu li a.on i {display: none; } @media screen and (min-width: 992px) { .sub_visual { width: 100%; margin: 0 auto; } /*width: calc(100% - 160px);*/ .sub_visual .img_visual { display: block; width:calc(100% ); margin: 0 auto; height: 280px; padding-top: 118px; } .infomation_edu .sub_visual .img_visual { background:#c8c3c0 url('/dgn/ver02/images/img_keli_infomation_v03.jpg') center bottom; } .apply_edu .sub_visual .img_visual { background:#c8c2c2 url('/dgn/ver02/images/img_keli_apply_v30.jpg') center bottom; } .live_edu .sub_visual .img_visual { background:#e0e0e0 url('/dgn/ver02/images/img_keli_live_v03.jpg') center bottom; } .sugang_edu .sub_visual .img_visual { background:#cec0b5 url('/dgn/ver02/images/img_keli_sugang_v03.jpg') center bottom; } .customer .sub_visual .img_visual { background:#d6cdc7 url('/dgn/ver02/images/img_keli_customer_v03.jpg') center bottom; } .sub_visual .img_visual .visual_box h1 { display: block; width: 100%; text-align: center; font-size: 20px; color: #fff; letter-spacing: -1px; font-weight: 900; padding: 40px 0px 10px 0px ; } .sub_visual .img_visual .visual_box .img_line { display: block; width: 30px; height: 2px; margin: 9px auto; background: #adcae6; } .sub_visual .img_visual .visual_box h2 { display: block; padding-top: 1px; } .sub_visual .img_visual .visual_box h2 span { display:inline-block; text-align: center; font-size: 32px; color: #a9a4a3; background: #fff; letter-spacing: -1px; font-weight: 900; padding:3px 10px 5px 10px; } .sub_visual .sub_menu_box { border-bottom: 1px solid #ebebeb; background: #fff; } .sub_visual .sub_menu { width: 100%; max-width:1270px; margin: 0 auto; border-top: 0px; text-align: left; height: 55px; border-top: 0px; } .sub_visual .sub_menu li { box-sizing: border-box; flex-basis: 200px; height: 55px; line-height: 55px; padding: 0px 0px 0px 16px; border-left: 1px solid #ebebeb; background: url('/dgn/ver02/images/sub_menu_arrow.png') no-repeat right 23px; } .sub_visual .sub_menu li.sub_menu_logo { display: inline-block; box-sizing: border-box; padding: 0px; flex-basis: 55px; background:white url('/dgn/ver02/images/sub_menu_kpffc.png') no-repeat center; } .sub_visual .sub_menu li:last-child {border-right: 1px solid #ebebeb; } .sub_visual .sub_menu li a{ display: block; height: 100%; line-height: 55px; text-align: left; font-size: 17px; text-decoration: none; color: #979597; font-weight: bold; } .infomation_edu .sub_visual .sub_menu {display: none; } .infomation .sub_visual .sub_menu {display: none; } } /***************게시판 리스트 ***********************/ .tableA { width: 100%; padding: 10px 0px; } .tableA_header {display: none;} .tableA_content { display:block; width: 100%; border-bottom: 1px solid #ebebeb; border-top: 2px solid #374047; position: relative; } /*공지사항 */ .notice .tableA_content > li { position: relative; border-top: 1px solid #ebebeb; height: 80px; } .notice .tableA_content > li div.num { position: absolute; left: 4px; bottom: 20px; width: 75px; font-size: 14px; color: #979597; } .notice .tableA_content > li div.num:after {content: '번 공지';} .notice .tableA_content > li div.day { position: absolute; left: 90px; bottom: 17px; width: 100px; font-size: 16px; color: #979597; } .notice .tableA_content > li .title{position: absolute; display: inline-block; left: 4px; top: 20px; width: 100%; font-size: 16px; text-decoration: none; color: #004899; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .notice .tableA_content > li.new { background: #fbf6ec; } .notice .tableA_content > li.new div.num { position: absolute; left: 4px; bottom: 20px; width: 60px; font-size: 12px; color: #979597; text-indent: -999px; } .notice .tableA_content > li.new div.num:after { display: block; width: 70px; text-indent: 0px; content: '새로운 공지'; color: #f57712; } /*q&a*/ .qna .tableA_content > li {position: relative; border-top: 1px solid #ebebeb; height: 80px; } .qna .tableA_content > li div { display: table-cell; height: 55px; color: #716e71; font-size: 16px; vertical-align: middle; text-align: center; } .qna .tableA_content > li .title { position: absolute; display: inline-block; left: 4px; top: 18px; width: 100%; font-size: 16px; text-decoration: none; color: #004899; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .qna .tableA_content > li div.day {position: absolute; left: 50px; bottom: 15px; height: 18px; width: 100px; font-size: 16px; color: #979597; } .qna .tableA_content > li div.answer { position: absolute; left: 4px; bottom: 15px; height: 18px; width: 60px; text-align: left; font-size: 12px; color: #979597; } /*학습자료 */ .reference .tableA_content > li { position: relative; border-top: 1px solid #ebebeb; height: 102px; } .reference .tableA_content > li div.num { position: absolute; left: 2px; bottom: 16px; width: 100px; font-size: 14px; color: #979597; } .reference .tableA_content > li div.num:after {content: '번 학습자료';} .reference .tableA_content > li div.day { position: absolute; left: 120px; bottom: 14px; width: 100px; font-size: 16px; color: #0d58ad; } .reference .tableA_content > li .title{ position: absolute; left: 0px; top: 48px; display: inline-block; width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 16px; text-decoration: none; color: #004899; } .reference .tableA_content > li div.village { position: absolute; left: 0px; top: 16px; width: 70px; font-size: 12px; color: #fff; background: #6da790; height: 24px; height: 20px; line-height: 20px; text-align: center; } /* 나의 학습장 */ .sugang .tableA_content > li { display: block; flex-wrap: wrap; box-sizing: border-box; padding: 20px 6%; background: #f3f3f5; border-top: 1px solid #ebebeb; border-bottom:1px solid #dddcdd; margin-bottom: 30px; } .sugang .tableA_content > li div { text-align: center; } .sugang .tableA_content > li div.time:before {content: '교육인정시간 : ';} .sugang .tableA_content > li div.completion:before {content: '수료여부 : ';} .sugang .tableA_content .subject { display: block; width: 100%; text-align: left; text-decoration: none; } .sugang .tableA_content .subject .img { display: block; width: 100%; text-align: center; } .sugang .tableA_content .subject .img img{width: 100%; height: auto; } .sugang .tableA_content .title { display: block; width: 100%; text-align: left; box-sizing: border-box; padding: 4px 20px 4px 0px; line-height: 24px; font-size: 16px; color: #000000; font-weight: 900; letter-spacing: -1px; } .sugang .tableA_content .time, .sugang .tableA_content .period, .sugang .tableA_content .completion, .sugang .tableA_content .entrance { width: 100%; font-size: 14px; color: #0d58ad; padding: 1px 0px; text-align: left; } .sugang .tableA_content .entrance { margin-top: 15px;} .sugang .tableA_content .period { margin-top: 15px;} /* 온라인교육 학습현황 */ .online .tableA_content > li { display: block; flex-wrap: wrap; box-sizing: border-box; padding: 20px 6%; background: #f3f3f5; border-top: 1px solid #ebebeb; border-bottom:1px solid #dddcdd; margin-bottom: 30px; } .online .tableA_content > li div { text-align: center; } .online .tableA_content > li div.time:before {content: '교육인정시간 : ';} .online .tableA_content > li div.completion:before {content: '수료여부 : ';} .online .tableA_content .subject { display: block; width: 100%; text-align: left; text-decoration: none; font-weight: bold; } .online .tableA_content .subject .img { display: block; width: 100%; text-align: center; } .online .tableA_content .subject .img img{width: 100%; height: auto; } .online .tableA_content .title { display: block; width: 100%; text-align: left; box-sizing: border-box; padding: 4px 20px 4px 0px; line-height: 24px; font-size: 16px; color: #000000; font-weight: 900; letter-spacing: -1px; } .online .tableA_content .time, .online .tableA_content .period, .online .tableA_content .completion, .online .tableA_content .entrance, .online .tableA_content .review { width: 100%; font-size: 14px; color: #0d58ad; padding: 1px 0px; text-align: left; } .online .tableA_content .period { margin-top: 15px;} .online .tableA_content .review { margin-top: 15px;} .edu_finish { display: inline-block; width: 100%; height: 44px; line-height: 44px; font-size: 14px; border: 0px; color: #fff; background: #979597; border-radius: 4px; text-align: center; box-shadow:none; font-size: 14px; } .edu_finish_re { display: inline-block; width: 100%; height: 44px; line-height: 44px; font-size: 14px; border: 0px; color: #fff; background: #979597; border-radius: 4px; text-align: center; box-shadow:none; font-size: 14px; } .edu_finish_re:before { content: '다시보기 - '; } /* 수강신청 */ .apply .tableA_content > li { display: block; flex-wrap: wrap; box-sizing: border-box; padding: 20px 6%; background: #f3f3f5; border-top: 1px solid #ebebeb; border-bottom:1px solid #dddcdd; margin-bottom: 30px; } .apply .tableA_content > li div { text-align: center; } .apply .tableA_content > li div.time:before {content: '교육인정시간 : ';} .apply .tableA_content > li div.completion:before {content: '수료여부 : ';} .apply .tableA_content .subject { display: block; width: 100%; text-align: center; text-decoration: none; } .apply .tableA_content .subject .img { display: block; width: 100%; text-align: center; } .apply .tableA_content .subject .img img{width: 100%; height: auto; } .apply .tableA_content .subject .title { display: block; width: 100%; text-align: left; box-sizing: border-box; padding: 4px 20px 4px 0px; line-height: 24px; font-size: 16px; color: #000000; font-weight: 900; letter-spacing: -1px; } .sugang .tableA_content .time, .apply .tableA_content .period, .apply .tableA_content .completion, .apply .tableA_content .entrance { width: 100%; font-size: 14px; color: #0d58ad; padding: 1px 0px; text-align: left; } .apply .tableA_content .apply_02 { margin-top: 15px;} /*온라인 학습장02 */ .sugang02 .tableA_content > li { display: block; flex-wrap: wrap; box-sizing: border-box; padding: 16px 6%; border-top: 1px solid #ebebeb; overflow: hidden; margin-bottom: 15px; } .sugang02 .tableA_content > li div { text-align: center; } .sugang02 .tableA_content > li div.time:before {content: '교육인정시간 : ';} .sugang02 .tableA_content > li div.completion:before {content: '수료여부 : ';} .sugang02 .tableA_content .subject { display: block; width: 100%; text-align: center; text-decoration: none; } .sugang02 .tableA_content .subject .img { display: block; width: 100%; text-align: center; } .sugang02 .tableA_content .subject .img img{width: 100%; height: auto; } .sugang02 .tableA_content .subject .title { display: block; width: 100%; text-align: left; box-sizing: border-box; padding: 4px 20px 4px 0px; line-height: 24px; font-size: 16px; color: #000; font-weight: 900; } .sugang02 .tableA_content .time, .sugang02 .tableA_content .period, .sugang02 .tableA_content .completion, .sugang02 .tableA_content .entrance, .sugang02 .tableA_content .review { width: 100%; font-size: 14px; color: #949294; padding: 1px 0px; } .sugang02 .tableA_content .entrance, .sugang02 .tableA_content .review { width: 50%; float: left; font-size: 14px; color: #949294; padding: 2px 0px; } .sugang02 .tableA_content .entrance, .sugang02 .tableA_content .review { margin-top: 15px;} @media screen and (min-width: 992px) { .tableA_header{ display: table; width: 100%; background: #f8f8f8; border-top: 2px solid #374047;} .tableA_header li{ display: table-row; list-style: none; height: 55px; } .tableA_header li:after, .tableA_header li:before {-webkit-box-sizing:inherit; box-sizing:inherit;} .tableA_content { display: table; width: 100%; border-bottom: 1px solid #ebebeb; border-top: 0px; } .tableA_content > li > div.title { display: table-cell; text-align: left; max-width: 750px; vertical-align: middle; box-sizing: border-box; } .tableA_content > li > div.title a{ display: inline-block; text-align: left; overflow: hidden; max-width: 100%; white-space: nowrap; text-overflow: ellipsis; padding-top: 4px; font-size: 16px; } /*공지사항*/ .notice .tableA_header li > div { display: table-cell; vertical-align: middle; text-align: center; height: 55px; font-size: 16px; color: #374047; font-weight: bold; } .notice .tableA_content > li {display: table; width: 100%; flex-wrap: wrap; box-sizing: border-box; border-top: 1px solid #ebebeb; } .notice .tableA_content > li div { display: table-cell; height: 55px; color: #716e71; font-size: 18px; line-height: 20px; vertical-align: middle; text-align: center; } .notice .tableA_header li > div.num, .notice .tableA_content > li div.num { position: relative; left: 0px; bottom:0px; top: 0px; width: 135px; font-size: 16px; } .notice .tableA_content > li.new div.num { position: relative; left: 0px; bottom:0px; top: 0px; width: 135px; font-size: 16px; text-indent: -999px; } .notice .tableA_content > li.new div.num:before { display: table-cell; position: relative; left: 0px; bottom:0px; top: 0px; width: 135px; font-size: 16px; color: #f57712; content: 'New'; } .qna .tableA_header li > div.title{ position: relative; display: table-cell; left: 0px; bottom:0px; top: 0px; font-size: 18px; text-align: center; padding-left: 20px; width: calc(100% - 335px); vertical-align: middle; white-space: normal!important; } .notice .tableA_content > li .title { position: relative; display: table-cell; left: 0px; bottom:0px; top: 0px; text-align: left; padding-left: 40px; width: calc(100% - 335px); vertical-align: middle; white-space: normal!important; font-size: 18px; color: #000;} .notice .tableA_header li > div.day, .notice .tableA_content > li div.day {position: relative; left: 0px; bottom:0px; top: 0px; width: 200px; font-size: 16px; } /*q&a*/ .qna .tableA_header li > div { display: table-cell; vertical-align: middle; text-align: center; height: 55px; font-size: 16px; color: #374047; font-weight: bold; } .qna .tableA_content > li {display: table; width: 100%; flex-wrap: wrap; box-sizing: border-box; border-top: 1px solid #ebebeb; } .qna .tableA_content > li div { display: table-cell; height: 55px; color: #716e71; font-size: 18px; line-height: 20px; vertical-align: middle; text-align: center; } .qna .tableA_header li > div.title { position: relative; display: table-cell; left: 0px; bottom:0px; top: 0px; text-align: center; font-size: 18px; padding-left: 20px; width: calc(100% - 335px); vertical-align: middle; white-space: normal!important; text-decoration: none; } .qna .tableA_content > li .title { position: relative; display: table-cell; left: 0px; bottom:0px; top: 0px; text-align: left; padding-left: 40px; width: calc(100% - 335px); vertical-align: middle; white-space: normal!important; text-decoration: none; font-size: 18px; color: #000; } .qna .tableA_header li > div.day, .qna .tableA_content > li div.day {position: relative; left: 0px; bottom:0px; top: 0px; width: 200px; font-size: 16px; } .qna .tableA_header li > div.answer, .qna .tableA_content > li div.answer { position: relative; left: 0px; bottom:0px; top: 0px; width: 135px; font-size: 18px; text-align: center; } /*학습자료*/ .reference .tableA_header li > div { display: table-cell; vertical-align: middle; text-align: center; height: 55px; font-size: 16px; color: #374047; font-weight: bold; } .reference .tableA_content > li {display: table; width: 100%; flex-wrap: wrap; box-sizing: border-box; border-top: 1px solid #ebebeb;} .reference .tableA_content > li div { display: table-cell; height: 55px; color: #716e71; font-size: 18px; line-height: 20px; vertical-align: middle; text-align: center; } .reference .tableA_header li > div.num, .reference .tableA_content > li div.num { position: relative; left: 0px; bottom:0px; top: 0px; width: 135px; } .reference .tableA_header li > div.village, .reference .tableA_content > li div.village { position: relative; left: 0px; bottom:0px; top: 0px; width: 200px; font-size: 18px; background: none; color: #716e71; height: 55px; } .reference .tableA_content > li .title { position: relative; display: table-cell; left: 0px; bottom:0px; top: 0px; text-align: left; padding-left: 40px; width: calc(100% - 535px)!important; vertical-align: middle; white-space: normal!important; line-height: 22px; font-size: 18px; color: #000; } .reference .tableA_header li > div.day {position: relative; left: 0px; bottom:0px; top: 0px; width: 200px; } .reference .tableA_content > li div.day {position: relative; left: 0px; bottom:0px; top: 0px; width: 200px; color: #716e71; } .tableA_content > li div.num:after {content: ''!important;} /*수강신청 */ .apply .tableA_content > li { display: table; width: 100%; flex-wrap: wrap; box-sizing: border-box; padding: 15px 0px; background: #fff; border-top: 1px solid #ebebeb; border-bottom: 0px solid #ebebeb; margin-bottom: 0px; } .apply .tableA_header li > div { display: table-cell; vertical-align: middle; text-align: center; height: 55px; font-size: 16px; color: #374047; font-weight: bold; } .apply .tableA_content > li div { display: table-cell; height: 55px; color: #716e71; font-size: 18px; line-height: 20px; vertical-align: middle; text-align:center; } .apply .tableA_header .subject { width: calc(100% - 750px); } .apply .tableA_header .period { width: 390px; text-align: center;} .apply .tableA_header .apply_02 { width: 180px; text-align: center;} .apply .tableA_header .apply_03 { width: 180px; text-align: center;} .apply .tableA_content .subject {display: table-cell; width: calc(100% - 750px); text-decoration: none; } .apply .tableA_content .subject .title { display: table-cell; box-sizing: border-box; width: calc(100%); padding: 10px 10px 10px 60px; text-align: left; font-size: 18px; line-height: 24px; font-size: 18px; color: #000; } .apply .tableA_content .period { width: 390px; text-align: center; font-size: 18px; } .apply .tableA_content .apply_02 { width: 180px;} .apply .tableA_content .apply_03 { width: 180px;} /*라이브 교육 수강신청 .live_edu .apply .tableA_content > li { display: table; width: 100%; flex-wrap: wrap; box-sizing: border-box; padding: 15px 0px; background: #fff; border-top: 1px solid #ebebeb; border-bottom: 0px solid #ebebeb; margin-bottom: 0px; } .live_edu .apply .tableA_header li > div { display: table-cell; vertical-align: middle; text-align: center; height: 55px; font-size: 14px; color: #374047; font-weight: bold; } .live_edu .apply .tableA_content > li div { display: table-cell; height: 55px; color: #716e71; font-size: 14px; line-height: 18px; vertical-align: middle; text-align:center; } .live_edu .apply .tableA_header .subject { width: calc(100% - 700px); } .live_edu .apply .tableA_header .period { width: 280px; text-align: center;} .live_edu .apply .tableA_header .apply_02 { width: 140px; text-align: center;} .live_edu .apply .tableA_header .apply_03 { width: 140px; text-align: center;} .live_edu .apply .tableA_header .survey { width: 140px; text-align: center;} .live_edu .apply .tableA_content .subject {display: table-cell; width: calc(100% - 700px); text-decoration: none; } .live_edu .apply .tableA_content .subject .title { display: table-cell; box-sizing: border-box; width: calc(100%); padding: 10px 10px 10px 60px; text-align: left; font-size: 18px; line-height: 24px; } .live_edu .apply .tableA_content .period { width: 280px; text-align: center; font-size: 16px; } .live_edu .apply .tableA_content .apply_02 { width: 140px;} .live_edu .apply .tableA_content .apply_03 { width: 140px;} .live_edu .apply .tableA_content .survey { width: 140px;} */ /*나의 학습장 */ .sugang .tableA_content > li { display: table; width: 100%; flex-wrap: wrap; box-sizing: border-box; padding: 15px 0px; background: #fff; border-top: 1px solid #ebebeb; border-bottom: 0px solid #ebebeb; margin-bottom: 0px; } .sugang .tableA_header li > div { display: table-cell; vertical-align: middle; text-align: center; height: 55px; font-size: 16px; color: #374047; font-weight: bold; } .sugang .tableA_content > li div { display: table-cell; height: 55px; color: #716e71; font-size: 18px; line-height: 20px; vertical-align: middle; text-align:center; } .sugang .tableA_header .title { width: calc(100% - 750px); } .sugang .tableA_header .period { width: 390px; text-align: center;} .sugang .tableA_header .entrance { width: 180px; text-align: center;} .sugang .tableA_header .review { width: 180px; text-align: center;} .sugang .tableA_content .subject {display: table-cell; width: calc(100% - 750px); text-decoration: none; } .sugang .tableA_content .title { display: table-cell; box-sizing: border-box; width: calc(100% - 750px); padding:10px 10px 10px 60px; text-align: left; font-size: 16px; line-height: 24px; color: #000; font-weight: 900; } .sugang .tableA_content .period { width: 390px; text-align: center; font-size: 18px; } .sugang .tableA_content .entrance { width: 180px; text-align: center; } .sugang .tableA_content .review { width: 180px;} /*온라인교육 학습현황 */ .online .tableA_content > li { display: table; width: 100%; flex-wrap: wrap; box-sizing: border-box; padding: 15px 0px; background: #fff; border-top: 1px solid #ebebeb; border-bottom: 0px solid #ebebeb; margin-bottom: 0px; } .online .tableA_header li > div { display: table-cell; vertical-align: middle; text-align: center; height: 55px; font-size: 16px; color: #374047; font-weight: bold; } .online .tableA_content > li div { display: table-cell; height: 55px; color: #716e71; font-size: 18px; line-height: 20px; vertical-align: middle; text-align:center; } .online .tableA_header .title { width: calc(100% - 750px); } .online .tableA_header .period { width: 390px; text-align: center;} .online .tableA_header .entrance { width: 180px; text-align: center;} .online .tableA_header .review { width: 180px; text-align: center;} .online .tableA_content .subject {display: table-cell; width: calc(100% - 750px); text-decoration: none; text-align: left; font-size: 16px; line-height: 24px; color: #000; } .online .tableA_content .title { display: table-cell; box-sizing: border-box; width: calc(100% - 570px); padding:10px 10px 10px 60px; text-align: left; font-size: 18px; line-height: 24px; color: #000; } .online .tableA_content .period { width: 390px; text-align: center; font-size: 18px; } .online .tableA_content .entrance { width: 180px; text-align: center; } .online .tableA_content .review { width: 180px; text-align: center; } .online .tableA_content .time, .online .tableA_content .period, .online .tableA_content .completion, .online .tableA_content .entrance, .online .tableA_content .review { font-size: 18px; } /*라이브교육 학습현황 */ .sugang_edu .sugang .tableA_content > li { display: table; width: 100%; flex-wrap: wrap; box-sizing: border-box; padding: 15px 0px; background: #fff; border-top: 1px solid #ebebeb; border-bottom: 0px solid #ebebeb; margin-bottom: 0px; } .sugang_edu .sugang .tableA_header li > div { display: table-cell; vertical-align: middle; text-align: center; height: 55px; font-size: 16px; color: #374047; font-weight: bold; } .sugang_edu .sugang .tableA_content > li div { display: table-cell; height: 55px; color: #716e71; font-size: 18px; line-height: 20px; vertical-align: middle; text-align:center; } .sugang_edu .sugang .tableA_header .subject { width: calc(100% - 700px); } .sugang_edu .sugang .tableA_header .title { width: calc(100% - 700px); } .sugang_edu .sugang .tableA_header .period { width: 280px; text-align: center;} .sugang_edu .sugang .tableA_header .entrance { width: 140px; text-align: center;} .sugang_edu .sugang .tableA_header .review { width: 140px; text-align: center;} .sugang_edu .sugang .tableA_header .survey { width: 140px; text-align: center;} .sugang_edu .sugang .tableA_content .subject {display: table-cell; width: calc(100% - 700px); text-decoration: none; } .sugang_edu .sugang .tableA_content .title {display: table-cell; width: calc(100% - 700px); text-decoration: none; padding: 10px 10px 10px 60px; text-align: left; font-size: 18px; line-height: 24px; color: #000; } .sugang_edu .sugang .tableA_content .period { width: 280px; text-align: center; font-size: 18px; color: #0d58ad; } .sugang_edu .sugang .tableA_content .entrance { width: 140px;} .sugang_edu .sugang .tableA_content .review { width: 140px;} .sugang_edu .sugang .tableA_content .survey { width: 140px;} .edu_finish { width: 120px;} .edu_finish_re {width: 120px;} .edu_finish_re:before { content: ''; } /*온라인 학습장02 */ .sugang02 .tableA_content > li { display: table; width: 100%; flex-wrap: wrap; box-sizing: border-box; padding: 15px 0px; border-top: 1px solid #ebebeb; } .sugang02 .tableA_header li > div { display: table-cell; vertical-align: middle; text-align: center; height: 55px; font-size: 16px; color: #374047; font-weight: bold; } .sugang02 .tableA_content > li div { display: table-cell; height: 55px; color: #716e71; font-size: 18px; line-height: 20px; vertical-align: middle; text-align:center; } .sugang02 .tableA_header .subject { width: calc(100% - 635px); } .sugang02 .tableA_header .time { width: 120px;} .sugang02 .tableA_header .period { width: 235px;} .sugang02 .tableA_header .review { width: 150px;} .sugang02 .tableA_header .entrance { width: 150px;} .sugang02 .tableA_content .subject {display: table-cell; width: calc(100% - 635px); text-decoration: none; } .sugang02 .tableA_content .subject .title { display: table-cell; box-sizing: border-box; width: 100%; padding: 10px 60px; text-align: left; font-size: 18px; line-height: 24px; } .sugang02 .tableA_content .time { width: 120px;} .sugang02 .tableA_content .period { width: 235px;} .sugang02 .tableA_content .review { width: 150px; float: none; } .sugang02 .tableA_content .entrance { width: 150px; float: none; text-align: center; } .sugang02 .tableA_content > li div.time:before {content: ''!important;} .sugang02 .tableA_content > li div.completion:before {content: ''!important;} } /************* 게시판 상세 *********************/ .tableA_view h4{ display: block; width: 100%; border-top: 2px solid #374047; background: #f8f8f8; font-size: 18px ; line-height: 30px; text-align: left; color: #374047; box-sizing: border-box; padding: 24px 5% 20px 5%; font-weight: 900; border-bottom: 1px solid #ebebeb; } .tableA_view_headert { width: 100%; } .tableA_view_headert li { border-bottom: 1px solid #ebebeb; overflow: hidden; padding: 20px 5%; color: #716e71; font-size: 14px; } .tableA_view_headert li span.title { display: inline-block; padding-right: 10px; color: #848484; font-size: 16px; } .tableA_view_headert li span.title i {display: inline-block; padding-right: 5px; } .tableA_view_headert li div.village { width:100%; float: left; text-align: left; font-size: 16px; } .tableA_view_headert li div.day {width:100%; float: right; text-align: left; font-size: 14px; margin-top: 10px; } .tableA_view_content { box-sizing: border-box; width: 100%; padding: 30px 5%; border-bottom: 2px solid #ebebeb; line-height: 160%; } .tableA_view .btn_box {width: 100%; text-align: right; margin-top: 20px;} /*q&a*/ .qna .tableA_view h4{ display: block; width: 100%; border-top: 2px solid #374047; background: #f8f8f8; font-size: 18px ; line-height: 30px; text-align: left; color: #374047; box-sizing: border-box; padding: 24px 5% 20px 5%; font-weight: 900; border-bottom: 1px solid #ebebeb; } .qna .tableA_view_headert { width: 100%; } .qna .tableA_view_headert li { border-bottom: 1px solid #ebebeb; overflow: hidden; padding: 20px 5%; color: #716e71; font-size: 14px; } .qna .tableA_view_headert li span.title { display: inline-block; padding-right: 10px; color: #a5a5a7; font-size: 16px; } .qna .tableA_view_headert li span.title i {display: inline-block; padding-right: 5px; } .qna .tableA_view_headert li div.village { width: 60%; float: left; text-align: left; font-size: 16px; } .qna .tableA_view_headert li div.day { width: 200px; float: right; text-align: right; font-size: 16px; } .qna .tableA_view_content { box-sizing: border-box; width: 100%; padding: 30px 5%; border-bottom: 2px solid #ebebeb; line-height: 160%; } .qna .tableA_view_content span.title { display: block; width: 100%; background: #eee; } .qna .tableA_view_answer {display: block; width: 100%; border-top: 2px solid #374047; border-bottom: 1px solid #ebebeb; line-height: 160%; color: #409f89; } .qna .tableA_view_answer > span {display: block; width: 100%; padding: 15px 5%; font-size: 14px ; line-height: 30px; box-sizing: border-box; } .qna .tableA_view_answer .title { background: #f8f8f8; text-align: left; color: #374047; font-weight: 900; border-bottom: 1px solid #ebebeb;} .tableA_view_answer_li{ width: 100%; } .tableA_view_answer_li li { border-bottom: 1px solid #ebebeb; overflow: hidden; padding: 15px 5%; color: #716e71; font-size: 14px; } .tableA_view_answer_li li span.title { display: inline-block; padding-right: 10px; color: #a5a5a7; } .tableA .btn_box {width: 100%; text-align: right; margin-top: 20px;} .qna .next_line { display: block; margin-top: 12px; height: 18px } @media screen and (min-width: 992px) { .tableA_view_headert li div.village { width: 60%; float: left; text-align: left; font-size: 16px; } .tableA_view_headert li div.day { width: 200px; float:left; text-align: left; font-size:16px; margin-top: 0px; } } /************* 게시판 글쓰기 *********************/ .tableA_write_content { display: table; width: 100%; border-top: 2px solid #374047; } .tableA_write_content li { display: table ; box-sizing: border-box; width: 100%; border-bottom: 1px solid #ebebeb; overflow: hidden; padding: 15px 5%; color: #716e71; font-size: 16px; } .tableA_write_content li span.title { display: block; padding-right: 10px; color: #374047; width: 100%; font-weight: 900; vertical-align: middle; } .tableA_write_content li span.title i {display: inline-block; padding-right: 5px; } .tableA_write_content li .input_box { display: block; width: 100%; margin-top: 12px; } .tableA_write_content li .radio_box { display: block; width: 100%; margin-top: 12px; } .tableA_write_content li .input_box input { width: 100%; height: 34px; border: 1px solid #a9a9a9; color: #999; font-size: 14px; line-height: 34px; } .tableA_write_content li .input_box textarea { width: 100%; border: 1px solid #a9a9a9; padding: 10px; color: #999; min-height: 200px; } .tableA_write .btn_box {width: 100%; text-align: right; margin-top: 20px;} .tableA_write_content li .input_box input[type="file"] { border: 0px; background: #fff; ; padding: 0 30px 0 0px; } .tableA_write_content li .radio_box input[type="radio"] { width: 0px; border: 0px; background: #fff; padding: 0 30px 0 0px; } @media screen and (min-width: 992px) { .tableA_write_content { display: table; width: 100%; border-top: 2px solid #374047; } .tableA_write_content li { display: table ; box-sizing: border-box; width: 100%; border-bottom: 1px solid #ebebeb; overflow: hidden; padding: 15px 5%; color: #716e71; font-size: 16px; } .tableA_write_content li span.title { display:table-cell; padding-right: 10px; color: #374047; width: 120px; font-weight: 900; vertical-align: middle; } .tableA_write_content li span.title i {display: inline-block; padding-right: 5px; } .tableA_write_content li .input_box { display:table-cell; width: calc(100% - 120px); margin-top: 0px; } .tableA_write_content li .radio_box { display:table-cell; width: calc(100% - 120px); margin-top: 0px; } .tableA_write_content li .input_box input { width: 100%; height: 34px; padding: 0 30px 0 10px; border: 1px solid #a9a9a9; color: #999; font-size: 14px; line-height: 34px; } .tableA_write_content li .input_box input.input_half { width: 43%; height: 34px; padding: 0 30px 0 10px; border: 1px solid #a9a9a9; color: #999; font-size: 14px; line-height: 34px; } .tableA_write_content li .input_box textarea { width: 100%; border: 1px solid #a9a9a9; padding: 10px; color: #999; min-height: 200px; } .tableA_write .btn_box {width: 100%; text-align: right; margin-top: 20px;} } /*****페이징 *****/ .pagination { text-align: center; margin-top: 25px; } .pagination > a { position: relative; display: inline-block; width: 40px; height: 40px; border: 1px solid #ddd; vertical-align: top; } .pagination > a i { line-height: 40px; } /* position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;*/ .pagination > a.is-disabled { cursor: default; } .pagination > a.is-disabled i { opacity: 0.62; } .pagination > a + a { margin-left: 10px; } .pagination > span { display: inline-block; width: 120px; font-size: 17px; line-height: 38px; vertical-align: top; } .pagination .current { color: #0072de; } .pagination .total { color: #000; } .pagination .total:before { content: ' / '; } @media (max-width: 359px) { .pagination > span { width: 100px; } } /*셀렉트 박스 */ .village_select_box { overflow: hidden; width: 245px; float: right; margin-bottom: 6px; } .select-css { display: block; float: left; font-size: 14px; font-family: sans-serif; font-weight: 700; color: #949497; line-height: 1.3; padding: .6em 1.4em .5em .8em; width: 180px; height: 40px; border-radius: 5px; box-sizing: border-box; margin: 0; border: 1px solid #bfbdbb; -moz-appearance: none; -webkit-appearance: none; appearance: none; background-color: #fff; background-image: url('/dgn/ver02/images/select_check.png'); background-repeat: no-repeat, repeat; background-position: right .7em top 50%, 0 0; background-size: .65em auto, 100%; } .select-css::-ms-expand { display: none; } .select-css:hover { border-color: #888; } .select-css:focus { border-color: #000; box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7); box-shadow: 0 0 0 3px -moz-mac-focusring; color: #1671c7; outline: none; } .select-css option { font-weight:normal; } .select-mail { display: inline-block; font-size: 14px; font-family: sans-serif; font-weight: 700; color: #949497; line-height: 1.3; padding: .6em 1.4em .5em .8em; width: 48%; height: 38px; box-sizing: border-box; margin: 0; border: 1px solid #bfbdbb; -moz-appearance: none; -webkit-appearance: none; appearance: none; background-color: #fff; background-image: url('/dgn/ver02/images/select_check.png'); background-repeat: no-repeat, repeat; background-position: right .7em top 50%, 0 0; background-size: .65em auto, 100%; } .select-mail::-ms-expand { display: none; } .select-mail:hover { border-color: #888; } .select-mail:focus { border-color: #000; box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7); box-shadow: 0 0 0 3px -moz-mac-focusring; color: #1671c7; outline: none; } .select-mail option { font-weight:normal; } /***** 기타 *****/ .title_box { width: 100%; padding: 32px 0px 12px 0px; } .title_box h3 { font-size: 22px; color: #374047; text-align: left; font-weight: 900; letter-spacing: -2px; } .control_box {overflow: hidden; width: 100%; margin-top: -22px;} @media screen and (min-width: 992px) { .title_box { width: 100%; padding: 0px 0px 20px 0px; } .title_box h3 { font-size: 26px; color: #374047; text-align: left; font-weight: 900; letter-spacing: -2px; padding-top: 16px; } } /*.info_box { background: #f3f3f5; padding: 22px 5%; display: block; align-items: center; margin-bottom: 25px;} .info_box span.info { display: block; padding: 8px 0px 0px 10px ; } .info_box span.title { color: #004899; font-size: 16px; font-weight: 900; } .info_box span.title i{ display: inline-block; color: #004899; padding-right: 5px; } .info_box span ul {} .info_box span li { list-style: circle; color: #9b9795; font-size: 12px; line-height: 16px; margin-top: 4px; } .info_box span li span.point { color: #e03945; } @media screen and (min-width: 992px) { .info_box { background: #f3f3f5; padding: 30px 5%; display: flex; align-items: center; margin-bottom: 30px;} .info_box span.info { padding-left: 50px; } .info_box span.title { color: #004899; font-size: 20px; letter-spacing: -1px; font-weight: 900; display: inline-block; width: 200px ;} .info_box span.title i{ display: inline-block; color: #004899; padding-right: 5px; } .info_box span ul {} .info_box span li { list-style: circle; color: #9b9795; font-size: 16px; line-height: 22px; margin-top: 0px; } .info_box span li span.point { color: #e03945; } }*/ /***** 버튼 *****/ .btn_list { background: #fff; height: 48px; line-height: 48px; font-size: 16px; font-weight: 900; border: 1px solid #bfbdbb; color: #374047; padding: 0 24px; border-radius: 4px; text-align: center; cursor: pointer; } .btn_del { background: #fff; height: 48px; line-height: 48px; font-size: 16px; font-weight: 900; border: 1px solid #bfbdbb; color: #374047; padding: 0 24px; border-radius: 4px; text-align: center; cursor: pointer;} .btn_modify { background: #fff; height: 48px; line-height: 48px; font-size: 16px; font-weight: 900; border: 1px solid #bfbdbb; color: #374047; padding: 0 24px; border-radius: 4px; text-align: center; cursor: pointer; } .btn_save { background: #fff; height: 48px; line-height: 48px; font-size: 16px; font-weight: 900; border: 1px solid #bfbdbb; color: #374047; padding: 0 24px; border-radius: 4px; text-align: center; cursor: pointer; } .btn_write { background: #fff; height: 48px; line-height: 48px; font-size: 16px; font-weight: 900; border: 1px solid #bfbdbb; color: #374047; padding: 0 24px; border-radius: 4px; text-align: center; cursor: pointer; } .btn_cancel { background: #fff; height: 48px; line-height: 48px; font-size: 16px; font-weight: 900; border: 1px solid #bfbdbb; color: #374047; padding: 0 24px; border-radius: 4px; text-align: center; cursor: pointer;} .btn_re { height: 48px; line-height: 48px; border: 1px solid #1671c7; color: #1671c7; padding: 0 24px; border-radius: 4px; text-align: center; cursor: pointer; } .btn_choice { float: left; margin-left: 5px; height: 40px; border: 0px; line-height: 40px; color: #ebecec; padding: 0 16px; background: #374047; border-radius: 4px; text-align: center; cursor: pointer; font-size: 14px; } .btn_entrance { width: 100%; height: 44px; line-height: 44px; font-size: 14px; border: 0px; color: #ebecec; padding: 0 10px; background: #004899; border-radius: 4px; text-align: center; box-shadow:none; font-size: 14px; box-shadow: 4px 4px 5px 3px #f0eeee; cursor: pointer; } .btn_review { width: 100%; height: 48px; line-height: 48px; font-size: 14px; border: 0px; color: #ebecec; padding: 0; background: #374047; border-radius: 4px; text-align: center; margin-top: 4px; cursor: pointer; } .btn_review:before { content: '다시보기'; } .sugang .btn_review { height: 44px; line-height: 44px; font-size: 14px; border: 0px; color: #ebecec; padding: 0 10px; background: #004899; border-radius: 4px; text-align: center; box-shadow:none; font-size: 14px; cursor: pointer; } .sugang .btn_review:before { content: '다시보기 - '; } .btn_apply { width: 100%; height: 44px; line-height: 44px; font-size: 14px; border: 0px; color: #ebecec; padding: 0 10px; background: #004899; border-radius: 4px; text-align: center; box-shadow:none; font-size: 14px; box-shadow: 4px 4px 5px 3px #f0eeee; cursor: pointer; } .btn_applycancel { width: 100%; height: 48px; line-height: 48px; font-size: 14px; border: 0px; color: #ebecec; padding: 0; background: #374047; border-radius: 4px; text-align: center; margin-top: 4px; cursor: pointer; } .btn_applyfinish { width: 100%; height: 48px; line-height: 48px; font-size: 14px; border: 0px; color: #fff; padding: 0; background: #161616; border-radius: 4px; text-align: center; margin-top: 4px; cursor: pointer; } .sugang02 .btn_entrance { width: 100%; height: 44px; line-height: 44px; border: 0px; color: #11a381; padding: 0; background: #fff; border-radius: 2px; text-align: center; border: 1px solid #dfdfdf; box-shadow: 4px 4px 5px 3px #f0eeee; font-size: 15px; cursor: pointer; } .sugang02 .btn_review { width: 100%; height: 44px; line-height: 44px; border: 0px; color: #004899; padding: 0 30px; background: #fff; border-radius: 4px; text-align: center; border: 1px solid #004899; box-shadow: 4px 4px 5px 3px #f0eeee; font-size: 15px; cursor: pointer; } .btn_send { background: #fff; height: 48px; line-height: 48px; font-size: 15px; font-weight: 900; border: 1px solid #bfbdbb; color: #374047; padding: 0 30px; border-radius: 4px; text-align: center; cursor: pointer; } .btn_print { height: 44px; line-height: 44px; font-size: 16px; border: 0px; color: #ebecec; padding: 0 10px; background: #004899; border-radius: 4px; text-align: center; box-shadow:none; cursor: pointer;} .btn_survey_on { width: 100%; height: 44px; line-height: 44px; font-size: 14px; border: 0px; color: #ebecec; padding: 0 10px; background: #004899; border-radius: 4px; text-align: center; box-shadow:none; font-size: 14px; box-shadow: 4px 4px 5px 3px #f0eeee; cursor: pointer; } .btn_survey { display: inline-block; width: 100%; height: 44px; line-height: 44px; font-size: 14px; border: 0px; color: #fff; background: #979597; border-radius: 4px; text-align: center; box-shadow:none; font-size: 14px; } @media screen and (min-width: 992px) { .btn_entrance { width: 120px; height: 44px; line-height: 44px; border: 0px; color: #ebecec; padding: 0 10px; background: #004899; border-radius: 4px; text-align: center; box-shadow:none; font-size: 16px; letter-spacing: -1px; } .btn_review { width: 120px; height: 44px; font-size: 16px; line-height: 44px; border: 0px; color: #004899; padding: 0 30px; background: #fff; border-radius: 4px; text-align: center; border: 1px solid #004899; margin-top: 0px; letter-spacing: -1px;} .btn_apply { width: 120px; height: 44px; line-height: 44px; border: 0px; color: #ebecec; padding: 0 10px; background: #004899; border-radius: 4px; text-align: center; box-shadow:none; font-size: 16px; letter-spacing: -1px; } .btn_applycancel { width: 120px; height: 44px; font-size: 16px; line-height: 44px; border: 0px; color: #004899; padding: 0 10px; background: #fff; border-radius: 4px; text-align: center; border: 1px solid #004899; margin-top: 0px; letter-spacing: -1px; } .btn_applyfinish { width: 120px; height: 44px; font-size: 16px; line-height: 44px; border: 0px; color: #fff; padding: 0 10px; background: #161616; border-radius: 4px; text-align: center; border: 1px solid #004899; margin-top: 0px; letter-spacing: -1px; } .sugang .btn_review:before {content: '';} .btn_survey_on { width: 120px; height: 44px; line-height: 44px; border: 0px; color: #ebecec; padding: 0 10px; background: #004899; border-radius: 4px; text-align: center; box-shadow:none; font-size: 16px; letter-spacing: -1px; } .btn_survey {display: inline-block; width: 120px; height: 44px; line-height: 44px; font-size: 14px; border: 0px; color: #fff; background: #979597; border-radius: 4px; text-align: center; box-shadow:none; font-size: 16px; letter-spacing: -1px; } } /***** 탭 *****/ .curriculum_box header { font-size: 30px; font-weight: 600; margin-bottom: 20px; } .curriculum_box nav{ position: relative; height: 55px; width: 100%; display: flex; align-items: center; border-left: 1px solid #bfbdbb; } .curriculum_box nav label { display: block; box-sizing: border-box; height: 100%; width: 100%; text-align: center; line-height: 50px; cursor: pointer; color: #949497; font-size: 18px; position: relative; z-index: 1; border-top: 1px solid #bfbdbb; border-right: 1px solid #bfbdbb; border-bottom: 2px solid #374047; font-weight: 900; } @media screen and (min-width: 992px) { font-size: 16px; } #su01:checked ~ nav label.su01, #su02:checked ~ nav label.su02, #su03:checked ~ nav label.su03 {color: #374047; border: 0px; } .curriculum_box input[type="radio"]{display: none; } .curriculum_box nav label i {padding-right: 7px; } .curriculum_box nav .slider {position: absolute; height: 100%; width: 33.3%; color: #374047; bottom: 0; left: 0px; z-index: 0; border: 2px solid #374047; border-bottom: 2px solid #fff; box-sizing: border-box; background: #fff; } #su02:checked ~ nav .slider { left: 33.3%; } #su03:checked ~ nav .slider { left: 66.6%; } section .curriculum_content { display : none; } #su01:checked ~ section .content-1, #su02:checked ~ section .content-2, #su03:checked ~ section .content-3 { display: block; } /***** 교육안내 *****/ .curriculum_content {padding-top: 40px; } .curriculum_content .text_box {background: #f3f3f5; width: 100%; padding: 20px 0px 30px 0px; font-size: 14px; line-height: 20px; color: #949497; text-align: center; } .curriculum_content .text_box .point { display: inline-block; color: #f58612; font-size: 18px; font-weight: 900; padding: 10px 0px; } /*******라디오버튼******/ input[type=radio]:not(old) { margin:0; padding:0; opacity:0; background:url(radio02_off.png) no-repeat 0 0; width:0; } input[type=radio]:not(old) + label { display: inline-block; text-align: left; height:20px; padding-left: 25px; padding-right: 10px; background: url(/dgn/ver02/images/radio02_on.png) no-repeat 0 0; line-height: 110%; vertical-align: top; } input[type=radio]:not(old):checked + label { background: url(/dgn/ver02/images/radio02_off.png) no-repeat 0 0; } /*사업소개 */ .business_box { border-top: 2px solid #374047; } .business_box > .text_box {text-align: center; } .business_box > .text_box h4 { font-size: 20px; color: #374047 ; font-weight: 900; letter-spacing: -1px; } .business_box > .text_box .txt { font-size: 14px; color: #374047; margin-top: 16px; line-height: 20px; } .business_box > .text_box .txt span {display: block; text-align:center; width: 100%; } .business_box > .business_img { width: 100%; } .business_box > .business_img img {width: 100%} .curriculum_info { background: #fff; height: 700px; } .curriculum_info > .text_box {text-align: center; padding-top: 60px; } .curriculum_info > .text_box h4 { font-size: 23px; font-weight: 900; color: #328d6c; } .curriculum_info > .text_box .txt { font-size: 23px; line-height: 24px; color: #374047; font-weight: 900; letter-spacing: -1px; padding-top:11px; } .curriculum_info02 { display: block; align-items: center; justify-content: center; margin-top:35px; } .curriculum_info02 li a { text-decoration: none; } .curriculum_info02 li { display: block; position: relative; box-sizing: border-box; border: 1px solid #d6d6d6; width: 100%; padding: 49px 21px 37px 40px; } .curriculum_info02 li:first-child { margin-left: 0px; } .curriculum_info02 li .title_box02 { font-size: 18px; font-weight: 900; color: #328d6c; font-family: 'Noto Sans KR', sans-serif; } .curriculum_info02 li .text_box { font-size: 15px; line-height: 21px; color: #5f656a; padding: 15px 0px ; } .curriculum_info02 li .text_box span { display: block; text-align: left; } .curriculum_info02 li .img_box { position: absolute; top: 10px; right: 10px; height: 115px; width: 90px; background: url(/dgn/ver02/images/icon_business.png) no-repeat } .curriculum_info02 li.curriculum_01 .img_box { background-position: -32px 13px; } .curriculum_info02 li.curriculum_02 .img_box { background-position: -32px -466px; } .curriculum_info02 li.curriculum_03 .img_box { background-position: -26px -982px; } .curriculum_info03 {list-style: none; } .curriculum_info03 > li {width: 100%; display: block; margin-bottom: 15px; box-sizing: border-box; padding: 60px 0px 60px 7%; } .curriculum_info03 li.curriculum_01 { background:#7e827b url(/dgn/ver02/images/curriculum_01.jpg) no-repeat right bottom; } .curriculum_info03 li.curriculum_02 {background:#6a7279 url(/dgn/ver02/images/curriculum_02.jpg) no-repeat right bottom; } .curriculum_info03 li.curriculum_03 {background:#b99286 url(/dgn/ver02/images/curriculum_03.jpg) no-repeat right top; } .curriculum_info03 li .title_box02 {font-size: 30px; color: #000000; font-weight: 900; } .curriculum_info03 li .text_box {font-size: 15px; color: #374047; font-weight: 300; padding-top: 15px; } .curriculum_info04 {list-style: none; margin-top: 40px; } .curriculum_info04 li {width: 100%; display: block; margin-bottom: 15px; } .curriculum_info04 li .title { display: block; color: #f3cf02; font-size: 20px; font-weight: bold; padding-bottom: 10px; } .curriculum_info04 li .sub_text { display: block; color: #fff; font-size: 15px; font-weight: 300; } .null_box01 { height: 40px ;} .null_box02 { height: 25px ;} .btn_more { display: inline-block; padding-left: 8px; background: #fff; border: 0px; color: #7f8387; letter-spacing: -1px; margin-left: -7px; font-size: 12px; } @media screen and (min-width: 992px) { .parallax-window { min-height: 200px; background: transparent; } .business_box { border-top: 2px solid #374047; } .business_box > .text_box {text-align: center; } .business_box > .text_box h4 { font-size: 30px; color: #374047 ; font-weight: 900; letter-spacing: -2px; } .business_box > .text_box .txt { font-size: 16px; color: #374047; margin-top: 16px; line-height: 22px; } .business_box > .text_box .txt span {display: block; text-align:center; width: 100%; } .curriculum_info { background: #fff; height: 510px; } .curriculum_info > .text_box {text-align: center; padding-top: 60px; } .curriculum_info > .text_box h4 { font-size: 24px; font-weight: 900; color: #328d6c; } .curriculum_info > .text_box .txt { font-size: 27px; line-height: 24px; color: #374047; font-weight: 900; letter-spacing: -1px; padding-top:11px; } .curriculum_info02 { display: flex; align-items: center; justify-content: center; margin-top: 35px; } .curriculum_info02 li { box-sizing: border-box; border: 1px solid #d6d6d6; width: 25%; margin-left: 5%; padding: 49px 21px 37px 40px; } .curriculum_info02 li:first-child { margin-left: 0px; } .curriculum_info02 li .title_box02 { font-size: 22px; font-weight: 900; color: #328d6c; font-family: 'Noto Sans KR', sans-serif; } .curriculum_info02 li .text_box { font-size: 15px; line-height: 21px; color: #5f656a; padding: 15px 0px ; } .curriculum_info02 li .text_box span { display: block; text-align: left; } .curriculum_info02 li .img_box { position: relative; top: 0px; right: 0px; height: 115px; width: 100%; background: url(/dgn/ver02/images/icon_business.png) no-repeat } .curriculum_info02 li.curriculum_01 .img_box { background-position: -32px 13px; } .curriculum_info02 li.curriculum_02 .img_box { background-position: -32px -466px; } .curriculum_info02 li.curriculum_03 .img_box { background-position: -26px -982px; } .null_box01 { height: 60px ;} .null_box02 { height: 40px ;} .btn_more { background: #fff; border: 0px; color: #7f8387; letter-spacing: -1px; font-size: 12px; } } /**********설문조사 **********/ .e_question { list-style: none; border-bottom: 1px solid #ebebeb; } .e_question > li {width: 100%; font-size: 14px; color: #716e71; text-align: left; padding: 25px 0px; } .e_question > li.title { background: #f8f8f8; border-top: 2px solid #374047; border-bottom: 1px solid #ebebeb; box-sizing: border-box; font-size: 15px; font-weight: 400; color: #374047; padding: 25px 5%; } .e_question li .e_choice { list-style: none; } .e_question li .e_choice { width: 100%; } .e_question li .e_choice li { font-size: 14px; color: #716e71; text-align: left; padding: 5px 5%; } .e_question li .e_choice li span textarea { width: calc(100% - 20px); border: 1px solid #a9a9a9; padding: 10px; color: #999; min-height: 40px; margin-left: 30px; margin-top: 3px; } .e_question li .e_choice li span textarea.textarea_big { width: 100%; border: 1px solid #a9a9a9; padding: 10px; color: #999; min-height: 120px; margin: 0px; } .evaluation .btn_box {width: 100%; text-align: center; margin-top: 20px;} input.e_check[type=checkbox]:not(old) { margin:0; padding:0; opacity:0; background:url(/dgn/ver02/images/check02_on.png) no-repeat 0 0; width:0; } input.e_check[type=checkbox]:not(old) + label.e_check { display: inline-block; text-align: left; height:21px; padding-left: 25px; background: url(/dgn/ver02/images/check02_off.png) no-repeat 0 0; vertical-align: top; } input.e_check[type=checkbox]:not(old):checked + label.e_check { background: url(/dgn/ver02/images/check02_on.png) no-repeat 0 0; } /***********개인정보처리 ***********/ .policy_box { font-size: 14px; color: #5f656a; line-height: 24px; } .dan_box { margin-top: 40px; } .dan_box .title { display: block; font-size: 16px; color: #328d6c; margin-bottom: 10px; padding: 10px 0px; border-bottom: 1px solid #328d6c; border-top: 2px solid #328d6c; font-weight: bold; letter-spacing: -1px; } .dan_box .title i {margin :0 10px; } .dan_box table {border-top: 2px solid #374047; font-size: 14px; width: 100%; margin: 15px 0px 10px 0px; } .dan_box table th { background: #f8f8f8; border-bottom: 1px solid #e2e2e2; text-align: center; font-weight: bold; color: #000; padding: 8px 0px; } .dan_box table td { background: #fff; box-sizing: border-box; border-bottom: 1px solid #e2e2e2; text-align: center; padding: 6px 20px; } .dan_box02 { margin-bottom: 30px; color: #000; } .dan_box03 { display: block; margin: 16px 0px; } .dan_box04 { display: block; padding-left: 10px; } .pop_close_box { text-align:left; padding: 30px 0 30px 0; } .pop_close_box .btn_close { display: inline-block; background: #fff; height: 48px; line-height: 48px; font-weight: 900; border: 1px solid #bfbdbb; padding: 0 30px; border-radius: 4px; text-align: center; cursor: pointer; font-size: 18px; text-decoration: none; } .pop_close_box .btn_close span { color: #374047; font-size: 18px; text-decoration: none; } /**************온라인 교육 학습현황*****************/ .study_box { overflow: hidden; display: block; justify-content: center; align-items: center; } .video_box {height: 100%; width: 410px; } .chatting_box { height: 350px; width: 410px; margin-left: 1%; } @media screen and (min-width: 992px) { .study_box { overflow: hidden; display: flex; justify-content: center; align-items: center; height: 100vh; max-height: 520px; } .video_box {height: 100%; width: 64%; } .chatting_box { height: 100%; width: 35%; margin-left: 1%; } } /*******************************************gnb**************************************************/ .header.sub-header .pc-nav .menu-list>a, .header:hover .pc-nav .menu-list>a, .header.fixed .pc-nav .menu-list>a {color:#333} .header.sub-header .menu-btn .line,.header:hover .menu-btn .line, .header.fixed .menu-btn .line,.header.sub-header .menu-btn .line:before, .header:hover .menu-btn .line:before, .header.fixed .menu-btn .line:before, .header.sub-header .menu-btn .line:after, .header:hover .menu-btn .line:after, .header.fixed .menu-btn .line:after {background-color:#11a381} .header.sub-header .btn-search, .header:hover .btn-search, .header.fixed .btn-search {background-image:url(/dgn/ver02/images/logo_kpffc_2.png)} /**/ .header.sub-header .logo .logo-img, .header:hover .logo .logo-img, .header.fixed .logo .logo-img {background-image:url(/dgn/ver02/images/logo_kpffc_2.png)} body.pc-nav-open{overflow:hidden} .header {position:relative;top:0;left:0;width:100%;-webkit-transition:all .4s;transition:all .4s;z-index:700} .header.sub-header {position:relative;height:70px} @media screen and (min-width: 992px) {.header.sub-header{height:90px}} @media screen and (min-width: 992px) {.header.is-hide .fixed-wrap{top:-90px !important}} .header.fixed .fixed-wrap {background-color:#fff;border-bottom:1px solid #ddd} @media screen and (min-width: 992px) {.header.fixed .header-inner{height:90px}.header.fixed .navBg{top:90px;border-top:0}.header.fixed .sub-menu-list-wrap{top:90px}.header.fixed .fixed-wrap{height:90px}} .header.fixed.sub-header{position:relative !important} .header .fixed-wrap{position:fixed;top:0;left:0;width:100%;height:100px;background-color:#fff;transition:all .4s} /*pc용 메뉴 높이 */ @media screen and (min-width: 992px) {.header .fixed-wrap{height:100px; background: #fff; }.pc-nav-open .header .fixed-wrap:after{content:'';display:inline-block;position:absolute;bottom:0;left:0;width:100%;height:1px;border-bottom:1px solid #ddd;z-index:701}} .header .fixed-wrap:hover{background-color:#fff} .header .header-inner{position:relative;display:flex;justify-content:center;margin:0 auto;height:100px; background: #fff;} @media screen and (min-width: 992px){.header .header-inner{height:90px;padding:0 15px;transition:height .4s}} .header .logo{position:absolute;top:0%;left:15px;transform:translateY(-50%);width:100%;height:100px;z-index:701; } @media screen and (min-width: 992px){.header .logo{width:310px; top: 65%; }} @media screen and (min-width: 1325px){.header .logo{left:calc((100% - 1280px) / 2)}} .header .logo .logo-img{display:block; height:150px; background:#fff url(/dgn/ver02/images/logo_kpffc_2.png) no-repeat left 90px/170px auto ; } /* width:100%; max-width: 288px; no-repeat center/100% auto*/ .pc-nav-open .header .logo .logo-img{background-image:url(/dgn/ver02/images/logo_kpffc_2.png) no-repeat; } .header .logo .logo-img span {display: inline-block; font-size: 12px; text-indent: -9999px; } /* */ .header .navBg{display:none} @media screen and (min-width: 992px) { .header .logo .logo-img{display:block;width:80%; max-width: 288px; height:100%; background:url(/dgn/ver02/images/logo_kpffc_2.png) no-repeat left 6px/84% auto; } /* width:100%; no-repeat center/100% auto*/ .header .navBg{display:block;position:absolute;left:0;top:90px;display:none;width:100%;height:245px;border-bottom:1px solid #ddd;border-top:1px solid #ddd;background-color:#fff;transition:top .4s;overflow:hidden}} @media screen and (min-width: 992px) {.header .bg-img{position:absolute;top:50px;right:0;width:508px;height:272px;background:#fff url(/views/res/imgs/common/menu-bg-img.jpg) no-repeat right bottom/contain}}@media screen and (min-width: 1310px){.header .bg-img{right:calc((100% - 1280px)/2 + 100px)}} .pc-nav{display:none} @media screen and (min-width: 992px) {.pc-nav{display:flex; padding-top: 20px; padding-left: 0%; }.pc-nav .menu-list-wrap{display:flex}.pc-nav .menu-list{position:relative;display:flex;justify-content:center;padding:0 19px}} @media screen and (min-width: 992px) and (min-width: 1200px) {.pc-nav .menu-list{padding:0; width:146px}} /*pc용 */ @media screen and (min-width: 992px){.pc-nav .menu-list>a{position:relative;display:flex;align-items:center;justify-content:center;font-size:17.5px; text-decoration: none; letter-spacing:-1px;color:#374047; transition:color .4s;-webkit-transition:color .4s;cursor:pointer; font-weight: 900; } .pc-nav .menu-list>a:after{content:"";display:inline-block;position:absolute;bottom:0;left:0;width:100%;height:3px;background-color:#d6000f;opacity:0;transition:opacity .4s} body.search-nav-open .pc-nav .menu-list>a:after{content:none}.pc-nav .menu-list:hover>a:after{opacity:1} .pc-nav .menu-list.on>a{color:#d6000f !important}.pc-nav .sub-menu-list-wrap{display:none;position:absolute;left:0;top:90px;width:100%;height:315px;text-align:center;z-index:1;transition:top .4s}.pc-nav .sub-menu-list:nth-of-type(1){padding-top:0px} .pc-nav .sub-menu-list.on>a{color:#d6000f}.pc-nav .sub-menu-list a{position:relative;display:flex;align-items:center;justify-content:center;height:52px;font-size:18px; letter-spacing: -1px; color:#777;opacity:0.98;transition:color .4s;-webkit-transition:color .4s}.pc-nav .sub-menu-list:hover>a{color:#d6000f}.pc-nav .sub-menu-list:hover>a:after{transform:scaleX(1);-webkit-transform:scaleX(1)}.pc-nav .sub-menu-list .text{word-break:keep-all; line-height: 24px; font-size: 16px; }} .header-right-wrap{position:absolute;right:15px;top:35px;height:40px;display:flex;align-items:center; background: #fff; } @media screen and (min-width: 1325px){.header-right-wrap{right:calc((100% - 1280px) / 2)}} .header-right-wrap .menu-btn-wrap{position:relative;display:flex;align-items:center;justify-content:center;padding-left:15px; padding-right:15px;height:100%;cursor:pointer;z-index:701; background: #004899; border-radius: 4px; } @media screen and (max-width: 991.98px){.pc-nav-open .header-right-wrap .menu-btn-wrap{z-index:701}} /*@media screen and (min-width: 992px){*/.header-right-wrap .btn-nav-eggsc{position:relative;z-index:701; font-size: 13px; font-weight: 900; padding: 0 10px; color: #848383; text-decoration: none; } @media screen and (min-width: 992px){.header-right-wrap .btn-nav-eggsc{ color: #848383; font-size: 13px; padding: 0 10px; font-weight: 900; }} .menu-btn .line{margin:7px 0;transition:transform .4s} .menu-btn .line{margin:7px 0;transition:transform .4s} .pc-nav-open .menu-btn .line{background-color:rgba(0,0,0,0) !important} .menu-btn .line,.menu-btn .line:before,.menu-btn .line:after {content:"";display:block;width:20px;height:1px;background-color:#fff;transition:transform .4s} @media screen and (min-width: 992px){.menu-btn .line,.menu-btn .line:before,.menu-btn .line:after{background-color:#fff}} .pc-nav-open .menu-btn .line:before,.pc-nav-open .menu-btn .line:after{background-color:#fff !important} .menu-btn .line:before{transform:translateY(-7px)} .pc-nav-open .menu-btn .line:before{-webkit-transform:translateY(0) rotateZ(135deg);transform:translateY(0) rotateZ(135deg)} .menu-btn .line:after{transform:translateY(5px)} .pc-nav-open .menu-btn .line:after{-webkit-transform:translateY(-1px) rotateZ(-135deg);transform:translateY(-1px) rotateZ(-135deg)} .open-nav-wrap{position:fixed;top:0;left:0;right:0;bottom:0;width:100%; background-color:#fff;opacity:0;transform:translateX(100%);transition:opacity .4s;z-index:700; padding-bottom: 100px; overflow-y: scroll; } .pc-nav-open .open-nav-wrap{opacity:1;transition:opacity .4s,transform .4s;transform:translateX(0);background:#fff url(/views/res/imgs/common/menu-bg-img-m-n.jpg) no-repeat right bottom/contain} @media screen and (min-width: 992px) {.pc-nav-open .open-nav-wrap{background-image:url(/views/res/imgs/common/nav_open_bg.jpg)}} .open-nav-wrap .inner-wrap{position:relative; max-width:1280px;margin:0 auto;height:inherit; padding:100px 30px 0; } /*padding:100px 30px 0;*/ @media screen and (min-width: 992px){.open-nav-wrap .inner-wrap{display:flex;align-items:center;justify-content:center; padding:100px 30px 0;}} .open-nav-wrap .menu-list-wrap{width:100%; height: 750px; padding-bottom: 30px; overflow-x:hidden} /* overflow-y:scroll;*/ @media screen and (min-width: 992px){.open-nav-wrap .menu-list-wrap{display:flex;flex-wrap:nowrap;display:block;width:auto;height:auto;counter-reset:section;overflow:hidden}.open-nav-wrap .menu-list-wrap:hover .menu-list{transition-delay:0s !important}.open-nav-wrap .menu-list-wrap:hover .menu-list>a,.open-nav-wrap .menu-list-wrap:hover .sub-menu-list{color:#aaa;opacity:0.3}} .open-nav-wrap .menu-list-wrap>*{width:100%} @media screen and (min-width: 992px){.open-nav-wrap .menu-list-wrap>*{flex:1 1 0%}} .open-nav-wrap .menu-list{opacity:0;transition:opacity .4s 0.2s} @media screen and (min-width: 992px){.open-nav-wrap .menu-list{position:relative;display:flex;align-items:center;transform:translateX(45px);margin-bottom:37px;transition:transform 0.55s, opacity 0.55s} .open-nav-wrap .menu-list:hover{transform:translateX(25px) !important}.open-nav-wrap .menu-list:hover:before{opacity:1;transform:translateX(-35px)} .open-nav-wrap .menu-list:hover>a{opacity:1 !important;color:#333 !important} .open-nav-wrap .menu-list:hover>a,.open-nav-wrap .menu-list:hover .sub-menu-list{opacity:1;color:#333}} .pc-nav-open .open-nav-wrap .menu-list{opacity:1} @media screen and (min-width: 992px) {.pc-nav-open .open-nav-wrap .menu-list{transform:translateX(0)}.pc-nav-open .open-nav-wrap .menu-list:nth-child(1){transition-delay:.4s}.pc-nav-open .open-nav-wrap .menu-list:nth-child(2){transition-delay:.46s}.pc-nav-open .open-nav-wrap .menu-list:nth-child(3){transition-delay:.52s}.pc-nav-open .open-nav-wrap .menu-list:nth-child(4){transition-delay:.58s}.pc-nav-open .open-nav-wrap .menu-list:nth-child(5){transition-delay:.64s}} .open-nav-wrap .menu-list>a {display:flex;align-items:center;height:40px;border-bottom:1px solid rgba(238,238,238,0.98);font-size:16px;font-weight:500;letter-spacing:0.72px;color:#333; text-decoration: none; transition:color 0.15s} @media screen and (min-width: 992px) {.open-nav-wrap .menu-list>a{height:auto;font-size:34px;letter-spacing:-1.5px;border-bottom:0;width:330px;transition:color 0.4s, opacity 0.4s; font-weight: 900; }} .open-nav-wrap .menu-list.on>a{color:#1671c7} @media screen and (min-width: 992px){.open-nav-wrap .menu-list.on>a{color:#333; text-decoration: none; }} .open-nav-wrap .menu-list:before{counter-increment:section;content:"0" counter(section);position:absolute;top:3px;left:10px;line-height:25px;font-size:13px;font-weight:600;font-family:"Roboto", sans-serif;opacity:0;color:#000;transform:translateX(0px);transition:all 0.5s cubic-bezier(0.63, 0.03, 0.21, 1),color 0s} .open-nav-wrap .menu-list .has-sub{position:relative} .open-nav-wrap .menu-list .has-sub:before,.open-nav-wrap .menu-list .has-sub:after{content:"";position:absolute;top:25px;right:16px;display:inline-block;width:17px;height:1px;background-color:#555;z-index:1;transition:transform 0.2s linear} @media screen and (min-width: 992px) {.open-nav-wrap .menu-list .has-sub:before,.open-nav-wrap .menu-list .has-sub:after{display:none}} .open-nav-wrap .menu-list .has-sub:before{transform:rotate(-90deg)} @media screen and (max-width: 991.98px){.open-nav-wrap .menu-list .has-sub.open{border-bottom:1px solid #8dd889} .open-nav-wrap .menu-list .has-sub.open:before{transform:rotate(0)}.open-nav-wrap .menu-list .has-sub.open:after{transform:rotate(180deg)}} .open-nav-wrap .sub-menu-list-wrap{padding:0 14px;border-bottom:1px solid rgba(238,238,238,0.98)}/*display:none; */ @media screen and (min-width: 992px){.open-nav-wrap .sub-menu-list-wrap{display:flex !important; padding-left:0;border-bottom:0}.pc-nav-open .open-nav-wrap .sub-menu-list-wrap{height:auto !important}} .open-nav-wrap .sub-menu-list{font-size:14px;color:#999} @media screen and (min-width: 992px) {.open-nav-wrap .sub-menu-list{position:relative;font-size:18px;margin-right:40px;color:#333;transition:opacity 0.3s}.open-nav-wrap .sub-menu-list:not(:last-child):after{content:"";position:absolute;top:10px;right:-20px;display:block;width:1px;height:13px;transform:skew(-30deg);background-color:#999}.open-nav-wrap .sub-menu-list:hover{color:#1671c7 !important}} .open-nav-wrap .sub-menu-list:first-child{margin-top:4px} @media screen and (min-width: 992px){.open-nav-wrap .sub-menu-list:first-child{margin-top:0}} .open-nav-wrap .sub-menu-list:last-child{margin-bottom:4px} @media screen and (min-width: 992px){.open-nav-wrap .sub-menu-list:last-child{margin-bottom:0}} .open-nav-wrap .sub-menu-list.on{color:#333} @media screen and (min-width: 992px) {.open-nav-wrap .sub-menu-list.on{color:#8dd889 !important}} .open-nav-wrap .sub-menu-list .text{display:inline-flex;align-items:center;height:34px;transition:color 0.2s; color: #000; } .sub-menu-list a {text-decoration: none; } .open-nav-wrap .bottom-wrap{display:flex;padding:50px 15px 20px} @media screen and (min-width: 992px){.open-nav-wrap .bottom-wrap{display:none}} .open-nav-wrap .bottom-wrap .txt{position:relative;font-size:14px;color:#ccc} .open-nav-wrap .bottom-wrap .txt:not(:last-child){margin-right:25px} .open-nav-wrap .bottom-wrap .txt:not(:last-child):after{content:"";display:inline-block;position:absolute;top:4px;right:-13px;width:1px;height:10px;background-color:#ccc} .open-nav-wrap .eggsc-wrap{position:absolute;bottom:30px;left:0;padding:0 30px;width:100%;text-align:center;opacity:0} @media screen and (min-width: 992px){.open-nav-wrap .eggsc-wrap{display:none}} .open-nav-wrap .eggsc-wrap .btn-nav-eggsc{width:100%} .pc-nav-open .open-nav-wrap .eggsc-wrap{opacity:1;transition:opacity 0.5s 0.35s} .header-btn-box{ width:76px; height: 100%; border-radius: 4px; line-height: 40px; background: #fff; border: 1px solid #fff; margin-right: 6px; text-align: center; } .btn_member {display: none; } .btn_logout {border-left: 0px solid #dbdbdb; height: 100%; } .btn_login {border-left: 0px solid #dbdbdb; height: 100%; } @media screen and (min-width: 992px){ .header-btn-box{ width: 150px; height: 100%; border-radius: 4px; line-height: 40px; background: #f8f8f8; border: 1px solid #dbdbdb; margin-right: 6px; text-align: center; } .btn_member {display: inline-block; } .btn_login {border-left: 1px solid #dbdbdb; height: 100%; } .btn_logout {border-left: 0px solid #dbdbdb; height: 100%; } } /******************************************* // gnb **************************************************/ /***** 사이트 정보 *****/ .footer { width: 100%; background: #161616; height: 170px; margin-top: 80px; } .footer_box { width: 100%; padding-top: 30px; overflow: hidden; } .footer_box ul { width: 90%; margin: 0 auto; } .footer_box ul li { font-size: 12px; text-align: left; color: #fff; line-height: 16px; } .footer_box ul li:first-child {padding-bottom: 10px; } .footer_box ul li .footer_company { display: inline-block; text-indent: -9999px; background: url(/dgn/ver02/images/logo_kpffc_footer.png) no-repeat left top ; height: 40px; width: 283px ; margin-bottom: 6px; background-size: 68%; } .footer_box .btn_box { width: 90%; margin: 0 auto; text-align:left; margin-top: 10px; } .footer_box .btn_box a {box-sizing: border-box; display: inline-block; text-align: left; padding: 0px 0px; width: 110px; height: 35px; line-height: 35px; color: #c8c9c9; margin-left: 10px; font-size: 12px; text-decoration: none; border-radius: 5px; background: none; } .pl{ width: 160px; border: 1px solid #C4C4C4; box-sizing: border-box; border-radius: 5px; padding: 0px 20px; font-style: normal; font-weight: 400; font-size: 12px; line-height: 35px; height: 35px; } .pl select:hover { border-color: #888; } .pl select:focus { border-color: #aaa; box-shadow: 0 0 1px 3px rgba(59, 153, 252, 0.7); box-shadow: 0 0 0 3px -moz-mac-focusring; color: #222; outline: none; } .pl select:disabled { opacity: 0.5; } @media screen and (min-width: 992px) { .footer { width: 100%; background: #161616; height: 170px; margin-top: 80px; } .footer_box { width: 90%; max-width: 1270px; margin: 0 auto; padding-top: 18px; overflow: hidden; } .footer_box ul { width: 40%; float: left;} .footer_box ul li { font-size: 12px; text-align: left; color: #fff; line-height: 18px; } .footer_box ul li:first-child {padding-bottom: 10px; } .footer_box ul li .footer_company { display: inline-block; text-indent: -9999px; background: url(/dgn/ver02/images/logo_kpffc_footer.png) no-repeat left top ; height: 40px; width: 283px ; background-size: 68%; } .footer_box .btn_box { width: 60%; float: right; text-align: right; margin-top: 0px; } .footer_box .btn_box a {box-sizing: border-box; display: inline-block; text-align: left; padding: 0px 20px; width: 160px; height: 35px; line-height: 35px; border: 1px solid #7e8080; color: #c8c9c9; margin-left: 10px; font-size: 12px; text-decoration: none; border-radius: 5px; background: url(/new_main/gate/tpl8/images/icon_ehrd03.png) no-repeat 133px -991px; } .pl{ width: 160px; border: 1px solid #C4C4C4; box-sizing: border-box; border-radius: 5px; padding: 0px 20px; font-style: normal; font-weight: 400; font-size: 12px; line-height: 35px; height: 35px; } .pl select:hover { border-color: #888; } .pl select:focus { border-color: #aaa; box-shadow: 0 0 1px 3px rgba(59, 153, 252, 0.7); box-shadow: 0 0 0 3px -moz-mac-focusring; color: #222; outline: none; } .pl select:disabled { opacity: 0.5; } } /*********** 교육안내***********/ .tableB { width: 100%; padding: 10px 0px; font-size: 14px;} .tableB_content { display:block; width: 100%; border-bottom: 1px solid #c8c8c8; border-top: 2px solid #374047; position: relative; background: #f8f8f8; } .tableB_content > li { position: relative; border-top: 1px solid #c8c8c8; padding: 8px; overflow: hidden; font-size: 14px; line-height: 140%; } .tableB_content > li div.title{ width: 30%; vertical-align: top; text-align: center; float: left; height: 50px; line-height: 50px; font-weight: bold; } .tableB_content > li div.td_content{ width: 70%; text-align: left; float: left; padding-top: 13px; padding-bottom: 10px; color: #848383; } .tableC { width: 100%; padding: 10px 0px; } .tableC_header { display:block; width: 100%; border-bottom: 1px solid #c8c8c8; border-top: 2px solid #374047; position: relative; } .tableC_header {width: 100%; overflow: hidden; font-size: 14px; } .tableC_header li {width: 100%; overflow: hidden; } .tableC_header > li div { float: left; position: relative; color: #fff; background: #262626; height: 40px; line-height: 40px; font-weight: bold; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .tableC_header > li div.edu {width: 40%; text-align: center; } .tableC_header > li div.day {width: 40%; text-align: center; border-left: 1px solid #c8c8c8; border-right: 1px solid #c8c8c8; } .tableC_header > li div.time {width: 20%; text-align: center; } .tableC_content {width: 100%; overflow: hidden; background: #f8f8f8; font-size: 14px; border-bottom: 1px solid #c8c8c8; } .tableC_content > li { float: left; position: relative; } .tableC_content > li.edu {width: 40%; text-align: center; } .tableC_content > li.day {width: 40%; text-align: center; } .tableC_content > li.titme {width: 20%; text-align: center; padding-top: 60px; } .tableC_content > li.titme div {font-size: 12px; width: 44px; text-align: left; margin: 0 auto; line-height: 160%; letter-spacing: -0.7px; } .tableC_content > li.edu div {border-top: 1px solid #c8c8c8; width: 100%; font-size: 12px; padding: 8px 0px; line-height: 120%; } .tableC_content > li.day div {border-top: 1px solid #c8c8c8; border-left: 1px solid #c8c8c8; border-right: 1px solid #c8c8c8; font-size: 12px; padding: 8px 0px; line-height: 120%; } @media screen and (min-width: 992px) { .tableC_content > li.edu div { font-size: 14px; } .tableC_content > li.day div { font-size: 14px; } .tableC_content > li.titme div { font-size: 14px; } } a.btn_list2 { color: #ff806d; font-weight: bold; text-decoration: none; padding: 12px 120px 12px 17px; position: relative; display: inline-block; text-shadow: 0 1px 0 #fff; -webkit-transition: border-color .218s; -moz-transition: border .218s; -o-transition: border-color .218s; transition: border-color .218s; background:#fff url(/nt/images/btn_arr_r.png) no-repeat 185px 17px; border: solid 1px #ff806d; font-size: 15px; letter-spacing: -1px; } a.btn_list2:hover { color: #fe4f4f; border-color: #fe4f4f; -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) ; -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); } a.btn_list2:active { color: #fe4f4f; border-color: #fe4f4f; } a.btn_list2.position {background:#fff url(/nt/images/btn_arr_r.png) no-repeat 160px 17px; } .sub_title2 {color: #000000; font-size: 30px; font-weight: bold; text-align: center;} #tabs_app{ overflow: hidden; width: 980px;; /* 01.탭부분 전체의 넓이 입니다. */ margin: 0 auto; list-style: none; } #tabs_app li{ float: left; margin:0 0 0 -1px; /* 03.탭메뉴 사이사이의 간격을 조정합니다 */ width:325px; border-top: 1px solid #ececec; border-left: 1px solid #ececec; border-right: 1px solid #ececec; } #tabs_app li:first-child {width: 323px; margin-left: 0;} /*비활성화 탭(기본 탭모양) 설정*/ #tabs_app a{ position: relative; width:100%; height:65px; /* 04.탭메뉴 하나의 넓이와 높이 */ float: left; text-decoration: none; text-align:center; font-size:15pt; /* 05.탭메뉴 폰트사이즈 */ letter-spacing:-0.5px; color: #222222; line-height: 65px; font-weight: 500; background-color: #f9f9f9; border-bottom: 1px solid #0ba199; } #tabs_app a:hover, #tabs_app a:hover::after, #tabs_app a:focus, #tabs_app a:focus::after{ /*background: #fff;*/ } #tabs_app a:focus{ /*outline: 0;*/ } #tabs_app a::after{ z-index: 1; background-color: #fff; color: #0ba199; } /*활성화탭(탭 클릭했을때 모양) 설정*/ #tabs_app #current a, #tabs_app #current a::after{ background-color: #fff; color: #0ba199; /* 07.탭메뉴 색상 설정 */ border-top: 1px solid #0ba199; border-left: 1px solid #0ba199; border-right: 1px solid #0ba199; border-bottom: 1px solid #ffffff; z-index: 4; } .grid_write {border-top: 1px solid #636363;} .grid_write th {vertical-align: middle; border-bottom: 1px solid #d6d6d6; font-size: 13px; font-weight: bold; color: #323949;} .grid_write td {padding: 11px 0 11px 7px; vertical-align: middle; border-bottom: 1px solid #d6d6d6; overflow: hidden;} .text_write {height: 32px; background-color: #f8f8f8; border: 1px solid #dedede; padding: 0 0 0 7px;} select.write { /* 원하는 너비설정 */ padding: 7px 0 8px 13px; /* 여백으로 높이 설정 */ height: 34px; font-family: inherit; /* 폰트 상속 */ background: url(/nt/images/icon_select.png) no-repeat 100% 50%; /* 네이티브 화살표 대체 */ border: 1px solid #dfdfdf; background-color: #f8f8f8; border-radius: 0px; /* iOS 둥근모서리 제거 */ -webkit-appearance: none; /* 네이티브 외형 감추기 */ -moz-appearance: none; appearance: none; } .fl {float:left;} .fr {float:right;} .ofh {overflow:hidden;} .cb {clear:both;} .bold {font-weight: bold;} .mt2 {margin-top: 2px;} .mt9 {margin-top: 9px;} .mt30 {margin-top: 30px;} .mt50 {margin-top: 50px;} .mb5 {margin-bottom: 5px;} .mb7 {margin-bottom: 7px;} .mb13 {margin-bottom: 13px;} .mb15 {margin-bottom: 15px;} .mb20 {margin-bottom: 20px;} .mb23 {margin-bottom: 23px;} .mb30 {margin-bottom: 30px;} .mb40 {margin-bottom: 40px;} .mb50 {margin-bottom: 50px;} .mb55 {margin-bottom: 55px;} .mb70 {margin-bottom: 70px;} .mr5 {margin-right: 5px;} .mr10 {margin-right: 10px;} .mr13 {margin-right: 13px;} .mr15 {margin-right: 15px;} .mr20 {margin-right: 20px;} .mr34 {margin-right: 34px;} .mr60 {margin-right: 60px;} .ml7 {margin-left: 7px} .ml10 {margin-left: 10px} .ml15 {margin-left: 15px} .ml25 {margin-left: 25px} .col01 {color:#ff5e5f;} .col03 {color:#262262;} .col04 {color:#ff5443;} .col05 {color: #2481c5;} .col06 {color: #0ba59b;} .col07 {color: #13a69c;} .col08 {color: #ff806d;} .col09 {color: #262262;} .col10 {color: #fa4e2c;} .col11 {color: #20a4a0;} .col12 {color: #1212e9;} .scroll_gray { scrollbar-face-color:#c7c7c7; scrollbar-shadow-color:#efefef; scrollbar-highlight-color:#efefef; scrollbar-3dlight-color:#efefef; scrollbar-darkshadow-color:#efefef; scrollbar-track-color:#efefef; scrollbar-arrow-color:#ffffff; overflow-x:hidden; overflow-y:scroll; } a.btn_back { color: #666666; font-weight: bold; text-decoration: none; padding: 12px 17px 12px 120px; position: relative; display: inline-block; text-shadow: 0 1px 0 #fff; -webkit-transition: border-color .218s; -moz-transition: border .218s; -o-transition: border-color .218s; transition: border-color .218s; background:#fff url(/nt/images/btn_arr_l.png) no-repeat 27px 17px; border: solid 1px #d4d4d4; font-size: 15px; letter-spacing: -1px; } a.btn_back:hover { color: #111; border-color: #111; -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2); -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); } a.btn_back:active { color: #000; border-color: #444; } a.btn_delete { color: #666666; font-weight: bold; text-decoration: none; padding: 12px 25px; position: relative; display: inline-block; text-shadow: 0 1px 0 #fff; -webkit-transition: border-color .218s; -moz-transition: border .218s; -o-transition: border-color .218s; transition: border-color .218s; border: solid 1px #d4d4d4; font-size: 15px; letter-spacing: -1px; } a.btn_delete:hover { color: #111; border-color: #111; -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2); -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); } a.btn_delete:active { color: #000; border-color: #444; } ul.notice_box {padding: 20px; background: #fafafa; border: 1px dashed #ddd; border-radius: 5px;} ul.notice_box li {padding: 1px 5px 1px 16px; background: url(/nt/images/dot2.png) no-repeat 0 center; overflow: hidden; font-size: 14px; color: #666; letter-spacing: -0.5px;} ul.notice_box li.none {padding: 1px 5px 1px 20px; overflow: hidden; font-size: 14px; color: #666; background: none; } ul.notice_box li.none2 {padding: 1px 5px 1px 0px; overflow: hidden; font-size: 14px; color: #666; background: none; } ul.notice_box li.none3 {padding: 1px 5px 1px 0px; overflow: hidden; font-size: 14px; color: #666; background: none; } .grid_list {border-top: 1px solid #636363; } .grid_list table {font-family: "Noto Sans KR","맑은 고딕",sans-serif;} .grid_list.line {border-top: 2px solid #636363; border-left: 1px solid #d9d9d9; border-right: 1px solid #d9d9d9;} .grid_list.line th, .grid_list.line td {border-right: 1px solid #d9d9d9;} .grid_list tr.line {border-bottom: 3px solid #1cbbb5; border-right: 6px solid #1cbbb5; border-left: 6px solid #1cbbb5; border-top: 3px solid #1cbbb5; } .grid_list tr.line td {color: #1cbbb5; font-weight: bold;} .grid_list th {padding: 12px 0 16px 0; color: #323949; font-size: 13px; font-weight: 500; border-bottom: 1px solid #636363; background-color: #f8f8f8; vertical-align: middle;font-family: "Noto Sans KR","맑은 고딕",sans-serif;} .grid_list td {border-bottom: 1px solid #d9d9d9; padding: 16px 0 20px 0; text-align: center; color: #555; font-weight: 300; vertical-align: middle;font-family: "Noto Sans KR","맑은 고딕",sans-serif;font-size: 13px;} .grid_list td.course {text-align:left; font-size:15px; letter-spacing:-0.5px; font-weight: 300;color: #444; padding-left: 7px;} .grid_list td.course.noti {font-size:13px; font-weight: 400;} .grid_list td.course p {width: 400px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .grid_list td.policy{text-align:left; font-size:14px; letter-spacing:-0.5px; font-weight: 300;color: #444; padding-left: 7px;} .grid_list td.price {color: #ff3312; font-weight: bold;} .grid_list td.approval01 {color: #4891d7; font-weight: bold;} .grid_list td.approval02 {color: #ff3312; font-weight: bold;} .grid_list td.approval03 {color: #000000; font-weight: bold;} .grid_list td.result {border-left: 1px solid #fff; border-right: 1px solid #fff; text-align: right; border-bottom: 2px solid #636363; padding: 35px 0;} .grid_list td.result p.people {font-size: 20px; font-weight: bold; margin-bottom: 5px;} .grid_list td.result p.total {font-size: 25px; font-weight: bold;} .grid_list td.result p.total > span {color: #ff3312;} .grid_list td.course span.new {display: inline-block; width: 13px; height: 12px; background: url(/nt/images/icon_new.png) no-repeat 0 0; margin-left: 3px;} .grid_list td.course span.recommend {display: inline-block; width: 44px; height: 12px; background: url(/nt/images/icon_recommend.gif) no-repeat 0 0; margin-left: 3px;} .grid_list td.course span.book {display: block; float: left; width: 46px; height: 17px; background: url(/nt/images/icon_book.png) no-repeat 0 0;} .grid_list td.course span.elearn {display: block; float: left; width: 46px; height: 17px; background: url(/nt/images/icon_elearn.png) no-repeat 0 0;} .grid_list td.course span.smart {display: block; float: left; width: 46px; height: 17px; background: url(/nt/images/icon_smart.png) no-repeat 0 0;} .grid_list td.course span.mobile {display: block; float: left; width: 60px; height: 17px; background: url(/nt/images/icon_mobile.png) no-repeat 0 0;} .grid_list td.course span.language {display: block; float: left; width: 60px; height: 17px; background: url(/nt/images/icon_language.png) no-repeat 0 0;} .grid_list td.course span.collective {display: block; float: left; width: 46px; height: 17px; background: url(/nt/images/icon_collective.png) no-repeat 0 0;} .grid_list td.course span.cardnews {display: block; float: left; width: 46px; height: 17px; background: url(/nt/images/icon_cardnews.png) no-repeat 0 0;} .grid_list td.course span.month1 {display: block; float: left; width: 46px; height: 17px; background: url(/nt/images/icon_1month.png) no-repeat 0 0;} .grid_list td.course span.month2 {display: block; float: left; width: 46px; height: 17px; background: url(/nt/images/icon_2month.png) no-repeat 0 0;} .grid_list td.course span.month3 {display: block; float: left; width: 46px; height: 17px; background: url(/nt/images/icon_3month.png) no-repeat 0 0;} .grid_list td.course span.month4 {display: block; float: left; width: 46px; height: 17px; background: url(/nt/images/icon_4month.png) no-repeat 0 0;} .grid_list td.course span.refund {display: block; float: left; width: 46px; height: 17px; background: url(/nt/images/icon_refund.png) no-repeat 0 0;} .grid_list td.course span.pay {display: block; float: left; width: 46px; height: 17px; background: url(/nt/images/icon_pay.png) no-repeat 0 0;} span.star00 { display: block; float: left; width: 77px; height: 12px; background: url(/nt/images/icon_star00.png) no-repeat 0 0; margin: 2px 0 0 10px;} span.star01 { display: block; float: left; width: 77px; height: 12px; background: url(/nt/images/icon_star01.png) no-repeat 0 0; margin: 2px 0 0 10px;} span.star02 { display: block; float: left; width: 77px; height: 12px; background: url(/nt/images/icon_star02.png) no-repeat 0 0; margin: 2px 0 0 10px;} span.star03 { display: block; float: left; width: 77px; height: 12px; background: url(/nt/images/icon_star03.png) no-repeat 0 0; margin: 2px 0 0 10px;} span.star04 { display: block; float: left; width: 77px; height: 12px; background: url(/nt/images/icon_star04.png) no-repeat 0 0; margin: 2px 0 0 10px;} span.star05 { display: block; float: left; width: 77px; height: 12px; background: url(/nt/images/icon_star05.png) no-repeat 0 0; margin: 2px 0 0 10px;} .grid_list td > span.complete {display: inline-block; border: 1px solid #bbbbbb; width: 53px; height: 32px; line-height: 32px; background-color: #fff; } .grid_list td > span.incomplete {display: inline-block; border: 1px solid #bbbbbb; width: 53px; height: 32px; line-height: 32px; background-color: #bbbbbb; color: #fff; } .grid_list td > span.incomplete {display: inline-block; border: 1px solid #bbbbbb; width: 53px; height: 32px; line-height: 32px; background-color: #bbbbbb; color: #fff; } .grid_list td > span.ok {display: inline-block; width: 50px; height: 40px; background: #78cbc0;line-height: 40px; border-radius: 5px; color: #fff; } .grid_list td > span.wait {display: inline-block; width: 50px; height: 40px; background: #aea39c;line-height: 40px; border-radius: 5px; color: #fff; } a {text-decoration:none; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: none; } a:focus { text-decoration: none; } a:active { text-decoration: none; } .grid_notice table {width: 100%; border-collapse: collapse; } .grid_notice {border-top: 1px solid #636363;} .grid_notice th {font-size: 13px; color: #323949; padding: 20px 0; border-bottom: 1px solid #d6d6d6; vertical-align: middle;} .grid_notice th.bg {background-color: #f6f6f6;} .grid_notice th.bg p.txt {font-size: 16px; font-weight: bold; margin: 4px 0 0 20px;} .grid_notice th.bg p.txt2 {font-size: 16px; font-weight: bold; margin: 4px 20px 0 20px; text-align: left;} .grid_notice th.bg p.chk_txt {font-size: 14px; margin: 8px 0 0 20px;} .grid_notice td {color: #555555; padding: 20px 0 20px 7px; border-bottom: 1px solid #d6d6d6; vertical-align: middle;} .grid_notice td.title { padding: 20px 30px; border-bottom: 1px solid #636363; background-color: #f8f8f8; font-size: 14px; font-weight: bold; color: #de4f41; } .grid_notice td.contents { background-color: #f6f6f6; text-align: center; padding: 32px 0 35px 0; border-bottom: none; font-size: 13px; font-weight: bold; color: #323949; line-height: 250%;} .grid_notice td.contents p > span {color: #13a69c; font-size: 18px;} .grid_notice td.ta_l { padding: 20px 0 20px 17px;} .grid_notice td.ta_c {text-align: center;} .grid_notice td.contents2 {line-height: 200%; padding: 30px 17px 30px 17px; position: relative;} .grid_notice td ul.course_check { border-top: 1px solid #E8E8E8;} .grid_notice td ul.course_check li {overflow: hidden; border-bottom:1px solid #E8E8E8;} .grid_notice td ul.course_check li > p {float: left;} .grid_notice td ul.course_check li > p.txt01 {background-color: #1cbbb5; width: 150px; text-align: center; padding: 15px 0; color: #fff;} .grid_notice td ul.course_check li > p.txt02 {width: 766px; padding: 15px 15px; background-color: #fafafa;} p.sub_title {background: url(/nt/images/icon02.png) no-repeat 0 5px; font-size: 17px; font-weight: 700; color: #131313; padding-left: 20px; letter-spacing:-1px; } p.sub_title_data {background: url(/nt/images/icon02.png) no-repeat 0 5px; font-size: 17px; font-weight: 700; color: #131313; padding-left: 20px; letter-spacing:-1px; } p.sub_title3 {font-size: 17px; font-weight: bold; color: #1cbbb5; } @media screen and (-webkit-min-device-pixel-ratio:0){ .grid_notice th.bg {background-color: #ebebeb;} .text_write {height: 32px; background-color: #ebebeb; border: 1px solid #dedede; padding: 0 0 0 7px;} .text_write2 {height: 32px; background-color: #fff; border: 1px solid #dedede; padding: 0 0 0 7px;} .text_write3 {height: 32px; background-color: #fff; border: 1px solid #bab9b9; padding: 0 0 0 7px; } }