tolag3/koipa_edu_2025-1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'advc' of http://yongjoon.cho@vcs.iten.co.kr:9999/hylee/offedu into advc

Browse Source
This commit is contained in:
myname 2023-12-19 18:04:56 +09:00
commit ed62e314b9
9 changed files with 163 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
src/main/webapp/WEB-INF/jsp/web/com/webCommonHeader.jsp
View File

@ -176,13 +176,21 @@ function usrJoin(){
</form> </form>
<div class="gnb_wrap"> <div class="gnb_wrap">
<div class="inner"> <div class="inner">
<div class="area_left"> <div class="top_link">
<ul>
<li><a href="https://edu-copyright.or.kr/portal/main.do">포털사이트</a></li>
<li><a href="https://edu-copyright.or.kr/user/main/main.do">저작권e배움터</a></li>
<li><a href="https://edu-copyright.or.kr/dsprUser/main/main.do">장애인e배움터</a></li>
<li class="on"><a href="https://www.edu-copyright.or.kr/offedu/web/main/mainPage.do">저작권배움터</a></li>
</ul>
</div>
<!-- <div class="area_left">
<button class="site" onclick="window.open('https://www.copyright.or.kr/main.do')" title="새창열림"> <button class="site" onclick="window.open('https://www.copyright.or.kr/main.do')" title="새창열림">
<img src="${pageContext.request.contextPath}/visitEdu/usr/publish/images/common/kcc_ci.png" alt="한국저작권위원회"> <img src="${pageContext.request.contextPath}/visitEdu/usr/publish/images/common/kcc_ci.png" alt="한국저작권위원회">
<span>GO</span> <span>GO</span>
</button> </button>
<p><img src="${pageContext.request.contextPath}/visitEdu/usr/publish/images/common/edu_mark_1.png" alt="" /> 교육기부 우수기관</p> <p><img src="${pageContext.request.contextPath}/visitEdu/usr/publish/images/common/edu_mark_1.png" alt="" /> 교육기부 우수기관</p>
</div> </div>-->
<%-- <button class="site" onclick="window.open('https://www.copyright.or.kr/main.do')" title="새창열림"> <%-- <button class="site" onclick="window.open('https://www.copyright.or.kr/main.do')" title="새창열림">
<img src="${pageContext.request.contextPath}/visitEdu/usr/publish/images/common/kcc_ci.png" alt="한국저작권위원회"> <img src="${pageContext.request.contextPath}/visitEdu/usr/publish/images/common/kcc_ci.png" alt="한국저작권위원회">
<span>GO</span> <span>GO</span>
@ -198,6 +206,7 @@ function usrJoin(){
</button> --%> </button> --%>
<div class="area_right"> <div class="area_right">
<p class="login_info"><span class="t_none">알림</span><a href="#" class="header_alarm"><span class="a_count">28</span></a></p>
<!-- local --> <!-- local -->
<c:if test="${environment eq 'local' }"> <c:if test="${environment eq 'local' }">
<p class="login_info header_login_wrap"><a href="${pageContext.request.contextPath}/web/user/login/ssoLogin.do" class="header_login"><i></i>로그인</a></p> <p class="login_info header_login_wrap"><a href="${pageContext.request.contextPath}/web/user/login/ssoLogin.do" class="header_login"><i></i>로그인</a></p>
@ -234,13 +243,21 @@ function usrJoin(){
</form> </form>
<div class="gnb_wrap"> <div class="gnb_wrap">
<div class="inner"> <div class="inner">
<div class="area_left"> <div class="top_link">
<ul>
<li><a href="https://edu-copyright.or.kr/portal/main.do">포털사이트</a></li>
<li><a href="https://edu-copyright.or.kr/user/main/main.do">저작권e배움터</a></li>
<li><a href="https://edu-copyright.or.kr/dsprUser/main/main.do">장애인e배움터</a></li>
<li class="on"><a href="https://www.edu-copyright.or.kr/offedu/web/main/mainPage.do">저작권배움터</a></li>
</ul>
</div>
<!--<div class="area_left">
<button class="site" onclick="window.open('https://www.copyright.or.kr/main.do')" title="새창열림"> <button class="site" onclick="window.open('https://www.copyright.or.kr/main.do')" title="새창열림">
<img src="${pageContext.request.contextPath}/visitEdu/usr/publish/images/common/kcc_ci.png" alt="한국저작권위원회"> <img src="${pageContext.request.contextPath}/visitEdu/usr/publish/images/common/kcc_ci.png" alt="한국저작권위원회">
<span>GO</span> <span>GO</span>
</button> </button>
<p><img src="${pageContext.request.contextPath}/visitEdu/usr/publish/images/common/edu_mark_1.png" alt="" /> 교육기부 우수기관</p> <p><img src="${pageContext.request.contextPath}/visitEdu/usr/publish/images/common/edu_mark_1.png" alt="" /> 교육기부 우수기관</p>
</div> </div>-->
<!-- 회원 SEQ 변경되는 문제로 인해 주석 --> <!-- 회원 SEQ 변경되는 문제로 인해 주석 -->
<%-- <button class="site" onclick="window.location.href='http://223.255.205.7/user/main/main.do'" title="새창열림"> <%-- <button class="site" onclick="window.location.href='http://223.255.205.7/user/main/main.do'" title="새창열림">
<img src="${pageContext.request.contextPath}/visitEdu/usr/publish/images/common/kcc_ci.png" alt="한국저작권위원회"> <img src="${pageContext.request.contextPath}/visitEdu/usr/publish/images/common/kcc_ci.png" alt="한국저작권위원회">
@ -252,6 +269,7 @@ function usrJoin(){
</button> --%> </button> --%>
<div class="area_right"> <div class="area_right">
<p class="login_info"><span class="t_none">알림</span><a href="#" class="header_alarm"><span class="a_count">28</span></a></p>
<p class="login_after"><c:out value="${LoginVO.id}"/><span>님</span></p> <p class="login_after"><c:out value="${LoginVO.id}"/><span>님</span></p>
<p class="login_after"><a href="<c:url value="/web/my/myPageDashBoard.do" />" title="새창열림">마이페이지</a></p> <p class="login_after"><a href="<c:url value="/web/my/myPageDashBoard.do" />" title="새창열림">마이페이지</a></p>
<!-- e배움터 로그인 연동으로 인하여 개발, 운영 구분 --> <!-- e배움터 로그인 연동으로 인하여 개발, 운영 구분 -->
@ -273,8 +291,43 @@ function usrJoin(){
</c:when> </c:when>
</c:choose> </c:choose>
<div class="header"> <div class="header">
<div class="header_top">
<div class="header_inner"> <div class="header_inner">
<div class="area_left">
<h1 class="logo"><a href="${pageContext.request.contextPath}/web/main/mainPage.do" title="메인으로 이동"><img src="${pageContext.request.contextPath}/visitEdu/usr/publish/images/common/ci.png" alt="한국저작권위원회 저작권 교육 시스템"></a></h1> <h1 class="logo"><a href="${pageContext.request.contextPath}/web/main/mainPage.do" title="메인으로 이동"><img src="${pageContext.request.contextPath}/visitEdu/usr/publish/images/common/ci.png" alt="한국저작권위원회 저작권 교육 시스템"></a></h1>
<div class="edumark"><img src="${pageContext.request.contextPath}/visitEdu/usr/publish/images/common/edu_mark_1.png" alt="교육기부 우수기관">교육기부 우수기관</div>
</div>
<div class="area_right">
<!-- 로그인 관련 모바일 화면 -->
<c:choose>
<c:when test="${empty LoginVO or empty ssoLoginVO}">
<c:if test="${environment eq 'local' }">
<p class="btn_mobile btn_alarm"><span class="t_none">알림</span><a href="#"><span class="m_a_count">28</span></a></p>
<button type="button" class="btn_mobile btn_login" onclick="location.href='${pageContext.request.contextPath}/web/user/login/ssoLogin.do'" title="로그인"></button>
<button type="button" class="btn_mobile btn_join" onclick="javascript:usrJoin();" title="회원가입"></button>
</c:if>
<c:if test="${environment eq 'dev' }">
<p class="btn_mobile btn_alarm"><span class="t_none">알림</span><a href="#"><span class="m_a_count">28</span></a></p>
<button type="button" class="btn_mobile btn_login" onclick="location.href='http://223.255.205.7/user/member/loginForm.do?eduOff=Y'" title="로그인"></button>
<button type="button" class="btn_mobile btn_join" onclick="location.href='http://223.255.205.7/user/usrservice/selectUserSeView.do?eduOff=Y'" title="회원가입"></button>
</c:if>
<c:if test="${environment eq 'real' }">
<p class="btn_mobile btn_alarm"><span class="t_none">알림</span><a href="#"><span class="m_a_count">28</span></a></p>
<button type="button" class="btn_mobile btn_login" onclick="location.href='https://edu-copyright.or.kr/user/member/loginForm.do?eduOff=Y'" title="로그인"></button>
<button type="button" class="btn_mobile btn_join" onclick="location.href='https://edu-copyright.or.kr/user/usrservice/selectUserSeView.do?eduOff=Y'" title="회원가입"></button>
</c:if>
</c:when>
<c:when test="${!empty LoginVO and !empty ssoLoginVO}">
<button type="button" class="btn_mobile btn_logout" onclick="location.href='${pageContext.request.contextPath}/web/uat/uia/actionLogout.do'" title="로그아웃"></button>
<button class="btn_mobile btn_mypage" title="마이페이지"></button>
<p class="btn_mobile btn_alarm"><span class="t_none">알림</span><a href="#"><span class="m_a_count">28</span></a></p>
<button type="button" class="btn_mobile btn_usredit" onclick="javascript:usrModify();" title="개인정보 수정"></button>
</c:when>
</c:choose>
<button type="button" class="btn_menu" title="전체메뉴 열기"></button>
</div>
</div>
</div>
<div class="nav_wrap"> <div class="nav_wrap">
<nav id="menu"> <nav id="menu">
<ul class="depth01"> <ul class="depth01">
@ -301,31 +354,6 @@ function usrJoin(){
</ul> </ul>
</nav> </nav>
</div> </div>
<div class="area_right">
<!-- 로그인 관련 모바일 화면 -->
<c:choose>
<c:when test="${empty LoginVO or empty ssoLoginVO}">
<c:if test="${environment eq 'local' }">
<button type="button" class="btn_mobile btn_login" onclick="location.href='${pageContext.request.contextPath}/web/user/login/ssoLogin.do'" title="로그인"></button>
<button type="button" class="btn_mobile btn_join" onclick="javascript:usrJoin();" title="회원가입"></button>
</c:if>
<c:if test="${environment eq 'dev' }">
<button type="button" class="btn_mobile btn_login" onclick="location.href='http://223.255.205.7/user/member/loginForm.do?eduOff=Y'" title="로그인"></button>
<button type="button" class="btn_mobile btn_join" onclick="location.href='http://223.255.205.7/user/usrservice/selectUserSeView.do?eduOff=Y'" title="회원가입"></button>
</c:if>
<c:if test="${environment eq 'real' }">
<button type="button" class="btn_mobile btn_login" onclick="location.href='https://edu-copyright.or.kr/user/member/loginForm.do?eduOff=Y'" title="로그인"></button>
<button type="button" class="btn_mobile btn_join" onclick="location.href='https://edu-copyright.or.kr/user/usrservice/selectUserSeView.do?eduOff=Y'" title="회원가입"></button>
</c:if>
</c:when>
<c:when test="${!empty LoginVO and !empty ssoLoginVO}">
<button type="button" class="btn_mobile btn_logout" onclick="location.href='${pageContext.request.contextPath}/web/uat/uia/actionLogout.do'" title="로그아웃"></button>
<button type="button" class="btn_mobile btn_usredit" onclick="javascript:usrModify();" title="개인정보 수정"></button>
</c:when>
</c:choose>
<button type="button" class="btn_menu" title="전체메뉴 열기"></button>
</div>
</div>
</div> </div>
</header> </header>
<!-- //header --> <!-- //header -->

147
src/main/webapp/visitEdu/usr/publish/css/common.css
View File

@ -10,16 +10,16 @@ body {color: #222;}
.logo img {width: 200px;} .logo img {width: 200px;}
/* header */ /* 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; border-bottom: 1px solid #e2e4e6;/* max-height: 350px; */} header{width: 100%; height: 195px; 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; border-bottom: 1px solid #f3f3f3; }
header.on{background-color: #fff; box-shadow: 0 3px 10px rgba(0,0,0,0.1);/* max-height: 350px; */} 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::before{position: absolute; content: " "; display: block; top: 195px; left: 0; height: 2px; background-color: #e95504; 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::after{position: absolute; content: " "; display: block; width: 100%; height: 2px; background-color: #e95504; top:195px; left: 0; opacity: 0; transition: opacity .4s ease-in-out;}
header.on::after{top: 130px; opacity: 1;} header.on::after{top: 195px; opacity: 1;}
header.on::before{opacity: 1;} header.on::before{opacity: 1;}
header.scroll{box-shadow: 0 5px 8px rgba(0,0,0,0.15);} 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{width: 100%; background-color: #fff; height: 50px; 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 .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 {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 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;}
@ -41,45 +41,67 @@ header.scroll{box-shadow: 0 5px 8px rgba(0,0,0,0.15);}
.gnb_wrap .area_right .login_info:last-of-type:before{display: none;} .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 .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 {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{width: 45px; height: 50px; 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 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_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;} .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;} /* 알람추가 20231218*/
.gnb_wrap .area_right .header_alarm {position: relative; background-image: url(../images/common/headerTop_alarm.png); background-repeat: no-repeat;width: 16px; height: 18px; margin:0 45px 0 0; top:3px;}
.gnb_wrap .area_right .header_alarm .a_count {position: relative; left: 11px; top:-8px; font-size:12px; letter-spacing: -0.5px; background-color: #e95504; border-radius: 50%; width:20px; height:20px; line-height: 20px; color:#fff; text-align: center;font-weight: 600; }
.t_none {font-size:0;}
/* 공통메뉴 추가 20231218*/
.gnb_wrap .top_link {display: inline-block;}
.gnb_wrap .top_link ul{display: inline-block;}
.gnb_wrap .top_link ul li{display: inline-block;width: auto;}
.gnb_wrap .top_link ul li a{display:block;font-size:15px;padding: 0 30px;line-height: 46px;text-align: center;color: #555555;transition: 0.1s;}
.gnb_wrap .top_link ul li.on::after{content: '';display: block;width: 100%;height: 3px;background-color: #e95504;}
.gnb_wrap .top_link ul li.on a, .gnb_wrap .top_link ul li a:hover{color: #e95504;font-weight: 500;}
.header{padding: 0; box-sizing: border-box;}
.header .header_top{width:100%; border-bottom:2px solid #f1f1f1;}
.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{max-width: 1400px; width: 100%; height: 90px; display: flex; align-items: center; justify-content: space-between; margin: 0 auto; position: relative;}
/* 교육기부우수기관 위치변경 231218*/
.header_inner .area_left {display:flex;}
.header_inner .edumark{border:1px solid #e5e5e5; color:#666; font-size:16px; padding: 7px 14px; margin:0 0 0 30px;}
.header_inner .area_right{display: flex;} .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 .nav_wrap{box-sizing: border-box; height: 100%; max-width:1400px; margin: 0 auto;}
.header_inner .depth01 {display: flex; height: 100%;} .header #menu{width: 100%; margin: 0 auto; height: 100%; }
/* .header_inner .dep_li_01,.header_inner .dep_li_02,.header_inner .dep_li_03 {justify-content:flex-start;} .header .depth01 {display: flex; height: 100%; /*padding: 15px 0;*/}
.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 .dep_li_01,.header_inner .dep_li_02,.header_inner .dep_li_03 {justify-content:flex-start;}
.header_inner .depth01_li{position: relative; height:100%; padding: 0; box-sizing: border-box;} .header .dep_li_04,.header_inner .dep_li_05,.header_inner .dep_li_06,.header_inner .dep_li_07 {justify-content:space-between;}
.header_inner .dep_li_04 .depth01_li{width: calc((100% - 40px)/4);} .header .depth01_li{position: relative; box-sizing: border-box; padding:15px 0;}
.header_inner .dep_li_01 .depth01_li{width: 100%;} .header .dep_li_04 .depth01_li{width: calc((100% - 40px)/4);}
.header_inner .dep_li_02 .depth01_li{width: calc((100% - 20px)/2);} .header .dep_li_01 .depth01_li{width: 100%;}
.header_inner .dep_li_03 .depth01_li{width: calc((100% - 30px)/3);max-width:270px;} .header .dep_li_02 .depth01_li{width: calc((100% - 20px)/2);}
.header_inner .dep_li_05 .depth01_li{width: calc(100%/5);} .header .dep_li_03 .depth01_li{width: calc((100% - 30px)/3);max-width:270px;}
.header_inner .dep_li_06 .depth01_li{width: calc(100%/6);} .header .dep_li_05 .depth01_li{width: calc(100%/5);}
.header_inner .dep_li_07 .depth01_li:nth-child(n+2):nth-child(-n+4){width: 16%;} .header .dep_li_06 .depth01_li{width: calc((100% - 60px)/6);}
.header_inner .dep_li_07 .depth01_li:nth-child(n+5){width: 12%; min-width: 85px;} .header .dep_li_07 .depth01_li{width: auto;}
.header_inner .dep_li_07 .depth01_li:nth-child(1),.header_inner .dep_li_07 .depth01_li:nth-child(2){width:170px;} .header .menu_link{font-size: 20px; font-weight: 300; letter-spacing: -0.5px; display: flex; align-items: center; justify-content: center;/* height: 100%; */position: relative;font-family: 'GmarketSansMedium'; line-height: 1.25;}
.header_inner .menu_link{font-size: 18px; letter-spacing: -0.5px; display: flex; align-items: center; justify-content: center; flex-flow: column; height: 100%; position: relative;line-height: 1.25;font-family: 'GmarketSansMedium';} .header .menu_link::before{position: absolute; content: " "; display: block; width: 0; /*height: 2px; background-color: #E95504; left: 50%; transform: translateX(-50%); transition: width .4s ease-in-out; top: 32px;*/ z-index: 1;}
.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 .menu_link .menu_link_br {color: #E95504;font-family: 'GmarketSansMedium'; padding:0 0 0 5px;}
.header_inner .menu_link .menu_link_br {color: #E95504;font-family: 'GmarketSansMedium';} .header .on .menu_link{color: #E95504;}
.header_inner .on .menu_link{color: #E95504;}
.on .nav_wrap .on .menu_link::before{width: 100%;} .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;/* max-height: 350px; */} .header .depth02{position: absolute; top:53px; 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 .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 .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 .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 .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 .depth02 a:hover,.header .depth02 a:focus{color: #E95504;font-weight:500;}
.header_inner button{width: 27px; height: 26px; background-repeat: no-repeat;} .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_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 .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 button.btn_mobile{display: none; margin: 0 8px; vertical-align: middle; margin-top: -2px;height:100%;background-position:center center;}
.header_inner .btn_mobile{display:none;}
/* 모바일 마이페이지,알람 추가 231218*/
.header_inner .btn_mypage{background-image: url(../images/common/m_headerTop_mypage.png);background-size:26px auto; width:30px; margin:0 10px 0 0;}
.header_inner .btn_mobile.btn_alarm { position: relative; margin:3px 10px 0 0; background-image: url(../images/common/m_headerTop_alarm.png); background-repeat: no-repeat; background-position: center center; width: 30px; height:60px; background-size: 23px auto;}
.header_inner .btn_mobile.btn_alarm .m_a_count {position: absolute; left: 15px; top:10px; display:inline-block; font-size:12px; letter-spacing: -0.5px; background-color: #e95504; border-radius: 50%; width:21px; height:21px; line-height:21px; color:#fff; text-align: center;font-weight: 600;}
.header_inner .btn_login{background-image: url(../images/common/m_headerTop_icon1.png);background-size:21px auto;} .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_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_join{width: 35px; background-image: url(../images/common/m_headerTop_icon2.png);background-size:26px auto;}
@ -141,16 +163,16 @@ header.scroll{box-shadow: 0 5px 8px rgba(0,0,0,0.15);}
.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 .ssleftxt ul li.menu_on a {color:#fff; background-image: url(../images/common/arrow.png); background-repeat: no-repeat; background-position: 91% 50%;}
/*// snb */ /*// snb */
.navigation {height:50px;border-bottom:1px solid #d5d5d5;} .navigation {height:50px;border-bottom:1px solid #d5d5d5; border-top:1px solid #eee; margin:65px 0 0 0; background-color: #f8f8f8;}
.container .navigation .inner{margin: 0 auto;} .container .navigation .inner{margin: 0 auto;}
.navigation .list {border-left:1px solid #d5d5d5;} .navigation .list {border-left:1px solid #d5d5d5;}
.navigation .list:after {content:'';display:block;clear:both;} .navigation .list:after {content:'';display:block;clear:both;}
.navigation .list > li {position:relative;float:left;border-right:1px solid #d5d5d5;} .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:first-child {border-left:1px solid #d5d5d5;}
.navigation .list > li.home {display:none;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.home a {display:block;width:49px;height:50px;font-size:0;text-indent:-9999em;background:url(../images/content/select1.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 {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_title:after {content:'';position:absolute;right:20px;top:1px;width:18px;height:48px;background:url(../images/content/select1.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 {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 {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:hover,
@ -222,22 +244,24 @@ footer .wa_mark .wa {width: 110px;margin: 0 40px 0 0;}
/*// moblie menu */ /*// moblie menu */
.snb {display: none;} .snb {display: none;}
.header_inner button.btn_mobile {display:block;}
/* footer */ header {height:120px; box-sizing:border-box;}
footer .area_top {align-items: flex-start; padding: 40px 0 90px 0;} /* 공통헤더 추가 231218*/
footer address {width: 72%} header .gnb_wrap { padding: 0;}
footer .wa_mark {position: absolute; bottom: 6px; right: 0;} header .gnb_wrap .top_link {width:100%; border-bottom:1px solid #e2e4e6;}
footer .site_go {position: absolute; bottom: 23px; left: 0;} header .gnb_wrap .top_link ul{display: flex;}
} header .gnb_wrap .top_link ul li{width:25%;}
header .gnb_wrap .top_link ul li a{/*align-items: center; justify-content: center;*/font-size:15px;padding:0;line-height:46px;color: #555555;transition: 0.1s;}
header .gnb_wrap .top_link ul li.on::after{content: '';display: block;width: 100%;height: 3px;background-color: #e95504;}
header .gnb_wrap .top_link ul li.on a, .gnb_wrap .top_link ul li a:hover{color: #e95504;font-weight: 500;}
/* 추가작업 231218*/
header .header .header_top {border-bottom:none; }
.header_inner button.btn_mobile {display:block; }
.header_inner .btn_mobile {display:block; }
.header_inner .edumark {display:none;}
.gnb_wrap .area_right {display:none; }
@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 {padding:0 8px 0 10px;}
header .header .header_inner {height:70px;} 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 {display:flex;height:70px;align-items:center;}
@ -250,6 +274,26 @@ footer .wa_mark .wa {width: 110px;margin: 0 40px 0 0;}
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 {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;} 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;}
.container .navigation {margin:-10px 0 0 0; }
.container .navigation .inner {padding:0;}
/* 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 .header_top {border-bottom:none; }
header .gnb_wrap .site,
header .gnb_wrap .btn_util {display:none;}
header .gnb_wrap .area_right, .gnb_wrap .area_left p {display:none;}
.path {height:50px;background:#f5680b;} .path {height:50px;background:#f5680b;}
.path .pathedfr {display:none;} .path .pathedfr {display:none;}
.path .m_pathedfr {display:block;} .path .m_pathedfr {display:block;}
@ -262,6 +306,7 @@ footer .wa_mark .wa {width: 110px;margin: 0 40px 0 0;}
.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 {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;} .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 {margin:50px 0 0 0; }
.container .navigation .inner {padding:0;} .container .navigation .inner {padding:0;}
.navigation .list > li {width: calc((100% - 2px)/2);} .navigation .list > li {width: calc((100% - 2px)/2);}
.navigation .list > li .navi_title{width: 100%;} .navigation .list > li .navi_title{width: 100%;}
@ -289,6 +334,8 @@ footer .wa_mark .wa {width: 110px;margin: 0 40px 0 0;}
} }
@media screen and (max-width: 400px){ @media screen and (max-width: 400px){
/* 공통헤더 추가*/
header .gnb_wrap .inner .top_link ul li a { font-size: 12px; }
footer .area_top address{margin:15px 0;} footer .area_top address{margin:15px 0;}
footer .wa_mark,footer .area_top .site_go{position:unset;} footer .wa_mark,footer .area_top .site_go{position:unset;}
footer .wa_mark{margin:0 0 30px 0;} footer .wa_mark{margin:0 0 30px 0;}

10
src/main/webapp/visitEdu/usr/publish/css/main.css
View File

@ -1,4 +1,4 @@
.main {margin-top:130px;background-color:#eef0f4;padding:0 0 80px 0;} .main {margin-top:195px;background-color:#eef0f4;padding:0 0 80px 0;}
.main .inner {max-width:1400px;width:100%;margin:0 auto;padding:0;display:flex;justify-content: space-between;flex-wrap: wrap;box-sizing: border-box;} .main .inner {max-width:1400px;width:100%;margin:0 auto;padding:0;display:flex;justify-content: space-between;flex-wrap: wrap;box-sizing: border-box;}
/* visual */ /* visual */
@ -97,7 +97,7 @@
} }
@media all and (max-width: 1024px){ @media all and (max-width: 1024px){
.main{margin-top:130px;} .main{margin-top:120px;}
.wrap .content_wrap{width:100%;margin:0 0 30px 0;} .wrap .content_wrap{width:100%;margin:0 0 30px 0;}
.visual_slide .swiper-slide{background-size:auto 100% !important;} .visual_slide .swiper-slide{background-size:auto 100% !important;}
@ -114,15 +114,15 @@
} }
@media all and (max-width: 767px){ @media all and (max-width: 767px){
.main{margin:70px 0 0 0;} /*.main{margin:70px 0 0 0;}*/
.main {margin-top:120px;background-color:#eef0f4;padding:0 0 80px 0;}
.visual_slide .btn_next_slide{left:calc(100% - 60px);} .visual_slide .btn_next_slide{left:calc(100% - 60px);}
.visual_slide .btn_prev_slide{left:10px;} .visual_slide .btn_prev_slide{left:10px;}
} }
@media all and (max-width: 640px){ @media all and (max-width: 640px){
.visual_slide .swiper-slide{background-size:cover !important;} .visual_slide .swiper-slide{background-size:cover !important;}
.visual_slide .swiper-slide[data-swiper-slide-index="0"]{background:url(/offedu/visitEdu/usr/publish/images/main/main_visual_01_mob.jpg) no-repeat center bottom;} .visual_slide .swiper-slide[data-swiper-slide-index="0"]{background:url(../publish/images/main/main_visual_01_mob.jpg) no-repeat center bottom;}
.visual_slide .swiper-slide[data-swiper-slide-index="1"]{background:url(/offedu/visitEdu/usr/publish/images/main/main_visual_02_mob.jpg) no-repeat center bottom;} .visual_slide .swiper-slide[data-swiper-slide-index="1"]{background:url(/offedu/visitEdu/usr/publish/images/main/main_visual_02_mob.jpg) no-repeat center bottom;}
.visual_slide .swiper-slide[data-swiper-slide-index="2"]{background:url(/offedu/visitEdu/usr/publish/images/main/main_visual_03_mob.jpg) no-repeat center bottom;} .visual_slide .swiper-slide[data-swiper-slide-index="2"]{background:url(/offedu/visitEdu/usr/publish/images/main/main_visual_03_mob.jpg) no-repeat center bottom;}
.visual_slide .swiper-slide[data-swiper-slide-index="3"]{background:url(/offedu/visitEdu/usr/publish/images/main/main_visual_04_mob.jpg) no-repeat center bottom;} .visual_slide .swiper-slide[data-swiper-slide-index="3"]{background:url(/offedu/visitEdu/usr/publish/images/main/main_visual_04_mob.jpg) no-repeat center bottom;}

BIN
src/main/webapp/visitEdu/usr/publish/images/common/edu_mark_1_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
src/main/webapp/visitEdu/usr/publish/images/common/headerTop_alarm.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
src/main/webapp/visitEdu/usr/publish/images/common/m_headerTop_alarm.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
src/main/webapp/visitEdu/usr/publish/images/common/m_headerTop_mypage.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

BIN
src/main/webapp/visitEdu/usr/publish/images/content/select1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

2
src/main/webapp/visitEdu/usr/publish/script/common.js
View File

@ -165,7 +165,7 @@ function header() {
var height_array = gnb.find('.depth02').map(function(){ var height_array = gnb.find('.depth02').map(function(){
return $(this).outerHeight(); return $(this).outerHeight();
}); });
h=Math.max.apply(Math, height_array)+130; h=Math.max.apply(Math, height_array)+210;
function open_gnb(item) { function open_gnb(item) {
var depth01 = item; var depth01 = item;
var depth01_li = depth01.closest(".depth01_li"); var depth01_li = depth01.closest(".depth01_li");