/* Infotech JSJ 210315 */

/* Common */
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0;line-height:1.6;border:0;}
body,input,textarea,select,button,table{font-family:'Nanum Gothic', 'Malgun Gothic',Dotum,AppleGothic,sans-serif}
img,fieldset{border:0}
ul,ol{list-style:none}
em,address{font-style:normal}
a{text-decoration:none;color:#828282}
a:hover{text-decoration:none}
a:active,a:focus{text-decoration:none}
html {color:#333;font-size:10px}
legend, summary, caption {visibility:hidden;width:0;height:0}
.clearFix {*zoom:1}
.clearFix:after {clear:both;display:block;content:''}
body {min-width:320px;position:relative;background-color:#fff;overflow-y:scroll}
.hidden2 {visibility:hidden;width:0;height:0;position:absolute;top:0;left:0}
.input_search[type=text] { 
-webkit-ime-mode:active; 
-moz-ime-mode:active; 
-ms-ime-mode:active; 
ime-mode:active; 
} 

/*#region PC*/
main {position:relative;z-index:5;}
.cont1 {position:relative}
.visual {}
.visual img {width:100%;height:auto;min-height:240px;}

.main-srch {position:absolute;bottom: 90px;left:0;width:100%;}
.main-srch fieldset {width:100%;max-width:1150px;height:56px;border-radius:28px;position:relative;margin:0 auto;overflow:hidden;padding-right:1px;}
.main-srch label[for="otod1"] {width:100%;margin:0;}
.input_search {width:100%;height:56px;background:#fff;padding-left:30px;border-radius:28px;line-height:54px;font-size:24px;font-stretch:95%;letter-spacing:-0.025em;}
.main-srch label[for="btn-srch"] {position:absolute;top:0;right:0;width:110px;height:56px;border-radius:0 28px 28px 0;background:#79b8cd;margin:0;text-align:center;line-height:56px;color:#fff;cursor:pointer;}
.main-srch label[for="btn-srch"] input {}


.quick-menu {background:#fafafa;padding-top:32px;padding-bottom:50px;}
.quick-menu h2 {text-align:center;line-height:1;}
.quick-menu h2 span {padding:0 10px 10px 10px;border-bottom:3px solid #9fc8da;font-weight: 500;}
.quick-menu-wrap {width:100%;max-width:1400px;display:flex;margin:0 auto;justify-content:center;padding-top: 50px;}
.quick-menu-wrap a {width:calc(100% / 8);display:block;text-align:center;}
.quick-menu-text {display:block;line-height:1;font-stretch:95%;letter-spacing:-0.025em;margin-top:8px;font-weight:bold;font-size:1.8rem;color:#636363;}
.quickHover{-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;}
.quickHover:hover {
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
}

.cont3 {width:100%;max-width:1400px;display:flex;margin:0 auto;padding-top:50px;}
.cont3 h2 {line-height:1;}
.cont3 h2 span {padding:0 10px 10px 10px;border-bottom:3px solid #9fc8da;line-height:1;font-weight: 500;}
.board {width:40%;height:320px;position:relative;}
.board > button {font-size:1.8rem;font-weight:bold;color:#8d8d8d;letter-spacing:-0.025em;width:108px;height:52px;background:#ddd;transition:all 0.5s ease-out;position:absolute;top:0;left:0;}
.notice-wrap {width:100%;height:266px;padding:20px 40px 0 10px;position:relative;}
.notice-wrap a {overflow:hidden;white-space:nowrap;text-overflow:ellipsis;position:relative;color:#333;font-weight:bold;font-stretch:95%;letter-spacing:-0.025em;height:38px;display:block;padding-right:120px;line-height:1;border-bottom:1px solid transparent;transition:border 0.5s ease-out;padding-top:20px;font-size: 1.6rem;}
.notice-wrap a:hover, 
.notice-wrap a:focus {border-bottom:1px solid #523267;transition:border 0.5s ease-out;}
.notice-date {position:absolute;top:20px;right:0;font-size: 1.6rem;}
.board > a {width:20px;height:20px;position:absolute;top:2px;right:60px;}
.notice-more:before {content:'';display:block;position:absolute;left:9px;width:2px;height:20px;background:#fff;}
.notice-more:after {content:'';display:block;position:absolute;top:9px;width:20px;height:2px;background:#fff;}

.popup-l {width:30%;height:320px;padding-right:20px;}
.popup-l > div {margin-top:19px;}
#owl-popup-l {margin-top:20px;}
.popup-l .item {position:relative;display:block;}
.popup-l .item img {width:100%;max-width:400px;height:240px;}
.popup-text {display:block;width:100%;height:58px;background:#dcdcdc;padding-left:16px;font-size:1.8rem;color:#121212;font-stretch:95%;letter-spacing:-0.025em;font-weight:bold;line-height:58px;overflow:hidden;padding-right:30px;text-overflow:ellipsis;white-space:nowrap;}

.popup-r {width:30%;height:320px;padding-left:20px;}
#owl-popup-r {margin-top: 0px;}
.popup-r .item {position:relative;display:block;}
.popup-r .item img {width:100%;max-width:400px;height: 250px;}

.book-wrap {position:relative;padding-bottom:40px}
.book-wrap:before {content:'';display:block;position:absolute;left:0;right:0;top:244px;bottom:0;background:#f4f4f4;z-index:-1;}
.book {width:100%;max-width:1400px;margin:0 auto;position:relative;display:flex;flex-wrap:wrap;justify-content:center;}
.book h2 {line-height:1;text-align:center;}
.book h2 button {padding:0 10px 10px 10px;background:none;font-weight: 500;}
.book h2.active button {border-bottom:3px solid #9fc8da;}
.book h2:first-child {order:1}
.book h2:nth-child(3) {order:2}
.book h2:nth-child(5) {order:3}
.new-book,
.best-book,
.rec-book {width:100%;padding:0;display:none;position:relative;order:4;margin-top: 30px;}
.active + .new-book,
.active + .best-book,
.active + .rec-book {display:block;}
.book .item {text-align:center;}
.book .item img {width:100%;max-width:180px;height:270px;margin:0 auto;border: 0.3px solid #858585;}
.book .owl-prev {width:64px;height:64px;position:absolute;top:100px;left:0px;text-indent:100%;overflow:hidden;white-space:nowrap;background:url(../images/book-prev.png) 0 0 no-repeat;}
.book .owl-next {width:64px;height:64px;position:absolute;top:100px;right:0px;text-indent:100%;overflow:hidden;white-space:nowrap;background:url(../images/book-next.png) 0 0 no-repeat;}
.book-name {width:100%;max-width:180px;margin:0 auto;display:block;text-align:center;padding:0 16px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:16px;color:#121212;margin-top:20px;line-height:1;font-weight: 700;}
.book-author {width:100%;max-width:180px;margin:0 auto;font-size:14px;color:#333;margin-top:8px;line-height:1;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align: center;}
.book .btn-more {position:absolute;top: -85px;right:20px;font-size:2.4rem;}

.cont5 {border-top:1px solid #d5d6d8;}
.agency-wrap {width:100%;max-width:1400px;position:relative;margin:0 auto;height:90px;margin-top:55px;}
.agency-wrap .owl-prev {width:39px;height:39px;text-indent:100%;overflow:hidden;white-space:nowrap;background:url(../images/prev-agency.png) 0 0 no-repeat;position:absolute;top:-1px;left:0;}
.agency-wrap .owl-next {width:39px;height:39px;text-indent:100%;overflow:hidden;white-space:nowrap;background:url(../images/next-agency.png) 0 0 no-repeat;position:absolute;top:-1px;right:0;}
.agency-wrap .owl-carousel{padding: 0 50px;}
.agency-wrap .owl-carousel .owl-item img {width:auto;margin: 0px auto;padding-left:10px;}
/*#endregion*/


/*#region tablet*/
@media (max-width: 991px) {
.main-srch {position:relative;bottom:initial;border-bottom:1px solid #ddd;}
.main-srch fieldset {border-radius:0;}
.main-srch label[for="btn-srch"] {border-radius:0;}
.quick-menu {padding-bottom:0;}
.quick-menu-wrap {flex-wrap:wrap;padding-top:10px;}
.quick-menu-wrap a {width:calc(100% / 3);padding-bottom:30px;}
.cont3 {flex-wrap:wrap;}
.popup-l {width: 100%;padding-right:0;}
.board {width:100%;order:3;height: 270px;}
.popup-r {width: 100%;padding-left:0;order: 3;}
.book-wrap:before {display:none;}
.book h2:first-child {width:100%;}
.new-book {order:2;display:block;}
.book h2:nth-child(3) {order:3;width:100%;padding-top: 50px;}
.best-book {order:3;display:block;}
.book h2:nth-child(5) {order:5;width:100%;padding-top: 50px;}
.rec-book {order:5;display:block;}
.agency-wrap .owl-carousel{padding: 0 30px;}
}

/*#endregion*/



/*#region phone*/
@media (max-width: 767px){
    .agency-wrap .owl-carousel{padding: 0 10px;}
}
/*#endregion*/



.sk-circle {
  margin: 100px auto;
  width: 40px;
  height: 40px;
  position: relative;
}
.sk-circle .sk-child {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.sk-circle .sk-child:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #333;
  border-radius: 100%;
  -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
          animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
}
.sk-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg); }
.sk-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
      -ms-transform: rotate(60deg);
          transform: rotate(60deg); }
.sk-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg); }
.sk-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
          transform: rotate(120deg); }
.sk-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
      -ms-transform: rotate(150deg);
          transform: rotate(150deg); }
.sk-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg); }
.sk-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
      -ms-transform: rotate(210deg);
          transform: rotate(210deg); }
.sk-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
      -ms-transform: rotate(240deg);
          transform: rotate(240deg); }
.sk-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg); }
.sk-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
      -ms-transform: rotate(300deg);
          transform: rotate(300deg); }
.sk-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
      -ms-transform: rotate(330deg);
          transform: rotate(330deg); }
.sk-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s; }
.sk-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
          animation-delay: -1s; }
.sk-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s; }
.sk-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s; }
.sk-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s; }
.sk-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s; }
.sk-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s; }
.sk-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s; }
.sk-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s; }
.sk-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s; }
.sk-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s; }

