@charset "utf-8";

/* Default */
html, body	{ /* width: 1903px; */ min-width: 1350px; margin:0; padding:0; background:#FFF; text-align:center; font-family: 'notokr-regular', '맑은고딕', 'Malgun Gothic', sans-serif; }
html	{ overflow:scroll; overflow-x:auto; }
td,div,p,th,input,select,textarea,li	{ color:#808080; font-size:12px; }
select	{ font-family:AppleGothic,Sans-serif,Dotum; }
td,th,p,dd	{ line-height:16px; }
textarea	{ padding:5px; }
img,fieldset	{ border:none; }
legend	{ position:relative; width:0; height:0; font-size:0; line-height:0; overflow:hidden; visibility:hidden; }
h1,h2,h3,h4,h5,p,ul,li,ol,dl,dt,dd,form,fieldset	{ margin:0; padding:0; }
li	{ list-style-type:none; }
table	{ padding:0; border-spacing:0; border:0; border-collapse:collapse; }

/* Layout */
#wrap	{ position:relative; width:1300px; text-align:left; margin:0 auto;  }
#header	{ width: 100%; height: 550px; z-index:2; background: #080404; }
#nav	{ height: 30px; padding-top: 15px; width: 100%; z-index: 1; background: #000; }
#body	{ position:relative; width:1000px; clear:both; z-index:1; }
#footer	{ position:relative; width:100%; clear:both; z-index:0; padding-bottom:0px; }

.header-inner	{ position:relative; display: flex; margin: auto; width:1300px; height:55px; }
.header-bg		{ width: 100%; height: 100%; position: relative; background: #fefce7; /* top: 0; left: 0; overflow: hidden; */ }
.header-bg img	{ /* position: absolute; bottom: 0; left: 0; right: 0; */ margin: auto; width: 1300px; height: 550px; }
.header-copy	{ width: 520px; height: 94px; position: absolute; top: 140px; margin: auto; left: 0; right: 0; }
.header-subcopy	{ width: 445px; height: 17px; position: absolute; top: 260px; margin: auto; left: 0; right: 0; }

#nav .left { float: left; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; }
#nav .right { float: right; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-right: 40px; }
#nav .menu-item { cursor: default; height: 30px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; /* justify-content: center; */ display: -webkit-box; display: -ms-flexbox; display: flex; width: 160px; font-family: 'kopub-dotum-medium'; font-size: 15px; color: #fff; }
#nav .menu-item[data-item="1"] { /* width: 120px; */ margin-left: 30px; }
#nav .menu-item[data-item="2"] { /* width: 120px; */ }
#nav .menu-item[data-item="3"] { width: 130px; }
#nav .menu-item[data-item="4"] { /* width: 110px; */ }
#nav .menu-item:hover { }
#nav .logo { cursor: pointer; width: 120px; height: 22px; margin-right: 20px; position: relative; top: 5px; }
#nav .user { width: 70px; margin: 0 10px 0 30px; }
#nav .search { float: right; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; position: absolute; right: 0; top: 15px; }
#nav .search img { cursor: pointer; width: 24px; height: 23px; }
#nav .search input { width: 0px; height: 30px; outline: none; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; margin: 0; border: none; padding: 0; margin-right: 10px; }
#nav .search.open { width: 400px;  }
#nav .search.open input { width: 300px; padding: 0 10px; }
#nav .user-item			{ cursor: pointer; width: 80px; height: 30px; line-height: 30px; color: #fff; font-size: 13px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-box; display: -ms-flexbox; display: flex; }

/* .menu-sub { position: absolute; top: 60px; left: calc(((100% - 1000px) / 2) + 150px); } */
.menu-sub { position: absolute; display: none; top: 55px; right: 0; left: 0; overflow: hidden; width: 100%; min-width: 1350px; z-index: 120; background: #000; opacity: 0.8; box-sizing: border-box; padding-left: 38px; }
.menu-sub > ul { overflow: hidden; position: relative; left: 0; width: 1000px; height: 100%; background: transparent; box-sizing: border-box; margin: 0 auto; }
.sub_list { display: block; float: left; padding: 11px 0 30px 1px; height: 450px; position: relative; transform: skew(-0.03deg); box-sizing: border-box; }
.sub_list ul li { position: relative; text-align: left; font-family: 'kopub-dotum-light'; font-size: 14px; margin-top: 7px; cursor: pointer; color: #fff; }
.sub_list ul li:hover { font-family: 'kopub-dotum-bold'; }
.sub_list[data-item="1"] { /* padding-left: 18px; */ width: 160px; }
.sub_list[data-item="2"] { /* padding-left: 22px; */ width: 160px; }
.sub_list[data-item="3"] { /* padding-left: 34px; */ width: 130px; }
.sub_list[data-item="4"] { /* padding-left: 58px; */ width: 160px; }
.sub_list[data-item="5"] { /* padding-left: 67px; */ width: 160px; }
.menu-item-sub { display: none; position: absolute; background: #F4F9FC; width: 150px; padding: 15px; top: 0; left: 10px; }
.menu-item-sub li { color: #9FA0A2; font-size: 12px; font-family: 'notokr-medium'; cursor: pointer; margin: 7px 0; text-align: left; }
.menu-item-sub li:hover { color: #0A3F5E; }
.menu-item-sub li.main { cursor: default; }
.menu-item-sub li.main:hover { color: #9FA0A2; }
.menu-item-sub li.sub { padding-left: 10px; }
.menu-sub .menu-item-sub22:last-child { width: 135px; }

/* 메인 탭 */
.main-tabs					{ width: 100%; margin-top: 100px; padding-bottom: 60px; }
.main-tabs .tab-navs 		{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; }
.main-tabs .tab-nav			{ width: 120px; height: 36px; margin-right: 55px; position: relative; cursor: pointer; text-align: center; line-height: 35px; font-size: 14.5px; letter-spacing: -0.8px; }
.main-tabs .tab-nav:last-child { margin-right: 0; }
.main-tabs .tab-nav.active	{ font-weight: bold; color: #000; }
.main-tabs .tab-nav.active:after { content: ""; background: #F39801; width: 50px; height: 2px; position: absolute; bottom: 0; left: 0; right: 0; margin: auto; }
.main-tabs .tab-panes		{ width: 100%; height: 300px; display: flex; align-items: center; justify-content: center; }
.main-tabs .tab-panes .main_title { padding-bottom: 10px; font-family: 'SCDream6'; color: #231815; font-size: 24px; letter-spacing: -0.8px; }
.main-tabs .tab-pane		{ display: none; width: 100%; height: 130px; position: relative; }
.main-tabs .tab-pane.active	{ display: block; }
.main-tabs .news-wrap		{ display: flex; }

/* 디자인권 검색 */
#design-search-wrap { width: 100%; margin: auto; }
#design-search-wrap .menu { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
#design-search-wrap .menu-item { display: block; margin: 0 1.5px; text-align: center; cursor: pointer; }
#design-search-wrap .menu-item img { width: 90px; height: 90px; }
#design-search-wrap .menu-item img:hover { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }
#design-search-wrap .menu-item span { display: block; font-size: 12px; font-family: 'SCDream7'; color: #231815; margin-top: 10px; /* letter-spacing: -0.8px; */ }
#design-search-wrap .main_title { text-align: center; }

/* IP 뉴스 */
#ip-news-wrap { width: 750px; margin-right: 40px; }
#ip-news-wrap .menu { height: 200px; }
#ip-news-wrap .list { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: 100%; height: 100%; background: #eeeeef; position: relative; border-radius: 25px; }
#ip-news-wrap .list .header { width: 142px; height: 46px; background-image: url(/images/renew/ip_news_title.gif); }
#ip-news-wrap .list .title { color: #484848; font-size: 14px; font-weight: bold; margin: auto 0; padding: 2px 10px; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; flex: 1; }
#ip-news-wrap .list .date { width: 80px; color: #484848; font-size: 13px; font-weight: bold; margin: 0 0 0 20px; text-align: end; padding-right: 10px; }
#ip-news-wrap .list .paging { width: 60px; display: -ms-inline-grid; display: inline-grid; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: distribute; align-content: space-between; padding: 15px 0; }
#ip-news-wrap .list .paging img { margin: 4px; cursor: pointer; }
#ip-news-wrap .more { position: absolute; top: -27px; right: 0; width: 70px; color: #1B5467; font-size: 13px; height: 17px; padding: 5px 5px 5px 10px; cursor: pointer; } 
#ip-news-wrap .rolling { width: 787px; margin: 14px 0 10px 10px; }
#ip-news-wrap .rolling ul { padding: 15px; }
#ip-news-wrap .rolling li { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: 678px; line-height: 30px; align-items: center; }
#ip-news-wrap .rolling li:hover { background-color: #fff; border-radius: 50px; box-shadow: 2px 2px gray; }
#ip-news-wrap .rolling .index { color: #a5a59f; font-size: 14px; font-weight: bold; margin: 0 15px 0 10px; }

/* 오늘의 지식재산권 */
#today-ip-wrap { width: 510px; }
#today-ip-wrap .image-list { height: 200px; }
#today-ip-wrap .image-list ul { display: inline-flex; height: 100%; }
#today-ip-wrap .image-list ul li { border: 1px solid #cecece; margin-right: 0px; }
#today-ip-wrap .image-list ul li:last-child { margin-right: 0px; }
#today-ip-wrap .image-list img { cursor: pointer; }

/* 메인 갤러리 */
.main-gallery	{ display: flex; height: 600px; flex-direction: column; align-items: center; justify-content: center; }
.main-gallery .panel	{ width: 475px; position: relative; margin-left: -17px; z-index: 1; background: #fff; }
/* .main-gallery .gallery-scroll { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 100%; overflow: hidden; } */
.main-gallery .gallery	{ display: flex; flex-wrap: nowrap; width: 100%; height: 100%; position: relative; box-sizing: border-box; align-items: center; }
.main-gallery .gallery .item { position: relative; margin: 0; overflow: hidden; border-radius: 10px; margin-bottom: 20px; -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; break-inside: avoid; cursor: pointer; height: 310px; width: 230px; margin-left: 37.5px; }
.main-gallery .gallery .item:first-child { margin-left: 0px !important; }
.main-gallery .gallery .item.active .item-caption { background: rgba(0, 0, 0, 0.7); }
/* .main-gallery .gallery .item:nth-child(2) { margin-top: 170px; }
.main-gallery .gallery .item:nth-child(2n) {  }
.main-gallery .gallery .item:nth-child(2n-1) { margin-right: 20px; }
.main-gallery .gallery .item:nth-child(2n+3) { margin-top: -170px; } */
.main-gallery .gallery .item .item-img { width: 230px; height: 310px; }
.main-gallery .gallery .item:hover img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }
.main-gallery .gallery .item .item-caption { position: absolute; bottom: 0; background: rgba(0, 0, 0, 0.25); padding: 10px; width: 230px; box-sizing: border-box; }
.main-gallery .gallery .item .item-caption .tag { color: #fff; font-size: 15px; }
.main-gallery .gallery .item .item-caption .item-title { color: #fff; font-size: 16px; }
.main-gallery .gallery .item .item-caption .item-regdt { color: #fff; font-size: 14px; margin-top: 10px; }
.main-gallery .gallery .item .arrow { position: absolute; right: 10px; bottom: 0px; color: #fff; font-size: 32px; }
.main-gallery .gallery-copy	{ width: 311px; height: 97px; position: absolute; top: 190px; left: 30px; }
.main-gallery .gallery-subcopy	{ width: 205px; height: 39px; position: absolute; top: 325px; left: 30px; }
.main-gallery .gallery-title { display: flex; flex-direction: column; align-items: center; padding-bottom: 50px; }
.main-gallery .gallery-title span:first-child { font-family: 'SCDream6'; color: #231815; font-size: 30px; letter-spacing: -0.8px; }
.main-gallery .gallery-title span:last-child { font-family: 'SCDream4'; color: #231815; font-size: 21px; letter-spacing: -0.8px; padding-top: 5px; }
.main-gallery .menu { position: absolute; top: 405px; left: 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 14.5px; letter-spacing: -1px; }
.main-gallery .menu .menu-item { height: 30px; cursor: pointer; font-size: 14.5px; letter-spacing: -0.8px; line-height: 30px; color: #221815; }
.main-gallery .menu .menu-item.active { color: #F39801; }
.main-gallery .menu .menu-item.active:after { color: #221815; }
.main-gallery .menu .menu-item:after { content: "|"; margin: 0 15px; position: relative; top: -1px; }
.main-gallery .menu .menu-item:last-child:after { content: "";} 

/* 디자인권 바로알기 */
.design-right	{ height: 500px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.design-right .title { margin-bottom: 20px; font-family: 'SCDream6'; color: #231815; font-size: 24px; letter-spacing: -0.8px; }
.design-right .panel { width: 475px; position: relative; z-index: 1; background: #fff; }
.design-right .gallery-scroll { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 100%; overflow: hidden; }
.design-right .gallery	{ display: flex; flex-direction: row; align-items: center; width: 100%; height: 100%; box-sizing: border-box; }
.design-right .gallery .item	{ cursor: pointer; width: 100%; }
.design-right .gallery .item:first-child { margin-top: 0; border-left: 1px solid #eee !important; }
.design-right .gallery .item .item-img { overflow: hidden; width: 325px; height: 325px; border: 1px solid #eee; border-left: hidden; }
.design-right .gallery .item span { width: 325px; font-size: 24px; font-family: 'SCDream6'; color: #a5a59f; display: block; position: absolute; text-align: center; bottom: 100px; }
.design-right .gallery .item img { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; transition: .3s ease-in-out; width: 100%; }
.design-right .gallery .item:hover img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }
.design-right .gallery .item .item-desc { margin-top: 10px; color: #dadada; font-size: 19px; letter-spacing: -0.8px; }
.design-right .gallery .item.active .item-desc { color: #000; }
.design-right .gallery .item:hover .item-desc { color: #000; }
.design-right .menu { }
.design-right .menu .menu-item { cursor: pointer; width: 100%; height: 50px; margin-top: 40px; color: #c9c9ca; font-size: 52px; font-weight: bold; letter-spacing: -0.8px; }
.design-right .menu .menu-item.active { color: #F39801; }

/* 디자인맵을 즐기는 또 다른 방법 */
.another { display: flex; align-items: center; justify-content: center; width: 100%; height: 300px; margin-top: 72px; background-color: #eee; }
.another-bg { position: absolute; width: 100%; }
.another .panel { background: #fff; border-radius: 10px; position: absolute; right: 40px; top: 35px; height: 450px; width: 385px; padding: 30px; -webkit-box-sizing: border-box; box-sizing: border-box; }
.another-title { margin-left: -20px; }
.another-desc { margin-top: 30px; }
.another .another-wrap { width: 1300px; display: flex; }
.another .another_title { text-align: start; font-size: 20px; font-weight: bold; margin-bottom: 15px; padding-left: 5px; color: #000; }
.another .another-left { width: 590px; padding-left: 20px; }
.another .another_sns_wrap { height: 200px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; }
.another .another_sns_item { width: 295px; text-align: start; display: flex; align-items: center; cursor: pointer; }
.another .another_sns_item img { width: 45px; height: 45px; }
.another .another_sns_nm { font-size: 18px; font-weight: bold; margin-left: 20px; color: #000; }
.another .another_webzine img { width: 510px; height: 200px; cursor: pointer }
.another .another-space { height: 250px; border-right: 1px solid #fff; margin: 0 100px 0 60px; }

.section-title { font-size: 15px; font-size: 13.5px; font-weight: bold; color: #000; }
.section-body {display: -webkit-box;display: -ms-flexbox;display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.sns-section { margin-top: 30px; }
.sns-section .sns-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 15px; color: #000; letter-spacing: -0.8px; cursor: pointer; width: 50%; text-decoration: none; font-size: 12.5px; }
.sns-section .sns-item img { margin-right: 8px; }
.etc-section { margin-top: 30px; display: -webkit-box; display: -ms-flexbox; display: flex; }
.etc-section .section-item { width: 50%; }
.etc-section .etc-item {  margin-top: 15px; cursor: pointer; }
.etc-section .etc-item img { width: 100%; }
.etc-section .etc-item:first-child { margin-right: 10px; }

/* 협력 링크 */
.site-link-wrap { background: #eee; padding: 80px 0px 40px 0px; }
.site-link-wrap .menu { width: 1300px; height: 50px; display: inline-flex; align-items: center; }
.site-link-wrap .menu-item { display: block; margin: 0 40px 0 0; text-align: center; cursor: pointer; width: 200px; }
.site-link-wrap .menu-item { margin-left: 19px !important; }
.site-link-wrap .menu-item img {  }

/* 패밀리 링크 */
.family-link-wrap { width: 100%; background: #5A5657; }
.family-link-wrap .content { width: 950px; display: inline-block; margin: 30px 0; }
.family-link-wrap .links { float: left; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-top: 3px; }
.family-link-wrap .link { color: #fff; font-size: 15px; cursor: pointer; letter-spacing: -0.8px; }
.family-link-wrap .link:hover { color: #b5e0f1; }
.family-link-wrap .pipe { }
.family-link-wrap .pipe:before { content: '|'; font-size: 12px; color: #fff; padding: 0 5px; }
.family-link-wrap .family-link { float: right; width: 140px; }
.family-link-wrap .family-link select { border: 0px; width: 140px; height: 24px; font-size: 14px; font-weight: bold; color: #5a5657; padding: 0 10px; }
.family-link-wrap .family-link option { font-size: 12px; }

/* footer */
#footer {  }
#footer .footer { background: #898989; text-align: center; padding: 5px 0 20px 0; }
#footer .footer-logo { padding: 20px 0; }
#footer .footer-copylight { color: #fff; font-size: 12px; cursor: default; }
#footer .secure { position: absolute; bottom: 70px; left: calc(50% + 400px); }
#footer .secure img { width: 80px; }

/* popup */
.pop_up { position:absolute; width:auto; height:auto; display:block; background-color:#fff; font-family: 'kopub-dotum-medium';}
.pop_up .content a {display:block;}
.pop_up {left:50px; top:10px; z-index: 200;} 
.pop_up .card { display:none; box-shadow: 0 .5em 1em -.125em rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .02); color: #4a4a4a; max-width: 100%; position: relative;}
.pop_up .card-header .card-header-title { color:#fff; align-items: center; display: flex; flex-grow: 1; font-weight: 700; padding: .75rem 1rem; font-size:1rem;} 
.pop_up .card.open_pop { display:block; box-shadow: 0 0.5em 1em -0.125em rgb(10 10 10 / 47%), 0 0 0 1px rgb(10 10 10 / 18%); } 
.pop_up .card-header {background: #4fbaab; /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #0466aa, #4fbaab);
	background: -moz-linear-gradient(to right, #0466aa, #4fbaab);
	background: -o-linear-gradient(to right, #0466aa, #4fbaab);
	background: -webkit-gradient(linear, 100% 0, 0 0, from(#0466aa), to(#4fbaab));
	background: linear-gradient(to right, #0466aa, #4fbaab); 
	align-items: stretch; box-shadow: 0 .125em .25em rgba(10, 10, 10, .1); display: flex;}
.pop_up .card-footer {background-color: transparent;  border-top: 1px solid #ededed; align-items: stretch; display: flex;}
.pop_up .card-footer .card-footer-item {align-items: center; display: flex; flex-basis: 0; flex-grow: 1; flex-shrink: 0; justify-content: center; padding: .75rem; font-size:1rem;color: #3273dc; cursor: pointer; text-decoration: none;background-color:#fff;border: 1px solid #ededed;}
.pop_up .card-footer .card-footer-item:not(:last-child) {border-right: 1px solid #ededed;}
.pop_up .card-footer button.card-footer-item:hover {text-decoration: underline;}