.header { overflow: hidden; &{ position: fixed; z-index: 1000; top:0; left:0; width:100%; font-size: 1rem; background-color: rgba(255, 255, 255, 0); border-bottom: 1px solid rgba(255, 255, 255, 0.15); transition: transform 0.3s, background .3s; color: #fff; } &::before{ content: ''; display: block; width: 100%; height: 1px; background-color: rgba(255, 255, 255, 0.15); position: absolute; top:100%; left:0; } .logo { position: relative; z-index: 2; a { display: block; background-repeat: no-repeat; background-size: 100% auto; background-position: center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='36.573' viewBox='0 0 160 36.573'%3E%3Cpath d='M-426.419 400.47a17.835 17.835 0 0 1 17.89-17.787 18.988 18.988 0 0 1 8.817 2.4c-7.935-3.01-16.678 3.3-16.678 3.3a1.43 1.43 0 0 0-.587 2.167 1.365 1.365 0 0 0 1.705.458c1.58-.873 6.776-3.881 11.88-4.233 7.861-.546 9.96 4.494 9.96 4.494-1.211-1.277-2.678-2.442-7.674-2.755-6.9.1-15.662 5.6-16.784 6.646a1.381 1.381 0 0 0-.188 2.065 1.363 1.363 0 0 0 1.739.281c.906-.571 8.584-5.943 15.116-6.352 8.007-.5 9.613 4.484 9.953 5.566-1.444-2.394-6.513-5-13.248-2.791-6.161 2.022-12.935 6.948-12.935 6.948a1.46 1.46 0 0 0-.352 2.041 1.458 1.458 0 0 0 2.113.166c2.5-1.753 7.772-6.027 14.929-7.237 5.853-.991 9.656 1.334 9.842 5.844a5.228 5.228 0 0 0-3.436-3.624c-1.252-.44-8.432-2.283-20.987 7.4a1.593 1.593 0 0 0-.409 2.421c.867.934 1.976.024 2.035-.024a49.563 49.563 0 0 1 9.91-6.155c7.382-3.461 13.078-.646 12.21 3.767-.029-3.329-4.953-4.246-10.166-2.474a28.823 28.823 0 0 0-10.459 7 1.4 1.4 0 0 0 .342 1.8 1.311 1.311 0 0 0 1.693.07 46.626 46.626 0 0 1 7.32-5.138c4.214-1.957 7.533-2.382 9.111-.667 1.71 1.856-.227 5.423-3.584 8.094a18.675 18.675 0 0 1-11.186 4.092 17.836 17.836 0 0 1-17.892-17.783zm23.806 8.693c-3.106 1.75-4.663 3.939-3.895 4.964s3.8.655 6.905-1.1 4.759-4.169 3.989-5.193a1.759 1.759 0 0 0-1.454-.5 12.608 12.608 0 0 0-5.545 1.83zm118.105 1.243a7.976 7.976 0 0 1-2.22-5.3l5.824-.039a4.409 4.409 0 0 0 .844 2.245 4.182 4.182 0 0 0 3.294 1.257c2.418 0 3.107-1.682 3.107-2.394a2.012 2.012 0 0 0-.74-1.526 8.5 8.5 0 0 0-3.408-1.269c-2.917-.668-5.392-1.556-6.64-2.665a5.41 5.41 0 0 1-1.871-4.235c0-5.463 6.287-6.42 9.541-6.42 6.147 0 8.853 2.655 8.853 6.659h-6.016a6.45 6.45 0 0 0-.039-.827c-.186-1.348-1.352-2.042-3.464-2.044a2.573 2.573 0 0 0-2.649 2c-.14 1.791 1.663 2.471 3.984 2.97 2.356.505 4.17.518 6.691 2.308a5.593 5.593 0 0 1 2 4.381c0 1.408-.6 7.053-9.322 7.053-3.654.005-6.361-.715-7.769-2.153zm-31.739 1.778v-3.242h-13.987c-1.927 0-3.2-.791-3.226-2.609v-8.3h9.372V394.1h-9.151v-3.371h10.523c.452 0 3.443-.153 3.447 2.58v7.658h-9.37v4.61h12.392v-15.2h4.819v21.814zm-64.515 0c-2.2 0-3.29-1.023-3.29-2.933V403.6h20.919v8.585zm1.535-2.764h11.3v-3.06h-11.3zm72.08 2.687V390.66h17.326v4.824h-11.109v3.992h10.339v3.816h-10.339v3.992h11.109v4.824zm-48.321-.477c-1.725 0-3.09-.627-3.127-2.708v-4.89h4.823v4.755h12.614V397.93h-2.97v-2.788h2.97v-4.931h4.821v21.421zm4.4-13.593a20.213 20.213 0 0 1-5.967 4.912l-2.613-2.786c.028-.013 4.932-2.662 6.19-6.07h-5.324v-3.024h5.536v-1.423h4.359v1.423h5.536v3.031h-5.349c1.293 3.418 6.17 6.061 6.2 6.076l-2.6 2.78a20.282 20.282 0 0 1-5.97-4.917zm-26.211-.959a11.8 11.8 0 0 1-6.155 4.753l-2.285-2.82a9 9 0 0 0 6.185-8.811h4.51c-.192 6.892 6.184 8.811 6.184 8.811l-2.287 2.82a11.829 11.829 0 0 1-6.153-4.75zm9.394 4.75v-11.46h4.821v3.716h2.213v3.556h-2.213v4.188z' transform='translate(426.919 -382.184)' style='fill:%23fff;stroke:transparent;stroke-miterlimit:10'/%3E%3C/svg%3E%0A"); width: em(160); height: em(48); } } .h_inner{ height: rem(var.$headerH); padding-left: em(60); padding-right: em(60); @include flex.align-items('center'); position: relative; } svg{ .cw{ fill: #fff !important; color: #fff !important; } } .h_btns { position: relative; z-index: 2; margin-left: auto; @include flex.flex-box; @include flex.align-items('center'); li + li { margin-left: em(24); } .h_btn { font-size: em(14); height: em(38, 14); } #hSmart { color: #eee; font-size: em(14); border-radius: em(19, 14); padding: { left: em(18, 14); right: em(18, 14); } background-color: map-get(color.$colors, 1); svg { margin-left: em(8, 14); } &:hover { svg { -moz-animation-duration: .5s; -webkit-animation-duration: .5s; animation-duration: .5s; -moz-animation-name: moveArrow1; -webkit-animation-name: moveArrow1; animation-name: moveArrow1; -moz-animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -moz-animation-direction: alternate; -webkit-animation-direction: alternate; animation-direction: alternate; } } } .ch_fill { @include vendor(transition, 'all .3s'); } #hAllMenu { .line_2 { @include vendor(transition, 'transform .3s, fill .3s'); @include vendor(transform, 'translateX(-33.333%)'); } &.on, &:hover { .line_2 { width: 100% !important; @include vendor(transform, 'translateX(0)'); } } } } @include tab{ &{ } } @include mob{ &{ height:rem(80); } .h_inner { height:rem(80); padding-left: rem(16); padding-right: rem(16); } .logo a { width: rem(140); height: rem(32); } #hSmart { display: none; } } } #gnb { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; & > ul { width: em(875); height: 100%; margin-left: auto; margin-right: auto; @include flex.flex-box; @include flex.align-items('center'); @include flex.justify-content('center'); @include vendor(transition, 'width .3s'); @at-root { #header.on { height: em(370); #gnb { border-bottom: 1px solid #dddddd; & > ul { width: em(1100); max-width: em(1100); min-width: em(875); @include pc-large { width: 60vw; } } } } } @at-root { #header.on { .depth2 { visibility: visible; opacity: 1; } } } } .depth1, .depth2 { color: #fff; } .depth1 { @include flex.flex-box; @include flex.align-items('center'); @include flex.justify-content('center'); width: 16.66666666666667%; position: relative; height: 100%; font-size: em(20); &:hover { & > a { color: map-get(color.$colors, 1);} } &:last-child { .depth2::after { content:''; display: block; position: absolute; top: 0; right: -1px; border-left: 1px solid #dddddd; height: 300%; } } a { @include flex.flex-box; @include flex.align-items('center'); @include flex.justify-content('center'); } .isset { & > a { &::after { content:''; display: block; width: em(8); height: em(8); margin-left: em(8); background-repeat: no-repeat; background-position: center center; background-size: cover; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath style='fill:%23666' d='M0,3h8v2H0V3z'/%3E%3Cpath style='fill:%23666' d='M3,0h2v8H3V0z'/%3E%3C/svg%3E%0A"); transition: background .5s; } } &.on { & > a::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath style='fill:%23666' d='M0,3h8v2H0V3z'/%3E%3C/svg%3E%0A"); } } } } .depth2 { font-size: em(16, 20); position: absolute; top: 100%; left: 0; width: 100%; visibility: hidden; opacity: 0; padding: { top: em(28); bottom: em(28); left: em(10); right: em(10); } @include vendor(transition, 'all .3s'); text-align: center; &::before { content:''; display: block; position: absolute; left: 0; top: 0; height: 300%; border-left: 1px solid #dddddd; } & > li:hover { & > a{ font-weight: bold; } } } .depth2, .depth3 { li { padding: { top: em(8); bottom: em(8); } } } .depth3 { display: none; font-size: 1em; letter-spacing: -.05em; color: #999; text-align: center; margin: { top: em(3); } li:last-child { padding-bottom: 0; } .isset > a::after { display: none; } } .depth4 { display: none !important; } @include pc-small { font-size: 0.9125rem; margin-left: em(-20, 14); & > ul { width: em(820); min-width: em(820); } @at-root { #header.on { #gnb { & > ul { max-width: em(1164); width: 64vw; } } } } } @include tab { display: none; } } #container.etc #header, #header.on, #header._fixed, #header.hover, #header.down, #header.__nsb, #header.__lsb{ // __nsb : no sub visual __lsb : left sub visual &{ background-color:#fff; // border-bottom: 1px solid rgba(255,255,255,0.2); border-bottom: 1px solid color.$color-border; color: #222; } .logo{ a{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='159.228' height='35.588' viewBox='0 0 159.228 35.588'%3E%3Cg data-name='Group 132'%3E%3Cpath data-name='Path 502' d='M-330.423 466.73c12.56-9.688 19.743-7.843 21-7.4a5.23 5.23 0 0 1 3.437 3.626c-.186-4.513-3.99-6.84-9.845-5.847-7.16 1.211-12.437 5.486-14.935 7.241a1.46 1.46 0 0 1-2.115-.168 1.459 1.459 0 0 1 .353-2.041s6.775-4.93 12.941-6.952c6.738-2.213 11.808.4 13.254 2.792-.341-1.082-1.947-6.069-9.957-5.568-6.535.409-14.216 5.783-15.123 6.354a1.364 1.364 0 0 1-1.74-.281 1.381 1.381 0 0 1 .188-2.066c1.123-1.049 9.89-6.554 16.791-6.65 5 .312 6.467 1.479 7.677 2.756 0 0-2.1-5.041-9.964-4.5-5.107.354-10.3 3.362-11.885 4.236a1.365 1.365 0 0 1-1.707-.457 1.43 1.43 0 0 1 .587-2.168s8.747-6.318 16.685-3.306a18.987 18.987 0 0 0-8.82-2.4 17.844 17.844 0 0 0-17.9 17.794 17.844 17.844 0 0 0 17.9 17.794 18.68 18.68 0 0 0 11.191-4.094c3.358-2.67 5.3-6.24 3.586-8.1-1.579-1.716-4.9-1.292-9.115.667a46.593 46.593 0 0 0-7.323 5.141 1.31 1.31 0 0 1-1.694-.071 1.4 1.4 0 0 1-.342-1.8 28.809 28.809 0 0 1 10.463-7c5.215-1.773 10.141-.855 10.169 2.475.869-4.414-4.829-7.231-12.214-3.768a49.561 49.561 0 0 0-9.914 6.156c-.059.049-1.168.96-2.036.026a1.594 1.594 0 0 1 .411-2.422zm12.737 3.7c3.1-1.755 6.239-2.352 7-1.328s-.887 3.438-3.991 5.2-6.142 2.118-6.909 1.1.789-3.215 3.9-4.966z' style='fill:%23007cc5' transform='translate(341.503 -443.934)'/%3E%3Cg data-name='Group 131'%3E%3Cpath data-name='Path 503' d='M-185.155 462.373c-2.511-1.793-4.317-1.805-6.664-2.311-2.31-.5-4.106-1.182-3.966-2.976a2.565 2.565 0 0 1 2.637-2c2.1 0 3.264.7 3.449 2.049a6.431 6.431 0 0 1 .04.829h5.991c0-4.012-2.7-6.672-8.816-6.672-3.242 0-9.5.96-9.5 6.433a5.437 5.437 0 0 0 1.864 4.244c1.243 1.111 3.707 2 6.612 2.67a8.453 8.453 0 0 1 3.394 1.272 2.023 2.023 0 0 1 .737 1.529c0 .712-.686 2.4-3.094 2.4a4.149 4.149 0 0 1-3.281-1.26 4.428 4.428 0 0 1-.84-2.25l-5.8.04a8.027 8.027 0 0 0 2.21 5.306c1.4 1.441 4.1 2.163 7.735 2.163 8.685 0 9.282-5.657 9.282-7.068a5.623 5.623 0 0 0-1.988-4.39z' transform='translate(342.395 -443.934)' style='fill:%232164ab'/%3E%3Cpath data-name='Path 504' d='M-205.474 456.712v-4.835h-17.254v21.5h17.254v-4.837h-11.063v-4h10.3v-3.825h-10.3v-4z' transform='translate(342.235 -443.934)' style='fill:%232164ab'/%3E%3Cpath data-name='Path 505' d='M-292.57 458.271a11.777 11.777 0 0 0 6.127 4.729l2.277-2.807s-6.349-1.911-6.158-8.774h-4.491a8.961 8.961 0 0 1-6.159 8.774L-298.7 463a11.756 11.756 0 0 0 6.128-4.732z' style='fill:%232164ab' transform='translate(341.674 -443.934)'/%3E%3Cpath data-name='Path 506' d='M-278.414 451.589h-4.8V463h4.8v-4.17h2.2v-3.541h-2.2v-3.7z' transform='translate(341.79 -443.934)' style='fill:%232164ab'/%3E%3Cpath data-name='Path 507' d='M-299.311 470.392c0 1.9 1.081 2.92 3.276 2.92h17.556v-8.55h-20.832v5.63zm4.8-2.881h11.254v3.049h-11.254v-3.049z' transform='translate(341.674 -443.794)' style='fill:%232164ab'/%3E%3Cpath data-name='Path 508' d='M-231.79 466.825h-12.34V462.2h9.33v-7.67c0-2.74-2.982-2.586-3.432-2.586h-10.48v3.378h9.113v3.948h-9.332v8.317c.029 1.823 1.293 2.616 3.213 2.616h13.928v3.249h4.8v-21.863h-4.8v15.236z' transform='translate(342.066 -443.934)' style='fill:%232164ab'/%3E%3Cpath data-name='Path 509' d='M-256.6 451.429v4.943h-2.958v2.8h2.958v10.878h-12.561v-4.766h-4.8v4.9c.037 2.086 1.4 2.715 3.115 2.715h19.046v-21.47z' transform='translate(341.878 -443.934)' style='fill:%232164ab'/%3E%3Cpath data-name='Path 510' d='M-266.468 459.225a20.191 20.191 0 0 0 5.945 4.891l2.593-2.768c-.032-.014-4.888-2.646-6.177-6.05h5.323v-3.012h-5.516v-1.417h-4.341v1.417h-5.512v3.014h5.3c-1.253 3.393-6.137 6.031-6.165 6.044l2.6 2.774a20.107 20.107 0 0 0 5.941-4.891z' transform='translate(341.86 -443.934)' style='fill:%232164ab'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A") !important; } } .h_btn { .ch_fill {fill: #222 !important; } } #gnb { @include vendor(transition, 'border .3s'); .depth1, .depth2 { color: #222; } } @include tab{ border-bottom: 1px solid #e5e5e5; } @include mob{ svg{ path{ fill: #111 !important; color: #222 !important; } } } } @include pc-large{ #header { .h_inner { padding: { left: 1.25rem; right: 1.25rem; } } } #header.on{ .gnb{ &_depth_1{ > ul{ padding: { left:0; right: 0; }; } } } } } @include mob { #header.__lsb { &:not(._fixed) { background-color: rgba(255,255,255,0); background-color: inherit; border-bottom: 1px solid rgba(255,255,255,0.2); .logo { a { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='36.573' viewBox='0 0 160 36.573'%3E%3Cpath d='M-426.419 400.47a17.835 17.835 0 0 1 17.89-17.787 18.988 18.988 0 0 1 8.817 2.4c-7.935-3.01-16.678 3.3-16.678 3.3a1.43 1.43 0 0 0-.587 2.167 1.365 1.365 0 0 0 1.705.458c1.58-.873 6.776-3.881 11.88-4.233 7.861-.546 9.96 4.494 9.96 4.494-1.211-1.277-2.678-2.442-7.674-2.755-6.9.1-15.662 5.6-16.784 6.646a1.381 1.381 0 0 0-.188 2.065 1.363 1.363 0 0 0 1.739.281c.906-.571 8.584-5.943 15.116-6.352 8.007-.5 9.613 4.484 9.953 5.566-1.444-2.394-6.513-5-13.248-2.791-6.161 2.022-12.935 6.948-12.935 6.948a1.46 1.46 0 0 0-.352 2.041 1.458 1.458 0 0 0 2.113.166c2.5-1.753 7.772-6.027 14.929-7.237 5.853-.991 9.656 1.334 9.842 5.844a5.228 5.228 0 0 0-3.436-3.624c-1.252-.44-8.432-2.283-20.987 7.4a1.593 1.593 0 0 0-.409 2.421c.867.934 1.976.024 2.035-.024a49.563 49.563 0 0 1 9.91-6.155c7.382-3.461 13.078-.646 12.21 3.767-.029-3.329-4.953-4.246-10.166-2.474a28.823 28.823 0 0 0-10.459 7 1.4 1.4 0 0 0 .342 1.8 1.311 1.311 0 0 0 1.693.07 46.626 46.626 0 0 1 7.32-5.138c4.214-1.957 7.533-2.382 9.111-.667 1.71 1.856-.227 5.423-3.584 8.094a18.675 18.675 0 0 1-11.186 4.092 17.836 17.836 0 0 1-17.892-17.783zm23.806 8.693c-3.106 1.75-4.663 3.939-3.895 4.964s3.8.655 6.905-1.1 4.759-4.169 3.989-5.193a1.759 1.759 0 0 0-1.454-.5 12.608 12.608 0 0 0-5.545 1.83zm118.105 1.243a7.976 7.976 0 0 1-2.22-5.3l5.824-.039a4.409 4.409 0 0 0 .844 2.245 4.182 4.182 0 0 0 3.294 1.257c2.418 0 3.107-1.682 3.107-2.394a2.012 2.012 0 0 0-.74-1.526 8.5 8.5 0 0 0-3.408-1.269c-2.917-.668-5.392-1.556-6.64-2.665a5.41 5.41 0 0 1-1.871-4.235c0-5.463 6.287-6.42 9.541-6.42 6.147 0 8.853 2.655 8.853 6.659h-6.016a6.45 6.45 0 0 0-.039-.827c-.186-1.348-1.352-2.042-3.464-2.044a2.573 2.573 0 0 0-2.649 2c-.14 1.791 1.663 2.471 3.984 2.97 2.356.505 4.17.518 6.691 2.308a5.593 5.593 0 0 1 2 4.381c0 1.408-.6 7.053-9.322 7.053-3.654.005-6.361-.715-7.769-2.153zm-31.739 1.778v-3.242h-13.987c-1.927 0-3.2-.791-3.226-2.609v-8.3h9.372V394.1h-9.151v-3.371h10.523c.452 0 3.443-.153 3.447 2.58v7.658h-9.37v4.61h12.392v-15.2h4.819v21.814zm-64.515 0c-2.2 0-3.29-1.023-3.29-2.933V403.6h20.919v8.585zm1.535-2.764h11.3v-3.06h-11.3zm72.08 2.687V390.66h17.326v4.824h-11.109v3.992h10.339v3.816h-10.339v3.992h11.109v4.824zm-48.321-.477c-1.725 0-3.09-.627-3.127-2.708v-4.89h4.823v4.755h12.614V397.93h-2.97v-2.788h2.97v-4.931h4.821v21.421zm4.4-13.593a20.213 20.213 0 0 1-5.967 4.912l-2.613-2.786c.028-.013 4.932-2.662 6.19-6.07h-5.324v-3.024h5.536v-1.423h4.359v1.423h5.536v3.031h-5.349c1.293 3.418 6.17 6.061 6.2 6.076l-2.6 2.78a20.282 20.282 0 0 1-5.97-4.917zm-26.211-.959a11.8 11.8 0 0 1-6.155 4.753l-2.285-2.82a9 9 0 0 0 6.185-8.811h4.51c-.192 6.892 6.184 8.811 6.184 8.811l-2.287 2.82a11.829 11.829 0 0 1-6.153-4.75zm9.394 4.75v-11.46h4.821v3.716h2.213v3.556h-2.213v4.188z' transform='translate(426.919 -382.184)' style='fill:%23fff;stroke:transparent;stroke-miterlimit:10'/%3E%3C/svg%3E%0A") !important; } } #hAlrim { .ch_fill { fill: #fff !important; } } #hAllMenu { .ch_fill { fill: #fff !important; } } } } } #header.down{ transform: translateY(-250%); } @include print() { .header{ position: absolute; } } @-webkit-keyframes moveArrow1 { 0% { @include vendor(transform, 'translate3d(0%, 0%, 0%)'); } 100% { @include vendor(transform, 'translate3d(15.01%, -15.01%, 0.01%)'); } } @-ms-keyframes moveArrow1 { 0% { @include vendor(transform, 'translate3d(0%, 0%, 0%)'); } 100% { @include vendor(transform, 'translate3d(15.01%, -15.01%, 0.01%)'); } } @-o-keyframes moveArrow1 { 0% { @include vendor(transform, 'translate3d(0%, 0%, 0%)'); } 100% { @include vendor(transform, 'translate3d(15.01%, -15.01%, 0.01%)'); } } @keyframes moveArrow1 { 0% { @include vendor(transform, 'translate3d(0%, 0%, 0%)'); } 100% { @include vendor(transform, 'translate3d(15.01%, -15.01%, 0.01%)'); } } // @-webkit-keyframes moveArrow1 { // 100% { // // @include vendor(transform, 'translate(10%, -10%)'); // } // }