/* Header - Common */ #header { position: fixed; top: 0; left: 0; right: 0; flex: 0 0 157px; background: #fff; z-index: 3; } #header:before { content: " "; position: absolute; top: 0; left: 0; right: 0; height: 28px; background: #f5f5f5; } #header .limit1 { flex-direction: column; position: relative; } #header .prt_page { display: flex; flex: 0 0 28px; align-items: center; } #header .prt_page a, #header .prt_page img { display: block; } #header .logo_sch { flex: 0 0 76px; display: flex; align-items: center; gap: 12px; position: relative; background: #fff; border-bottom: 4px solid #33B9B0; } #header .logo_sch h1 { flex: auto; } #header .logo_sch h1 a { display: block; width: 200px; height: 32px; background: url(../images/logo_ucfactory1.svg) no-repeat center center; background-size: 100% auto; font-size: 0; line-height: 0; } #header .logo_sch .dlab_info { position: relative; width: 124px; height: 36px; } #header .logo_sch .dlab_info > a { display: block; width: 100%; height: 100%; background: url(../images/btn_datalab1.png) no-repeat center center; font-size: 0; line-height:0; } #header .logo_sch .dlab_info .tooltip { visibility: hidden; display: flex; justify-content: center; align-items: center; gap: 12px; position: absolute; top: 39px; left: 50%; transform: translateX(-50%); padding: 12px 0 5px; width: 244px; height: 39px; background: url(../images/bg_tooltip1.png) no-repeat 0 0; z-index: 1; } #header .logo_sch .dlab_info .tooltip.is-visible { visibility: visible; } #header .logo_sch .dlab_info .tooltip span { display: block; font-size: 14px; letter-spacing: -0.42px; line-height:150%; color: #444; } #header .logo_sch .dlab_info .tooltip button { display: block; width: 16px; height: 16px; background: none; border: none; } #header .logo_sch .logbox { width: 28px; height:28px; } #non-members #header .logo_sch .logbox .af_log { display: none; } #header .logo_sch .logbox .af_log a .name { display: none; } #header .logo_sch .logbox .bf_log a { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } #header .logo_sch .logbox .bf_log a span { display: none; } #header .logo_sch .logbox .bf_log .txt { display: none; } #header .logo_sch .logbox .menu_close { display: none; } #header .logo_sch .sch { display: block; width: 28px; height: 28px; background: none; } #header .logo_sch .sch.open svg.close { display: none; } #header .logo_sch .sch.close svg.open { display: none; } #header nav { display: flex; /*width: 100%;*/ background: #fff; } #header nav.gnb_summary { flex: 0 0 48px; align-items: center; gap: 40px; border-bottom: 1px solid #33B9B0; } #header nav.gnb_summary button { flex: 0 0 24px; height: 24px; background: url(../images/btn_hmenu2.svg) no-repeat center center; background-size: 100% auto; } #header nav.gnb_summary button.active { background-image: url(../images/btn_close10.svg); } #header nav.gnb_summary ul { display: flex; gap: 40px; font-size: 18px; font-weight: 700; white-space: nowrap; line-height: 150%; } #header nav.gnb_summary ul a { color: #696969; } #header nav.gnb_summary ul a:hover, #header nav.gnb_summary ul a:focus, #header nav.gnb_summary ul .active a { text-decoration-line: underline; text-underline-position: from-font; color: #00988E; } #header nav.gnb_detail { display: none; position: absolute; top: 157px; left: 40px; right: 40px; background: #fff; border-bottom: 1px solid #33B9B0; } #header nav.gnb_detail .depth1 { display: flex; justify-content: space-between; padding: 32px; } #header nav.gnb_detail .depth1 > .bundle { display: flex; flex-direction: column; align-items: center; gap: 16px; } #header nav.gnb_detail .depth1 > .bundle h4 { font-size: 20px; line-height: 120%; } #header nav.gnb_detail .depth1 > .bundle h4 a { color: #1d1d1d; } #header nav.gnb_detail .depth1 > .bundle h4 button { display: none; } #header nav.gnb_detail .depth2 .bundle { text-align: center; line-height: 120%; } #header nav.gnb_detail .depth2 .bundle + .bundle { margin-top: 12px; } #header nav.gnb_detail .depth2 .bundle a { color: #1d1d1d; } #header nav.gnb_detail a:hover, #header nav.gnb_detail a:focus, #header nav.gnb_detail .on a { text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-position: from-font; color: #00988E !important; } #header nav.gnb_detail .dlab_banner { display: none; } @media only screen and (min-width: 770px) { #header nav.gnb_detail .depth2 { display: block !important; } } @media only screen and (max-width: 769px) { #header { flex: 0 0 101px; } #header:before { display: none; } #header .prt_page { display: none; } #header .logo_sch { flex: 0 0 52px; box-sizing: border-box; padding: 0 12px; width: 100%; } #header .logo_sch h1 a { width: 138px; height: 22px; } #header .logo_sch .dlab_info { width: 82px; height: 28px; } #header .logo_sch .dlab_info > a { background-image: url(../images/btn_datalab2.png); } #header .logo_sch .dlab_info .tooltip {display: none;} #header .logo_sch .logbox { display: none; justify-content: space-between; align-items: center; position: absolute; top: 0; left: 0; right: 0; box-sizing: border-box; padding: 0 12px; width: 100%; height: 60px; background: #fff; border-bottom: 1px solid #33B9B0; } #header .logo_sch .logbox.active { display: flex; z-index: 2; } #header .logo_sch .logbox .af_log { display: flex; align-items: center; } #header .logo_sch .logbox .af_log a { display: flex; align-items:center; gap: 4px; } #header .logo_sch .logbox .af_log a svg { display: block; width: 24px; height: 24px; } #header .logo_sch .logbox .af_log a .name { display: block; font-size: 18px; line-height:120%; color: #1d1d1d; } #header .logo_sch .logbox .bf_log { display: flex; align-items: center; } #header .logo_sch .logbox .bf_log a { width: auto; font-size: 18px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; color: #1d1d1d; } #header .logo_sch .logbox .bf_log a svg { display: none; } #header .logo_sch .logbox .bf_log a span { display: block; } #header .logo_sch .logbox .bf_log .txt { display: block; color: #444; } #header .logo_sch .logbox .menu_close { display: block; width: 20px; height: 20px; background: url(../images/btn_close10.svg) no-repeat center center; background-size: 100% auto; } #header nav.gnb_summary { flex: 0 0 44px; gap: 24px; padding: 0 12px; width: calc(100% - 24px); } #header nav.gnb_summary button { flex: 0 0 20px; height: 20px; } #header nav.gnb_summary .gnb_scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; user-select: none; margin-right: -12px; padding-right:12px; } #header nav.gnb_summary .gnb_scroll::-webkit-scrollbar{ display: none; } #header nav.gnb_summary ul { flex-wrap: nowrap; gap: 24px; width: max-content; font-size: 16px; } #header nav.gnb_detail { display:none; position: fixed; top: 0; bottom: 0; left: 0; right: 0; overflow-y: auto; padding: 61px 0 64px; border-bottom: none; z-index: 1; } #header nav.gnb_detail .depth1 { flex-direction: column; justify-content: flex-start; padding: 0 20px 20px; gap: 0; } #header nav.gnb_detail .depth1 > .bundle { align-items: stretch; gap: 0; border-bottom: 1px solid #ddd; width: 100%; } #header nav.gnb_detail .depth1 > .bundle h4 { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 64px; } #header nav.gnb_detail .depth1 > .bundle h4 a { flex: auto; display: inline-flex; align-items: center; height: 100%; } #header nav.gnb_detail .depth1 > .bundle h4 button { flex: 0 0 50%; display: flex; justify-content: flex-end; align-items: center; align-self: stretch; height: 100%; background: none; } #header nav.gnb_detail .depth1 > .bundle.is-open h4 button svg { transition: transform 0.3s ease; } #header nav.gnb_detail .depth2 { display:none; padding: 20px 0; width: 100%; border-top: 1px solid #ddd; } #header nav.gnb_detail .depth2 .bundle { text-align: left; } #header nav.gnb_detail .depth2 .bundle + .bundle { margin-top: 12px; } #header nav.gnb_detail .depth2 .bundle a { color: #3e3e3e; } #header nav.gnb_detail .dlab_banner { display: flex; align-items: center; gap: 20px; position: fixed; left: 0; right: 0; bottom: 0; padding: 0 17px; height: 64px; background: #444; text-decoration: none !important; } #header nav.gnb_detail .dlab_banner:before { content: ' '; flex: 0 0 126px; height: 40px; background: url(../images/banner_datalab1.svg) no-repeat center center; } #header nav.gnb_detail .dlab_banner > span { flex: auto; display: flex; flex-wrap: wrap; font-size: 14px; line-height: 140%; color: #ececec; } #header nav.gnb_detail .dlab_banner > span span { display: inline-flex; } } /* Header - Sub */ #header nav.subnav { flex: 0 0 71px; gap: 32px; border-bottom: 1px solid #ECECEC; } #header nav.subnav h4 { display:flex; align-items: center; margin-top:16px; font-size: 26px; line-height:120%; } #header nav.subnav h4 a { color: #1d1d1d; } #header nav.subnav ul { display: flex; align-items: center; gap: 32px; margin-top:16px; font-size: 16px; line-height: 120%; } #header nav.subnav ul a { color: #1d1d1d; } #header nav.subnav ul a:hover, #header nav.subnav ul a:focus, #header nav.subnav ul .on a { text-decoration-line: underline; text-decoration-thickness: 1px; font-weight: 700; color: #00988E; } @media only screen and (max-width: 769px) { #header nav.subnav { flex: 0 0 61px; gap: 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; white-space: nowrap; } #header nav.subnav::-webkit-scrollbar { display: none; } #header nav.subnav h4 { margin-top: 8px; margin-left: 16px; font-size: 24px; } #header nav.subnav ul { gap: 20px; margin-top: 8px; padding-right: 16px; } } /* Header - Search Layer */ #header .schlayer { display: none; position: fixed; top: 157px; left: 0; right: 0; bottom: 0; overflow-y: auto; background: #fff; z-index: 1; } #header .schlayer .limit1 { flex-wrap: nowrap; } #header .schlayer .sch_intro { display: flex; justify-content: center; align-items: center; margin-top: 60px; font-size: 24px; font-weight: 700; line-height: 120%; color: #303030; } #header .schlayer .enter_sch { flex: 0 0 64px; display: flex; justify-content: center; margin-top: 28px; } #header .schlayer .enter_sch .lmsch { flex: 0 1 790px; position: relative; } #header .schlayer .enter_sch .bgbox { position: absolute; top: 0; left: 0; right: 0; overflow: hidden; border: 1px solid #828282; border-radius: 32px; } #header .schlayer .enter_sch.active .bgbox { border-color: #33B9B0; } #header .schlayer .enter_sch .scharea { display: flex; align-items: center; padding: 0 27px; min-height: 62px; } #header .schlayer .enter_sch .scharea svg { margin-right: 8px; } #header .schlayer .enter_sch .scharea .cstinput { flex: auto; display: flex; align-items: center; position: relative; } #header .schlayer .enter_sch .scharea .cstinput input[type="search"] { flex: auto; background: none; font-size: 18px; color: #1D1D1D; outline: none; } #header .schlayer .enter_sch .scharea .cstinput input[type="search"]::placeholder, #header .schlayer .enter_sch .scharea .cstinput input[type="search"]::-webkit-input-placeholder { color: #828282; } #header .schlayer .enter_sch .scharea .cstinput input::-ms-clear, #header .schlayer .enter_sch .scharea .cstinput input::-ms-reveal { display: none; } #header .schlayer .enter_sch .scharea .cstinput input::-webkit-search-decoration, #header .schlayer .enter_sch .scharea .cstinput input::-webkit-search-cancel-button, #header .schlayer .enter_sch .scharea .cstinput input::-webkit-search-results-button, #header .schlayer .enter_sch .scharea .cstinput input::-webkit-search-results-decoration { display: none; } #header .schlayer .enter_sch .sch_history { display: none; padding: 19px 27px; background: #fff; border-top: 1px solid #33B9B0; } #header .schlayer .enter_sch .sch_history .lstsch .result h4 { font-size: 16px; line-height: 120%; color: #3E3E3E; } #header .schlayer .enter_sch .sch_history .lstsch .result .group { display: flex; flex-direction: column; gap: 16px; overflow-y: auto; margin-top: 20px; max-height: calc(100vh - 700px); } #header .schlayer .enter_sch .sch_history .lstsch .result .group li { display: flex; justify-content: space-between; align-items: center; } #header .schlayer .enter_sch .sch_history .lstsch .result .group a { font-size: 18px; color: #1d1d1d; } #header .schlayer .enter_sch .sch_history .lstsch .result .group a:hover, #header .schlayer .enter_sch .sch_history .lstsch .result .group a:focus { text-decoration: underline; } #header .schlayer .enter_sch .sch_history .lstsch .result .group button { width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M7.99996 9.13557L4.02531 13.1102C3.8766 13.2589 3.68733 13.3333 3.4575 13.3333C3.22767 13.3333 3.0384 13.2589 2.88969 13.1102C2.74098 12.9615 2.66663 12.7722 2.66663 12.5424C2.66663 12.3126 2.74098 12.1233 2.88969 11.9746L6.86434 7.99996L2.88969 4.02531C2.74098 3.8766 2.66663 3.68733 2.66663 3.4575C2.66663 3.22767 2.74098 3.0384 2.88969 2.88969C3.0384 2.74098 3.22767 2.66663 3.4575 2.66663C3.68733 2.66663 3.8766 2.74098 4.02531 2.88969L7.99996 6.86434L11.9746 2.88969C12.1233 2.74098 12.3126 2.66663 12.5424 2.66663C12.7722 2.66663 12.9615 2.74098 13.1102 2.88969C13.2589 3.0384 13.3333 3.22767 13.3333 3.4575C13.3333 3.68733 13.2589 3.8766 13.1102 4.02531L9.13557 7.99996L13.1102 11.9746C13.2589 12.1233 13.3333 12.3126 13.3333 12.5424C13.3333 12.7722 13.2589 12.9615 13.1102 13.1102C12.9615 13.2589 12.7722 13.3333 12.5424 13.3333C12.3126 13.3333 12.1233 13.2589 11.9746 13.1102L7.99996 9.13557Z' fill='%23828282'/%3E%3C/svg%3E") no-repeat center center; background-size: 100% auto; } #header .schlayer .enter_sch .sch_history .lstsch .n_result { display: flex; justify-content: center; align-items: center; height: 120px; font-size: 18px; line-height: 120%; color: #1d1d1d; } #header .schlayer .enter_sch .sch_history .fncbox { display: flex; justify-content: flex-end; gap: 20px; align-items: center; margin-top: 20px; } #header .schlayer .enter_sch .sch_history .fncbox button { background: none; font-size: 16px; line-height: 120%; color: #696969; } #header .schlayer .relgroup { display: flex; flex-direction: column; width: 100%; } #header .schlayer .relgroup .reltit { visibility: hidden; font-size: 0; line-height: 0; } #header .schlayer .relgroup .relbox1 { display: flex; margin-top: 40px; } #header .schlayer .relgroup .relbox2 { display: flex; margin-top: 60px; } #header .schlayer .relgroup .rellist1 { flex: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } #header .schlayer .relgroup .rellist1 a { display: inline-flex; align-items: center; gap: 4px; padding: 0 19px; height: 41px; background: #fff; font-size: 16px; white-space: nowrap; line-height: 120%; color: #3e3e3e; border: 1px solid #c5c5c5; border-radius: 30px; } #header .schlayer .relgroup .rellist1 a:before { content: "#"; } #header .schlayer .relgroup .rellist1 a:hover, #header .schlayer .relgroup .rellist1 a:focus { border-color: #33B9B0; } #header .schlayer .relgroup .rellist1 a:hover span, #header .schlayer .relgroup .rellist1 a:focus span { font-weight: 700; color: #1d1d1d; } #header .schlayer .relgroup .rellist2 { flex: auto; display: flex; justify-content: center; gap: 32px; } #header .schlayer .relgroup .rellist2 a { flex: 0 1 calc(420px - 66px); display: flex; flex-direction: column; gap: 16px; padding: 32px; background: #fff; border: 1px solid #c5c5c5; border-radius: 12px; } #header .schlayer .relgroup .rellist2 a:focus, #header .schlayer .relgroup .rellist2 a:hover { border-color: #33B9B0; } #header .schlayer .relgroup .rellist2 strong { display: flex; flex-direction: column; gap: 8px; background-position: right center; background-repeat: no-repeat; background-size: auto 100%; } #header .schlayer .relgroup .rellist2 a.startup strong { background-image: url(../images/icon_lookup1.svg) } #header .schlayer .relgroup .rellist2 a.investor strong { background-image: url(../images/icon_analysis1.svg) } #header .schlayer .relgroup .rellist2 strong em { display: block; font-size: 14px; line-height: 120%; color: #8AD7D1; } #header .schlayer .relgroup .rellist2 strong span { display: block; font-size: 28px; line-height: 120%; color: #1d1d1d; } #header .schlayer .relgroup .rellist2 hr { margin: 0; width: 20px; height: 2px; background: #33B9B0; border: none; } #header .schlayer .relgroup .rellist2 p { font-size: 16px; word-break: keep-all; line-height: 160%; color: #696969; } @media only screen and (max-width: 769px) { #header .schlayer { top: 101px; } #header .schlayer .limit1 { padding: 20px 16px; } #header .schlayer .sch_intro { display: none; } #header .schlayer .enter_sch { flex: 0 0 56px; margin-top: 0; } #header .schlayer .enter_sch .bgbox { overflow: unset; height: 54px; } #header .schlayer .enter_sch .scharea { overflow:hidden; padding: 0 11px; min-height: 54px; } #header .schlayer .enter_sch .scharea svg { flex: 0 0 24px; margin-right: 4px; width: 24px; height: 24px; } #header .schlayer .enter_sch .sch_history { margin: 1px 0 0; padding: 20px 0 0; border: none; } #header .schlayer .enter_sch .sch_history .lstsch .result .group { max-height: calc(100vh - 295px); } #header .schlayer .enter_sch.active + .relgroup { display: none; } #header .schlayer .relgroup .relbox1 { margin-top: 20px; } #header .schlayer .relgroup .relbox2 { margin-top: 32px; } #header .schlayer .relgroup .rellist1 { justify-content: flex-start; flex-wrap: nowrap; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; white-space: nowrap; margin: 0 -16px; padding: 0 16px; } #header .schlayer .relgroup .rellist1::-webkit-scrollbar { display: none; } #header .schlayer .relgroup .rellist2 { flex-direction: column; justify-content: flex-start; gap: 12px; } #header .schlayer .relgroup .rellist2 a { flex: auto; padding: 19px 15px; } #header .schlayer .relgroup .rellist2 a strong { background-position: right 0; background-size: auto 48px; } #header .schlayer .relgroup .rellist2 a strong span { font-size: 24px; } #header .schlayer .relgroup .rellist2 a hr, #header .schlayer .relgroup .rellist2 a p { display: none; } } /* Footer */ #footer { flex: 0 0 420px; display: flex; flex-direction: column; position: relative; background: #696969; border-top: 1px solid #ddd; z-index: 1; } #footer .sitemap { flex: 0 0 232px; background: #f5f5f5; } #footer .sitemap .group { display: flex; justify-content: space-between; margin-top: 40px; width: 100%; } #footer .sitemap .group .bundle { display: flex; flex-direction: column; gap: 20px; } #footer .sitemap .group .bundle h4 { font-size: 16px; font-weight: 700; line-height: 120%; color: #252525; } #footer .sitemap .group .bundle h4 a:hover, #footer .sitemap .group .bundle h4 a:focus { text-decoration: underline; } #footer .sitemap .group .bundle h4 button { display: none; } #footer .sitemap .group .bundle ul { display: flex; flex-direction: column; gap: 16px; } #footer .sitemap .group .bundle ul li { font-size: 14px; font-weight: 400; line-height: 120%; } #footer .sitemap .group .bundle ul li a { color: #696969; } #footer .sitemap .group .bundle ul li a:hover, #footer .sitemap .group .bundle ul li a:focus { text-decoration: underline; } #footer .siteinfo { flex: 0 0 188px; } #footer .siteinfo .limit1 { flex-wrap:nowrap; flex-direction: column; justify-content: center; gap: 16px; height: 100%; } #footer .siteinfo .policy { display: flex; gap: 32px; align-items: flex-end; } #footer .siteinfo .policy .logo { width: 160px; height: 26px; background: url(../images/logo_ucfactory2.svg) no-repeat center center; background-size: 100% auto; font-size: 0; line-height: 0; } #footer .siteinfo .policy .logo a { display: block; height: 100%; } #footer .siteinfo .policy .service { display: flex; gap: 32px; font-size: 14px; line-height: 120%; } #footer .siteinfo .policy .service a { color: #fff; } #footer .siteinfo .infogroup { display: flex; flex-direction: column; gap: 16px; font-size: 12px; font-weight: 400; line-height: 120%; color: #ececec; } #footer .siteinfo .infogroup article { display: flex; flex-wrap: wrap; gap: 12px 0; } #footer .siteinfo .infogroup article span { white-space: nowrap; } #footer .siteinfo .infogroup article span:after { content: "|"; padding: 0 8px; color: #a9a9a9; } #footer .siteinfo .infogroup article span:last-child:after { display: none; } #footer .siteinfo .infogroup article span a { color: #ececec; } #footer .siteinfo .infogroup address { line-height: 100%; } #footer .gotop { display: none; position: fixed; bottom: 50px; right: 75px; width: 48px; height: 48px; background: #42b7ae url(../images/bl_arrow19.svg) no-repeat center center; background-size: 26px auto; font-size: 0; line-height: 0; border-radius: 50%; z-index: 1; } #footer .goback { display: none; } @media only screen and (min-width: 770px) { #footer .sitemap .group .bundle ul { display: flex !important; } } @media only screen and (max-width: 769px) { #footer { flex: auto; } #footer .sitemap { flex: auto; padding: 0 12px; } #footer .sitemap .group { flex-direction: column; justify-content: center; margin-top: 0; } #footer .sitemap .group .bundle { gap: 0; } #footer .sitemap .group .bundle + .bundle { border-top: 1px solid #ddd; } #footer .sitemap .group .bundle h4 { display: flex; justify-content: space-between; align-items: center; } #footer .sitemap .group .bundle h4 a { flex: auto; padding: 16px 0; } #footer .sitemap .group .bundle h4 button { flex: 0 0 50%; display: flex; justify-content: flex-end; align-items: center; height: 100%; background: none; } #footer .sitemap .group .bundle.is-open h4 button svg { transform: rotate(180deg); } #footer .sitemap .group .bundle ul { display: none; padding: 16px 0; border-top: 1px solid #ddd; } #footer .sitemap .group .bundle ul li + li { margin-top: 16px; } #footer .siteinfo { flex: auto; padding: 32px 12px; } #footer .siteinfo .limit1 { gap: 20px; } #footer .siteinfo .policy { flex-direction: column; align-items: flex-start; gap: 16px; } #footer .siteinfo .policy .service { gap: 20px; } #footer .siteinfo .infogroup { gap: 20px; } #footer .siteinfo .infogroup article { gap: 8px 0; } #footer .siteinfo .infogroup address { line-height: 140%; } #footer .gotop { bottom: 15px; right: 15px; width: 45px; height: 45px; background-size: 18px auto; } #footer .goback { position: fixed; bottom: 15px; left: 15px; width: 44px; height: 44px; background: #fff url(../images/bl_arrow20.svg) no-repeat center center; background-size: 23px auto; filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.16)); font-size: 0; line-height: 0; border-radius: 50%; z-index: 1; } #footer .goback:before { content: " "; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid #ddd; border-radius: 50%; } }