@-webkit-keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  } 40% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  } 40% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

/* ---- 상단팝업 ---- */
.top_popup {position:relative;}
.top_option {background-color: #513166;color: #ffffff;text-align:right;}
.top_option label, .top_option a {color: #ffffff; font-size:1.2rem;margin-right:8px}
.top_option .bar1 {border-left: solid 1px #000; margin:0  0.8em 0 0.3em; font-size:1.1rem;}
.top_option b, .top_option input {position:relative;top:3px;left:2px;}
.top_content {height:70px;background:url(../images/Main/top-popup-bg.png);background-color:#333;background-size:cover}
.top_content ul {padding-top:21px}
.top_content ul li {float:left; width:20%;padding-left:16px}
.top_content ul li a {color: #2c2c2c;}
.top_content .pop_icon {color:#b60023;}


.toppopup {height: 60px;background: url(../images/2023/pop-bg.png) 38px 0 no-repeat #e3e3e3;background-size:cover}
.noPopup{max-width:400px;height:260px;width:100%}
.toppopup .item{float:left; width: 100%;padding: 16px 40px;font-size: 1.6rem;margin: 0 auto;font-weight: 600;}
.toppopup .item a{color: #666666;}
.toppopup .item a:hover{color: #00c5ff;}
.toppopup .pop_icon {color: #523267;}
#toppopup {
  width:100%;
  overflow: hidden;
  height: auto;
  position: relative;
  margin:0 auto;
}
#toppopup .owl-prev {width:50px;height:50px;position:absolute;top:127px;left:25px;background:url(../images/Main/visual-sp.png) 0 0 no-repeat;text-indent:100%;overflow:hidden;white-space:nowrap}
#toppopup .owl-prev:hover, .owl-prev:focus {background-position:0 -50px}
#toppopup .owl-next {width:50px;height:50px;position:absolute;top:127px;right:25px;background:url(../images/Main/visual-sp.png) -50px 0 no-repeat;text-indent:100%;overflow:hidden;white-space:nowrap}
#toppopup .owl-next:hover, .owl-next:focus {background-position:-50px -50px}
#toppopup .owl-nav {position:absolute;top:0;left:0;width:100%;z-index:30}
@media(max-width:991px) {
.toppopup .item{float:left; width: 100%;padding: 20px 40px;font-size: medium;margin: 0 auto;}
}