/*Content CSS*/ #header_wrap { position:absolute; left:0; top:0; width:100%; height:90px; z-index:57; -webkit-transition:all .3s ease;-moz-transition: all .3s ease;-ms-transition: all .3s ease;-o-transition: all .3s ease; transition: all .3s ease; background-color: transparent; border-bottom:1px solid rgba(255,255,255,.2); } .trigger #header_wrap{position: fixed;} #header { position: relative; display: flex; justify-content: space-between; height: 100%; width: 100%; max-width: 100%; z-index:6; -webkit-transition:all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease;transition: all .3s ease; } #header .header-inner { position: relative; display: flex; justify-content: space-between; align-items: center; height:100%; margin:0 auto; z-index: 10; padding:0 50px; width:100%;} /* logo */ #logo {flex-shrink: 0;} #logo a {display: flex; align-items: center; justify-content: center; position: relative;} #logo a img {transition: opacity .3s; } #logo a img + img {opacity: 0; position: absolute; left:0; top:0; z-index: 2;} /* top_nav */ #top_nav { display: flex; height: 100%; border-color: #ddd;} #top_nav .gnb { list-style:none; display: flex; justify-content: flex-end; padding:0; height: 100%;} #top_nav .gnb > li { display:block; width:auto; text-align:center; height: 100%;} #top_nav .gnb > li { -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; height:100%; } #top_nav .gnb > li > a { display: flex; align-items: center; font-size:20px; height: 100%; color:#fff; font-weight: 500; transition: all .3s; white-space: nowrap; position: relative; padding: 0 34.5px;} /* full_menu */ #top_nav .full_menu {display: none; width: 100%; height: 226px; position: absolute; left:0; top:100%; overflow-x: auto; text-align: left;} #top_nav .full_menu::-webkit-scrollbar {width: 8px;} #top_nav .full_menu::-webkit-scrollbar-thumb { background-color: #aaa; border-radius: 10px; height: 15px; } #top_nav .full_menu::-webkit-scrollbar-track {background-color: #eee;} #top_nav .hd_inner{width: 100%; height: 100%; margin: 0 auto; display: flex; } #top_nav .gnb .snb { text-align: left; position: relative; z-index: 2; display: flex; flex-wrap: wrap; max-width: 90%;} #top_nav .gnb .snb > li { position: relative; display: block; width: 160px; margin-right: 70px; margin-bottom: 50px;} #top_nav .gnb .snb > li.long { width: initial;} #top_nav .gnb .snb > li.long a::after{margin-left: 30px;} #top_nav .gnb .snb > li > a { display: flex; align-items: center; font-weight: 500; font-size:16px; color:#000; line-height: 1.3; transition: all .3s; width: 100%; padding-bottom: 8px; border-bottom: 1px solid #ddd; justify-content: space-between;} #top_nav .gnb .snb > li > a::after {flex-shrink: 0; content: ''; display: block; width: 6px; height: 10px; transition:all .3s; background:url("../img/menu_arrow.png") 50%/contain no-repeat;} #top_nav .gnb .snb > li > a:hover {color: #04056b; border-bottom-color: #04056b; font-weight: 600;} #top_nav .gnb .snb > li > a:hover::after { background-image:url("../img/menu_arrow_hv.png") } #top_nav .gnb > li:nth-child(3) .snb > li{min-width: 184px;} #top_nav .hd_title {width: 33%; max-width: 629px; height: 100%; display: flex; align-items: flex-start; justify-content: center; flex-direction: column; padding: 0 50px;} #top_nav .hd_title h2 {font-size: 42px; font-weight: 700; color:#fff;} #top_nav .hd_title p {font-size: 0; font-weight: 400; color: rgba(255, 255, 255, 0.6); line-height: 1.44; margin-top: 20px;} #top_nav .hd_title p::before {content: 'SNU공학컨설팅센터\A 대학 최초의 산학협력 전문기관'; font-size: 16px; white-space:pre;} #top_nav .fm_wrap {width: 67%; padding-left: 50px; padding-top: 55px;} .snb_bg { display: none; position: absolute; left:0; right:0; top:90px; height: 226px; background: #fff; z-index: -1; } .snb_bg::before {content: ''; display: block; width: 33%; max-width: 629px; height: 100%; position: absolute; z-index: -1; left: 0; top:0; background-color: #04056b;} /* hd_right */ #hd_right {flex-shrink: 0; height: 100%; display: flex; align-items: center; justify-content: center;} #hd_right .menu_slider_btn { position: relative; cursor: pointer; display: flex; align-items: flex-end;; justify-content: flex-end; flex-direction: column; width: 77px;} #hd_right .menu_slider_btn span{display: block; width: 100%; height: 4px; background-color: #fff; transition: .3s;} #hd_right .menu_slider_btn span:nth-child(n+2){margin-top: 6px;} /* hidden_nav */ .hidden_nav_box { display: none; position: fixed; top: 0; bottom:0; right:0; left: 0; background: rgba(5,5,12,.48); z-index: 9999; backdrop-filter: blur(10px);} .hidden_nav_box.hv {z-index: 56; } .hidden_nav {text-align: center; width: 550px; height: 100vh; position: fixed; top: 0; right: -550px; position: fixed; text-align: left; padding:90px 50px 0 50px; background: #fbfbfb; z-index: 10000;} .hidden_nav .hidden_gnb { width: 100%; } .h_lm {margin-bottom:50px; position: relative; } .h_lm:last-child{margin-bottom: 0;} .h_lm > a {display: block; font-size:25px; font-weight: 700; color:rgba(0,0,0,.5) !important; transition: all .3s ease; max-width:140px; position: relative;text-transform: uppercase; } .h_lm:hover > a, .h_lm > a.active {color:rgba(0,0,0,1) !important;} .h_snb {display: none; position: absolute; left:180px; top:5px; z-index: 2;} .h_snb li {margin-bottom:25px;} .h_snb li a {font-size:17px; font-weight: 400; color:#000000; transition: all .3s ease; border-bottom:2px solid transparent; padding:2px 0; white-space: nowrap; } .h_snb li a:hover {padding:5px 15px; border-bottom:2px solid #000033; color:#000033;} .menu_slider_btn2 { display: block; position: absolute; right:40px; top:40px; cursor: pointer; transform: translate(-50%, -50%); } .menu_slider_btn2 span { display: block; width: 25px; height: 2px; border-radius: 3px; background:#000033; } .menu_slider_btn2 span:nth-child(1) { margin:0; transform: rotate(45deg);} .menu_slider_btn2 span:nth-child(2) { display: none; transform: rotate(45deg); } .menu_slider_btn2 span:nth-child(3) { margin-top: -2px; transform: rotate(135deg); } #hd_lang {display: flex; justify-content: center; align-items: center; position: relative; margin-right: 27px; } #hd_lang button {display: flex; justify-content:center; align-items: center; font-size: 15px; font-weight:300; color:#fff; cursor: pointer; position: relative; z-index: 2; background-color: transparent; transition: all .3s; width: 99px; height: 34px; border-radius: 17px; border: solid 1px transparent; background: rgba(255,255,255,.15); } #hd_lang button.active {background: #333; color:#fff; } #hd_lang button span {display: block; } #hd_lang button i {display: block; transition: background-image .3s; } #hd_lang button .lang_icon {width:13px; height: 13px; margin-right: 5px; position: relative;} #hd_lang button .lang_icon::before{content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url('../img/lang.png') 50% / cover no-repeat; transition: .3s;} #hd_lang button .lang_icon::after{content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url('../img/lang_hv.png') 50% / cover no-repeat; transition: .3s; opacity: 0;} #hd_lang button .lang_tri {width:7px; height: 5px; margin-left: 14px; position: relative;} #hd_lang button .lang_tri::before{content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url('../img/lang_arrow.png') 50% / cover no-repeat; transition: .3s;} #hd_lang button .lang_tri::after{content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url('../img/lang_arrow_hv.png') 50% / cover no-repeat; transition: .3s; opacity: 0;} #hd_lang ul {display: none; position: absolute; left: 0; top:calc(100% + 5px); width: 100%; background: #333; text-align: center; padding: 17px 0; border-radius: 14.5px;} #hd_lang li + li {margin-top: 5px; } #hd_lang li a {font-size: 14px; font-weight:300; color:rgba(255,255,255,.5); text-transform: uppercase; transition: all .3s ease; width: 100%; display: block; cursor: pointer;} #hd_lang li a:hover {color:#fff;} #header_wrap.main2{} /* sub */ #header_wrap.main2{background-color: #fff;} #header_wrap.main2 #logo a img {opacity: 0;} #header_wrap.main2 #logo a img + img {opacity: 1; } #header_wrap.main2 .gnb > li > a{color: #444;} #header_wrap.main2 #hd_right .menu_slider_btn span{background-color: #000;} #header_wrap.main2 #hd_lang button{color: #0c0c0c; border-color: #000;} #header_wrap.main2 #hd_lang button .lang_icon::before{opacity: 0;} #header_wrap.main2 #hd_lang button .lang_icon::after{opacity: 1;} #header_wrap.main2 #hd_lang button .lang_tri::before{opacity: 0;} #header_wrap.main2 #hd_lang button .lang_tri::after{opacity: 1;} @media screen and (min-width: 1901px) { #header .header-inner {padding: 0 110px;} #top_nav .hd_title{padding: 0 100px 0 170px; justify-content: flex-start; padding-top: 55px;} #top_nav .gnb .snb {max-width: 90%;} #top_nav .gnb .snb > li > a {padding-right: 8px;} #top_nav .fm_wrap{padding-left: 92px;} } @media screen and (min-width: 1025px) { /* hover */ #header_wrap:hover {border-bottom-color: #ddd;} #header_wrap:hover{background-color: #fff;} #header_wrap:hover #logo a img{opacity: 0;} #header_wrap:hover #logo a img + img{opacity: 1;} #header_wrap:hover .gnb > li > a{color: #8b8b8b;} #header_wrap .gnb > li:hover > a{color: #000;} #header_wrap:hover #hd_lang button{color: #0c0c0c; border-color: #000;} #header_wrap:hover #hd_lang button .lang_icon::before{opacity: 0;} #header_wrap:hover #hd_lang button .lang_icon::after{opacity: 1;} #header_wrap:hover #hd_lang button .lang_tri::before{opacity: 0;} #header_wrap:hover #hd_lang button .lang_tri::after{opacity: 1;} #header_wrap:hover #hd_lang button.active {background: #333; color:#fff; } #header_wrap:hover #hd_lang button.active .lang_icon::before{opacity: 1;} #header_wrap:hover #hd_lang button.active .lang_icon::after{opacity: 0;} #header_wrap:hover #hd_lang button.active .lang_tri::before{opacity: 1;} #header_wrap:hover #hd_lang button.active .lang_tri::after{opacity: 0;} #header_wrap:hover #hd_right .menu_slider_btn span{background-color: #000;} } @media screen and (max-width: 1600px) { #header .header-inner{padding: 0 28px;} #top_nav .hd_title{padding: 0 30px;} #top_nav .gnb > li > a{padding: 0 30px;} #top_nav .gnb .snb > li{margin-right: 47px;} } @media screen and (max-width: 1400px) { #top_nav .gnb > li > a{padding: 0 26px; font-size: 19px;} #top_nav .gnb .snb{max-width: 100%;} #top_nav .gnb .snb > li{margin-bottom: 35px;} #top_nav .gnb .snb > li > a{font-size: 15px;} #top_nav .hd_title {width: 25%;} #top_nav .hd_title h2{font-size: 40px;} #top_nav .hd_title p{margin-top: 15px;} #top_nav .fm_wrap{padding-top: 50px; width: 75%; } #hd_right .menu_slider_btn{width: 50px;} .snb_bg::before {width: 25%;} .snb_bg, #top_nav .full_menu{height: 210px;} } @media screen and (max-width: 1280px) { #logo a {width: 200px;} #hd_right .menu_slider_btn{width: 30px;} #top_nav .gnb > li > a{font-size: 17px; padding: 0 15px;} #top_nav .gnb .snb > li > a{font-size: 14px;} #top_nav .gnb > li:nth-child(3) .snb > li{min-width: initial;} #top_nav .hd_title h2{font-size: 30px;} #top_nav .hd_title p{margin-top: 14px;} #top_nav .fm_wrap{width: 75%;} .snb_bg, #top_nav .full_menu{height: 210px;} #hd_lang{margin-right: 15px;} #hd_lang button{width: 80px; height: 30px; font-size: 13px;} #hd_lang button .lang_icon{width: 10px; height: 10px;} #hd_lang button .lang_tri{margin-left: 10px;} } @media screen and (max-width: 1024px) { #header_wrap { position: fixed; height: 60px; } #header .header-inner { justify-content: center; padding: 0 20px;} #top_nav, #hd_right{display: none; } #logo a {width: auto; } #logo a img {width: auto; max-height:31px; } .scrolled #header_wrap {border-color:#ddd; background-color: #fff;} .scrolled #logo a img{opacity: 0;} .scrolled #logo a img + img{opacity: 1;} } @media screen and (max-width: 480px) { #header .header-inner { justify-content: flex-start; } }