KCP 창업 지원, 수수료 국내최저 2.9% 제공 이벤트!

css와 js가 충돌할 수 있나요?

그누보드5
영카트5
스터디
Q & A
제작의뢰
컨텐츠몰
부가서비스
소모임
커뮤니티
부가서비스
KCP 이벤트!
css와 js가 충돌할 수 있나요?

QA

css와 js가 충돌할 수 있나요?

본문

css와 js가 충돌할 수 있나요?

제목 그대로입니다.

 

html 내장 스크립트가 작동하지 않아서

이것저것 빼보다가

css를 빼니 스크립트가 정상 작동되는 것을 보고 매우 당황스러워 질문합니다.

 

이상한 점은

css와 js를 유효성 검토를 하면 에러가 하나도 없다는 것 입니다.

또한 이 문제는 익스플로러와 엣지에서 나타났습니다. (크롬에서는 모든게 정상 작동합니다)

이 글을 내 페이스북 계정으로 보내기 이 글을 내 트위터 계정으로 보내기

이 질문에 댓글 쓰기 :

답변 6

채택됨

백수1995님의 답변

https://www.w3schools.com/jsref/obj_window.asp

보면 scroll 이 Deprecated 되었다고 나오네요 

이 문제는 아닌거 같지만요 ㅠ.ㅠ

 

혹시 문제가 된다면 $(window) 를 $(document) 로 바꿔서 해보시길 추천합니다.

 

충돌이라기 보단 jquery 의 기능 오류로 보입니다. 

 

그런데 보여주신 CSS 에는 hd_down 클래스는 안보이네요?

주소복사
채택됨
답변의 댓글
오동건님의 댓글
인크루드 해서 가져오기때문에 다른 css에서 불러옵니다



