@charset "UTF-8";
/* 국가별 지재권 정보 CSS 파일, 이외 파일에 임베드하지 말 것!*/

.container {max-width: 100%; margin: 0; padding: 0;}
.main_area {background-repeat: no-repeat; background-position: center; background-size: cover; letter-spacing: -.5px;}
.container.us .main_area {background-image: url(../img/navi/national_front/bg_main_US.png);}
.container.eu .main_area {background-image: url(../img/navi/national_front/bg_main_EU.png);}
.container.cn .main_area {background-image: url(../img/navi/national_front/bg_main_CN.png);}
.container.jp .main_area {background-image: url(../img/navi/national_front/bg_main_JP.png);}
.main_area .top {width: 100%; padding: 30px 0; border-bottom: 1px solid #9f9f9f;}
.main_area .inner_top {max-width: 1300px; margin: 0 auto; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
.main_area .top h2 {color: #fff; font-size: 28px; font-weight: 600; margin-right: 6%;}
.main_area .top p {color: #fff; font-size: 16px; font-weight: 300; line-height: 1.5;}
.main_area .bottom {max-width: 1300px; margin: 0 auto; padding: 80px 0; position: relative;}
.main_area .bottom .country_name {position: relative; padding-left: 150px;}
.main_area .bottom .country_name::before {display: block; content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 118px; height: 78px; border-radius: 4px; background-repeat: no-repeat; background-position: center; background-size: cover;}
.container.us .main_area .bottom .country_name::before {background-image: url(../img/navi/country/us.png);}
.container.eu .main_area .bottom .country_name::before {background-image: url(../img/navi/country/eu.png);}
.container.cn .main_area .bottom .country_name::before {background-image: url(../img/navi/country/cn.png);}
.container.jp .main_area .bottom .country_name::before {background-image: url(../img/navi/country/jp.png);}
.main_area .bottom .country_name h3 {color: #fff; font-size: 34px; font-weight: 600;}
.main_area .bottom .country_name p {color: #e0e0e0; font-size: 22px; margin-top: 10px;}
.main_area .bottom .country_select {position: absolute; right: 0; top: 30px; width: 164px; background-color: transparent; color: #fff; border-radius: 2px;}
.main_area .bottom .country_select .list {width: 100%; color: #454545;}
.container section {max-width: 1300px; margin: 0 auto; margin-top: 80px;}
.container section .tit_wrap {margin-bottom: 40px; padding: 0; border-bottom: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
.container section .tit_wrap .more_btn {position: relative; background-color: #4e6b90; width: 28px; height: 28px; border: none; color: #fff; font-size: 0;}
.container section .tit_wrap .more_btn::before, .container section .tit_wrap .more_btn::after {content: ""; width: 12px; height: 1px; background-color: #fff; display: block; position: absolute; top: 50%; left: 50%;}
.container section .tit_wrap .more_btn::before {transform: translate(-50%, -50%) rotate(90deg);}
.container section .tit_wrap .more_btn::after {transform: translate(-50%, -50%);}
.container section h3.tit {margin-top: 0; color: #333; font-size: 26px; font-weight: 600; border-left: 8px solid; border-image: linear-gradient(to bottom, #054f8b, #619bff); border-image-slice: 1;}
.tab_menu li {padding: 0;}
.tab_menu li a {padding: 24px 0;}
.tab_menu.tab1 li a {padding-left: 24px; position: relative;}
.tab_menu.tab1 li a::before {position: absolute; left:30%; top: 50%; transform: translateY(-50%); content: ""; display: block; width: 16px; height: 16px; background-repeat: no-repeat; background-position: center; background-size: contain;}
.tab_menu.tab1 li a[href="#tab1-1"]::before {background-image: url(../img/navi/national_front/icon_tab1_off.png);}
.tab_menu.tab1 li a[href="#tab1-1"].active::before {background-image: url(../img/navi/national_front/icon_tab1_on.png);}
.tab_menu.tab1 li a[href="#tab1-2"]::before {background-image: url(../img/navi/national_front/icon_tab2_off.png);}
.tab_menu.tab1 li a[href="#tab1-2"].active::before {background-image: url(../img/navi/national_front/icon_tab2_on.png);}
.tab_menu.tab1 li a[href="#tab1-3"]::before {left: 25%; background-image: url(../img/navi/national_front/icon_tab3_off.png);}
.tab_menu.tab1 li a[href="#tab1-3"].active::before {background-image: url(../img/navi/national_front/icon_tab3_on.png);}
.tab_menu.tab1 li a[href="#tab1-4"]::before {background-image: url(../img/navi/national_front/icon_tab4_off.png);}
.tab_menu.tab1 li a[href="#tab1-4"].active::before {background-image: url(../img/navi/national_front/icon_tab4_on.png);}
.tab_menu.tab1 li a[href="#tab1-5"]::before {background-image: url(../img/navi/national_front/icon_tab5_off.png);}
.tab_menu.tab1 li a[href="#tab1-5"].active::before {background-image: url(../img/navi/national_front/icon_tab5_on.png);}
.tab_menu.tab1 li a[href="#tab1-6"]::before {background-image: url(../img/navi/national_front/icon_tab6_off.png);}
.tab_menu.tab1 li a[href="#tab1-6"].active::before {background-image: url(../img/navi/national_front/icon_tab6_on.png);}
.tab-content {border: 1px solid #ccc; border-top: none;}
.data-list li {padding: 24px 26px; letter-spacing: -.5px; font-weight: 300; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: justify; -webkit-box-pack: justify; justify-content: space-between;}
.data-list li:not(:last-child) {border-bottom: 1px solid #ccc;}
.tab-content .data-list li a {display: block; color: #444; width: 80%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.tab-content .data-list li a:hover {color: #0081E4;}
.tab-content .data-list li p {color: #777;}
section.section_bg {max-width: 100%; padding: 80px 0 120px; background: url(../img/navi/national_front/bg_section.png) no-repeat center/cover;}
section.section_bg>div {max-width: 1300px; margin: 0 auto;}
section.section_bg h3.tit {color: #fff;}
section.section_bg .data-list li {padding: 24px 0;}
section.section_bg .data-list li:first-child {padding-top: 0;}
section.section_bg .data-list li a, section.section_bg .data-list li p {color: #fff;}
section.section_bg .data-list li a {width: 80%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
section.section_bg .book_wrap h3.tit {margin-bottom: 20px; font-size: 18px;}
section.section_bg .book_wrap>div:last-child {margin-left: 80px;}
section.section_bg .book_frame {display: block; width: 180px; box-shadow: 3px 4px 20px rgba(0,0,0,0.6);}
section.section_bg .book_frame img {display: block; width: 100%;}
footer#footer {margin-top: 0px;}

@media (max-width: 1024px) {
    .main_area .inner_top, .main_area .bottom {max-width: 88%;}
    .main_area .top h2 {font-size: 1.625rem;}
    .container section {max-width: 88%;}
    .tab_menu.tab1 li a::before {left: 20%;}
    .tab_menu.tab1 li a[href="#tab1-3"]::before {left: 15%;}
    section.section_bg {max-width: 100%;}
    section.section_bg>div {max-width: 88%;}
    section.section_bg .book_wrap>div:last-child {margin-left: 30px;}
}

@media (max-width: 768px) {
    .main_area .inner_top, .main_area .bottom {max-width: 90%; display: block;}
    .main_area .top h2 {margin-right: 0; margin-bottom: 16px; font-size: 1.5rem;}
    .main_area .top p {font-size: 0.938em;}
    .main_area .bottom .country_name {padding-left: 120px;}
    .main_area .bottom .country_name::before {width: 98px; height: 68px;}
    .main_area .bottom .country_name h3 {font-size: 1.75em;}
    .main_area .bottom .country_name p {font-size: 1.125em;}
    .container section {max-width: 90%;}
    section.section_bg {max-width: 100%; padding: 60px 0 60px; background-position: left center;}
    .container section .tit_wrap {margin-bottom: 30px;}
    .container section h3.tit {font-size: 1.5rem;}
    .tab_menu li a {padding: 22px 0;}
    .tab_menu.tab1 li a {padding-left: 0;}
    .tab_menu.tab1 li a::before {display: none;}
    .data-list li {font-size: 0.875em; padding: 20px 26px;}
    section.section_bg>div {width: 90%;}
    section.section_bg>div>div {float: none;}
    section.section_bg>div>div:first-child {width: 100% !important; margin-bottom: 50px;}
    section.section_bg .book_wrap {margin: 0 auto; clear: both;}
    section.section_bg .book_wrap>div {width: 48%; box-sizing: border-box; text-align: center;}
    section.section_bg .book_wrap>div.float_R {margin-left: 0;}
    section.section_bg .book_wrap h3.tit {text-align: left;}
    section.section_bg .book_frame {display: inline-block; width: 160px;}
    footer#footer {margin-top: 70px;}
}

@media (max-width: 576px) {
    .container {width: 100%;}
    .main_area .top {padding: 30px 0 20px;}
    .main_area .top h2 {font-size: 1.25em;}
    .main_area .top p {font-size: 0.875em;}
    .main_area .bottom {padding: 60px 0;}
    .main_area .bottom .country_name {padding-left: 100px;}
    .main_area .bottom .country_name::before {width: 78px; height: 54px;}
    .main_area .bottom .country_name h3 {font-size: 1.5em;}
    .main_area .bottom .country_name p {font-size: 1em;}
    .main_area .bottom .country_select {top: 16px; width: 94px; height: 36px; line-height: 34px; padding-left: 14px;}
    .container section {margin-top: 60px;}
    .container section .tit_wrap {margin-bottom: 24px;}
    .container section h3.tit {font-size: 1.25rem;}
    .tab_menu li {font-size: 0.75em; letter-spacing: -1px;}
    .tab_menu li a {padding: 18px 0;}
    .tab_menu li a[href="#tab2-4"] {font-size: 0.625em !important;}
    .data-list li {padding: 18px 14px;}
    .tab-content .data-list li a, section.section_bg .data-list li a {width: 75%;}
    .tab-content .data-list li p, section.section_bg .data-list li p {font-size: 0.875em;}
    section.section_bg .data-list li {padding: 18px 0;}
    section.section_bg>div>div:first-child {margin-bottom: 40px;}
    section.section_bg .book_frame {width: 150px;}
}