<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %> <% response.setHeader("Cache-Control","no-store"); response.setHeader("Pragma","no-cache"); response.setDateHeader("Expires",0); if (request.getProtocol().equals("HTTP/1.1")) response.setHeader("Cache-Control", "no-cache"); %> <script type="text/javascript"> $(document).ready(function (){ // <c:if test="${message != null}"> // alert("<c:out value='${message}' />"); // </c:if> //레이어 팝업 띄우기 <c:forEach var="popupListData" items="${popupList}" varStatus="status" end="10"> if(fnGetCookie("layer_<c:out value='${popupListData.popupId}' />") == null){ $("#layer_pop_<c:out value='${popupListData.popupId}' />").fadeIn(); }; </c:forEach> // 팝업 위치 조정 var bdWidth = $("body").width(); popupSet(bdWidth); }); $(window).on("resize",function(){ var bdWidth = $("body").width(); popupSet(bdWidth); }) // 팝업 css 설정 function popupSet(bodyWidth){ let offset = 30; if(bodyWidth>1199){ $(".popup").each(function(idx,itm) { $(this).css({ top: '60px', // 화면 중앙에 위치 left: offset + 'px', // 각 팝업을 가로로 정렬 /* transform: 'translateY(-50%)', // 세로 중앙 정렬 */ position: 'absolute' // 부모 요소 기준으로 위치 설정 }); offset += $(this).outerWidth(true)+30; // 다음 팝업의 위치를 현재 팝업의 너비만큼 이동 }); }else{ $(".popup").each(function(idx,itm) { var zIndex = 1000 - idx; var topPosi = idx * 45; $(this).css({ top: 'calc(1% + '+topPosi+'px)', // 화면 중앙에 위치 left: '30px', // 각 팝업을 가로로 정렬 /* transform: 'translateY(-50%)', // 세로 중앙 정렬 */ position: 'absolute', // 부모 요소 기준으로 위치 설정 "z-index":zIndex }); offset += $(this).outerWidth(true)+30; // 다음 팝업의 위치를 현재 팝업의 너비만큼 이동 }); } } /* ******************************************************** * 팝업창 오픈 쿠키 정보 OPEN ******************************************************** */ function fnGetCookie(name) { var prefix = name + "="; var cookieStartIndex = document.cookie.indexOf(prefix); if (cookieStartIndex == -1) return null; var cookieEndIndex = document.cookie.indexOf(";", cookieStartIndex + prefix.length); if (cookieEndIndex == -1) cookieEndIndex = document.cookie.length; return unescape(document.cookie.substring(cookieStartIndex + prefix.length, cookieEndIndex)); } /* ******************************************************** * 쿠키설정 ******************************************************** */ function fnSetCookiePopup( name, value, expiredays ) { var todayDate = new Date(); todayDate.setDate( todayDate.getDate() + expiredays ); document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";" } //팝업 다시보지않기 function fnPopupCheck(popupId , typeFlag) { fnSetCookiePopup( typeFlag+"_"+popupId , "done" , 1); fn_layerClose(popupId); } //팝업 닫기 function fn_layerClose(popupId){ $("#layer_pop_"+popupId).fadeOut(); } function popzoneOpen(url,target){ var vTarget; if(target != "N"){ vTarget = "_self"; }else{ vTarget = "_blank"; } window.open(url,vTarget); } function fn_egov_inqire_notice(bbsId, nttId) { document.frm.nttId.value = nttId; document.frm.bbsId.value = bbsId; document.frm.method = "post"; document.frm.action = "<c:url value='/web/cop/bbsWeb/selectBoardDetail.do'/>?pubDetail=Y"; document.frm.submit(); } function commonPopWindowopenForm(surl, popupwidth, popupheight, name, frm) { if (popupwidth > screen.width) popupwidth = screen.width; if (popupheight > screen.height) popupheight = screen.height; var top = 0; var left = 0; if (isNaN(parseInt(popupwidth))) { top = (screen.availHeight - 600) / 2; left = (screen.availWidth - 800) / 2; } else { top = (screen.availHeight - popupheight) / 2; left = (screen.availWidth - popupwidth) / 2; } if (top < 0) top = 0; if (left < 0) left = 0; var option = "dependent=yes,fullscreen=no,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,left=" + left + ",top=" + top + ",width=" + popupwidth + ",height=" + popupheight; if (name == null || name == "") { name = "Popup"; } window.open("", name, option); frm.attr('target', name); frm.attr('action', surl); frm.method = "post"; frm.submit(); // 초기화.. frm.attr('target', '_self'); } </script> <!-- 비주얼 --> <c:choose> <c:when test="${not empty mainzoneImg}"> <c:set var="backgroundUrl" value="/uss/ion/pwm/getImage.do?atchFileId=${mainzoneImg.mainzoneImageFile}" /> </c:when> <c:otherwise> <c:set var="backgroundUrl" value="/kofair_case_seed/usr/images/main/main_visual.jpg" /> </c:otherwise> </c:choose> <%-- <div class="visual" style=" width: 100%; padding: 70px 0; background: url('${backgroundUrl}') no-repeat center center; text-align: center; background-size: cover; "> </div> --%> <!-- ============== 메인비주얼 ============== --> <div class="main_visual"> <div class="visual_slide swiper"> <div class="swiper-wrapper"> <a href="#" class="swiper-slide" style="background: url('${backgroundUrl}') no-repeat center center;"></a> <!-- <a href="#" class="swiper-slide"></a> --> </div> </div> <div class="contents"> <div class="inner"> <div class="text_area"> <b class="title">ORGASIS <span class="line">Organellostasis</span></b> <span class="summary"> 소기관 항상성 플랫폼 기술을 활용한 혁신신약 및 <br />항노화 소재 개발 </span> <div class="slide_pagination"> </div> </div> <ul class="box_contents"> <li class="box purple"> <a href="#"> <b class="title">ORGanelle Platform Tech</b> <span class="summary"> 병인, 스트레스, 노화 등 내/외부 자극은 세포 소기관을 손상시키고<br /> 이들의 항상성을 유지하는 selective autophagy의 활성이 감소되거나 결핍되어<br /> 다양한 질환으로 나타나게 됩니다. </span> </a> </li> <li class="box blue"> <a href="#"> <b class="title">ORGASIS Pipeline</b> <span class="summary"> ORGASIS는 손상된 소기관과 노폐물의<br /> 선택적 자가포식 선별기술을 활용한 질환별 맞춤형 신약개발을 통하여<br /> 인류의 건강한 미래와 보다 나은 삶에 기여하고자 합니다 </span> </a> </li> <li class="box skyblue"> <a href="#"> <b class="title">ORGASIS Achievement</b> <span class="summary"> ORGASIS는 손상된 세포 소기관과 과도한 색소체와 응집체를<br /> 선택적 자가포식 기술로 제거하여 항노화 및 Balanced Aging을<br /> 실현하여 건강 노화 및 인류의 장수에 기여하고자 합니다. </span> </a> </li> </ul> </div> </div> </div> <!-- ============== 메인비주얼 끝 ============== --> <c:if test="${fn:length(popupList) > 0}" > <style> .popup { display: none; /* 처음에는 보이지 않도록 설정 */ position: fixed; /* 화면에 고정 */ left: 0; /* 초기 위치 설정 */ top: 50%; /* 화면 중앙에 위치 */ min-width: 400px; /* 팝업 너비 */ height: auto; /* 높이를 내용에 맞게 자동 조정 */ border: 1px solid #e5e5e5; background-color: #f4f5f6; text-align: center; z-index: 1000; /* 다른 요소들 위에 표시되도록 설정 */ box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* 그림자 효과 */ } .popup_wrap{padding:100px 30px;left:0;top:0;z-index:10;} .pop-conts{background:#fff;min-height:250px;font-size:1.4rem;justify-content:center;align-items:center;} .pop-conts a{width:100%;word-break:break-word;} .btn-r{display:flex;height:45px;padding:0 15px;justify-content:space-between;align-items:center;} .today_close{display:flex;font-size:16px;color:#222;gap:8px;align-items:center;} .today_close [type="checkbox"]{width:16px;height:16px;} .btn-layerClose{display:flex;width:30px;height:30px;margin:2px 0 0 0;justify-content:center;align-items:center;} .icon.popup_close{width:16px;height:16px;background:url(/publish/adm/images/component/icon_x.png) no-repeat center center;background-size:100% auto;} @media screen and (max-width: 1199px){ .popup{width:95%;min-width:auto;} .pop-conts{min-height:auto;} .popup_wrap img{height:auto !important;object-fit:contain;} } @media screen and (max-width: 640px){ .popup{width:95% !important;left:50% !important;transform:translateX(-50%);} } </style> <c:forEach var="popupListData" items="${popupList}" varStatus="status" end="4"> <div id="layer_pop_<c:out value='${popupListData.popupId}' />" class="popup"> <div class="pop-container"> <div class="pop-conts"> <c:choose> <c:when test="${not empty popupListData.fileUrl}"> <a href="<c:out value='${popupListData.fileUrl}' />" target="_blank"> ${popupListData.nttCn} </a> </c:when> <c:otherwise> <a href="#"> ${popupListData.nttCn} </a> </c:otherwise> </c:choose> </div> <div class="btn-r"> <div class="today_close"> <c:if test="${popupListData.stopvewSetupAt eq 'Y' }"> <input type="checkbox" id="chkPupup_${status.count}" name="chkPopup" tabindex="1" onClick="fnPopupCheck('<c:out value='${popupListData.popupId}' />' , 'layer')" onkeypress="fnPopupCheck('<c:out value='${popupListData.popupId}' />' , 'layer')" style="display:inline"> <label for="chkPupup_${status.count}">하루동안 창을 열지 않음</label> </c:if> </div> <a href="#" tabindex="1" onclick="fn_layerClose('<c:out value='${popupListData.popupId}' />'); return false;" class="btn-layerClose" title="팝업 닫기"><i class="icon popup_close"></i></a> </div> </div> </div> </c:forEach> </c:if>