<style>
  .header {width: 100%; height:120px; position:fixed; top: 0; left: 0; z-index: 999;
    -webkit-ransition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;}
  .header {background: rgba(0, 0, 0, 0.5); box-shadow: 0 3px 10px rgba(50, 50, 50, 0.2);
    -webkit-ransition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;}
  .header.hd_down {background: rgba(0, 0, 0, 0.5); height: 60px; box-shadow: 0 3px 10px rgba(50, 50, 50, 0.2);
    -webkit-ransition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;}
  .header.hd_down #logo {padding: 10px 0;
    -webkit-ransition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;}
  .header.hd_down #logo a {
    -webkit-ransition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;}
  .header.hd_down #logo img {width: 80px;}
  .header.hd_down #gnb_ul {padding: 10px 0;}
  .header.hd_down .gnb_li > a {color: rgba(255, 255, 255, 0.5);
    -webkit-ransition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;}
  .header.hd_down .gnb_li:hover > a {color: #534988;}

  #gnb .gnb_menu_btn {background: transparent; font-size: 30px!important;}

  #hd_wrapper {position:absolute; top: 0; left: 50%; transform: translateX(-50%); margin:0 auto; height: 100%; zoom:1}
  /* #hd_wrapper:after {display:block;visibility:hidden;clear:both;content:""} */
  #logo {float:left;padding:25px 0 0; width: auto; height: auto;
    -webkit-ransition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;}
  #logo img {width: 140px;
    -webkit-ransition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;}

  #gnb {float: right; background: transparent!important;}

  #gnb_ul {font-size:25px; padding:40px 0; zoom:1; text-align: center; font-family: 'BMJUA', sans-serif!important;
    -webkit-ransition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;}
  .gnb_li {display: inline-block; line-height:100%; padding:0px; min-width: 140px; position:relative;}
  .gnb_li:hover {background: #fff;}
  .gnb_li:last-child {margin-right: 0;}
  .gnb_li:hover > a { color:#534988; text-shadow: 0 5px 5px rgba(255, 255, 255, 0.2);}
  .gnb_li:hover > a::after {width: 100%;}
  .gnb_li:hover .gnb_sub_ul {background: #fff; height: auto;}
  .gnb_li:hover .gnb_sub_ul_box {animation: dropdown 0.5s; }
  @keyframes dropdown {
    0% {height: 0;}
    100% {height: 100%;}
  }
  .gnb_li > a {display: block; line-height: 40px; position: relative; color: rgba(255, 255, 255, 0.5);
    -webkit-ransition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;}
  .gnb_li > a::after {content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: #534988;
    -webkit-ransition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;}
  .gnb_all {display: none;}
  .gnb_a {}
  .gnb_sub_ul {height: 0; overflow: hidden; position:absolute; left: 50%; top: 40px; min-width:140px; max-width: 180px; font-size: 18px;
    -webkit-ransform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-ransition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;}
  .gnb_sub_ul::after {content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: #534988;}
  .gnb_sub_ul_box {padding:0; position: relative; height: auto;}
  .gnb_sub_li {}
  .gnb_sub_li:first-child {margin-top: 10px;}
  .gnb_sub_a {display: block; height: 35px; line-height: 35px; color: #666;}
  .gnb_sub_a:hover {color: #6d63a3;}

  .hd_login {position:absolute;right:0;top:10px; z-index: 999;}
  .hd_login li {float:left;margin:0 5px;border-left:1px solid #616161;padding-left:10px;line-height:13px}
  .hd_login li:first-child {border-left:0}
  .hd_login a {color:#fff}

  #gnb .gnb_wrap {width: auto!important;}
  #gnb .gnb_menu_btn {color:#fff;width:50px;height:55px;border:0;vertical-align:top;font-size:18px}
  #gnb .gnb_close_btn {background: transparent;color:#b6b9bb;width:50px;height:50px;border:0;vertical-align:top;font-size:18px;position:absolute;top:0;right:0}
  #gnb .gnb_mnal {display: none; float:right;padding:0}

  #gnb_all {display:none;position:absolute; left: 0; top: 0; border:1px solid #c5d6da;width:100%;height: 900px; background: #eeecff; z-index:1000;font-family: 'BMJUA', sans-serif!important;
    -webkit-box-s

오동건님의 답변

해당 충돌 css 본문입니다.

 

@charset "utf-8";

@font-face {
    font-family:'KBIZ_han_godic_B';
    font-weight: normal;
    font-style: normal;
    src: url('../fonts/KBIZ_han_godic_B.eot');
    src: url('../fonts/KBIZ_han_godic_B.eot?#iefix') format('embedded-opentype'),
         url('../fonts/KBIZ_han_godic_B.woff') format('woff'),
         url('../fonts/KBIZ_han_godic_B.ttf') format('truetype');
}
@font-face {
    font-family:'BMJUA';
    font-weight: normal;
    font-style: normal;
    src: url('../fonts/BMJUA.eot');
    src: url('../fonts/BMJUA.eot?#iefix') format('embedded-opentype'),
         url('../fonts/BMJUA.woff') format('woff'),
         url('../fonts/BMJUA.ttf') format('truetype');
}
@supports (-ms-ime-align:auto)
{
    html{
        overflow: hidden;
        height: 100%;
    }
    body{
        overflow: auto;
        height: 100%;
        position: relative;
    }
}

/*Ie 10/11*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
{
    html{
        overflow: hidden;
        height: 100%;
    }
    body{
        overflow: auto;
        height: 100%;
    }
}


/* Mobile */
@media screen and (max-width: 800px) {
  html {font-size: 12px;}
  .visual_slide {height: 670px!important;}

  .align_center {display: block; width: 100%!important; min-width: 100%!important; height: auto!important; overflow: hidden;}
  .align_center .main_info {display: block; position: static!important; width: 100%; transform: translate(0,0)!important; left: initial!important; top: initial!important; right: initial!important; bottom: initial!important;}
  .align_center .sub_info {display: block; position: static!important; width: 100%; transform: translate(0,0)!important; left: initial!important; top: initial!important; right: initial!important; bottom: initial!important;}
  .align_center > a {position: static!important; width: 100%!important; height: auto!important; margin: 0!important; left: initial!important; top: initial!important; right: initial!important; bottom: initial!important;}
  .align_center > a > img {width: 100%; margin: 10px 0;}
  .align_center > a::after {display: none;}

  .align_center .align_box {display: block; width: 100%!important; position: static!important; transform: translate(0,0)!important; left: initial!important; top: initial!important; right: initial!important; bottom: initial!important;}
  .align_center .align_box > a {width: 100%!important; position: static!important; display: block!important; margin: 0 auto;}
  .align_center .align_box > a > img {width: 100%!important; padding: 5px!important;}
  .align_center .align_box > a, .align_center .align_box > div {height: auto!important; transform: translate(0,0)!important;}

  #main_4 .align_center .align_box {display: block!important; width: 100%!important; margin: 5px 0!important; height: auto!important;}
  #main_4 .align_center .align_box > a {width: 50%!important;}
  .align_center .align_box > a::before {display: none;}
  .align_center .align_box > a::after {display: none;}

  .sub_info h3 {padding: 0 10px;}
  .sub_info p {padding: 0 10px;}


  #ft_wr {padding: 40px 10px!important;}
  #ft_logo img {display: none;}
}


/* 초기화 */
html { font-size: 20px;}
body {margin:0;padding:0;font-size:0.75em;letter-spacing: -0.5px; font-family:'Noto Sans KR', sans-serif;background:#fff}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-family:'Noto Sans KR', sans-serif}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}

ul, dl,dt,dd {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle;font-size:1em}
input, button {margin:0;padding:0;font-family:'Noto Sans KR', sans-serif;font-size:1em}
input[type="submit"] {cursor:pointer}
button {cursor:pointer}

textarea, select {font-family:'Noto Sans KR', sans-serif;font-size:1em}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#000;text-decoration:none}

*, :after, :before {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

input[type=text],input[type=password], textarea {
-webkit-transition:all 0.30s ease-in-out;
-moz-transition:all 0.30s ease-in-out;
-ms-transition:all 0.30s ease-in-out;
-o-transition:all 0.30s ease-in-out;
outline:none;
}

input[type=text]:focus,input[type=password]:focus, textarea:focus,select:focus {
-webkit-box-shadow:0 0 5px #9ed4ff;
-moz-box-shadow:0 0 5px #9ed4ff;
box-shadow:0 0 5px #9ed4ff;
border:1px solid #558ab7 !important;
}

.placeholdersjs {color:#aaa !important}

/* 레이아웃 크기 지정 */
#hd, #wrapper, #ft {}

#hd_pop,
#hd_wrapper,
#tnb .inner,

/* #gnb .gnb_wrap, */
/* #container_wr, */
#ft_wr {max-width:1200px; width: 100%;}

/* 팝업레이어 */
#hd_pop {z-index:1000;position:relative;margin:0 auto;height:0}
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff}
.hd_pops img {max-width:100%}
.hd_pops_con {}
.hd_pops_footer {padding:0;background:#000;color:#fff;text-align:left;position:relative}
.hd_pops_footer:after {display:block;visibility:hidden;clear:both;content:""}
.hd_pops_footer button {padding:10px;border:0;color:#fff}
.hd_pops_footer .hd_pops_reject {background:#000;text-align:left}
.hd_pops_footer .hd_pops_close {background:#393939;position:absolute;top:0;right:0}

/* 상단 레이아웃 */
#hd {}
#hd_h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}

#tnb {border-bottom:1px solid #383838;margin:0 auto}
#tnb:after {display:block;visibility:hidden;clear:both;content:""}
#tnb .inner {margin:0 auto}

#hd_wrapper {position:absolute;top: 0; left: 50%; transform: translateX(-50%); z-index: 999; margin:0 auto;height:120px;zoom:1}
#hd_wrapper:after {display:block;visibility:hidden;clear:both;content:""}

#logo {float:left;padding:25px 0 0}

.hd_sch_wr {float:left;padding:30px 0;;width:445px;margin-left:65px}
#hd_sch h3 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#hd_sch {border-radius:30px;overflow:hidden}
#hd_sch #sch_stx {float:left;width:385px;height:45px;padding-left:10px;border-radius:30px 0 0 30px;background:#2c2c2c;border:0;border-right:0;font-size:1.25em;color:#fff}
#hd_sch #sch_submit {float:left;width:60px;height:45px;border:0;background:#2c2c2c;color:#fff;border-radius:0 30px 30px 0;cursor:pointer;font-size:16px}

#hd_qnb {float:right;text-align:right}
#hd_qnb:after {display:block;visibility:hidden;clear:both;content:""}
#hd_qnb li {float:left;font-size:1.083em;line-height:14px;border-right:1px solid #4a4a4a;position:relative;text-align:center;margin:15px 10px 15px 0;padding-right:10px}
#hd_qnb li:last-child {padding-right:0;margin-right:0;border-right:0}
#hd_qnb li span {display:block;margin-top:5px;font-size:0.92em}
#hd_qnb li a {display:inline-block;color:#919191}
#hd_qnb .visit .visit-num {display:inline-block;line-height:16px;padding:0 5px;margin-left:5px;border-radius:10px;background:#da22f5;color:#fff;font-size:10px}


.hd_login {position:absolute;right:0;top:10px; z-index: 999;}
.hd_login li {float:left;margin:0 5px;border-left:1px solid #616161;padding-left:10px;line-height:13px}
.hd_login li:first-child {border-left:0}
.hd_login a {color:#fff}


/* 메인메뉴 */
#gnb {position:relative;}
#gnb > h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#gnb .gnb_wrap {margin:0 auto;position:relative}
#gnb .gnb_wrap:hover, #gnb .gnb_wrap:focus, #gnb .gnb_wrap:active{z-index:3}
#gnb #gnb_1dul {font-size:22px;padding:48px 0;zoom:1; width: 680px; float: right; font-family: 'MalgunGothic', sans-serif;}
#gnb ul:after {display:block;visibility:hidden;clear:both;content:""}
#gnb .gnb_1dli {float:left;line-height:24px;padding:0px;position:relative}
#gnb .gnb_1dli:hover > a {color:#534988;
-webkit-transition:background-color 2s ease-out;
-moz-transition:background-color 0.3s ease-out;
-o-transition:background-color 0.3s ease-out;
transition:background-color 0.3s ease-out}
#gnb .gnb_1dli:hover .gnb_2dul {background: rgba(255, 255, 255,0.2);
-webkit-transition:background-color 2s ease-out;
-moz-transition:background-color 0.3s ease-out;
-o-transition:background-color 0.3s ease-out;
transition:background-color 0.3s ease-out}

.gnb_1dli .bg {position:absolute;top:24px;right:8px;display:inline-block;width:10px;height:10px;overflow:hidden;background:url('./images/gnb_bg2.gif') no-repeat 50% 50%;text-indent:-999px}
.gnb_1da {display:block;font-weight: 600; line-height:40px; padding:0 12px;color:rgba(0, 0, 0,0.5);text-decoration:none;}
/* .gnb_1dli.gnb_al_li_plus .gnb_1da{padding-right:25px} */
.gnb_2dli:first-child {border:0}
.gnb_2dul {display: none; position:absolute;top:40px;min-width:140px;max-width: 180px; padding-top:2px; font-size: 18px;}
.gnb_2dul .gnb_2dul_box {padding:0; position: relative;}
.gnb_2dul .gnb_2dul_box::before {content: ""; width: 100%; height: 2px; background: #fff; position: absolute; left: 50%; top: 0; transform: translateX(-50%);}
.gnb_2da {display:block; padding:0 10px;line-height:30px;color:rgba(0, 0, 0,0.5); text-align:left;text-decoration:none}
a.gnb_2da:hover {color:#534988;
-moz-transition:all 0.3s ease-out;
-o-transition:all 0.3s ease-out;
transition:all 0.3s ease-out}

.gnb_1dli_air .gnb_2da {}
.gnb_1dli_on .gnb_2da {opacity: 1;}
.gnb_2da:focus, .gnb_2da:hover {color:rgba(255, 255, 255, 0.2);}
.gnb_1dli_over .gnb_2dul {display:block;left:0}
.gnb_1dli_over2 .gnb_2dul {display:block;right:0}
.gnb_wrap .gnb_empty {padding:10px 0;width:100%;text-align:center;line-height:2.7em;color:#080808}
.gnb_wrap .gnb_empty a {color:#534988;text-decoration:underline}
.gnb_wrap .gnb_al_ul .gnb_empty, .gnb_wrap .gnb_al_ul .gnb_empty a {color:#555}

#gnb .gnb_menu_btn {background:#534988;color:#fff;width:50px;height:55px;border:0;vertical-align:top;font-size:18px}
#gnb .gnb_close_btn {background:#fff;color:#b6b9bb;width:50px;height:50px;border:0;vertical-align:top;font-size:18px;position:absolute;top:0;right:0}
#gnb .gnb_mnal {display: none; float:right;padding:0}

#gnb_all {display:none;position:absolute;border:1px solid #c5d6da;width:100%;background:#fff;z-index:1000;-webkit-box-shadow:0 2px 5px rgba(0,0,0,0.2);
-moz-box-shadow:0 2px 5px rgba(0,0,0,0.2);
box-shadow:0 2px 5px rgba(0,0,0,0.2)}
#gnb_all h2 {font-size:1.3em;padding:15px 20px;border-bottom:1px solid #e7eeef}
#gnb_all .gnb_al_ul:after {display:block;visibility:hidden;clear:both;content:""}
#gnb_all .gnb_al_ul > li:nth-child(5n+1) {border-left:0}
#gnb_all .gnb_al_li {float:left;width:20%;min-height:150px;padding:20px;border-left:1px solid #e7eeef}
#gnb_all .gnb_al_li .gnb_al_a {font-size:1.2em;display:block;position:relative;margin-bottom:10px;font-weight:bold;color:#3a8afd}
#gnb_all .gnb_al_li li {line-height:2em}
#gnb_all .gnb_al_li li a {color:#555}
#gnb_all_bg {display:none;background:rgba(0,0,0,0.1);width:100%;height:100%;position:fixed;left:0;top:0;z-index:999}

/* 중간 레이아웃 */
#wrapper {}
#container_wr:after {display:block;visibility:hidden;clear:both;content:""}
#container_wr {margin:0 auto;height:100%;zoom:1}
#aside {float:right;width:235px;padding:0;height:100%;margin:20px 0 20px 20px}

#container {position:relative;float:left;min-height:800px;height:auto !important;margin:0;font-size:1em;width:100%;zoom:1}
#container:after {display:block;visibility:hidden;clear:both;content:""}
#container_title {font-size:1.333em;margin:0 auto;font-weight:bold}
#container_title span {margin:0 auto 10px;display:block;line-height:30px}

.lt_wr {width:32%}
.lt_wr:nth-child(3n+1) {clear:both}
.latest_wr {margin-bottom:20px}
.latest_wr:after {display:block;visibility:hidden;clear:both;content:""}
.latest_top_wr {margin:0 -10px 20px}
.latest_top_wr:after {display:block;visibility:hidden;clear:both;content:""}


/* 페이지 */
.page {width: 100%; overflow: hidden; height: auto;}
.pad {padding: 160px 0;}
.visual_slide {height: 937px;}
.align_center {min-width: 1200px; width: 100%; max-width: 1902px; min-height: 480px; margin: 0 auto; position: relative;}

/* main_info */
.main_info {width: 386px; padding: 62px 36px 36px; background-color: #fff; box-sizing: border-box;}
.main_info h2 {font-size: 36px; font-weight: 600; color: #333; line-height: 36px;}
.main_info ul {margin-top: 62px; display: block;}
.main_info ul li {margin-bottom: 20px; font-size: 14px; color: #777; font-family: 'Nanum Gothic', sans-serif;}
.main_info ul li:first-child {margin-bottom: 35px;}
.main_info ul li.done {margin-bottom: 20px!important;}
.main_info ul li:last-child {margin-bottom: 0;}

.sub_info {position: absolute;}
.sub_info h3 {font-size: 40px; color: #534988; font-weight: 300; line-height: 40px;}
.sub_info p {font-size: 18px; font-weight: 300; color: #666;}

/* 테이블 오버 */
.table_box {overflow: auto;}
.table_box::after {content: "밀어서 더 많은 정보를 확인 할 수 있습니다."; width: 100%; height: 20px; font-size: 0.8rem; color: #cc0000; text-align: left;font-weight: 300; padding: 0 10px;}


/* 메인 버튼 */
.info_button {display: block; width: 100%; padding: 6px; text-align: left; border-bottom: 1px solid #999; position: relative; box-sizing: border-box; transition: all 1s ease;}
.info_button::after {content: ""; position: absolute; width: 1px; height: 50%; left: 0; bottom: 0; background-color: #999; transition: all 1s ease;}
.info_button::before {content: ""; position: absolute; width: 0; height: 1px; left: 100%; bottom: -1px; transform: translateX(-100%);background-color: #fff; transition: all 1s ease;}
.info_button span:nth-of-type(1) {display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(0.25turn,#eeecff, #eff6ff); opacity: 0; transition: all 1s ease;}
.info_button span:nth-of-type(2) {display: block; position: relative; left: 0; display: inline-block; font-size: 16px; color: #333; font-weight: 600; font-family:'Noto Sans KR', sans-serif; transition: all 1s ease;}
.info li:hover .info_button::before {width: 100%; z-index: 10;}
.info li:hover .info_button::after {height: 0;}
.info li:hover .info_button span:nth-of-type(1) {opacity: 1;}
.info li:hover .info_button span:nth-of-type(2) {transform: translateX(-50%); left: 50%; color: #534988;}


/* 개별 페이지 */
#main_1 {background-color: #eeecff;}
#main_1 .align_center {height: 956px;}
#main_1 .align_center .main_info {position: absolute; left: calc(50% - 407px); transform: translateX(-50%);}
#main_1 .align_center > a {position: absolute; overflow: hidden; transform: translateX(-50%);}
#main_1 .align_center > a:nth-of-type(1) {width: 1141px; height: 726px; left: calc(50% + 380px);}
#main_1 .align_center > a:nth-of-type(2) {width: 736px; height: 544px; left: calc(50% - 582px); top: calc(399px + 21px);}
#main_1 .align_center > a::after {content: ""; width: calc(100% - 20px); height: calc(100% - 20px); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px solid #fff; opacity: 0; transition: all 0.5s ease;}
#main_1 .align_center > a:hover:after {opacity: 1;}
#main_1 .align_center .sub_info {left: calc(50% + 120px); top: calc(726px + 21px); transform: translateX(-50%);}

#main_2 {background-color: #eff6ff;}
#main_2 .align_center {height: 956px;}
#main_2 .align_center .main_info {position: absolute; left: calc(50% + 407px); transform: translateX(-50%);}
#main_2 .align_center > a {position: absolute; overflow: hidden; transform: translateX(-50%);}
#main_2 .align_center > a:nth-of-type(1) {width: 1141px; height: 726px; left: calc(50% - 380px);}
#main_2 .align_center > a:nth-of-type(2) {width: 736px; height: 544px; left: calc(50% + 582px); top: calc(399px + 21px);}
#main_2 .align_center > a::after {content: ""; width: calc(100% - 20px); height: calc(100% - 20px); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px solid rgba(255,255,255,0.5); opacity: 0; transition: all 0.5s ease;}
#main_2 .align_center > a:hover:after {opacity: 1;}
#main_2 .align_center .sub_info {text-align: right; left: calc(50% - 190px); top: calc(726px + 21px); transform: translateX(-50%);}

#main_3 {background-image: url('/imgs/main/page_3_background.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; background-attachment: fixed;}
#main_3 .align_center p {width: 340px; position: absolute; font-size: 1rem; color: #fff; font-family: 'Nanum Gothic', sans-serif; left: calc(50% - 406px); top: 100px; transform: translateX(-50%);}
#main_3 .align_center p b {font-size: 2.5rem;}
#main_3 .align_center {height: 1149px;}
#main_3 .align_center .align_box {position: absolute; width: 794px; left: calc(50% + 193px); top: 100px; transform: translateX(-50%);}
#main_3 .align_center .align_box > a, #main_3 .align_center .align_box > div {display: inline-block; height: 292px; float: left; margin-bottom: 21px;}
#main_3 .align_center .align_box > a {position: relative; overflow: hidden;}
#main_3 .align_center .align_box > a > img {transition: all 1s ease;}
#main_3 .align_center .align_box > a:nth-of-type(1) {margin-right: 21px;}
#main_3 .align_center .align_box > div:nth-of-type(2) {margin-right: 21px;}
#main_3 .align_center .align_box > a::after {content: ""; width: calc(100% - 10px); height: calc(100% - 10px); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px solid #fff; opacity: 0; transition: all 0.5s ease;}
#main_3 .align_center .align_box > a::before {content: ""; position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; background: #000; opacity: 0;}
#main_3 .align_center .align_box > a:hover:after {opacity: 1;}
#main_3 .align_center .align_box > a:hover img {transform: scale(1.2);}
#main_3 .align_center .align_box > a:hover:before {opacity: 0.5;}

#main_4 {background-color: #effffd;}
#main_4 .align_center {width: 1200px; height: 613px;}
#main_4 .align_center .main_info {display: inline-block; float: left;}
#main_4 .align_center .main_info:nth-of-type(1) {margin-bottom: 21px;}
#main_4 .align_center > a {display: inline-block; float: left; position: relative;}
#main_4 .align_center > a::after {content: ""; width: calc(100% - 10px); height: calc(100% - 10px); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px solid #fff; opacity: 0; transition: all 0.5s ease;}
#main_4 .align_center > a:hover:after {opacity: 1;}
#main_4 .align_center > a:nth-of-type(1) {margin: 0 21px; margin-bottom: 21px; width: 386px; height: 306px;}
#main_4 .align_center > a:nth-of-type(2) {margin-right: 21px;}
#main_4 .align_center #item_main > img {transition: all 0.5s ease;}
#main_4 .align_center #item_main::after {opacity: 0;}
#main_4 .align_center #item_main:hover img {transform: scale(1.1); box-shadow: 0px 5px 10px rgba(50, 50, 50, 0.2);}
#main_4 .align_center #item_main:hover {z-index: 10;}
#main_4 .align_center .align_box {display: inline-block; width: 386px; height: 306px; margin-bottom: 21px;}
#main_4 .align_center .align_box > a {display: inline-block; float: left; position: relative;}
#main_4 .align_center .align_box > a > img {transition: all 0.5s ease;}
#main_4 .align_center .align_box > a:hover:after {opacity: 1;}
#main_4 .align_center .align_box > a:hover img {transform: scale(1.1); box-shadow: 0px 3px 10px rgba(50, 50, 50, 0.2);}
#main_4 .align_center .align_box > a:hover {z-index: 10;}


/* 하단 레이아웃 */
#ft {background:#212020;margin:0 auto; width: 100%; text-align:center}
#ft h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#ft_wr {max-width:1240px;margin:0 auto; padding:40px 0;position:relative;display:block;text-align:left}
#ft_wr:after {display:block;visibility:hidden;clear:both;content:""}
#ft_wr .ft_cnt:first-of-type {width:25%;}
#ft_wr .ft_cnt {width:75%;float:left;}
#ft_logo {padding: 0 75px 0 52px;}
#ft_logo img {margin: 0 auto;}
#ft_link {text-align:left; width: 100%;}
#ft_link a {display:inline-block;color:#797979;line-height:1rem;font-weight:bold; margin-right: 10px; font-size: 13px;}
#ft_company h2 {font-size:1rem;margin-bottom:20px}
#ft_company {font-weight:normal; color: #575757; line-height: 1rem;;}
#ft_company p.ft_info {color: #575757!important;}
#ft_catch {margin:20px 0 10px}
#ft_copy {color:#575757;font-size:0.6rem;}
#ft_copy a {color: #878787;}
#top_btn {position:fixed;bottom:20px;right:20px;width:50px;height:50px;line-height:46px;border:2px solid #534988;color:#534988;text-align:center;font-size:15px;z-index:90;background:rgba(255,255,255,0.5)}
#top_btn:hover {background:#534988;color:#fff}

/* 게시물 선택복사 선택이동 */
#copymove {}
#copymove .win_desc {text-align:center;display:block}
#copymove .tbl_wrap {margin:20px}
#copymove .win_btn {padding:0 20px 20px}
.copymove_current {float:right;background:#ff3061;padding:5px;color:#fff;border-radius:3px}
.copymove_currentbg {background:#f4f4f4}

/* 화면낭독기 사용자용 */
#hd_login_msg {position:absolute;top:0;left:0;font-size:0;line-height:0;overflow:hidden}
.msg_sound_only, .sound_only {display:inline-block !important; width: 0!important; height: 0!important; position:absolute;top:0;left:0;width:0;height:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}

/* 본문 바로가기 */
#skip_to_container a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skip_to_container a:focus, #skip_to_container a:active {width:100%;height:75px;background:#21272e;color:#fff;font-size:2em;font-weight:bold;text-align:center;text-decoration:none;line-height:3.3em}

/* ie6 이미지 너비 지정 */
.img_fix {width:100%;height:auto}

/* 캡챠 자동등록(입력)방지 기본 -pc */
#captcha {display:inline-block;position:relative}
#captcha legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
#captcha #captcha_img {height:40px;border:1px solid #898989;vertical-align:top;padding:0;margin:0}
#captcha #captcha_mp3 {margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../img/captcha2.png') no-repeat;text-indent:-999px;border-radius:3px}
#captcha #captcha_reload {margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../img/captcha2.png') no-repeat 0 -40px;text-indent:-999px;border-radius:3px}
#captcha #captcha_key {margin:0 0 0 3px;padding:0 5px;width:90px;height:40px;border:1px solid #ccc;background:#fff;font-size:1.333em;font-weight:bold;text-align:center;border-radius:3px;vertical-align:top}
#captcha #captcha_info {display:block;margin:5px 0 0;font-size:0.95em;letter-spacing:-0.1em}

/* 캡챠 자동등록(입력)방지 기본 - mobile */
#captcha.m_captcha audio {display:block;margin:0 0 5px;width:187px}
#captcha.m_captcha #captcha_img {width:160px;height:60px;border:1px solid #e9e9e9;margin-bottom:3px;margin-top:5px;display:block}
#captcha.m_captcha #captcha_reload {position:static;margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../img/captcha2.png') no-repeat 0 -40px;text-indent:-999px}
#captcha.m_captcha #captcha_reload span {display:none}
#captcha.m_captcha #captcha_key {margin:0;padding:0 5px;width:115px;height:29px;border:1px solid #b8c9c2;background:#f7f7f7;font-size:1.333em;font-weight:bold;text-align:center;line-height:29px;margin-left:3px}
#captcha.m_captcha #captcha_info {display:block;margin:5px 0 0;font-size:0.95em;letter-spacing:-0.1em}
#captcha.m_captcha #captcha_mp3 {width:31px;height:31px;background:url('../img/captcha2.png') no-repeat 0 0 ; vertical-align:top;overflow:hidden;cursor:pointer;text-indent:-9999px;border:none}

/* ckeditor 단축키 */
.cke_sc {margin:0 0 5px;text-align:right}
.btn_cke_sc {display:inline-block;padding:0 10px;height:23px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none;line-height:1.9em;vertical-align:middle;cursor:pointer}
.cke_sc_def {margin:0 0 5px;padding:10px;border:1px solid #ccc;background:#f7f7f7;text-align:center}
.cke_sc_def dl {margin:0 0 5px;text-align:left;zoom:1}
.cke_sc_def dl:after {display:block;visibility:hidden;clear:both;content:""}
.cke_sc_def dt, .cke_sc_def dd {float:left;margin:0;padding:5px 0;border-bottom:1px solid #e9e9e9}
.cke_sc_def dt {width:20%;font-weight:bold}
.cke_sc_def dd {width:30%}

/* ckeditor 태그 기본값 */
#bo_v_con ul {display:block;list-style-type:disc;margin-top:1em;margin-bottom:1em;margin-left:0;margin-right:0;padding-left:40px}
#bo_v_con ol {display:block;list-style-type:decimal;margin-top:1em;margin-bottom:1em;margin-left:0;margin-right:0;padding-left:40px}
#bo_v_con li {display:list-item}

/* 버튼 */
a.btn,.btn {line-height:35px;height:35px;padding:0 10px;text-align:center;font-weight:bold;border:0;font-size:1.4em;
-webkit-transition:background-color 0.3s ease-out;
-moz-transition:background-color 0.3s ease-out;
-o-transition:background-color 0.3s ease-out;
transition:background-color 0.3s ease-out}

a.btn01 {display:inline-block;padding:7px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none;vertical-align:middle}
a.btn01:focus, a.btn01:hover {text-decoration:none}
button.btn01 {display:inline-block;margin:0;padding:7px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none}
a.btn02 {display:inline-block;padding:7px;border:1px solid #3b3c3f;background:#4b545e;color:#fff;text-decoration:none;vertical-align:middle}
a.btn02:focus, .btn02:hover {text-decoration:none}
button.btn02 {display:inline-block;margin:0;padding:7px;border:1px solid #3b3c3f;background:#4b545e;color:#fff;text-decoration:none}

.btn_confirm {text-align:right} /* 서식단계 진행 */

.btn_submit {border:0;background:#3a8afd;color:#fff;cursor:pointer;border-radius:3px}
.btn_submit:hover {background:#2375eb}
.btn_close {border:1px solid #dcdcdc;cursor:pointer;border-radius:3px;background:#fff}
a.btn_close {text-align:center;line-height:50px}

a.btn_cancel {display:inline-block;background:#969696;color:#fff;text-decoration:none;vertical-align:middle}
button.btn_cancel {display:inline-block;background:#969696;color:#fff;text-decoration:none;vertical-align:middle}
.btn_cancel:hover {background:#aaa}
a.btn_frmline, button.btn_frmline {display:inline-block;width:128px;padding:0 5px;height:40px;border:0;background:#434a54;border-radius:3px;color:#fff;text-decoration:none;vertical-align:top} /* 우편번호검색버튼 등 */
a.btn_frmline {}
button.btn_frmline {font-size:1em}

/* 게시판용 버튼 */
a.btn_b01,.btn_b01 {display:inline-block;color:#bababa;text-decoration:none;vertical-align:middle;border:0;background:transparent}
.btn_b01:hover, .btn_b01:hover {color:#000}
a.btn_b02,.btn_b02 {display:inline-block;background:#253dbe;padding:0 10px;color:#fff;text-decoration:none;border:0;vertical-align:middle}
a.btn_b02:hover, .btn_b02:hover {background:#0025eb}
a.btn_b03, .btn_b03 {display:inline-block;background:#fff;border:1px solid #b9bdd3;color:#646982;text-decoration:none;vertical-align:middle}
a.btn_b03:hover, .btn_b03:hover {background:#ebedf6}
a.btn_b04, .btn_b04 {display:inline-block;background:#fff;border:1px solid #ccc;color:#707070;text-decoration:none;vertical-align:middle}
a.btn_b04:hover, .btn_b04:hover {color:#333;background:#f9f9f9}
a.btn_admin,.btn_admin {display:inline-block;color:#d13f4a;text-decoration:none;vertical-align:middle} /* 관리자 전용 버튼 */
.btn_admin:hover, a.btn_admin:hover {color:#ff3746}


/* 기본테이블 */
.tbl_wrap table {width:100%;border-collapse:collapse;border-spacing:0 5px;background:#fff;border-top:1px solid #ececec;border-bottom:1px solid #ececec}
.tbl_wrap caption {padding:10px 0;font-weight:bold;text-align:left}
.tbl_head01 {margin:0 0 10px}
.tbl_head01 caption {padding:0;font-size:0;line-height:0;overflow:hidden}
.tbl_head01 thead th {padding:20px 0;font-weight:normal;text-align:center;border-bottom:1px solid #ececec;height:40px}
.tbl_head01 thead th input {vertical-align:top} /* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */
.tbl_head01 tfoot th, .tbl_head01 tfoot td {padding:10px 0;border-top:1px solid #c1d1d5;border-bottom:1px solid #c1d1d5;background:#d7e0e2;text-align:center}
.tbl_head01 tbody th {padding:8px 0;border-bottom:1px solid #e8e8e8}
.tbl_head01 td {color:#666;padding:10px 5px;border-top:1px solid #ecf0f1;border-bottom:1px solid #ecf0f1;line-height:1.4em;height:60px;word-break:break-all}
.tbl_head01 tbody tr:hover td {background:#fafafa}
.tbl_head01 a:hover {text-decoration:underline}

.tbl_head02 {margin:0 0 10px}
.tbl_head02 caption {padding:0;font-size:0;line-height:0;overflow:hidden}
.tbl_head02 thead th {padding:5px 0;border-top:1px solid #d1dee2;border-bottom:1px solid #d1dee2;background:#e5ecef;color:#383838;font-size:0.95em;text-align:center;letter-spacing:-0.1em}
.tbl_head02 thead a {color:#383838}
.tbl_head02 thead th input {vertical-align:top} /* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */
.tbl_head02 tfoot th, .tbl_head02 tfoot td {padding:10px 0;border-top:1px solid #c1d1d5;border-bottom:1px solid #c1d1d5;background:#d7e0e2;text-align:center}
.tbl_head02 tbody th {padding:5px 0;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:#fff}
.tbl_head02 td {padding:5px 3px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:#fff;line-height:1.4em;word-break:break-all}
.tbl_head02 a {}

/* 폼 테이블 */
.tbl_frm01 {margin:0 0 20px}
.tbl_frm01 table {width:100%;border-collapse:collapse;border-spacing:0}
.tbl_frm01 th {width:70px;padding:7px 13px;border:1px solid #e9e9e9;border-left:0;background:#f5f8f9;text-align:left}
.tbl_frm01 td {padding:7px 10px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:transparent}
.wr_content textarea,.tbl_frm01 textarea,.form_01 textarea, .frm_input {border:1px solid #d0d3db;background:#fff;color:#000;vertical-align:middle;border-radius:3px;padding:5px;
-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);
-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);
}
.tbl_frm01 textarea {padding:2px 2px 3px}
.frm_input {height:40px}

.full_input {width:100%}
.half_input {width:49.5%}
.twopart_input {width:385px;margin-right:10px}
.tbl_frm01 textarea, .write_div textarea {width:100%;height:100px}
.tbl_frm01 a {text-decoration:none}
.tbl_frm01 .frm_file {display:block;margin-bottom:5px}
.tbl_frm01 .frm_info {display:block;padding:0 0 5px;line-height:1.4em}

/*기본 리스트*/
.list_01 ul {border-top:1px solid #ececec}
.list_01 li {border-bottom:1px solid #ececec;background:#fff;padding:10px 15px;list-style:none;position:relative}
.list_01 li:nth-child(odd) {background:#f6f6f6}
.list_01 li:after {display:block;visibility:hidden;clear:both;content:""}
.list_01 li:hover {background:#f9f9f9}
.list_01 li.empty_li {text-align:center;padding:20px 0;color:#666}

/*폼 리스트*/
.form_01 h2 {font-size:1.167em}
.form_01 li {margin-bottom:10px}
.form_01 ul:after,
.form_01 li:after {display:block;visibility:hidden;clear:both;content:""}
.form_01 .left_input {float:left}
.form_01 .margin_input {margin-right:1%}
.form_01 textarea {height:100px;width:100%}
.form_01 .frm_label {display:inline-block;width:130px}

/* 자료 없는 목록 */
.empty_table {padding:50px 0 !important;text-align:center}
.empty_list {padding:20px 0 !important;color:#666;text-align:center}

/* 필수입력 */
.required, textarea.required {background-image:url('../img/require.png') !important;background-repeat:no-repeat !important;background-position:right top !important}

/* 테이블 항목별 정의 */
.td_board {width:80px;text-align:center}
.td_category {width:80px;text-align:center}
.td_chk {width:30px;text-align:center}
.td_date {width:60px;text-align:center}
.td_datetime {width:110px;text-align:center}
.td_group {width:80px;text-align:center}
.td_mb_id {width:100px;text-align:center}
.td_mng {width:80px;text-align:center}
.td_name {width:100px;text-align:left}
.td_nick {width:100px;text-align:center}
.td_num {width:50px;text-align:center}
.td_numbig {width:80px;text-align:center}
.td_stat {width:60px;text-align:center}

.txt_active {color:#5d910b}
.txt_done {color:#e8180c}
.txt_expired {color:#ccc}
.txt_rdy {color:#8abc2a}

/* 새창 기본 스타일 */
.new_win {position:relative}
.new_win .tbl_wrap {margin:0 20px}
.new_win #win_title {font-size:1.3em;height:50px;line-height:30px;padding:10px 20px;background:#fff;color:#000;-webkit-box-shadow:0 1px 10px rgba(0,0,0,.1);
-moz-box-shadow:0 1px 10px rgba(0,0,0,.1);
box-shadow:0 1px 10px rgba(0,0,0,.1)}
.new_win #win_title .sv {font-size:0.75em;line-height:1.2em}
.new_win .win_ul {margin-bottom:15px;padding:0 20px}
.new_win .win_ul:after {display:block;visibility:hidden;clear:both;content:""}
.new_win .win_ul li {float:left;background:#fff;text-align:center;padding:0 10px;border:1px solid #d6e9ff;border-radius:30px;margin-left:5px}
.new_win .win_ul li:first-child {margin-left:0}
.new_win .win_ul li a {display:block;padding:8px 0;color:#6794d3}
.new_win .win_ul .selected {background:#3a8afd;border-color:#3a8afd;position:relative;z-index:5}
.new_win .win_ul .selected a {color:#fff;font-weight:bold}
.new_win .win_desc {position:relative;margin:10px;border-radius:5px;font-size:1em;background:#f2838f;color:#fff;line-height:50px;text-align:left;padding:0 20px}
.new_win .win_desc i {font-size:1.2em;vertical-align:baseline}
.new_win .win_desc:after {content:"";position:absolute;left:0;top:0;width:4px;height:50px;background:#da4453;border-radius:3px 0 0 3px}
.new_win .frm_info {font-size:0.92em;color:#919191}
.new_win .win_total {float:right;display:inline-block;line-height:30px;font-weight:normal;font-size:0.75em;color:#3a8afd;background:#f6f6f6;padding:0 10px;border-radius:5px}
.new_win .new_win_con {margin:20px 0;padding:20px}
.new_win .new_win_con:after {display:block;visibility:hidden;clear:both;content:""}
.new_win .new_win_con2 {margin:20px 0}
.new_win .btn_confirm:after {display:block;visibility:hidden;clear:both;content:""}
.new_win .win_btn {text-align:center}
.new_win .btn_close {height:45px;width:60px;overflow:hidden;cursor:pointer}
.new_win .btn_submit {padding:0 20px;height:45px;font-weight:bold;font-size:1.083em}

/* 검색결과 색상 */
.sch_word {color:#fff;background:#ff005a;padding:2px 5px 3px;line-height:18px;margin:0 2px}

/* 자바스크립트 alert 대안 */
#validation_check {margin:100px auto;width:500px}
#validation_check h1 {margin-bottom:20px;font-size:1.3em}
#validation_check p {margin-bottom:20px;padding:30px 20px;border:1px solid #e9e9e9;background:#fff}

/* 사이드뷰 */
.sv_wrap {position:relative;font-weight:normal}
.sv_wrap .sv {z-index:1000;display:none;margin:5px 0 0;font-size:0.92em;background:#333;
-webkit-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2);
box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2)}
.sv_wrap .sv:before {content:"";position:absolute;top:-6px;left:15px;width:0;height:0;border-style:solid;border-width:0 6px 6px 6px;border-color:transparent transparent #333 transparent}
.sv_wrap .sv a {display:inline-block;margin:0;padding:0 10px;line-height:30px;width:100px;font-weight:normal;color:#bbb}
.sv_wrap .sv a:hover {background:#000;color:#fff}
.sv_member {color:#333}
.sv_on {display:block !important;position:absolute;top:23px;left:0px;width:auto;height:auto}
.sv_nojs .sv {display:block}

/* 페이징 */
.pg_wrap {clear:both;float:left;display:inline-block}
.pg_wrap:after {display:block;visibility:hidden;clear:both;content:""}
.pg {text-align:center}
.pg_page, .pg_current {display:inline-block;vertical-align:middle;background:#eee;border:1px solid #eee}
.pg a:focus, .pg a:hover {text-decoration:none}
.pg_page {color:#959595;font-size:1.083em;height:30px;line-height:28px;padding:0 5px;min-width:30px;text-decoration:none;border-radius:3px}
.pg_page:hover {background-color:#fafafa}
.pg_start {text-indent:-999px;overflow:hidden;background:url('../img/btn_first.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee}
.pg_prev {text-indent:-999px;overflow:hidden;background:url('../img/btn_prev.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee}
.pg_end {text-indent:-999px;overflow:hidden;background:url('../img/btn_end.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee}
.pg_next {text-indent:-999px;overflow:hidden;background:url('../img/btn_next.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee}
.pg_start:hover,.pg_prev:hover,.pg_end:hover,.pg_next:hover {background-color:#fafafa}

.pg_current {display:inline-block;background:#3a8afd;border:1px solid #3a8afd;color:#fff;font-weight:bold;height:30px;line-height:30px;padding:0 10px;min-width:30px;border-radius:3px}

/* cheditor 이슈 */
.cheditor-popup-window *, .cheditor-popup-window :after, .cheditor-popup-window :before {
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
}

/* Mobile화면으로 */
#device_change {display:block;margin:0.3em;padding:0.5em 0;border:1px solid #eee;border-radius:2em;background:#fff;color:#000;font-size:2em;text-decoration:none;text-align:center}
 

해당 충돌 js 본문입니다.

$(document).ready(function () {
      $(window).scroll(function() {
        var scroll = $(window).scrollTop();
        if (scroll >= 50) {
      $('.header').addClass('hd_down');
    }
    else {
      $('.header').removeClass('hd_down');
        }
    });
});

 

크롬 기반의 브라우저와 모바일에서는 정상작동하지만,

엣지와 익스플로러에서는 js 부분의 클래스를 붙였다 떼는 기능은 scroll 이벤트함수를 읽지 못하고 있습니다.

 

혹시나해서 다른 이벤트 함수를 사용해서 확인해보니 이벤트함수는 다 읽지 못하고 있습니다.

주소복사
답변의 댓글

오동건님의 답변

2106084734_1580446459.4924.png

 

try{u.call(t,"[test!='']:sizzle")]

이부분이 노란색으로 표시되어있고,

SyntaxError 라고 빨간색 줄이 그어져있습니다.

주소복사
답변의 댓글
답변을 작성하시기 전에 로그인 해주세요.
전체 92,448 | RSS
고마운 분의 도움으로 질문을 해결하셨다면, 채택을 눌러서 감사의 마음을 전하세요.
어떻게 질문해야 할지 모른다면 질문하는 방법을 읽어 보신후 질문해 보세요.
QA 내용 검색

회원로그인

(주)에스아이알소프트 (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT