diff --git a/src/main/webapp/WEB-INF/jsp/web/main/mainPage.jsp b/src/main/webapp/WEB-INF/jsp/web/main/mainPage.jsp index 377ec137..68fefe03 100644 --- a/src/main/webapp/WEB-INF/jsp/web/main/mainPage.jsp +++ b/src/main/webapp/WEB-INF/jsp/web/main/mainPage.jsp @@ -8,7 +8,8 @@ - + + + + + + + +
+
+
+ + + + + + + + + + + + +
+
+ + 하루동안 창을 열지 않음 + + +
+ +
+ +
+
+
+ + + + +
+
+
+ +
+<%--
');"> --%> +
');"> +

대국민 저작권 교육 서비스

+

찾아가는 저작권 교육!

+ 편리하고 안전한 저작권 이용환경 조성을 통해
올바른 저작권 문화 구축에 앞장서겠습니다. + + +
+
+ +
+ + +
+
+
+ +
+ <c:out value='${popupzoneList.imgAlt}' /> 알림창 + + <c:out value='${popupzoneList.imgAlt}' /> 알림창?atchFileId=' /> +
+ <%--
+ 저작권 교육하신 선생님 손에 커피드림 이벤트. 저작권 교육용 콘텐츠를 받아서 학생들에게 교육해주신 선생님들~ 교육 실적 입력하시고 스타벅스 커피 꼭 받아가세요~ 참여방법 1.저작권 교육용 콘텐츠를 수업에 사용 2.저작권 콘텐츠를 활용한 저작권 교육 실적을 제출하면 완료 + 저작권 교육하신 선생님 손에 커피드림 이벤트. 저작권 교육용 콘텐츠를 받아서 학생들에게 교육해주신 선생님들~ 교육 실적 입력하시고 스타벅스 커피 꼭 받아가세요~ 참여방법 1.저작권 교육용 콘텐츠를 수업에 사용 2.저작권 콘텐츠를 활용한 저작권 교육 실적을 제출하면 완료 +
--%> + +
+
+
+
+
+
+
+ +
+
+
+ + + +
+
+

저작권 교육신청

+
+
+ +
+

청소년찾아가는 저작권 교육청소년

+
+
+

성인찾아가는 저작권 교육성인

+
+
+

교육콘텐츠 신청

+
+
+

저작권 체험교실

+
+ + + +
+

청소년찾아가는 저작권 교육청소년

+
+
+

성인찾아가는 저작권 교육성인

+
+
+

교육콘텐츠 신청

+
+
+

저작권 체험교실

+
+ +
+
+ + + +
+
+

공지사항

+
+ + +
+ + + +
+ +
+

교육자료실

+
+ + +
+ + +
+
+ + <%--
+ +
+
+
    + +
  • '); background-repeat: no-repeat; background-position: center;">
    • +     + + +
+ +
+ + + + +
+
+
+
+

분쟁을 신속하고 공정하게 해결해주는

+ 저작권 시스템 +
+ +
+
+ + + +
+
+ +

교육신청

+ + +

서류제출

+ + +

신청현황

+ + +

조정일정 현황

+ + +

문의게시판

+ +
+
+ + +
+
+ +
+
+

교육신청 안내

+
+
+
+ + + 신청 +

온라인상으로 구비서류 제출 및 수수료 결제

+ + + + 오프라인 신청 +

한국저작권위원회로 우편 송달 또는 방문

+ +
+
+
+ +

상담전화

+
+

+ 02-2669-0042 + 월~금(평일) 09:00~18:00 +

+
+
+
+ + + +
+
+

조정사례

+
+ +
+
+ +
+ +
+
+ + + + +
+
+

알림판

