2023/10/11 2023 찾교 메인 수정

This commit is contained in:
subsub 2023-10-11 14:34:25 +09:00
parent 1c39becb1a
commit e9fd4d5831
26 changed files with 907 additions and 112 deletions

View File

@ -18,7 +18,8 @@ header.on::after{top: 130px; opacity: 1;}
header.on::before{opacity: 1;}
header.scroll{box-shadow: 0 5px 8px rgba(0,0,0,0.15);}
.gnb_wrap{width: 100%; background-color: #eef0f3; height: 40px; overflow: hidden; padding: 0 20px; border-bottom: 1px solid #e2e4e6; box-sizing: border-box;}
/* .gnb_wrap{width: 100%; background-color: #eef0f3; height: 40px; overflow: hidden; padding: 0 20px; border-bottom: 1px solid #e2e4e6; box-sizing: border-box;} */
.gnb_wrap{width: 100%; background-color: #fff; height: 40px; overflow: hidden; padding: 0 20px; border-bottom: 1px solid #e2e4e6; box-sizing: border-box;}
.gnb_wrap .inner{max-width: 1400px; width: 100%; height: 100%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;}
.gnb_wrap .site {padding: 8px 20px; background-color: #f5680b ; height: 100%; box-sizing: border-box; vertical-align: middle;}
.gnb_wrap .site span{display: inline-block; vertical-align: middle; font-size: 13px; font-weight: 600; padding: 0 4px; box-sizing: border-box; background-color: #fff; color: #f5680b; border-radius: 5px; margin-left: 10px; transition: background-color 0.3s ease;}
@ -153,7 +154,8 @@ header.scroll{box-shadow: 0 5px 8px rgba(0,0,0,0.15);}
.navigation .list > li .navi_depth li a:focus {font-weight:500;color:#ff6009;background:#fff3ec;}
/* footer */
footer{width: 100%; background-color: #eef0f3; position: relative; padding: 0 10px; box-sizing: border-box; color: #666; position: relative; margin: 80px auto 0 auto;}
/* footer{width: 100%; background-color: #eef0f3; position: relative; padding: 0 10px; box-sizing: border-box; color: #666; position: relative; margin: 80px auto 0 auto;} */
footer{width: 100%; background-color: #fff; position: relative; padding: 0 10px; box-sizing: border-box; color: #666; position: relative; margin: 0 auto 0 auto;}
footer::before { content: ""; width: 100%; height: 50px; border-top: 1px solid #d5d5d5; border-bottom: 1px solid #d5d5d5; position: absolute; top: 0; left: 0;}
footer .site ul {display: flex; height: 50px; align-items: center;}
footer .inner{max-width: 1400px; width: 100%; margin: 0 auto; }

View File

@ -0,0 +1,285 @@
body {color: #222;}
.clearfix::after{display:block;content:"";clear:both;}
.skip_menu {position:absolute; left:0; top:0; width:100%; margin:0 auto; z-index:999;}
.skip_menu a{display:block; position:absolute; left:0; padding:10px 20px; height: 50px; line-height:30px; color:#fff; background:#000;width:100%;text-align:center;font-size: 18px;box-sizing: border-box;}
.skip_menu a:link,.skip_menu a:visited,.skip_menu a:active{top:-10000px;}
.skip_menu a:hover,.skip_menu a:focus{top:0;}
.logo img {width: 200px;}
/* header */
header{width: 100%; height: 130px; position: fixed; top: 0; left: 0; transition: height .4s ease-in-out, background-color .4s ease-in-out, margin .4s ease-in-out; overflow: hidden; box-sizing: border-box;z-index: 20; background-color: #fff;}
header.on{background-color: #fff; box-shadow: 0 3px 10px rgba(0,0,0,0.1);}
header::before{position: absolute; content: " "; display: block; top: 130px; left: 0; height: 1px; background-color: #ddd; opacity: 0; transition: opacity .4s ease-in-out;}
header::after{position: absolute; content: " "; display: block; width: 100%; height: 1px; background-color: #d5d5d5; top: 130px; left: 0; opacity: 0; transition: opacity .4s ease-in-out;}
header.on::after{top: 130px; opacity: 1;}
header.on::before{opacity: 1;}
header.scroll{box-shadow: 0 5px 8px rgba(0,0,0,0.15);}
.gnb_wrap{width: 100%; background-color: #eef0f3; height: 40px; overflow: hidden; padding: 0 20px; border-bottom: 1px solid #e2e4e6; box-sizing: border-box;}
.gnb_wrap .inner{max-width: 1400px; width: 100%; height: 100%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;}
.gnb_wrap .site {padding: 8px 20px; background-color: #f5680b ; height: 100%; box-sizing: border-box; vertical-align: middle;}
.gnb_wrap .site span{display: inline-block; vertical-align: middle; font-size: 13px; font-weight: 600; padding: 0 4px; box-sizing: border-box; background-color: #fff; color: #f5680b; border-radius: 5px; margin-left: 10px; transition: background-color 0.3s ease;}
.gnb_wrap .site:hover {background-color: #e86016; transition: background-color 0.3s ease;}
.gnb_wrap .area_right *{display: inline-block;}
.gnb_wrap .area_right a,.gnb_wrap .area_right .login_after{height: 25px; font-size: 14px; color: #717171; font-weight: 400; line-height: 1.6; letter-spacing: -0.45px; vertical-align: unset;}
.gnb_wrap .area_right .login_after{padding-right: 20px; text-align: right; position: relative;}
.gnb_wrap .area_right .login_info {position: relative;}
.gnb_wrap .area_right .login_after + .login_info {padding-right:20px;}
.gnb_wrap .area_right .login_after + .login_info::before {right:7px;}
.gnb_wrap .area_right .header_login_wrap {padding-right: 33px;}
.gnb_wrap .area_right a i {display: inline-block; background-repeat: no-repeat; vertical-align: middle; margin-bottom: 2px; margin-right: 5px;}
.gnb_wrap .area_right .header_login i {background-image: url(../images/common/headerTop_icon1.png); width: 11px; height: 15px;}
.gnb_wrap .area_right .header_join {padding-right: 22px;margin:0 -10px 0 0;}
.gnb_wrap .area_right .header_join i {background-image: url(../images/common/headerTop_icon3.png); width: 14px; height: 15px;}
.gnb_wrap .area_right a:hover{text-decoration: underline;}
.gnb_wrap .area_right .login_info::before,.gnb_wrap .area_right .login_after::before{position: absolute; content: " ";width: 1px; height: 13px; background-color: #dbdbdb; top: 50%; right: 13px; transform: translateY(-50%);}
.gnb_wrap .area_right .login_after::before {right:7px;}
.gnb_wrap .area_right .login_info:last-of-type:before{display: none;}
.gnb_wrap .area_left p{display: inline-block;background-color: #fff; height: 40px; border-right: 1px solid #e5e5e5; font-size: 15px; color: #444; padding: 0 15px; vertical-align: middle; line-height: 36px;margin: 0 0 0 -4px;}
.gnb_wrap .btn_util {margin:0 0 0 10px;}
.gnb_wrap .btn_util button{width: 40px; height: 40px; vertical-align: middle; background-repeat: no-repeat; background-position: center; border-left: 1px solid #e2e4e6; }
.gnb_wrap .btn_util button:hover{box-shadow: 0 0 5px rgba(0,0,0,.15);}
.gnb_wrap .btn_util .btn_minus{margin-right: -5px; background-image: url(../images/common/headerTop_btn1.png);}
.gnb_wrap .btn_util .btn_plus{background-image: url(../images/common/headerTop_btn2.png); border-right: 1px solid #e2e4e6;}
.header{padding: 0 20px; box-sizing: border-box;}
.header_inner{max-width: 1400px; width: 100%; height: 90px; display: flex; align-items: center; justify-content: space-between; margin: 0 auto; position: relative;}
.header_inner .area_right{display: flex;}
.header_inner .nav_wrap{box-sizing: border-box; height: 100%; width: 100%; margin: 0 50px;}
.header_inner #menu{width: 100%; margin: 0 auto; height: 100%;}
.header_inner .depth01 {display: flex; height: 100%;}
.header_inner .dep_li_01,.header_inner .dep_li_02,.header_inner .dep_li_03 {justify-content:flex-start;}
.header_inner .dep_li_04,.header_inner .dep_li_05,.header_inner .dep_li_06,.header_inner .dep_li_07 {justify-content:space-between;}
.header_inner .depth01_li{position: relative; padding: 0; box-sizing: border-box;}
.header_inner .dep_li_04 .depth01_li{width: calc((100% - 40px)/4);}
.header_inner .dep_li_01 .depth01_li{width: 100%;}
.header_inner .dep_li_02 .depth01_li{width: calc((100% - 20px)/2);}
.header_inner .dep_li_03 .depth01_li{width: calc((100% - 30px)/3);max-width:270px;}
.header_inner .dep_li_05 .depth01_li{width: calc(100%/5);}
.header_inner .dep_li_06 .depth01_li{width: calc((100% - 60px)/6);}
.header_inner .dep_li_07 .depth01_li{width: auto;}
.header_inner .menu_link{font-size: 20px; font-weight: 600; letter-spacing: -0.5px; display: flex; align-items: center; justify-content: center; flex-flow: column; height: 100%; position: relative;font-family: 'nanumsquare', 'Noto Sans KR', sans-serif; line-height: 1.25;}
.header_inner .menu_link::before{position: absolute; content: " "; display: block; width: 0; height: 4px; background-color: #E95504; left: 50%; transform: translateX(-50%); transition: width .4s ease-in-out; top: 87px; z-index: 1;}
.header_inner .menu_link .menu_link_br {color: #E95504;font-family: 'nanumsquare', 'Noto Sans KR', sans-serif; }
.header_inner .on .menu_link{color: #E95504;}
.on .nav_wrap .on .menu_link::before{width: 100%;}
.header_inner .depth02{position: absolute; text-align: center; padding: 15px 0; width: 100%; left: 50%; transform: translateX(-50%);border-right: 1px solid #d5d5d5;}
.header_inner .depth01_li:first-child .depth02{border-left: 1px solid #d5d5d5;}
.header_inner .depth01_li:hover .depth02::after{position:absolute;content:"";width:calc(100% + 4px);height:100%;background-color:#fff8f4;left:-2px;top:0;}
.header_inner .depth01_li:hover .depth02 li{position:relative;z-index:1;}
.header_inner .depth02 a{font-size: 17px; font-weight: 300; line-height: 1.3; height: 45px; display: flex; align-items: center; justify-content: center; word-break: keep-all;white-space:nowrap;}
.header_inner .depth02 a:hover,.header_inner .depth02 a:focus{color: #E95504;font-weight:500;}
.header_inner button{width: 27px; height: 26px; background-repeat: no-repeat;}
.header_inner .btn_search{background-image: url(../images/common/btn_search.png); margin-right: 25px; margin-top: -2px;}
.header_inner .btn_menu{background-image: url(../images/common/btn_menu.png);}
.header_inner button.btn_mobile{display: none; margin: 0 8px; vertical-align: middle; margin-top: -2px;height:100%;background-position:center center;}
.header_inner .btn_login{background-image: url(../images/common/m_headerTop_icon1.png);background-size:21px auto;}
.header_inner .btn_logout{background-image: url(../../../../kccadrPb/usr/image/common/btn_logout.png);}
.header_inner .btn_join{width: 35px; background-image: url(../images/common/m_headerTop_icon2.png);background-size:26px auto;}
.header_inner .btn_usredit{width: 35px; background-image: url(../../../../kccadrPb/usr/image/common/btn_usredit.png);}
.header_inner .m_header_login,
.header_inner .m_header_join {display:none;}
/* //header */
/* full menu */
.full_menu{visibility: hidden; width: 100%; position: fixed; background-color: #eef0f3; min-height: 500px; padding: 100px 50px 50px 50px; box-sizing: border-box; top: -500px; transition: top 0.5s ease, box-shadow 0.3s ease; z-index: 21; border-radius: 0 0 20px 20px;}
.full_menu.on{visibility: visible; top: 0; box-shadow: 0 5px 8px rgba(0,0,0,0.3);}
.full_menu .inner{display: flex; max-width: 1400px; width: 100%; position: relative; margin: 0 auto; justify-content: space-between; align-items: flex-start;}
.full_menu .logo{width: 230px;}
.full_menu .logo img{width: 220px;}
.full_menu .btn_close{background-image: url(../images/common/btn_close.png); width: 40px; height: 40px; background-repeat: no-repeat; border: 1px solid #ef7b0f; border-radius: 3px; background-position: center;}
.full_menu .btn_close:hover {box-shadow: 0 0 5px rgba(0,0,0,.15); transition: width .4s ease-in-out;}
.full_menu .depth01{width: calc(100% - 500px);}
.full_menu .depth01_li{display: flex; border-bottom: 1px solid #d5d5d5; padding: 20px 0;}
.full_menu .depth01_li:first-child{padding: 0 0 20px 0;}
.full_menu .depth01_li:last-child{border-bottom: 0;}
.full_menu .depth01_li .menu_link{width:350px;font-size: 22px; font-weight: 500; color: #222;}
.full_menu .depth01_li:hover .menu_link,.full_menu .depth01_li .depth02 li:hover{color: #e95504;}
.full_menu .depth01_li .depth02 li:hover{font-weight: 500;}
.full_menu .depth01_li .depth02{display: flex; width: calc(100% - 350px); font-size: 18px; font-weight: 300; color: #666; justify-content: space-between;}
/* .full_menu .depth01 .menu_link{font-size: 20px; font-weight: 500; color: #ea5404; position: relative; padding-bottom: 25px; letter-spacing: -1px; text-align: center; height: 40px;}
.full_menu .depth01 .menu_link>span {display: block; padding-top: 5px;}
.full_menu .depth01 .menu_link::before{position: absolute; content: " "; width: 75px; height: 3px; background-color: #ea5404; left: 50%; bottom: 0; transform: translateX(-50%);}
.full_menu .depth02{margin-top: 10px;}
.full_menu .depth02 a{height: 40px; display: flex; align-items: center; justify-content: center; letter-spacing: -1px; font-size: 17px; font-weight: 400;}
.full_menu .depth02 a:hover {font-weight: 700;}
.full_menu .link{display: inline-block; width: 16px; height: 16px; background-image: url(../images/common/link_icon.png);background-repeat: no-repeat; margin-left: 6px;} */
/* //full menu */
/* moblie menu */
#m_menu{visibility: hidden; height: 0;}
/* //moblie menu */
/* path */
.path {width: 100%; background-color: #ebedf2; height: 50px;}
.path .pathedfr {max-width: 1400px; padding: 0 10px; margin: 0 auto; box-sizing: border-box;}
.path .pathedfr ul {display: flex; align-items: center; height: 50px;}
.path .pathedfr ul li {align-self: center; font-size: 16px; color: #666; font-weight: 300;}
.path .pathedfr ul li:nth-child(even) {color: #666; font-size: 14px; margin: 0 8px;}
.path .pathedfr ul li.home i {background-image: url(../images/common/home_icon.png); width: 19px; height: 17px; display: inline-block; margin-bottom: -2px; margin-right: 10px;}
.path .m_pathedfr {display:none;}
/* snb */
/* .snb {width:230px;} */
.snb > p {color:#333333;font-size:27px; font-weight: 600;font-family: 'nanumsquare', 'Noto Sans KR', sans-serif;}
.snb > h2 > span {color: #e95504; display: block; font-family: 'nanumsquare', 'Noto Sans KR', sans-serif; padding-top: 9px;}
.snb .ssleftxt{width:100%;margin-top:25px;}
.snb .ssleftxt ul li{width: 100%; height: 45px; border-radius: 5px; border: 1px solid #d5d7dc; margin-bottom: 5px; display: table;}
.snb .ssleftxt ul li:last-child {margin-bottom: 0;}
.snb .ssleftxt ul li a{width:100%;height:100%;color:#666;padding:0 15px;box-sizing:border-box; font-size: 18px; display: table-cell; vertical-align: middle; font-weight: 300;}
.snb .ssleftxt ul li a span{font-size: 18px; line-height: 18px;}
.snb .ssleftxt ul li.menu_on{background-color: #ec5908 ; border: 1px solid #ec5908;}
.snb .ssleftxt ul li.menu_on a {color:#fff; background-image: url(../images/common/arrow.png); background-repeat: no-repeat; background-position: 91% 50%;}
/*// snb */
.navigation {height:50px;border-bottom:1px solid #d5d5d5;}
.container .navigation .inner{margin: 0 auto;}
.navigation .list {border-left:1px solid #d5d5d5;}
.navigation .list:after {content:'';display:block;clear:both;}
.navigation .list > li {position:relative;float:left;border-right:1px solid #d5d5d5;}
.navigation .list > li:first-child {border-left:1px solid #d5d5d5;}
.navigation .list > li.home {display:none;border-left:1px solid #d5d5d5;}
.navigation .list > li.home a {display:block;width:49px;height:50px;font-size:0;text-indent:-9999em;background:url(../images/content/select.png) no-repeat center center;}
.navigation .list > li .navi_title {position:relative;width:230px;padding:0 20px;font-size:16px;line-height:50px;text-align:left;color:#555;box-sizing:border-box;}
.navigation .list > li .navi_title:after {content:'';position:absolute;right:20px;top:1px;width:18px;height:48px;background:url(../images/content/select.png) no-repeat center center;}
.navigation .list > li .navi_depth {display:none;position:absolute;left:-1px;top:50px;width:100%;border:1px solid #d5d5d5;background:#fff;z-index:2;}
.navigation .list > li .navi_depth li a {display:block;height:40px;padding:0 20px;font-size:16px;line-height:40px;}
.navigation .list > li .navi_depth li a:hover,
.navigation .list > li .navi_depth li a:focus {font-weight:500;color:#ff6009;background:#fff3ec;}
/* footer */
footer{width: 100%; background-color: #eef0f3; position: relative; padding: 0 10px; box-sizing: border-box; color: #666; position: relative; margin: 80px auto 0 auto;}
footer::before { content: ""; width: 100%; height: 50px; border-top: 1px solid #d5d5d5; border-bottom: 1px solid #d5d5d5; position: absolute; top: 0; left: 0;}
footer .site ul {display: flex; height: 50px; align-items: center;}
footer .inner{max-width: 1400px; width: 100%; margin: 0 auto; }
footer .area_top{display: flex; align-items: center; justify-content: space-between; position: relative; padding: 45px 0;}
footer .site{font-size: 16px; position: relative;}
footer .site li{padding: 0 24px; position: relative; font-weight: 400; transition: all 0.3s ease;}
footer .site li::before{position: absolute; content: " "; width: 1px; height: 14px; background-color: #cbced4; top: 50%; right: 0; transform: translateY(-50%);}
footer .site li:last-child::before{display: none;}
footer .site li:first-child{padding-left: 0;}
footer .site li a:hover {text-decoration: underline;}
footer select{width: 204px; height: 40px; border: 1px solid #cbcdd1; background-image: url(../images/common/footer_select.png); background-position: calc(100% - 15px) center; background-repeat: no-repeat; padding: 0 10px; font-size: 15px; color: #666;}
footer .btn_go{width: 50px; height: 40px; border: 1px solid #cbcdd1; background-color: #eaecef; vertical-align: middle; border-radius: 5px; color: #666; transition: all 0.1s linear; font-size: 16px; margin: 0 0 0 4px;}
footer .btn_go:hover{box-shadow: 0 0 5px rgba(0,0,0,0.2); transition: all 0.1s linear;}
footer .logo,footer address{display: inline-block; vertical-align: middle;}
footer .logo{/*padding: 47px 0;*/ transition: all 0.3s ease;}
footer address {font-size: 14px; font-weight: 400; margin-left: -90px; transition: all 0.3s ease;}
footer address p:first-child{margin-bottom: 8px;}
footer .site_go{display: flex;align-items: center;justify-content: space-between;}
footer .wa_mark .wa {width: 110px;margin: 0 40px 0 0;}
/* //footer */
.error_page{width: 100%; height: 100%; margin: 0 auto; text-align: center;}
.error_wrap{border: 1px solid #d5d5d5; display: inline-flex; align-items: center; margin: 200px auto 50px auto; padding: 15px 50px 15px 0; justify-content: center;}
.error_wrap i{display: block; width: 266px; height: 200px; background-image: url(../../../adm/publish/image/warming.jpg); border-right: 1px solid #d5d5d5; }
.error_wrap .text_area{width: calc(100% - 266px); font-size: 20px; padding-left: 30px; text-align: left;}
.error_wrap .text_area p{font-size: 16px; color: #555; margin-top: 10px; line-height: 1.4;}
.error_wrap .error_btn {text-align:center;}
.error_page .error_btn button {background-color:#1b6fcd; color: #fff; padding: 8px 25px; font-size: 16px;}
@media all and (max-width: 1280px){
/* header */
.header_inner .nav_wrap{padding: 0 5px; margin: 0 5px;}
.header_inner .menu_link{font-size: 17px; letter-spacing: -0.25px;}
/* //header */
footer address {width: 36%;}
}
@media all and (max-width: 1024px){
/* moblie menu */
.nav_wrap,#menu{display: none;}
#m_menu{position: fixed; width: 100%; height: 100%; background-color: #fff; box-sizing: border-box; top: 0; right: -100%; transition: all 0.5s ease; z-index: 26;}
#m_menu.on{visibility: visible; right: 0; transition: all 0.5s ease;}
#m_menu .area_top{text-align: right;}
#m_menu .btn_close_wrap {width: 100%; height: 70px; position: absolute; top:0; left: 0; background-color: #ef7b0f;}
#m_menu .btn_close{background-image: url(../images/common/btn_close2.png);background-repeat: no-repeat; background-position: center; width: 40px; height: 40px; border: 1px solid #fff; border-radius: 3px; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);}
#m_menu .btn_close:hover {box-shadow: 0 0 5px rgba(0,0,0,.25);}
#m_menu .depth01{width: 100%; padding: 0 10px; margin-top: 70px;box-sizing: border-box;}
#m_menu .depth01_li{overflow: hidden; height: 60px; transition: height 0.3s linear; display: block; position: relative;}
#m_menu .depth01_li::before{position: absolute; content: " "; width: 100%; height: 1px; background-color: #e5e5e5; opacity: 0;}
#m_menu .depth01_li.on{height: 280px;transition: height 0.3s linear;}
#m_menu .depth01_li.on::before{opacity: 1; bottom: 0;}
#m_menu .menu_tit{font-size: 20px; height: 60px; border-bottom: 1px solid #e5e5e5; width: 100%; text-align: left; padding-left: 20px; position: relative;}
#m_menu .menu_tit::after {background-image: url(../images/common/m_menu_plus.png); background-position: center; background-repeat: no-repeat; width: 36px; height: 36px; content: ""; position: absolute; top: 50%; right: 10px; transform: translateY(-50%);}
#m_menu .menu_tit span {color: #f37632;}
#m_menu .depth01_li.on .menu_tit {border-bottom: 1px solid #f37632; color: #f37632;}
#m_menu .depth02{visibility: hidden; height: 100%; margin: 10px 0; opacity: 0; transition: all 0.3s linear; background-color: #f5f5f5;}
#m_menu .on .depth02{visibility: visible; height: auto; transition: all 0.3s linear; opacity: 1;}
#m_menu .depth02 a{height: 50px; display: flex; align-items: center; padding-left: 20px; font-size: 17px;}
/*// moblie menu */
.snb {display: none;}
.header_inner button.btn_mobile {display:block;}
/* footer */
footer .area_top {align-items: flex-start; padding: 40px 0 90px 0;}
footer address {width: 72%}
footer .wa_mark {position: absolute; bottom: 6px; right: 0;}
footer .site_go {position: absolute; bottom: 23px; left: 0;}
}
@media screen and (max-width: 767px){
/* header */
header {height:70px;border-bottom:1px solid #e2e4e6;box-sizing:border-box;}
header .gnb_wrap {overflow:visible;height:0;border:0;}
header .gnb_wrap .site,
header .gnb_wrap .btn_util {display:none;}
header .gnb_wrap .area_right, .gnb_wrap .area_left p {display:none;}
header .header {padding:0 8px 0 10px;}
header .header .header_inner {height:70px;}
header .header .header_inner h1 a {display:flex;height:70px;align-items:center;}
header .header .header_inner h1 a img {height:43px;}
header .header .header_inner .area_right {height:100%;}
header .header .header_inner .area_right .btn_search {display:none;}
header .header .header_inner .area_right .btn_menu {width:35px;height:100%;background-image:url(../images/common/m_btn_menu.png);background-size:29px 21px;background-position:center center;}
header .header .header_inner .area_right .m_header_login {display:flex;width:40px;height:100%;margin:0 5px 0 0;padding:0;font-size:0;align-items:center;justify-content:center;text-indent:-9999em;z-index:1;}
header .header .header_inner .area_right .m_header_login i {width:21px;height:28px;margin:0;background-image:url(../images/common/m_headerTop_icon1.png);background-size:21px auto;}
header .header .header_inner .area_right .m_header_join {display:flex;width:40px;height:100%;margin:0 5px 0 0;padding:0;font-size:0;align-items:center;justify-content:center;text-indent:-9999em;z-index:1;}
header .header .header_inner .area_right .m_header_join i {width:26px;height:28px;margin:0;background-image:url(../images/common/m_headerTop_icon2.png);background-size:26px auto;}
.path {height:50px;background:#f5680b;}
.path .pathedfr {display:none;}
.path .m_pathedfr {display:block;}
.path .m_pathedfr > ul:after {content:'';display:block;clear:both;}
.path .m_pathedfr > ul > li {position:relative;float:left;width:50%;height:100%;border-left:1px solid #fcae83;box-sizing:border-box;}
.path .m_pathedfr > ul > li:first-child {border:0 none;}
.path .m_pathedfr > ul > li .path_btn {position:relative;display:block;width:100%;height:50px; padding:0 0 0 10px;font-size:18px;text-align:left;color:#fff;}
.path .m_pathedfr > ul > li .path_btn:after {content:'';position:absolute;right:15px;top:0; width:18px;height:50px;background:url(../images/common/path_btn_arrow.png) no-repeat left top;}
.path .m_pathedfr > ul > li .path_btn.active:after {transform:rotate(180deg);}
.path .m_pathedfr > ul > li ul {display:none;position:absolute;left:0;top:50px;width:100%; padding:3px 0;border-top:1px solid #fcae83;background:#fb8b4e;box-sizing:border-box;}
.path .m_pathedfr > ul > li ul li a {display:block;padding:0 0 0 10px;font-size:16px;line-height:35px;color:#fff;}
.container .navigation .inner {padding:0;}
.navigation .list > li {width: calc((100% - 2px)/2);}
.navigation .list > li .navi_title{width: 100%;}
/* footer */
footer .site {margin:0 -10px;}
footer .site ul {justify-content:center;}
footer .site ul li {padding:0 10px;font-size:14px;text-align:center;}
footer .site ul li:first-child {padding:0 10px;}
footer .area_top {display:block;padding:20px 10px;}
footer .area_top .logo {display:block;}
footer .area_top .logo a {display:block;}
footer .area_top .logo a img {width:140px;}
footer .area_top address {display:block; width: 100%; margin:15px 0 80px 0;}
footer .area_top address p {margin:0 0 4px;font-size:14px;line-height:20px;}
footer .area_top .site_go {left:initial;right:0;top:20px;width:calc(100% - 165px);}
footer .area_top .site_go:after {content:'';display:block;clear:both;}
footer .wa_mark {left: 0; bottom: 12px;}
footer .area_top .site_go select {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;float:left;width:calc(100% - 45px);height:35px;padding:0 35px 0 15px;font-size:14px;background-size:10px;}
footer .area_top .site_go .btn_go {float:right;width:40px;height:35px;font-size:14px;}
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){
.header_inner .area_right{/* width: 80px; */justify-content: space-between;}
.header_inner .btn_search{margin-right: 0;}
}

View File

@ -5,6 +5,13 @@
@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');
/* G market sans */
@font-face {
font-family: 'GmarketSansMedium';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'GmarketSansBold';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');

View File

@ -1,89 +1,90 @@
.main {margin-top:130px;}
.main {margin-top:130px;background-color:#eef0f4;padding:0 0 80px 0;}
.main .inner {max-width:1400px;width:100%;margin:0 auto;display:flex;justify-content: space-between;flex-wrap: wrap;box-sizing: border-box;}
/* visual */
.renewal .visual_slide{position:relative;width:calc(100% - 120px);height:550px;background-color: #f5f5f5;margin:0 auto;border-radius:20px;z-index:0;overflow:hidden;}
.renewal .visual_slide{position:relative;width:100%;height:590px;background-color: #eef0f4;margin:0 auto;z-index:0;overflow:hidden;}
.renewal .visual_slide .swiper-slide .inner{width:100%;}
.renewal .visual_slide .swiper-slide .inner .text_area{height:auto;padding:80px 0 0 40px;box-sizing:border-box;}
.renewal .visual_slide .swiper-slide .inner .text_area *{line-height: 1.4;}
.renewal .visual_slide .swiper-slide .inner .text_area .sub_title{font-size:24px;font-family:'GmarketSansMedium';color:#fff;}
.renewal .visual_slide .swiper-slide .inner .text_area .title{font-size:50px;font-family:'GmarketSansBold';color:#ffe400;}
.renewal .visual_slide .swiper-slide .inner .text_area .summary{font-size:18px;color:#fff;}
.renewal .visual_slide .swiper-slide .inner .text_area a{display:flex;width:175px;height:50px;font-size: 18px;color:#fff;border:1px solid #fff;padding:0 20px;margin:42px 0 0 0;border-radius:26px;align-items:center;justify-content:space-between;box-sizing:border-box;}
.renewal .visual_slide .slide_control{position:relative;left:40px;bottom:150px;width:100%;}
.renewal .visual_slide .slide_control .inner{position:relative;justify-content:flex-start;align-items:center;}
.renewal .visual_slide .swiper-slide .inner .text_area{height:auto;padding:63px 0 0 40px;margin:0 auto;box-sizing:border-box;text-align:center;}
.renewal .visual_slide .swiper-slide .inner .text_area *{line-height: 1.4;color:#182448;}
.renewal .visual_slide .swiper-slide .inner .text_area .sub_title{font-size:20px;font-family:'GmarketSansMedium';}
.renewal .visual_slide .swiper-slide .inner .text_area .title{font-size:52px;font-family:'GmarketSansBold';}
.renewal .visual_slide .swiper-slide .inner .text_area .summary{font-size:18px;}
.renewal .visual_slide .swiper-slide .inner .text_area a{display:flex;width:145px;height:38px;font-size: 18px;color:#182448;background-color:#fff;padding:0 20px;margin:33px auto 0 auto;border-radius:26px;align-items:center;justify-content:space-between;box-sizing:border-box;}
.renewal .visual_slide .slide_control{position:relative;width:100%;bottom:20px;}
.renewal .visual_slide .slide_control .inner{position:relative;justify-content:center;align-items:center;}
.renewal .visual_slide .slide_control .swiper-pagination{position: relative;}
.renewal .visual_slide .slide_control .swiper-pagination-bullet{background-color:#fff;opacity:0.5;margin:0 4px;}
.renewal .visual_slide .slide_control .swiper-pagination-bullet{background-color:#19222d;opacity:0.5;margin:0 4px;}
.renewal .visual_slide .slide_control .swiper-pagination-bullet-active{opacity:1;}
.renewal .visual_slide .slide_control .slide_pause,.renewal .visual_slide .slide_control .slide_play{position:relative;width:8px;height:10px;z-index:10;margin: 5px 0 0 8px;}
.renewal .visual_slide .slide_control .slide_pause{background:url(/offeduadvc/visitEdu/usr/publish/images/main/btn_main_visual_pause.png);}
.renewal .visual_slide .slide_control .slide_play{background:url(/offeduadvc/visitEdu/usr/publish/images/main/btn_main_visual_play.png);}
.renewal .visual_slide .btn_prev_slide,.renewal .visual_slide .btn_next_slide{position:absolute;width:50px;height:50px;text-indent:-9999em;overflow:hidden;top:50%;z-index:10;transform:translateY(-50%);}
.renewal .visual_slide .btn_prev_slide{background:url(/offeduadvc/visitEdu/usr/publish/images/main/btn_main_visual_arrow_right.png) no-repeat;left:77px;}
.renewal .visual_slide .btn_next_slide{background:url(/offeduadvc/visitEdu/usr/publish/images/main/btn_main_visual_arrow_left.png) no-repeat;left:calc(100% - 97px);}
.renewal .visual_slide .swiper-slide[aria-label="1 / 5"]{background:url(/offeduadvc/visitEdu/usr/publish/images/main/main_visual_01.jpg);}
.renewal .visual_slide .swiper-slide[aria-label="2 / 5"]{background:url(/offeduadvc/visitEdu/usr/publish/images/main/main_visual_02.jpg);}
.renewal .visual_slide .swiper-slide[aria-label="3 / 5"]{background:url(/offeduadvc/visitEdu/usr/publish/images/main/main_visual_03.jpg);}
.renewal .visual_slide .swiper-slide[aria-label="4 / 5"]{background:url(/offeduadvc/visitEdu/usr/publish/images/main/main_visual_04.jpg);}
.renewal .visual_slide .swiper-slide[aria-label="5 / 5"]{background:url(/offeduadvc/visitEdu/usr/publish/images/main/main_visual_05.jpg);}
.renewal .visual_slide .swiper-slide[aria-label="1 / 5"]{background:url(/offeduadvc/visitEdu/usr/publish/images/main/main_visual_01.jpg) no-repeat;}
.renewal .visual_slide .swiper-slide[aria-label="2 / 5"]{background:url(/offeduadvc/visitEdu/usr/publish/images/main/main_visual_02.jpg) no-repeat;}
.renewal .visual_slide .swiper-slide[aria-label="3 / 5"]{background:url(/offeduadvc/visitEdu/usr/publish/images/main/main_visual_03.jpg) no-repeat;}
.renewal .visual_slide .swiper-slide[aria-label="4 / 5"]{background:url(/offeduadvc/visitEdu/usr/publish/images/main/main_visual_04.jpg) no-repeat;}
.renewal .visual_slide .swiper-slide[aria-label="5 / 5"]{background:url(/offeduadvc/visitEdu/usr/publish/images/main/main_visual_05.jpg) no-repeat;}
/* main_banner_link */
.renewal .main_banner_link{position:relative;height:130px;background-color:#fff;border-radius:10px;box-shadow:0 0 5px rgba(45,55,90,0.2);margin:-65px auto 70px auto;}
.renewal .main_banner_link li{position:relative;display:flex;width:calc(100%/5);height:100%;align-items:center;transition:all 0.3s ease-in-out;}
.renewal .main_banner_link{position:relative;height:130px;margin:60px auto 70px auto;}
.renewal .main_banner_link li{position:relative;display:flex;width:calc((100%/5) - 12px);height:100%;background-color:#fff;border-radius:5px;box-shadow:0 0 5px rgba(45,55,90,0.2);align-items:center;transition:all 0.3s ease-in-out;}
.renewal .main_banner_link li::after{position:absolute;content:" ";width: calc(100% + 10px);height:calc(100% + 10px);border:3px solid transparent;left:-8px;border-radius:10px;}
.renewal .main_banner_link li:hover{z-index: 15;}
.renewal .main_banner_link li:hover::after{border:3px solid #e95504;background-color:#fff;box-shadow:0 0 15px rgba(233,85,4,0.3);}
.renewal .main_banner_link li a{position:relative;width:100%;text-align:center;z-index:15;}
.renewal .main_banner_link li a::after{position:absolute;content:" ";width:1px;height:92px;background-color:#d5d5d5;right:0;top:50%;transform:translateY(-50%);}
.renewal .main_banner_link li:last-child a::after{display:none;}
.renewal .main_banner_link li:hover a::after{display:none;}
.renewal .main_banner_link i{display:block;width:68px;height:68px;margin:0 auto 10px auto;border-radius:100%;background-repeat:no-repeat;}
.renewal .main_banner_link .banner_link_01 i{background-image: url(/offeduadvc/visitEdu/usr/publish/images/main/icon_main_visual_01.png);}
.renewal .main_banner_link .banner_link_02 i{background-image: url(/offeduadvc/visitEdu/usr/publish/images/main/icon_main_visual_02.png);}
.renewal .main_banner_link .banner_link_03 i{background-image: url(/offeduadvc/visitEdu/usr/publish/images/main/icon_main_visual_03.png);}
.renewal .main_banner_link .banner_link_04 i{background-image: url(/offeduadvc/visitEdu/usr/publish/images/main/icon_main_visual_04.png);}
.renewal .main_banner_link .banner_link_05 i{background-image: url(/offeduadvc/visitEdu/usr/publish/images/main/icon_main_visual_05.png);}
.renewal .main_banner_link .banner_link_01 i{background-image:url(/offeduadvc/visitEdu/usr/publish/images/main/icon_main_visual_01.png);}
.renewal .main_banner_link .banner_link_02 i{background-image:url(/offeduadvc/visitEdu/usr/publish/images/main/icon_main_visual_02.png);}
.renewal .main_banner_link .banner_link_03 i{background-image:url(/offeduadvc/visitEdu/usr/publish/images/main/icon_main_visual_03.png);}
.renewal .main_banner_link .banner_link_04 i{background-image:url(/offeduadvc/visitEdu/usr/publish/images/main/icon_main_visual_04.png);}
.renewal .main_banner_link .banner_link_05 i{background-image:url(/offeduadvc/visitEdu/usr/publish/images/main/icon_main_visual_05.png);}
.renewal .main_banner_link li span{color:#e95504;font-weight:500;}
/* 하단콘텐츠 공통 */
.renewal .wrap .content_wrap{width:calc((100% - 72px)/3);}
.renewal .wrap .content_wrap .content{height:332px;}
.renewal .wrap .content_wrap>.title{display:flex;width:100%;justify-content:space-between;align-items:center;margin:0 0 10px 0;}
.renewal .wrap .content_wrap>.title h3{position:relative;font-size:28px;font-weight:bold;padding:0 0 0 20px;}
.renewal .wrap .content_wrap>.title h3::after{position:absolute;content:" ";width:6px;height:6px;border:3px solid #e95504;border-radius:100%;left:0;top:9px;}
.renewal .wrap .content_wrap .title .btn_plus{width:35px;height:35px;background:url(/offeduadvc/visitEdu/usr/publish/images/main/btn_plus.png) no-repeat center center;text-indent:-9999em;overflow:hidden;border:1px solid #d5d5d5;border-radius:5px;transition:all 0.1s ease-in;}
.renewal .wrap .content_wrap .title .btn_plus:hover{border:1px solid #e95504;background:url(/offeduadvc/visitEdu/usr/publish/images/main/btn_plus_hover.png) no-repeat center center;}
.renewal .wrap .content_wrap .title .btn_plus{display:flex;width:65px;height:30px;background:#fff url(/offeduadvc/visitEdu/usr/publish/images/main/btn_plus.png) no-repeat calc(100% + 4px) center;padding:0 4px 0 8px;overflow:hidden;text-align:left;color:#666;line-height:1.6;border:1px solid #d5d5d5;border-radius:5px;justify-content:flex-start;align-items:center;transition:all 0.1s ease-in;}
.renewal .wrap .content_wrap .title .btn_plus:hover{border:1px solid #e95504;background:#fff url(/offeduadvc/visitEdu/usr/publish/images/main/btn_plus_hover.png) no-repeat calc(100% + 4px) center;color:#e95504;}
/* 공지사항, 교육자료실 */
.renewal .wrap .notice .notice_wrap{height:206px;padding:22px 30px;background-color:#eef0f3;border:1px solid transparent;border-radius:5px;box-sizing:border-box;}
.renewal .wrap .notice .notice_wrap:hover{background-color:#fff;border:1px solid #e5e5e5;box-shadow:0 0 5px rgba(0,0,0,0.2);transition:all 0.3s ease-in-out;}
.renewal .wrap .content_wrap .emphasis{display: inline-flex;justify-content:center;align-items:center;background-color:#e95504;font-weight:400;color:#fff;border-radius:5px;margin:0 8px 0 0;}
.renewal .wrap .content_wrap .notice_wrap .emphasis{width:65px;height:30px;font-size:18px;}
.renewal .wrap .content_wrap .notice_list .emphasis{width:58px;height:26px;font-size:16px;}
.renewal .wrap .content_wrap .notice_wrap dl{margin:0 0 20px 0;}
.renewal .wrap .content_wrap .notice_wrap dt{font-size:22px;font-weight:500;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
.renewal .wrap .content_wrap .notice_wrap dd{font-size:18px;font-weight:400;line-height:1.4;margin:20px 0 0 0;}
.renewal .wrap .content_wrap .date{display:flex;min-width:110px;font-size:16px;color:#666;align-items:center;}
.renewal .wrap .content_wrap .notice_list li:hover .date{color:#e95504;}
.renewal .wrap .content_wrap .date i{display:inline-block;width:18px;height:16px;background:url(/offeduadvc/visitEdu/usr/publish/images/main/icon_main_calendar.png) no-repeat center center;margin:2px 4px 0 0;}
.renewal .wrap .content_wrap .notice_list li:hover .date i{background:url(/offeduadvc/visitEdu/usr/publish/images/main/icon_main_calendar_hover.png) no-repeat center center;transition:all 0.1s ease-in;}
.renewal .wrap .content_wrap .notice_list li{border-bottom: 1px dashed #d5d5d5;}
.renewal .wrap .content_wrap .notice_list li a{display:flex;height:60px;justify-content:space-between;align-items:center;transition:all 0.1s ease-in;}
.renewal .wrap .content_wrap .notice_list li:hover a{color:#e95504;transition:all 0.3s ease-in-out;}
.renewal .wrap .content_wrap .notice_list .title{width: calc(100% - 125px);font-size:18px;font-weight:500;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;line-height: 1.4;}
/* 공지사항 */
.renewal .wrap .notice .content{padding:15px 45px;background-color:#fff;border:1px solid #d5d5d5;border-radius: 5px;box-shadow:0 0 5px rgba(0,0,0,0.15);box-sizing:border-box;}
.renewal .wrap .notice .emphasis{display: inline-flex;width:40px;height:20px;justify-content:center;align-items:center;background-color:#e95504;font-size:14px;font-weight:400;color:#fff;border-radius:5px;margin:0 8px 0 0;}
.renewal .wrap .notice .notice_list li{border-bottom: 1px solid #d5d5d5;}
.renewal .wrap .notice .notice_list li:last-child{border:0;}
.renewal .wrap .notice .notice_list li a{display:flex;height:50px;justify-content:space-between;align-items:center;transition:all 0.1s ease-in;}
.renewal .wrap .notice .notice_list li:hover a{color:#e95504;transition:all 0.15s ease-in-out;}
.renewal .wrap .notice .date{display:flex;min-width:110px;font-size:16px;color:#666;align-items:center;font-weight:300;}
.renewal .wrap .notice .notice_list li:hover .date{color:#e95504;}
.renewal .wrap .notice .date i{display:inline-block;width:4px;height:4px;background:#e95504;margin:2px 6px 0 0;border-radius:100%;}
.renewal .wrap .notice .notice_list .title{width: calc(100% - 115px);font-size:18px;font-weight:500;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;line-height: 1.4;}
/* 자료실 */
.renewal .wrap .data_notice .notice_list{display:flex;height:100%;align-items:stretch;flex-flow:wrap;justify-content:space-between;flex-direction:column;}
.renewal .wrap .data_notice .notice_list li{width:100%;padding:15.5px 45px;background-color:#fff;border:1px solid #d5d5d5;border-radius: 5px;box-shadow:0 0 5px rgba(0,0,0,0.15);box-sizing:border-box;transition:all 0.05s ease-in-out;}
.renewal .wrap .data_notice .notice_list li:hover{border:1px solid #e95504;transition:all 0.05s ease-in-out;}
.renewal .wrap .data_notice .notice_list li .title{font-size: 18px;font-weight:500;align-items:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;line-height:1.2;transition:all 0.05s ease-in-out;}
.renewal .wrap .data_notice .notice_list li .title i{display:inline-block;width:4px;height:4px;background:#e95504;margin:0 6px 5px 0;border-radius:100%;}
.renewal .wrap .data_notice .notice_list li .date{margin:4.5px 0 0 8px;color:#666;font-weight:300;transition:all 0.05s ease-in-out;}
.renewal .wrap .data_notice .notice_list li:hover .title,.renewal .wrap .data_notice .notice_list li:hover .date{color:#e95504;transition:all 0.05s ease-in-out;}
/* 알림판 */
.renewal .wrap .notify .notify_control{display:flex;width:140px;height:35px;}
.renewal .wrap .notify .notify_control>*{position:unset;width:35px;height:35px;font-size:16px;color:#888;text-align:center;line-height:33px;border:1px solid #d5d5d5;letter-spacing:-1.7px;margin: 0 0 0 -1px;}
.renewal .wrap .notify .notify_control>*:first-child{border-radius:5px 0 0 5px;}
.renewal .wrap .notify .notify_control>*:last-child{border-radius:0 5px 5px 0;}
.renewal .wrap .notify .notify_control{display:flex;height:30px;background-color:#fff;border:1px solid #d5d5d5;border-radius:5px;padding:0 4px 0 0;}
.renewal .wrap .notify .notify_control>*{position:unset;width:23px;height:30px;font-size:16px;color:#888;text-align:center;line-height:28px;letter-spacing:-1.7px;margin: 0 0 0 -1px;}
.renewal .wrap .notify .notify_control .slide_number{width:35px;}
.renewal .wrap .notify .notify_control .swiper-button-prev,.renewal .wrap .notify .notify_control .swiper-button-next{background-size:auto;}
.renewal .wrap .notify .notify_control .swiper-button-prev::after,.renewal .wrap .notify .notify_control .swiper-button-next::after{display: none;}
.renewal .wrap .notify .notify_control .swiper-button-prev{background-image:url(/offeduadvc/visitEdu/usr/publish/images/main/btn_arrow_right.png);background-position-x:-2px;border-right:1px solid transparent;}
.renewal .wrap .notify .notify_control .swiper-button-prev{background-image:url(/offeduadvc/visitEdu/usr/publish/images/main/btn_arrow_right.png);background-position-x:-2px;}
.renewal .wrap .notify .notify_control .swiper-button-next{background-image:url(/offeduadvc/visitEdu/usr/publish/images/main/btn_arrow_left.png);}
.renewal .wrap .notify .notify_control .swiper-button-prev:hover,.renewal .wrap .notify .notify_control .swiper-button-next:hover{position:relative;border:1px solid #e95504;border-right:1px solid #e95504;z-index:12;background-color:#fff;left:0;top:0;}
.renewal .wrap .notify .notify_control .swiper-button-prev:hover{background-image:url(/offeduadvc/visitEdu/usr/publish/images/main/btn_arrow_right_hover.png);}
.renewal .wrap .notify .notify_control .swiper-button-next:hover{background-image:url(/offeduadvc/visitEdu/usr/publish/images/main/btn_arrow_left_hover.png);}
.renewal .wrap .notify .notify_control .slide_pause:hover,.renewal .wrap .notify .notify_control .slide_play:hover{background-color: #e95504;border:1px solid #e95504;}
.renewal .wrap .notify .notify_control .slide_pause,.renewal .wrap .notify .notify_control .slide_play{height: 37px;margin: 0 0 0 -0.5px;}
.renewal .wrap .notify .notify_control .slide_pause{background:#b0b0b0 url(/offeduadvc/visitEdu/usr/publish/images/main/btn_pause.png) no-repeat center center;}
.renewal .wrap .notify .notify_control .slide_play{background:#b0b0b0 url(/offeduadvc/visitEdu/usr/publish/images/main/btn_play.png) no-repeat center center;}
.renewal .wrap .notify .content{width:100%;height:388px;overflow: hidden;border-radius:5px;}
.renewal .wrap .notify .notify_control .slide_pause,.renewal .wrap .notify .notify_control .slide_play{height: 30px;margin: 0 0 0 -0.5px;}
.renewal .wrap .notify .notify_control .slide_pause{background:url(/offeduadvc/visitEdu/usr/publish/images/main/btn_pause.png) no-repeat center center;}
.renewal .wrap .notify .notify_control .slide_play{background:url(/offeduadvc/visitEdu/usr/publish/images/main/btn_play.png) no-repeat center center;}
.renewal .wrap .notify .content{width:100%;height:332px;overflow: hidden;border-radius:5px;}

View File

@ -0,0 +1,89 @@
.main {margin-top:130px;}
.main .inner {max-width:1400px;width:100%;margin:0 auto;display:flex;justify-content: space-between;flex-wrap: wrap;box-sizing: border-box;}
/* visual */
.renewal .visual_slide{position:relative;width:calc(100% - 120px);height:550px;background-color: #f5f5f5;margin:0 auto;border-radius:20px;z-index:0;overflow:hidden;}
.renewal .visual_slide .swiper-slide .inner{width:100%;}
.renewal .visual_slide .swiper-slide .inner .text_area{height:auto;padding:80px 0 0 40px;box-sizing:border-box;}
.renewal .visual_slide .swiper-slide .inner .text_area *{line-height: 1.4;}
.renewal .visual_slide .swiper-slide .inner .text_area .sub_title{font-size:24px;font-family:'GmarketSansMedium';color:#fff;}
.renewal .visual_slide .swiper-slide .inner .text_area .title{font-size:50px;font-family:'GmarketSansBold';color:#ffe400;}
.renewal .visual_slide .swiper-slide .inner .text_area .summary{font-size:18px;color:#fff;}
.renewal .visual_slide .swiper-slide .inner .text_area a{display:flex;width:175px;height:50px;font-size: 18px;color:#fff;border:1px solid #fff;padding:0 20px;margin:42px 0 0 0;border-radius:26px;align-items:center;justify-content:space-between;box-sizing:border-box;}
.renewal .visual_slide .slide_control{position:relative;left:40px;bottom:150px;width:100%;}
.renewal .visual_slide .slide_control .inner{position:relative;justify-content:flex-start;align-items:center;}
.renewal .visual_slide .slide_control .swiper-pagination{position: relative;}
.renewal .visual_slide .slide_control .swiper-pagination-bullet{background-color:#fff;opacity:0.5;margin:0 4px;}
.renewal .visual_slide .slide_control .swiper-pagination-bullet-active{opacity:1;}
.renewal .visual_slide .slide_control .slide_pause,.renewal .visual_slide .slide_control .slide_play{position:relative;width:8px;height:10px;z-index:10;margin: 5px 0 0 8px;}
.renewal .visual_slide .slide_control .slide_pause{background:url(/offeduadvc/visitEdu/usr/publish/images/main/btn_main_visual_pause.png);}
.renewal .visual_slide .slide_control .slide_play{background:url(/offeduadvc/visitEdu/usr/publish/images/main/btn_main_visual_play.png);}
.renewal .visual_slide .swiper-slide[aria-label="1 / 5"]{background:url(/offeduadvc/visitEdu/usr/publish/images/main/main_visual_01.jpg);}
.renewal .visual_slide .swiper-slide[aria-label="2 / 5"]{background:url(/offeduadvc/visitEdu/usr/publish/images/main/main_visual_02.jpg);}
.renewal .visual_slide .swiper-slide[aria-label="3 / 5"]{background:url(/offeduadvc/visitEdu/usr/publish/images/main/main_visual_03.jpg);}
.renewal .visual_slide .swiper-slide[aria-label="4 / 5"]{background:url(/offeduadvc/visitEdu/usr/publish/images/main/main_visual_04.jpg);}
.renewal .visual_slide .swiper-slide[aria-label="5 / 5"]{background:url(/offeduadvc/visitEdu/usr/publish/images/main/main_visual_05.jpg);}
/* main_banner_link */
.renewal .main_banner_link{position:relative;height:130px;background-color:#fff;border-radius:10px;box-shadow:0 0 5px rgba(45,55,90,0.2);margin:-65px auto 70px auto;}
.renewal .main_banner_link li{position:relative;display:flex;width:calc(100%/5);height:100%;align-items:center;transition:all 0.3s ease-in-out;}
.renewal .main_banner_link li::after{position:absolute;content:" ";width: calc(100% + 10px);height:calc(100% + 10px);border:3px solid transparent;left:-8px;border-radius:10px;}
.renewal .main_banner_link li:hover{z-index: 15;}
.renewal .main_banner_link li:hover::after{border:3px solid #e95504;background-color:#fff;box-shadow:0 0 15px rgba(233,85,4,0.3);}
.renewal .main_banner_link li a{position:relative;width:100%;text-align:center;z-index:15;}
.renewal .main_banner_link li a::after{position:absolute;content:" ";width:1px;height:92px;background-color:#d5d5d5;right:0;top:50%;transform:translateY(-50%);}
.renewal .main_banner_link li:last-child a::after{display:none;}
.renewal .main_banner_link li:hover a::after{display:none;}
.renewal .main_banner_link i{display:block;width:68px;height:68px;margin:0 auto 10px auto;border-radius:100%;background-repeat:no-repeat;}
.renewal .main_banner_link .banner_link_01 i{background-image:url(/offeduadvc/visitEdu/usr/publish/images/main/icon_main_visual_01.png);}
.renewal .main_banner_link .banner_link_02 i{background-image:url(/offeduadvc/visitEdu/usr/publish/images/main/icon_main_visual_02.png);}
.renewal .main_banner_link .banner_link_03 i{background-image:url(/offeduadvc/visitEdu/usr/publish/images/main/icon_main_visual_03.png);}
.renewal .main_banner_link .banner_link_04 i{background-image:url(/offeduadvc/visitEdu/usr/publish/images/main/icon_main_visual_04.png);}
.renewal .main_banner_link .banner_link_05 i{background-image:url(/offeduadvc/visitEdu/usr/publish/images/main/icon_main_visual_05.png);}
.renewal .main_banner_link li span{color:#e95504;font-weight:500;}
/* 하단콘텐츠 공통 */
.renewal .wrap .content_wrap{width:calc((100% - 72px)/3);}
.renewal .wrap .content_wrap>.title{display:flex;width:100%;justify-content:space-between;align-items:center;margin:0 0 10px 0;}
.renewal .wrap .content_wrap>.title h3{position:relative;font-size:28px;font-weight:bold;padding:0 0 0 20px;}
.renewal .wrap .content_wrap>.title h3::after{position:absolute;content:" ";width:6px;height:6px;border:3px solid #e95504;border-radius:100%;left:0;top:9px;}
.renewal .wrap .content_wrap .title .btn_plus{width:35px;height:35px;background:url(/offeduadvc/visitEdu/usr/publish/images/main/btn_plus.png) no-repeat center center;text-indent:-9999em;overflow:hidden;border:1px solid #d5d5d5;border-radius:5px;transition:all 0.1s ease-in;}
.renewal .wrap .content_wrap .title .btn_plus:hover{border:1px solid #e95504;background:url(/offeduadvc/visitEdu/usr/publish/images/main/btn_plus_hover.png) no-repeat center center;}
/* 공지사항, 교육자료실 */
.renewal .wrap .notice .notice_wrap{height:206px;padding:22px 30px;background-color:#eef0f3;border:1px solid transparent;border-radius:5px;box-sizing:border-box;}
.renewal .wrap .notice .notice_wrap:hover{background-color:#fff;border:1px solid #e5e5e5;box-shadow:0 0 5px rgba(0,0,0,0.2);transition:all 0.3s ease-in-out;}
.renewal .wrap .content_wrap .emphasis{display: inline-flex;justify-content:center;align-items:center;background-color:#e95504;font-weight:400;color:#fff;border-radius:5px;margin:0 8px 0 0;}
.renewal .wrap .content_wrap .notice_wrap .emphasis{width:65px;height:30px;font-size:18px;}
.renewal .wrap .content_wrap .notice_list .emphasis{width:58px;height:26px;font-size:16px;}
.renewal .wrap .content_wrap .notice_wrap dl{margin:0 0 20px 0;}
.renewal .wrap .content_wrap .notice_wrap dt{font-size:22px;font-weight:500;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
.renewal .wrap .content_wrap .notice_wrap dd{font-size:18px;font-weight:400;line-height:1.4;margin:20px 0 0 0;}
.renewal .wrap .content_wrap .date{display:flex;min-width:110px;font-size:16px;color:#666;align-items:center;}
.renewal .wrap .content_wrap .notice_list li:hover .date{color:#e95504;}
.renewal .wrap .content_wrap .date i{display:inline-block;width:18px;height:16px;background:url(/offeduadvc/visitEdu/usr/publish/images/main/icon_main_calendar.png) no-repeat center center;margin:2px 4px 0 0;}
.renewal .wrap .content_wrap .notice_list li:hover .date i{background:url(/offeduadvc/visitEdu/usr/publish/images/main/icon_main_calendar_hover.png) no-repeat center center;transition:all 0.1s ease-in;}
.renewal .wrap .content_wrap .notice_list li{border-bottom: 1px dashed #d5d5d5;}
.renewal .wrap .content_wrap .notice_list li a{display:flex;height:60px;justify-content:space-between;align-items:center;transition:all 0.1s ease-in;}
.renewal .wrap .content_wrap .notice_list li:hover a{color:#e95504;transition:all 0.3s ease-in-out;}
.renewal .wrap .content_wrap .notice_list .title{width: calc(100% - 125px);font-size:18px;font-weight:500;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;line-height: 1.4;}
/* 알림판 */
.renewal .wrap .notify .notify_control{display:flex;width:140px;height:35px;}
.renewal .wrap .notify .notify_control>*{position:unset;width:35px;height:35px;font-size:16px;color:#888;text-align:center;line-height:33px;border:1px solid #d5d5d5;letter-spacing:-1.7px;margin: 0 0 0 -1px;}
.renewal .wrap .notify .notify_control>*:first-child{border-radius:5px 0 0 5px;}
.renewal .wrap .notify .notify_control>*:last-child{border-radius:0 5px 5px 0;}
.renewal .wrap .notify .notify_control .swiper-button-prev,.renewal .wrap .notify .notify_control .swiper-button-next{background-size:auto;}
.renewal .wrap .notify .notify_control .swiper-button-prev::after,.renewal .wrap .notify .notify_control .swiper-button-next::after{display: none;}
.renewal .wrap .notify .notify_control .swiper-button-prev{background-image:url(/offeduadvc/visitEdu/usr/publish/images/main/btn_arrow_right.png);background-position-x:-2px;border-right:1px solid transparent;}
.renewal .wrap .notify .notify_control .swiper-button-next{background-image:url(/offeduadvc/visitEdu/usr/publish/images/main/btn_arrow_left.png);}
.renewal .wrap .notify .notify_control .swiper-button-prev:hover,.renewal .wrap .notify .notify_control .swiper-button-next:hover{position:relative;border:1px solid #e95504;border-right:1px solid #e95504;z-index:12;background-color:#fff;left:0;top:0;}
.renewal .wrap .notify .notify_control .swiper-button-prev:hover{background-image:url(/offeduadvc/visitEdu/usr/publish/images/main/btn_arrow_right_hover.png);}
.renewal .wrap .notify .notify_control .swiper-button-next:hover{background-image:url(/offeduadvc/visitEdu/usr/publish/images/main/btn_arrow_left_hover.png);}
.renewal .wrap .notify .notify_control .slide_pause:hover,.renewal .wrap .notify .notify_control .slide_play:hover{background-color: #e95504;border:1px solid #e95504;}
.renewal .wrap .notify .notify_control .slide_pause,.renewal .wrap .notify .notify_control .slide_play{height: 37px;margin: 0 0 0 -0.5px;}
.renewal .wrap .notify .notify_control .slide_pause{background:#b0b0b0 url(/offeduadvc/visitEdu/usr/publish/images/main/btn_pause.png) no-repeat center center;}
.renewal .wrap .notify .notify_control .slide_play{background:#b0b0b0 url(/offeduadvc/visitEdu/usr/publish/images/main/btn_play.png) no-repeat center center;}
.renewal .wrap .notify .content{width:100%;height:388px;overflow: hidden;border-radius:5px;}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 146 B

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 194 B

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 162 B

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 349 B

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 94 KiB

After

Width:  |  Height:  |  Size: 85 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 98 KiB

After

Width:  |  Height:  |  Size: 86 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 209 KiB

After

Width:  |  Height:  |  Size: 170 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 209 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 190 KiB

After

Width:  |  Height:  |  Size: 190 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 190 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 257 KiB

After

Width:  |  Height:  |  Size: 215 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 257 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 210 KiB

After

Width:  |  Height:  |  Size: 195 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 210 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 171 KiB

After

Width:  |  Height:  |  Size: 168 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 171 KiB

View File

@ -159,17 +159,16 @@
<div class="container main">
<!-- visual -->
<div class="visual_slide swiper">
<button type="button" class="btn_prev_slide">이전 슬라이드</button>
<button type="button" class="btn_next_slide">다음 슬라이드</button>
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="inner">
<div class="text_area">
<p class="sub_title">대국민 저작권 교육 서비스1</p>
<p class="title">찾아가는 저작권 교육!</p>
<p class="summary">
편리하고 안전한 저작권 이용환경 조성을 통해<br>
올바른 저작권 문화 구축에 앞장서겠습니다.
</p>
<a href="#none">교육신청 등록 <img src="/offeduadvc/visitEdu/usr/publish/images/main/icon_main_visual_arrow_right.png" alt=""></a>
<p class="summary">편리하고 안전한 저작권 이용환경 조성을 통해 올바른 저작권 문화 구축에 앞장서겠습니다.</p>
<a href="#none">교육신청 등록</a>
</div>
</div>
</div>
@ -178,11 +177,8 @@
<div class="text_area">
<p class="sub_title">대국민 저작권 교육 서비스2</p>
<p class="title">찾아가는 저작권 교육!</p>
<p class="summary">
편리하고 안전한 저작권 이용환경 조성을 통해<br>
올바른 저작권 문화 구축에 앞장서겠습니다.
</p>
<a href="#none">교육신청 등록 <img src="/offeduadvc/visitEdu/usr/publish/images/main/icon_main_visual_arrow_right.png" alt=""></a>
<p class="summary">편리하고 안전한 저작권 이용환경 조성을 통해 올바른 저작권 문화 구축에 앞장서겠습니다.</p>
<a href="#none">교육신청 등록</a>
</div>
</div>
</div>
@ -191,11 +187,8 @@
<div class="text_area">
<p class="sub_title">대국민 저작권 교육 서비스3</p>
<p class="title">찾아가는 저작권 교육!</p>
<p class="summary">
편리하고 안전한 저작권 이용환경 조성을 통해<br>
올바른 저작권 문화 구축에 앞장서겠습니다.
</p>
<a href="#none">교육신청 등록 <img src="/offeduadvc/visitEdu/usr/publish/images/main/icon_main_visual_arrow_right.png" alt=""></a>
<p class="summary">편리하고 안전한 저작권 이용환경 조성을 통해 올바른 저작권 문화 구축에 앞장서겠습니다.</p>
<a href="#none">교육신청 등록</a>
</div>
</div>
</div>
@ -204,11 +197,8 @@
<div class="text_area">
<p class="sub_title">대국민 저작권 교육 서비스4</p>
<p class="title">찾아가는 저작권 교육!</p>
<p class="summary">
편리하고 안전한 저작권 이용환경 조성을 통해<br>
올바른 저작권 문화 구축에 앞장서겠습니다.
</p>
<a href="#none">교육신청 등록 <img src="/offeduadvc/visitEdu/usr/publish/images/main/icon_main_visual_arrow_right.png" alt=""></a>
<p class="summary">편리하고 안전한 저작권 이용환경 조성을 통해 올바른 저작권 문화 구축에 앞장서겠습니다.</p>
<a href="#none">교육신청 등록</a>
</div>
</div>
</div>
@ -217,11 +207,8 @@
<div class="text_area">
<p class="sub_title">대국민 저작권 교육 서비스5</p>
<p class="title">찾아가는 저작권 교육!</p>
<p class="summary">
편리하고 안전한 저작권 이용환경 조성을 통해<br>
올바른 저작권 문화 구축에 앞장서겠습니다.
</p>
<a href="#none">교육신청 등록 <img src="/offeduadvc/visitEdu/usr/publish/images/main/icon_main_visual_arrow_right.png" alt=""></a>
<p class="summary">편리하고 안전한 저작권 이용환경 조성을 통해 올바른 저작권 문화 구축에 앞장서겠습니다.</p>
<a href="#none">교육신청 등록</a>
</div>
</div>
</div>
@ -273,33 +260,44 @@
<div class="notice content_wrap">
<div class="title">
<h3>공지사항</h3>
<a href="#none" class="btn_plus">공지사항 더보기</a>
<a href="#none" class="btn_plus">더보기</a>
</div>
<div class="content">
<a href="#none" class="notice_wrap">
<dl>
<dt><span class="emphasis">공지</span>제 23, 24차 저작권 교육조건부 어쩌구 저쩌구</dt>
<dd>* 공공기관 메일은 발신자가 수신확인이 불가합니다.‘읽지 않음’이라고 나오는 것은 정상입니다.* 매달 교육일정 공지에 관하여 별도 문자가 발송</dd>
</dl>
<p class="date"><i></i>2023-09-25</p>
</a>
<ul class="notice_list">
<li>
<a href="#none">
<p class="date"><i></i>2023-09-25</p>
<p class="title"><span class="emphasis">공지</span>제 13기 청소년 전담 강사 양성</p>
<p class="date"><i></i>2023-09-25</p>
</a>
</li>
<li>
<a href="#none">
<p class="title">제 13기 청소년 전담 강사 양성</p>
<p class="date"><i></i>2023-09-25</p>
<p class="title">제 13기 청소년 전담 강사 양성</p>
</a>
</li>
<li>
<a href="#none">
<p class="title">제 13기 청소년 전담 강사 양성</p>
<p class="date"><i></i>2023-09-25</p>
<p class="title">제 13기 청소년 전담 강사 양성</p>
</a>
</li>
<li>
<a href="#none">
<p class="date"><i></i>2023-09-25</p>
<p class="title">제 13기 청소년 전담 강사 양성</p>
</a>
</li>
<li>
<a href="#none">
<p class="date"><i></i>2023-09-25</p>
<p class="title">제 13기 청소년 전담 강사 양성</p>
</a>
</li>
<li>
<a href="#none">
<p class="date"><i></i>2023-09-25</p>
<p class="title">제 13기 청소년 전담 강사 양성</p>
</a>
</li>
</ul>
@ -307,36 +305,35 @@
</div>
<!-- 교육자료실 -->
<div class="notice content_wrap">
<div class="data_notice content_wrap">
<div class="title">
<h3>교육자료실</h3>
<a href="#none" class="btn_plus">교육자료실 더보기</a>
<h3>자료실</h3>
<a href="#none" class="btn_plus">더보기</a>
</div>
<div class="content">
<a href="#none" class="notice_wrap">
<dl>
<dt><span class="emphasis">공지</span>제 23, 24차 저작권 교육조건부 어쩌구 저쩌구</dt>
<dd>* 공공기관 메일은 발신자가 수신확인이 불가합니다.‘읽지 않음’이라고 나오는 것은 정상입니다.* 매달 교육일정 공지에 관하여 별도 문자가 발송</dd>
</dl>
<p class="date"><i></i>2023-09-25</p>
</a>
<ul class="notice_list">
<li>
<a href="#none">
<p class="title"><span class="emphasis">공지</span>제 13기 청소년 전담 강사 양성</p>
<p class="date"><i></i>2023-09-25</p>
<p class="title"><i></i>제 13기 청소년 전담 강사 양성</p>
<p class="date">2023-09-25</p>
</a>
</li>
<li>
<a href="#none">
<p class="title">제 13기 청소년 전담 강사 양성</p>
<p class="date"><i></i>2023-09-25</p>
<p class="title"><i></i>제 13기 청소년 전담 강사 양성</p>
<p class="date">2023-09-25</p>
</a>
</li>
<li>
<a href="#none">
<p class="title">제 13기 청소년 전담 강사 양성</p>
<p class="date"><i></i>2023-09-25</p>
<p class="title"><i></i>제 13기 청소년 전담 강사 양성</p>
<p class="date">2023-09-25</p>
</a>
</li>
<li>
<a href="#none">
<p class="title"><i></i>제 13기 청소년 전담 강사 양성</p>
<p class="date">2023-09-25</p>
</a>
</li>
</ul>
@ -348,8 +345,8 @@
<div class="title">
<h3>알림판</h3>
<div class="notify_control">
<p class="slide_number"><span class="cur_number">1</span>/ <span class="all_number">5</span></p>
<div class="swiper-button-prev"></div>
<p class="slide_number"><span class="cur_number">1</span>/ <span class="all_number">5</span></p>
<div class="swiper-button-next"></div>
<button type="button" class="slide_pause" title="슬라이드 일시정지"></button>
</div>

View File

@ -0,0 +1,410 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>한국저작권위원회 저작권 교육 시스템</title>
<!-- css -->
<link rel="stylesheet" href="/offeduadvc/visitEdu/usr/publish/css/reset.css">
<link rel="stylesheet" href="/offeduadvc/visitEdu/usr/publish/css/font.css">
<link rel="stylesheet" href="/offeduadvc/visitEdu/usr/publish/css/swiper.min.css">
<link rel="stylesheet" href="/offeduadvc/visitEdu/usr/publish/css/common_2023.css">
<link rel="stylesheet" href="/offeduadvc/visitEdu/usr/publish/css/main_2023.css">
<!-- script -->
<script src="/offeduadvc/visitEdu/usr/publish/script/jquery-3.5.0.js"></script>
<script src="/offeduadvc/visitEdu/usr/publish/script/swiper.js"></script>
<script src="/offeduadvc/visitEdu/usr/publish/script/common.js"></script>
<script src="/offeduadvc/visitEdu/usr/publish/script/main_2023.js"></script>
<script>
$(window).scroll(function(){
if($(window).scrollTop()>0){
$("header").addClass("scroll");
}else{
$("header").removeClass("scroll");
}
})
</script>
</head>
<body class="renewal">
<!-- skip menu -->
<div class="skip_menu">
<a href="#sub" class="contGo" title="본문 바로가기">본문 바로가기</a>
</div>
<header class="">
<div class="gnb_wrap">
<div class="inner">
<div class="area_left">
<button class="site" onclick="window.open('https://www.copyright.or.kr/main.do')" title="새창열림">
<img src="/offeduadvc/visitEdu/usr/publish/images/common/kcc_ci.png" alt="한국저작권위원회">
<span>GO</span>
</button>
<p>
<img src="/offeduadvc/visitEdu/usr/publish/images/common/edu_mark_1.png" alt="교육기부 우수기관">교육기부 우수기관
</p>
</div>
<div class="area_right">
<p class="login_info header_login_wrap"><a href="#" class="header_login"><i></i>로그인</a></p>
<p class="login_info"><a href="#" class="header_join" target="blank" title="새창열림"><i></i>회원가입</a></p>
<div class="btn_util">
<button class="btn_minus" title="글자 확대"></button>
<button class="btn_plus" title="글자 축소"></button>
</div>
</div>
</div>
</div>
<!-- header -->
<div class="header">
<div class="header_inner">
<h1 class="logo"><a href="#none"><img src="/offeduadvc/visitEdu/usr/publish/images/common/ci.png" alt="한국저작권위원회 저작권 교육 시스템"></a></h1>
<div class="nav_wrap">
<nav id="menu">
<ul class="depth01 dep_li_04">
<li class="depth01_li"><a href="#" class="menu_link">찾아가는 교육<span class="menu_link_br">청소년</span></a>
<ul class="depth02">
<li><a href="#none">교육소개</a></li>
<li><a href="#none">교육신청등록</a></li>
<li><a href="#none">교육신청목록</a></li>
<li><a href="#none">교육완료목록</a></li>
</ul>
</li>
<li class="depth01_li"><a href="#" class="menu_link">찾아가는 교육<span class="menu_link_br">성인</span></a>
<ul class="depth02">
<li><a href="#none">교육소개</a></li>
<li><a href="#none">교육신청등록</a></li>
<li><a href="#none">교육신청목록</a></li>
<li><a href="#none">교육완료목록</a></li>
</ul>
</li>
<li class="depth01_li"><a href="#" class="menu_link">체험교실</a>
<ul class="depth02">
<li><a href="#none">교육소개</a></li>
<li><a href="#none">운영신청등록</a></li>
<li><a href="#none">운영신청목록</a></li>
<li><a href="#none">운영내역목록</a></li>
</ul>
</li>
<li class="depth01_li"><a href="#" class="menu_link">실무역량강화교육</a>
<ul class="depth02">
<li><a href="#none">교육소개</a></li>
<li><a href="#none">수강신청등록</a></li>
<li><a href="#none">수강신청목록</a></li>
<li><a href="#none">수강내역목록</a></li>
</ul>
</li>
<li class="depth01_li"><a href="#" class="menu_link">기소유예교육</a>
</li>
</ul>
</nav>
</div>
<div class="area_right">
<button class="btn_menu" title="전체메뉴 열기"></button>
</div>
</div>
</div>
</header>
<!-- full menu -->
<div class="full_menu">
<div class="inner">
<h1 class="logo"><img src="/offeduadvc/visitEdu/usr/publish/images/common/full_menu_logo.png" alt="한국저작권위원회 저작권 교육 시스템"></h1>
<ul class="depth01">
<li class="depth01_li"><a href="#" class="menu_link">찾아가는 교육<span>청소년</span></a>
<ul class="depth02">
<li><a href="#">교육소개</a></li>
<li><a href="#">교육신청등록</a></li>
<li><a href="#">교육신청목록</a></li>
<li><a href="#">교육완료목록</a></li>
</ul>
</li>
<li class="depth01_li"><a href="#" class="menu_link">찾아가는 교육<span>성인</span></a>
<ul class="depth02">
<li><a href="#">교육소개</a></li>
<li><a href="#">교육신청등록</a></li>
<li><a href="#">교육신청목록</a></li>
<li><a href="#">교육완료목록</a></li>
</ul>
</li>
<li class="depth01_li"><a href="#" class="menu_link">체험교실</a>
<ul class="depth02">
<li><a href="#">교육소개</a></li>
<li><a href="#">운영신청등록</a></li>
<li><a href="#">운영신청목록</a></li>
<li><a href="#">운영완료목록</a></li>
</ul>
</li>
<li class="depth01_li"><a href="#" class="menu_link">실무역량강화교육</a>
<ul class="depth02">
<li><a href="#">교육소개</a></li>
<li><a href="#">수강신청등록</a></li>
<li><a href="#">수강신청목록</a></li>
<li><a href="#">수강내역목록</a></li>
</ul>
</li>
<li class="depth01_li"><a href="#none" class="menu_link">기소유예교육</a>
</li>
</ul>
<button class="btn_close" title="전체메뉴 닫기"></button>
</div>
</div>
<!--// full menu -->
<div class="container main">
<!-- visual -->
<div class="visual_slide swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="inner">
<div class="text_area">
<p class="sub_title">대국민 저작권 교육 서비스1</p>
<p class="title">찾아가는 저작권 교육!</p>
<p class="summary">
편리하고 안전한 저작권 이용환경 조성을 통해<br>
올바른 저작권 문화 구축에 앞장서겠습니다.
</p>
<a href="#none">교육신청 등록 <img src="/offeduadvc/visitEdu/usr/publish/images/main/icon_main_visual_arrow_right.png" alt=""></a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="inner">
<div class="text_area">
<p class="sub_title">대국민 저작권 교육 서비스2</p>
<p class="title">찾아가는 저작권 교육!</p>
<p class="summary">
편리하고 안전한 저작권 이용환경 조성을 통해<br>
올바른 저작권 문화 구축에 앞장서겠습니다.
</p>
<a href="#none">교육신청 등록 <img src="/offeduadvc/visitEdu/usr/publish/images/main/icon_main_visual_arrow_right.png" alt=""></a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="inner">
<div class="text_area">
<p class="sub_title">대국민 저작권 교육 서비스3</p>
<p class="title">찾아가는 저작권 교육!</p>
<p class="summary">
편리하고 안전한 저작권 이용환경 조성을 통해<br>
올바른 저작권 문화 구축에 앞장서겠습니다.
</p>
<a href="#none">교육신청 등록 <img src="/offeduadvc/visitEdu/usr/publish/images/main/icon_main_visual_arrow_right.png" alt=""></a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="inner">
<div class="text_area">
<p class="sub_title">대국민 저작권 교육 서비스4</p>
<p class="title">찾아가는 저작권 교육!</p>
<p class="summary">
편리하고 안전한 저작권 이용환경 조성을 통해<br>
올바른 저작권 문화 구축에 앞장서겠습니다.
</p>
<a href="#none">교육신청 등록 <img src="/offeduadvc/visitEdu/usr/publish/images/main/icon_main_visual_arrow_right.png" alt=""></a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="inner">
<div class="text_area">
<p class="sub_title">대국민 저작권 교육 서비스5</p>
<p class="title">찾아가는 저작권 교육!</p>
<p class="summary">
편리하고 안전한 저작권 이용환경 조성을 통해<br>
올바른 저작권 문화 구축에 앞장서겠습니다.
</p>
<a href="#none">교육신청 등록 <img src="/offeduadvc/visitEdu/usr/publish/images/main/icon_main_visual_arrow_right.png" alt=""></a>
</div>
</div>
</div>
</div>
<div class="slide_control">
<div class="inner">
<div class="swiper-pagination"></div>
<button type="button" class="slide_pause" title="슬라이드 일시정지"></button>
</div>
</div>
</div>
<!-- main_banner -->
<ul class="main_banner_link inner">
<li class="banner_link_01">
<a href="#none">
<i></i>
<p>찾아가는 교육 <span>청소년</span></p>
</a>
</li>
<li class="banner_link_02">
<a href="#none">
<i></i>
<p>찾아가는 교육 <span>성인</span></p>
</a>
</li>
<li class="banner_link_03">
<a href="#none">
<i></i>
<p>체험교실</p>
</a>
</li>
<li class="banner_link_04">
<a href="#none">
<i></i>
<p>실무역량강화교육</p>
</a>
</li>
<li class="banner_link_05">
<a href="#none">
<i></i>
<p>기소유예교육</p>
</a>
</li>
</ul>
<div class="wrap inner">
<!-- 공지사항 -->
<div class="notice content_wrap">
<div class="title">
<h3>공지사항</h3>
<a href="#none" class="btn_plus">공지사항 더보기</a>
</div>
<div class="content">
<a href="#none" class="notice_wrap">
<dl>
<dt><span class="emphasis">공지</span>제 23, 24차 저작권 교육조건부 어쩌구 저쩌구</dt>
<dd>* 공공기관 메일은 발신자가 수신확인이 불가합니다.‘읽지 않음’이라고 나오는 것은 정상입니다.* 매달 교육일정 공지에 관하여 별도 문자가 발송</dd>
</dl>
<p class="date"><i></i>2023-09-25</p>
</a>
<ul class="notice_list">
<li>
<a href="#none">
<p class="title"><span class="emphasis">공지</span>제 13기 청소년 전담 강사 양성</p>
<p class="date"><i></i>2023-09-25</p>
</a>
</li>
<li>
<a href="#none">
<p class="title">제 13기 청소년 전담 강사 양성</p>
<p class="date"><i></i>2023-09-25</p>
</a>
</li>
<li>
<a href="#none">
<p class="title">제 13기 청소년 전담 강사 양성</p>
<p class="date"><i></i>2023-09-25</p>
</a>
</li>
</ul>
</div>
</div>
<!-- 교육자료실 -->
<div class="notice content_wrap">
<div class="title">
<h3>교육자료실</h3>
<a href="#none" class="btn_plus">교육자료실 더보기</a>
</div>
<div class="content">
<a href="#none" class="notice_wrap">
<dl>
<dt><span class="emphasis">공지</span>제 23, 24차 저작권 교육조건부 어쩌구 저쩌구</dt>
<dd>* 공공기관 메일은 발신자가 수신확인이 불가합니다.‘읽지 않음’이라고 나오는 것은 정상입니다.* 매달 교육일정 공지에 관하여 별도 문자가 발송</dd>
</dl>
<p class="date"><i></i>2023-09-25</p>
</a>
<ul class="notice_list">
<li>
<a href="#none">
<p class="title"><span class="emphasis">공지</span>제 13기 청소년 전담 강사 양성</p>
<p class="date"><i></i>2023-09-25</p>
</a>
</li>
<li>
<a href="#none">
<p class="title">제 13기 청소년 전담 강사 양성</p>
<p class="date"><i></i>2023-09-25</p>
</a>
</li>
<li>
<a href="#none">
<p class="title">제 13기 청소년 전담 강사 양성</p>
<p class="date"><i></i>2023-09-25</p>
</a>
</li>
</ul>
</div>
</div>
<!-- 알림판 -->
<div class="notify content_wrap">
<div class="title">
<h3>알림판</h3>
<div class="notify_control">
<p class="slide_number"><span class="cur_number">1</span>/ <span class="all_number">5</span></p>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<button type="button" class="slide_pause" title="슬라이드 일시정지"></button>
</div>
</div>
<div class="content">
<div class="notify_slide">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="/offeduadvc/visitEdu/usr/publish/images/main/main_notify_img_01.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="/offeduadvc/visitEdu/usr/publish/images/main/main_notify_img_02.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- footer -->
<footer>
<div class="inner">
<div class="site">
<ul>
<li><a href="/">개인정보처리방침</a></li>
<li><a href="/">이메일무단수집거부</a></li>
<li><a href="/">고객서비스헌장</a></li>
<li><a href="/">저작권정책</a></li>
</ul>
</div>
<div class="area_top">
<h1 class="logo"><a href="#none"><img src="/offeduadvc/visitEdu/usr/publish/images/common/ci.png" alt="한국저작권위원회 저작권 교육 시스템"></a></h1>
<address>
<p>진주 [52852] 경상남도 진주시 충의로 19, 1/2/5층 ☎ 055-792-0000</p>
<p style=" margin-bottom: 8px">☎ 찾교(청소년) 055.792.0224 / 찾교(성인) 02.2669.0083 / 체험교실 055.792.0234 / 교육콘텐츠 055.792.0228</p>
<p>서울 [04323] 서울특별시 용산구 후암로 107, 5/16층 ☎ 대표번호 02.2669.0010</p>
</address>
<div class="site_go">
<a class="wa_mark" href="/offeduadvc/certificate/offeduadvc-certificate.pdf" target="_blank">
<img class="wa" alt="(사)한국장애인단체총연합회 한국웹접근성인증평가원 웹 접근성 우수사이트 인증마크(WA인증마크)" src="/offeduadvc/visitEdu/usr/publish/images/common/wa_mark.png">
</a>
<label for="site_select" class="label">관련사이트 선택</label>
<select name="" id="site_select">
<option value="">관련사이트</option>
<option value="">관련사이트</option>
<option value="">관련사이트</option>
<option value="">관련사이트</option>
</select>
<button class="btn_go" title="사이트 이동 새창열림">이동</button>
</div>
</div>
</div>
</footer>
<!--// footer -->
</body>
</html>

View File

@ -10,6 +10,10 @@ $(document).ready(function () {
},
autoplay: {
delay: 5000
},
navigation: {
nextEl: '.visual_slide .btn_next_slide',
prevEl: '.visual_slide .btn_prev_slide',
}
});