/* 기존 css */ /******************************* ���� ����� ******************************* / /* ���� :: ���־� */ th[data-view="file"] + td ul li a{line-height:1em;} .wrap {width:1480px;} .wrap_wade {width:1920px;} .scrolldown {position:absolute; z-index:9; transform:translateX(-50%); background:url("../images/main/btn-scroll.png") no-repeat center / cover; width:60px; height:33px; animation:scrollDown 1.4s ease 0s infinite; font-size:0px; bottom:50px;left:50%;pointer-events: none;cursor: default;} .scrolldown em {display:none;} #skip_nav {display:none; } /********************** header **********************/ #header {position:absolute; top:0px; z-index:99; width:100%; transition:top 1s .2s, border .3s; } #header:after {position:absolute; top:80px; content:""; display:none; width:100%; height:1px; background-color:rgba(256,256,256,0.3); } #header h1 {position:absolute; top:10px; left:90px; width:170px; height:60px; z-index:10; } #header h1 > a{display:block; width:100%; height:100%; background:url(../images/main/logo.gif) no-repeat 0 50%; background-size:contain; font-size: 0; text-indent: 100%;} #header .area_util {position: absolute; top:24px; right:70px; display:block;} #header .area_util ul{display: block; padding-top: 6px; width:auto; height: 38px;} #header .area_util ul li{position:relative; float:left;} #header .area_util ul li a {position:relative; padding:10px 15px; font-size:14px; font-weight:400; color:rgba(255,255,255,0.8); transition:all 0.3s ease-out 0s;} #header .area_util ul li.family a {background-color:#fff; color:#b12c2f; border-radius:40px; padding:10px 25px;} #header .area_util ul li.family a:hover {color:#222;} #header .area_util ul li a:hover{color:rgba(255,255,255,1);} #header .area_util ul li a:after{content:""; position:absolute; opacity:0.2; top:50%; margin-top:-6px; left:0; width:1px; height:11px; background:#fff;} #header .area_util ul li:first-child a:after{background:none !important;} #header .area_util ul li a + i{position:absolute; opacity:0; top:50px; left:50%; padding:8px 20px; font-weight:400; font-size:12px; transition:all 0.3s ease-out 0s; transform:translateX(-50%); background-image:linear-gradient(-60deg, #f8d362, #00974a); border-radius:4px;} #header .area_util ul li a:hover + i{opacity:1; top:35px;} #header .area_util ul li a:hover + i:after{content:""; position:absolute; top:-5px; left:50%; width:0; height:0; border-right:5px solid transparent; border-bottom:5px solid #e36f3d; border-left:5px solid transparent; transform:translateX(-50%);} #header .area_util > a { position: absolute; top:-20px; right:0; padding:43px 26px; transition:background 0.3s ease 0s; z-index:999;} #header .area_util > a i{display:block; position:relative; font-size: 0px; text-indent: 100%;} #header .area_util > a div{position:absolute; top:32px; left:50%; margin-left:-20px; width:40px; height:16px;} #header .btn_menu{transition:all 0.3s ease 0s;} #header .btn_menu div > span{display:block;position:absolute;left:0px;width:40px;height:2px;background:#fff;} #header .btn_menu div > span:nth-of-type(1){top:0;} #header .btn_menu div > span:nth-of-type(2){top:50%; margin-top:-1px; transition:background 0.3s ease 0s;} #header .btn_menu div > span:nth-of-type(3){top:15px;} #header .btn_menu div > span:nth-of-type(1), #header .btn_menu div > span:nth-of-type(3){transition:all 0.3s ease; transition-property:top, transform; transition-delay:0.3s, 0s;} #header .btn_menu.active div{top:43px;} #header .btn_menu.active div > span:nth-of-type(1){top:10px; transform:rotate(-45deg);} #header .btn_menu.active div > span:nth-of-type(2){background:transparent;} #header .btn_menu.active div > span:nth-of-type(3){top:10px; transform:rotate(45deg);} #header .btn_menu.active div > span:nth-of-type(1), #header .btn_menu.active div > span:nth-of-type(3){transition-delay:0s, 0.3s;} #header .btn_close{position:fixed; opacity:0; visibility:hidden; top:0px; left:0px; z-index:99; width:-webkit-calc(100% - 320px); width:100%; height:-webkit-calc(100vh - -0px * 1); height:calc(100vh - -0px * 1); background:#000; font-size:0; transition:all 0.3s ease-out 0s; z-index:50;} .active #header .btn_close{opacity:0.4; visibility:visible;} .active #header .area_util ul{display:none;} .active .all_menu .cate{opacity:1; visibility:visible; height:100vh; z-index:50; position:Relative; } .active .all_menu .cate > ul{opacity:1;transition: all 1.3s ease-out 0.4s;} .active .all_menu .cate .gnb{transform:translateY(0px);} #header nav {display:block; position:absolute; top:0; left:50%; margin-left:-400px; z-index:10; } #header nav .gnb > li{display:inline-block; position:relative; padding:0px 60px;} #header nav .gnb > li:last-child:after{background:none;} #header nav .gnb > li > a{display:inline-block; font-size:20px; line-height:80px; color:black; transition:all 0.3s ease-out 0s;} #header nav .gnb > li > a > i{display:none;} #header nav .gnb > li > a:hover{color:#a31f23;} #header nav .gnb > li > a.on{color:#a31f23;} /* ����� �޴� */ .all_menu{position:fixed; visibility:hidden; bottom:0; left:0; z-index:999; width:100%; height:100%; background:#fff; transition:transform 0.9s cubic-bezier(0.6,0.05,0.01,0.99);} .all_menu > div{position:absolute; float:left; height:100vh; transition:all 1.3s cubic-bezier(0.165, 0.84, 0.44, 1);} .all_menu .cate{position:relative; opacity:0; top:0;left:0; width:-webkit-calc(100% - 190px); width:calc(100% - 290px); height:0; background:#fff; transition-delay:0.3s;} .all_menu .cate .inr{position:absolute; right:50px; bottom:50px;} .all_menu .cate .inr li em{display:block; margin-bottom:17px; font-weight:900; font-size:17px; color:#222; letter-spacing:-0.03rem;} .all_menu .cate .inr li p{line-height:1.6; font-size:14px;} .all_menu .cate .inr li{float:left; padding:0 40px;} .all_menu .cate .inr li:first-child{border-right:1px solid #ddd;} .all_menu .cate .inr li p i{display:block; color:#a31f23;} .all_menu .cate .gnb{margin:36vh 10px 0 90px;transform: translateY(-90px);} .all_menu .cate .gnb > li{float:left; width:20%;} .all_menu .cate .gnb > li > a > p{display:none;} .all_menu .cate .gnb > li > a {font-weight:800; font-size:35px; color:#222; letter-spacing:-0.02em;} .all_menu .cate .gnb > li > a:hover {color:#b50b1a; } .all_menu .cate .gnb > li ul li a {display:block; padding:6px 4px; font-family:Noto Sans KR , Sans-serif; font-weight:400; color:#666;} .all_menu .cate .gnb > li ul li a:hover {color:#000;} .all_menu .cate .gnb > li > ul{margin-top:20px;} .all_menu .cate > ul{opacity:0; transition:all 0.3s ease-out 0s;} /* ���� */ #header .f_select {position:absolute; top:-10px; right:120px; z-index:99; } #header .f_select .f_select_box{position:relative; z-index:1; } #header .f_select .f_select_btn{padding:15px 20px 15px 12px; color:black; text-align:left; outline:0; transition:all 0.3s ease-out 0s; background:none;} #header .f_select .f_select_btn span{display:block; position:relative; padding-right:20px; font-size:15px; font-weight:400;} #header .f_select .f_select_list{display:none; overflow-y:auto; position:absolute; top:100%; left:0; width:100%; max-height:155px; padding:10px 0; background:#fff; z-index:888; border-radius:20px;} #header .f_select .f_select_list li a{display:block; padding:9px 23px; color:#999; font-size:13px; font-weight:500; transition:all 0.3s ease-out 0s;} #header .f_select .f_select_list li a:hover{color:#222;} #header .f_select .f_select_list li a > img{display: inline-block; margin:-2px 0 0 5px; vertical-align: middle; width:16px; height: 16px;} #header .f_select .f_select_btn:after{content:""; position:absolute; top:50%; right:12px; margin-top:-3px; width:12px; height:7px; background:url(../images/main/box_arrow.png) no-repeat 0 0; transform:rotate(0deg); vertical-align:middle; transition:transform 300ms ease-out;} #header .f_select .f_select_btn.on:after{transform:rotate(180deg);} /* ���� ������ ǥ��*/ .main.on #header{top:-80px;} .main.on a.btn_contact{background:#cdc07c;} .main.on#header .btn_menu.active i{font-weight:800; color:#222;} .main.on#header .btn_menu.active div > span{background:#222;} /* footer */ #footer {position:Relative; background-color:#1b1c2c; z-index:888; margin-top:80px;} #footer .inr{ width:1500px; margin:0 auto; } #footer > .inr{padding:40px 0;} #footer h1 img{height:43px;} #footer div[data-footer]{position:relative; float:left;} #footer div[data-footer="00"] > ul {border-bottom:1px solid rgba(256,256,256,0.3); padding-bottom:10px; } #footer div[data-footer="00"] > ul li, #footer div[data-footer="00"] > div > ul li{float:left; margin-right:5px;} #footer div[data-footer="00"] ul{overflow:hidden;} #footer div[data-footer="00"] {width:100%; margin-top:0px; } #footer div[data-footer="00"] > ul li > a {position:Relative; display:block; padding:3px 15px; font-weight:300; color:#fff; border-radius:4px;} #footer div[data-footer="00"] > ul li > a:hover {opacity:0.6} #footer div[data-footer="00"] > ul li > a:before{ content: ""; position: absolute; opacity: 0.2; top: 50%; margin-top: -6px; left: 0; width: 1px; height: 11px; background: #fff;} #footer div[data-footer="00"] > ul li:first-child > a:before {display:none;} #footer div[data-footer="00"] > div {margin-top:30px; color:#fff; font-weight:300; line-height:1.5em; padding-right:250px; } #footer .copy {/*padding:2em 0;*/ color:#fff; font-weight:300; line-height:1.5em; } .sub #footer{padding:10px;} .color #header nav .gnb > li > a{color:#222;} .color #header .area_util{background:#fffcf5;} .color #header h1 img:last-child{display:block;} .color #header h1 img:first-child{display:none;} /*기업정보footer*/ #footer67 {position:Relative; background-color:#1b1c2c; z-index:888; margin-top:0;} #footer67 .inr{ width:1500px; margin:0 auto; } #footer67 > .inr{padding:40px 0;} #footer67 h1 img{height:43px;} #footer67 div[data-footer]{position:relative; float:left;} #footer67 div[data-footer="00"] > ul {border-bottom:1px solid rgba(256,256,256,0.3); padding-bottom:10px; } #footer67 div[data-footer="00"] > ul li, #footer67 div[data-footer="00"] > div > ul li{float:left; margin-right:5px;} #footer67 div[data-footer="00"] ul{overflow:hidden;} #footer67 div[data-footer="00"] {width:100%; margin-top:0px; } #footer67 div[data-footer="00"] > ul li > a {position:Relative; display:block; padding:3px 15px; font-weight:300; color:#fff; border-radius:4px;} #footer67 div[data-footer="00"] > ul li > a:hover {opacity:0.6} #footer67 div[data-footer="00"] > ul li > a:before{ content: ""; position: absolute; opacity: 0.2; top: 50%; margin-top: -6px; left: 0; width: 1px; height: 11px; background: #fff;} #footer67 div[data-footer="00"] > ul li:first-child > a:before {display:none;} #footer67 div[data-footer="00"] > div {margin-top:30px; color:#fff; font-weight:300; line-height:1.5em; padding-right:250px; } #footer67 .copy {/*padding:2em 0;*/ color:#fff; font-weight:300; line-height:1.5em; } .sub #footer67{padding:10px;} .color #header nav .gnb > li > a{color:#222;} .color #header .area_util{background:#fffcf5;} .color #header h1 img:last-child{display:block;} .color #header h1 img:first-child{display:none;} /* btn top */ .scroll_path {display:none; } @media screen and (max-width:1280px){ #header .area_util > a {display:block; position: fixed; top:0; right:85px; padding:40px 50px; transition:background 0.3s ease 0s;} .scroll_path {display:block; position:fixed; right:0; bottom:0; z-index:99; width:61px; height:61px; } .scroll_path a {display:block; width:100%; height:100%; background:url(../images/common/btn-top.png) no-repeat center center; font-size:0px; } } @media screen and (max-width:1919px){ .all_menu .cate .gnb{margin:36vh 10px 0 50px;} } @media screen and (max-width:1650px){ #header h1{top:10px; left:50px;} #header nav{display:block; position:absolute; top:0px; left:50%; margin-left:-350px;} #header nav .gnb > li{padding:0 40px;} #header .area_util{right:30px;} #header .f_select {position:absolute;top:-10px;right:70px;z-index:99;} #header .area_util > a{right:0px;} #header .btn_menu div > span:nth-of-type(3){top:14px;} /* .sub #header .area_util > a{ position: absolute; top:-20px; right:-20px; padding:43px 66px; transition:background 0.3s ease 0s; z-index:999;} */ } @media all and (max-width:1580px){ .all_menu .info{width:520px;} .all_menu .cate{width:-webkit-calc(100% - 140px); width:calc(100% - 140px);} .all_menu .cate .gnb > li > a{font-size:1.8em;} .all_menu .cate .inr{right:10px;} #footer > .inr{width:auto; padding:40px 60px;} #footer .copyright .inr{width:auto; margin:0 60px;} .nodata{padding:100px 0;} } @media all and (max-width:1280px){ #header .area_util{right:110px;} /*.sub #header .area_util > a{ position: absolute; top:-20px; right:-60px; padding:43px 26px; transition:background 0.3s ease 0s; z-index:999;}*/ #header .f_select {position:absolute;top:-10px;right:0px;z-index:99;} #header nav{display:none;} p, li, a{font-size:15px;} a.btn_basic{padding:12px 25px; min-width: inherit;} #header .btn_menu.active i{font-weight:800; color:#222;} #header .btn_menu.active div > span{background:#222;} .all_menu .info{display:none;} .all_menu .cate{width:100%;} #footer > .inr{padding:40px 40px;} #footer p {padding-right:200px;} #footer .f_select{top:70px; bottom:auto;} #footer .f_select .f_select_btn{padding:13px 70px 13px 13px;} } @media all and (min-width:1024px){ #header nav .gnb > li ul{display:none; position:absolute; opacity:0; visibility:hidden; top:50px; right:-25px; min-width: 170px; width:100%; padding:9px 12px; background:#fff; border:1px solid #444; box-shadow:15px 20px 29px 0px rgba(0, 0, 0, 0.23); transition:all 0.4s ease-out; transition-property:opacity, top, visibility; transition-delay:0s, 0s, 0s;} #header nav .gnb > li ul.active{display:block; transition-delay:0.1s;} #header nav .gnb > li.active ul{opacity:1; visibility:visible; top:80px; z-index:10; transition-delay:0s, 0s, 0s;} #header nav .gnb > li ul > li > a{display:block; position:relative; padding:11px 11px; background:#fff; border-top:1px solid #e1e1e1; font-size:15px; color:#404040; text-align:left; transition:all 0.3s ease 0s;} #header nav .gnb > li ul > li > a:hover{opacity:0.5;} #header nav .gnb > li ul > li:first-child > a{border-top-width:0px;} #header nav .gnb > li ul > li.active > a{color:#222;} } @media all and (max-width:1023px){ #header{top:3px;} #header h1{left:40px;} #header h1 img{height:36px;} #header .btn_menu, #header .btn_close{display:block;} #header .btn_menu.active div{top:27px;} #header .btn_menu.active div > span{background:#222;} #header .btn_menu div > span{width:100%;} #header .btn_menu div > span:nth-of-type(2){top:38%;} #header .btn_menu div > span:nth-of-type(3){top:10px;} .color #header .btn_menu div > span{background:#222;} #header .area_util{position:absolute; right:60px;} #header .area_util > a {top:2px; padding:0;} #header .area_util > a i {display:none;} #header .area_util > a div{top:35px; right:16px; left:auto; width:23px; height:17px;} .all_menu .cate .gnb{margin:18vh 10px 0 50px;} .all_menu .cate .gnb > li {float:none; display:inline-block; margin-bottom:40px; width:48%; vertical-align:top; } .all_menu .cate .gnb > li > a{font-size:1.4em;} #footer > .inr{padding:40px 30px;} #footer h1 img{height: 34px;} #footer div[data-footer="00"]{margin-top: 0;} #footer div[data-footer="00"] > div, #footer div[data-footer="00"] > div > ul > li{width:100%; margin-right:0; padding-right:0;} #footer div[data-footer="00"] > div > ul li:after{display:none;} #footer div[data-footer="00"] > ul li > a{padding:5px 21px; } #footer div[data-footer="00"] > div > ul li:nth-child(5){margin-top:0;} #footer div[data-footer="01"]{margin:0;} #footer p {padding-right:0px;} #footer .f_select{position:relative; float:left; top:auto; right:auto; bottom:auto; margin:20px 0px;} #footer .f_select .f_select_list li a{padding:6px 20px;} #footer .f_select .f_select_box{bottom:0px;} #footer .f_select .f_select_btn{padding:14px 90px 14px 20px;} #footer .f_select .f_select_btn span{font-size:12px; letter-spacing:0.2px;} #footer .f_select .f_select_btn:after{right:20px;} .sub #footer{padding:0px 0; margin-top:40px;} } @media all and (max-width:767px){ body, p, li, a{font-size:14px;} a.btn_basic.v2, a.btn_basic{padding:17px 25px; font-size:13px;} #header{top:13px;} #header:after { top: 50px; ;} #header h1 {top:0; left:10px; width:40px; height:33px;} #header h1 a {width:auto; height:33px; background-size:auto 100%; background-position:0 0;} #header h1 img{height:32px;} #header .area_util{top:6px; right:0;} #header .area_util ul{padding:0; width:auto; background-color: transparent; border-radius: 0;} #header .area_util ul li a{padding:4px 10px; font-size: 12px;} #header .area_util ul li a:after{top:5px; width:3px; height: 3px; border-radius: 50%;} #header .area_util ul li.family a {background-color:#fff; color:#b12c2f; border-radius:40px; padding:4px 15px;} #header .area_util ul li.family a:hover {color:#222;} /*.sub #header .area_util > a{ position: absolute; top:-15px; right:-0px; padding:43px 6px; transition:background 0.3s ease 0s; z-index:999;}*/ #header .f_select {position:absolute;top:-15px;right:40px;z-index:99;} #header .area_util > a div{top:22px;} #footer > .inr{padding:30px 20px;} #footer .copyright{padding:10px 0; font-size:12px;} #footer .copyright > div{width:auto; padding:0 20px;} #footer div[data-footer="00"] > ul {text-align:center;} #footer div[data-footer="00"] > ul li, #footer div[data-footer="00"] > div > ul li {float:none; display:inline-block; margin-right:5px; text-align:center;} #footer div[data-footer="01"] p{font-size:12px;} #footer .copyright .inr{margin:0;} #footer div[data-footer="00"]{margin-top:0px; width:100%;} #footer div[data-footer="00"] > div > ul li *{font-size:13px;} #footer div[data-footer="00"] > ul li > a{padding:5px 14px;} #footer div[data-footer="00"] > div > ul li *{font-weight:400; color:#888;} #footer .f_select .f_select_btn{padding:14px 80px 14px 20px;} #footer p br{display: block;} .scroll_path{right:0; bottom:0; width:50px; height:50px;} .scroll_path::after, .on .fix .scroll_path::after{width:12px; margin-left:-6px;} .scrolldown {width:30px; height:16px; bottom: 20px;} } @media all and (max-width:500px){ #header nav{position:fixed; top:0px; right:-100%; z-index:998; width:100%; height:100%; margin:0; background:#fff;} #header nav.active {display:block; width:100%; left:auto; right:0px !important; box-shadow:-5px 0px 15px rgba(0,0,0,0.1); transition:all 1s cubic-bezier(0.165, 0.84, 0.44, 1); overflow-y:auto;} #header nav .gnb{top:90px; text-align: center;} #header nav .gnb > li{display:block;} #header nav .gnb{position:absolute; top:60px; right:0px; width:100%; } #header nav .gnb > li{padding:0;} #header nav .gnb > li > a{display:block; padding:0px 0; font-size:21px; color:#111; transition:all 0.3s ease 0s; font-weight:600; line-height:50px;} #header nav .gnb > li ul{display:none; padding:0px 0 20px; } #header nav .gnb > li ul > li > a{display:block; padding:5px 0px; font-size:15px;} #header nav .gnb > li ul li.active a{color:#00974a;} #header nav .gnb > li > a.on{color:#00974a;} #header nav .gnb > li > a p{font-weight:600; font-size:21px; letter-spacing:-0.03em;} #header nav .gnb > li:hover > a{opacity:1; color:#111;} #header nav:after{content:""; opacity: 0.5; position:absolute; top:0; left:0; z-index:-1; width:100%; height:100%; background:#fff url(/images/common/img_mark.svg) no-repeat 89% 90%; background-size:70%;} .all_menu{display:none;} } @keyframes scrollDown{ 0%{opacity:0;} 100%{opacity:1;} } @keyframes scrollDown02{ 0%{transform: scale(1); opacity: 0.2;} 40%{opacity: 0.2;} 100%{transform: scale(2); opacity: 0;} } @keyframes spotscales { 0%{opacity:1; transform:scale(0);} 40%{opacity:0.1; transform:scale(4);} 100%{opacity:0; transform:scale(0);} } .visual-img {position:relative; width:100%; height:100vh; overflow:hidden; padding:0px; margin:0px; } .visual-img .slick-list .slick-slide {position:Relative; width:100%; height:100%; padding:0px; margin:0px; } .visual-img .visual-item {position:relative; width:100%; min-height:100vh; padding:0px; overflow:hidden; display:block; margin:0px; } .visual-img .visual-item > .img-area {z-index:1; position:absolute; left:0px; top:0px; width:100%; height:100%; display:block; -ms-transform: scale(1.2,1.2); /* IE 9 */ -o-transform: scale(1.2,1.2); /* IE 9 */ -moz-transform: scale(1.2,1.2); /* IE 9 */ -webkit-transform: scale(1.2,1.2); /* Chrome, Safari, Opera */ transform: scale(1.2,1.2); -webkit-transition:transform 5000ms ease-in-out ; /* Safari */ -moz-transition:transform 5000ms ease-in-out ; /* Safari */ -o-transition:transform 5000ms ease-in-out ; /* Safari */ -ms-transition:transform 5000ms ease-in-out ; /* Safari */ transition:transform 5000ms ease-in-out ;} .visual-img .visual-item > .img-area.m_bg01 {background: url('../images/main/bg01.jpg') no-repeat center center; background-size:cover; } .visual-img .visual-item > .img-area.m_bg02 {background: url('../images/main/bg02.jpg') no-repeat center center; background-size:cover; } .visual-img .visual-txt { position: absolute; left: 10%; top: 0px; width: 80%; height: 100%; z-index: 10; text-align: center;} .visual-img .visual-inner-txt{ color:#fff; } .visual-img .visual-inner-txt h2,.visual-img .visual-inner-txt p {display:block; opacity:0;filter:Alpha(opacity=0); -moz-transition:all 0.5s; -ms-transition:all 0.5s; transition:all 0.5s;} .visual-img .visual-inner-txt h2 { transition-delay:0.2s; font-family:GmarketSansBold; font-size:6.4em; line-height:1em; } .visual-img .visual-inner-txt p {transition-delay:0.4s; font-family: 'GmarketSansLight'; padding:40px 0 15px; font-size:1.6em;} /* active */ .visual-img .visual-item.active > .img-area {-ms-transform: scale(1,1); /* IE 9 */ -o-transform: scale(1,1); /* IE 9 */ -moz-transform: scale(1,1); /* IE 9 */ -webkit-transform: scale(1,1); /* Chrome, Safari, Opera */ transform: scale(1,1);} .visual-img .active .visual-inner-txt h2, .visual-img .active .visual-inner-txt strong, .visual-img .active .visual-txt a{ opacity:1.0;filter:Alpha(opacity=100);} .visual-img .active .visual-inner-txt p{opacity:1;filter:Alpha(opacity=99);} @media all and (max-width:1200px){ .visual-img .visual-inner-txt h2{ font-size:4.4em;} } @media all and (max-width:768px){ .visual-img .visual-inner-txt h2{font-size:3.4em;} .visual-img .active .visual-inner-txt p {font-size:1.2em;} } @keyframes visualScale{ 0%{transform:scale(1.3) rotate(.001deg);} 100%{transform:scale(1) rotate(.001deg);} } /* //기존 css */ .visual-img .inner { position: absolute; z-index: 10; text-align: center; top: 50%; left: 50%; transform: translate(-50%, -50%);} /* 240329 add navi */ .navi{width:100%; position:fixed; z-index:9999;} .navi_sizein{min-width: 1300px; max-width: 1900px;margin: 0 auto; display:flex; justify-content: space-between; align-items: center;} /* 메인메뉴 */ .navi .mnb{display:flex; justify-content: space-between; flex-direction: column; width:100%; } .navi .mnb .mnb_top{display:flex; width:100%; position:relative;justify-content: space-around; } .navi .mnb .mnb_top li{width:100%;} .navi .mnb .mnb_top li a{color: #fff; text-align:center; font-size: 22px;width: 100%;padding: 25px 0;display: block;font-weight: 600; position: relative; overflow: hidden; } .navi .mnb .mnb_top li a:hover {color: #093e7a;} /* .navi .mnb .mnb_top li a:hover::after,.navi .mnb .mnb_top li a.active-menu::after{left:25%; height:1px; content:''; background:#093e7a; width:50%; position:absolute; bottom:0; z-index:9999;} */ .navi .mnb .mnb_top li a::after{content: '';background: #093e7a;width: 0%;height: 1px;position: absolute;bottom: 0;left: 50%; transition: width 0.5s ease, left 0.5s ease; } .navi .mnb .mnb_top li a:hover::after,.navi .mnb .mnb_top li a.active-menu::after {width: 50%;left: 25%; } .navi .mnb .mnb_top li a.active-menu {color: #093e7a;} /* 서브메뉴 */ .mnb_bottom{} .mnb_bottom_in {display: none; border-top:1px solid #e1e1e1; border-bottom:2px solid #111; } .mnb_bottom_in .mnb_bottom_ul li{width:100%; animation: dropSnb3 0.5s forwards; position:relative;} .mnb_bottom_in .mnb_bottom_ul li a{display:block; text-align:center; font-size:18px; color:#999; padding:15px 0;} /* .mnb_bottom_in .mnb_bottom_ul li:after{content:''; width:1px; height:50%; background:#ccc; position:absolute; top:25%; right:0;} */ .mnb_bottom_in .mnb_bottom_ul li a:hover{color:#093e7a;} .mnb_bottom_in .mnb_bottom_ul li a.s_active{color:#093e7a;} .navi .navi_sizein h1{width:30px; position:relative; z-index:999;} .navi .navi_sizein h1 img{width:100%;} /* 오른쪽 메뉴 */ .navi .right{display:flex; align-items: center; color:#fff;} .navi .right > li{text-align:center; margin-right:20px;} .navi .right .laguage{ position:relative; z-index:999;} .navi .right .laguage ul {display: none;position: absolute; left:0; background-color: #f9f9f9;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);padding: 12px 20px; border-radius:20px; z-index: 101; margin-top:10px; width:auto;} .navi .right .laguage ul > li{padding:5px 0;} .navi .right .laguage ul > li > a{font-size:13px; font-weight:600; color:#999; display:block;} .navi .right .laguage a:hover{background:#111; color:#fff; border:1px solid #111;} .navi .right .laguage ul > li > a{border-color:transparent;} .navi .right .laguage a{color:#fff; font-size:14px; font-weight:500; display:block; padding:3px 30px; border-radius:100px; border:1px solid #fff; font-family:'Noto Sans KR'; word-break: keep-all;} .navi .right .laguage.active ul {display: block;} .navi .right .all {cursor: pointer;display: flex;flex-direction: column;justify-content: space-around;width: 40px; height: 25px; margin:0 auto; z-index:999;} .navi .right .all span{display: block; height: 3px;width: 100%; background: #fff; transition: all 0.3s ease; } /* .navi 활성화 css */ .navi.active-bg {background-color: rgba(255, 255, 255, 0.9); } .navi.active-bg .mnb .mnb_top li a{color:#111;} .navi.active-bg .mnb .mnb_top li a:hover{color:#093e7a;} .navi.active-bg .mnb .mnb_top li a.active-menu {color: #093e7a;} .navi.active-bg .right .laguage a{color:#111; border-color:#111;} .navi.active-bg .right .laguage > ul > li a{border-color:transparent;} .navi:hover,.scroll-bg{background-color: rgba(255, 255, 255, 0.9); } .scroll-bg .right .laguage a{border-color:#111;} .scroll-bg .right .laguage a > ul > li > a{border-color:transparent;} .scroll-bg .mnb .mnb_top li a:hover{color:#093e7a;} .navi:hover .mnb .mnb_top li a,.scroll-bg .mnb .mnb_top li a,.scroll-bg .right .laguage a{color:#111; display:block;} .navi:hover .right .laguage > ul > li a{border-color:transparent;} .navi:hover .right .laguage a{color:#111; border:1px solid #111;} .navi:hover .right .laguage a:hover{color:#fff; border:1px solid #111;} .navi:hover .right .all span,.navi.active-bg .right .all span,.scroll-bg .right .all span{background:#111;} .sitemap{display:none; position:fixed; top:0; left:0; background:#fff; width:100%; height:100vh; animation: dropSnbDown 0.2s forwards;} .sitemap .sitemap_size_in{display:flex; align-items: center; justify-content: space-evenly; min-width: 320px; max-width: 1400px;margin: 0 auto; height:100%;} .sitemap .sitemap_in{ display:flex; justify-content: center; align-items: flex-start; justify-content: space-evenly; width:100%;} .sitemap .sitemap_in li{} .no-scroll {overflow: hidden;} /* .sitemap .mnb_title{font-size:34px; font-weight:600; text-align:center; } */ .sitemap .sitemap_in li a{color:#111; } .sitemap .sitemap_in li{width:100%; text-align:center; } .sitemap .sitemap_in li:hover a.mnb_title{color:#093e7a;} .sitemap .sitemap_in .snb{padding-top:20px;} .sitemap .sitemap_in .snb a{color:#ccc; font-size:18px; display:block; padding:10px 0;} .sitemap .sitemap_in li:hover .snb a:hover{color:#093e7a; } /* 메인 타이틀 스타일 */ .sitemap .sitemap_in li a.mnb_title {font-size: 28px;font-weight: 600;text-align: center;color: #111;position: relative;overflow: hidden; } .sitemap .sitemap_in li a.mnb_title::after {content: '';position: absolute;bottom: -10px;left: 50%;width: 0; height: 1px;background: #093e7a;transition: width 0.3s ease-out, left 0.3s ease-out; } .sitemap .sitemap_in li:hover a.mnb_title::after {width: 100%;left: 0;} /* .sitemap_flex{display:flex; justify-content: space-between;align-items: center;} */ /* 서브 navi */ .sub_navi,.sub_navi:hover,.sub_navi.active-bg{background-color: rgba(255, 255, 255, 1); } .sub_navi .mnb_bottom{background-color: rgba(255, 255, 255, 1); border-bottom:1px solid #efefef;} .sub_navi .right .laguage a{border-color:#111;} .sub_navi .right .laguage a > ul > li > a{border-color:transparent;} .sub_navi .mnb .mnb_top li a,.sub_navi .mnb .mnb_top li a,.sub_navi .right .laguage a{color:#111;} .sub_navi .right .laguage > ul > li a{border-color:transparent;} .sub_navi .right .laguage a{color:#111; border:1px solid #111;} .sub_navi .right .laguage a:hover{color:#fff; border:1px solid #111;} .sub_navi .right .all span,.sub_navi .right .all span,.sub_navi .right .all span{background:#111;} .navi .mnb .mnb_top li a.s_active{color: #093e7a;} .navi .mnb .mnb_top li .s_active::after{content: '';background: #093e7a;width: 0;height: 1px;position: absolute;bottom: 0;left: 0;transition: width 0.5s ease, left 0.5s ease;} .navi .mnb .mnb_top li .s_active::after{width: 50%;left: 25%; } .navi.active-bg .mnb .mnb_top li a{display:block;} .all.toggle span:nth-child(1) {transform: rotate(45deg) translate(5px, 5px);} .all.toggle span:nth-child(2) {opacity: 0;} .all.toggle span:nth-child(3) {transform: rotate(-45deg) translate(7px, -6px);} /* 서브 애니메이션 */ @keyframes dropSnb3 { 0% {visibility: hidden;opacity: 0;transform: translateY(-20px);} 100% {visibility: visible;opacity: 1;transform: translateY(0);} } /* 서브 애니메이션 */ @keyframes dropSnbDown { 0% {visibility: hidden;opacity: 0;transform: translateY(-50vh);} 100% {visibility: visible;opacity: 1;transform: translateY(0);} } @media (max-width: 1920px){ .navi_sizein{padding:0 30px;} } @media (max-width: 1300px){ .navi_sizein{padding:0 30px; min-width:320px;} .navi .mnb{padding:0 10px;} .navi .mnb .mnb_top li a{font-size:20px;} .mnb_bottom_in .mnb_bottom_ul li a{font-size:15px;} .sitemap .sitemap_in li a.mnb_title{font-size:24px;} .sitemap .sitemap_in .snb a{font-size:16px;} } @media (max-width: 920px){ .navi_sizein{padding:0 10px;} .navi .mnb{display:none;} .navi{padding:10px 0;} .mnb_bottom{display:none;} .sitemap .sitemap_size_in{align-items: flex-start} .sitemap .sitemap_in .snb{display:none; } .sitemap .sitemap_in{flex-direction: column; justify-content: flex-start; padding-top:80px; min-width: 95%; max-width: 95%; width:95%;} .sitemap .sitemap_in .snb a{padding:8px 0; font-size:16px;} .sitemap .sitemap_in li{text-align:left;} .sitemap .sitemap_in li a.mnb_title{font-size:20px; display:block; padding:10px 0; text-align:left; border-bottom:1px dashed #efefef;} .sitemap .sitemap_in .snb{padding-top:0;} .navi .right .laguage > a{font-size:14px; padding:3px 10px;} .navi .right > li{margin-right:5px;} }