@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:#1652f0; color:#FFF; text-shadow:none; }
::-moz-selection {background:#1652f0; color:#FFF; text-shadow:none; }
::-webkit-selection {background:#1652f0; 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: var(--main-theme); box-shadow: 0 2px 5px 0 rgba(0,0,0,0.12); position: fixed; 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: var(--blue); 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: var(--deep-blue); }
#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 .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 #c3ffee; display: inline-block; border-radius: 3px; 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.6rem; 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.3rem; 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: 40px; height: 26px; border-radius: 10%; background: rgba(0,0,0,0.2); text-align: center; float: left; margin-right: 7px; }
#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: 26px; }

#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 }


/* 하이라이트 */
.highlight {cursor:help;}

mark.brown { background-color: #D7C0AE;}
mark.blue { background-color: #8EA7E9;}
mark.purple { background-color: #d9b8ff;}
mark.red { background-color: #ec6f6f;}
mark.pink { background-color: #FF87CA;}
mark.sky { background-color: #6795fd;}
mark.green { background-color: #C9E4C5;}
mark.yellow { background-color: #dcd030;}
mark.mint { background-color: #CAF7E3;}
mark.deep-purple { background-color: #a38dbc;}
mark.gray { background-color: #D8D3CD;}
mark.carrot { background-color: #F69E7B;}
mark.deep-green { background-color: #5C8984;}
mark.light-blue { background-color: #D2E0FB;}
mark.charcoal { background-color: #9494a1;}

span.under-brown {  background: linear-gradient(to top, #D7C0AE 40%, transparent 40%);}
span.under-blue {  background: linear-gradient(to top, #8EA7E9 40%, transparent 40%);}
span.under-purple {  background: linear-gradient(to top, #d9b8ff 40%, transparent 40%);}
span.under-red { background: linear-gradient(to top, #ec6f6f 40%, transparent 40%);}
span.under-pink {  background: linear-gradient(to top, #FF87CA 40%, transparent 40%);}
span.under-sky {  background: linear-gradient(to top, #6795fd 40%, transparent 40%);}
span.under-green { background: linear-gradient(to top, #C9E4C5 40%, transparent 40%);}
span.under-yellow { background: linear-gradient(to top, #dcd030 40%, transparent 40%);}
span.under-mint{ background: linear-gradient(to top, #CAF7E3 40%, transparent 40%);}
span.under-deep-purple { background: linear-gradient(to top, #a38dbc 40%, transparent 40%);}
span.under-gray {  background: linear-gradient(to top, #D8D3CD 40%, transparent 40%);}
span.under-carrot {  background: linear-gradient(to top, #F69E7B 40%, transparent 40%);}
span.under-deep-green { background: linear-gradient(to top, #5C8984 40%, transparent 40%);}
span.under-light-blue { background: linear-gradient(to top, #D2E0FB 40%, transparent 40%);}
span.under-charcoal{ background: linear-gradient(to top, #9494a1 40%, transparent 40%);}




/* 하이라이트 네비 */
.right-scroll-menu ul li .navi { font-size: 1.0rem; font-weight: 400; color: #161414; display: block; padding: 2px 3px; transition: background .25s ease; cursor: pointer; margin: 3px 15px;}

.right-scroll-menu ul li .navi.brown { background-color: #D7C0AE; }
.right-scroll-menu ul li .navi.blue { background-color: #8EA7E9;}
.right-scroll-menu ul li .navi.purple { background-color: #d9b8ff;}
.right-scroll-menu ul li .navi.red { background-color: #ec6f6f;}
.right-scroll-menu ul li .navi.pink { background-color: #FF87CA;}
.right-scroll-menu ul li .navi.sky { background-color: #6795fd;}
.right-scroll-menu ul li .navi.green { background-color: #C9E4C5;}
.right-scroll-menu ul li .navi.yellow { background-color: #dcd030;}
.right-scroll-menu ul li .navi.mint { background-color: #CAF7E3;}
.right-scroll-menu ul li .navi.deep-purple { background-color: #a38dbc;}
.right-scroll-menu ul li .navi.gray { background-color: #D8D3CD;}
.right-scroll-menu ul li .navi.carrot { background-color: #F69E7B;}
.right-scroll-menu ul li .navi.deep-green { background-color: #5C8984;}
.right-scroll-menu ul li .navi.light-blue { background-color: #D2E0FB;}
.right-scroll-menu ul li .navi.charcoal { background-color: #9494a1;}


.right-scroll-menu ul li .navi-under { font-size: 1.0rem; font-weight: 400; color: #161414; margin: 0 0 0 15px; display: inline-block; transition: background .25s ease; cursor: pointer;}

.right-scroll-menu ul li .navi-under.under-brown { background: linear-gradient(to top, #D7C0AE 40%, transparent 40%); }
.right-scroll-menu ul li .navi-under.under-blue {  background: linear-gradient(to top, #8EA7E9 40%, transparent 40%);}
.right-scroll-menu ul li .navi-under.under-purple {  background: linear-gradient(to top, #d9b8ff 40%, transparent 40%);}
.right-scroll-menu ul li .navi-under.under-red { background: linear-gradient(to top, #ec6f6f 40%, transparent 40%);}
.right-scroll-menu ul li .navi-under.under-pink {  background: linear-gradient(to top, #FF87CA 40%, transparent 40%);}
.right-scroll-menu ul li .navi-under.under-sky {  background: linear-gradient(to top, #6795fd 40%, transparent 40%);}
.right-scroll-menu ul li .navi-under.under-green { background: linear-gradient(to top, #C9E4C5 40%, transparent 40%);}
.right-scroll-menu ul li .navi-under.under-yellow { background: linear-gradient(to top, #dcd030 40%, transparent 40%);}
.right-scroll-menu ul li .navi-under.under-mint{ background: linear-gradient(to top, #CAF7E3 40%, transparent 40%);}
.right-scroll-menu ul li .navi-under.under-deep-purple { background: linear-gradient(to top, #a38dbc 40%, transparent 40%);}
.right-scroll-menu ul li .navi-under.under-gray {  background: linear-gradient(to top, #D8D3CD 40%, transparent 40%);}
.right-scroll-menu ul li .navi-under.under-carrot {  background: linear-gradient(to top, #F69E7B 40%, transparent 40%);}
.right-scroll-menu ul li .navi-under.under-deep-green { background: linear-gradient(to top, #5C8984 40%, transparent 40%);}
.right-scroll-menu ul li .navi-under.under-deep-blue { background: linear-gradient(to top, #D2E0FB 40%, transparent 40%);}
.right-scroll-menu ul li .navi-under.under-charcoal{ background: linear-gradient(to top, #9494a1 40%, transparent 40%);}