@charset "utf-8"; @import url("basic.css"); /*----------------------------------------------------------- Author :GH, Park Creative date :2021. 02. 10 -----------------------------------------------------------*/ /* common 레이아웃 *******************************/ /* common : 시작 ********/ #container{position:relative; width:1920px; margin:auto; overflow:hidden; } .js_mobile_check{display:none; position:absolute; left:0; top:-1000px; width:1px; height:1px; line-height:1px; } .fixSlide{position:fixed; display:none; top:0; left:0; width:100%; height:100vh; z-index:999; background:rgba(7,27,65,.95); color:#fff; } /* common : 끝 ********/ /* header : 시작 ********/ #header{position:absolute; left:0; top:0; width:100%; z-index:998; } #header .headerWrap{position:fixed; width:1920px; top:0; left:50%; -webkit-transform:translateX(-50%); transform:translateX(-50%); } /* pc에서 숨김 : 시작 */ #mobNav, #header .mob_btn{display:none; } /* pc에서 숨김 : 끝 */ /* 로고 : 시작 */ #header h1.logo{position:relative; display:block; text-align:center; z-index:2; } #header h1.logo a, #header h1.logo a img{display:inline-block; max-width:100%; } /* 로고 : 끝 */ /* toputil : 시작 */ #header .toputil{position:absolute; top:1.5rem; right:1rem; max-width:calc(100% - 260px); z-index:10; color:#fff; } #header .toputil .topLink li{position:relative; display:inline-block; vertical-align:middle; font-size:.7rem; font-family:'Sora'; } #header .toputil .topLink > li + li{margin-left:1rem; } #header .toputil .topLink li > a{display:block; -webkit-transition:color .3s; transition:color .3s; } #header .toputil .topLink li > a:hover{color:#000; } /* toputil : 끝 */ /* International office : 시작 */ #header .toputil .topLink li.office_lnk, .office_lnk{display:none !important; } .office_lnk a{padding-right:20px; } .office_lnk::before{position:absolute; right:0; top:50%; -webkit-transform:translateY(-50%); transform:translateY(-50%); font-family:'xeicon'; content:'\e936'; -webkit-transition:transform .3s; transition:transform .3s; } .office_lnk ul{display:none; position:absolute; left:0; top:30px; width:100%; padding:.25rem 0; z-index:100; background:#fff; box-shadow:1px 1px 5px rgba(0,0,0,0.5); } .office_lnk ul li{width:100%; } .office_lnk ul li a{padding:.25rem .5rem; color:#111; } .office_lnk ul li a > span{position:relative; display:inline-block; } .office_lnk ul li a > span:before{position:absolute; bottom:0; left:0; width:0; height:1px; background:#2955a6; content:''; -webkit-transition:width .3s; transition:width .3s; } .office_lnk ul li a[target='_blank'] > span:after{content:'\e980'; display:inline-block; margin-left:2.5px; font-family:'xeicon'; } .office_lnk ul li a:hover, .office_lnk ul li a:focus{color:#000; font-weight:600; } .office_lnk ul li a:hover > span:before, .office_lnk ul li a:focus > span:before{width:100%; } #header .toputil .topLink li.office_lnk.open > a{color:#000; } #header .toputil .topLink li.office_lnk:hover:before, #header .toputil .topLink li.office_lnk.open::before{-webkit-transform:translateY(-50%) rotate(180deg); transform:translateY(-50%) rotate(180deg); color:#000; } /* International office : 끝 */ /* 사이트맵 : 시작 */ #header .toputil .sitemap_btn{position:relative; width:33px; height:auto; display:block; overflow:hidden; z-index:100; } #header .toputil .sitemap_btn span{position:relative; display:block; float:right; width:100%; margin:3px 0; height:2px; background:#fff; } #header .toputil .sitemap_btn span:before{position:absolute; top:0; left:0; width:0; height:100%; background:#000; content:''; -webkit-transition:width .5s; transition:width .5s; } #header .toputil .sitemap_btn:hover span:before, #header .toputil .sitemap_btn:focus span:before{width:100%; } /* 사이트맵 : 끝 */ /* 검색 : 시작 */ #header .search_wrap .search_btn{-webkit-transition:opacity .3s; transition:opacity .3s; -webkit-transition-delay:.3s; transition-delay:.3s; } #header .search_wrap .search_btn button{display:block; color:#fff; border:0; padding:0; -webkit-transition:color .3s; transition:color .3s; } #header .search_wrap .search_btn i{font-size:1.5rem; } #header .search_wrap .search{display:none; position:absolute; width:30rem; padding:1rem; right:0; top:2rem; z-index:99; background:#fff; border-width:1px 0; border-color:#ddd; border-style:solid; } #header .search_wrap .search h2{color:#fff; font-size:25px; margin-bottom:10px; } #header .search_wrap .search_wrap{position:relative; border:2px solid #00a0a8; } #header .search_wrap .search input{height:50px; padding:0 1rem; width:calc(100% - 50px); font-size:14px; color:#555; border:none; } #header .search_wrap .search input::-webkit-input-placeholder{color:#555; } #header .search_wrap .search a.btn_top_sear{position:absolute; right:0; top:0; width:50px; height:100%; background:#00a0a8; color:#fff; font-size:1.5rem; } #header .search_wrap .search a.btn_top_sear i{position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); font-size:1.5rem; } #header .search_wrap .search_close{position:absolute; right:0; top:-2rem; } #header .search_wrap .search_close button{color:#fff; display:block; padding:0; } #header .search_wrap .search_close button i{font-size:1.5rem; } #header .search_wrap .search_btn button:hover, #header .search_wrap .search_btn button:focus{color:#000; } /* 검색 : 끝 */ /* left menu gnb : 시작 */ #header .left_menu{position:fixed; top:0; left:50%; width:260px; height:100vw; padding:1.5rem 1.1rem 0; -webkit-transform:translateX(-50%) translateX(+151.5px) translateX(-960px); transform:translateX(-50%) translateX(+151.5px) translateX(-960px); background:#fff; border-right:1px solid #e5e5e5; z-index:11; } #header .left_menu:after{position:absolute; top:0; right:0; width:500%; height:100vh; background:#fff; content:''; } #header .left_menu .copy{position:relative; z-index:2; padding-top:1.5rem; border-top:1px solid #e5e5e5; font-size:.65rem; font-family:'Sora'; font-weight:200; color:#777; text-align:center; } #header .gnb .mCSB_inside > .mCSB_container{margin-right:1rem; } #header .gnb .mCSB_scrollTools{opacity:1; z-index:1; } #header .gnb .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:6px; background:rgb(0, 52, 105); opacity:.8; } #header .gnb .mCSB_draggerRail{width:6px; background:rgb(207, 217, 227); } #header .gnb{width:100%; max-height:calc(100vh - 420px); margin-top:2.5rem; } #header .gnb .gnb_wrap{margin:auto; } #header .gnb .gnb_wrap a[target='_blank'] > span:after{content:'\e980'; display:inline-block; margin-left:5px; font-family:'xeicon'; } #header .gnb .gnb_wrap .d01{display:block; margin:auto; } #header .gnb .gnb_wrap .d01 > ul > li{display:block; text-align:center; } #header .gnb .gnb_wrap .d01 > ul > li + li{margin-top:2rem; } #header .gnb .gnb_wrap .d01 > ul > li > a{position:relative; display:inline-block; font-family:'SCDream'; font-size:1rem; font-weight:600; color:#222; text-align:center; z-index:2; -webkit-transition:color .3s; transition:color .3s; } #header .gnb .gnb_wrap .d01 > ul > li:first-of-type:after{position:fixed; top:0; left:0; width:259px; height:100vh; background:#fff; content:''; z-index:1; } #header .gnb .gnb_wrap .d01 > ul > li > a span{position:relative; z-index:2; } #header .gnb .gnb_wrap .d01 > ul > li > a span:before{position:absolute; bottom:-4px; left:50%; -webkit-transform:translateX(-50%); transform:translateX(-50%); width:0; height:11px; background:rgba(25,69,151,.3); content:''; -webkit-transition:width .3s; transition:width .3s; } #header .gnb .gnb_wrap .d02_wrap{position:absolute; top:0; left:calc(100% + 1px); width:calc(1920px - 260px); height:100vh; padding:2rem 4rem 0; text-align:left; opacity:0; visibility:hidden; -webkit-transform:translateX(-100%); transform:translateX(-100%); -webkit-transition:opacity .3s, visibility .3s, transform .3s; transition:opacity .3s, visibility .3s, transform .3s; } #header .gnb .gnb_wrap .d01 > ul > li.active .d02_wrap{opacity:1; visibility:visible; -webkit-transform:translateX(0); transform:translateX(0); } #header .gnb .gnb_wrap .d02_wrap:before{position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(253, 252, 250, .99); content:''; } #header .gnb .gnb_wrap .d02{position:relative; width:100%; display:block; } #header .gnb .gnb_wrap .d02 .head{position:relative; padding-bottom:1.5rem; font-family:'SCDream'; border-bottom:1px solid #acacac; } #header .gnb .gnb_wrap .d02 .head h2{position:relative; display:inline-block; color:#222; font-size:2rem; } #header .gnb .gnb_wrap .d02 .head h2::before{content:''; position:absolute; left:0; bottom:calc(-1.5rem - 1.5px); width:100%; height:3px; background:#2c51aa; } #header .gnb .gnb_wrap .d02 .head p{display:inline-block; margin-left:1rem; color:#555; font-size:1rem; } #header .gnb .gnb_wrap .d02 .head span{display:block; line-height:20px; color:#fff; } #header .gnb .gnb_wrap .d02 > ul{display:block; overflow:hidden; margin:1rem -1rem 0; } #header .gnb .gnb_wrap .d02 > ul > li{display:block; float:left; width:25%; min-height:15.5rem; padding:1rem; } #header .gnb .gnb_wrap .d02 > ul > li > a{position:relative; display:block; height:60px; padding:0 1rem; line-height:58px; color:#333; border-width:1px; border-style:solid; border-color:#f3f3f3; font-size:1rem; background:#fff; font-family:'SCDream'; overflow:hidden; -webkit-transition:all .3s ease; transition:all .3s ease; } #header .gnb .gnb_wrap .d02 > ul > li > a > span{position:relative; display:inline-block; } #header .gnb .gnb_wrap .d02 > ul > li > a:before{position:absolute; top:100%; left:0; width:100%; height:100%; background:#184596; content:''; -webkit-transition:top .3s; transition:top .3s; } #header .gnb .gnb_wrap .d03 li{margin:.5rem 0; } #header .gnb .gnb_wrap .d03 li > a{position:relative; display:block; padding-left:.5rem; color:#444; font-size:.75rem; -webkit-transition:font-weight .3s; transition:font-weight .3s; } #header .gnb .gnb_wrap .d03 li > a:before{content:''; position:absolute; top:12px; left:0; width:4px; height:4px; background:#184596; border-radius:50%; } #header .gnb .gnb_wrap .d03 li > a > span{position:relative; display:inline-block; } #header .gnb .gnb_wrap .d03 li > a > span:before{position:absolute; bottom:0; left:0; width:0; height:1px; background:#184596; content:''; -webkit-transition:width .3s; transition:width .3s; } #header .gnb .gnb_wrap .d02 > ul > li.on .d03{background:#ecf2fe; border-color:#ccdaf5; } #header .gnb .gnb_wrap .d01 > ul > li.active > a, #header .gnb .gnb_wrap .d01 > ul > li.on > a{color:#2955a6; } #header .gnb .gnb_wrap .d01 > ul > li.active > a span:before, #header .gnb .gnb_wrap .d01 > ul > li.on > a span:before{width:102%; } #header .gnb .gnb_wrap .d02 > ul > li.on > a{border-color:#2c51aa; color:#fff; font-weight:600; -webkit-transition:color .3s; transition:color .3s; } #header .gnb .gnb_wrap .d02 > ul > li.on > a:before{top:0; } #header .gnb .gnb_wrap .d03{height:10.25rem; padding:.5rem 1rem; border-width:0 0 1px; border-style:solid; border-color:#ccc; background:#f3f3f3; } #header .gnb .gnb_wrap .d03 li > a:hover, #header .gnb .gnb_wrap .d03 li > a:focus{color:#2c51aa; } #header .gnb .gnb_wrap .d03 li > a:hover > span:before, #header .gnb .gnb_wrap .d03 li > a:focus > span:before{width:100%; } #mobNav .box .d01 > ul > li > a.open + .d02_wrap{border-bottom:1px solid #cecece; } /* left menu gnb : 끝 */ /* left menu 사이트 링크 (경상대, 경남과학기술대) : 시작 */ .drt_lnk{position:relative; margin-top:5.25rem; z-index:2; } .drt_lnk > li + li{margin-top:.5rem; } .drt_lnk > li > a{position:relative; display:block; padding:0 .75rem; border-width:1px; border-style:solid; border-color:#ccc; border-radius:40px; font-size:.7rem; color:#1b1b1b; font-family:'SCDream'; font-weight:500; line-height:42px; } .drt_lnk > li > a:before{position:absolute; top:50%; right:.75rem; -webkit-transform:translateY(-50%) translateY(-.5px); ; transform:translateY(-50%) translateY(-.5px); ; width:16px; height:9px; background-image:url('/common/images/T1_layout/direct_site_arrow.png'); background-position:center; background-size:cover; background-repeat:no-repeat; content:''; -webkit-transition:right .3s; transition:right .3s; } .drt_lnk > li > a > span{position:relative; display:inline-block; padding-left:2rem; letter-spacing:-1px; } .drt_lnk > li > a > span:before{position:absolute; top:50%; left:0; -webkit-transform:translateY(-50%); transform:translateY(-50%); width:33px; height:29px; background-image:url('/common/images/T1_layout/direct_site_logo1.png'); background-position:center; background-size:cover; background-repeat:no-repeat; content:''; } .drt_lnk > li.lnk2 > a > span:before{background-image:url('/common/images/T1_layout/direct_site_logo2.png'); } .drt_lnk > li > a:hover:before, .drt_lnk > li > a:focus:before{right:.6rem; } /* left menu 사이트 링크 (경상대, 경남과학기술대) : 끝 */ /* left menu sns 링크 (경상대, 경남과학기술대) : 시작 */ .sns_lnk{position:relative; overflow:hidden; width:80%; margin:1.5rem auto; z-index:2; } .sns_lnk > li{float:left; width:25%; text-align:center; } .sns_lnk > li > a{position:relative; display:inline-block; width:25px; height:22px; } .sns_lnk > li > a:before{position:absolute; top:0; left:0; width:100%; height:100%; background-image:url('/common/images/T1_layout/sns.png'); background-position:0 0; background-size:100px 22px; background-repeat:no-repeat; content:''; -webkit-transition:transform .3s; transition:transform .3s; } .sns_lnk > li.instagram > a:before{background-position:-25px 0; } .sns_lnk > li.facebook > a:before{background-position:-50px 0; } .sns_lnk > li.youtube > a:before{background-position:-75px 0; } .sns_lnk > li > a:hover:before, .sns_lnk > li > a:focus:before{background-image:url('/common/images/T1_layout/sns_over.png'); -webkit-transform:rotateY(180deg); transform:rotateY(180deg); } /* left menu sns 링크 (경상대, 경남과학기술대) : 끝 */ /* left menu tside_wrap : 시작 */ .tside_wrap{position:absolute; top:3rem; right:4rem; } .tside{display:inline-block; vertical-align:middle; overflow:hidden; } .tside > li{position:relative; float:left; } .tside > li + li{margin-left:1rem; } .tside > li > a{position:relative; display:block; font-size:1rem; font-weight:300; font-family:'Sora'; color:#000; } .tside > li > a:before{position:absolute; bottom:0; left:50%; width:0; height:2px; -webkit-transform:translateX(-50%); transform:translateX(-50%); background:#038992; content:''; -webkit-transition:width .3s; transition:width .3s; } .tside > li > a > em{color:#038992; } .tside > li > a:hover, .tside > li > a:focus{color:#038992; } .tside > li > a:hover:before, .tside > li > a:focus:before{width:100%; } /* left menu tside_wrap : 끝 */ /* header : 끝 ********/ /* 상단이동 : 시작 ********/ .btn_top{position:fixed; width:55px; height:55px; background:#00abad; left:50%; bottom:20px; -webkit-transform:translateX(-50%) translateX(+980px) translateX(-68px); transform:translateX(-50%) translateX(+980px) translateX(-68px); z-index:99; box-shadow:0 5px 5px rgba(0,0,0,.3); border-radius:50%; } .btn_top a{position:relative; display:block; width:100%; height:100%; } .btn_top > a:before{position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); width:21px; height:12px; background:url('/common/images/T1_layout/btn_topmove.png') no-repeat center/cover; content:''; -webkit-transition:top .3s; transition:top .3s; } .btn_top > a:hover:before, .btn_top > a:focus:before{top:calc(50% - 3px); } .btn_top{-webkit-transition:all .3s ease; transition:all .3s ease; } /* 상단이동 : 끝 ********/ /* 사용자별 메뉴 : 시작 ********/ .quick_links{position:fixed; left:50%; top:40%; -webkit-transform:translateY(-50%) translateX(-50%) translateX(+980px) translateX(-100px); transform:translateY(-50%) translateX(-50%) translateX(+980px) translateX(-100px); z-index:99; } .quick_links > li + li{margin-top:.5rem; } .quick_links > li{position:relative; } .quick_links > li > a{position:relative; display:block; width:80px; height:80px; background:#fff; box-shadow:3px 3px 0 #8ea0b1; color:#333; text-align:center; font-size:.65rem; font-family:'SCDream'; letter-spacing:-.5px; border-radius:50%; overflow:hidden; -webkit-transition:color .3s; transition:color .3s; } .quick_links > li > a:before{position:absolute; top:100%; left:0; width:100%; height:100%; background:-moz-linear-gradient(0deg, rgba(40,89,166,1) 0%, rgba(40,89,166,1) 1%, rgba(16,172,177,1) 99%, rgba(16,172,177,1) 100%); /* ff3.6+ */ background:-webkit-gradient(linear, left top, right top, color-stop(0%, rgba(40,89,166,1)), color-stop(1%, rgba(40,89,166,1)), color-stop(99%, rgba(16,172,177,1)), color-stop(100%, rgba(16,172,177,1))); /* safari4+,chrome */ background:-webkit-linear-gradient(0deg, rgba(40,89,166,1) 0%, rgba(40,89,166,1) 1%, rgba(16,172,177,1) 99%, rgba(16,172,177,1) 100%); /* safari5.1+,chrome10+ */ background:-o-linear-gradient(0deg, rgba(40,89,166,1) 0%, rgba(40,89,166,1) 1%, rgba(16,172,177,1) 99%, rgba(16,172,177,1) 100%); /* opera 11.10+ */ background:-ms-linear-gradient(0deg, rgba(40,89,166,1) 0%, rgba(40,89,166,1) 1%, rgba(16,172,177,1) 99%, rgba(16,172,177,1) 100%); /* ie10+ */ background:linear-gradient(90deg, rgba(40,89,166,1) 0%, rgba(40,89,166,1) 1%, rgba(16,172,177,1) 99%, rgba(16,172,177,1) 100%); /* w3c */ filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#2859a6', endColorstr='#10acb1',GradientType=1 ); /* ie6-9 */-webkit-transition:top .3s; transition:top .3s; content:''; } .quick_links > li > a > span{position:relative; display:block; padding-top:2.25rem; } .quick_links > li > a > span:before{position:absolute; top:.65rem; left:22px; width:35px; height:30px; background-image:url('/common/images/T1_layout/quick_lnks_icon.png'); background-position:0 0; background-size:175px 60px; background-repeat:no-repeat; content:''; -webkit-transition:background-position .3s; transition:background-position .3s; } .quick_links > li.lnk_form2 > a > span:before{background-position:-35px 0; } .quick_links > li.lnk_form3 > a > span:before{background-position:-70px 0; } .quick_links > li.lnk_form4 > a > span:before{background-position:-105px 0; } .quick_links > li.lnk_form5 > a > span:before{background-position:-140px 0; } .quick_links > li.m_quick_active, .quick_links > li.m_quick_active:before{display:none; } .quick_links > li.m_quick_active > a{box-shadow:none !important; background:-moz-linear-gradient(0deg, rgba(40,89,166,1) 0%, rgba(40,89,166,1) 1%, rgba(16,172,177,1) 99%, rgba(16,172,177,1) 100%); /* ff3.6+ */ background:-webkit-gradient(linear, left top, right top, color-stop(0%, rgba(40,89,166,1)), color-stop(1%, rgba(40,89,166,1)), color-stop(99%, rgba(16,172,177,1)), color-stop(100%, rgba(16,172,177,1))); /* safari4+,chrome */ background:-webkit-linear-gradient(0deg, rgba(40,89,166,1) 0%, rgba(40,89,166,1) 1%, rgba(16,172,177,1) 99%, rgba(16,172,177,1) 100%); /* safari5.1+,chrome10+ */ background:-o-linear-gradient(0deg, rgba(40,89,166,1) 0%, rgba(40,89,166,1) 1%, rgba(16,172,177,1) 99%, rgba(16,172,177,1) 100%); /* opera 11.10+ */ background:-ms-linear-gradient(0deg, rgba(40,89,166,1) 0%, rgba(40,89,166,1) 1%, rgba(16,172,177,1) 99%, rgba(16,172,177,1) 100%); /* ie10+ */ background:linear-gradient(90deg, rgba(40,89,166,1) 0%, rgba(40,89,166,1) 1%, rgba(16,172,177,1) 99%, rgba(16,172,177,1) 100%); /* w3c */ filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#2859a6', endColorstr='#10acb1',GradientType=1 ); /* ie6-9 */} .quick_links > li.m_quick_active > a > span{position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); padding:0; text-transform:uppercase; color:#fff; } .quick_links > li.m_quick_active > a > span:before{display:none; } .quick_links > li.over > a, .quick_links > li.active > a{color:#fff; box-shadow:none; } .quick_links > li.over > a:before, .quick_links > li.active > a:before{top:0; } .quick_links > li.lnk_form1.over > a > span:before, .quick_links > li.lnk_form1.active > a > span:before{background-position:0 -30px; } .quick_links > li.lnk_form2.over > a > span:before, .quick_links > li.lnk_form2.active > a > span:before{background-position:-35px -30px; } .quick_links > li.lnk_form3.over > a > span:before, .quick_links > li.lnk_form3.active > a > span:before{background-position:-70px -30px; } .quick_links > li.lnk_form4.over > a > span:before, .quick_links > li.lnk_form4.active > a > span:before{background-position:-105px -30px; } .quick_links > li.lnk_form5.over > a > span:before, .quick_links > li.lnk_form5.active > a > span:before{background-position:-140px -30px; } /* 사용자별 메뉴 팝업 : 시작 */ .quick_info_box{position:absolute; top:0; right:100px; width:calc(100vw - 360px); opacity:0; visibility:hidden; -webkit-transform:translateX(30px); transform:translateX(30px); -webkit-transition:opacity .3s, visibility .3s, transform .3s; transition:opacity .3s, visibility .3s, transform .3s; } .quick_info_box > div{position:relative; max-width:1200px; background:rgba(7,27,65,.95); border-radius:30px; float:right; color:#fff; padding:2rem; } .quick_info_box .quick_menu_wrap .quick_menu{float:left; width:140px; height:130px; } .quick_info_box .quick_menu_wrap .quick_menu > a{position:relative; display:block; height:100%; text-align:center; -webkit-transition:border .3s; transition:border .3s; } .quick_info_box .quick_menu_wrap .quick_menu > a > span{position:absolute; display:inline-block; top:50%; left:50%; width:100%; padding-top:3.5rem; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); font-size:.75rem; font-family:'SCDream'; } .quick_info_box .quick_menu_wrap .quick_menu > a > span:before{position:absolute; top:0; left:50%; width:60px; height:60px; margin-left:-30px; background-image:url('/common/images/T1_layout/quick_lnks_icons.png'); background-repeat:no-repeat; background-size:1860px 60px; background-position:0 0; content:''; -webkit-transition:transform .3s; transition:transform .3s; } .quick_info_box .quick_menu_wrap .quick_menu2 > a > span:before{background-position:-60px 0; } .quick_info_box .quick_menu_wrap .quick_menu3 > a > span:before{background-position:-120px 0; } .quick_info_box .quick_menu_wrap .quick_menu4 > a > span:before{background-position:-180px 0; } .quick_info_box .quick_menu_wrap .quick_menu5 > a > span:before{background-position:-240px 0; } .quick_info_box .quick_menu_wrap .quick_menu6 > a > span:before{background-position:-300px 0; } .quick_info_box .quick_menu_wrap .quick_menu7 > a > span:before{background-position:-360px 0; } .quick_info_box .quick_menu_wrap .quick_menu8 > a > span:before{background-position:-420px 0; } .quick_info_box .quick_menu_wrap .quick_menu9 > a > span:before{background-position:-480px 0; } .quick_info_box .quick_menu_wrap .quick_menu10 > a > span:before{background-position:-540px 0; } .quick_info_box .quick_menu_wrap .quick_menu11 > a > span:before{background-position:-600px 0; } .quick_info_box .quick_menu_wrap .quick_menu12 > a > span:before{background-position:-660px 0; } .quick_info_box .quick_menu_wrap .quick_menu13 > a > span:before{background-position:-720px 0; } .quick_info_box .quick_menu_wrap .quick_menu14 > a > span:before{background-position:-780px 0; } .quick_info_box .quick_menu_wrap .quick_menu15 > a > span:before{background-position:-840px 0; } .quick_info_box .quick_menu_wrap .quick_menu16 > a > span:before{background-position:-900px 0; } .quick_info_box .quick_menu_wrap .quick_menu17 > a > span:before{background-position:-960px 0; } .quick_info_box .quick_menu_wrap .quick_menu18 > a > span:before{background-position:-1020px 0; } .quick_info_box .quick_menu_wrap .quick_menu19 > a > span:before{background-position:-1080px 0; } .quick_info_box .quick_menu_wrap .quick_menu20 > a > span:before{background-position:-1140px 0; } .quick_info_box .quick_menu_wrap .quick_menu21 > a > span:before{background-position:-1200px 0; } .quick_info_box .quick_menu_wrap .quick_menu22 > a > span:before{background-position:-1260px 0; } .quick_info_box .quick_menu_wrap .quick_menu23 > a > span:before{background-position:-1320px 0; } .quick_info_box .quick_menu_wrap .quick_menu24 > a > span:before{background-position:-1380px 0; } .quick_info_box .quick_menu_wrap .quick_menu25 > a > span:before{background-position:-1440px 0; } .quick_info_box .quick_menu_wrap .quick_menu26 > a > span:before{background-position:-1500px 0; } .quick_info_box .quick_menu_wrap .quick_menu27 > a > span:before{background-position:-1560px 0; } .quick_info_box .quick_menu_wrap .quick_menu28 > a > span:before{background-position:-1620px 0; } .quick_info_box .quick_menu_wrap .quick_menu29 > a > span:before{background-position:-1680px 0; } .quick_info_box .quick_menu_wrap .quick_menu30 > a > span:before{background-position:-1740px 0; } .quick_info_box .quick_menu_wrap .quick_menu31 > a > span:before{background-position:-1800px 0; } .quick_info_box .menu_info{margin-bottom:1rem; padding-bottom:1rem; border-bottom:1px solid #3e516f; } .quick_info_box .menu_info h5{display:inline-block; font-family:'SCDream'; font-weight:700; font-size:1.25rem; } .quick_info_box .menu_info span{display:inline-block; margin-left:.5rem; font-family:'SCDream'; font-weight:300; font-size:.8rem; } .quick_info_box .quickLinks_close{position:absolute; top:-30px; right:2rem; width:60px; height:60px; background:#00abad; border-radius:50%; z-index:1; } .quick_info_box .quickLinks_close > i{position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); font-size:1.5rem; -webkit-transition:transform .3s; transition:transform .3s; } .quick_info_box .quickLinks_close:hover > i, .quick_info_box .quickLinks_close:focus > i{-webkit-transform:translate(-50%, -50%) rotate(180deg); transform:translate(-50%, -50%) rotate(180deg); } .quick_info_box .quickLinks_close:after{position:absolute; top:50%; left:50%; width:120%; height:120%; background:rgba(0,171,173,.5); -webkit-transform:translate(-50%, -50%) scale(0.1, 0.1); transform:translate(-50%, -50%) scale(0.1, 0.1); border-radius:50%; -webkit-animation:pulsate 1.5s ease-out; animation:pulsate 1.5s ease-out; -webkit-animation-iteration-count:infinite; animation-iteration-count:infinite; opacity:0; content:''; z-index:-1; } @-webkit-keyframes pulsate{ 0%{ -webkit-transform:translate(-50%, -50%) scale(0.1, 0.1); transform:translate(-50%, -50%) scale(0.1, 0.1); opacity:0; } 50%{ -webkit-transform:translate(-50%, -50%) scale(1, 1); transform:translate(-50%, -50%) scale(1, 1); opacity:1; } 100%{ -webkit-transform:translate(-50%, -50%) scale(1.2, 1.2); transform:translate(-50%, -50%) scale(1.2, 1.2); opacity:0; } } @keyframes pulsate{ 0%{ -webkit-transform:translate(-50%, -50%) scale(0.1, 0.1); transform:translate(-50%, -50%) scale(0.1, 0.1); opacity:0; } 50%{ -webkit-transform:translate(-50%, -50%) scale(1, 1); transform:translate(-50%, -50%) scale(1, 1); opacity:1; } 100%{ -webkit-transform:translate(-50%, -50%) scale(1.2, 1.2); transform:translate(-50%, -50%) scale(1.2, 1.2); opacity:0; } } .quick_links > li.active .quick_info_box{opacity:1; visibility:visible; -webkit-transform:translateX(0); transform:translateX(0); } .quick_info_box .quick_menu_wrap .quick_menu > a:hover > span:before, .quick_info_box .quick_menu_wrap .quick_menu > a:focus > span:before{-webkit-transform:rotateY(180deg); transform:rotateY(180deg); } /* 사용자별 메뉴 팝업 : 끝 */ /* 사용자별 메뉴 : 끝 ********/ /* header_fixed : 시작 ********/ .header_fixed #header .toputil{top:0; right:0; padding:0; color:#000; } .header_fixed #header .toputil:before{position:absolute; bottom:0; left:0; width:100%; height:100%; background:#fff; box-shadow:0 5px 5px rgba(0,0,0,.2); content:''; } .header_fixed #header .search_wrap .search_btn button{width:60px; height:60px; background:#00a0a8; } .header_fixed #header .toputil .topLink > li{float:left; } .header_fixed #header .toputil .topLink > li button:hover, .header_fixed #header .toputil .topLink > li button:focus{color:#fff; } .header_fixed #header .toputil .topLink > li + li{margin-left:0; } .header_fixed #header .toputil .sitemap_btn{width:60px; height:60px; padding:.75rem 0; background:#001d51; } .header_fixed #header .toputil .sitemap_btn span{width:33px; margin:6px auto; float:none; } .header_fixed #header .toputil .topLink > li > a{padding:.75rem 0; line-height:60px; } .header_fixed #header .toputil .topLink > li.login > a{padding:0 0 0 1rem; } .header_fixed #header .toputil .topLink > li.office_lnk > a{padding:0 2rem 0 1rem; } .header_fixed .office_lnk ul{top:100%; } .header_fixed .office_lnk::before{right:1rem; } .header_fixed #header .search_wrap .search_close{top:-60px; width:60px; height:60px; background:#00a0a8; } .header_fixed #header .search_wrap .search_close i{position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); } .header_fixed #header .search_wrap .search{top:100%; } .header_fixed #header .toputil .sitemap_btn span:before{display:none; } /* header_fixed : 끝 ********/ /* footer : 시작 ********/ #footer{width:calc(100% - 260px); margin-left:260px; padding:2rem 0; background:#000d17; color:#7a8590; } #footer .ft_wrap{width:1400px; margin:auto; font-family:'SCDream'; } #footer .address_lst{overflow:hidden; margin:0 -1rem; } #footer .address_lst > li{position:relative; float:left; width:20%; min-height:110px; padding:0 1rem; } #footer .address_lst > li + li:before{position:absolute; top:50%; left:0; -webkit-transform:translateY(-50%); transform:translateY(-50%); width:1px; height:90px; border-left:1px dashed #fff; content:''; } #footer .address_lst > li > strong{position:relative; display:block; font-size:.85rem; color:#fff; } #footer .address_lst > li > strong:before{position:relative; display:inline-block; margin-right:.25rem; font-family:'xeicon'; content:'\eb59'; } #footer .address_lst > li > span{display:block; margin-top:.5rem; font-size:.7rem; color:#7a8590; } #footer .f_box{position:relative; margin-top:1.5rem; padding-left:13.5rem; } #footer .f_box:before{position:absolute; top:7px; left:0; width:217px; height:30px; background:url('/common/images/T1_layout/f_logo.png')no-repeat center/cover; content:''; } #footer .f_lnk{overflow:hidden; margin:-.25rem -.635rem; } #footer .f_lnk > li{margin:.25rem .635rem; float:left; font-size:.75rem; } #footer .f_lnk > li > a{position:relative; display:inline-block; color:#d2deea; } #footer .f_lnk > li > a:before{position:absolute; bottom:0; left:0; width:0; height:1px; background:#bcbfc6; content:''; -webkit-transition:width .3s; transition:width .3s; } #footer .f_lnk > li > a:hover:before, #footer .f_lnk > li > a:focus:before{width:100%; } #footer .f_lnk > li > a.point{font-weight:400; color:#3b79ed; } #footer .f_lnk > li > a.point:before{background:#3b79ed; } #footer .copyright{margin-top:.25rem; font-size:.75rem; color:#949ba1; font-family:'Sora'; } #footer .copyright > strong{font-weight:400; color:#e4e9ef; } /* footer : 끝 ********/ /* common 레이아웃 : 끝 *******************************/ /* sub 레이아웃 : 시작 *******************************/ /* sub common : 시작 */ #sub_container_wrap{position:relative; } #sub_content{padding-bottom:2rem; opacity:0; visibility:hidden; -webkit-transform:translateY(50px); transform:translateY(50px); -webkit-transition:opacity .5s, visibilty .5s, transform .5s; transition:opacity .5s, visibilty .5s, transform .5s; -webkit-transition-delay:.5s; transition-delay:.5s; } .start #sub_content{opacity:1; visibility:visible; -webkit-transform:translateY(0); transform:translateY(0); } .sub_content_wrap{width:calc(100% - 260px); margin-left:260px; } .sub_content_wrap .container{width:1400px; margin:auto; } .sub_content_wrap .container:after{display:block; clear:both; content:''; } /* sub common : 끝 */ /* 서브비주얼 : 시작 */ .sub_visual{position:relative; width:100%; height:365px; color:#fff; font-family:'SCDream'; overflow:hidden; } .sub_visual:before{position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%) scale(1.5); transform:translate(-50%, -50%) scale(1.5); width:100%; height:100%; background-image:url('/common/images/T1_layout/S_visual1.jpg'); background-repeat:no-repeat; background-position:center; background-size:cover; content:''; -webkit-transition:transform 2s; transition:transform 2s; } /* 서브비주얼 : 연구 */ .sub_visual2:before{background-image:url('/common/images/T1_layout/S_visual2.jpg'); } /* 서브비주얼 : 입학 취업 */ .sub_visual3:before{background-image:url('/common/images/T1_layout/S_visual3.jpg'); } /* 서브비주얼 : 대학생활 */ .sub_visual4:before{background-image:url('/common/images/T1_layout/S_visual4.jpg'); } /* 서브비주얼 : GNU today */ .sub_visual5:before{background-image:url('/common/images/T1_layout/S_visual5.jpg'); } /* 서브비주얼 : 대학소개 */ .sub_visual6:before{background-image:url('/common/images/T1_layout/S_visual6.jpg'); } .sub_visual .txt1{padding-top:6rem; font-size:2.65rem; font-weight:700; } .sub_visual .txt2{padding-top:.5rem; font-size:1.7rem; font-weight:100; opacity:0; visibility:hidden; -webkit-transform:translateY(50px); transform:translateY(50px); -webkit-transition:opacity 1s, visibility 1s, transform 1s; transition:opacity 1s, visibility 1s, transform 1s; -webkit-transition-delay:.3s; transition-delay:.3s; } body.start .sub_visual .txt2{opacity:1; visibility:visible; -webkit-transform:translateY(0); transform:translateY(0); } body.start .sub_visual:before{-webkit-transform:translate(-50%, -50%) scale(1); transform:translate(-50%, -50%) scale(1); } /* 서브비주얼 : 끝 */ /* 서브메뉴 : 시작 */ #menu{position:relative; width:100%; height:100%; background:rgba(0, 0, 0, 0.4); margin-top:-70px; float:left; } #menu nav{width:1400px; margin:0 auto; } #menu nav:after{display:block; clear:both; content:''; } #menu .lnb{position:relative; } #menu .lnb:after{display:block; clear:both; content:''; } #menu .lnb > li{position:relative; float:left; min-width:320px; } #menu .lnb > li.on .subLnb{display:block; } #menu .lnb > li.home{width:70px; height:70px; min-width:auto; border-width:0 1px ; border-style:solid; border-color:rgba(255,255,255,.2); } #menu .lnb > li.home a{display:block; width:100%; height:100%; padding:0; text-align:center; font-size:1.25rem; } #menu .lnb > li.home a > i{position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); } #menu .lnb > li a{font-family:'Sora', 'SCDream'; font-size:.85rem; } #menu .lnb > li > a{position:relative; display:block; height:70px; padding:0 4rem 0 1.5rem; line-height:70px; color:#fff; font-weight:400; border-right:1px solid rgba(255,255,255,.2); overflow:hidden; } #menu .lnb > li > a > span{display:inline-block; overflow:hidden; max-width:100%; vertical-align:middle; } #menu .lnb > li.d01 > a:before{position:absolute; top:50%; right:1.5rem; width:26px; height:26px; -webkit-transform:translateY(-50%) rotate(180deg); transform:translateY(-50%) rotate(180deg); background:rgba(0, 0, 0, 0.4); font-family:'xeicon'; content:'\e945'; text-align:center; font-size:.85rem; border-radius:50%; line-height:26px; -webkit-transition:transform .3s, background .3s; transition:transform .3s, background .3s; } #menu .subLnb{display:none; position:absolute; top:100%; left:0; width:100%; padding:10px 0; background:rgba(0, 0, 0, 0.4); z-index:10; } #menu .subLnb li a{position:relative; display:block; height:40px; color:#fff; padding:0 1.5rem; line-height:40px; overflow:hidden; } #menu .subLnb li a > span{position:relative; display:inline-block; max-width:90%; overflow:hidden; vertical-align:middle; } #menu .subLnb li a > span:before{position:absolute; bottom:5px; left:0; width:0; height:1px; background:#fff; content:''; -webkit-transition:width .3s; transition:width .3s; } #menu .subLnb li a:hover > span:before, #menu .subLnb li a:focus > span:before, #menu .subLnb li a:active > span:before{width:100%; } #menu .subLnb li.on a{color:#22499d; } #menu .subLnb li.on a > span:before{background:#22499d; } #menu .lnb > li.d01.active > a::before, #menu .lnb > li.d01.on > a::before, #menu .lnb > li > a.active::before{background:#22499d; -webkit-transform:translateY(-50%) rotate(0deg); transform:translateY(-50%) rotate(0deg); } #menu nav > .lnb > li a[target='_blank']:after{content:'\e980'; display:inline-block; margin-left:5px; font-family:'xeicon'; } /* 서브메뉴 : 끝 */ /* sub 타이틀 : 시작 */ .title_area{position:relative; margin:2.25rem 0 2rem; z-index:1; } .title_area .container{position:relative; } .title_area:after{display:block; clear:both; content:''; } .title_area .pageTitle{word-break:keep-all; font-size:1.65rem; color:#222; font-family:'SCDream'; font-weight:700; float:left; } .title_area .location{display:none; } /* sub 타이틀 : 끝 */ /* 서브 side 기능 : 시작 */ .sub_tit_tside{position:absolute; top:50%; right:0; -webkit-transform:translateY(-50%); transform:translateY(-50%); } /* 서브 side 기능 : 끝 */ /* 확대, 축소 : 시작 */ .fs_ctrl{display:inline-block; vertical-align:middle; overflow:hidden; border-radius:20px; border:1px solid #e7e7e7; } .fs_ctrl > li{position:relative; float:left; } .fs_ctrl > li + li:before{position:absolute; top:50%; left:0; width:1px; height:15px; -webkit-transform:translateY(-50%); transform:translateY(-50%); background:#c5c6c9; content:''; } .fs_ctrl > li > a{display:block; padding:0 .5rem; color:#000; background:#f3f3f3; font-size:.75rem; line-height:35px; -webkit-transition:font-weight .3s, color .3s; transition:font-weight .3s, color .3s; } .fs_ctrl > li > a:hover, .fs_ctrl > li > a:focus, .fs_ctrl > li > a:hover > i, .fs_ctrl > li > a:focus > i{color:#22499d; font-weight:700; } .fs_ctrl > li > a.fs_ctrl_deflaut_btn{font-family:'SCDream'; } .fs_ctrl > li > a.fs_ctrl_plus_btn, .fs_ctrl > li > a.fs_ctrl_minus_btn{font-size:.9rem; } /* 확대, 축소 : 끝 */ /* 인쇄, 공유 : 시작 */ .fs_ctrl + .snsBox{margin-left:.5rem; } .snsBox{display:inline-block; vertical-align:middle; } .snsBox button{position:relative; display:inline-block; width:35px; height:35px; padding:0; overflow:hidden; border-radius:50%; background:#9799a0; border-width:1px; border-style:solid; border-color:#9799a0; line-height:33px; text-align:center; color:#fff; } .snsBox button:before{position:absolute; top:100%; left:0; width:100%; height:100%; background:#fff; -webkit-transition:top .3s; transition:top .3s; content:''; } .snsBox button i{position:relative; z-index:1; line-height:33px; } .snsBox .sns_more{position:absolute; right:0; top:40px; width:115px; overflow:hidden; z-index:1; opacity:0; visibility:hidden; -webkit-transform:translateX(-30px); transform:translateX(-30px); -webkit-transition:opacity .3s, visibility .3s, transform .3s; transition:opacity .3s, visibility .3s, transform .3s; } .snsBox .sns_more button{position:relative; width:35px; height:35px; float:left; margin:0; background:#4067ae; border-color:#4067ae; font-size:1rem; -webkit-transition:all .3s ease; transition:all .3s ease; overflow:hidden; } .snsBox .sns_more button + button{margin-left:5px; } .snsBox .sns_more button.btnTwt{background:#1da1f2; border-color:#1da1f2; } .snsBox .sns_more button.btnInstar{background:#ff005e; border-color:#ff005e; } .snsBox .sns_more button.btnKtalk{background:#ffd400; border-color:#ffd400; color:#3e2e2e; } .snsBox .btnShare.active + .sns_more{opacity:1; visibility:visible; -webkit-transform:translateX(0); transform:translateX(0); } .snsBox button:hover:before, .snsBox button:focus:before, .snsBox button.active:before{top:0; } .snsBox button:hover, .snsBox button:focus, .snsBox button.active{color:#9799a0; } .snsBox .sns_more button.btnFbook:hover, .snsBox .sns_more button.btnFbook:focus{color:#4067ae; } .snsBox .sns_more button.btnTwt:hover, .snsBox .sns_more button.btnTwt:focus{color:#1da1f2; } .snsBox .sns_more button.btnInstar:hover, .snsBox .sns_more button.btnInstar:focus{color:#ff005e; } .snsBox .sns_more button.btnKtalk:hover, .snsBox .sns_more button.btnKtalk:focus{color:#3e2e2e; border-color:#3e2e2e; } /* 인쇄, 공유 : 끝 */ /* sub 레이아웃 : 끝 *******************************/ /* responsive */ @media (max-width:1950px){ /* common 레이아웃 : 시작 *******************************/ #container{width:100%; } /* header : 시작 ********/ #header .headerWrap{width:100%; } #header .left_menu{left:0; -webkit-transform:translateX(0); transform:translateX(0); } #header .gnb .gnb_wrap .d02_wrap{width:calc(100vw - 100%); padding:2rem 2rem 0 2rem !important; } .tside_wrap{right:2rem; } #header .toputil{right:2.5%; } /* header : 끝 ********/ /* 사용자별 메뉴 : 시작 ********/ .quick_links{left:auto; right:.25rem; -webkit-transform:translateY(-50%) translateX(0); transform:translateY(-50%) translateX(0); } /* 사용자별 메뉴 : 끝 ********/ /* 상단이동 : 시작 ********/ .btn_top{right:.25rem; left:inherit; -webkit-transform:translate(0); transform:translate(0); } /* 상단이동 : 끝 ********/ /* common 레이아웃 : 끝 *******************************/ } @media screen and (max-width:1870px){ /* common 레이아웃 : 시작 *******************************/ /* left menu gnb : 시작 */ #header .left_menu:after{display:none; } /* left menu gnb : 끝 */ /* footer : 시작 ********/ #footer .ft_wrap{width:95%; } /* footer : 끝 ********/ /* common 레이아웃 : 끝 *******************************/ /* sub 레이아웃 : 시작 *******************************/ /* sub common : 시작 */ .sub_content_wrap .container{width:95%; } /* sub common : 끝 */ /* 서브메뉴 : 시작 */ #menu nav{width:95%; } /* 서브메뉴 : 끝 */ /* sub 레이아웃 : 끝 *******************************/ } @media screen and (max-width:1700px){ /* common 레이아웃 : 시작 *******************************/ /* 사용자별 메뉴 : 시작 ********/ .quick_info_box > div{max-width:840px; } .quick_menu_wrapper{max-height:265px; } /* 사용자별 메뉴 : 끝 ********/ /* common 레이아웃 : 끝 *******************************/ } @media screen and (max-width:1440px){ /* sub 레이아웃 : 시작 *******************************/ /* 서브메뉴 : 시작 */ #menu .lnb > li{min-width:280px} /* 서브메뉴 : 끝 */ /* sub 레이아웃 : 끝 *******************************/ } @media screen and (max-width:1280px){ /* common 레이아웃 : 시작 *******************************/ /* left menu gnb : 시작 */ #header .gnb .gnb_wrap .d02 > ul > li{width:33.333%; } /* left menu gnb : 끝 */ /* 사용자별 메뉴 : 시작 ********/ /* 사용자별 메뉴 : 끝 ********/ /* common 레이아웃 : 끝 *******************************/ /* sub 레이아웃 : 시작 *******************************/ /* 서브메뉴 : 시작 */ #menu{margin-top:-50px; } #menu .lnb > li.home{width:50px; height:50px; } #menu .lnb > li > a{height:50px; line-height:50px; } #menu .subLnb li a{padding:0 .5rem; } #menu .lnb > li{min-width:auto; width:calc(33.333% - 17px); } /* 서브메뉴 : 끝 */ /* 인쇄, 공유 : 시작 */ .snsBox button.btnPrint{display:none; } /* 인쇄, 공유 : 끝 */ /* sub 레이아웃 : 끝 *******************************/ } @media screen and (max-width:1200px){ /* common 레이아웃 : 시작 *******************************/ /* header : 시작 ********/ #header{position:relative; } #header .headerWrap{width:100%; box-shadow:0 0 8px rgba(0,0,0,.2); } #header h1.logo{position:absolute; left:50%; top:50%; -webkit-transform:translate(-50%, -50%) translate(-.5px, -.5px); transform:translate(-50%, -50%) translate(-.5px, -.5px); width:75px; } #header .left_menu{position:relative; width:100%; height:60px; left:0; padding:0; } #header .gnb, #header .toputil .topLink li.office_lnk, #header .toputil .topLink li.sitemap, #header .left_menu .copy, .drt_lnk, .sns_lnk, .header_fixed #header .toputil{display:none; } #header .mob_btn{display:block; position:absolute; left:0; top:0; width:60px; height:60px; background:#001d51; color:#fff; z-index:11; } #header .mob_btn i{position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); font-size:1.5rem; } #header h1.logo a, #header h1.logo a img{display:block; } /* toputil : 시작 */ #header .toputil{position:fixed; top:0; left:auto; right:0; max-width:inherit; width:auto; z-index:12; } #header .toputil .topLink > li + li{margin-left:0; } #header .search_wrap .search{top:60px; width:100vw; } #header .search_wrap .search_btn button{display:block; width:60px; height:60px; background:#00a0a8; color:#fff; border:0; } #header .search_wrap .search a.btn_top_sear{position:absolute; right:0; top:0; width:50px; height:100%; color:#fff; font-size:1.5rem; } #header .search_wrap .search a.btn_top_sear i, #header .search_wrap .search_close i{position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); font-size:1.5rem; } #header .search_wrap .search_close{top:-60px; width:60px; height:60px; background:#00a0a8; } #header .search_wrap .search_btn{opacity:1 !important; } #header .search_wrap .search_btn button:hover, #header .search_wrap .search_btn button:focus{color:#fff; } /* toputil : 끝 */ /* header : 끝 ********/ /* 모바일 메뉴 : 시작 ********/ .mobNav_active, .mobNav_active body, .mobNav_active #wrap{overflow:hidden; } #mobNav .mCSB_inside > .mCSB_container{margin-right:1rem; } #mobNav .mCSB_scrollTools{opacity:1; } #mobNav .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:8px; background:rgb(0, 52, 105); opacity:.8; } #mobNav .mCSB_draggerRail{width:8px; background:rgb(207, 217, 227); } #mobNav .drt_lnk, #mobNav .tside_m{display:block; overflow:visible; } #mobNav .tside_m > li{position:relative; float:left; font-family:'Sora'; } #mobNav .tside_m > li + li{margin-left:.5rem; } #mobNav .tside_m > li > a, #mobNav .tside_m > li > a > em{display:block; color:#fff; font-size:.7rem; letter-spacing:-.6px; } #mobNav .tside_m > li.office_lnk ul{position:fixed; top:53px; } #mobNav .tside_m > li.office_lnk ul > li{padding:0 2.5%; line-height:2rem; } #mobNav .tside_m > li.office_lnk ul > li > a{padding:.25rem 0; font-size:.75rem; } #mobNav .tside_m > li.office_lnk:before{right:-.25rem; color:#fff; font-size:.6rem; } #mobNav .tside_m > li.office_lnk > a{padding-right:.5rem; } #mobNav{display:none; position:fixed; width:100%; height:100%; left:0; top:0; z-index:2000; opacity:0; -webkit-opacity:0; filter:alpha(opacity=0); overflow:hidden; } #mobNav .box{position:absolute; left:-100%; top:0; width:100%; height:100%; background:#fff; z-index:10; } #mobNav .box .tside_m{display:block; position:absolute; width:100%; height:52px; font-size:1.1rem; line-height:52px; padding:0 2.5%; font-family:'SCDream','Sora'; background:#004a96; } #mobNav .box .binds{overflow:hidden; } #mobNav .box .b_side_wrap{position:relative; margin:0 auto 1rem; padding-top:1rem; width:95%; } #mobNav .box .b_side_wrap .drt_lnk{margin:0 -.25rem; overflow:hidden; } #mobNav .box .b_side_wrap .drt_lnk > li, #mobNav .box .b_side_wrap .drt_lnk > li + li{float:left; width:50%; padding:0 .25rem; margin:0; } #mobNav .box .b_side_wrap .drt_lnk > li > a{line-height:38px; } #mobNav .box .b_side_wrap .drt_lnk > li > a > span:before{width:33px; height:30px; } #mobNav .box .gnb_wrap{max-height:calc(100vh - 80px); padding:3rem 2.5% 1rem; overflow:hidden; } #mobNav .box .gnb_wrap li{position:relative; } #mobNav .box .gnb_wrap a{display:block; position:relative; font-family:'SCDream','Sora'; } #mobNav .box .d01 > ul > li > a{border-bottom:1px solid #cecece; color:#1e1e1e; text-decoration:none; } #mobNav .box .d01 > ul > li > a span{display:inline-block; position:relative; padding:.5rem 0; font-size:.9rem; font-weight:600; } #mobNav .box .gnb_wrap a[target='_blank'] span:after{content:'\e980'; display:inline-block; margin-left:5px; font-size:0.9rem; font-family:'xeicon'; } #mobNav .box .d01 > ul > li.dep > a:after{content:''; display:block; position:absolute; right:10px; top:22px; width:16px; height:2px; background:#666; } #mobNav .box .d01 > ul > li.dep > a::before{content:''; display:block; position:absolute; right:17px; top:15px; width:2px; height:16px; background:#666; -webkit-transition:all .3s; transition:all .3s; } #mobNav .box .d01 > ul > li.dep > a.open::before{-webkit-transform:rotateZ(90deg); transform:rotateZ(90deg); } #mobNav .box .d01 > ul > li > a:hover, #mobNav .box .d01 > ul > li > a.open{color:#004a96; border-color:#004a96; } #mobNav .box .d01 > ul > li > a.open:after{background-color:#004a96; } #mobNav .box .d02 > ul{display:none; } #mobNav .box .d02 > ul > li > a{font-size:.75rem; color:#444; padding:.5rem 1rem; } #mobNav .box .d02 > ul > li > a::before{content:''; position:absolute; left:9px; top:50%; width:3px; height:3px; -webkit-transform:translateY(-50%); transform:translateY(-50%); background:#004a96; border-radius:50%; } #mobNav .box .d02 > ul > li.dep > a:after{position:absolute; right:1rem; top:50%; font-size:1rem; font-family:'xeicon'; content:'\e942'; -webkit-transform:translateY(-50%); transform:translateY(-50%); -webkit-transition:all .3s; transition:all .3s; } #mobNav .box .d02 > ul > li.dep > a.open:after{-webkit-transform:translateY(-50%) rotate(180deg); transform:translateY(-50%) rotate(180deg); } #mobNav .box .d02 > ul > li > a.open{background:#1c3c5d; color:#fff; } #mobNav .box .d02 > ul > li > a.open::before{background:#fff; } #mobNav .box .d03{display:none; height:auto !important; padding:.5rem 1rem; background:#eee; } #mobNav .box .d03 a{color:#111; padding:.5rem 0; border-top:1px dashed #ccc; font-size:.7rem; } #mobNav .box .d03 li:first-child a{border-top:0; } #mobNav .box .close{display:block; position:absolute; right:0; top:0; width:52px; height:52px; z-index:51; background:rgba(0,0,0,0.3); } #mobNav .box .close:after{content:'\e921'; display:block; position:absolute; left:50%; top:50%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); color:#fff; font-size:1.3rem; font-family:'xeicon'; -webkit-transition:all .8s ease; transition:all .8s ease; } #mobNav .box a{-webkit-transition:all .3s ease; transition:all .3s ease; } /* 모바일 메뉴 : 끝 ********/ /* 사용자별 메뉴 : 시작 ********/ .quick_links > li:before{width:65px; height:65px; } .quick_links > li.lnk_form{position:absolute; top:10px; left:0; opacity:0; visibility:hidden; -webkit-transition:top .3s, left .3s, opacity .3s, visibility .3s; transition:top .3s, left .3s, opacity .3s, visibility .3s; margin:0 !important; } .quick_links > li.lnk_form > a{width:65px; height:65px; font-size:.65rem; } .quick_links > li > a > span{padding-top:1.75rem; } .quick_links > li > a > span:before{top:.55rem; left:20px; width:25px; height:20px; background-size:125px 40px; } .quick_links > li.lnk_form2 > a > span:before{background-position:-25px 0; } .quick_links > li.lnk_form3 > a > span:before{background-position:-50px 0; } .quick_links > li.lnk_form4 > a > span:before{background-position:-75px 0; } .quick_links > li.lnk_form5 > a > span:before{background-position:-101px 0; } .quick_menu_wrapper{max-height:380px; } .quick_info_box .quick_menu_wrap .quick_menu{width:25%; } .quick_links_active .quick_links > li.lnk_form{opacity:1; visibility:visible; } .quick_links_active .quick_links > li.lnk_form1{top:10px; left:-375px; } .quick_links_active .quick_links > li.lnk_form2{top:10px; left:-300px; } .quick_links_active .quick_links > li.lnk_form3{top:10px; left:-225px; } .quick_links_active .quick_links > li.lnk_form4{top:10px; left:-150px; } .quick_links_active .quick_links > li.lnk_form5{top:10px; left:-75px; } .quick_links{top:200px; } .quick_links > li.m_quick_active{position:relative; z-index:1; display:block; opacity:1; visibility:visible; } .quick_links > li.lnk_form1.over > a > span:before, .quick_links > li.lnk_form1.active > a > span:before{background-position:0 -20px; } .quick_links > li.lnk_form2.over > a > span:before, .quick_links > li.lnk_form2.active > a > span:before{background-position:-25px -20px; } .quick_links > li.lnk_form3.over > a > span:before, .quick_links > li.lnk_form3.active > a > span:before{background-position:-50px -20px; } .quick_links > li.lnk_form4.over > a > span:before, .quick_links > li.lnk_form4.active > a > span:before{background-position:-75px -20px; } .quick_links > li.lnk_form5.over > a > span:before, .quick_links > li.lnk_form5.active > a > span:before{background-position:-101px -20px; } .quick_info_box .menu_info{height:60px; padding:0; } .quick_info_box .menu_info h5{line-height:60px; float:left; } .quick_info_box .menu_info span{line-height:60px; float:left; } .quick_info_box .quickLinks_close{top:0; right:0; width:60px; height:60px; border-radius:0; } .quick_info_box .quickLinks_close:after{display:none; } .quick_links_active{overflow:hidden; } .quick_links_active .quick_links{z-index:999; } .quick_info_box{position:fixed; top:-100%; right:-.25rem; width:100vw; max-height:100vh; height:500px; -webkit-transform:translateY(-189px); transform:translateY(-189px); z-index:1; } .quick_info_box:before{position:fixed; top:0; left:0; width:100%; height:100vh; background:rgba(0,0,0,.2); content:''; z-index:-1; } .quick_info_box > div{width:100%; max-width:100%; padding:0 2.5% 1rem; border-radius:0; } .quick_links > li.active .quick_info_box{-webkit-transform:translateY(-80px); transform:translateY(-80px); } /* 사용자별 메뉴 : 끝 ********/ /* 사용자별 메뉴 : 시작 ********/ /* 사용자별 메뉴 : 끝 ********/ /* common 레이아웃 : 끝 *******************************/ /* footer : 시작 ********/ #footer{width:100%; margin-left:0; padding:1rem 2.5% 2rem; } #footer .f_box:before{display:none; } #footer .f_box{padding-left:0; } #footer .address_lst > li > span{font-size:.7rem; } /* footer : 끝 ********/ /* sub 레이아웃 : 시작 *******************************/ /* sub common : 시작 */ .sub_content_wrap{width:100%; margin:60px 0 0; } .subCntBody{min-height:auto; } /* sub common : 끝 */ /* 서브비주얼 : 시작 */ .sub_visual{height:250px; } .sub_visual .txt1{padding-top:2.5rem; font-size:2rem; } .sub_visual .txt2{font-size:1.25rem; } /* 서브비주얼 : 끝 */ /* sub 레이아웃 : 끝 *******************************/ } @media screen and (-ms-high-contrast: active) and (max-width: 1200px), (-ms-high-contrast: none) and (max-width: 1200px){ .quick_links > li.active .quick_info_box{display:block !important; transform:translateY(0) !important; transition:0s !important; } .quick_info_box{display:none !important; top:0 !important; right:0 !important; transform:translateY(0) !important; transition:0s !important; } } @media screen and (max-width:768px){ /* common 레이아웃 : 시작 *******************************/ /* 사용자별 메뉴 : 시작 ********/ .quick_menu_wrapper{max-height:300px; } .quick_info_box .quick_menu_wrap .quick_menu{width:33.333%; height:100px; } .quick_info_box .quick_menu_wrap .quick_menu > a > span{padding-top:2.5rem; } .quick_info_box .quick_menu_wrap .quick_menu > a > span:before{margin-left:-20px; width:40px; height:40px; background-size:1240px 40px; } .quick_info_box .quick_menu_wrap .quick_menu2 > a > span:before{background-position:-40px 0; } .quick_info_box .quick_menu_wrap .quick_menu3 > a > span:before{background-position:-80px 0; } .quick_info_box .quick_menu_wrap .quick_menu4 > a > span:before{background-position:-120px 0; } .quick_info_box .quick_menu_wrap .quick_menu5 > a > span:before{background-position:-160px 0; } .quick_info_box .quick_menu_wrap .quick_menu6 > a > span:before{background-position:-200px 0; } .quick_info_box .quick_menu_wrap .quick_menu7 > a > span:before{background-position:-240px 0; } .quick_info_box .quick_menu_wrap .quick_menu8 > a > span:before{background-position:-280px 0; } .quick_info_box .quick_menu_wrap .quick_menu9 > a > span:before{background-position:-320px 0; } .quick_info_box .quick_menu_wrap .quick_menu10 > a > span:before{background-position:-360px 0; } .quick_info_box .quick_menu_wrap .quick_menu11 > a > span:before{background-position:-400px 0; } .quick_info_box .quick_menu_wrap .quick_menu12 > a > span:before{background-position:-440px 0; } .quick_info_box .quick_menu_wrap .quick_menu13 > a > span:before{background-position:-480px 0; } .quick_info_box .quick_menu_wrap .quick_menu14 > a > span:before{background-position:-520px 0; } .quick_info_box .quick_menu_wrap .quick_menu15 > a > span:before{background-position:-560px 0; } .quick_info_box .quick_menu_wrap .quick_menu16 > a > span:before{background-position:-600px 0; } .quick_info_box .quick_menu_wrap .quick_menu17 > a > span:before{background-position:-640px 0; } .quick_info_box .quick_menu_wrap .quick_menu18 > a > span:before{background-position:-680px 0; } .quick_info_box .quick_menu_wrap .quick_menu19 > a > span:before{background-position:-720px 0; } .quick_info_box .quick_menu_wrap .quick_menu20 > a > span:before{background-position:-760px 0; } .quick_info_box .quick_menu_wrap .quick_menu21 > a > span:before{background-position:-800px 0; } .quick_info_box .quick_menu_wrap .quick_menu22 > a > span:before{background-position:-840px 0; } .quick_info_box .quick_menu_wrap .quick_menu23 > a > span:before{background-position:-880px 0; } .quick_info_box .quick_menu_wrap .quick_menu24 > a > span:before{background-position:-920px 0; } .quick_info_box .quick_menu_wrap .quick_menu25 > a > span:before{background-position:-960px 0; } .quick_info_box .quick_menu_wrap .quick_menu26 > a > span:before{background-position:-1000px 0; } .quick_info_box .quick_menu_wrap .quick_menu27 > a > span:before{background-position:-1040px 0; } .quick_info_box .quick_menu_wrap .quick_menu28 > a > span:before{background-position:-1080px 0; } .quick_info_box .quick_menu_wrap .quick_menu29 > a > span:before{background-position:-1120px 0; } .quick_info_box .quick_menu_wrap .quick_menu30 > a > span:before{background-position:-1160px 0; } .quick_info_box .quick_menu_wrap .quick_menu31 > a > span:before{background-position:-1200px 0; } .quick_info_box .quick_menu_wrap .quick_menu > a:hover > span:before, .quick_info_box .quick_menu_wrap .quick_menu > a:focus > span:before{-webkit-transform:rotateY(0deg); transform: rotateY(0deg); } .quick_info_box .quickLinks_close:hover > i, .quick_info_box .quickLinks_close:focus > i{-webkit-transform:translate(-50%, -50%) rotate(0deg); transform:translate(-50%, -50%) rotate(0deg); } .quick_links > li.over > a{color:#333; box-shadow:3px 3px 0 #8ea0b1; } .quick_links > li.over > a:before{top:100%; } .quick_links > li.lnk_form1.over > a > span:before{background-position:0 0; } .quick_links > li.lnk_form2.over > a > span:before{background-position:-25px 0; } .quick_links > li.lnk_form3.over > a > span:before{background-position:-50px 0; } .quick_links > li.lnk_form4.over > a > span:before{background-position:-75px 0; } .quick_links > li.lnk_form5.over > a > span:before{background-position:-100px 0; } /* 사용자별 메뉴 : 끝 ********/ /* footer : 시작 ********/ #footer .f_lnk > li > a:before{display:none; } #footer .address_lst > li{width:33.333%; height:120px; } #footer .address_lst{position:relative; } #footer .address_lst > li:first-of-type:before, #footer .address_lst > li:last-of-type:after{position:absolute; top:50%; left:0; -webkit-transform:translateY(-50%); transform:translateY(-50%); width:1px; height:90px; border-left:1px dashed #fff; content:''; } #footer .address_lst > li:last-of-type:after{left:auto; right:0; } /* footer : 끝 ********/ /* common 레이아웃 : 끝 *******************************/ /* sub 레이아웃 : 시작 *******************************/ /* 서브메뉴 : 시작 */ #menu .lnb > li{display:none; } #menu .lnb > li.home{display:none; } #menu .lnb > li:last-of-type{width:100%; display:block; border-left:1px solid rgba(255,255,255,.2); } #menu .lnb > li:nth-of-type(2) > a{padding:0 2rem 0 .5rem; border-left:1px solid rgba(255,255,255,.2); } #menu .lnb > li.d01 > a:before{right:.5rem; } #menu .subLnb li a:hover > span:before, #menu .subLnb li a:focus > span:before, #menu .subLnb li a:active > span:before{width:0; } /* 서브메뉴 : 끝 */ /* 서브비주얼 : 시작 */ .sub_visual{height:200px; text-align:center; } .sub_visual .txt1{padding-top:2rem; font-size:1.5rem; } .sub_visual .txt2{font-size:.95rem; } /* 서브비주얼 : 끝 */ /* sub 타이틀 : 시작 */ .title_area{margin:1.5rem 0 1rem; } .title_area .pageTitle{font-size:1.25rem; text-align:center; float:none; width:100%; } /* sub 타이틀 : 끝 */ /* 서브 side 기능 : 시작 */ .sub_tit_tside{display:none; } /* 서브 side 기능 : 끝 */ /* sub 레이아웃 : 끝 *******************************/ } @media screen and (max-width:480px){ /* common 레이아웃 : 시작 *******************************/ /* 모바일 메뉴 : 시작 ********/ #mobNav .box .b_side_wrap .drt_lnk > li > a{text-align:center; } #mobNav .box .b_side_wrap .drt_lnk > li > a:before, #mobNav .box .b_side_wrap .drt_lnk > li > a > span:before{display:none; } #mobNav .box .b_side_wrap .drt_lnk > li > a > span{padding-left:0; } #mobNav .tside > li + li{margin-left:.5rem; } #mobNav .tside > li > a, #mobNav .tside > li > a > em{font-size:.65rem; } /* 모바일 메뉴 : 끝 ********/ /* 사용자별 메뉴 : 시작 ********/ .quick_links > li > a > span{font-size:.5rem; } .quick_links > li > a > span:before{left:17px; } .quick_links > li:before{width:60px; height:60px; } .quick_links > li.m_quick_active > a{width:60px; height:60px; } .quick_links_active .quick_links > li.lnk_form > a{width:60px; height:60px; } .quick_links_active .quick_links > li.lnk_form1{top:-30px; left:-202px; } .quick_links_active .quick_links > li.lnk_form2{top:-30px; left:-134px; } .quick_links_active .quick_links > li.lnk_form3{top:-30px; left:-65px; } .quick_links_active .quick_links > li.lnk_form4{top:37px; left:-134px; } .quick_links_active .quick_links > li.lnk_form5{top:37px; left:-65px; } .quick_info_box .menu_info h5{display:none; } .quick_info_box .menu_info span{font-size:.75rem; } .quick_info_box, .quick_links > li.active .quick_info_box{-webkit-transform: translateY(-110px); transform: translateY(-110px); } /* 사용자별 메뉴 : 끝 ********/ /* footer : 시작 ********/ #footer .f_lnk > li{font-size:.7rem; } #footer .address_lst > li > strong{font-size:.75rem; } #footer .address_lst > li{width:50%; height:120px; } #footer .address_lst > li:first-of-type:before, #footer .address_lst > li:nth-of-type(3):before, #footer .address_lst > li:nth-of-type(3):before, #footer .address_lst > li:last-of-type:before{display:none; } /* footer : 끝 ********/ /* common 레이아웃 : 끝 *******************************/ } @media screen and (max-width:380px){ /* common 레이아웃 : 시작 *******************************/ /* 사용자별 메뉴 : 시작 ********/ .quick_info_box .quick_menu_wrap .quick_menu{width:50%; } /* 사용자별 메뉴 : 끝 ********/ /* common 레이아웃 : 끝 *******************************/ } @media screen and (max-width:1869px){ /* common 레이아웃 : 시작 *******************************/ /* left menu gnb : 시작 */ #header .gnb{overflow-y:scroll; } /* left menu gnb : 끝 */ /* common 레이아웃 : 끝 *******************************/ }