diff --git a/src/main/webapp/css/common.css b/src/main/webapp/css/common.css index b5db4d3a..1de665d3 100644 --- a/src/main/webapp/css/common.css +++ b/src/main/webapp/css/common.css @@ -29,7 +29,7 @@ a:link,a:visited,a:active,a:focus{text-decoration:none;} a:hover{text-decoration:none;} input {border:0;outline:0;} strong {font-weight:500;} - +h3 {font-weight: 500;} .eff { -webkit-transition : all 0.3s ease; -moz-transition : all 0.3s ease; diff --git a/src/main/webapp/css/default.css b/src/main/webapp/css/default.css index 44aa2db0..7de6732b 100644 --- a/src/main/webapp/css/default.css +++ b/src/main/webapp/css/default.css @@ -1,8 +1,8 @@ @charset "utf-8"; -/********** 헤더 / 메뉴 **********/ +/********** 헤더 **********/ .blind {display:none;} -.wrap {display:inline-block;width:100%;height:100%;min-width:1400px;} +.wrap {display:inline-block;width:100%;min-width:1400px;} .wrap header {position: fixed;top:0px;left:0px;width:100%;border-bottom:1px solid #999;background:rgba(0,0,0,0.3);z-index: 99;} .wrap header .inner {width:1400px;height:72px;margin:0 auto;} .wrap header .inner h1 {float:left;width:33.3%;text-align: left;} @@ -27,6 +27,7 @@ .wrap header .inner .log ul li:last-child a {padding-right:0;} +/********** 메뉴 **********/ .wrap .nav-wrap {position: fixed;top:73px;left:0px;width:100%;background:rgba(0,0,0,0.3);z-index: 99;} .wrap .nav-wrap .inner {height:55px;} .wrap .nav-wrap .inner {width:1400px;height:55px;margin:0 auto;} @@ -46,8 +47,8 @@ transition:all .3s ease; .wrap .nav-wrap #primary-nav li.selected > a {color: #fff;} .wrap .nav-wrap #primary-nav .sub-menu {background: rgba(0,0,0,0.7);width: 350px;z-index: 200;padding:15px 0px;} .wrap .nav-wrap #primary-nav .sub-menu li {display: inline-block;width:100%;height:45px;line-height:45px;} -.wrap .nav-wrap #primary-nav .sub-menu li a {display:inline-block;font-weight: 300;} -.wrap .nav-wrap #primary-nav .sub-menu li:hover a {display:inline-block;font-weight: 500;} +.wrap .nav-wrap #primary-nav .sub-menu li a {display:block;font-weight: 300;} +.wrap .nav-wrap #primary-nav .sub-menu li:hover a {display:block;font-weight: 500;} .wrap .nav-wrap #primary-nav .sub-menu li:last-child {border-bottom: 0;} .wrap .nav-wrap #primary-nav .sub-menu .downarrow:before {content: '\25b8';} .wrap .nav-wrap #primary-nav.mobile {display: none;position: fixed;top:auto;bottom: 0px;background: #1eaabd;width: 100%;height: 100%;min-height: 100vh;margin:0% 0%;left:800px; @@ -102,6 +103,7 @@ transform: rotateZ(45deg); transform: rotateZ(-45deg); } +/********** 헤더 스크롤 **********/ .wrap #header.scroll_off {background:rgba(0,0,0,0.3);} .wrap #header.scroll_on {background:rgba(55,103,149,1.0);} .wrap .nav-wrap.scroll_off {background:rgba(0,0,0,0.3);} @@ -117,9 +119,10 @@ transform: rotateZ(-45deg); .wrap .nav-wrap.scroll_on #primary-nav ul li .sub-menu li:hover {background: none;} .wrap .nav-wrap.scroll_off #primary-nav ul li .sub-menu li a {color: #fff;} .wrap .nav-wrap.scroll_on #primary-nav ul li .sub-menu li a {color: #222;} -.wrap .nav-wrap.scroll_on #primary-nav ul li .sub-menu li a.underline.blue {background-image: linear-gradient(transparent 60%, #d7e1ea 40%);} -.wrap .nav-wrap.scroll_on #primary-nav ul li .sub-menu li:hover a.underline.blue {background-image: linear-gradient(transparent 60%, #d7e1ea 40%);} +.wrap .nav-wrap.scroll_on #primary-nav ul li .sub-menu li a span.underline.blue {background-image: linear-gradient(transparent 60%, #d7e1ea 40%);} +.wrap .nav-wrap.scroll_on #primary-nav ul li .sub-menu li:hover a span.underline.blue {background-image: linear-gradient(transparent 60%, #d7e1ea 40%);} +/********** 헤더 서브 **********/ .wrap.sub {padding-top:128px;} .wrap.sub #header {background:rgba(55,103,149,1.0);} .wrap.sub .nav-wrap {background:rgba(255,255,255,1.0);box-shadow: 1px 1px 3px rgba(0,0,0,0.1);} @@ -130,20 +133,23 @@ transform: rotateZ(-45deg); .wrap.sub .nav-wrap #primary-nav ul li .sub-menu {background: rgba(255,255,255,0.9);box-shadow: 1px 1px 6px rgba(0,0,0,0.1);} .wrap.sub .nav-wrap #primary-nav ul li .sub-menu li:hover {background: none;} .wrap.sub .nav-wrap #primary-nav ul li .sub-menu li a {color: #222;} -.wrap.sub .nav-wrap #primary-nav ul li .sub-menu li a.underline.blue {background-image: linear-gradient(transparent 60%, #d7e1ea 40%);} -.wrap.sub .nav-wrap #primary-nav ul li .sub-menu li:hover a.underline.blue {background-image: linear-gradient(transparent 60%, #d7e1ea 40%);} +.wrap.sub .nav-wrap #primary-nav ul li .sub-menu li a span.underline.blue {background-image: linear-gradient(transparent 60%, #d7e1ea 40%);} +.wrap.sub .nav-wrap #primary-nav ul li .sub-menu li:hover a span.underline.blue {background-image: linear-gradient(transparent 60%, #d7e1ea 40%);} +/********** 호버 언더라인 **********/ .underline {line-height: 2.0;background-image: linear-gradient(transparent calc(100% - 3px), #000 3px);background-repeat: no-repeat;background-size: 0% 100%;transition: background-size 0.8s;cursor: pointer;} .underline.blue {background-image: linear-gradient(transparent 60%, #284a6a 40%);} .wrap .nav-wrap #primary-nav li ul li:hover .underline {background-size: 100% 100%;} - section {clear:both;text-align: center;} section h3 {font-size:36px;font-weight: 500;margin-bottom: 5px;} section h3 span {color:#376795;} section .inner p.desc {font-size: 18px;color:#666;margin-bottom:40px;} +.contents {width:1400px;margin:0 auto;padding-bottom:140px;min-height:600px;} + +/********** 메인섹션1 **********/ .sec1 {} .sec1 .inner .banner {position: relative;width:100%;height:600px;background: url(/images/bg/bg-mainbanner.jpg) no-repeat;background-size:cover;} .sec1 .inner .banner h3 {font-size:36px;line-height:48px;color:#fff;font-weight: 500;text-align:center;width:100%;position: absolute;top:200px;} @@ -170,6 +176,7 @@ transform: rotate(45deg); .sec1 .inner .color-box .list a {width:100%;height:100%;position: absolute;top:0px;left:0px;z-index: 9;} +/********** 메인섹션2 **********/ .sec2 {padding:0px 0px 100px;} .sec2 .keyword-box {width:1400px;margin:0 auto;} .sec2 .keyword-box .list-tag li {display: inline-block;margin:0px 3px 10px;} @@ -177,6 +184,7 @@ transform: rotate(45deg); .sec2 .keyword-box .list-tag li a:hover {background:#376795;border:1px solid #376795;color:#fff;} +/********** 메인섹션3 **********/ .sec3 {background:#f5f5f5;padding:100px 0px 100px;} .sec3 .inner {width:100%;position: relative;} .sec3 .pickSwiper {width:80%;padding:1% 10%;} @@ -197,21 +205,21 @@ transform: rotate(45deg); .sec3 .pickSwiper .swiper-slide:hover .underline {background-size: 100% 100%;} -.sec4 {} -.sec4 .inner {} +/********** 메인섹션4 **********/ .sec4 .inner .middle-banner {background: url(/images/bg/bg-sec4-bg.jpg) no-repeat;width:100%;height:317px;background-size: cover;} .sec4 .inner .middle-banner h3 {padding:70px 0px 20px;font-size:36px;line-height: 46px;color: #fff;} .sec4 .inner .middle-banner h3 strong {color:#feb855;} .sec4 .inner .middle-banner p {font-size:18px;font-weight: 100;color:#fff;} +/********** 메인섹션5 **********/ .sec5 {background:#f5f5f5;padding:100px 0px 100px;} .sec5 .inner {width:1400px;margin:0 auto;position: relative;} .sec5 .inner .tab {position: relative;} .sec5 .inner .tabs {position: relative;overflow: hidden;width: 100%;text-align:center;} .sec5 .inner .tabs li {display: inline-block;margin:0% 4px;overflow: hidden;padding: 0;position: relative;} .sec5 .inner .tabs li:last-child {margin-right:0;} -.sec5 .inner .tabs a {background-color: #4a7ba6;border-radius:50px;font-size:12px;letter-spacing:-1px;min-width:110px;height:36px;line-height:36px;color: #fff;font-weight: 400;display: block;letter-spacing: 0;outline: none;text-decoration: none; +.sec5 .inner .tabs a {background-color: #4a7ba6;border-radius:50px;font-size:14px;letter-spacing:-1px;min-width:110px;height:38px;line-height:38px;color: #fff;font-weight: 400;display: block;letter-spacing: 0;outline: none;text-decoration: none; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; @@ -237,7 +245,7 @@ transition: all 0.2s ease-in-out; .sec5 .inner .tabs_item ul li .con-2 p span:nth-of-type(1) {display:inline-block;font-weight:500;padding-right:10px;margin-right:10px;border-right:1px solid #ddd;height:10px;line-height:9px;} - +/********** 메인섹션6 **********/ .sec6 {padding:100px 0px 100px;} .sec6 .inner {width:100%;position: relative;} .sec6 .onlineSwiper::before {content: '';width:4%;height:120%;background: #fff;display: inline-block;position: absolute;left:0px;top:-10%;z-index: 9;box-shadow:30px 0px 30px rgba(255,255,255,1.0);} @@ -265,7 +273,7 @@ transition: all 0.2s ease-in-out; .sec6 .onlineSwiper .items .List a.inner {display:block;} .sec6 .onlineSwiper .items .List .inner.light-type {color:#666;background-color:#fff;} .sec6 .onlineSwiper .items .List .inner div.thumbnail {overflow:hidden;position:relative;background-color:#f8f8f8;} -.sec6 .onlineSwiper .items .List .inner div.thumbnail span.image-frame {display:block;height:100%;background:url('/images/kccf/img/img-no-image.gif') no-repeat 50% 0;background-size:contain;} +.sec6 .onlineSwiper .items .List .inner div.thumbnail span.image-frame {display:block;height:100%;background:url('/images/img/img-no-image.gif') no-repeat 50% 0;background-size:contain;} .sec6 .onlineSwiper .items .List .inner div.thumbnail span.image-frame img {width:100%;height:100%;} .sec6 .onlineSwiper .items .List .inner div.thumbnail div.detail-cover {position:absolute;left:0;right:0;top:0;height:100%;padding:0% 15px;border:1px solid #2e2e2e;font-size:12px;text-align:left;color:#fff;background-color:rgba(0,0,0,0.8);opacity:0;border-radius:10px;transition:opacity 0.3s ease;} .sec6 .onlineSwiper .items .List .inner div.thumbnail div.detail-cover strong {display:block;padding:30px 0px 20px;font-size:18px;} @@ -280,6 +288,7 @@ transition: all 0.2s ease-in-out; .sec6 .swiper-button-prev, .swiper-rtl .swiper-button-next {left:30px;} +/********** 메인섹션7 **********/ .sec7 {background:#f5f5f5;padding:100px 0px 100px;display: inline-block;width:100%;height:auto;} .sec7 .inner {width:1400px;margin:0 auto;position: relative;} .sec7 .inner .Fl {float:left;width:47.5%;margin-right:5%;} @@ -303,6 +312,7 @@ transition: all 0.2s ease-in-out; .sec7 .inner .qna .con .list .box {background: #4a7ba6;} +/********** 푸터 **********/ footer {clear: both;background: #363636;width:100%;height:170px;padding:40px 0px 60px;position: relative;} footer .inner {width:1400px;margin:0 auto;position: relative;} footer .row-top {border-bottom: 1px solid #666;color: #999;padding: 0px 0 20px;} @@ -362,7 +372,6 @@ animation: animate-btn2 1.4s 0.5s ease-out infinite; 100% {transform: scale(1.7);opacity: 0;} } - body.no-scroll {overflow: hidden;} .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {background-color: rgba(0,0,0,0.3);} .mCS-dark-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {background-color: rgba(0,0,0,0.5);} @@ -370,7 +379,8 @@ body.no-scroll {overflow: hidden;} .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {color:#333;font-size:30px;} -.location {width:100%;} +/********** 현재위치 섹션 **********/ +.location {clear:both;width:100%;text-align: center;} .location .inner .row-top {width:100%;height:auto;padding:40px 0px 40px;margin-bottom:60px;background: #fcfcfc;border-bottom:1px solid #ddd;position: relative;} .location .inner .row-top .location-box .loc li {display: inline;position: relative;padding:0px 10px;font-size:12px;color:#919191;} .location .inner .row-top .location-box .loc li.on {color:#222;font-weight: 500;} @@ -381,6 +391,9 @@ body.no-scroll {overflow: hidden;} .location .inner .row-top .arr {display:inline-block;position: absolute;bottom:-12px;left:calc(50% - 13px);width:26px;height:26px;background:#6a6a6a;border-radius:50%;} .location .inner .row-top .arr img {vertical-align: middle;} +.location .inner .row-top.icon {padding-bottom: 0px !important;margin-bottom:20px !important;} + +/********** 회원가입 **********/ .join {width:100%} .join .inner .row-bottom {width:800px;margin:0 auto;} .join .inner .row-bottom .join-box {padding-bottom:200px;} @@ -468,26 +481,7 @@ transform: rotate(45deg); .join .inner .row-bottom .join-box .form-group .con span.fail {width:26%;font-size:12px;display: inline-block;margin:0px 0px 0px 10px;vertical-align: middle;color:orange;display: none;} -.chk {position: relative;} -.chk input[type="checkbox"] {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip:rect(0,0,0,0);border: 0 } -.chk input[type="checkbox"] + label { display: inline-block;position: relative;padding-left: 30px;cursor: pointer;line-height: 22px;} -.chk input[type="checkbox"] + label:before {content: "";position: absolute;left: 0;top: 0;width: 20px;height: 20px;border: 1px solid #ddd;border-radius : 2px;} -.chk input[type="checkbox"]:focus + label, -.chk input[type="checkbox"]:hover + label {color: #000;} -.chk input[type="checkbox"]:focus + label:before, -.chk input[type="checkbox"]:hover + label:before {border-color: #2781c1;} -.chk input[type="checkbox"]:checked + label:before {background: url(/images/icon/icon-checked.svg) no-repeat 2px;} - -.chk input[type="checkbox"] + label {font: 12px;padding-left: 20px;line-height: 15px;} -.chk input[type="checkbox"] + label:before {top: 0;width: 13px;height: 13px;} -.chk input[type="checkbox"]:focus + label, -.chk input[type="checkbox"]:hover + label {color: #000;} -.chk input[type="checkbox"]:focus + label:before, -.chk input[type="checkbox"]:hover + label:before {border-color: #2781c1;} -.chk input[type="checkbox"]:checked + label {color: #2781c1;} -.chk input[type="checkbox"]:checked + label:before {background-size: 10px;border-color: #2781c1;} - - +/********** 회원가입 완료 **********/ .join.succ .inner .row-top {background: none;border:0;padding:60px 0px 40px;} .join.succ .inner .row-top p {color:#376795;font-size: 18px;font-weight: 500;margin-top:10px;} .join.succ .inner .row-bottom .join-box .success .text p:nth-of-type(1){color:#333;font-size:32px;font-weight:200;} @@ -497,7 +491,6 @@ transform: rotate(45deg); .join.succ .inner .row-bottom .join-box .success .text p:nth-of-type(3) span {color:#376795;font-weight:500;} .join.succ .inner .row-bottom .join-box .success .text p:nth-of-type(4){color:#777;font-size:14px;font-weight:400;margin-bottom:40px;} .join.succ .inner .row-bottom .join-box .success .text p:nth-of-type(4) span {font-weight:500;} - .join.succ .inner .row-bottom .join-box .success .box {background: #0b2c57;padding:30px 0px;position: relative;} .join.succ .inner .row-bottom .join-box .success .box p:nth-of-type(1) {font-size:18px;color:#fff;font-weight: 500;margin-bottom: 15px;} .join.succ .inner .row-bottom .join-box .success .box p:nth-of-type(2) {font-size:14px;line-height:24px;color:#fff;font-weight: 400;margin-bottom: 0px;} @@ -512,14 +505,13 @@ transform: rotate(45deg); .join.succ .inner .row-bottom .join-box .success .btn a {display: inline-block;color:#fff;border-radius: 3px;padding:8px 40px;font-weight:500;} +/********** 휴면계정 **********/ .join.dormant .inner .row-bottom .join-box .success .text p:nth-of-type(1){color:#333;font-size:22px;font-weight:500;margin-bottom:30px;} .join.dormant .inner .row-bottom .join-box .success .text p:nth-of-type(1) span {color:#d47b1c;} .join.dormant .inner .row-bottom .join-box .success .text p:nth-of-type(2){color:#333;font-size:16px;font-weight:400;margin-bottom:40px;} .join.dormant .inner .row-bottom .join-box .success .text p:nth-of-type(2) span {color:#376795;font-weight:500;} .join.dormant .inner .row-bottom .join-box .success .box p:nth-of-type(1) {font-size:14px;line-height:24px;color:#fff;font-weight: 400;margin-bottom: 0px;} .join.dormant .inner .row-bottom .join-box .success .box p:nth-of-type(1) span {color:#d47b1c;font-weight: 500;} - - .join.connect .inner .row-bottom .join-box .success .text p:nth-of-type(1) {color:#333;font-size:22px;font-weight:400;margin-bottom:40px;} .join.connect .inner .row-bottom .join-box .success .text p:nth-of-type(1) span {color:#d47b1c;} .join.connect .inner .row-bottom .join-box .success .text p:nth-of-type(2) {} @@ -537,8 +529,8 @@ transform: rotate(45deg); .join.connect .inner .row-bottom .join-box .success .box .text p:nth-of-type(2) span:nth-of-type(1) {height:15px;line-height:15px;display:inline-block;border-right:1px solid #ddd;margin-right:10px;padding-right:10px;} +/********** 인사말 **********/ .greeting .inner .row-bottom {} -.greeting .inner .row-bottom .greeting-box {width:1400px;margin:0 auto;} .greeting .inner .row-bottom .greeting-box .top-banner {background: url(/images/img/img-greeting-bg.jpg) no-repeat;width:100%;height: 265px;background-size: cover;} .greeting .inner .row-bottom .greeting-box .top-banner p {font-size:22px;color:#fff;font-weight: 100;padding-top:60px;} .greeting .inner .row-bottom .greeting-box .gree {width:1100px;margin:0 auto;background: url(/images/img/img-greeting-bg2.jpg) no-repeat top right #fff;position: relative;top:-80px;box-shadow: 1px 1px 5px rgba(0,0,0,0.1);display:inline-block;padding:70px 50px;} @@ -550,8 +542,8 @@ transform: rotate(45deg); .greeting .inner .row-bottom .greeting-box .gree .right p {font-size:16px;line-height:28px;} +/********** 이용안내 **********/ .guide .inner .row-bottom {} -.guide .inner .row-bottom .guide-box {width:1400px;margin:0 auto;} .guide .inner .row-bottom .guide-box .banner {width:100%;height: 480px;margin-bottom: 80px;} .guide .inner .row-bottom .guide-box .banner .left {float: left;text-align: left;width:340px;height:320px;padding:80px;background: url(/images/img/img-guide-bg.jpg) no-repeat;} .guide .inner .row-bottom .guide-box .banner .right {float: left;width:800px;height:380px;padding:50px;background: #3e404a;} @@ -567,7 +559,7 @@ transform: rotate(45deg); .guide .inner .row-bottom .guide-box .banner .left .bottom p:nth-child(2) span {color:#f0a233;font-weight: 500;} .guide .inner .row-bottom .guide-box .banner .left .bottom p:nth-child(3) {font-size:16px;font-weight: 100;} .guide .inner .row-bottom .guide-box .banner .right .list-box {text-align: left;} -.guide .inner .row-bottom .guide-box .banner .right .list-box .li {display: inline-block;margin: 25px 0px;} +.guide .inner .row-bottom .guide-box .banner .right .list-box .li {display: inline-block;width:100%;margin: 25px 0px;} .guide .inner .row-bottom .guide-box .banner .right .list-box .li .num {float:left;width:10%;} .guide .inner .row-bottom .guide-box .banner .right .list-box .li .num span {display:inline-block;color:#fff;font-size:32px;font-style: italic;width:60px;height:60px;line-height: 60px;border-radius: 50%;background:#ccc;text-align: center;text-indent: -4px;font-weight: 500;} .guide .inner .row-bottom .guide-box .banner .right .list-box .li:nth-child(1) .num span {background: #f0a233;} @@ -586,8 +578,8 @@ transform: rotate(45deg); .guide .inner .row-bottom .guide-box .info-box .info-sec .text-box p span:nth-of-type(1)::before {content: '';width:4px;height:4px;background: #376795;display: inline-block;position: absolute;left:-15px;top:12px;} -.map .inner .row-bottom:nth-of-type(2) {border-bottom:1px solid #ddd;padding-bottom: 80px;margin-bottom:80px;} -.map .inner .row-bottom .map-box {width:1400px;margin:0 auto;} +/********** 오시는길 **********/ +.map .inner .row-bottom .map-box {margin-bottom:80px;} .map .inner .row-bottom .map-box h2 {text-align:left;margin-bottom:10px;font-size:24px;font-weight: 300;} .map .inner .row-bottom .map-box h2 span {color:#376795;} .map .inner .row-bottom .map-box .info {border:1px solid #ddd;display: inline-block;width:100%;} @@ -598,13 +590,12 @@ transform: rotate(45deg); .map .inner .row-bottom .map-box .info > div.time p:nth-of-type(1) {background: #45a1b0;} .map .inner .row-bottom .map-box .info > div.tel p:nth-of-type(1) {background: #4a7ba6;} .map .inner .row-bottom .map-box .info > div.fax p:nth-of-type(1) {background: #beb9a5;} -.map .inner .row-bottom .map-box .info > div p:nth-of-type(1) img {vertical-align: middle;} +.map .inner .row-bottom .map-box .info > div p:nth-of-type(1) img {vertical-align: middle;margin-bottom:5px;} .map .inner .row-bottom .map-box .info > div p:nth-of-type(2) {font-size:20px;font-weight: 500;margin-bottom:10px;} .map .inner .row-bottom .map-box .info > div p:nth-of-type(3) {font-size:15px;margin-bottom: 5px;} .map .inner .row-bottom .map-box .info > div p:nth-of-type(4) {font-size:13px;color:#666;} .map .inner .row-bottom .map-box .info .mapimg {width:100%;height:440px;padding:0;margin-right:0;border-bottom:1px solid #ddd;} .map .inner .row-bottom .map-box .info .mapimg iframe {width:100%;height:100%;} -.map .inner .row-bottom .info-box {width:1400px;margin:0 auto;} .map .inner .row-bottom .info-box .info-sec {margin-bottom: 80px;text-align: left;} .map .inner .row-bottom .info-box .info-sec h3 {font-size:24px;color:#333;margin-bottom:15px;} .map .inner .row-bottom .info-box .info-sec h3 span {color:#376795;} @@ -622,16 +613,18 @@ transform: rotate(45deg); .map .inner .row-bottom .info-box .info-sec:nth-of-type(3) .text-box > div p:nth-child(1)::before {display: none;} -.cart .inner .tab {position: relative;width:1400px;margin:0 auto;} +/********** 카트 **********/ +.cart .inner .tab {position: relative;} .cart .inner .tabs {position: relative;width: 100%;text-align:left;} .cart .inner .tabs li {display: inline-block;margin:0% 0px;padding: 0;position: relative;text-align: center;} .cart .inner .tabs li:last-child {margin-right:0;} -.cart .inner .tabs a {background-color: #fff;border:1px solid #ddd;border-radius:3px;font-size:12px;letter-spacing:-1px;min-width:110px;height:36px;line-height:36px;color: #444;font-weight: 400;display: inline-block;letter-spacing: 0;outline: none;text-decoration: none;outline: 0; +.cart .inner .tabs a {background-color: #fff;border:1px solid #ddd;border-radius:3px;font-size:14px;letter-spacing:-1px;min-width:110px;height:38px;line-height:34px;color: #444;font-weight: 400;display: inline-block;letter-spacing: 0;outline: none;text-decoration: none;outline: 0; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; } +.cart .inner .tabs li a span {font-size:12px;} .cart .inner .tabs li.current a {background: #0a2c56;border:1px solid #0a2c56;color:#fff;} .cart .inner .tabs li.current::before {content:'';position:absolute;bottom:calc(0% - 4px);right:calc(50% - 8px);display:inline-block;background: #0b2c57;width:14px;height:14px;border-radius:3px;z-index: 9; -webkit-transform: rotate(45deg); @@ -655,6 +648,7 @@ transform: rotate(45deg);} .cart .inner .tabs_item .list-cart-wrap .list-cart div.list > div.t-loan {width:12%;padding: 33px 0px;} .cart .inner .tabs_item .list-cart-wrap .list-cart div.list > div.t-reser {width:12%;padding: 33px 0px;} .cart .inner .tabs_item .list-cart-wrap .list-cart div.list > div.t-visit {width:12%;padding: 33px 0px;} +.cart .inner .tabs_item .list-cart-wrap .list-cart div.list > div.t-visit.long {padding:15px 0px;} .cart .inner .tabs_item .list-cart-wrap .list-cart .list.t-tit-line {background:#556676;border-bottom:0;padding:0;height:55px;line-height:55px;} .cart .inner .tabs_item .list-cart-wrap .list-cart .t-tit-line > div {color:#fff;line-height: 55px !important;padding:0 !important;} .cart .inner .tabs_item .list-cart-wrap .list-cart div.list > div.t-data > div {float:left;text-align: left;} @@ -673,12 +667,9 @@ transform: rotate(45deg);} .cart .inner .tabs_item .list-cart-wrap .list-cart div.list > div.t-data > div.img .favorites .on {display:none;} .cart .inner .tabs_item .list-cart-wrap .list-cart div.list > div.t-data > div.img .favorites:hover .off {display:none;} .cart .inner .tabs_item .list-cart-wrap .list-cart div.list > div.t-data > div.img .favorites:hover .on {display:inline-block;} - .cart .inner .tabs_item .btn-box {display:inline-block;width:100%;margin-bottom:80px;} .cart .inner .tabs_item .btn-box .left {float:left;} .cart .inner .tabs_item .btn-box .right {float:right;} - - .cart .inner .tabs_item .list-cart-wrap.visit .list-cart div.list > div.t-data {width:76%;} .cart .inner .tabs_item .list-cart-wrap.visit .list-cart div.list > div.t-state {width:12%;} .cart .inner .tabs_item .list-cart-wrap.visit .list-cart div.list > div.t-date {width:12%;} @@ -691,17 +682,13 @@ transform: rotate(45deg);} .cart .inner .tabs_item .v-date-box .v-date span {margin:0px 10px 0px 5px;} .cart .inner .tabs_item .text {text-align: left;color:#2e899c;font-size:14px;font-weight: 400;} .cart .inner .tabs_item .btn-wrap {margin:40px 0px 80px;} - - .cart .inner .tabs_item .list-cart-wrap.confirm .list-cart div.list > div.t-data {width:48%;} .cart .inner .tabs_item .list-cart-wrap.confirm .list-cart div.list > div.t-state {width:12%;} .cart .inner .tabs_item .list-cart-wrap.confirm .list-cart div.list > div.t-date {width:12%;} .cart .inner .tabs_item .list-cart-wrap.confirm .list-cart div.list > div.t-loan {width:12%;} .cart .inner .tabs_item .list-cart-wrap.confirm .list-cart div.list > div.t-reser {width:12%;} -.cart .inner .tabs_item .list-cart-wrap.confirm .list-cart div.list > div.t-visit {width:16%;line-height: normal;margin-top:15px;} +.cart .inner .tabs_item .list-cart-wrap.confirm .list-cart div.list > div.t-visit {width:16%;line-height: normal;margin-top:15px;padding:10px 0px;} .cart .inner .tabs_item .list-cart-wrap.confirm .list-cart div.list.t-tit-line > div.t-visit {margin-top:0;} - - .cart .inner .tabs_item .total-box {border-bottom:1px solid #ddd;border-top:1px solid #333;margin-bottom:15px;} .cart .inner .tabs_item .total-box .row-top {background: #295580;height:50px;line-height:50px;padding:0;margin-bottom:0;} .cart .inner .tabs_item .total-box .row-top > div {float:left;width:33.3%;height:50px;line-height:50px;color:#fff;font-size:12px;} @@ -709,22 +696,16 @@ transform: rotate(45deg);} .cart .inner .tabs_item .total-box .row-bottom > div {float:left;width:20%;font-size:14px;} .cart .inner .tabs_item .total-box .row-bottom > div strong {font-size:36px;padding:0px 5px;} .cart .inner .tabs_item .total-box .row-bottom > div.t-total strong {color:#d47b1c;} - - .cart .inner .tabs_item .list-cart-wrap.complete .list-cart div.list > div.t-data {width:52%;} .cart .inner .tabs_item .list-cart-wrap.complete.com2 .list-cart div.list > div.t-data {width:64%;} - .cart .inner .tabs_item .compl-box {border-bottom:1px solid #ddd;border-top:1px solid #333;margin-bottom:15px;padding: 25px 0px;} .cart .inner .tabs_item .compl-box .compl-icon {margin-bottom: 10px;} .cart .inner .tabs_item .compl-box .compl-text {font-size:24px;font-weight: 300;} .cart .inner .tabs_item .compl-box .compl-text span {color:#d47b1c;font-weight: 500;} - - - - -.data .inner .row-bottom {position: relative;width:1400px;margin:0 auto;} +/********** 소장자료 **********/ +.data .inner .row-bottom {position: relative;} .article-side {float: left;width:320px;margin-right:40px;} .culture-box {float: left;width:1040px;} .filter-wrap {border:1px solid #ddd;text-align: left;padding:30px;} @@ -736,7 +717,7 @@ transform: rotate(45deg);} .filter-head h2 {float: left;font-size: 18px;font-weight: 600;} .filter-head .btn-filter-reset {float: right;background: url(/images/icon/icon-data-reset.png) no-repeat right center;padding: 4px 22px 4px 0px;font-size:14px;font-weight: 400;color:#666;} .filter-wrap .choice-condition {display:inline-block;padding-top: 14px;color: #707070;} -.filter-wrap .choice-condition ul li {font-size:12px;background:#f4f4f4;float:left;padding:2px 30px 3px 10px;border-radius: 50px;margin:0px 5px 5px 0px;border:1px solid #ddd;background:url(/images/icon/icon-data-close.png) no-repeat #f4f4f4;background-position: 92% center;} +.filter-wrap .choice-condition ul li {font-size:12px;background:#f4f4f4;float:left;padding:2px 30px 3px 10px;border-radius: 50px;margin:0px 5px 5px 0px;border:1px solid #ddd;background:url(/images/icon/icon-data-close.png) no-repeat #f4f4f4;background-position: 92% center;cursor: pointer;} .filter-wrap .choice-condition .sign {margin: 0 10px;} .filter-wrap .choice-condition em {color: #333;} .filter-wrap .choice-condition .btn-del-filter {margin-left: 10px;text-indent: -9999px;overflow: hidden;width: 13px;height: 13px;vertical-align: sub;background: url(/images/kccf/btn/btn-cnl.jpg) no-repeat right center;} @@ -747,10 +728,8 @@ transform: rotate(45deg);} .filter-wrap .filter-tit .btn-toggle.on {background: url(/images/kccf/btn/btn-plus.png) no-repeat center right;} .filter-wrap .filter-tit:after {content: "";display: block;clear: both;} .filter-wrap .filter .depth-1 {margin-top: 11px;padding-left: 10px;} - .filter-wrap .filter .depth-1 .check label {background:url(/images/icon/icon-data-downarr.png) no-repeat;background-position: 95% center;padding-right:20px;} .filter-wrap .filter .depth-1.on .check label {background:url(/images/icon/icon-data-uparr.png) no-repeat;background-position: 95% center;padding-right:20px;color:#376795;font-weight: 400;} - .filter-wrap .filter .depth-1:after {content: "";display: block;clear: both;} .filter-wrap .filter .depth-1 .check {float: left;} .filter-wrap .filter .depth-1 .btn-toggle {float: left;background: url(/images/kccf/btn/btn-arrow-down.png) no-repeat right center;text-indent: -9999px;} @@ -763,36 +742,28 @@ transform: rotate(45deg);} .filter-wrap .filter .filter-list.year ul li label input[type='radio'] {margin-right:5px;margin-bottom:3px;} .filter-wrap .filter .filter-list.year ul li label input[type='text'] {border:1px solid #ddd;width:32%;padding:0% 5%;height:24px;line-height: 24px;border-radius: 3px;} .filter-wrap .filter .filter-list.year ul li label input[type='text']::placeholder {font-size:12px;color:#999;} - .btn-all-view{} .btn-toggle-more {width: 100%;font-size: 13px;color: #fff;height: 30px;border: 1px solid #ddd;margin-top: 20px;background:url(/images/icon/icon-data-plus.png) no-repeat #3e414a;background-position: 61% center;border-radius: 3px;} .btn-toggle-more.on {background:url(/images/icon/icon-data-minus.png) no-repeat #909090;background-position: 59% center;} - .btn-apply {width: 100%;font-size: 13px;color: #fff;background:#3e414a;height: 30px;border: 1px solid #ddd;margin-top: 20px;border-radius: 3px;} - .pop-choice-condition, .pop-btn-wrap {display: none;text-align: center;padding-top: 30px;} - .filter-wrap .filter-list > ul > li:first-child .depth-1 {margin-top: 16px;} - .filter-wrap .filter-list > ul > li:nth-child(4) ~ li {display: none;} .filter-wrap .tab-name {background: transparent;position: absolute;width: 100%;top: 0;left: 0;text-indent: -9999px;overflow: hidden;font-size:14px;} - .filter-wrap .depth-1.on + .depth-2 {display: block !important;} - .filter .check input[type="checkbox"] + label {padding-left: 0;} .filter .check input[type="checkbox"] + label:focus, .filter .check input[type="checkbox"] + label:hover {text-decoration: underline;} .filter .check input[type="checkbox"] + label:before {display: none;} .filter .depth-2 .check input[type="checkbox"] + label {padding-left: 15px;background: url(/images/icon/icon-data-more.png) no-repeat left center;} .filter .check input[type="checkbox"]:checked + label {color: #2781c1;} - .data .inner {display:inline-block;width:100%;margin-bottom:50px;} .data .inner .tab {position: relative;} .data .inner .tabs {position: relative;width: 100%;text-align:left;} .data .inner .tabs li {display: inline-block;margin:0% 0px;padding: 0;position: relative;text-align: center;} .data .inner .tabs li:last-child {margin-right:0;} -.data .inner .tabs a {background-color: #fff;border:1px solid #ddd;border-radius:3px;font-size:12px;letter-spacing:-1px;min-width:110px;height:36px;line-height:36px;color: #444;font-weight: 400;display: inline-block;letter-spacing: 0;outline: none;text-decoration: none;outline: 0; +.data .inner .tabs a {background-color: #fff;border:1px solid #ddd;border-radius:3px;font-size:14px;letter-spacing:-1px;min-width:110px;height:38px;line-height:38px;color: #444;font-weight: 400;display: inline-block;letter-spacing: 0;outline: none;text-decoration: none;outline: 0; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; @@ -807,12 +778,10 @@ transform: rotate(45deg);} .data .inner .tab_content {display:inline-block;background: #fff;width:100%;} .data .inner .tabs_item {display: none;padding: 10px 0;} .data .inner .tabs_item:first-child {display: block;} - .data .inner .tabs_item .list-cart-wrap .list-data div.list {display:inline-block;padding: 20px 0px;width:100%;height:120px;border-bottom:1px solid #ddd;vertical-align: top;} .data .inner .tabs_item .list-cart-wrap .list-data div.list > div {float:left;width:16.6%;text-align: center;font-size:14px;} .data .inner .tabs_item .list-cart-wrap .list-data div.list > div.t-data {width:83%;height:100%;} .data .inner .tabs_item .list-cart-wrap .list-data div.list > div.t-btn {width:15%;padding: 25px 0px;} - .data .inner .tabs_item .list-cart-wrap .list-data .list.t-tit-line {background:#556676;border-bottom:0;padding:0;height:55px;line-height:55px;} .data .inner .tabs_item .list-cart-wrap .list-data .t-tit-line > div {color:#fff;line-height: 55px !important;padding:0 !important;} .data .inner .tabs_item .list-cart-wrap .list-data div.list > div.t-data > div {float:left;text-align: left;} @@ -822,7 +791,8 @@ transform: rotate(45deg);} .data .inner .tabs_item .list-cart-wrap .list-data div.list > div.t-data > div.title {width:70%;font-size:16px;font-weight: 500;} .data .inner .tabs_item .list-cart-wrap .list-data div.list > div.t-data > div.code {width:70%;font-size:12px;font-weight: 300;margin-bottom: 25px;} .data .inner .tabs_item .list-cart-wrap .list-data div.list > div.t-data > div.subject {width:70%;font-size:12px;color:#777;} - +.data .inner .tabs_item .list-cart-wrap .list-data div.list > div.t-data > div.subject span {margin-right:5px;padding-right:8px;border-right:1px solid #ddd;height:15px;line-height: 15px;display:inline-block;} +.data .inner .tabs_item .list-cart-wrap .list-data div.list > div.t-data > div.subject span:last-child {border-right:0;} .data .inner .tabs_item .list-cart-wrap .list-data div.list > div.t-data > div.type span {font-size:12px;padding:2px 15px 3px;background:#333;border-radius: 50px;color:#fff;} .data .inner .tabs_item .list-cart-wrap .list-data div.list > div.t-data > div.type span.online {background:#376795;} .data .inner .tabs_item .list-cart-wrap .list-data div.list > div.t-data > div.type span.loan {background:#b68946;} @@ -835,21 +805,14 @@ transform: rotate(45deg);} .data .inner .tabs_item .list-cart-wrap .list-data div.list > div.t-data > div.img .favorites .on {display:none;} .data .inner .tabs_item .list-cart-wrap .list-data div.list > div.t-data > div.img .favorites:hover .off {display:none;} .data .inner .tabs_item .list-cart-wrap .list-data div.list > div.t-data > div.img .favorites:hover .on {display:inline-block;} - .data .inner .tabs_item .list-cart-wrap .list-data div.list > div.t-btn button {font-size:14px;height:30px;height:30px;border-radius:3px;margin-bottom:5px;width:100px;color:#fff;} .data .inner .tabs_item .list-cart-wrap .list-data div.list > div.t-btn p {font-size:12px;color:#3f8f4a;font-weight: 400;padding:15px 0px;} - - - .data .inner .tabs_item .list-cart-wrap .list-data div.list.resu {height:auto;} .data .inner .tabs_item .list-cart-wrap .list-data div.list > .no-result {text-align: center;width:100%;padding:30px 0px;} .data .inner .tabs_item .list-cart-wrap .list-data div.list > .no-result .icon {margin-bottom:10px;} .data .inner .tabs_item .list-cart-wrap .list-data div.list > .no-result .text1 {margin-bottom:5px;font-size:18px;color:#666;} .data .inner .tabs_item .list-cart-wrap .list-data div.list > .no-result .text2 {margin-bottom:30px;font-size:24px;color:#333;font-weight: 500;} .data .inner .tabs_item .list-cart-wrap .list-data div.list > .no-result .text2 span {color:#d47b1c;} - - -.data .inner .data-box .culture-box .tab {} .data .inner .data-box .culture-box .tab > .title {height:36px;margin:30px 0px 0px;outline:0px solid red;} .data .inner .data-box .culture-box .tab .title .count {float:left;font-size:16px;height:36px;line-height:36px;} .data .inner .data-box .culture-box .tab .title .count em {color:#d47b1c;font-weight: 500;} @@ -865,13 +828,13 @@ transform: rotate(45deg);} .data .inner .data-box .culture-box .tab .title .list-search-wrap > div.list-input button {background: url(/images/icon/icon-data-search.png) no-repeat center;text-indent: -9999999px;width:36px;height:36px;vertical-align: top;position: absolute;top:0px;right:0px;} +/********** 소장자료 상세페이지 **********/ .data.detail {width:100%;} .data.detail .inner {} .data.detail .inner .row-top {width:100%;padding:45px 0px;display:inline-block;background: linear-gradient(to right, #485864, #6a7b8c);} .data.detail .inner .row-top .center {width:1400px;margin:0 auto;} .data.detail .inner .row-top .center .left {float:left;width:490px;margin-right:60px;text-align:left;} .data.detail .inner .row-top .center .right {float:left;width:850px;text-align: left;} - .data.detail .inner .row-top .center .left .cla {margin-bottom:10px;} .data.detail .inner .row-top .center .left .cla .con-1 {display: inline;} .data.detail .inner .row-top .center .left .cla .con-1 span {background:#fff;border:2px solid #333;border-radius:50px;color:#333;padding:1px 10px 2px;font-size:12px;font-weight: 500;display: inline-block;} @@ -882,7 +845,6 @@ transform: rotate(45deg);} .data.detail .inner .row-top .center .left .cla .con-2 .code {font-size:16px;color:#fff;line-height: 26px;} .data.detail .inner .row-top .center .left .tit {font-size:30px;color:#fff;font-weight: 500;margin-bottom:20px;} .data.detail .inner .row-top .center .left .img {background:#fff;display: inline-block;} - .data.detail .inner .row-top .center .right .con-1 {display: inline-block;width:100%;height:100px;border-bottom:1px solid #ddd;text-align: right;margin-bottom: 30px;} .data.detail .inner .row-top .center .right .con-1 button {background:#f5f5f5;width:auto;height:30px;line-height:28px;width:30px;border-radius: 3px;font-size:14px;color:#222;font-weight: 600;text-align: center;border:1px solid #ddd;margin-top:55px;} .data.detail .inner .row-top .center .right .con-1 button.view {width:auto;padding:0px 26px;} @@ -895,29 +857,23 @@ transform: rotate(45deg);} .data.detail .inner .row-top .center .right .con-2 .de-data ul li span {font-size:14px;color:#fff;} .data.detail .inner .row-top .center .right .con-2 .de-data ul li span:nth-of-type(1) {font-weight: 400;display:inline-block;margin-right:20px;min-width:70px;} .data.detail .inner .row-top .center .right .con-2 .de-data ul li span:nth-of-type(2) {font-weight: 200;} - .data.detail .inner .row-top .center .right .con-2 .b-btn {margin:30px 0px 25px;display:inline-block;} .data.detail .inner .row-top .center .right .con-2 .b-btn button {font-size:14px;font-weight: 600;} - .data.detail .inner .row-top .center .right .con-2 .keyword {} .data.detail .inner .row-top .center .right .con-2 .keyword span {background: #f4f4f4;color:#333;display:inline-block;padding:1px 10px 2px;border-radius: 50px;font-size:12px;} .data.detail .inner .row-top .center .right .con-2 .keyword span.first {background: #b68948;color:#fff;margin-right:10px;padding:1px 16px 2px;} - -.data.detail .inner .row-bottom {width:100%;} -.data.detail .inner .row-bottom .con-1 {width:1400px;margin:0 auto;display:inline-block;border:1px solid #ddd;margin:50px 0px 100px;} +.data.detail .inner .row-bottom .con-1 {display:inline-block;width:100%;border:1px solid #ddd;margin:50px 0px 100px;} .data.detail .inner .row-bottom .con-1 .list-box {display:inline-block;width:100%;padding:25px 0px;} -.data.detail .inner .row-bottom .con-1 .list-box .list {float:left;width:24.9%;border-right:1px solid #ddd;} +.data.detail .inner .row-bottom .con-1 .list-box .list {float:left;width:24.9%;border-right:1px solid #ddd;text-align: center;} .data.detail .inner .row-bottom .con-1 .list-box .list:last-child {border-right:0;} .data.detail .inner .row-bottom .con-1 .list-box .list .icon {margin-bottom:15px;} .data.detail .inner .row-bottom .con-1 .list-box .list .title {font-size:12px;color:#333;font-weight: 400;margin-bottom:3px;} .data.detail .inner .row-bottom .con-1 .list-box .list .con {font-size:14px;color:#666;font-weight: 300;} .data.detail .inner .row-bottom .con-1 .list-box .list .con .poss {color:#3f8f4a} .data.detail .inner .row-bottom .con-1 .list-box .list .con .imposs {color:#c11c35} - .data.detail .inner .row-bottom .con-1 .text-box {display:inline-block;width:96%;padding:10px 2%;background:#f4f4f4;text-align: left;} .data.detail .inner .row-bottom .con-1 .text-box p {font-size:12px;} - -.data.detail .inner .row-bottom .con-2 {width:1400px;margin:0 auto;display:inline-block;border-top:1px solid #333;border-bottom:1px solid #ddd;margin:0px 0px 100px;} +.data.detail .inner .row-bottom .con-2 {display:inline-block;width:100%;border-top:1px solid #333;border-bottom:1px solid #ddd;margin:0px 0px 100px;} .data.detail .inner .row-bottom .con-2 .top {padding:10px 0px;position: relative;border-bottom:1px solid #ddd;} .data.detail .inner .row-bottom .con-2 .top h3 {font-size:24px;} .data.detail .inner .row-bottom .con-2 .top .down-btn {position: absolute;top:0px;right:0px;text-indent: -999999px;background:url(/images/icon/icon-data-downarr2.png) no-repeat center;width:60px;height:60px;} @@ -925,12 +881,9 @@ transform: rotate(45deg);} .data.detail .inner .row-bottom .con-2 .bottom {padding:30px;height:105px;overflow: hidden;text-align: left;} .data.detail .inner .row-bottom .con-2 .bottom p {font-size:16px;margin-bottom:20px;color:#666;} .data.detail .inner .row-bottom .con-2 .bottom p span {margin-right:15px;} - - -.data.detail .inner .row-bottom .con-3 {width:1400px;margin:0 auto;display:inline-block;border-top:1px solid #333;border-bottom:0px solid #ddd;margin:0px 0px 100px;} +.data.detail .inner .row-bottom .con-3 {width:100%;display:inline-block;border-top:1px solid #333;border-bottom:0px solid #ddd;margin:0px 0px 100px;} .data.detail .inner .row-bottom .con-3 .top {padding:10px 0px;position: relative;border-bottom:1px solid #ddd;} .data.detail .inner .row-bottom .con-3 .top h3 {font-size:24px;} - .data.detail .inner .row-bottom .DetailSwiper1 {display: inline-block;width:100%;} .data.detail .inner .row-bottom .DetailSwiper1 .swiper-wrapper {margin-top:15px;} .data.detail .inner .row-bottom .DetailSwiper1 .swiper-slide .List {border:1px solid #ddd;padding:30px;text-align:left;} @@ -941,10 +894,8 @@ transform: rotate(45deg);} .data.detail .inner .row-bottom .DetailSwiper1 .swiper-slide .List .con-2 {width:100%;border:0px;margin:0;} .data.detail .inner .row-bottom .DetailSwiper1 .swiper-slide .List .con-2 p {font-size:14px;color:#777;margin-bottom: 5px;} .data.detail .inner .row-bottom .DetailSwiper1 .swiper-slide .List .con-2 p span:nth-of-type(1) {display:inline-block;font-weight:500;padding-right:10px;margin-right:10px;border-right:1px solid #ddd;height:10px;line-height:9px;} - - .data.detail .inner .row-bottom .con-4 {background: #f5f5f5;padding:0px 0px 60px;margin:0px 0px 100px;} -.data.detail .inner .row-bottom .con-4 .top {padding:40px 0px;position: relative;} +.data.detail .inner .row-bottom .con-4 .top {padding:40px 0px;position: relative;text-align: center;} .data.detail .inner .row-bottom .con-4 .top h3 {font-size:24px;width:1400px;margin:0 auto;position: relative;z-index: 9;} .data.detail .inner .row-bottom .con-4 .top h3::before {content: '';width:1400px;height:1px;position: absolute;top:20px;left:0px;background:#c1c1c1;z-index: -1} .data.detail .inner .row-bottom .con-4 .top h3::after {content: '';width:300px;height:35px;position: absolute;top:0px;left:calc(50% - 150px);background:#f5f5f5;z-index: -1} @@ -991,16 +942,14 @@ transform: rotate(45deg);} .data.detail .inner .row-bottom .DetailSwiper2 .items .List .inner div.thumbnail div.detail-cover .btn-box .RIS a {background: #666;color:#fff;display: block;border-radius: 3px;padding:8px 0px;font-size: 14px;} .data.detail .inner .row-bottom .DetailSwiper2 .swiper-button-next, .data.detail .inner .row-bottom .DetailSwiper2 .swiper-rtl .swiper-button-prev {right:30px;} .data.detail .inner .row-bottom .DetailSwiper2 .swiper-button-prev, .data.detail .inner .row-bottom .DetailSwiper2 .swiper-rtl .swiper-button-next {left:30px;} - -.data.detail .btn-box {margin:50px 0px;} - +.data.detail .btn-box {margin:50px 0px;text-align: center;} .data.detail .inner .row-bottom .DetailSwiper1 .swiper-button-next, .data.detail .inner .row-bottom .DetailSwiper1 .swiper-button-prev {top:30px;} .data.detail .inner .row-bottom .DetailSwiper1 .swiper-button-prev, .data.detail .inner .row-bottom .DetailSwiper1 .swiper-rtl .swiper-button-next {right:40px;left:auto;} .data.detail .inner .row-bottom .DetailSwiper1 .swiper-button-next:after, .data.detail .inner .row-bottom .DetailSwiper1 .swiper-rtl .swiper-button-prev:after, .data.detail .inner .row-bottom .DetailSwiper1 .swiper-button-prev:after, .data.detail .inner .row-bottom .DetailSwiper1 .swiper-rtl .swiper-button-next:after {font-size:15px;font-weight: bold;} -.myinfo .inner .row-bottom {width:1400px;margin:0 auto;} +/********** 회원정보관리 **********/ .myinfo .inner .row-bottom .myinfo-box .top-info {width:1340px;padding:30px;background: linear-gradient(to right, #485764, #6a7b8c);border-radius: 5px;display:inline-block;margin-bottom:80px;} .myinfo .inner .row-bottom .myinfo-box .top-info .left {float:left;width:269px;padding-right:30px;border-right:1px solid #999;text-align: left;} .myinfo .inner .row-bottom .myinfo-box .top-info .right {float:left;width:1010px;padding-left:30px;} @@ -1014,17 +963,15 @@ transform: rotate(45deg);} .myinfo .inner .row-bottom .myinfo-box .top-info .left .myinfo-btn a {color:#fff;background:#528bbd;display: inline-block;width:100%;height:40px;line-height: 40px;border-radius: 3px;} .myinfo .inner .row-bottom .myinfo-box .top-info .left .date-box {color:#fff;font-size:12px;margin-top: 10px;opacity: 0.6;} .myinfo .inner .row-bottom .myinfo-box .top-info .left .date-box span {display:inline-block;margin:0px 5px;} - -.myinfo .inner .row-bottom .myinfo-box .top-info .right {} .myinfo .inner .row-bottom .myinfo-box .top-info .right .top-box {display: inline-block;width:100%;border-bottom:1px solid #999;padding-bottom:30px;} .myinfo .inner .row-bottom .myinfo-box .top-info .right .top-box > div {float:left;width:50%;} .myinfo .inner .row-bottom .myinfo-box .top-info .right .top-box > div h3 {color:#fff;font-size:18px;font-weight: 400;text-align:left;padding-bottom:10px;} .myinfo .inner .row-bottom .myinfo-box .top-info .right .top-box > div .list-box {} -.myinfo .inner .row-bottom .myinfo-box .top-info .right .top-box > .con-1 .list-box > div {float:left;width:19.8%;border-right:1px solid #999;} +.myinfo .inner .row-bottom .myinfo-box .top-info .right .top-box > .con-1 .list-box > div {float:left;width:19.8%;border-right:1px solid #999;text-align: center;} .myinfo .inner .row-bottom .myinfo-box .top-info .right .top-box > .con-1 .list-box > div:last-child {border-right:0;} .myinfo .inner .row-bottom .myinfo-box .top-info .right .top-box > .con-1 .list-box > div p:nth-child(1) {color:#eca53e;font-size:20px;font-weight: 400;margin-bottom:5px;} .myinfo .inner .row-bottom .myinfo-box .top-info .right .top-box > .con-1 .list-box > div p:nth-child(2) {color:#fff;font-size:12px;} -.myinfo .inner .row-bottom .myinfo-box .top-info .right .top-box > .con-2 .list-box > div {float:left;width:24.8%;border-right:1px solid #999;} +.myinfo .inner .row-bottom .myinfo-box .top-info .right .top-box > .con-2 .list-box > div {float:left;width:24.8%;border-right:1px solid #999;text-align: center;} .myinfo .inner .row-bottom .myinfo-box .top-info .right .top-box > .con-2 .list-box > div:last-child {border-right:0;} .myinfo .inner .row-bottom .myinfo-box .top-info .right .top-box > .con-2 .list-box > div p:nth-child(1) {color:#34cde6;font-size:20px;font-weight: 400;margin-bottom:5px;} .myinfo .inner .row-bottom .myinfo-box .top-info .right .top-box > .con-2 .list-box > div p:nth-child(2) {color:#fff;font-size:12px;} @@ -1032,11 +979,10 @@ transform: rotate(45deg);} .myinfo .inner .row-bottom .myinfo-box .top-info .right .bottom-box .con-1 {text-align: left;color:#fff} .myinfo .inner .row-bottom .myinfo-box .top-info .right .bottom-box .con-1 h3 {font-size:18px;margin-bottom: 10px;} .myinfo .inner .row-bottom .myinfo-box .top-info .right .bottom-box .con-1 .key-box {} -.myinfo .inner .row-bottom .myinfo-box .top-info .right .bottom-box .con-1 .key-box button {color:#333;padding:4px 30px 5px 10px;border-radius: 50px;display: inline-block;margin-right:3px;font-size:12px;background: url(/images/icon/icon-data-close.png) no-repeat #fff 88% center;} - +.myinfo .inner .row-bottom .myinfo-box .top-info .right .bottom-box .con-1 .key-box span {color:#333;padding:4px 10px 5px 10px;border-radius: 50px;display: inline-block;margin-right:3px;font-size:12px;font-weight: 400;background: #fff;} .myinfo .contents {text-align: left;display:inline-block;margin-bottom:80px;} -.myinfo .contents > div .title-box {display: inline-block;width:100%;margin-bottom:0px;padding-bottom:5px;} +.myinfo .contents > div .title-box {display: inline-block;width:100%;margin-bottom:0px;padding-bottom:10px;} .myinfo .contents > div .title-box .title {float:left;} .myinfo .contents > div .title-box .title h3 {display: inline-block;font-size:24px;} .myinfo .contents > div .title-box .title .cont {display:inline-block;font-size:16px;margin-left:10px;} @@ -1044,7 +990,6 @@ transform: rotate(45deg);} .myinfo .contents > div .title-box .More {float:right;margin-top:10px;} .myinfo .contents > div .title-box .More a {font-size:16px;color:#666;} .myinfo .contents > div .title-box .More img {margin-left:10px;} - .myinfo .contents .concern-data {display: inline-block;margin-bottom: 80px;} .myinfo .contents .concern-data .list-box {clear: both;} .myinfo .contents .concern-data .list-box .list {float:left;width:19.0%;margin-right:1%;border:1px solid #ddd;border-radius:5px;} @@ -1055,7 +1000,6 @@ transform: rotate(45deg);} .myinfo .contents .concern-data .list-box .list .text .cl {font-size:12px;color:#777;} .myinfo .contents .concern-data .list-box .list .text .cl p {margin-bottom:2px;} .myinfo .contents .concern-data .list-box .list .text .cl p span:nth-of-type(1) {font-weight: 500;margin-right:10px;} - .myinfo .contents .loan-history {display:inline-block;text-align: left;width:100%;margin-bottom:80px;} .myinfo .contents .loan-history .title-box {display:inline-block;width:100%;border-bottom:1px solid #333;} .myinfo .contents .loan-history .list-box {width:100%;} @@ -1070,10 +1014,12 @@ transform: rotate(45deg);} .myinfo .contents .loan-history .list-box .list > div.con p:nth-of-type(2) span:last-child {border-right:0;} .myinfo .contents .loan-history .list-box .list > div.con p:nth-of-type(2) span em {font-weight: 500;} .myinfo .contents .loan-history .list-box .list > div.state span {background: #333;color:#fff;padding:3px 10px 4px;border-radius: 50px;font-size:12px;font-weight: 500;display:inline-block;min-width: 60px;margin-top:10px;} -.myinfo .contents .loan-history .list-box .list > div.state span.apply {background: #376795;} +.myinfo .contents .loan-history .list-box .list > div.state span.subscription {background: #376795;} .myinfo .contents .loan-history .list-box .list > div.state span.reser {background: #3f8f4a;} .myinfo .contents .loan-history .list-box .list > div.state span.cancel {background: #c11c35;} -.myinfo .contents .loan-history .list-box .list > div.state span.return {background: #d47b1c;} +.myinfo .contents .loan-history .list-box .list > div.state span.return {background: #857e6b;} +.myinfo .contents .loan-history .list-box .list > div.state span.loan {background: #2e899c;} +.myinfo .contents .loan-history .list-box .list > div.state span.overdue {background: #d37b1a;} .myinfo .contents .visit-history {display:inline-block;text-align: left;width:100%;margin-bottom:80px;} .myinfo .contents .visit-history .title-box {display:inline-block;width:100%;border-bottom:1px solid #333;} @@ -1089,11 +1035,17 @@ transform: rotate(45deg);} .myinfo .contents .visit-history .list-box .list > div.con p:nth-of-type(2) span:last-child {border-right:0;} .myinfo .contents .visit-history .list-box .list > div.con p:nth-of-type(2) span em {font-weight: 500;} .myinfo .contents .visit-history .list-box .list > div.state span {background: #333;color:#fff;padding:3px 10px 4px;border-radius: 50px;font-size:12px;font-weight: 500;display:inline-block;min-width: 60px;margin-top:10px;} -.myinfo .contents .visit-history .list-box .list > div.state span.wait {background: #376795;} +.myinfo .contents .visit-history .list-box .list > div.state span.subscription {background: #376795;} .myinfo .contents .visit-history .list-box .list > div.state span.approval {background: #3f8f4a;} .myinfo .contents .visit-history .list-box .list > div.state span.return {background: #d47b1c;} +.myinfo .contents .visit-history .list-box .list > div.state span.wait {background: #376795;} +.myinfo .contents .visit-history .list-box .list > div.state span.return {background: #d47b1c;} +.myinfo .contents .visit-history .list-box .list > div.state span.cancel {background: #c21b35;} +.myinfo .contents .visit-history .list-box .list > div.state span.read {background: #312f28;} +.myinfo .contents .visit-history .list-box .list > div.state span.unread {background: #847d6a;} +/********** 내정보 패스워드 **********/ .passwd .row-bottom .myinfo-passwd .icon {margin-bottom:30px;} .passwd .row-bottom .myinfo-passwd .text p:nth-of-type(1) {font-size:18px;color:#333;font-weight: 500;margin-bottom:5px;} .passwd .row-bottom .myinfo-passwd .text p:nth-of-type(1) span {color:#376795;} @@ -1103,6 +1055,7 @@ transform: rotate(45deg);} .passwd .row-bottom .myinfo-passwd .box p {margin-bottom:40px;} +/********** 내정보 수정 **********/ .join.modify .Userpassword .con p {color:#2e899c;font-size:12px;font-weight: 500;} .join.modify .Usersns .con .list .sns-box {border:1px solid #ddd;font-size:11px;border-radius: 3px;height:37px;line-height: 37px;float:left;width:49.5%;padding:0% 0% 0% 0%;margin-right:0.5%;letter-spacing: -0.5px;overflow: hidden;} .join.modify .Usersns .con .list .sns-box span:nth-child(1) {display:inline-block;width:28px;height:28px;line-height: 26px;margin:0px 10px 4px;text-align: center;background:#333;padding:0px;border-radius: 50px;} @@ -1112,6 +1065,7 @@ transform: rotate(45deg);} .join.modify p.release a {display:inline-block;font-size:12px;font-weight: 500;color:#666;border-bottom:1px solid #ddd;padding-bottom:2px;margin:30px 0px;} +/********** 회원탈퇴안내 **********/ .secession {width:100%} .secession .inner .row-top {background: none;border:0;padding:60px 0px 40px;} .secession .inner .row-top p {color:#376795;font-size: 18px;font-weight: 500;margin-top:10px;} @@ -1129,7 +1083,7 @@ transform: rotate(45deg);} .secession .inner .row-bottom .sec-box .btn-box a {display: inline-block;color:#fff;border-radius: 3px;padding:8px 40px;font-weight:500;} -.interested-data .inner .data-box {width:1400px;margin:0 auto;} +/********** 관심자료 **********/ .interested-data .inner .data-box .title {height:36px;margin:30px 0px 10px;outline:0px solid red;} .interested-data .inner .data-box .title .count {float:left;font-size:16px;height:36px;line-height:36px;} .interested-data .inner .data-box .title .count em {color:#d47b1c;font-weight: 500;} @@ -1143,7 +1097,6 @@ transform: rotate(45deg);} .interested-data .inner .data-box .list-data-wrap .list-data div.list > div.t-data {width:65%;height:100%;} .interested-data .inner .data-box .list-data-wrap .list-data div.list > div.t-btn {width:16%;padding: 25px 0px;text-align: center;} .interested-data .inner .data-box .list-data-wrap .list-data div.list > div.t-btn.bt {padding:0;} - .interested-data .inner .data-box .list-data-wrap .list-data .list.t-tit-line {background:#556676;border-bottom:0;padding:0;height:55px;line-height:55px;} .interested-data .inner .data-box .list-data-wrap .list-data .t-tit-line > div {color:#fff;line-height: 55px !important;padding:0 !important;font-weight: 200 !important;} .interested-data .inner .data-box .list-data-wrap .list-data div.list > div.t-data > div {float:left;text-align: left;} @@ -1153,7 +1106,6 @@ transform: rotate(45deg);} .interested-data .inner .data-box .list-data-wrap .list-data div.list > div.t-data > div.title {width:70%;font-size:16px;font-weight: 500;margin:0;height:auto;} .interested-data .inner .data-box .list-data-wrap .list-data div.list > div.t-data > div.code {width:70%;font-size:12px;font-weight: 300;margin-bottom: 25px;} .interested-data .inner .data-box .list-data-wrap .list-data div.list > div.t-data > div.subject {width:70%;font-size:12px;color:#777;} - .interested-data .inner .data-box .list-data-wrap .list-data div.list > div.t-data > div.type span {font-size:12px;padding:2px 15px 3px;background:#333;border-radius: 50px;color:#fff;} .interested-data .inner .data-box .list-data-wrap .list-data div.list > div.t-data > div.type span.online {background:#376795;} .interested-data .inner .data-box .list-data-wrap .list-data div.list > div.t-data > div.type span.loan {background:#b68946;} @@ -1166,15 +1118,15 @@ transform: rotate(45deg);} .interested-data .inner .data-box .list-data-wrap .list-data div.list > div.t-data > div.img .favorites .on {display:none;} .interested-data .inner .data-box .list-data-wrap .list-data div.list > div.t-data > div.img .favorites:hover .off {display:none;} .interested-data .inner .data-box .list-data-wrap .list-data div.list > div.t-data > div.img .favorites:hover .on {display:inline-block;} - .interested-data .inner .data-box .list-data-wrap .list-data div.list > div.t-btn button {font-size:14px;height:30px;height:30px;border-radius:3px;margin-bottom:5px;width:100px;color:#fff;display: block;margin:3px auto;} .interested-data .inner .data-box .list-data-wrap .list-data div.list > div.t-btn p {font-size:12px;color:#3f8f4a;font-weight: 400;padding:15px 0px;} .interested-data .inner .data-box .list-data-wrap .list-data div.list > div.t-btn.bt p {padding:0px 0px 15px;} .interested-data .inner .data-box .list-data-wrap .btn-box {display: inline-block;float:left;margin-top:-30px;} +/********** 대출관리 **********/ .loan-data .inner {margin-bottom:50px;} -.loan-data .inner .loan-box {display:inline-block;width:1400px;margin:0 auto;} +.loan-data .inner .loan-box {display:inline-block;width:100%;} .loan-data .inner .loan-box .title {height:36px;margin:30px 0px 10px;outline:0px solid red;} .loan-data .inner .loan-box .title .count {float:left;font-size:16px;height:36px;line-height:36px;} .loan-data .inner .loan-box .title .count em {color:#d47b1c;font-weight: 500;} @@ -1185,7 +1137,7 @@ transform: rotate(45deg);} .loan-data .inner .tabs {position: relative;width: 100.5%;text-align:left;} .loan-data .inner .tabs li {display: inline-block;margin:0% 0px;padding: 0;position: relative;text-align: center;width:19.9%;margin-left:-3px;} .loan-data .inner .tabs li:last-child {margin-right:0;} -.loan-data .inner .tabs a {background-color: #fff;border:1px solid #ddd;border-radius:3px;font-size:12px;letter-spacing:-1px;width:100%;min-width:110px;height:36px;line-height:36px;color: #444;font-weight: 400;display: inline-block;letter-spacing: 0;outline: none;text-decoration: none;outline: 0; +.loan-data .inner .tabs a {background-color: #fff;border:1px solid #ddd;border-radius:3px;font-size:14px;letter-spacing:-1px;width:100%;min-width:110px;height:38px;line-height:38px;color: #444;font-weight: 400;display: inline-block;letter-spacing: 0;outline: none;text-decoration: none;outline: 0; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; @@ -1221,8 +1173,9 @@ transform: rotate(45deg);} .loan-data .inner .tabs_item .list-wrap .list-data .list.t-tit-line > div {color:#fff;line-height: 55px !important;padding:0 !important;font-size: 12px;} +/********** 방문열람관리 **********/ .visit-data .inner {margin-bottom:50px;} -.visit-data .inner .visit-box {display:inline-block;width:1400px;margin:0 auto;} +.visit-data .inner .visit-box {display:inline-block;width:100%;} .visit-data .inner .visit-box .title {height:36px;margin:30px 0px 10px;outline:0px solid red;} .visit-data .inner .visit-box .title .count {float:left;font-size:16px;height:36px;line-height:36px;} .visit-data .inner .visit-box .title .count em {color:#d47b1c;font-weight: 500;} @@ -1233,7 +1186,7 @@ transform: rotate(45deg);} .visit-data .inner .tabs {position: relative;width: 100.5%;text-align:left;} .visit-data .inner .tabs li {display: inline-block;margin:0% 0px;padding: 0;position: relative;text-align: center;width:24.9%;margin-left:-3px;} .visit-data .inner .tabs li:last-child {margin-right:0;} -.visit-data .inner .tabs a {background-color: #fff;border:1px solid #ddd;border-radius:3px;font-size:12px;letter-spacing:-1px;width:100%;min-width:110px;height:36px;line-height:36px;color: #444;font-weight: 400;display: inline-block;letter-spacing: 0;outline: none;text-decoration: none;outline: 0; +.visit-data .inner .tabs a {background-color: #fff;border:1px solid #ddd;border-radius:3px;font-size:14px;letter-spacing:-1px;width:100%;min-width:110px;height:38px;line-height:38px;color: #444;font-weight: 400;display: inline-block;letter-spacing: 0;outline: none;text-decoration: none;outline: 0; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; @@ -1257,7 +1210,6 @@ transform: rotate(45deg);} .visit-data .inner .tabs_item .list-wrap .list-data .list.t-tit-line > div.n-visit {width:10%;} .visit-data .inner .tabs_item .list-wrap .list-data .list.t-tit-line > div.n-return {width:10%;} .visit-data .inner .tabs_item .list-wrap .list-data .list.t-tit-line > div.n-state {width:13%;} - .visit-data .inner .tabs_item .list-wrap .list-data div.list > div.n-state span {color:#3f8f4a;font-size:14px;font-weight: 500;} .visit-data .inner .tabs_item .list-wrap .list-data div.list > div.n-state button {background: #f5f5f5;color:#323;padding:5px 15px 8px;margin:0px 0px 0px 15px;border:1px solid #ddd;border-radius: 3px;} .visit-data .inner .tabs_item .list-wrap .list-data div.list > div.n-cultural {width:15%;font-weight: 400;margin-top:10px;} @@ -1266,7 +1218,6 @@ transform: rotate(45deg);} .visit-data .inner .tabs_item .list-wrap .list-data div.list > div.n-visit {width:10%;} .visit-data .inner .tabs_item .list-wrap .list-data div.list > div.n-return {width:10%;} .visit-data .inner .tabs_item .list-wrap .list-data div.list > div.n-state {width:13%;} - .visit-data .inner .tabs_item .list-wrap .list-data div.list > div .date, .visit-data .inner .tabs_item .list-wrap .list-data div.list > div .time {display:block;} .visit-data .inner .tabs_item .list-wrap .list-data div.list > div.n-state .ti {display:inline;float:left;} @@ -1278,9 +1229,9 @@ transform: rotate(45deg);} .visit-data .inner .tabs_item .list-wrap .list-data .list.t-tit-line > div {color:#fff;line-height: 55px !important;padding:0 !important;font-size: 12px;} -/* 아코디언 목록 */ +/* 알림페이지 아코디언 목록 */ .noti-data .inner {margin-bottom:50px;} -.noti-data .inner .noti-box {display:inline-block;width:1400px;margin:0 auto;} +.noti-data .inner .noti-box {display:inline-block;width:100%;} .noti-data .inner .noti-box .title {height:36px;margin:30px 0px 10px;outline:0px solid red;} .noti-data .inner .noti-box .title .count {float:left;font-size:16px;height:36px;line-height:36px;} .noti-data .inner .noti-box .title .count em {color:#d47b1c;font-weight: 500;} @@ -1292,7 +1243,6 @@ transform: rotate(45deg);} .noti-data .list-accordion .question span:last-child {padding-right: 50px;} .noti-data .list-accordion .question .type {width: 210px;box-sizing: border-box;padding-left: 65px;font-weight: 600;color: #000;} .noti-data .list-accordion .question .date {position: absolute;right:0px;top:22px;font-size:12px;} - .noti-data .list-accordion .question.on {background: url(/images/btn/btn-arrow-close.png) no-repeat 25px center #556676;} .noti-data .list-accordion .question.on span {font-size:16px;color:#fff;font-weight: 400;} .noti-data .list-accordion .question.on .type {font-weight: 600;} @@ -1301,12 +1251,6 @@ transform: rotate(45deg);} .noti-data .list-accordion .answer::before {content: '';display: inline-block;width:3px;height:50px;background: #ccc;position: absolute;left:255px;top:35px;} - - - - - -.contents-frame {width:1400px;margin:0 auto;} /* list 검색 */ .list-header .list-search {width:100%;} .list-header:after {content: "";display: block;clear: both;height: 10px;} @@ -1324,7 +1268,9 @@ transform: rotate(45deg);} .list-search .left {float: left;width:75%;} .list-search .right {float: left;width:25%;text-align: right;} + /* 커뮤니티 목록 */ +.contents-frame {width:100%;} .list-table-wrap li {display: table;width: 100%;box-sizing: border-box;text-align: center;border-bottom: 1px solid #ddd;font-size: 16px;color: #666;letter-spacing: -0.025em;table-layout: fixed;} .list-table-wrap li span {display: table-cell;height: 60px;vertical-align: middle;} .list-table-wrap li .t-num {width: 6%;} @@ -1345,25 +1291,17 @@ transform: rotate(45deg);} .list-table-wrap li .t-type span {background:#b68946;display:inline-block;text-align: center;color:#fff;width:auto;height:auto;padding:1px 10px 2px;border-radius: 50px;} .list-table-wrap li:hover .t-tit a {border-bottom:1px solid #376795;padding-bottom:1px;color:#376795;display: inline;} + /* 고정 글 */ .list-table-wrap .fix-list .t-tit {font-weight: 600;color: #000;} .list-table-wrap .fix-list .t-type {width: 95px;} -.list-table-wrap .fix-list .t-type em { -display: block; -width: 54px; -height: 30px; -margin: 0 auto; -border-radius: 15px; -font-size: 14px; -text-align: center; -line-height: 30px; -color: #fff; -background-color: #154b92; -} +.list-table-wrap .fix-list .t-type em {display: block;width: 54px;height: 30px;margin: 0 auto;border-radius: 15px;font-size: 14px;text-align: center;line-height: 30px;color: #fff;background-color: #154b92;} + /* 커뮤니티 상세 */ .view-tit {width: 96%;border-top: 2px solid #000;border-bottom: 1px solid #ddd;font-weight: 800;font-size: 16px;background: #556676;display: table;letter-spacing: -0.025em;padding:10px 2%;} .view-tit h2 {vertical-align: middle;width:100%;color:#fff;text-align: left;font-size:20px;font-weight: 300;} +.view-tit h2 span img {margin:0px 0px 3px 10px;vertical-align: middle;} .view-tit .v-info {display: inline-block;vertical-align: middle;text-align: left;width:100%;} .view-tit .v-info em {font-size: 14px;color: #fff;font-weight: 100;margin-right:10px;} .view-tit .v-info em:nth-of-type(1) {border-right:1px solid #ccc;height:12px;line-height:12px;display:inline-block;padding-right:15px;} @@ -1373,7 +1311,7 @@ background-color: #154b92; .file-box .file-list span {font-size:12px;} .file-box .file-list span img {vertical-align: middle;margin-right:5px;} .file-box .file-list span button {background: #666;color:#fff;border-radius: 2px;padding:2px 10px 3px;font-size: 12px;margin-left:15px;} -.view-body {border-bottom: 1px solid #000;text-align: left;} +.view-body {border-bottom: 0px solid #000;text-align: left;} .view-con {line-height: 1.85;color: #666;padding: 20px 2%;letter-spacing: -.025em;min-height: 515px;} .view-body .attachments {width: 100%;border-top: 1px solid #ddd;padding: 0 20px;box-sizing: border-box;} .view-body .attachments:after {content: "";display: block;clear: both;} @@ -1381,22 +1319,55 @@ background-color: #154b92; .view-body .attachments li a {display: block;padding-left: 25px;color: #666;background:url(/images/kccf/icon/icon-attach.png) no-repeat left center;} .view-body .attachments li a:hover {background:url(/images/kccf/icon/icon-attach-hover.png) no-repeat left center;color: #000;} .view-body .attachments li a em {color: #999;} - -.view-con .answer {padding: 30px;color: #666;border: 1px solid #ddd;border-radius: 4px;background: #f6f6f6;margin-top: 20px;} -.view-con .answer h3 {font-size: 16px;color: #2781c1;padding-bottom: 20px;} - +.view-body .answer {padding: 30px 0px;color: #666;border-bottom: 1px solid #ddd;border-top:1px solid #333;background: #f6f6f6;margin-top: 20px;} +.view-body .answer .answer-top {font-size: 16px;color: #2781c1;padding:0px 2% 25px;border-bottom: 1px solid #ddd;display:inline-block;width:96%} +.view-body .answer .answer-top .left {float:left;color:#333;font-weight: 400;} +.view-body .answer .answer-top .right {float:right;color:#333;} +.view-body .answer .answer-con {padding: 20px 30px;} .view-notice .view-pagination .type {width: 70px;} - .view-pagination .status em {text-align: center;font-size: 14px;width: 82px;height: 30px;line-height: 30px;display: block;margin: 0 auto;border-radius: 15px;border: 1px solid #ddd;} .view-pagination .status .complete {color: #fff;background: #2781c1;border: none;} .view-pagination .btn {background: #3e404a;color:#fff;font-weight: 300;margin-top: 40px;} +.view-qna .btn-box {width:100%;} +/* qna 작성폼 */ +.community-write {letter-spacing: -0.025em;} +.community-write .required-text {text-align:left;margin-bottom:0px;font-size:12px;} +.community-write .required-text span {color:red;font-size:20px;vertical-align: middle;margin:4px 2px 0px 0px;display: inline-block;} +.community-write input {border-radius: 3px;border: 1px solid #ddd;line-height: 36px;display: block;padding: 0 15px;height: 38px;box-sizing: border-box;width: 100%;} +.community-write textarea {display: block;padding: 15px;height: 360px;border: 1px solid #ddd;border-radius: 3px;box-sizing: border-box;width: 100%;} +.community-write select {box-sizing: border-box;display: block;width: 100%;height: 38px;padding: 0 15px;border: 1px solid #ddd;border-radius: 3px;line-height: 36px;background: url(/images/kccf/btn/btn-select-qna.png) no-repeat center right;} + +.qna-write-table {border-top: 2px solid #000;border-bottom: 1px solid #000;} +.qna-write-table li {display: table;border-bottom: 1px solid #ddd;width: 100%;min-height:42px;line-height: 42px;} +.w-tit {display: table-cell;padding: 20px 20px;font-size: 16px;background: #f6f6f6;color: #666;text-align: left;width: 160px;vertical-align: top;padding-top: 16px;font-weight: 500;} +.w-form {display: table-cell;padding: 20px 20px;vertical-align: middle;text-align: left;} +.qna-write-table .fl {float:left;width:30%;} +.qna-write-table .wt-title {width:90%;} +.qna-write-table .wt-secret {width:10%;} +.qna-write-table .wt-tit input {width: 100%;} +.qna-write-table .w-form .mail-input input {float: left;width: calc(33.333% - 14px);} +.qna-write-table .w-form .mail-input select {float: left;width: calc(33.333% - 14px);margin-left: 10px;} +.mail-desinence {float: left;display: block;width: 32px;text-align: center;line-height: 38px;color: #999;} +.qna-write-table .wt-type {width: 33.333%;float: left;} +.qna-write-table .wt-writer {width: 33.333%;float: left;} +.qna-write-table .wt-pw {width: 33.333%;float: left;} +.qna-write-table .wt-mail {width: 100%;float: left;} +.qna-write-table .wt-visibility {width: 33.333%;float: left;} +.qna-write-table .wt-visibility input {width: 15px;height: 15px;padding: 0;float: left;margin-top: 11px;-webkit-appearance: checkbox;-moz-appearance: checkbox;appearance: checkbox;} +.qna-write-table .wt-visibility label {display:block;float:left;margin-left: 10px;line-height: 38px;} +.qna-write-table .wt-question {} +.qna-write-table .wt-recaptcha {} +.qna-write-table .wt-mail label {font-size:12px;color:#2e899c;font-weight: 400;} +.qna-write-table .wt-attachments .attachments-btn {background: #b68946;color:#fff;padding:8px 20px;border-radius: 3px;display:block;margin-bottom:0px;} +.qna-write-table .wt-attachments .file {border:1px solid #ddd;background: #f5f5f5;border-radius: 3px;height:36px;line-height: 32px;display: inline-block;padding:0% 60px 0px 10px;position: relative;} +.qna-write-table .wt-attachments .file span {font-size:12px;margin:0px 5px;} +.qna-write-table .wt-attachments .file span img {vertical-align: middle;margin-bottom:4px;display: inline-block} +.qna-write-table .wt-attachments .file .close {position: absolute;right:10px;top:10px;} - - - +/* faq */ .faq .title {height:36px;margin:30px 0px 10px;outline:0px solid red;} .faq .title select {float:left;height:39px;line-height: 39px;border:1px solid #ddd;border-radius: 3px;min-width:120px;padding:0px 10px;} .faq .title .total-count .count {float:left;font-size:16px;height:36px;line-height:36px;} @@ -1409,12 +1380,11 @@ background-color: #154b92; .faq .title .list-input .check-box { position:absolute;right:42px;top:-6px;} .faq .title .left {float: left;width:75%;} .faq .title .right {float: left;width:25%;text-align: right;} - .faq .inner .tab {position: relative;width:1400px;margin:0 auto;} .faq .inner .tabs {position: relative;width: 100.5%;text-align:left;} .faq .inner .tabs li {display: inline-block;margin:0% 0px;padding: 0;position: relative;text-align: center;width:19.9%;margin-left:-3px;} .faq .inner .tabs li:last-child {margin-right:0;} -.faq .inner .tabs a {background-color: #fff;border:1px solid #ddd;border-radius:3px;font-size:12px;letter-spacing:-1px;width:100%;min-width:110px;height:36px;line-height:36px;color: #444;font-weight: 400;display: inline-block;letter-spacing: 0;outline: none;text-decoration: none;outline: 0; +.faq .inner .tabs a {background-color: #fff;border:1px solid #ddd;border-radius:3px;font-size:14px;letter-spacing:-1px;width:100%;min-width:110px;height:38px;line-height:38px;color: #444;font-weight: 400;display: inline-block;letter-spacing: 0;outline: none;text-decoration: none;outline: 0; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; @@ -1430,10 +1400,9 @@ transform: rotate(45deg);} .faq .inner .tab_content {display:inline-block;background: #fff;width:100%;} .faq .inner .tabs_item {display: none;padding: 10px 0;} .faq .inner .tabs_item:first-child {display: block;} - /* 아코디언 목록 */ .faq .inner {margin-bottom:50px;} -.faq .inner .noti-box {display:inline-block;width:1400px;margin:0 auto;} +.faq .inner .noti-box {display:inline-block;width: 100%;} .faq .inner .noti-box .title {height:36px;margin:30px 0px 10px;outline:0px solid red;} .faq .inner .noti-box .title .count {float:left;font-size:16px;height:36px;line-height:36px;} .faq .inner .noti-box .title .count em {color:#d47b1c;font-weight: 500;} @@ -1445,23 +1414,17 @@ transform: rotate(45deg);} .faq .list-accordion .question span:last-child {padding-right: 50px;} .faq .list-accordion .question .type {width: auto;box-sizing: border-box;padding-left: 65px;font-weight: 600;color: #000;} .faq .list-accordion .question .date {position: absolute;right:0px;top:22px;font-size:12px;} - .faq .list-accordion .question.on {background: url(/images/btn/btn-arrow-close.png) no-repeat 98% center #556676;} .faq .list-accordion .question.on span {font-size:16px;color:#fff;font-weight: 400;} .faq .list-accordion .question.on .type {font-weight: 600;position: relative;} .faq .list-accordion .question.on .date {color:#fff;font-size:12px;} .faq .list-accordion .answer {position: relative;border-bottom: 1px solid #ddd;background: #f6f6f6;padding: 30px 20px 30px 85px;display: none;line-height: 1.8;text-align: left;} .faq .list-accordion .answer::before {content: '';display: inline-block;width:3px;height:48px;background: #ccc;position: absolute;left:70px;top:35px;} - .list-accordion .question .type::before {content: '';display: inline-block;border-radius: 50%;width:30px;height:30px;background: url(/images/icon/icon-question-on.png) no-repeat center #b68946;position: absolute;left:20px;top:14px;} .list-accordion .question.on .type::before {content:'';display:inline-block;border-radius: 50%;width:30px;height:30px;background: url(/images/icon/icon-question.png) no-repeat center #fff;} - - - - - +/* qna */ .qna .title {height:36px;margin:30px 0px 10px;outline:0px solid red;} .qna .title select {float:left;height:39px;line-height: 39px;border:1px solid #ddd;border-radius: 3px;min-width:120px;padding:0px 10px;} .qna .title .total-count .count {float:left;font-size:16px;height:36px;line-height:36px;} @@ -1475,11 +1438,11 @@ transform: rotate(45deg);} .qna .title .left {float: left;width:75%;} .qna .title .right {float: left;width:25%;text-align: right;} -.qna .inner .tab {position: relative;width:1400px;margin:0 auto;} +.qna .inner .tab {position: relative;width:100%;} .qna .inner .tabs {position: relative;width: 100.5%;text-align:left;} .qna .inner .tabs li {display: inline-block;margin:0% 0px;padding: 0;position: relative;text-align: center;width:49.6%;margin-left:-3px;} .qna .inner .tabs li:last-child {margin-right:0;} -.qna .inner .tabs a {background-color: #fff;border:1px solid #ddd;border-radius:3px;font-size:12px;letter-spacing:-1px;width:100%;min-width:110px;height:36px;line-height:36px;color: #444;font-weight: 400;display: inline-block;letter-spacing: 0;outline: none;text-decoration: none;outline: 0; +.qna .inner .tabs a {background-color: #fff;border:1px solid #ddd;border-radius:3px;font-size:14px;letter-spacing:-1px;width:100%;min-width:110px;height:38px;line-height:38px;color: #444;font-weight: 400;display: inline-block;letter-spacing: 0;outline: none;text-decoration: none;outline: 0; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; @@ -1508,7 +1471,7 @@ transform: rotate(45deg);} .qna .list-table-wrap li .t-file {width:auto;} .qna .list-table-wrap li .t-answer {width:8%;text-align: center;} .qna .list-table-wrap li .t-answer span {display:inline-block;background:#e6e7e9;height:auto;padding:2px 10px 4px;border-radius: 50px;font-size:12px;} -.qna .list-table-wrap li .t-answer span.coml {background: #b98d4d;} +.qna .list-table-wrap li .t-answer span.compl {background: #b98d4d;color:#fff;font-weight: 400;} .qna .list-table-wrap .t-tit-line {width: 100%;border-top: 2px solid #000;border-bottom: 1px solid #000;color: #fff;font-size:12px;font-weight:400;background: #556676;} .qna .list-table-wrap .t-tit-line span {text-align: center;} .qna .list-table-wrap li .message {width: 100%;text-align: center;} @@ -1517,23 +1480,7 @@ transform: rotate(45deg);} .qna .list-table-wrap .list-qna .t-type {width: 175px;} .qna .list-table-wrap li .t-type span {background:#b68946;display:inline-block;text-align: center;color:#fff;width:auto;height:auto;padding:1px 10px 2px;border-radius: 50px;} .qna .list-table-wrap li:hover .t-tit a {border-bottom:1px solid #376795;padding-bottom:1px;color:#376795;display: inline;} - - - - - - - - - - - - - - - - - +.qna .btn-box {float:right;} /* 공유하기 팝업 */ @@ -1569,7 +1516,7 @@ transform: rotate(45deg);} .pop-serge {position:fixed;top:9%;left:calc(50% - 435px);width: 870px;height: auto;border-radius: 5px;overflow: hidden;padding: 0 0px;background: #fff;z-index:999;} .pop-serge .inner {display:inline-block;width:90%;height:auto;padding:5%;background: #f2f4f7;} .pop-serge .inner .row {padding:0px 0px 0px;text-align:center;text-align: left;} -.pop-serge .Title {text-align:center;padding:30px 0px;background: url(/images/bg/bg-member-pop.jpg) no-repeat;background-size:cover;} +.pop-serge .Title {text-align:center;padding:30px 0px;background: url(/images/bg/bg-login.jpg) no-repeat;background-size:cover;} .pop-serge .Title h3 {font-size:24px;line-height:30px;margin-top:0px;color:#fff;font-weight: 300;text-align: left;padding:0% 5%;} .pop-serge .Title h3 span {font-size:12px;line-height:12px;font-weight: 100;color:#fff;margin-left:10px;} .pop-serge .inner .Text .text-box {border:1px solid #ddd;background: #fff;padding:30px 40px;margin-bottom:30px;} @@ -1662,9 +1609,9 @@ transform: rotate(45deg);} /* 알림 팝업 */ .pop-notice {position:fixed;top:20%;left:calc(50% - 210px);width: 420px;height: auto;border-radius: 5px;overflow: hidden;padding: 0 0px;background: #fff;z-index:999;} -.pop-notice .inner {display:inline-block;width:100%;height:auto;padding:50px 0px;background: url(/images/bg/bg-member-pop.jpg) no-repeat;background-size:cover;} +.pop-notice .inner {display:inline-block;width:100%;height:auto;padding:50px 0px;background: #fff;} .pop-notice .inner .row {padding:0px 60px 0px;text-align:center;} -.pop-notice .Title {text-align:center;padding:30px 0px;} +.pop-notice .Title {text-align:center;padding:30px 0px;background: url(/images/bg/bg-login.jpg) no-repeat;background-size:cover;} .pop-notice .Title h3 {font-size:24px;line-height:30px;margin-top:15px;color:#fff;font-weight: 300;} .pop-notice .Title p {font-size:16px;line-height:16px;color:#fff;} .pop-notice .inner .Text p {color:#666;font-size:13px;margin-bottom:50px;} @@ -1672,7 +1619,7 @@ transform: rotate(45deg);} .pop-notice .inner .btn {width:70%;padding:20px 15% 40px;line-height: normal} .pop-notice .inner .btn-box .btn {width:auto;padding:10px 25px;} .pop-notice .inner .btn p .cancel {color:#999;width:100%;display:inline;font-size:12px;font-weight: 300;border-bottom: 1px solid #ddd;padding:3px 3px;} -.pop-notice .inner .login-close {position: absolute;right: 20px;top: 20px;width: 26px;height: 26px;text-indent: 9999px;font-size: 0;overflow: hidden;background: url(/images/btn/btn_close_size_27x26_c9c9c7.png) no-repeat;background-size: 100%;} +.pop-notice .inner .notice-close {position: absolute;right: 20px;top: 20px;width: 26px;height: 26px;text-indent: 9999px;font-size: 0;overflow: hidden;background: url(/images/btn/btn_close_size_27x26_c9c9c7.png) no-repeat;background-size: 100%;} .pop-notice .Bg {width:100%;height:100%;position:fixed;top:0px;left:0px;background:rgba(0,0,0,0.5);z-index:-1;} @@ -1680,7 +1627,7 @@ transform: rotate(45deg);} .pop-return {position:fixed;top:20%;left:calc(50% - 210px);width: 420px;height: auto;border-radius: 5px;overflow: hidden;padding: 0 0px;background: #fff;z-index:999;} .pop-return .inner {display:inline-block;width:100%;height:auto;padding:50px 0px;background: #fff;} .pop-return .inner .row {padding:0px 30px 0px;text-align:center;} -.pop-return .Title {text-align:center;padding:30px 0px;background: url(/images/bg/bg-member-pop.jpg) no-repeat;background-size:cover;} +.pop-return .Title {text-align:center;padding:30px 0px;background: url(/images/bg/bg-login.jpg) no-repeat;background-size:cover;} .pop-return .Title h3 {font-size:24px;line-height:30px;margin-top:15px;color:#fff;font-weight: 300;} .pop-return .Title p {font-size:16px;line-height:16px;color:#fff;} .pop-return .inner .Text .text-box {color:#666;background: #f8f8f8;border:1px solid #ddd;border-radius:3px;padding:20px;font-size:14px;height:80px;text-align: left;margin-bottom:40px;} @@ -1695,7 +1642,7 @@ transform: rotate(45deg);} .pop-change {position:fixed;top:20%;left:calc(50% - 210px);width: 420px;height: auto;border-radius: 5px;overflow: hidden;padding: 0 0px;background: #fff;z-index:999;} .pop-change .inner {display:inline-block;width:100%;height:auto;padding:50px 0px;background: #fff;} .pop-change .inner .row {padding:0px 60px 0px;text-align:center;} -.pop-change .Title {text-align:center;padding:30px 0px;background: url(/images/bg/bg-member-pop.jpg) no-repeat;background-size:cover;} +.pop-change .Title {text-align:center;padding:30px 0px;background: url(/images/bg/bg-login.jpg) no-repeat;background-size:cover;} .pop-change .Title h3 {font-size:24px;line-height:30px;margin-top:15px;color:#fff;font-weight: 300;} .pop-change .Title p {font-size:16px;line-height:16px;color:#fff;} .pop-change .inner .change p {margin-bottom:5px;} @@ -1714,7 +1661,7 @@ transform: rotate(45deg);} .pop-find {position:fixed;top:20%;left:calc(50% - 210px);width: 420px;height: auto;border-radius: 5px;overflow: hidden;padding: 0 0px;background: #fff;z-index:999;} .pop-find .inner {display:inline-block;width:100%;height:auto;padding:50px 0px;background: #fff;} .pop-find .inner .row {padding:0px 60px 0px;text-align:center;} -.pop-find .Title {text-align:center;padding:30px 0px;background: url(/images/bg/bg-member-pop.jpg) no-repeat;background-size:cover;} +.pop-find .Title {text-align:center;padding:30px 0px;background: url(/images/bg/bg-login.jpg) no-repeat;background-size:cover;} .pop-find .Title h3 {font-size:24px;line-height:30px;margin-top:15px;color:#fff;font-weight: 300;} .pop-find .Title p {font-size:16px;line-height:16px;color:#fff;} .pop-find .inner .Text p {color:#666;font-size:14px;margin-bottom:30px;} @@ -1733,38 +1680,67 @@ transform: rotate(45deg);} /* 회원 팝업 */ .pop-member {position:fixed;top:20%;left:calc(50% - 210px);width: 420px;height: auto;border-radius: 5px;overflow: hidden;padding: 0 0px;background: #fff;z-index:999;} -.pop-member .inner {display:inline-block;width:100%;height:auto;padding:50px 0px;background: url(/images/bg/bg-member-pop.jpg) no-repeat;background-size:cover;} +.pop-member .inner {display:inline-block;width:100%;height:auto;padding:40px 0px 20px;background: url(/images/bg/bg-member-pop.jpg) no-repeat;background-size:cover;} .pop-member .inner .row {margin:0px 50px 0px;} -.pop-member .Title {text-align:center;padding:0px 0px 20px;text-align: left;} +.pop-member .Title {text-align:center;padding:0px 0px 30px;text-align: center;} .pop-member .Title h3 {font-size:24px;line-height:30px;margin-bottom:5px;color:#fff;font-weight: 300;} .pop-member .Title p {font-size:14px;font-weight: 100;line-height:16px;color:#fff;} -.pop-member .inner .card {background:url(/images/icon/icon-member-pop.png) no-repeat center 60px #fff;border-radius: 8px;padding:30px;} -.pop-member .inner .card .title {text-align:center;padding:85px 0px 100px;} -.pop-member .inner .card .title .name {font-size:32px;font-weight: 500} -.pop-member .inner .card .title .date {font-size:16px;} -.pop-member .inner .card .code {display: inline-block;width:100%;} -.pop-member .inner .card .code .num {float:left;width:60%;margin-right:5%;} -.pop-member .inner .card .code .num .na {font-size:16px;color:#666;} -.pop-member .inner .card .code .num .co {font-size:24px;line-height:28px;font-weight: 600;color:#333;} -.pop-member .inner .card .code .num .pr {line-height:0;} -.pop-member .inner .card .code .num .pr progress {width:100%;border:0;height:5px;border-radius: 3px;} -.pop-member .inner .card .code .num .pr progress::-webkit-progress-bar {background: #ddd;border:0;border-radius: 5px;} -.pop-member .inner .card .code .num .pr progress::-webkit-progress-value {background: #427cae;border-radius: 5px;} -.pop-member .inner .card .code .num .ti {font-size:12px;color:#666;margin-top:10px;} -.pop-member .inner .card .code .num .ti .timer {color:#2e899c;margin-left:6px;} -.pop-member .inner .card .code .qr {float:left;width:35%;} -.pop-member .inner .card .code .qr img {width:100%;} -.pop-member .inner .rolling {margin-top:20px;} -.pop-member .inner .rolling p marquee {background: #0b2c57;color:#fff;font-size:10px;padding:2px 0px 3px;border-radius: 3px;} -.pop-member .inner .login-close {position: absolute;right: 20px;top: 20px;width: 26px;height: 26px;text-indent: 9999px;font-size: 0;overflow: hidden;background: url(/images/btn/btn_close_size_27x26_c9c9c7.png) no-repeat;background-size: 100%;} +.pop-member .inner .card {border-radius: 8px;padding:0px 0% 20px;background: #f5f5f5;overflow: hidden;z-index: 9;position: relative;} +.pop-member .inner .card .title {text-align:center;padding:15px 0px 15px 85px;background:url(/images/icon/icon-member-secret.png) no-repeat 30px center #f5f5f5;box-shadow: 1px 1px 5px rgba(0,0,0,0.2);text-align: left;} +.pop-member .inner .card .title .name {font-size:24px;font-weight: 500;} +.pop-member .inner .card .title .date {font-size:13px;} +.pop-member .inner .card .qr {width:80%;padding:0% 10%;} +.pop-member .inner .card .qr p {text-align: center;font-size:16px;margin:30px 0px 20px;} +.pop-member .inner .card .qr img {width:100%;} +.pop-member .inner .card .code {display: inline-block;width:100%;background: #e8e8ea;width:70%;padding:5px 5%;margin:10px 10%;border-radius: 5px;} +.pop-member .inner .card .code .num .na {float:left;font-size:14px;} +.pop-member .inner .card .code .num .co {float:right;font-size: 18px;font-weight: 500;color:#2e899c;} +.pop-member .inner .text {text-align: center;font-size:13px;color:#fff;padding:20px 0px 0px;} +.pop-member .inner .member-close {position: absolute;right: 20px;top: 20px;width: 26px;height: 26px;text-indent: 9999px;font-size: 0;overflow: hidden;background: url(/images/btn/btn_close_size_27x26_c9c9c7.png) no-repeat;background-size: 100%;z-index: 99;} .pop-member .Bg {width:100%;height:100%;position:fixed;top:0px;left:0px;background:rgba(0,0,0,0.5);z-index:-1;} +.pop-member .innerbg {position: absolute;top:0px;left:0px;overflow: hidden;width: 800px;height: 800px;display: inline-block; +text-align: center;background-color: transparent;} +.pop-member .innerbg::after {content: "";position: absolute;top: -110%;left: -210%;width: 200%;height: 200%;opacity: 0; +transform: rotate(30deg); +background: rgba(255, 255, 255, 0.10); +background: linear-gradient(to right, +rgba(255, 255, 255, 0.10) 10%, +rgba(255, 255, 255, 0.10) 77%, +rgba(255, 255, 255, 0.3) 92%, +rgba(255, 255, 255, 0.0) 100%); +-webkit-animation: animate-bg 2.0s 1.5s ease-out infinite; +-moz-animation: animate-bg 2.0s 1.5s ease-out infinite; +-o-animation: animate-bg 2.0s 1.5s ease-out infinite; +animation: animate-bg 2.0s 1.5s ease-out infinite; +} +@keyframes animate-bg { +0% {opacity: 1.0;} +100% {opacity: 0;top: -30%;left: -30%;transition-property: left, top, opacity;} +} +.pop-member .innerbg::before {content: "";position: absolute;top: -110%;left: -210%;width: 200%;height: 200%;opacity: 0; +transform: rotate(30deg); +background: rgba(255, 255, 255, 0.10); +background: linear-gradient(to right, +rgba(255, 255, 255, 0.10) 10%, +rgba(255, 255, 255, 0.10) 77%, +rgba(255, 255, 255, 0.3) 92%, +rgba(255, 255, 255, 0.0) 100%); +-webkit-animation: animate-bg2 2.0s 1.9s ease-in infinite; +-moz-animation: animate-bg2 2.0s 1.9s ease-in infinite; +-o-animation: animate-bg2 2.0s 1.9s ease-in infinite; +animation: animate-bg2 2.0s 1.9s ease-in infinite; +} +@keyframes animate-bg2 { +0% {opacity: 0.5;} +100% {opacity: 0;top: -30%;left: -30%;transition-property: left, top, opacity;} +} /* 상세검색 팝업 */ .popup {width: 100%;height: 100%;background: rgba(0,0,0,.5);position: fixed;z-index: 150;top: 0;left: 0;} .popup .pop-wrap {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);} .popup .btn-wrap {padding-top: 20px;} -.popup .pop-wrap input[type="password"] {box-sizing: border-box;width: 100%;padding: 0 20px 0 40px;border: 1px solid #ddd;border-radius: 2px;line-height: 40px;background: #fff url(/images/kccf/icon/icon-scr.png) no-repeat 20px center;} +.popup .pop-wrap input[type="password"] {box-sizing: border-box;width: 100%;padding: 0 20px 0 40px;border: 1px solid #ddd;border-radius: 2px;line-height: 40px;background: #fff url(/images/icon/icon-scr.png) no-repeat 20px center;} .pop-advanced-search .pop-wrap {background: #f2f4f7;width: 90%;max-width: 1400px;height: 80%;overflow: hidden;border-radius: 8px;} .pop-advanced-search .pop-wrap .Title {background: #3670a3;width:96%;padding:0px 2%;height:80px;line-height: 80px;} @@ -1772,7 +1748,6 @@ transform: rotate(45deg);} .pop-advanced-search .pop-wrap .Title span:nth-of-type(1) {font-size:24px;font-weight:500;margin-right:10px;} .pop-advanced-search .pop-wrap .Title span:nth-of-type(2) {font-size:12px;font-weight:100;} .pop-advanced-search .pop-wrap .Title span:nth-of-type(3) {position: absolute;right: 30px;top: 30px;} - .pop-advanced-search .pop-wrap form {padding: 30px;height: calc(100% - 140px);overflow: auto;} .pop-advanced-search .scroll-wrap {width:100%;height: calc(100% - 103px);overflow: auto;} .advanced-form-table {border: 1px solid #ccc;border-bottom: none;border-radius: 4px;overflow: hidden;} @@ -1796,7 +1771,6 @@ transform: rotate(45deg);} .advanced-form-table .row-age input {width: calc(50% - 16px);} .advanced-form-table .input-area .tilde {display: block;float: left;line-height: 38px;color: #999;margin: 0 11px;} .advanced-form-table .check {display: inline-block;} - .pop-advanced-search .conditions-wrap {margin-top: 20px;padding-bottom: 10px;} .pop-advanced-search .conditions-title {position: static;width: auto;height: auto;line-height: 1;font-size: 18px;font-weight: 800;visibility: visible;margin-bottom: 10px;} .conditions-wrap .selected-conditions {border: 1px solid #ccc;background: #fff;border-bottom: none;padding: 15px 10px;border-radius: 4px 4px 0 0;} @@ -1817,7 +1791,6 @@ transform: rotate(45deg);} .pop-advanced-search .conditions-subject .depth1 {width: 11.111%;} .pop-advanced-search .conditions-story .depth1 {width: 25%;} .pop-advanced-search .conditions-datype .depth1 {width: 14.285%;} - .pop-advanced-search .conditions-wrap .depth1 {text-align: center;border-left: 1px solid #ddd;border-bottom: 1px solid #ddd;box-sizing: border-box;height: 50px;background: #f4f4f4;color: #666;} .pop-advanced-search .conditions-wrap .depth1.on {background: #fff;border-bottom: none;} .pop-advanced-search .conditions-wrap .depth1:first-child {border-left: none;} @@ -1832,7 +1805,6 @@ transform: rotate(45deg);} .pop-advanced-search .conditions-wrap .depth1 .depth2 li {display: inline-block;width: 14.285%;margin-right: -4px;line-height: 34px;} .pop-advanced-search .conditions-wrap .line3 .depth1 .depth2 {border-bottom: none;} .pop-advanced-search .conditions-wrap .depth1.on .depth2 {display: block;} - .pop-advanced-search .check input[type="checkbox"] + label {font: 12px 'dotum', '돋움', sans-serif;padding-left: 20px;line-height: 15px;} .pop-advanced-search .check input[type="checkbox"] + label:before {top: 0;width: 13px;height: 13px;} .pop-advanced-search .check input[type="checkbox"]:focus + label, @@ -1841,18 +1813,16 @@ transform: rotate(45deg);} .pop-advanced-search .check input[type="checkbox"]:hover + label:before {border-color: #2781c1;} .pop-advanced-search .check input[type="checkbox"]:checked + label {color: #2781c1;font-weight: bold;} .pop-advanced-search .check input[type="checkbox"]:checked + label:before {background-size: 10px;border-color: #2781c1;} - .pop-advanced-search .depth1-check input[type="checkbox"] + label {text-indent: -9999px;overflow: hidden;width: 30px;height: 48px;position: absolute;right: 0;padding: 0;} .pop-advanced-search .depth1-check input[type="checkbox"] + label:before {border: none;width: 33px;height: 33px;} .pop-advanced-search .depth1-check input[type="checkbox"]:checked + label:before {background-size: 13px;} - -/* BUTTON STYLE */ -.btn-wrap {text-align: center;} +/* button style */ +.btn-wrap {text-align: center;margin:30px 0px 30px;} .btn-box {margin:30px 0px 30px;} -.btn {display: inline-block;min-width: 130px;padding:0px 20px;height: 44px;border-radius: 3px;line-height: 42px;text-align: center;font-weight: 400;margin-right: 6px;color: #999;} +.btn {display: inline-block;min-width: 130px;padding:0px 20px;height: 44px;border-radius: 3px;line-height: 42px;text-align: center;font-weight: 600;margin-right: 6px;color: #999;} .btn-black {background: #333;color: #fff;} .btn-black:focus, .btn-black:hover {background: #666;transition: background .3s ease;} @@ -1867,7 +1837,10 @@ transform: rotate(45deg);} .btn-orange:hover {background: #e26c26;transition: background .3s ease;} .btn-gray {background: #666;color: #fff;} .btn-gray:focus, -.btn-gray:hover {background: #888;transition: background .3s ease;} +.btn-gray:hover {background: #444;transition: background .3s ease;} +.btn-lightgray {background: #909090;color: #fff;} +.btn-lightgray:focus, +.btn-lightgray:hover {background: #666;transition: background .3s ease;} .btn-white {border: 1px solid #999;background: #fff;} .btn-white:focus, .btn-white:hover {color: #fff;background: #2781c1;border-color: #2781c1;transition: background .3s ease;} @@ -1875,7 +1848,27 @@ transform: rotate(45deg);} .btn-box .left {float:left;} .btn-box .right {float:right;} + /* check style */ +.chk {position: relative;} +.chk input[type="checkbox"] {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip:rect(0,0,0,0);border: 0 } +.chk input[type="checkbox"] + label { display: inline-block;position: relative;padding-left: 30px;cursor: pointer;line-height: 22px;} +.chk input[type="checkbox"] + label:before {content: "";position: absolute;left: 0;top: 0;width: 20px;height: 20px;border: 1px solid #ddd;border-radius : 2px;} +.chk input[type="checkbox"]:focus + label, +.chk input[type="checkbox"]:hover + label {color: #000;} +.chk input[type="checkbox"]:focus + label:before, +.chk input[type="checkbox"]:hover + label:before {border-color: #2781c1;} +.chk input[type="checkbox"]:checked + label:before {background: url(/images/icon/icon-checked.svg) no-repeat 2px;} + +.chk input[type="checkbox"] + label {font: 12px;padding-left: 20px;line-height: 15px;} +.chk input[type="checkbox"] + label:before {top: 0;width: 13px;height: 13px;} +.chk input[type="checkbox"]:focus + label, +.chk input[type="checkbox"]:hover + label {color: #000;} +.chk input[type="checkbox"]:focus + label:before, +.chk input[type="checkbox"]:hover + label:before {border-color: #2781c1;} +.chk input[type="checkbox"]:checked + label {color: #2781c1;} +.chk input[type="checkbox"]:checked + label:before {background-size: 10px;border-color: #2781c1;} + .check {position: relative;} .check input[type="checkbox"] {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip:rect(0,0,0,0);border: 0 } .check input[type="checkbox"] + label { display: inline-block;position: relative;padding-left: 30px;cursor: pointer;line-height: 22px;} @@ -1884,8 +1877,8 @@ transform: rotate(45deg);} .check input[type="checkbox"]:hover + label {color: #000;} .check input[type="checkbox"]:focus + label:before, .check input[type="checkbox"]:hover + label:before {border-color: #2781c1;} -.check input[type="checkbox"]:checked + label:before {background: url(/images/icon/icon-checked.svg) no-repeat 2px;} -.check.tab input[type="checkbox"]:checked + label:before {background: url(/images/icon/icon-checked-tab.png) no-repeat center;position: absolute;top:10px;right:0px;left:auto;} +.check input[type="checkbox"]:checked + label:before {background: url(/images/icon/icon-checked.svg) no-repeat 0px;} +.check.tab input[type="checkbox"]:checked + label:before {background: url(/images/icon/icon-checked-tab.png) no-repeat center;position: absolute;top:18px;right:8px;left:auto;} .pop-advanced-search .check input[type="checkbox"] + label {font: 12px 'dotum', '돋움', sans-serif;padding-left: 20px;line-height: 15px;} .pop-advanced-search .check input[type="checkbox"] + label:before {top: 0;width: 13px;height: 13px;} @@ -1896,7 +1889,6 @@ transform: rotate(45deg);} .pop-advanced-search .check input[type="checkbox"]:checked + label {color: #2781c1;font-weight: bold;} .pop-advanced-search .check input[type="checkbox"]:checked + label:before {background-size: 10px;border-color: #2781c1;} - .paging {text-align: center;padding: 40px 0 0;} .paging li {font-size: 0;display: inline-block;vertical-align: middle;box-sizing: border-box;min-width: 30px;height: 30px;text-align: center;line-height: 30px;} .paging .btn {width: 30px;} diff --git a/src/main/webapp/qna-view.html b/src/main/webapp/qna-view.html new file mode 100644 index 00000000..65ed03f1 --- /dev/null +++ b/src/main/webapp/qna-view.html @@ -0,0 +1,214 @@ + + + + + + + +소장자료관 - QnA + + + + + + + + + + + + + + +
+ + + + + +
+

Q&A 섹션영역

+
+
+
+
    +
  • HOME
  • +
  • 고객지원
  • +
  • Q&A
  • +
+
    +
  • Q&A
  • +
+
+
화살표 아이콘
+
+
+ +
+
+
+
+

공지질문의 제목이 들어갑니다.자물쇠 아이콘

+ + 관리자 + 2021-08-21 + +
+
+
+ 파일 아이콘 + 경주문화원 첨부파일 명칭 양식.hwp + +
+
+ 파일 아이콘 + 경주문화원 첨부파일 명칭 양식.hwp + +
+
+
+
+
+

+ 경주시 사회적 거리두기 3단계로 인한 인원제한으로 부득이 사전접수자만 참석 가능함을 양해부탁드립니다.
+ 추후 경주문화원 유투브에 영상을 업로드해드릴 예정이오니 많은 시청바랍니다. 감사합니다.
+
+ 공지사항 내용이 들어갑니다.
+ 관리시스템을 통해 관리자가 입력한 공지사항 내용이 들어갑니다. 관리시스템을 통해 관리자가 입력한 공지사항 내용이 들어갑니다.
+ 관리시스템을 통해 관리자가 입력한 공지사항 내용이 들어갑니다.
+ 관리시스템을 통해 관리자가 입력한 공지사항 내용이 들어갑니다.
+

+
+
+
+
+ 답변 + 2021-08-21 +
+
+

+ 답변 내용이 들어갑니다.
+ 관리자가 작성한 답변 내용이 들어갑니다. 관리자가 작성한 답변 내용이 들어갑니다. 관리자가 작성한 답변 내용이 들어갑니다.
+ 관리자가 작성한 답변 내용이 들어갑니다. 관리자가 작성한 답변 내용이 들어갑니다.
+ 관리자가 작성한 답변 내용이 들어갑니다.
+

+
+
+
+
+
+ + +
+
+ +
+
+
+
+
+ +
+
+
+ + + +
+ + + \ No newline at end of file diff --git a/src/main/webapp/qna-write.html b/src/main/webapp/qna-write.html new file mode 100644 index 00000000..ee29096b --- /dev/null +++ b/src/main/webapp/qna-write.html @@ -0,0 +1,213 @@ + + + + + + + +소장자료관 - QnA + + + + + + + + + + + + + + +
+ + + + + +
+

Q&A 섹션영역

+
+
+
+
    +
  • HOME
  • +
  • 고객지원
  • +
  • Q&A
  • +
+
    +
  • Q&A
  • +
+
+
화살표 아이콘
+
+
+ +
+
+
+
+ Q&A 작성 +

* 표시는 필수 입력 항목입니다.

+
+
    +
  • +
    + +
    +
    + +
    +
  • +
  • +
    + + +
    +
  • +
  • +
    + 답변메일 수신여부 +
    +
    + + +
    +
  • +
  • +
    + +
    +
    + +
    +
  • +
  • +
    + +
    +
    + +
    + 파일 아이콘 + 20210821_문의사항_첨부이미지.jpg(3.7 MB) + +
    +
    +
  • +
+
+
+ + +
+
+
+
+
+ +
+
+
+ + + +
+ + + \ No newline at end of file