+
+ + + +
+
+
+
1}">swiper-container pz_wrap"> + +
+
+
+ +
+
+
--%> + +
+ + +
+ \ No newline at end of file diff --git a/src/main/webapp/visitEdu/usr/publish/css/main.css b/src/main/webapp/visitEdu/usr/publish/css/main.css index f34219b0..58d1d4a4 100644 --- a/src/main/webapp/visitEdu/usr/publish/css/main.css +++ b/src/main/webapp/visitEdu/usr/publish/css/main.css @@ -1,178 +1,90 @@ -.main {margin-top: 130px; background-color:#eef0f4 ;} -.main .inner {max-width: 1400px; width: 100%; padding: 60px 0; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; box-sizing: border-box;} +.main {margin-top:130px;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;} -/* cont1 */ -.cont1{position: relative; width: calc(100% - 33% - 50px);} -.cont1 .cont1-swiper {overflow:hidden;} -.cont1 .swiper-wrapper .swiper-slide {height: 393px; } -.cont1 .slide_button{position: absolute;bottom: 35px; left: 0;width:auto; z-index: 1;} -.cont1 .slide_button:after {content:'';display:block;clear:both;} -.cont1 .slide_button .swiper-pagination {float:left;position:relative;margin:3px 0 0;} -.cont1 .slide_button .swiper-pagination .swiper-pagination-bullet{float:left;margin-right:7px;position: relative;vertical-align: middle;width: 10px;height: 10px;background-color: #c6c9d1; border-radius: 100%;opacity:1;} -.cont1 .slide_button .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{width: 40px;background-color: #f37632;border-radius:10px;vertical-align: middle;} -.cont1 .slidePause {float:left;background-image: url(../images/main/visualStop.png);background-repeat: no-repeat;width: 16px;height: 16px;} -.cont1 .slideStart {float:left;background-image: url(../images/main/visualStart.png);background-repeat: no-repeat;width: 16px;height: 16px;} -.cont1 .swiper-slide .txt1 {font-size: 22px; color: #333; padding-top: 30px; letter-spacing: -1px;} -.cont1 .swiper-slide .txt2 {font-size: 46px; color: #000; padding: 15px 0 30px 0; letter-spacing: -2px; font-family: 'LotteMartHappy';} -.cont1 .swiper-slide span {font-size: 17px; font-weight: 300; color: #666; display: block; line-height: 1.4; letter-spacing: -0.5px;} -.cont1 .swiper-slide button {width: 175px; height: 50px; padding-left: 22px; border: 1px solid #cbd0da; border-radius: 24.5px; margin-top: 40px; background-color: #fff; background-image: url(../images/main/btn_arrow.png); background-repeat: no-repeat; background-position: 90% 50%; font-size: 18px; color: #60656d; text-align: left; vertical-align: middle;} -.cont1 .cont1-swiper .swiper-slide {min-height:393px; background-repeat: no-repeat; background-position: right center;} -.swiper-wrapper {height:auto;} -.swiper .swiper-notification {display:none;} +/* visual */ +.visual_slide{position:relative;width:100%;height:590px;background-color: #eef0f4;margin:0 auto;z-index:0;overflow:hidden;} +.visual_slide .swiper-slide .inner{width:100%;} +.visual_slide .swiper-slide .inner .text_area{height:auto;padding:63px 0 0 40px;margin:0 auto;box-sizing:border-box;text-align:center;} +.visual_slide .swiper-slide .inner .text_area *{line-height: 1.4;color:#182448;} +.visual_slide .swiper-slide .inner .text_area .sub_title{font-size:20px;font-family:'GmarketSansMedium';} +.visual_slide .swiper-slide .inner .text_area .title{font-size:52px;font-family:'GmarketSansBold';} +.visual_slide .swiper-slide .inner .text_area .summary{font-size:18px;} +.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;} +.visual_slide .slide_control{position:relative;width:100%;bottom:20px;} +.visual_slide .slide_control .inner{position:relative;justify-content:center;align-items:center;} +.visual_slide .slide_control .swiper-pagination{position: relative;} +.visual_slide .slide_control .swiper-pagination-bullet{background-color:#19222d;opacity:0.5;margin:0 4px;} +.visual_slide .slide_control .swiper-pagination-bullet-active{opacity:1;} +.visual_slide .slide_control .slide_pause,.visual_slide .slide_control .slide_play{position:relative;width:8px;height:10px;z-index:10;margin: 5px 0 0 8px;} +.visual_slide .slide_control .slide_pause{background:url(/offeduadvc/visitEdu/usr/publish/images/main/btn_main_visual_pause.png);} +.visual_slide .slide_control .slide_play{background:url(/offeduadvc/visitEdu/usr/publish/images/main/btn_main_visual_play.png);} +.visual_slide .btn_prev_slide,.visual_slide .btn_next_slide{position:absolute;width:50px;height:50px;text-indent:-9999em;overflow:hidden;top:50%;z-index:10;transform:translateY(-50%);} +.visual_slide .btn_prev_slide{background:url(/offeduadvc/visitEdu/usr/publish/images/main/btn_main_visual_arrow_right.png) no-repeat;left:77px;} +.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);} +.visual_slide .swiper-slide[aria-label="1 / 5"]{background:url(/offeduadvc/visitEdu/usr/publish/images/main/main_visual_01.jpg) no-repeat;} +.visual_slide .swiper-slide[aria-label="2 / 5"]{background:url(/offeduadvc/visitEdu/usr/publish/images/main/main_visual_02.jpg) no-repeat;} +.visual_slide .swiper-slide[aria-label="3 / 5"]{background:url(/offeduadvc/visitEdu/usr/publish/images/main/main_visual_03.jpg) no-repeat;} +.visual_slide .swiper-slide[aria-label="4 / 5"]{background:url(/offeduadvc/visitEdu/usr/publish/images/main/main_visual_04.jpg) no-repeat;} +.visual_slide .swiper-slide[aria-label="5 / 5"]{background:url(/offeduadvc/visitEdu/usr/publish/images/main/main_visual_05.jpg) no-repeat;} -/* cont2 */ -.cont2 {position: relative; width: 33%; max-width: 450px;} -.cont2 .cont2-swiper {overflow:hidden;position:relative;/*height:388px;*/border-radius:30px 5px 30px 5px;} -.cont2 .cont2-swiper .swiper-slide .mobile_banner {display:none;} -.cont2 .cont2-swiper .slide_button {position: absolute;bottom: 0; left: 0; z-index: 4; width: 100%; height: 50px; background-color: rgba(0,0,0,0.1); border-radius: 0 0 30px 5px; text-align: center;} -.cont2 .cont2-swiper .slide_button .control {overflow:hidden;position:relative;display:inline-block;width:92px;margin:15px auto 0;} -.cont2 .cont2-swiper .slide_button .swiper-button-next {position:absolute;top:0;left:initial;right:0;width:9px;height:16px;margin:0;vertical-align:top;background:url(../images/main/cont2_right.png) no-repeat left top;background-size:9px 16px;} -.cont2 .cont2-swiper .slide_button .swiper-button-prev {position:absolute;top:0;left:0;right:initial;width:9px;height:16px;margin:0;vertical-align:top;background:url(../images/main/cont2_left.png) no-repeat left top;background-size:9px 16px;z-index:11;} -.cont2 .cont2-swiper .slide_button .swiper-pagination {position:relative;bottom:0;float:left;width:100%;font-size:16px;vertical-align:top;color:#fff;} -.cont2 .cont2-swiper .slide_button .slidePause {display:inline-block;background-image: url(../images/main/visualStop2.png);background-repeat: no-repeat;width:16px;height:16px;margin:15px 0 0 15px;} -.cont2 .cont2-swiper .slide_button .slideStart {display:inline-block;background-image: url(../images/main/visualStart2.png);background-repeat: no-repeat;width:16px;height:16px;margin:15px 0 0 15px;} +/* main_banner_link */ +.container .main_banner_link{position:relative;height:130px;margin:60px auto 70px auto;} +.container .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;} +.container .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;} +.container .main_banner_link li:hover{z-index: 15;} +.container .main_banner_link li:hover::after{border:3px solid #e95504;background-color:#fff;box-shadow:0 0 15px rgba(233,85,4,0.3);} +.container .main_banner_link li a{position:relative;width:100%;text-align:center;z-index:15;} +.container .main_banner_link i{display:block;width:68px;height:68px;margin:0 auto 10px auto;border-radius:100%;background-repeat:no-repeat;} +.container .main_banner_link .banner_link_01 i{background-image:url(/offeduadvc/visitEdu/usr/publish/images/main/icon_main_visual_01.png);} +.container .main_banner_link .banner_link_02 i{background-image:url(/offeduadvc/visitEdu/usr/publish/images/main/icon_main_visual_02.png);} +.container .main_banner_link .banner_link_03 i{background-image:url(/offeduadvc/visitEdu/usr/publish/images/main/icon_main_visual_03.png);} +.container .main_banner_link .banner_link_04 i{background-image:url(/offeduadvc/visitEdu/usr/publish/images/main/icon_main_visual_04.png);} +.container .main_banner_link .banner_link_05 i{background-image:url(/offeduadvc/visitEdu/usr/publish/images/main/icon_main_visual_05.png);} +.container .main_banner_link li span{color:#e95504;font-weight:500;} -/* cont3 */ -.cont3 {width: 100%; margin: 50px 0; display: flex;} -.cont3 .cont3_tit {width: 230px;border-radius: 30px 0 0 5px; background-color: #e95504; align-self: center; text-align: center; padding: 34.5px 0; background-image: url(../images/main/cont3_tit_img.png); background-repeat: no-repeat; background-position: 87% center; box-sizing: border-box;} -.cont3 .cont3_tit p {padding-right: 30px; font-size: 21px; font-weight: 400; color: #fff;} -.cont3 .cont3_cont {display: flex; width: calc(100% - 230px); height: 90px; border-radius: 0 5px 30px 0; background-color: #fff; align-items: center;} -.cont3 .cont3_cont>div {width: calc(100%/4); position: relative; background-repeat: no-repeat; background-position: 30px center;} -.cont3 .cont3_cont>div::after {content: ""; width: 1px; height: 90px; background-color: #e5e5e5; position: absolute; right: 0; top: 50%; transform: translateY(-50%);} -.cont3 .cont3_cont>div:last-child:after {content: none;} -.cont3 .cont3_cont>div p {position:relative;font-size: 18px;} -.cont3 .cont3_cont>div p span {display:block;font-size: 18px; color: #E95504; padding-top: 7px;} -.cont3 .cont3_cont>div p .mo_text {display:none;} -.cont3 .cont3_cont>div p a {position:relative;height:90px;padding:0 30px 0 100px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;} -.cont3 .cont3_cont .cont3_cont_1 {background-image: url(../images/main/cont3_img1.png);} -.cont3 .cont3_cont .cont3_cont_2 {background-image: url(../images/main/cont3_img2.png);} -.cont3 .cont3_cont .cont3_cont_3 {background-image: url(../images/main/cont3_img3.png);} -/*.cont3 .cont3_cont .cont3_cont_3 p a {padding-top:35px;}*/ -.cont3 .cont3_cont .cont3_cont_4 {background-image: url(../images/main/cont3_img4.png);} -/*.cont3 .cont3_cont .cont3_cont_4 p a {padding-top:35px;}*/ +/* 하단콘텐츠 공통 */ +.wrap .content_wrap{width:calc((100% - 72px)/3);} +.wrap .content_wrap .content{height:332px;} +.wrap .content_wrap>.title{display:flex;width:100%;justify-content:space-between;align-items:center;margin:0 0 10px 0;} +.wrap .content_wrap>.title h3{position:relative;font-size:28px;font-weight:bold;padding:0 0 0 20px;} +.wrap .content_wrap>.title h3::after{position:absolute;content:" ";width:6px;height:6px;border:3px solid #e95504;border-radius:100%;left:0;top:9px;} +.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;} +.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;} -/* cont4,5 */ -.cont4, .cont5 {width: calc(100%/2 - 25px); min-height: 204px; padding: 40px; border-radius: 25px 5px 25px 5px; background-color: #fff; box-sizing: border-box; position: relative;} -.main_cont_tit {display: flex; justify-content: space-between;} -.main_cont_tit p {font-size: 25px; font-weight: 600;} -button.main_more {background-image: url(../images/main/main_cont_more.png); background-repeat: no-repeat; background-position: right center; padding-right: 30px; font-size: 17px; color: #777772; font-weight: 300; position: absolute; top: 40px; right: 40px;} +/* 공지사항 */ +.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;} +.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;} +.wrap .notice .notice_list li{border-bottom: 1px solid #d5d5d5;} +.wrap .notice .notice_list li:last-child{border:0;} +.wrap .notice .notice_list li a{display:flex;height:50px;justify-content:space-between;align-items:center;transition:all 0.1s ease-in;} +.wrap .notice .notice_list li:hover a{color:#e95504;transition:all 0.15s ease-in-out;} +.wrap .notice .date{display:flex;min-width:110px;font-size:16px;color:#666;align-items:center;font-weight:300;} +.wrap .notice .notice_list li:hover .date{color:#e95504;} +.wrap .notice .date i{display:inline-block;width:4px;height:4px;background:#e95504;margin:2px 6px 0 0;border-radius:100%;} +.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;} -/* cont4 */ -.cont4 .list {margin-top: 33px;} -.cont4 .list li {margin-bottom: 14px;} -.cont4 .list li:hover a p {text-decoration: underline;} -.cont4 .list li:last-child {margin-bottom: 0;} -.cont4 .list li a {display: flex; justify-content: space-between; align-items: center;} -.cont4 .list li p {width: calc(100% - 100px); font-size: 18px; font-weight: 300; color: #666; overflow: hidden; text-overflow: ellipsis;-webkit-line-clamp: 1; white-space: nowrap; vertical-align: middle;} -.cont4 .list li a span {color: #777772; font-weight: 300; font-size: 16px; line-height: 26px; vertical-align: top;} -.cont4 .list li a p .noticeBox {width: 57px; line-height: 0; padding: 12px 0; border: 1px solid #d14001; border-radius: 13px; margin-right: 4px; color: #d14001; display: inline-block; text-align: center; vertical-align: revert;} +/* 자료실 */ +.wrap .data_notice .notice_list{display:flex;height:100%;align-items:stretch;flex-flow:wrap;justify-content:space-between;flex-direction:column;} +.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;} +.wrap .data_notice .notice_list li:hover{border:1px solid #e95504;transition:all 0.05s ease-in-out;} +.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;} +.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%;} +.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;} +.wrap .data_notice .notice_list li:hover .title,.wrap .data_notice .notice_list li:hover .date{color:#e95504;transition:all 0.05s ease-in-out;} -/* cont5 */ -.cont5 .list {display: flex; justify-content: space-between; margin-top: 28px;} -.cont5 .list li {width: calc(100%/3 - 12.5px);} -.cont5 .list li:hover p {text-decoration: underline;} -.cont5 .list li a {display: block;} -.cont5 .list li .imgBox {height: 130px; overflow: hidden; background-color: #e5e5e5;} -.cont5 .list li .imgBox img {height: 100%;} -.cont5 .list li .textBox p {font-size: 18px; font-weight: 300; color: #666; line-height: 1.3; letter-spacing: -0.5px; margin-top: 17px; -webkit-line-clamp: 2; overflow: hidden; display: -webkit-box;} +/* 알림판 */ +.wrap .notify .notify_control{display:flex;height:30px;background-color:#fff;border:1px solid #d5d5d5;border-radius:5px;padding:0 4px 0 0;} +.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;} +.wrap .notify .notify_control .slide_number{width:35px;} +.wrap .notify .notify_control .swiper-button-prev,.wrap .notify .notify_control .swiper-button-next{background-size:auto;} +.wrap .notify .notify_control .swiper-button-prev::after,.wrap .notify .notify_control .swiper-button-next::after{display: none;} +.wrap .notify .notify_control .swiper-button-prev{background-image:url(/offeduadvc/visitEdu/usr/publish/images/main/btn_arrow_right.png);background-position-x:-2px;} +.wrap .notify .notify_control .swiper-button-next{background-image:url(/offeduadvc/visitEdu/usr/publish/images/main/btn_arrow_left.png);} +.wrap .notify .notify_control .swiper-button-prev:hover{background-image:url(/offeduadvc/visitEdu/usr/publish/images/main/btn_arrow_right_hover.png);} +.wrap .notify .notify_control .swiper-button-next:hover{background-image:url(/offeduadvc/visitEdu/usr/publish/images/main/btn_arrow_left_hover.png);} +.wrap .notify .notify_control .slide_pause,.wrap .notify .notify_control .slide_play{height: 30px;margin: 0 0 0 -0.5px;} +.wrap .notify .notify_control .slide_pause{background:url(/offeduadvc/visitEdu/usr/publish/images/main/btn_pause.png) no-repeat center center;} +.wrap .notify .notify_control .slide_play{background:url(/offeduadvc/visitEdu/usr/publish/images/main/btn_play.png) no-repeat center center;} +.wrap .notify .content{width:100%;height:332px;overflow: hidden;border-radius:5px;} -@media all and (max-width: 1280px){ - /* main latout */ - .main .inner {padding:60px 20px;} - .cont1 {width:calc(100% - 450px);} - .cont2 {min-width:450px;} - .cont3 .cont3_tit {width:200px;background-position:90% center;} - .cont3 .cont3_cont {width: calc(100% - 200px);} - .cont3 .cont3_tit p {font-size:19px;} - .cont3 .cont3_cont>div {background-position:15px center;} - .cont3 .cont3_cont>div p {font-size:16px;} - .cont3 .cont3_cont>div p a {padding:0 15px 0 80px;} - .cont3 .cont3_cont>div p span {left:80px;bottom:20px;font-size:16px;} - /*.cont3 .cont3_cont .cont3_cont_3 p a, - .cont3 .cont3_cont .cont3_cont_4 p a {padding-top:20px;}*/ -} - -@media all and (max-width: 1024px){ - /* main latout */ - .cont1 {width:100%;} - - .cont2 {width:100%;max-width:100%;min-width:auto;} - .cont2 .cont2-swiper .swiper-slide img {display:none;width:100%;} - .cont2 .cont2-swiper .swiper-slide .mobile_banner {display:block;} - - .cont3 {display:block;} - .cont3 .cont3_tit {width:100%;padding:14px 30px 15px;text-align:left;background-position:right 20px center;border-radius:30px 5px 0 0;} - .cont3 .cont3_cont {display:block;width:100%;height:auto;border-radius:0 0 30px 5px;} - .cont3 .cont3_cont:after {content:'';display:block;clear:both;} - .cont3 .cont3_cont>div {float:left;width:50%;height:80px;line-height:40px;background-position:20px center;box-sizing:border-box;} - .cont3 .cont3_cont>div:after {height:100%;} - .cont3 .cont3_cont>div p {overflow:hidden;} - .cont3 .cont3_cont>div p a {height:80px;justify-content:flex-start;align-items:center;flex-direction:row;} - .cont3 .cont3_cont>div p span {display:none;} - .cont3 .cont3_cont>div p span.mo_text {display:block;float:left;padding:0 4px 0 0;color:#222} - .cont3 .cont3_cont>.cont3_cont_1 {border-bottom:1px solid #cbd0da;} - .cont3 .cont3_cont>.cont3_cont_1 p {padding:0;} - .cont3 .cont3_cont>.cont3_cont_1 span {position:static;left:initial;bottom:initial;} - .cont3 .cont3_cont>.cont3_cont_2 {border-bottom:1px solid #cbd0da;} - .cont3 .cont3_cont>.cont3_cont_2:after {display:none;} - .cont3 .cont3_cont>.cont3_cont_2 p {padding:0;} - .cont3 .cont3_cont>.cont3_cont_2 span {position:static;left:initial;bottom:initial;} -} - -/* 모바일 */ -@media screen and (max-width: 767px){ - /* 1207 - 수정 */ - .main {margin:0;padding:70px 0 0;} - /* //1207 - 수정 */ - .main .inner {padding:0 10px 35px;} - .cont1 {width:100%;} - .cont1 .cont1-swiper .swiper-slide {height:auto;padding:0 0 45px;background-image:url(../images/main/m_cont1_bg1.png);background-size:contain;} - .cont1 .cont1-swiper .swiper-slide .txt1 {font-size:14px;margin:0 0 0 6px;} - .cont1 .cont1-swiper .swiper-slide .txt2 {margin:0 0 0 6px;padding:8px 0 6px;font-size:18px;} - .cont1 .cont1-swiper .swiper-slide span {margin:0 0 0 6px;font-size:14px;} - .cont1 .cont1-swiper .swiper-slide button {width:130px;height:40px;margin:10px 0 0 6px;padding:0 0 0 20px;font-size:14px;background-size:4px auto;background-position:90% center;} - .cont1 .cont1-swiper .slide_button {left:6px;bottom:10px;} - .cont1 .slide_button .swiper-pagination {margin:0;} - .cont1 .slide_button .swiper-pagination .swiper-pagination-bullet {width:7px;height:7px;} - .cont1 .slide_button .swiper-pagination .swiper-pagination-bullet:last-child {margin:0;} - .cont1 .slideStart {width:30px;height:30px;margin:-11px 0 0;background-size:16px 16px;background-position:center center;} - .cont1 .slidePause {width:30px;height:30px;margin:-11px 0 0;background-size:14px 16px;background-position:center center;} - - .cont2 .cont2-swiper .slide_button {height:40px;border-radius:0 0 15px 5px;} - .cont2 .cont2-swiper .slide_button .control, - .cont2 .cont2-swiper .slide_button .slideStart, - .cont2 .cont2-swiper .slide_button .slidePause {margin-top:10px;} - - .cont3 {margin:15px 0 20px;} - .cont3 .cont3_tit {padding:9px 20px 10px;background-size:11px;border-radius:20px 5px 0 0;} - .cont3 .cont3_tit p {font-size:15px;} - .cont3 .cont3_cont {box-shadow:1px 1px 20px 0px rgba(45, 55, 90, 0.15);} - .cont3 .cont3_cont>div {display:flex;height:60px;font-size:14px;line-height:20px;align-items:center;background-size:30px;background-position:10px center;} - .cont3 .cont3_cont>div p {font-size:14px;} - .cont3 .cont3_cont>div p a {height:60px;padding:0 10px 0 50px;} - .cont3 .cont3_cont>div p span {font-size:14px;} - /* .cont3 .cont3_cont>div:first-child p a, - .cont3 .cont3_cont>div:nth-child(2) p a {padding-top:10px;} */ - - .cont4 {width:100%;margin:0 0 20px;padding:20px;border-radius:20px 5px 20px 5px;box-shadow:1px 1px 20px 0px rgba(45, 55, 90, 0.15);} - .cont4 .main_cont_tit p {font-size:20px;} - button.main_more {padding-right:20px;font-size:14px;line-height:20px;background-size:15px;top:20px;right:20px;} - .cont4 .list {margin:17px 0 0;} - .cont4 .list li {margin-bottom: 6px;} - .cont4 .list li a p {width:calc(100% - 80px); font-size:14px;} - .cont4 .list li a p .noticeBox {width:45px; padding:10px 0; font-size:14px;} - .cont4 .list li a > span {font-size:14px;line-height:24px;} - - .cont5 {width:100%;margin:0;padding:20px;border-radius:20px 5px 20px 5px;box-shadow:1px 1px 20px 0px rgba(45, 55, 90, 0.15);} - .cont5 .main_cont_tit p {font-size:20px;} - .cont5 .main_cont_tit button {padding-right:20px;font-size:14px;line-height:20px;background-size:15px;} - .cont5 .list {overflow:hidden;display:block;margin:17px 0 0;} - .cont5 .list li {float:left;width:calc(50% - 18px);} - .cont5 .list li:nth-child(2) {float:right;} - .cont5 .list li:nth-child(n+3) {display:none;} - .cont5 .list li .imgBox {height:auto;} - .cont5 .list li .imgBox img {width:100%;height:auto;} - .cont5 .list li .textBox p {margin:10px 0 0;font-size:14px;} - -} \ No newline at end of file diff --git a/src/main/webapp/visitEdu/usr/publish/css/main_bak_231011.css b/src/main/webapp/visitEdu/usr/publish/css/main_bak_231011.css new file mode 100644 index 00000000..f34219b0 --- /dev/null +++ b/src/main/webapp/visitEdu/usr/publish/css/main_bak_231011.css @@ -0,0 +1,178 @@ +.main {margin-top: 130px; background-color:#eef0f4 ;} +.main .inner {max-width: 1400px; width: 100%; padding: 60px 0; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; box-sizing: border-box;} + +/* cont1 */ +.cont1{position: relative; width: calc(100% - 33% - 50px);} +.cont1 .cont1-swiper {overflow:hidden;} +.cont1 .swiper-wrapper .swiper-slide {height: 393px; } +.cont1 .slide_button{position: absolute;bottom: 35px; left: 0;width:auto; z-index: 1;} +.cont1 .slide_button:after {content:'';display:block;clear:both;} +.cont1 .slide_button .swiper-pagination {float:left;position:relative;margin:3px 0 0;} +.cont1 .slide_button .swiper-pagination .swiper-pagination-bullet{float:left;margin-right:7px;position: relative;vertical-align: middle;width: 10px;height: 10px;background-color: #c6c9d1; border-radius: 100%;opacity:1;} +.cont1 .slide_button .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{width: 40px;background-color: #f37632;border-radius:10px;vertical-align: middle;} +.cont1 .slidePause {float:left;background-image: url(../images/main/visualStop.png);background-repeat: no-repeat;width: 16px;height: 16px;} +.cont1 .slideStart {float:left;background-image: url(../images/main/visualStart.png);background-repeat: no-repeat;width: 16px;height: 16px;} +.cont1 .swiper-slide .txt1 {font-size: 22px; color: #333; padding-top: 30px; letter-spacing: -1px;} +.cont1 .swiper-slide .txt2 {font-size: 46px; color: #000; padding: 15px 0 30px 0; letter-spacing: -2px; font-family: 'LotteMartHappy';} +.cont1 .swiper-slide span {font-size: 17px; font-weight: 300; color: #666; display: block; line-height: 1.4; letter-spacing: -0.5px;} +.cont1 .swiper-slide button {width: 175px; height: 50px; padding-left: 22px; border: 1px solid #cbd0da; border-radius: 24.5px; margin-top: 40px; background-color: #fff; background-image: url(../images/main/btn_arrow.png); background-repeat: no-repeat; background-position: 90% 50%; font-size: 18px; color: #60656d; text-align: left; vertical-align: middle;} +.cont1 .cont1-swiper .swiper-slide {min-height:393px; background-repeat: no-repeat; background-position: right center;} +.swiper-wrapper {height:auto;} +.swiper .swiper-notification {display:none;} + + +/* cont2 */ +.cont2 {position: relative; width: 33%; max-width: 450px;} +.cont2 .cont2-swiper {overflow:hidden;position:relative;/*height:388px;*/border-radius:30px 5px 30px 5px;} +.cont2 .cont2-swiper .swiper-slide .mobile_banner {display:none;} +.cont2 .cont2-swiper .slide_button {position: absolute;bottom: 0; left: 0; z-index: 4; width: 100%; height: 50px; background-color: rgba(0,0,0,0.1); border-radius: 0 0 30px 5px; text-align: center;} +.cont2 .cont2-swiper .slide_button .control {overflow:hidden;position:relative;display:inline-block;width:92px;margin:15px auto 0;} +.cont2 .cont2-swiper .slide_button .swiper-button-next {position:absolute;top:0;left:initial;right:0;width:9px;height:16px;margin:0;vertical-align:top;background:url(../images/main/cont2_right.png) no-repeat left top;background-size:9px 16px;} +.cont2 .cont2-swiper .slide_button .swiper-button-prev {position:absolute;top:0;left:0;right:initial;width:9px;height:16px;margin:0;vertical-align:top;background:url(../images/main/cont2_left.png) no-repeat left top;background-size:9px 16px;z-index:11;} +.cont2 .cont2-swiper .slide_button .swiper-pagination {position:relative;bottom:0;float:left;width:100%;font-size:16px;vertical-align:top;color:#fff;} +.cont2 .cont2-swiper .slide_button .slidePause {display:inline-block;background-image: url(../images/main/visualStop2.png);background-repeat: no-repeat;width:16px;height:16px;margin:15px 0 0 15px;} +.cont2 .cont2-swiper .slide_button .slideStart {display:inline-block;background-image: url(../images/main/visualStart2.png);background-repeat: no-repeat;width:16px;height:16px;margin:15px 0 0 15px;} + +/* cont3 */ +.cont3 {width: 100%; margin: 50px 0; display: flex;} +.cont3 .cont3_tit {width: 230px;border-radius: 30px 0 0 5px; background-color: #e95504; align-self: center; text-align: center; padding: 34.5px 0; background-image: url(../images/main/cont3_tit_img.png); background-repeat: no-repeat; background-position: 87% center; box-sizing: border-box;} +.cont3 .cont3_tit p {padding-right: 30px; font-size: 21px; font-weight: 400; color: #fff;} +.cont3 .cont3_cont {display: flex; width: calc(100% - 230px); height: 90px; border-radius: 0 5px 30px 0; background-color: #fff; align-items: center;} +.cont3 .cont3_cont>div {width: calc(100%/4); position: relative; background-repeat: no-repeat; background-position: 30px center;} +.cont3 .cont3_cont>div::after {content: ""; width: 1px; height: 90px; background-color: #e5e5e5; position: absolute; right: 0; top: 50%; transform: translateY(-50%);} +.cont3 .cont3_cont>div:last-child:after {content: none;} +.cont3 .cont3_cont>div p {position:relative;font-size: 18px;} +.cont3 .cont3_cont>div p span {display:block;font-size: 18px; color: #E95504; padding-top: 7px;} +.cont3 .cont3_cont>div p .mo_text {display:none;} +.cont3 .cont3_cont>div p a {position:relative;height:90px;padding:0 30px 0 100px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;} +.cont3 .cont3_cont .cont3_cont_1 {background-image: url(../images/main/cont3_img1.png);} +.cont3 .cont3_cont .cont3_cont_2 {background-image: url(../images/main/cont3_img2.png);} +.cont3 .cont3_cont .cont3_cont_3 {background-image: url(../images/main/cont3_img3.png);} +/*.cont3 .cont3_cont .cont3_cont_3 p a {padding-top:35px;}*/ +.cont3 .cont3_cont .cont3_cont_4 {background-image: url(../images/main/cont3_img4.png);} +/*.cont3 .cont3_cont .cont3_cont_4 p a {padding-top:35px;}*/ + +/* cont4,5 */ +.cont4, .cont5 {width: calc(100%/2 - 25px); min-height: 204px; padding: 40px; border-radius: 25px 5px 25px 5px; background-color: #fff; box-sizing: border-box; position: relative;} +.main_cont_tit {display: flex; justify-content: space-between;} +.main_cont_tit p {font-size: 25px; font-weight: 600;} +button.main_more {background-image: url(../images/main/main_cont_more.png); background-repeat: no-repeat; background-position: right center; padding-right: 30px; font-size: 17px; color: #777772; font-weight: 300; position: absolute; top: 40px; right: 40px;} + +/* cont4 */ +.cont4 .list {margin-top: 33px;} +.cont4 .list li {margin-bottom: 14px;} +.cont4 .list li:hover a p {text-decoration: underline;} +.cont4 .list li:last-child {margin-bottom: 0;} +.cont4 .list li a {display: flex; justify-content: space-between; align-items: center;} +.cont4 .list li p {width: calc(100% - 100px); font-size: 18px; font-weight: 300; color: #666; overflow: hidden; text-overflow: ellipsis;-webkit-line-clamp: 1; white-space: nowrap; vertical-align: middle;} +.cont4 .list li a span {color: #777772; font-weight: 300; font-size: 16px; line-height: 26px; vertical-align: top;} +.cont4 .list li a p .noticeBox {width: 57px; line-height: 0; padding: 12px 0; border: 1px solid #d14001; border-radius: 13px; margin-right: 4px; color: #d14001; display: inline-block; text-align: center; vertical-align: revert;} + +/* cont5 */ +.cont5 .list {display: flex; justify-content: space-between; margin-top: 28px;} +.cont5 .list li {width: calc(100%/3 - 12.5px);} +.cont5 .list li:hover p {text-decoration: underline;} +.cont5 .list li a {display: block;} +.cont5 .list li .imgBox {height: 130px; overflow: hidden; background-color: #e5e5e5;} +.cont5 .list li .imgBox img {height: 100%;} +.cont5 .list li .textBox p {font-size: 18px; font-weight: 300; color: #666; line-height: 1.3; letter-spacing: -0.5px; margin-top: 17px; -webkit-line-clamp: 2; overflow: hidden; display: -webkit-box;} + +@media all and (max-width: 1280px){ + /* main latout */ + .main .inner {padding:60px 20px;} + .cont1 {width:calc(100% - 450px);} + .cont2 {min-width:450px;} + .cont3 .cont3_tit {width:200px;background-position:90% center;} + .cont3 .cont3_cont {width: calc(100% - 200px);} + .cont3 .cont3_tit p {font-size:19px;} + .cont3 .cont3_cont>div {background-position:15px center;} + .cont3 .cont3_cont>div p {font-size:16px;} + .cont3 .cont3_cont>div p a {padding:0 15px 0 80px;} + .cont3 .cont3_cont>div p span {left:80px;bottom:20px;font-size:16px;} + /*.cont3 .cont3_cont .cont3_cont_3 p a, + .cont3 .cont3_cont .cont3_cont_4 p a {padding-top:20px;}*/ +} + +@media all and (max-width: 1024px){ + /* main latout */ + .cont1 {width:100%;} + + .cont2 {width:100%;max-width:100%;min-width:auto;} + .cont2 .cont2-swiper .swiper-slide img {display:none;width:100%;} + .cont2 .cont2-swiper .swiper-slide .mobile_banner {display:block;} + + .cont3 {display:block;} + .cont3 .cont3_tit {width:100%;padding:14px 30px 15px;text-align:left;background-position:right 20px center;border-radius:30px 5px 0 0;} + .cont3 .cont3_cont {display:block;width:100%;height:auto;border-radius:0 0 30px 5px;} + .cont3 .cont3_cont:after {content:'';display:block;clear:both;} + .cont3 .cont3_cont>div {float:left;width:50%;height:80px;line-height:40px;background-position:20px center;box-sizing:border-box;} + .cont3 .cont3_cont>div:after {height:100%;} + .cont3 .cont3_cont>div p {overflow:hidden;} + .cont3 .cont3_cont>div p a {height:80px;justify-content:flex-start;align-items:center;flex-direction:row;} + .cont3 .cont3_cont>div p span {display:none;} + .cont3 .cont3_cont>div p span.mo_text {display:block;float:left;padding:0 4px 0 0;color:#222} + .cont3 .cont3_cont>.cont3_cont_1 {border-bottom:1px solid #cbd0da;} + .cont3 .cont3_cont>.cont3_cont_1 p {padding:0;} + .cont3 .cont3_cont>.cont3_cont_1 span {position:static;left:initial;bottom:initial;} + .cont3 .cont3_cont>.cont3_cont_2 {border-bottom:1px solid #cbd0da;} + .cont3 .cont3_cont>.cont3_cont_2:after {display:none;} + .cont3 .cont3_cont>.cont3_cont_2 p {padding:0;} + .cont3 .cont3_cont>.cont3_cont_2 span {position:static;left:initial;bottom:initial;} +} + +/* 모바일 */ +@media screen and (max-width: 767px){ + /* 1207 - 수정 */ + .main {margin:0;padding:70px 0 0;} + /* //1207 - 수정 */ + .main .inner {padding:0 10px 35px;} + .cont1 {width:100%;} + .cont1 .cont1-swiper .swiper-slide {height:auto;padding:0 0 45px;background-image:url(../images/main/m_cont1_bg1.png);background-size:contain;} + .cont1 .cont1-swiper .swiper-slide .txt1 {font-size:14px;margin:0 0 0 6px;} + .cont1 .cont1-swiper .swiper-slide .txt2 {margin:0 0 0 6px;padding:8px 0 6px;font-size:18px;} + .cont1 .cont1-swiper .swiper-slide span {margin:0 0 0 6px;font-size:14px;} + .cont1 .cont1-swiper .swiper-slide button {width:130px;height:40px;margin:10px 0 0 6px;padding:0 0 0 20px;font-size:14px;background-size:4px auto;background-position:90% center;} + .cont1 .cont1-swiper .slide_button {left:6px;bottom:10px;} + .cont1 .slide_button .swiper-pagination {margin:0;} + .cont1 .slide_button .swiper-pagination .swiper-pagination-bullet {width:7px;height:7px;} + .cont1 .slide_button .swiper-pagination .swiper-pagination-bullet:last-child {margin:0;} + .cont1 .slideStart {width:30px;height:30px;margin:-11px 0 0;background-size:16px 16px;background-position:center center;} + .cont1 .slidePause {width:30px;height:30px;margin:-11px 0 0;background-size:14px 16px;background-position:center center;} + + .cont2 .cont2-swiper .slide_button {height:40px;border-radius:0 0 15px 5px;} + .cont2 .cont2-swiper .slide_button .control, + .cont2 .cont2-swiper .slide_button .slideStart, + .cont2 .cont2-swiper .slide_button .slidePause {margin-top:10px;} + + .cont3 {margin:15px 0 20px;} + .cont3 .cont3_tit {padding:9px 20px 10px;background-size:11px;border-radius:20px 5px 0 0;} + .cont3 .cont3_tit p {font-size:15px;} + .cont3 .cont3_cont {box-shadow:1px 1px 20px 0px rgba(45, 55, 90, 0.15);} + .cont3 .cont3_cont>div {display:flex;height:60px;font-size:14px;line-height:20px;align-items:center;background-size:30px;background-position:10px center;} + .cont3 .cont3_cont>div p {font-size:14px;} + .cont3 .cont3_cont>div p a {height:60px;padding:0 10px 0 50px;} + .cont3 .cont3_cont>div p span {font-size:14px;} + /* .cont3 .cont3_cont>div:first-child p a, + .cont3 .cont3_cont>div:nth-child(2) p a {padding-top:10px;} */ + + .cont4 {width:100%;margin:0 0 20px;padding:20px;border-radius:20px 5px 20px 5px;box-shadow:1px 1px 20px 0px rgba(45, 55, 90, 0.15);} + .cont4 .main_cont_tit p {font-size:20px;} + button.main_more {padding-right:20px;font-size:14px;line-height:20px;background-size:15px;top:20px;right:20px;} + .cont4 .list {margin:17px 0 0;} + .cont4 .list li {margin-bottom: 6px;} + .cont4 .list li a p {width:calc(100% - 80px); font-size:14px;} + .cont4 .list li a p .noticeBox {width:45px; padding:10px 0; font-size:14px;} + .cont4 .list li a > span {font-size:14px;line-height:24px;} + + .cont5 {width:100%;margin:0;padding:20px;border-radius:20px 5px 20px 5px;box-shadow:1px 1px 20px 0px rgba(45, 55, 90, 0.15);} + .cont5 .main_cont_tit p {font-size:20px;} + .cont5 .main_cont_tit button {padding-right:20px;font-size:14px;line-height:20px;background-size:15px;} + .cont5 .list {overflow:hidden;display:block;margin:17px 0 0;} + .cont5 .list li {float:left;width:calc(50% - 18px);} + .cont5 .list li:nth-child(2) {float:right;} + .cont5 .list li:nth-child(n+3) {display:none;} + .cont5 .list li .imgBox {height:auto;} + .cont5 .list li .imgBox img {width:100%;height:auto;} + .cont5 .list li .textBox p {margin:10px 0 0;font-size:14px;} + +} \ No newline at end of file diff --git a/src/main/webapp/visitEdu/usr/publish/script/main.js b/src/main/webapp/visitEdu/usr/publish/script/main.js index 6f5e3c7b..69f344a8 100644 --- a/src/main/webapp/visitEdu/usr/publish/script/main.js +++ b/src/main/webapp/visitEdu/usr/publish/script/main.js @@ -1,108 +1,58 @@ -var main; -var main2; $(document).ready(function () { - /*var mainSwiper = new Swiper('.cont1-swiper',{ + //visual slide + var visualSlide = new Swiper('.visual_slide', { spaceBetween: 30, loop: true, pagination: { - el: ".swiper-pagination", - clickable : true + el: ".visual_slide .swiper-pagination", + clickable: true }, - autoplay:{ - delay:4000 - }, - a11y: { - prevSlideMessage: '이전 슬라이드', - nextSlideMessage: '다음 슬라이드', - slideLabelMessage: '총 {{slidesLength}}장의 슬라이드 중 {{index}}번 슬라이드 입니다.', - }, - }); - - $(".cont1 .slidePause").click(function(){ // 중지버튼 눌렀을때 - if($(this).hasClass('slideStart')){ - mainSwiper.autoplay.start(); - $(this).removeClass('slideStart').attr('title','슬라이드 일시정지'); - }else{ - mainSwiper.autoplay.stop(); - $(this).addClass('slideStart').attr('title','슬라이드 재생'); - } - });*/ - - var mainPopSwiper = new Swiper('.cont2-swiper',{ - spaceBetween: 30, - loop: true, - pagination: { - el: ".swiper-pagination", - type: "fraction" - }, - autoplay:{ - delay:4000 + autoplay: { + delay: 5000 }, navigation: { - nextEl: ".swiper-button-next", - prevEl: ".swiper-button-prev", - }, - a11y: { - prevSlideMessage: '이전 슬라이드', - nextSlideMessage: '다음 슬라이드', - slideLabelMessage: '총 {{slidesLength}}장의 슬라이드 중 {{index}}번 슬라이드 입니다.', - }, + nextEl: '.visual_slide .btn_next_slide', + prevEl: '.visual_slide .btn_prev_slide', + } }); - $(".cont2 .slidePause").click(function(){ // 중지버튼 눌렀을때 - if($(this).hasClass('slideStart')){ - mainPopSwiper.autoplay.start(); - $(this).removeClass('slideStart').attr('title','슬라이드 일시정지'); - }else{ - mainPopSwiper.autoplay.stop(); - $(this).addClass('slideStart').attr('title','슬라이드 재생'); - } - }); + // notify slide + var notifySlide = new Swiper('.notify_slide', { + spaceBetween: 30, + loop: true, + pagination: { + el: ".notify_control .slide_number", + type: "fraction" + }, + autoplay: { + delay: 5000 + }, + navigation: { + nextEl: ".notify_control .swiper-button-next", + prevEl: ".notify_control .swiper-button-prev", + } + }); - //웹접근성 - tabIndex 추가. - $(".swiper-slide-active").children("button").attr("tabIndex", "0") - $(".swiper-slide-active").siblings().children("button").attr("tabIndex", "-1"); - // 웹접근성 - 포커스 시 자동 멈춤 - $(".cont1-swiper .swiper-wrapper button").on("focusin", function () { - mainSwiper.autoplay.stop(); - $('.cont1-swiper .slidePause').addClass('slideStart').attr('title','슬라이드 일시정지'); - }); + $(".visual_slide .slide_pause").click(function () { // 중지버튼 눌렀을때 + if ($(this).hasClass('slide_play')) { + $(this).removeClass('slide_play').attr('title', '슬라이드 일시정지').addClass("slide_pause"); + visualSlide.autoplay.start(); + } else { + $(this).removeClass('slide_pause').attr('title', '슬라이드 재생').addClass("slide_play"); + visualSlide.autoplay.stop(); + } + }); - // 웹접근성 - 포커스아웃 시 자동 - $(".cont1-swiper .swiper-wrapper button").on("focusout", function () { - mainSwiper.autoplay.start(); - $('.cont1-swiper .slidePause').removeClass('slideStart').attr('title','슬라이드 재생'); - }); + $(".notify .slide_pause").click(function () { // 중지버튼 눌렀을때 + if ($(this).hasClass('slide_play')) { + $(this).removeClass('slide_play').attr('title', '슬라이드 일시정지').addClass("slide_pause"); + notifySlide.autoplay.start(); + } else { + $(this).removeClass('slide_pause').attr('title', '슬라이드 재생').addClass("slide_play"); + notifySlide.autoplay.stop(); + } + }); - // 웹접근성 - 포커스 시 자동 멈춤 - /*$(".cont2-swiper").on("focusin", function () { - mainPopSwiper.autoplay.stop(); - $('.cont2-swiper .slidePause').addClass('slideStart').attr('title','슬라이드 재생'); - }); - - // 웹접근성 - 포커스아웃 시 자동 - $(".cont2-swiper").on("focusout", function () { - mainPopSwiper.autoplay.start(); - $('.cont2-swiper .slidePause').removeClass('slideStart').attr('title','슬라이드 일시정지'); - }); -*/ - /*mainSwiper.on("slideChangeTransitionEnd", function () { - $(".swiper-slide-active").children("button").attr("tabIndex", "0") - $(".swiper-slide-active").siblings().children("button").attr("tabIndex", "-1"); - }); */ - - mainPopSwiper.on("slideChangeTransitionEnd", function () { - $(".swiper-slide-active").children("button").attr("tabIndex", "0") - $(".swiper-slide-active").siblings().children("button").attr("tabIndex", "-1"); - }); - -}) - -//main visual control button 클릭시 active 추가 -function slideNum(num,item){ - main.goToSlide(num); - $(item).parent("li").addClass("active"); - $(item).parent("li").siblings("li").removeClass("active") -} \ No newline at end of file +}) \ No newline at end of file diff --git a/src/main/webapp/visitEdu/usr/publish/script/main_bak_231011.js b/src/main/webapp/visitEdu/usr/publish/script/main_bak_231011.js new file mode 100644 index 00000000..6f5e3c7b --- /dev/null +++ b/src/main/webapp/visitEdu/usr/publish/script/main_bak_231011.js @@ -0,0 +1,108 @@ +var main; +var main2; +$(document).ready(function () { + + /*var mainSwiper = new Swiper('.cont1-swiper',{ + spaceBetween: 30, + loop: true, + pagination: { + el: ".swiper-pagination", + clickable : true + }, + autoplay:{ + delay:4000 + }, + a11y: { + prevSlideMessage: '이전 슬라이드', + nextSlideMessage: '다음 슬라이드', + slideLabelMessage: '총 {{slidesLength}}장의 슬라이드 중 {{index}}번 슬라이드 입니다.', + }, + }); + + $(".cont1 .slidePause").click(function(){ // 중지버튼 눌렀을때 + if($(this).hasClass('slideStart')){ + mainSwiper.autoplay.start(); + $(this).removeClass('slideStart').attr('title','슬라이드 일시정지'); + }else{ + mainSwiper.autoplay.stop(); + $(this).addClass('slideStart').attr('title','슬라이드 재생'); + } + });*/ + + var mainPopSwiper = new Swiper('.cont2-swiper',{ + spaceBetween: 30, + loop: true, + pagination: { + el: ".swiper-pagination", + type: "fraction" + }, + autoplay:{ + delay:4000 + }, + navigation: { + nextEl: ".swiper-button-next", + prevEl: ".swiper-button-prev", + }, + a11y: { + prevSlideMessage: '이전 슬라이드', + nextSlideMessage: '다음 슬라이드', + slideLabelMessage: '총 {{slidesLength}}장의 슬라이드 중 {{index}}번 슬라이드 입니다.', + }, + }); + + $(".cont2 .slidePause").click(function(){ // 중지버튼 눌렀을때 + if($(this).hasClass('slideStart')){ + mainPopSwiper.autoplay.start(); + $(this).removeClass('slideStart').attr('title','슬라이드 일시정지'); + }else{ + mainPopSwiper.autoplay.stop(); + $(this).addClass('slideStart').attr('title','슬라이드 재생'); + } + }); + + //웹접근성 - tabIndex 추가. + $(".swiper-slide-active").children("button").attr("tabIndex", "0") + $(".swiper-slide-active").siblings().children("button").attr("tabIndex", "-1"); + + // 웹접근성 - 포커스 시 자동 멈춤 + $(".cont1-swiper .swiper-wrapper button").on("focusin", function () { + mainSwiper.autoplay.stop(); + $('.cont1-swiper .slidePause').addClass('slideStart').attr('title','슬라이드 일시정지'); + }); + + // 웹접근성 - 포커스아웃 시 자동 + $(".cont1-swiper .swiper-wrapper button").on("focusout", function () { + mainSwiper.autoplay.start(); + $('.cont1-swiper .slidePause').removeClass('slideStart').attr('title','슬라이드 재생'); + }); + + // 웹접근성 - 포커스 시 자동 멈춤 + /*$(".cont2-swiper").on("focusin", function () { + mainPopSwiper.autoplay.stop(); + $('.cont2-swiper .slidePause').addClass('slideStart').attr('title','슬라이드 재생'); + }); + + // 웹접근성 - 포커스아웃 시 자동 + $(".cont2-swiper").on("focusout", function () { + mainPopSwiper.autoplay.start(); + $('.cont2-swiper .slidePause').removeClass('slideStart').attr('title','슬라이드 일시정지'); + }); +*/ + /*mainSwiper.on("slideChangeTransitionEnd", function () { + $(".swiper-slide-active").children("button").attr("tabIndex", "0") + $(".swiper-slide-active").siblings().children("button").attr("tabIndex", "-1"); + }); */ + + mainPopSwiper.on("slideChangeTransitionEnd", function () { + $(".swiper-slide-active").children("button").attr("tabIndex", "0") + $(".swiper-slide-active").siblings().children("button").attr("tabIndex", "-1"); + }); + +}) + +//main visual control button 클릭시 active 추가 +function slideNum(num,item){ + main.goToSlide(num); + $(item).parent("li").addClass("active"); + $(item).parent("li").siblings("li").removeClass("active") +} \ No newline at end of file