@charset "utf-8";
@import url("./common.css");

/* COMMON */
body{font-family:'nanumsquare';font-size:16px;font-weight:400;line-height:1.6}
table caption{overflow:hidden;position:absolute;width:1px;height:1px;clip:rect(1px, 1px, 1px, 1px)}
.ally-hidden{display:inline-block;width:0;height:0;font-size:0;overflow:hidden;color:transparent}
.custom-scroll::-webkit-scrollbar-track{box-shadow:none;background-color:#D9D9D9}
.custom-scroll::-webkit-scrollbar{width:18px;height:18px;background-color:#D9D9D9}
.custom-scroll::-webkit-scrollbar-thumb{background-color:#B8A086}
.app{position:relative;width:100%;min-width:1280px;height:100vh;margin:0 auto}
.app-contents{position:relative;width:100%;height:calc(100vh - 88px)}
/* ICONS */
[class^=icon-]{
    display:inline-block;flex-shrink:0;background-image:url(../images/sprite/sprite.png);background-repeat:no-repeat;background-size:117px 111px;white-space:nowrap;text-indent:200%;overflow:hidden
}
@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) {
    [class^=icon-common]{font-size:0;color:transparent;background-image:url(../images/sprite/sprite@2x.png)}
}
.icon-common-close{width:33px;height:34px;background-position:-10px -67px}
.icon-common-img{width:39px;height:37px;background-position:-10px -10px}
.icon-common-search_27{width:27px;height:25px;background-position:-63px -67px}
.icon-common-search_38{width:38px;height:35px;background-position:-69px -10px}
/* header */
.app-header{position:relative;width:100%;height:88px;background-color:#fff}
.app-header-content{display:flex;align-items:center;justify-content:space-between;;width:100%;padding:10px 50px;}
.app-header-ci{position:relative;z-index:10;display:inline-block;width:124px;height:67px}
.app-header-ci .ci{display:block;width:100%;height:100%}
.app-header .open-list-button{display:inline-block;padding:15px 20px;font-size:18px;font-weight:700;line-height:20px;background-color:#303444;border:1px solid #DACDBE;border-radius:10px;color:#D0D0D0;transition:all 0.4s ease}
.app-header .open-list-button:hover{background-color:#DACDBE;border-color:#303444;color:#303444}
/* search */
.search-container{position:relative;text-align:center}
.search-container .form-input{position:relative;display:inline-block}
.search-container .form-input input[type="text"]{border:5px solid #B99F86;font-family:'NotoSansCJKkr';font-weight:400}
.search-container .form-input input[type="text"]::placeholder{font-weight:400;color:rgba(255,255,255,0.5)}
.search-container .search-button{position:absolute;padding:0 5px}
.search-container .info-msg{line-height:1;color:#EDDECD;text-align:center}
/* layer */
.js-layered{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;z-index:999;display:none}
.js-layered .layer{position:relative;min-width:1280px;margin:0 auto;background-color:#fff;display:none}
.js-layered .js-layered-close{position:absolute;top:30px;right:30px;width:33px;height:33px}
.js-layered.is-active,
.js-layered .layer{display:block}
/* img-list */
.layer[data-layered-name="img-list"]{width:100%;height:100%}
.layer[data-layered-name="img-list"] .layer-content{display:flex;width:100%;height:100%}
.layer[data-layered-name="img-list"] .tit{min-width:440px;max-width:580px;height:100%;padding-top:100px;padding-left:80px;font-family:'nanummj';font-weight:400;font-size:52px;line-height:72px;color:#fff;background:#382C1D url(../images/layer-list__bg.png) no-repeat;background-size:cover}
.layer[data-layered-name="img-list"] .content{width:100%;height:100%;padding:100px 30px 30px 50px}
.layer[data-layered-name="img-list"] .table-wrap{width:100%;height:100%;border-top:3px solid #000;border-bottom:1px solid #000;overflow-y:auto}
.layer[data-layered-name="img-list"] .table{position:relative;width:100%;font-family:'NotoSansCJKkr';font-weight:400;font-size:14px;line-height:20px;color:#222}
.layer[data-layered-name="img-list"] .table th,
.layer[data-layered-name="img-list"] .table td{padding-left:10px;padding-right:10px;vertical-align:middle}
.layer[data-layered-name="img-list"] .table th{padding-top:15px;padding-bottom:15px;font-size:16px;line-height:1;text-align:center;font-weight:500;color:#000;border-bottom:1px solid #222}
.layer[data-layered-name="img-list"] .table td{height:42px;padding-top:5px;padding-bottom:5px;border-bottom: 1px solid #D9D9D9}
/****** PAGE ******/
/* main */
.main .app-contents{background:#544C44 url(../images/main-bg.png) no-repeat;background-size:cover}
.main .app-contents::before,
.main .app-contents::after{position:absolute;top:0;content:'';display:block;width:1px;height:100%;background-color:#B99F86}
.main .app-contents::before{left:50px}
.main .app-contents::after{right:50px}
.main .app-section{position:relative;top:calc(50% - 88px);left:0;width:100%;height:auto;transform:translateY(-50%)}
.main .section-header{font-family:'nanummj';font-size:64px;line-height:55px;color:#fff;text-align:center;overflow:hidden}
.main .section-header h2{opacity:0;transform:translateY(-50px);animation:fadeInUp 0.6s ease 0.3s 1 forwards}
.main .section-header span{display:block;font-size:42px;font-weight:400}
.main .search-container{margin-top:50px;overflow:hidden}
.main .search-container::before,
.main .search-container::after{position:absolute;top:0;content:'';display:block;width:1px;height:1px;background-color:#B99F86;animation:draw 0.9s ease 0s 1 forwards}
.main .search-container::before{right:50%}
.main .search-container::after{left:50%}
.main .search-container .form-input{opacity:0;transform:translateY(50px);animation:fadeInDown 0.6s ease 0.3s 1 forwards}
.main .search-container .form-input input[type="text"]{width:680px;height:65px;background-color:#473E34;padding:0 25px;font-size:24px;color:#fff;box-shadow: 4px 4px 15px 8px rgba(0, 0, 0, 0.15)}
.main .search-container .search-button{top:14px;right:15px}
.main .search-container .info-msg{margin-top:30px;font-size:18px;opacity:0;animation:fadeIn 0.4s ease 0.9s 1 forwards}
@keyframes draw {
    0%{width:0%}
    40%{width:25%}
    60%{width:25%}
    100%{width:0%}
}
@keyframes fadeIn {
    0%{opacity:0}
    100%{opacity:1}
}
@keyframes fadeInDown {
    0%{opacity:0;transform:translateY(-50px)}
    100%{opacity:1;transform:translateY(0)}
}
@keyframes fadeInUp {
    0%{opacity:0;transform:translateY(50px)}
    100%{opacity:1;transform:translateY(5px)}
}
/* sub : search result */
.page-search{background:url(../images/sub-bg.png) no-repeat;background-position:top right}
.page-search .app-header{display:block;background:none}
.page-search .app-header-tit{position:absolute;top:0;left:0;width:100%;padding-top:40px;font-family:'nanummj';font-size:28px;line-height:32px;font-weight:700;color:#40435D;text-align:center}
.page-search .app-header-tit span{font-weight:400}
.page-search .app-contents{padding:0 50px 60px}
.page-search .search{padding:20px 0}
.page-search .search .search-container .form-input input[type="text"]{width:600px;height:45px;background-color:#fff;padding:13px 20px;color:#000;font-size:22px;}
.page-search .search .search-container .form-input input[type="text"]::placeholder{font-weight:400;color:rgba(0,0,0,0.4)}
.page-search .search .search-container .search-button{top:11px;right:15px}
.page-search .search .search-container .info-msg{margin-top:10px;color:#B99F86}
.page-search .search-result{height:calc(100% - 111px)}
.page-search .search-result__header{padding-bottom:10px;border-bottom:1px solid rgba(0,0,0,0.2)}
.page-search .search-result__header .result-tit{font-size:22px;font-weight:700}
.page-search .search-result__header .result-case{margin-left:40px;color:#222}
.page-search .search-result__header .result-case em{font-weight:700;color:#C60000}
.page-search .search-result__content{display:flex;grid-gap:20px;height:calc(100% - 76px);margin-top:30px;}
.page-search .search-result__content.no-data{display:block}
.page-search .search-result__content .no-data-msg{margin-top:50px;text-align:center;font-size:18px;font-weight:700;color:#999;text-align:center;}
.page-search .search-result__list{flex:1;padding-right:20px;overflow:auto;border-bottom:1px solid #000}
/* .page-search .search-result__list.is-scroll{border-bottom:1px solid #000} */
.page-search .search-result__list li{position:relative;width:100%;margin-bottom:10px;width:100%;padding:20px;border:1px solid #E1E1E1;font-family:'NotoSansCJKkr';font-weight:400;text-align:left;background-color:#fff;transition:background 0.3s ease}
.page-search .search-result__list .js-view-img{position:absolute;top:20px;right:20px;display:inline-block;padding:5px 10px;font-size:14px;font-family:'nanumsquare';font-weight:700;color:#fff;background-color:#8B7661;border-radius:5px}
.page-search .search-result__list-tit{font-size:20px;font-weight:400;line-height:28px}
.page-search .search-result__list-info {
    font-size: 12px;
    line-height: 28px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.page-search .search-result__list-ocr{margin-top:8px;background-color:#F3F3F3}
/*
.page-search .search-result__list-ocr strong{display:inline-block;height:30px;padding:0 20px;background-color:#303444;color:#fff;line-height:30px;font-weight:400}
.page-search .search-result__list-ocr span {
    padding: 0 10px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 80%;
    display: inline-block;
}
*/
.page-search .search-result__list-ocr strong{display:inline-block;height:30px;padding:0 20px;background-color:#303444;color:#fff;line-height:30px;font-weight:400;vertical-align: middle;}
.page-search .search-result__list-ocr span {
    padding: 0 10px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: calc(100% - 110px);
    display: inline-block;
    vertical-align: middle;
}

#img_pic {max-height:100%; min-height:300px; vertical-align:middle; position:absolute; top:50%; left:50%; /* width:100%; */ height:auto; transform:translate(-50%, -50%);}


.page-search .search-result__list-ocr span em{color:#C60000}
.page-search .search-result__view{position:relative;flex:1;background-color:#fff;border:1px solid #D9D9D9;background-color:#F2F2F2}
.page-search .search-result__view .search-result__view-img{display:flex;align-items:center;justify-content:center;width:100%;height:100%;text-align:center;overflow:hidden;}
.page-search .search-result__view .search-result__view-img .txt_bx {width:100%;height:100%;}

.page-search .search-result__view .info-msg{margin-top:-50px}
.page-search .search-result__view .info-msg p{margin-top:15px;font-size:16px;line-height:30px;color:#666}
.page-search .search-result__view .info-msg.is-hide{display:none}
.page-search .search-result__list li:hover,
.page-search .search-result__list li.is-selected{border-color:#333;box-shadow:4px 4px 15px rgba(0, 0, 0, 0.15)}
.page-search .search-result__list li.is-selected{background:#EDDECD}
.page-search .search-result__view.is-load .info-msg{display:none}
.page-search .search-result__view.is-load .img-caption{position:absolute;right:0;bottom:0;display:inline-block;padding:8px 20px;font-family:'NotoSansCjkKr';font-size:12px;color:#fff;line-height:1;background-color:rgba(0,0,0,0.8)}
#pic_wrap {display:flex;justify-content:center;}