@charset "utf-8";

@import url('../common/header.css');

body {background: transparent;}
#ebric_mobile_wrap #main-content-wrap {background: #fff}

/* 배너 */
.main-view-wrap .banner-wrap {width: 100%; margin-bottom: 30px;}
.main-view-wrap .banner-wrap .banner { position: relative; width: 100%; height: 0; padding-bottom: 46%; overflow: hidden; text-align: center; }
.main-view-wrap .banner-wrap .banner img { width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);transform: translate(-50%,-50%); }

/* 컨텐츠 */
.main-view-wrap .content-wrap {padding: 10px;}
.main-view-wrap .search-wrap { position: relative; width: 100%;}
.main-view-wrap .search-wrap .search-tit {font-size: 1.6rem; padding-bottom: 10px; font-weight: 600;}
.main-view-wrap .search-wrap .left-search, .main-view-wrap .search-wrap .right-search {width: 100%; position: relative; height: 400px}
textarea {width: 100%; height: 100%; padding: 10px 15px 60px 15px; font-size: 1.3rem; line-height: 20px; border-radius: 0; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */}
textarea::-webkit-scrollbar {display: none}
.main-view-wrap .search-wrap .left-search textarea {border-color: #ff9134}
.main-view-wrap .search-wrap .left-search textarea:focus, 
.main-view-wrap .search-wrap .left-search textarea:active {border-color: #ff9134 !important}
.main-view-wrap .search-wrap .right-search {margin-top: 20px}
.main-view-wrap .search-wrap .right-search textarea {color: #ff9134}
.main-view-wrap .search-wrap .right-search textarea:focus, 
.main-view-wrap .search-wrap .right-search textarea:active{ border-color: #C6C6C6 !important; }
.right-search textarea {line-height: 24px}
.product-notice-wrap {font-size: 1.2rem;  font-weight: 400; margin: 10px 0; color: #888}
.main-view-wrap .search-wrap .left-search .left-info-wrap, 
.main-view-wrap .search-wrap .right-search .right-info-wrap {background: #f9f6f2; position: absolute; width: calc(100% - 2px); bottom: 1px; left: 1px}
.main-view-wrap .search-wrap .left-search .left-info-wrap .left-info, 
.main-view-wrap .search-wrap .right-search .right-info-wrap .right-info {padding: 15px; display: inline-block; font-weight: 500; color: #999; font-size: 1.3rem; height: 48px}
.main-view-wrap .search-wrap .left-search .left-info-wrap .left-info img,
.main-view-wrap .search-wrap .right-search .right-info-wrap .right-info img {width:16px; height: 16px; opacity: 0.5; position: relative; top: 1px}
.main-view-wrap .search-wrap .left-search .left-info-wrap .word-counting,
.main-view-wrap .search-wrap .right-search .right-info-wrap .word-counting {display: inline-block; font-size: 1.4rem; color: #ff9134; font-weight: 600}
.main-view-wrap .search-wrap .right-search .right-info-wrap {bottom: 1px}
.main-view-wrap .search-wrap .right-search .loading-wrap {width: 100%; height: calc(100% - 50px); z-index: 1; background: #fff; position: absolute; border: 1px solid #dcdcdc; border-bottom: 0}
.main-view-wrap .search-wrap .right-search .loader.loader--style8 {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.main-view-wrap .search-wrap .right-search .right-info-wrap .right-info span {color: #ff9a1d}
.main-view-wrap .search-wrap .right-search .right-info-wrap .word-counting {float: right; padding: 15px;}
.main-view-wrap .search-wrap .left-search .left-info-wrap .extract-btn {float: right;background: #ff9134; cursor: pointer; transition: opacity .2s ease}
.main-view-wrap .search-wrap .left-search .left-info-wrap .extract-btn .btn {padding: 14px 37px; font-size: 1.5rem; color: #fff; font-weight: 400}
.main-view-wrap .search-wrap .left-search .left-info-wrap .extract-btn:hover {opacity: 0.9}
.main-view-wrap .btn-wrap {margin: 20px 0 30px}
.main-view-wrap .btn-wrap a {display: inline-block;color: #fff; background: #ff9134; height: 45px; border-radius: 4px; line-height: 45px;font-size: 1.6rem; font-weight: 400;    text-align: center; padding: 0px 50px; letter-spacing: -0.5px; float: right; transition: background .3s ease}
.main-view-wrap .btn-wrap a:hover {background: #ff832c}

@media(max-width: 768px) {
	.main-view-wrap .search-wrap .left-search, .main-view-wrap .search-wrap .right-search {height: 300px}
}


@media(max-width: 550px) {
	.main-view-wrap .banner-wrap {margin-bottom: 15px}
	textarea {padding: 10px 10px 50px 10px;font-size: 1.2rem; line-height: 17px;}
	.main-view-wrap .search-wrap .search-tit {font-size: 1.4rem}
	.main-view-wrap .btn-wrap a {height: 40px; line-height: 40px; padding: 0 30px; font-size: 1.3rem}
	.main-view-wrap .search-wrap .left-search .left-info-wrap .left-info, .main-view-wrap .search-wrap .right-search .right-info-wrap .right-info {font-size: 1.2rem; padding: 10px; height: 39px}
	.main-view-wrap .search-wrap .right-search .loading-wrap {height: calc(100% - 39px)}
	.main-view-wrap .search-wrap .left-search .left-info-wrap .word-counting, .main-view-wrap .search-wrap .right-search .right-info-wrap .word-counting {font-size: 1.3rem;}
	.main-view-wrap .search-wrap .left-search .left-info-wrap .extract-btn .btn {padding: 10px 25px; font-size: 1.3rem}
	.main-view-wrap .search-wrap .right-search .right-info-wrap .word-counting {padding: 10px}
}

@media(max-width: 420px) {
	textarea {padding: 10px 10px 85px 10px;}
	.main-view-wrap .search-wrap .left-search .left-info-wrap .extract-btn {float: none; text-align: center}
	.main-view-wrap .search-wrap .left-search .left-info-wrap .left-info img, .main-view-wrap .search-wrap .right-search .right-info-wrap .right-info img {width: 11px; height: 11px; top: 4px;}
}

@media(max-width: 350px) {
	.main-view-wrap .search-wrap .left-search .left-info-wrap .word-counting, .main-view-wrap .search-wrap .right-search .right-info-wrap .word-counting {font-size: 1.2rem; font-weight: 400}
	.main-view-wrap .search-wrap .left-search .left-info-wrap .left-info, .main-view-wrap .search-wrap .right-search .right-info-wrap .right-info {font-size: 1.1rem}
	.main-view-wrap .search-wrap .right-search .right-info-wrap .right-info {padding: 10px 0 0 10px; width: 100%}
	.main-view-wrap .search-wrap .right-search .right-info-wrap .word-counting {padding: 0 10px 10px 0}
}