@charset "utf-8";

/* 서지 페이지 공통 스타일 */
*,*:after,*:before { box-sizing: border-box; }
html { text-shadow: 1px 1px 1px rgba(0,0,0,0.004); min-width: 1200px; font-size: 62.5%; scroll-behavior: smooth; }
html, body { width:100%; height:100%; background: #fff; color: #272a31; }
body { font-family: 'Noto Sans KR','Sans-serif'; font-size: 1.4rem; letter-spacing: 0.1px; background-color: #fff; text-rendering: auto; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { text-decoration:none; color: #272a31; }
::selection {background:#1A1F2A; color:#FFF; text-shadow:none; }
::-moz-selection {background:#1A1F2A; color:#FFF; text-shadow:none; }
::-webkit-selection {background:#1A1F2A; color:#FFF; text-shadow:none; }

/*폼 요소*/
input, textarea,option, button { font-family: 'Noto Sans KR','Sans-serif'; font-size: 1.3rem; letter-spacing: -0.5px; }
input[type=text],input[type=password],textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; }
select { font-family: 'Nanum Square','Sans-serif'; font-size: 1.3rem; letter-spacing: -1px; width: 150px; height: 30px; padding-left: 5px; padding-right: 5px; }

input::-ms-input-placeholder { color: #ccc; }
input::-webkit-input-placeholder { color: #ccc; } 
input::-moz-placeholder { color: #ccc; }

/*숨김처리*/
.blind { position:absolute; font-size:0; line-height:0; height:0; }

/*테스트*/
.testBorder { border:1px solid red !important; }
.testBg { background-color:yellow !important; }

/*클리어픽스*/
.clearfix:after { display: block; clear: both; height: 0; content: ''; }

/* 헤더 */
#header_container { min-height: 100px; background: #1A1F2A; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.12); position: sticky; z-index: 998; top: 0; right: 0; left: 160px; transition: left .25s ease; } /*헤더가 커질경우 본문이 가려지는 현상 방지*/
#tab_view_toggle ~ .report-container #header_container { min-width: 1040px; }
#tab_view_toggle:checked ~ .report-container #header_container { min-width: 1200px; left: 0; }

/* 헤더 */
#header_container .header .ipoffice-logo { position: absolute; left: 30px; top: 30px; }
#header_container .header .ipoffice-logo a { display: block; }
#header_container .header .ipoffice-logo a img { height: 22px; }
#header_container .header { position: relative; height: 100%; overflow: hidden; padding: 17px 390px 17px 25px; display: flex; display: -ms-flexbox; min-height: 89px;}
#header_container .gnb-area { background: #424f6b; height: 35px; padding: 0 25px;  }
#header_container .gnb-area ul { height: 100%; float: left; }
#header_container .gnb-area ul li { float: left; height: 100%; }
#header_container .gnb-area ul li a { height: 100%; padding: 0 25px; line-height: 35px; color: #fff; font-size: 1.2rem; display: block; }
#header_container .gnb-area ul li.select a { background: #1a1f2a; }
#header_container .gnb-area ul li.disabled a { color: #aaa; cursor: not-allowed;}
#header_container .gnb-area .tab-view-toggle-wrap { float: right; padding-top: 5px; }
#header_container .gnb-area .tab-view-toggle-wrap .view-toggle { float: left; margin-right: 10px; }
#header_container .gnb-area .tab-view-toggle-wrap .view-toggle:last-child { margin-right: 0; }
.view-toggle input[type=checkbox] { display: none; }
.view-toggle input[type=checkbox] + label { font-size: 1.1rem; color: #fff; position: relative; padding-right: 27px; }
.view-toggle input[type=checkbox] + label:after { height: 15px; display: block; position: absolute; content: 'on'; font-family: 'Arial'; right: 0; padding: 0 5px; line-height: 13px; background: #1DB53D; border-radius: 3px; top: 50%; margin-top: -7px; font-size: 1rem; font-weight: bold; }
.view-toggle input[type=checkbox] + label:hover:after { background: #28C549; }
.view-toggle input[type=checkbox]:checked + label:after { height: 15px; display: block; position: absolute; content: 'off'; font-family: 'Arial'; right: 0; padding: 0 5px; line-height: 13px; background: #CC3D30; border-radius: 3px; top: 50%; margin-top: -7px; font-size: 1rem; font-weight: bold; }
.view-toggle input[type=checkbox]:checked + label:hover:after { background: #DB4B3D; }


#header_container .header .number-area { position: relative; margin-right: 30px; white-space: nowrap; }
#header_container .header .number-area:after { position: absolute; content: ''; width: 1px; height: 20px; background: #fff; opacity: .2; right: -15px; top: 7px; }
#header_container .header .number-area.non-pipe:after { position: relative !important; }
#header_container .header .number-area .patent-number { color: #fff; font-size: 1.8rem; display: inline-block; line-height: 35px; margin-right: 10px; white-space: nowrap; }
#header_container .header .number-area .down-btn { width: 35px; height: 35px; border: 1px solid #424f6b; display: inline-block; border-radius: 5px; text-align: center; vertical-align: top; transition: background .25s ease, border-color .25s ease; }
#header_container .header .number-area .down-btn img { width: 16px; margin-top: 8px; opacity: 0.7; transition: opacity .25s ease; }
#header_container .header .number-area .down-btn:hover { border-color: #fff; }
#header_container .header .number-area .down-btn:hover img { opacity: 1; }
#header_container .header .patent-name { color: #fff; font-weight: 300; padding: 5px 0; font-size: 1.5rem; max-height: 187px; overflow-y: auto; -ms-overflow-style: none; }
#header_container .header .patent-name::-webkit-scrollbar { display: none; }
#header_container .header .patent-name .translation { display: block; font-size: 1.2rem; margin-top: 5px; }
#header_container .header .patent-name .translation .ico { display: inline-block; font-size: 0.9rem; font-family: 'Arial'; font-weight: bold; height: 18px; border: 1px solid #fff; border-radius: 9px; line-height: 16px; padding: 0 7px; cursor: default; opacity: .7; margin-right: 3px; vertical-align: top; }
#header_container .header .patent-name .translation .ico img { margin-right: 3px; margin-top: 4px; }

#header_container .header .patent-info { position: absolute; right: 20px; }
#header_container .header .patent-info .info-section { float: left; margin-right: 10px; }
#header_container .header .patent-info .info-section:last-child { margin-right: 0; }
#header_container .header .patent-info .info-section .round { display: table; width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,0.6); text-align: center; float: left; margin-right: 5px; }
#header_container .header .patent-info .info-section .round .txt { color: #fff; font-size: 1.1rem; display: table-cell; vertical-align: middle; }
#header_container .header .patent-info .info-section .numb { float: right; color: #fff; font-size: 1.2rem; line-height: 36px; }

#info_container { padding: 30px 210px 30px 40px; }

@media all and (max-width: 1200px)
{
	#info_container { padding: 30px 90px 30px 40px; }
}


/* 로딩 레이어 */
.ipoffice-container .search-layer-wrap { position: fixed; left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 99999; display: none; }
.ipoffice-container .search-layer-wrap.on { display: block; }

/* 로딩바 */
.form-loader { overflow: hidden; height: 100%; position: absolute; width: 100%; min-height: 150px; }
.form-loader ul { height: 100%; position: absolute; width: 100%; margin: 0; }
@keyframes preload {
  0% {
    background: #567DE7;
    opacity: 1;
  }
  50% {
    background: #567DE7;
    opacity: 0.3;
  }
  100% {
    background: #567DE7;
    opacity: 1;
  }
}
.form-loader .form-loading { display: block; height: 14px; top: 50%; left: 50%; position: absolute; display: inline-block; width: 62px; margin-left: -34px; }
.form-loader .form-loading li { background: #fff; display: block; float: left; width: 15px; height: 15px; position: relative; margin-left: 8px; animation: preload 1s infinite; top: -50%; border-radius: 50%; transition: background .3s ease,opacity .3s ease; }
.form-loader .form-loading li:first-child { margin-left: 0 }
.form-loader .form-loading li:nth-child(2) { animation-delay: .2s }
.form-loader .form-loading li:nth-child(3) { animation-delay: .4s }