/* AUTO-GENERATED from main.css — 홈(/) 전용 스코프본. 직접 편집 금지. 재생성: scratchpad/scope-main.js */ @charset "utf-8"; @keyframes link_effect { 0%{transform:scaleX(1);transform-origin:right center;} 49%{transform:scaleX(0);transform-origin:right center;} 50%{transform:scaleX(0);transform-origin:left center;} 100%{transform:scaleX(1);transform-origin:left center;} } /******************************************************* Common Layout *******************************************************/ [data-route-group="home"] #header {border-bottom-width:0px;} [data-route-group="home"] .scroll-guide {display:block; position:fixed; top:4.5em; bottom:0; left:0; width:5em; z-index:-1; border-right:1px solid #ddd;} [data-route-group="home"] .scroll-guide > span {display:block; position:absolute; left:0; right:0; height:6.75em; bottom:5.25em; background:url(../img/main/ico_scroll.png) no-repeat 50% 50%; background-size:contain; text-indent:-999px; overflow:hidden;} [data-route-group="home"] .tab-group .tabs li button .selected {display:none; position:absolute; top:0; left:0; z-index:-999; overflow:hidden; width:0; height:0; opacity:0;} [data-route-group="home"] .tab-group .tabs li button.on .selected {display:block;} [data-route-group="home"] .tab-group .tab-con {display:none;} [data-route-group="home"] .tab-group .tab-con.on {display:block;} [data-route-group="home"] .control button.prev, [data-route-group="home"] .control button.next {display:block; width:1.4em; height:1.4em; text-indent:-999px; overflow:hidden; background:no-repeat 50% 50%; background-size:contain;} [data-route-group="home"] .control button.prev:hover, [data-route-group="home"] .control button.prev:focus, [data-route-group="home"] .control button.next:hover, [data-route-group="home"] .control button.next:focus {opacity:1;} [data-route-group="home"] .control button.prev {background-image:url(../img/main/ico_prev_b.svg);} [data-route-group="home"] .control button.next {background-image:url(../img/main/ico_next_b.svg);} @media all and (max-width:1200px) { [data-route-group="home"] #fp-nav {font-size:19px;} } @media all and (max-width:1024px) { [data-route-group="home"] #fp-nav {font-size:18px;} } @media all and (max-width:640px) { [data-route-group="home"] #fp-nav {font-size:17px;} } @media all and (max-width:460px) { [data-route-group="home"] #fp-nav {font-size:16px;} } [data-route-group="home"] .more {display:block; position:relative; font-family:'Play', sans-serif; font-size:.9em; font-weight:500; color:#222!important; display:inline-block; padding:.5em 2em .5em 0; font-family:'esamanru';} [data-route-group="home"] .more:before {content:""; display:block; position:absolute; height:1px; left:0; right:0; bottom:0; background:#222; } [data-route-group="home"] .more:after {content:""; display:block; position:absolute; height:.6em; width:1.2em; right:0; top:50%; margin-top:-.25em; background:url(../img/main/ico_link_b.svg) no-repeat center; font-size:20px;} [data-route-group="home"] .more.white {color:#fff!important;} [data-route-group="home"] .more.white:before {background:#fff;} [data-route-group="home"] .more.white:after {background:url(../img/main/ico_link_w.svg) no-repeat center; } [data-route-group="home"] .more:hover:after{animation: link_effect 1s ease-in-out} [data-route-group="home"] .tit {color:#222; font-size:2em; font-weight:800; font-family:'esamanru';} /* NuGPT */ [data-route-group="home"] .NuGPT-wrap {display:block; position:fixed; bottom:2em; right:2em; z-index:100;} [data-route-group="home"] .NuGPT-wrap .NuGPT-btn {position:absolute; bottom:0; right:0; width:3.35em; height:3.35em; background:#fff; border-radius:50%; box-shadow:0 3px 10px rgba(0,56,118,.15); overflow:hidden; transition:.3s; text-align:center; background:url(../img/main/ico_NuGPT.png) no-repeat 50% 0; background-size:contain;} /******************************************************* Visual *******************************************************/ [data-route-group="home"] #visual {background: url(../img/main/bak_visual.png) no-repeat; background-size:cover; animation: bgZoomOut 1.2s ease-out forwards;} [data-route-group="home"] .mainVisualWrap {position:relative;} [data-route-group="home"] .mainVisual {position:relative; z-index:0;} [data-route-group="home"] .mainVisual .mo-none {display:none;} [data-route-group="home"] .mainVisual {padding-top:7em; text-align:center; margin-bottom:2.2em;} [data-route-group="home"] .mainVisual .tit img {margin:0 auto;} [data-route-group="home"] .mainVisual .search-box {display:block; position:relative; max-width:32em; margin:2.5em auto 3em; z-index:2;} [data-route-group="home"] .mainVisual .search-box::after {content:""; display:block; position:absolute; margin:0 auto; width:16em; height:6.3em; background:url(../img/main/illu_search.svg) no-repeat 50% 50%; top:-1.5em; left:-12em; background-size:contain; animation:bounce 1s cubic-bezier(.25,.46,.45,.94) infinite alternate;} [data-route-group="home"] .mainVisual .search-box .in {display:block; position:relative; background:linear-gradient(90deg,rgba(74, 163, 63, 1) 0%, rgba(0, 167, 213, 1) 48%, rgba(26, 110, 189, 1) 98%); border-radius:.5em; padding:.15em; background-size: 200% 100%; animation: bg-pan-left 10s both infinite;} [data-route-group="home"] .mainVisual .search-box .in .input {display:block; position:relative; border:none; border-radius:.85em; background:#fff; overflow:hidden; z-index:0;} [data-route-group="home"] .mainVisual .search-box .in input[type="text"]{display:block; position:relative; width:100%; height:3em; border:none; padding:0 3em 0 3em; font-weight:400; border-radius:.5em;} [data-route-group="home"] .mainVisual .search-box .in input[type="text"]::placeholder {color:#333; font-size:0.9em; letter-spacing:-0.4px;} [data-route-group="home"] .mainVisual .search-box .in .btn-search {position:absolute; width:1.5em; height:1.5em; top:50%; right:0; margin:-0.75em 1.5em 0 0; z-index:1; background:url(../img/main/ico_search_gradient.svg) no-repeat 50% 50%; text-indent:-999px; background-size:contain;} [data-route-group="home"] .mainApply {position:relative; background:#fff; height:20em; display:flex; width:100%; z-index:2;} [data-route-group="home"] .mainApply:before {position:absolute; content:''; bottom:0; right:0; background:#fff; width:100vw; height:100%;} [data-route-group="home"] .mainApply .right {width:29em; height:20em; order:2; background:url(../img/main/bg_apply.png) no-repeat 50% 50%; z-index:1; position:relative;} [data-route-group="home"] .mainApply .right .tit {display:block; padding:1em 2em;} [data-route-group="home"] .mainApply .right .btn {background:linear-gradient(90deg,rgba(74, 163, 63, 1) 0%, rgba(0, 167, 213, 1) 48%, rgba(26, 110, 189, 1) 98%); padding:2em 4em; color:#fff; position:absolute; bottom:0; left:0; right:0; opacity:0.9; background-size: 200% 100%; animation: bg-pan-left 10s both infinite;} [data-route-group="home"] .mainApply .right .btn::after {content:""; display:block; position:absolute; margin:0 auto; width:7.4em; height:6.2em; background:url(../img/main/illu_apply.svg) no-repeat center; top:1em; right:2em; background-size:contain;} [data-route-group="home"] .mainApply .right .btn p {font-size:.9em;} [data-route-group="home"] .mainApply .left {width:calc(100% - 29em); position:relative; margin-left:3.4em; z-index:2;} [data-route-group="home"] .mainApply .left .tabs {display:block; position:relative;} [data-route-group="home"] .mainApply .left .tabs ul {display:flex; margin:1em 0;} [data-route-group="home"] .mainApply .left .tabs li {display:block; position:relative; padding:.75em 0; margin-right:2em;} [data-route-group="home"] .mainApply .left .tabs button span {color:#999; font-weight:700; font-size:1.1em;} [data-route-group="home"] .mainApply .left .tabs .tab-active button span {color:#2949A9; font-weight:800;} [data-route-group="home"] .mainApply .left .tabs .tab-active button span::before {content:""; display:block; position:absolute; height:4px; left:0; right:0; bottom:0; background:#2949A9; } [data-route-group="home"] .mainApplySlider {display:block;} [data-route-group="home"] .mainApplySlider .slider {position:absolute; left:0; right:-2em; z-index:2;} [data-route-group="home"] .mainApplySlider .control {display:block; position:absolute; top:0; right:1em; padding:1.65em 1em;} [data-route-group="home"] .mainApplySlider .control > * {display:inline-block !important; position:relative; vertical-align:middle;} [data-route-group="home"] .mainApplySlider .control button.prev {margin-right:.5em;} [data-route-group="home"] .mainApplySlider .control button.next {margin-left:.5em;} [data-route-group="home"] .mainApplySlider .control .bar {width:1px; height:.8em; background:rgba(0,0,0,.1);} [data-route-group="home"] .mainApplySlider .control .btn_more {width:2em; height:2em; background:url(../img/main/ico_plus.svg) no-repeat center; text-indent:-999px; border:1px solid #DDDDDD; overflow:hidden; margin-left:.8em;} [data-route-group="home"] .mainApplySlider li:nth-child(2n) .applyItem{background:#F9F9FA; border:1px solid #fff;} [data-route-group="home"] .mainApplySlider .applyItem {display:block; position:relative; border:1px solid #e6e6e6; height:100%; background:#fff;} [data-route-group="home"] .mainApplySlider .applyItem a {padding:1.5em 2em; display:block;} [data-route-group="home"] .mainApplySlider .applyItem:after, [data-route-group="home"] .mainApplySlider .applyItem:before, [data-route-group="home"] .mainApplySlider .applyItem a:before, [data-route-group="home"] .mainApplySlider .applyItem a:after {content:""; display:block; position:absolute; background:#2949A9; transition:0.2s all ease; z-index:2;} [data-route-group="home"] .mainApplySlider .applyItem:after, [data-route-group="home"] .mainApplySlider .applyItem:before {width:0%; height:2px;} [data-route-group="home"] .mainApplySlider .applyItem a:before, [data-route-group="home"] .mainApplySlider .applyItem a:after{width:2px; height:0%;} [data-route-group="home"] .mainApplySlider .applyItem a:before {left:-1px; bottom:-1px;} [data-route-group="home"] .mainApplySlider .applyItem a:after {right:-1px; top:-1px;} [data-route-group="home"] .mainApplySlider .applyItem:after {top:-1px; left:-1px;} [data-route-group="home"] .mainApplySlider .applyItem:before {bottom:-1px; right:-1px;} [data-route-group="home"] .mainApplySlider .applyItem:hover:after, [data-route-group="home"] .mainApplySlider .applyItem:hover:before {width:100%;} [data-route-group="home"] .mainApplySlider .applyItem:hover a:before, [data-route-group="home"] .mainApplySlider .applyItem:hover a:after {height:100%;} [data-route-group="home"] .mainApplySlider .applyItem:hover a:after {transition-delay:0.2s;} [data-route-group="home"] .mainApplySlider .applyItem:hover:before {transition-delay:0.4s;} [data-route-group="home"] .mainApplySlider .applyItem:hover a:before {transition-delay:0.6s;} [data-route-group="home"] .mainApplySlider .applyItem .dday {display:block; position:absolute; top:0; right:-0; font-size:.8em; padding:.5em 1em; background:#2949A9; color:#fff; font-weight:600; font-family:'Play', sans-serif; letter-spacing:1px; } [data-route-group="home"] .mainApplySlider .applyItem .cate {font-weight:700; font-size:0.85em; color:#2949A9;} [data-route-group="home"] .mainApplySlider .applyItem .cate::before {content:''; display:inline-block; width:8px; height:8px; background:#2949A9; border-radius:50%; margin-right:.4em; margin-bottom:.1em;} [data-route-group="home"] .mainApplySlider .applyItem .subj {display:block; position:relative; font-size:1em; color:#222; font-weight:700; line-height:1.5em; height:4.8em; overflow:hidden; margin-top:.4em; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient: vertical;} [data-route-group="home"] .mainApplySlider .applyItem .date {display:block; position:relative; font-size:.85em; color:#A8A8A8; font-family:'Play', sans-serif;} [data-route-group="home"] .mainApplySlider .applyItem .date i {display:inline-block; padding:.21em .6em; background:#555; border-radius:2em; color:#fff; font-size:.85em; margin-top:.5em; margin-right:.5em;} [data-route-group="home"] .mainFavorite {position:relative; padding:0 2.7em;} [data-route-group="home"] .mainFavorite > .in {display:flex; width:100%; height:100%;} [data-route-group="home"] .mainFavorite .tit {width:24%;} [data-route-group="home"] .mainFavorite .tit > * {display:block; position:relative;} [data-route-group="home"] .mainFavorite .tit span {font-size:.9em; color:#9A9A9A;} [data-route-group="home"] .mainFavorite .tit strong {font-size:1.5em; color:#222222; font-weight:700; font-family:'Play';} [data-route-group="home"] .mainFavoriteSlider {position:relative; max-width:55em; margin:0 auto;} [data-route-group="home"] .mainFavorite .links .control {display:block;} [data-route-group="home"] .mainFavorite .links .control button {position:absolute; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%);} [data-route-group="home"] .mainFavorite .links .control button.prev {left:-2em;} [data-route-group="home"] .mainFavorite .links .control button.next {right:-2em;} [data-route-group="home"] .mainFavorite .links .swiper-slide {width:auto; width:14.25%;} [data-route-group="home"] .mainFavorite .links a {display:block; text-align:center;} [data-route-group="home"] .mainFavorite .links a:hover {text-decoration:underline; color:#fff; } [data-route-group="home"] .mainFavorite .links a:hover .icon {animation:flip-in-ver-right .5s cubic-bezier(.25,.46,.45,.94) both;} [data-route-group="home"] .mainFavorite .links a .icon {display:block; width:3em; height:3em; background:no-repeat 50% 50%; background-size:contain; margin:0 auto .8em; } [data-route-group="home"] .mainFavorite .links a .icon.ty1 {background-image:url(../img/main/ico_fav_01.svg);} [data-route-group="home"] .mainFavorite .links a .icon.ty2 {background-image:url(../img/main/ico_fav_02.svg);} [data-route-group="home"] .mainFavorite .links a .icon.ty3 {background-image:url(../img/main/ico_fav_03.svg);} [data-route-group="home"] .mainFavorite .links a .icon.ty4 {background-image:url(../img/main/ico_fav_04.svg);} [data-route-group="home"] .mainFavorite .links a .icon.ty5 {background-image:url(../img/main/ico_fav_05.svg);} [data-route-group="home"] .mainFavorite .links a .icon.ty6 {background-image:url(../img/main/ico_fav_06.svg);} [data-route-group="home"] .mainFavorite .links a .icon.ty7 {background-image:url(../img/main/ico_fav_07.svg);} [data-route-group="home"] .mainFavorite .links a span {font-size:.9em; color:#ffffff; font-weight:400; word-break:keep-all;} [data-route-group="home"] .mainFavorite .control button {z-index:99999} [data-route-group="home"] .mainFavorite .control button.prev {background-image:url(../img/main/ico_prev_w.svg);} [data-route-group="home"] .mainFavorite .control button.next {background-image:url(../img/main/ico_next_w.svg);} @media all and (max-width:1800px) { [data-route-group="home"] .mainFavorite {padding:0 1.5em;} } @media all and (max-width:1024px){ [data-route-group="home"] .mainVisual .pc-none {display:none;} [data-route-group="home"] .mainVisual .mo-none {display:block;} [data-route-group="home"] .mainVisual .search-box {margin-left:13em;} [data-route-group="home"] .mainApply {flex-direction:column; height:auto;} [data-route-group="home"] .mainApply:before {display:none;} [data-route-group="home"] .mainApply .left {margin-left:0; width:100%; order:2;} [data-route-group="home"] .mainApply .left .tabs ul {margin:1em 2em;} [data-route-group="home"] .mainApply .right {width:100%; height:21em; order:1; background-position:left center; display:flex; background-size:cover;} [data-route-group="home"] .mainApply .right .tit {padding:1.5em .5em 2em 1em;} [data-route-group="home"] .mainApply .right .btn {padding:2em 2em;} [data-route-group="home"] .mainApplySlider .slider {position:relative; right:0; margin:1.5em;} [data-route-group="home"] .mainApplySlider .control {padding:1.5em 0;} [data-route-group="home"] .mainFavorite {position:relative; top:auto; left:auto; right:auto; bottom:auto; margin:0 auto;} [data-route-group="home"] .mainFavorite .tit {width:auto; margin-bottom:1em; text-align:center;} [data-route-group="home"] .mainFavorite .links a .icon {display:block; margin:0 auto .5em;} [data-route-group="home"] .mainFavorite .links a span {display:block; text-align:center; line-height:1.2em;} } @media all and (max-width:1024px) and (min-width:769px) { [data-route-group="home"] .mainApply .right {height:16em;} [data-route-group="home"] .mainApply .right .tit {width:60%;} [data-route-group="home"] .mainApply .right .btn {padding:8em 2em 4em; width:40%; position:relative; right:auto; text-align:center;} [data-route-group="home"] .mainApply .right .btn::after {left:1em;} } @media all and (max-width:768px) { [data-route-group="home"] .mainVisual .search-box {margin-left:auto; margin-top:5em;} [data-route-group="home"] .mainVisual .search-box::after {top:-5em; left:50%; margin-left:-8em;} [data-route-group="home"] .mainVisual .search-box .in input[type="text"] {padding-left:1.5em;} [data-route-group="home"] .mainApply .right .tit {width:80%;} [data-route-group="home"] .mainApply .left .tabs li {margin-right:1em;} [data-route-group="home"] .mainFavorite .links a span br {display:none;} [data-route-group="home"] .mainApplySlider .applyItem .subj {height:4.5em;} } /******************************************************* News *******************************************************/ [data-route-group="home"] #news {background:#f9f9f9; margin-top:-10em; position:relative;} [data-route-group="home"] #news::after {content:'KNA'; font-family:'esamanru'; font-size:12em; color:#f0f0f0; position:absolute; transform:rotate(-90deg); top:.45em; right:-1.2em; letter-spacing:2px; font-weight:700;} [data-route-group="home"] .mainNewsWrap {padding-top:13em; margin-bottom:3.5em;} [data-route-group="home"] .mainNews {display:flex; position:relative;} [data-route-group="home"] .mainNews .left {width:16em;} [data-route-group="home"] .mainNews .left .tit {display:block; position:relative;} [data-route-group="home"] .mainNews .left .tit strong {display:block; font-weight:700; color:#16A12F} [data-route-group="home"] .mainNews .left .tabs {display:block; position:relative; margin-top:2em;} [data-route-group="home"] .mainNews .left .tabs li {display:block; position:relative;} [data-route-group="home"] .mainNews .left .tabs button {color:#999; font-weight:700; margin:0.7em 0; font-size:1.1em;} [data-route-group="home"] .mainNews .left .tabs button.active {padding:.8em 1em .8em 3em; color:#fff; width:11em; text-align:left; background:#000 url(../img/main/ico_tab_on.svg) no-repeat; background-position:1em 50%;} [data-route-group="home"] .mainNews .right {width:calc(100% - 16em); position:relative;} [data-route-group="home"] .mainNewsSlider {display:block;} [data-route-group="home"] .mainNewsSlider .slider {padding-top:4em;} [data-route-group="home"] .mainNewsSlider .control {display:block; position:absolute; top:0; right:0;} [data-route-group="home"] .mainNewsSlider .control > * {display:inline-block !important; position:relative; vertical-align:middle;} [data-route-group="home"] .mainNewsSlider .control button.prev {margin-right:.5em;} [data-route-group="home"] .mainNewsSlider .control button.next {margin-left:.5em;} [data-route-group="home"] .mainNewsSlider .control .bar {width:1px; height:.8em; background:rgba(0,0,0,.1);} [data-route-group="home"] .mainNewsSlider .control a {margin-left:1.5em;} [data-route-group="home"] .mainNewsSlider .newsItem {display:block; position:relative; box-shadow:0 0 2em 0 rgba(0,0,0,.05); background:#fff;} [data-route-group="home"] .mainNewsSlider .newsItem a {padding:1.5em 2em; display:block;} [data-route-group="home"] .mainNewsSlider .newsItem:after, [data-route-group="home"] .mainNewsSlider .newsItem:before, [data-route-group="home"] .mainNewsSlider .newsItem a:before, [data-route-group="home"] .mainNewsSlider .newsItem a:after {content:""; display:block; position:absolute; background:#2949A9; transition:0.2s all ease; z-index:2;} [data-route-group="home"] .mainNewsSlider .newsItem:after, [data-route-group="home"] .mainNewsSlider .newsItem:before {width:0%; height:2px;} [data-route-group="home"] .mainNewsSlider .newsItem a:before, [data-route-group="home"] .mainNewsSlider .newsItem a:after{width:2px; height:0%;} [data-route-group="home"] .mainNewsSlider .newsItem a:before {left:0; bottom:0;} [data-route-group="home"] .mainNewsSlider .newsItem a:after {right:0; top:0;} [data-route-group="home"] .mainNewsSlider .newsItem:after {top:0; left:0;} [data-route-group="home"] .mainNewsSlider .newsItem:before {bottom:0; right:0;} [data-route-group="home"] .mainNewsSlider .newsItem:hover:after, [data-route-group="home"] .mainNewsSlider .newsItem:hover:before {width:100%;} [data-route-group="home"] .mainNewsSlider .newsItem:hover a:before, [data-route-group="home"] .mainNewsSlider .newsItem:hover a:after {height:100%;} [data-route-group="home"] .mainNewsSlider .newsItem:hover a:after {transition-delay:0.2s;} [data-route-group="home"] .mainNewsSlider .newsItem:hover:before {transition-delay:0.4s;} [data-route-group="home"] .mainNewsSlider .newsItem:hover a:before {transition-delay:0.6s;} [data-route-group="home"] .mainNewsSlider .newsItem .cate {font-weight:700; font-size:0.85em;} [data-route-group="home"] .mainNewsSlider .newsItem .cate::before {content:''; display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:.4em; margin-bottom:.1em;} [data-route-group="home"] .mainNewsSlider .newsItem .subj {position:relative;font-size:1.1em; color:#222; font-weight:700; line-height:1.5em; height:3em; overflow:hidden; padding-bottom:3em; margin-top:.8em; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical;} [data-route-group="home"] .mainNewsSlider .newsItem i {display:block; width:100%; height:1px; background:#ddd; margin:1.3em 0;} [data-route-group="home"] .mainNewsSlider .newsItem .txt {position:relative; font-size:.85em; color:#222; font-weight:400; line-height:1.5em; height:3em; overflow:hidden; margin-bottom:1em; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical;} [data-route-group="home"] .mainNewsSlider .newsItem .txt * {font-family:'Pretendard'!important; text-decoration:none; font-size:18px!important; line-height:1.4em!important; width:100%!important;} [data-route-group="home"] .mainNewsSlider .newsItem .date {display:block; position:relative; font-size:.85em; color:#A8A8A8; font-family:'Play', sans-serif; padding-left:1.7em; background:url('../img/main/ico_clock.svg') no-repeat left center;} [data-route-group="home"] .mainNewsSlider .tab01 .newsItem:after, [data-route-group="home"] .mainNewsSlider .tab01 .newsItem:before, [data-route-group="home"] .mainNewsSlider .tab01 .newsItem a:before, [data-route-group="home"] .mainNewsSlider .tab01 .newsItem a:after {background:#16A12F;} [data-route-group="home"] .mainNewsSlider .tab02 .newsItem:after, [data-route-group="home"] .mainNewsSlider .tab02 .newsItem:before, [data-route-group="home"] .mainNewsSlider .tab02 .newsItem a:before, [data-route-group="home"] .mainNewsSlider .tab02 .newsItem a:after {background:#16A170;} [data-route-group="home"] .mainNewsSlider .tab03 .newsItem:after, [data-route-group="home"] .mainNewsSlider .tab03 .newsItem:before, [data-route-group="home"] .mainNewsSlider .tab03 .newsItem a:before, [data-route-group="home"] .mainNewsSlider .tab03 .newsItem a:after {background:#1693A1;} [data-route-group="home"] .mainNewsSlider .tab01 .newsItem .cate {color:#16A12F;} /* 세계원전시장동향 */ [data-route-group="home"] .mainNewsSlider .tab01 .newsItem .cate::before {background:#16A12F;} [data-route-group="home"] .mainNewsSlider .tab02 .newsItem .cate {color:#16A170;} /* i-SMR 뉴스레터 */ [data-route-group="home"] .mainNewsSlider .tab02 .newsItem .cate::before {background:#16A170;} [data-route-group="home"] .mainNewsSlider .tab03 .newsItem .cate {color:#1693A1;} /* 공지사항 */ [data-route-group="home"] .mainNewsSlider .tab03 .newsItem .cate::before {background:#1693A1;} @media all and (max-width:1024px) { [data-route-group="home"] #news::after {display:none;} [data-route-group="home"] .mainNewsWrap {padding-top:9em; margin:0;} [data-route-group="home"] .mainNews {margin:0 -1em; display:block;} [data-route-group="home"] .mainNews .tit {text-align:center;} [data-route-group="home"] .mainNews .left {width:100%;} [data-route-group="home"] .mainNews .left .tit strong {display:inline-block; margin-left:.3em;} [data-route-group="home"] .mainNews .left .tabs {margin:1em 0;} [data-route-group="home"] .mainNews .left .tabs ul {display:flex; justify-content:space-around; align-items:center; flex-wrap:wrap;} [data-route-group="home"] .mainNews .left .tabs button {width:auto!important; margin:0;} [data-route-group="home"] .mainNews .right {width:100%;} [data-route-group="home"] .mainNewsSlider .slider {margin:1em;} [data-route-group="home"] .mainNewsSlider .control {left:50%; transform:translateX(-50%); right:auto; width:100%; text-align:center;} [data-route-group="home"] .mainNewsSlider .newsItem .txt * {font-size:16px!important; line-height:1.3em!important;} } @media all and (max-width:540px) { [data-route-group="home"] .mainNews .left .tabs ul li {width:50%; text-align:center; margin-bottom:1em;} } /******************************************************* BANNER *******************************************************/ [data-route-group="home"] #banner::after {content:''; width:32em; height:16em; position:absolute; bottom:-2em; right:-3em; background:url('../img/main/illu_data.svg') center no-repeat; background-size:cover; z-index:-1;} [data-route-group="home"] .mainBannerWrap {display:flex; justify-content:space-between; margin:3.5em auto;} [data-route-group="home"] .mainBannerWrap .tit {font-size:1.6em; margin-bottom:.7em;} [data-route-group="home"] .mainBanner {width:20em; position:relative; height:20.5em;} [data-route-group="home"] .mainBanner .control {position:absolute; top:0; right:-3em; bottom:0; width:2em; display:flex; flex-direction:column; height:20.5em;} [data-route-group="home"] .mainBanner .control .pager {width:auto; padding:0 .9em; font-size:.7em; font-weight:500; color:#888;} [data-route-group="home"] .mainBanner .control .swiper-pagination-current {color:#2949A9; font-weight:700;} [data-route-group="home"] .mainBanner .control * {display:block;} [data-route-group="home"] .mainBanner .slider {border:1px solid #e6e6e6;} [data-route-group="home"] .mainBanner .swiper-slide > * {display:block; position:relative; height:17em; overflow:hidden;} [data-route-group="home"] .mainBanner .swiper-slide > *:after {content:""; display:block; position:relative; padding-top:92.140921%;} [data-route-group="home"] .mainBanner .swiper-slide > * img {display:block; position:absolute; height:100%; top:0; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); max-width:10000%;} [data-route-group="home"] .mainBanner .swiper-slide > * img[src*="no-image"] {height:auto; width:auto; top:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%);} [data-route-group="home"] .mainBanner .ani-progress-bar {width:5px; height:11em; margin:.5em .7em; overflow:hidden; background:rgba(0,0,0,.1);} [data-route-group="home"] .mainBanner .ani-progress-bar .bar {display:block; position:absolute; top:0; left:0; bottom:0; width:0; background:#2949A9;} [data-route-group="home"] .mainBanner .ani-progress-bar.active-loading .bar {width:100%; transition-property:all; -webkit-transition-property:all;} [data-route-group="home"] .mainBanner .control button {display:block; width:1.6em; height:1.6em; text-indent:-999px; overflow:hidden; background:no-repeat 50% 50%; background-size:contain;} [data-route-group="home"] .mainBanner .control button + button { margin-top:.4em;} [data-route-group="home"] .mainBanner .control button.prev {background-image:url('../img/main/btn_prev.svg');} [data-route-group="home"] .mainBanner .control button.next {background-image:url('../img/main/btn_next.svg');} [data-route-group="home"] .mainBanner .control button.stop {background-image:url('../img/main/btn_stop.svg');} [data-route-group="home"] .mainBanner .control button.play {background-image:url('../img/main/btn_start.svg'); margin-bottom:0; display:none;} [data-route-group="home"] .mainImglink {width:calc(100% - 50em); margin:0 4em 0 6em;} [data-route-group="home"] .mainImglink ul {display:flex; flex-direction:column; align-items:stretch; height:20.5em;} [data-route-group="home"] .mainImglink ul .item {height:6em; padding:1.3em 2em; } [data-route-group="home"] .mainImglink ul .item + .item {margin-top:1.25em;} [data-route-group="home"] .mainImglink ul .item.column {background-image:url('../img/main/img_column.png'); background-size:cover;} [data-route-group="home"] .mainImglink ul .item.grobal {background-image:url('../img/main/img_grobal.png'); background-size:cover;} [data-route-group="home"] .mainImglink ul .item.trend {background-image:url('../img/main/img_trend.png'); background-size:cover;} [data-route-group="home"] .mainImglink ul .item:hover * {color:#fff!important;} [data-route-group="home"] .mainImglink ul .item.column:hover {background-image:url('../img/main/img_column_on.png');} [data-route-group="home"] .mainImglink ul .item.grobal:hover {background-image:url('../img/main/img_grobal_on.png');} [data-route-group="home"] .mainImglink ul .item.trend:hover {background-image:url('../img/main/img_trend_on.png');} [data-route-group="home"] .mainImglink ul .item a {display:block; position:relative;} [data-route-group="home"] .mainImglink ul .item strong {display:block; font-family:'esamanru'; color:#111; font-size:1.4em; margin-top:0.1em;} [data-route-group="home"] .mainImglink ul .item span {font-size:.9em; color:#888;} [data-route-group="home"] .mainData {width:25em; height:20.5em;} [data-route-group="home"] .mainData p {font-weight:700; color:#888; margin-bottom:.5em;} [data-route-group="home"] .mainData .tit strong {font-weight:800; color:#2949A9; display:block;} [data-route-group="home"] .mainData .more {position:absolute; right:0; top:0;} [data-route-group="home"] .mainData .thumb {position:absolute; right:0; bottom:0; height:14em; width:10.5em; border:1px solid #eee;} [data-route-group="home"] .mainData .thumb img {object-fit:cover; width:100%; height:100%;} [data-route-group="home"] .mainData .btn {width:9em; position:absolute; bottom:0; } [data-route-group="home"] .mainData .btn li + li {margin-top:.75em;} [data-route-group="home"] .mainData .btn li a {padding:.63em 1em; border:1px solid #ddd; font-size:.9em; display:block; position:relative; color:#333; background-color:#fff;} [data-route-group="home"] .mainData .btn li a::after {content:""; display:block; position:absolute; right:1.2em; top:50%; margin-top:-.6em; background-size:contain;} [data-route-group="home"] .mainData .btn li a:hover {background:#333; color:#fff;} [data-route-group="home"] .mainData .btn li a.view::after {width:1.2em; height:1.2em; background-image:url('../img/main/ico_eye.svg');} [data-route-group="home"] .mainData .btn li a.data::after {width:1.2em; height:1.2em; background-image:url('../img/main/ico_folder.svg');} [data-route-group="home"] .mainData .btn li a.view:hover::after {background-image:url('../img/main/ico_eye_on.svg');} [data-route-group="home"] .mainData .btn li a.data:hover::after {background-image:url('../img/main/ico_folder_on.svg');} [data-route-group="home"] #footerarea .inner {padding-top:0;} @media all and (max-width:1024px) { [data-route-group="home"] .mainBannerWrap {display:block; margin:3.5em auto 0;} [data-route-group="home"] .mainBanner {margin:0 auto;} [data-route-group="home"] .mainImglink {margin:2em 0; width:100%; position:relative;} [data-route-group="home"] .mainData {margin:1em 0; width:100%; position:relative;} } @media all and (max-width:440px) { [data-route-group="home"] .mainBanner {width:100%; padding-right:3em;} [data-route-group="home"] .mainBanner .control {right:0;} } /******************************************************* Map *******************************************************/ [data-route-group="home"] .ico-decomm {display:inline-block; vertical-align:middle; border-radius:100%; font-size:.75em; width:2.3333334em; height:2.3333334em; text-align:center; white-space:nowrap; line-height:2.35em; background:#333; color:#fff; font-family:'Play', sans-serif; font-weight:700; position:relative; z-index:1;} [data-route-group="home"] #mapTotalStatisticsDiv .ico-decomm::before {content:''; width:3.6em; height:3.63em; position:absolute; top:50%; left:50%; display:block; border-radius:50%; opacity:0.2; transform:translate(-50%, -50%); z-index:-1;} [data-route-group="home"] .ico-decomm.ty1, [data-route-group="home"] .ico-decomm.ty1::before {background:#43BD0D;} [data-route-group="home"] .ico-decomm.ty2, [data-route-group="home"] .ico-decomm.ty2::before {background:#10A3A8;} [data-route-group="home"] .ico-decomm.ty3, [data-route-group="home"] .ico-decomm.ty3::before {background:#3091ED;} [data-route-group="home"] .ico-decomm.ty4, [data-route-group="home"] .ico-decomm.ty4::before {background:#E9642C;} [data-route-group="home"] .ico-decomm.ty5, [data-route-group="home"] .ico-decomm.ty5::before {background:#E1E1E1; color:#555;} [data-route-group="home"] .mainMapWrap {display:block; position:relative; min-height:35.5em; padding:3.5em 0 2.9em; z-index:0; box-sizing:border-box; width:68%;} [data-route-group="home"] .mainMapWrap:before {content:""; display:block; position:absolute; top:0; left:-10em; right:-10em; bottom:0; background:#F6F6F6; z-index:-1;} [data-route-group="home"] .mainMapWrap .tit {display:block; position:relative;} [data-route-group="home"] .mainMapWrap .tit strong {font-weight:700; color:#16A12F;} [data-route-group="home"] .mainMapWrap .tit a {display:inline-block; vertical-align:middle; font-size:.9em; padding:.2em 1em; border-radius:9em; background:#024B7E; color:#fff; margin-left:1em; font-family:'Play', sans-serif;} [data-route-group="home"] .mainMapWrap .tit a:after {content:"+"; font-size:1.33em; margin-left:.5em;} [data-route-group="home"] .mainMapWrap .tit span {display:block; font-size:.9em; color:#555; margin-top:1em; word-break:keep-all;} [data-route-group="home"] .mainMapWrap .tip {font-size:.8em; color:#555; padding-left:1.8em; background:url(../img/main/ico_tip.svg) no-repeat; margin-top:1em; background-size:contain;} [data-route-group="home"] .mainMapWrap .legend {display:block; position:absolute; right:1em; top:3em; z-index:0;} [data-route-group="home"] .mainMapWrap .legend ul {display:block; border-radius:.5em; padding:0; margin-bottom:.5em;} [data-route-group="home"] .mainMapWrap .legend li {display:inline-block; vertical-align:top; padding:0 .5em; text-align:center;} [data-route-group="home"] .mainMapWrap .legend .ico-decomm {margin-bottom:1.3em; font-size:0.7em;} [data-route-group="home"] .mainMapWrap .legend span {display:block; color:#222; font-size:.75em; font-weight:700;} [data-route-group="home"] .mainMapWrap .legend p {display:block; position:relative; font-size:14px; color:#999; padding-left:.5em; line-height:1.5em;} [data-route-group="home"] .mainMapWrap .legend p:before {content:""; display:block; position:absolute; width:.24em; height:.24em; background:url(../img/main/ico_map_legend_dot.svg) no-repeat 50% 50%; background-size:cover; left:0; top:.75em; margin-top:-.12em;} [data-route-group="home"] .mainMap {display:block; position:absolute; left:-1em; right:0; top:1em; bottom:0; max-width:41.5em; } [data-route-group="home"] .mainMap .area {display:block; position:relative; background:url(../img/main/img_map.png) no-repeat 50% 50%; background-size:contain; z-index:0;} [data-route-group="home"] .mainMap .area:before {content:""; display:block; position:relative; padding-top:100%;} [data-route-group="home"] .mainMap .area > li:before {content:""; display:block; position:absolute; top:0; left:0; right:0; bottom:0; z-index:-1; background:no-repeat 50% 50%; background-size:contain; transition:.3s all; -webkit-transition:.3s all; opacity:0;} [data-route-group="home"] .mainMap .area > li.open:before {opacity:1;} [data-route-group="home"] .mainMap .mark {display:block; position:absolute;} [data-route-group="home"] .mainMap .mark > button {display:block; position:absolute; white-space:nowrap; font-size:.85em; color:#333; font-weight:500; padding:.7em 1em .7em 2.5em;} [data-route-group="home"] .mainMap .mark > button:before {content:""; display:block; position:absolute; width:2em; height:2em; background:url(../img/main/ico_map_marker.svg) no-repeat 50% 50%; left:.5em; top:.2em;} [data-route-group="home"] .mainMap .open .pop {opacity:1; visibility:visible;} [data-route-group="home"] .mainMap .open .mark button {background:#222; border-radius:5em; color:#fff} [data-route-group="home"] .mainMap .open .mark > button:before {background-image:url(../img/main/ico_map_marker_on.svg);} [data-route-group="home"] .mainMap .open .mark > button {z-index:2;} [data-route-group="home"] .mainMap .pop {z-index:999; position:absolute; width:17em; opacity:0; visibility:hidden; transition:.3s all; -webkit-transition:.3s all; right:-18em; top:9em;} [data-route-group="home"] .mainMap .pop .subj {display:none;} [data-route-group="home"] .mainMap .pop .subj {display:block; background:#ffffff; padding:0.5em 1em; font-size:0.9em; border-bottom:1px solid #efefef;} [data-route-group="home"] .mainMap .pop .subj strong {display:block; color:#222; font-weight:700;} [data-route-group="home"] .mainMap .pop .con {display:block; position:relative; background:#fff;} [data-route-group="home"] .mainMap .pop .con .data {max-height:18em; overflow:auto; padding:1em;} [data-route-group="home"] .mainMap .pop .close {display:block; position:absolute; top:.2em; right:.7em; width:1.7em; height:1.7em; background:url(../img/main/ico_pop_close.svg) no-repeat 50% 50%; background-size:contain; text-indent:-999px; overflow:hidden; } [data-route-group="home"] .mainMap .pop .con ul {display:table; width:100%; table-layout:fixed;} [data-route-group="home"] .mainMap .pop .con ul > li {display:table-row;} [data-route-group="home"] .mainMap .pop .con ul > li > * {display:table-cell; vertical-align:middle; padding:.2em 0;} [data-route-group="home"] .mainMap .pop .con ul > li strong {font-size:.8em; color:#222; width:49%; font-weight:700;} [data-route-group="home"] .mainMap .pop .con ul > li strong i {font-size:.875em; color:#999; font-family:'Play', sans-serif; background:#E9E9E9; color:#555; padding:.2em .5em; border-radius:5em; margin-left:.4em;} [data-route-group="home"] .mainMap .pop .con ul > li span {text-align:right; font-size:.7em;} [data-route-group="home"] .mainMap .pop .con .result {display:block; position:relative; border-top:1px solid #e6e6e6; padding:.5em 1em;} /********* 지역별 설정 */ /** 아프리카 **/ [data-route-group="home"] .mainMap .area .ty1:before {background-image:url(../img/main/img_map_africa.png);} [data-route-group="home"] .mainMap .area .ty1 .mark {left:47%; top:55%;} /** 라틴 아메리카 **/ [data-route-group="home"] .mainMap .area .ty2:before {background-image:url(../img/main/img_map_america_s.png);} [data-route-group="home"] .mainMap .area .ty2 .mark {left:23%; top:58%;} /** 북 아메리카 **/ [data-route-group="home"] .mainMap .area .ty3:before {background-image:url(../img/main/img_map_america_n.png);} [data-route-group="home"] .mainMap .area .ty3 .mark {left:12%; top:40%;} /** 동 아시아 **/ [data-route-group="home"] .mainMap .area .ty4:before {background-image:url(../img/main/img_map_asia_e.png);} [data-route-group="home"] .mainMap .area .ty4 .mark {left:70%; top:40%;} /** 중동 남 아시아 **/ [data-route-group="home"] .mainMap .area .ty5:before {background-image:url(../img/main/img_map_asia_s.png);} [data-route-group="home"] .mainMap .area .ty5 .mark {left:60%; top:46%;} /** 중 동부 유럽 **/ [data-route-group="home"] .mainMap .area .ty6:before {background-image:url(../img/main/img_map_uropa_e.png);} [data-route-group="home"] .mainMap .area .ty6 .mark {left:64%; top:35%;} /** 서부 유럽 **/ [data-route-group="home"] .mainMap .area .ty7:before {background-image:url(../img/main/img_map_uropa_w.png);} [data-route-group="home"] .mainMap .area .ty7 .mark {left:45%; top:40%;} [data-route-group="home"] .lastWrap {position:relative; display:flex;} [data-route-group="home"] .mainKakaoWrap {width:36%; height:35.5em; background:url(../img/main/bg_kakao.png) no-repeat 50% 50%; z-index:1; position:absolute; right:-5em; top:0; background-size:cover;} [data-route-group="home"] .mainKakaoWrap .tit {display:block; margin:2em; position:relative;} [data-route-group="home"] .mainKakaoWrap .tit p {font-family:'Pretendard'; font-size:0.5em; color:#fff; font-weight:400; margin-top:1.5em;} [data-route-group="home"] .mainKakaoWrap .tit a {display:block; width:1.5em; height:1.5em; text-indent:-999px; overflow:hidden; background:no-repeat 50% 50%; background-size:contain; background-image:url('../img/main/ico_kakao.svg'); position:absolute; top:0; right:0;} [data-route-group="home"] .mainKakaoWrap .btn {position:absolute; left:0; right:0; bottom:0; background:#127351;} [data-route-group="home"] .mainKakaoWrap .btn.user {bottom:5em; background:#17C837;} [data-route-group="home"] .mainKakaoWrap .btn.user::after {content:""; display:block; position:absolute; margin:0 auto; width:1.6em; height:1.6em; background:url(../img/main/ico_user.svg) no-repeat center; top:50%; right:5em; margin-top:-.8em;} [data-route-group="home"] .mainKakaoWrap .btn.chat::after {content:""; display:block; position:absolute; margin:0 auto; width:1.6em; height:1.6em; background:url(../img/main/ico_chat.svg) no-repeat center; top:50%; right:5em; margin-top:-.8em;} [data-route-group="home"] .mainKakaoWrap .btn a {display:block; position:relative; padding:1.8em 4em; color:#fff; font-weight:600;} [data-route-group="home"] .mainKakaoWrap .btn a {overflow:hidden; transition:all .5s ease-in-out; } [data-route-group="home"] .mainKakaoWrap .btn a:before {content:" "; display:block; width:50em; height:4em; background:rgba(255, 255, 255, .15); position:absolute; top:-10px; left:-800px; transform:rotate(-45deg); transition:all .9s ease-in-out;} [data-route-group="home"] .mainKakaoWrap .btn a:hover:before {margin-left:200%;} [data-route-group="home"] .mainKakaoWrap .btn p {opacity:0.8; font-size:.9em;} [data-route-group="home"] .popProdWrap {display:none;} @media all and (max-width:1900px) { [data-route-group="home"] .mainMap .pop {left:39em;} } @media all and (max-width:1800px) { [data-route-group="home"] .mainMap .pop {left:35em;} } @media all and (max-width:1200px) { [data-route-group="home"] .mainMap .pop {left:37em;} } @media all and (max-width:1024px) { [data-route-group="home"] .lastWrap {display:block;} [data-route-group="home"] .mainMapWrap {width:100%; position:relative;} [data-route-group="home"] .mainMap {max-width:100%; left:0;} [data-route-group="home"] .mainMap .pop {right:0; bottom:auto; left:0; width:100%; z-index:99; top:24em;} [data-route-group="home"] .mainMap .pop .con .data {max-height:6em;} [data-route-group="home"] .mainKakaoWrap {width:100%; position:relative; right:0; height:24em; margin:3em 0 0; padding:3em;} [data-route-group="home"] .mainKakaoWrap .tit {margin:0;} [data-route-group="home"] .mainKakaoWrap .btn::after {right:3em!important;} [data-route-group="home"] .mainKakaoWrap .btn a {padding:1.8em 3em;} } @media all and (max-width:768px) { [data-route-group="home"] .mainMapWrap {min-height:40em;} [data-route-group="home"] .mainMapWrap .legend {bottom:1em; top:auto; left:0;} [data-route-group="home"] .mainMap {max-width:100%; left:0;} [data-route-group="home"] .mainMap .pop {top:27em;} [data-route-group="home"] .mainKakaoWrap {padding:2em;} [data-route-group="home"] .mainKakaoWrap .btn::after {right:2em!important;} [data-route-group="home"] .mainKakaoWrap .btn a {padding:1.8em 2em;} [data-route-group="home"] .mainKakaoWrap .tit img {max-width:80%;} } @media all and (max-width:540px) { [data-route-group="home"] .mainMapWrap {min-height:35em;} [data-route-group="home"] .mainMap {top:4em;} [data-route-group="home"] .mainMap .pop {top:19em;} } /******************************************************* NuGPT Main Style *******************************************************/ @-webkit-keyframes slow-pan{0%{background-position:0% 50%;} 100%{background-position:100% 50%;}} @keyframes slow-pan{0%{background-position:0% 50%;} 100%{background-position:100% 50%;}} @-webkit-keyframes hithere{30%{-webkit-transform:scale(1.1);} 40%,60%{-webkit-transform:rotate(-10deg) scale(1.1);} 50%{-webkit-transform:rotate(10deg) scale(1.1);} 70%{-webkit-transform:rotate(0deg) scale(1.1);} 100%{-webkit-transform:scale(1);}} @keyframes hithere{30%{transform:scale(1.1);} 40%,60%{transform:rotate(-10deg) scale(1.1);} 50%{transform:rotate(10deg) scale(1.1);} 70%{transform:rotate(0deg) scale(1.1);} 100%{transform:scale(1);}} [data-route-group="home"] #mainNuGPT {display:flex; position:relative; padding:1em; align-items:center; flex-direction:column; justify-content:center; height:100vh; min-height:40em; background:url(../img/main/bak_gpt.png) no-repeat 50% 50% fixed; background-size:auto 100%;} /*#mainNuGPT {-webkit-animation:slow-pan 60s linear infinite alternate; animation:slow-pan 60s linear infinite alternate;}*/ [data-route-group="home"] #mainNuGPT h1 {display:block; position:relative; text-indent:-999px; width:16em; max-width:100%; height:3.1em; background:url(../img/main/tit_gpt_logo.svg) no-repeat 50% 50%; background-size:contain; overflow:hidden; margin-bottom:1.5em;} [data-route-group="home"] #mainNuGPT p {display:block; position:relative; font-size:1.3em; line-height:1.4em; color:#fff; font-weight:100; text-align:center;} [data-route-group="home"] #mainNuGPT p strong {font-weight:800;} [data-route-group="home"] #mainNuGPT .mainQuestionBox {display:block; position:relative; margin:3.5em auto 2em; width:38em; max-width:100%; padding:1em; border-radius:1.5em; background:radial-gradient(ellipse at top, #E8F2FF 0, #fff 60%);} [data-route-group="home"] #mainNuGPT .mainQuestionBox textarea {display:block; position:relative; width:100%; height:5em; padding:.5em 3em .5em .5em; border:none; background:transparent; outline:0; margin-bottom:1em;} [data-route-group="home"] #mainNuGPT .mainQuestionBox textarea::placeholder {color:rgba(0,0,0,.4); line-height:1.4em;} [data-route-group="home"] #mainNuGPT .mainQuestionBox button.search {display:block; position:absolute; top:1em; right:1em; width:2.5em; height:2.5em; text-indent:-999px; background:linear-gradient(94.94deg,rgba(59, 47, 215, 1) 0%,rgba(147, 51, 204, 1) 50%,rgba(233, 64, 182, 1) 100%);; overflow:hidden; border-radius:1em;} [data-route-group="home"] #mainNuGPT .mainQuestionBox button.search:before {content:""; display:block; position:absolute; top:50%; left:50%; margin:-.575em 0 0 -.65em; width:1.3em; height:1.15em; background:url(../img/main/ico_gpt_submit.svg) no-repeat 50% 50%; background-size:contain;} [data-route-group="home"] #mainNuGPT .mainQuestionBox button.search:before {-webkit-animation:hithere 1s ease infinite; animation:hithere 1s ease infinite;} [data-route-group="home"] #mainNuGPT .mainQuestionBox .keyword {display:flex; flex-wrap:wrap; align-items:center; margin:-.25em; padding-right:3em;} [data-route-group="home"] #mainNuGPT .mainQuestionBox .keyword a {display:block; position:relative; margin:.3125em; border-radius:9em; background:#F2F3F9; padding:.43em 1em; font-size:.8em; color:#48619E; transition:.3s all; -webkit-transition:.3s all;} [data-route-group="home"] #mainNuGPT .mainQuestionBox .keyword a:before {content:"+"; /* font-size:.8em; */} /* #mainNuGPT .mainQuestionBox .keyword a span {font-size:.8em;} */ [data-route-group="home"] #mainNuGPT .mainQuestionBox .keyword a:focus, [data-route-group="home"] #mainNuGPT .mainQuestionBox .keyword a:hover {color:#F2F3F9; background:#48619E;} [data-route-group="home"] #mainNuGPT .mainQuestionBox button.history {display:block; position:absolute; right:1em; bottom:.65em;width:2.5em; height:2.5em; text-indent:-9999px; overflow:hidden; background:url(../img/main/ico_gpt_history.svg) no-repeat center center; background-size:1.6em auto;} [data-route-group="home"] #mainNuGPT .links {display:flex; align-items:center; justify-content:center;} [data-route-group="home"] #mainNuGPT .links a {display:flex; align-items:center; justify-content:center; width:12em; max-width:calc((100vw - 3em) / 2); height:2.7em; border-radius:9em; background:rgba(255,255,255,.1); backdrop-filter:blur(7.5px); margin:.25em; border:1px solid rgba(255,255,255,.6); transition:.3s all; -webkit-transition:.3s all;} [data-route-group="home"] #mainNuGPT .links a:before {content:""; display:block; position:relative; width:1.6em; height:1.6em; background:no-repeat 50% 50%; background-size:contain; margin-right:.5em;} [data-route-group="home"] #mainNuGPT .links a.ty1:before {background-image:url(../img/main/ico_gpt_link01.svg);} [data-route-group="home"] #mainNuGPT .links a.ty2:before {background-image:url(../img/main/ico_gpt_link02.svg);} [data-route-group="home"] #mainNuGPT .links a span {font-weight:700; color:#fff; font-size:.9em;} [data-route-group="home"] #mainNuGPT .links a:hover, [data-route-group="home"] #mainNuGPT .links a:focus {background:linear-gradient(94.94deg, rgba(59, 47, 215, 1) 0%, rgba(147, 51, 204, 1) 50%, rgba(233, 64, 182, 1) 100%),linear-gradient(to left, #ffffff, #ffffff);} [data-route-group="home"] .gptSide {display:flex; align-items:center; position:absolute; right:1.5em; bottom:1.5em; padding:.35em; border-radius:9em; background:rgba(255,255,255,.1); backdrop-filter:blur(7.5px); border:1px solid rgba(255,255,255,.6);} [data-route-group="home"] .gptSide a {display:flex; position:relative; align-items:center; width:7em; height:2.3em; border-radius:9em; justify-content:center; text-align:center; z-index:1;} [data-route-group="home"] .gptSide a span {display:block; position:relative; font-size:.9em; line-height:1.4em; color:#fff; font-weight:700;} [data-route-group="home"] .gptSide .bak {display:block; position:absolute; top:.35em; bottom:.35em; left:.35em; width:7em; height:2.4em; left:.35em; border-radius:9em; background:linear-gradient(94.94deg, rgba(59, 47, 215, 1) 0%, rgba(147, 51, 204, 1) 50%, rgba(233, 64, 182, 1) 100%),linear-gradient(to left, #ffffff, #ffffff); z-index:0; transition:.3s all; -webkit-transition:.3s all;} [data-route-group="home"] .gptSide .ty2:hover ~ .bak, [data-route-group="home"] .gptSide .ty2:focus ~ .bak {left:7.35em;} @media all and (max-width:1024px) { [data-route-group="home"] #mainNuGPT {-webkit-animation-duration:100s; animation-duration:100s;} } @media all and (max-width:640px) { [data-route-group="home"] .gptSide {right:auto; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%);} [data-route-group="home"] #mainNuGPT .mainQuestionBox .keyword {padding-right:0;} [data-route-group="home"] #mainNuGPT .mainQuestionBox button.history {background-size:2em; bottom:auto; top:4em;} } [data-route-group="home"] .kneissSide.gptSide {position:fixed; z-index:2; background:rgba(0,0,0,.25); border-color:rgba(0,0,0,.1);} [data-route-group="home"] .kneissSide.gptSide .bak {left:7.35em;} [data-route-group="home"] .kneissSide.gptSide .ty1:hover ~ .bak, [data-route-group="home"] .kneissSide.gptSide .ty1:focus ~ .bak {left:.35em;} @media (min-width:641px) {[data-route-group="home"] .NuGPT-wrap {bottom:5.3em;}} @media (max-width:400px) {[data-route-group="home"] .NuGPT-wrap {right:50%; bottom:5.2em; margin-right:-1.675em;}}