@import url("/00_common/font/SCDream/fonts.css"); #wrap { position: relative; overflow:hidden; font-family:"SCDream"; } .container { position: relative; width:100%; max-width:70rem; margin:0 auto; } .container:after { content:""; display:block; clear:both; } /* slick slide common */ .slick-slider { -webkit-transition: all ease-in-out .3s; transition: all ease-in-out .3s; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-slide { display: none; height: 100%; min-height: 1px; vertical-align: middle; } .slick-list { overflow: hidden; } .slick-list.dragging { cursor: pointer; } .slick-initialized .slick-slide { display: inline-block; } .slick-arrow.slick-hidden { display: none; } .slick-current { opacity: 1; display: block; } .slick-track { position: relative; left: 0; top: 0; display: block; margin-left: auto; margin-right: auto; } /* slick arrow show */ .arwShow .slick-arrow.slick-hidden { display: inline-block; } /* header */ #header { position: relative; margin: 0 auto; height:7rem; background: #fff; z-index: 102; } #header:before { position: absolute; top: 4rem; left: 0; width: 100%; height: 1px; background: #ccc; z-index:100; content: ""; } #header .top { width:96%; height: 4rem; padding:1.25rem 0 0; text-align:right; } #header .top:after { clear: both; display: block; content: ""; } #header h1 { position: absolute; top: 22px; left: 0; } #header h1 a { display:block; } #header .top_menu { position: relative; display:inline-block; } #header .top_menu li { position:relative; float: left; font-size: 0.7rem; color: #555; font-weight: 600; line-height: 2rem; } #header .top_menu li a { position: relative; display: block; padding: 0 10px; } #header .top_menu li a:hover, #header .top_menu li a:focus { text-decoration:underline; } #header .top_menu li + li:before { position: absolute; top: 16px; left: 0; width: 4px; height: 4px; background: #9ea6af; border-radius: 50%; content: ""; } #header .top_menu li.fs_ctrl{padding-left:.5rem; color:#1f467b; } #header .top_menu li.fs_ctrl > div{display:inline-block; vertical-align:top; margin-left:.25rem; } #header .top_menu li.fs_ctrl > div > a{position:relative; display:inline-block; width:1.6rem; height:1.6rem; background-color:#e2edfa; border-radius:50%; vertical-align: middle; -webkit-transition:background .3s; transition:background .3s; } #header .top_menu li.fs_ctrl > div > a:before{position:absolute; top:50%; left:50%; width:100%; height:100%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); background-image:url('/00_common/images/common/fs_ctrl.png'); background-repeat:no-repeat; background-size:cover; background-position:0 0; content:""; } #header .top_menu li.fs_ctrl > div > a.fs_ctrl_reset_btn:before{background-position:-1.6rem 0; } #header .top_menu li.fs_ctrl > div > a.fs_ctrl_mius_btn:before{background-position:-3.2rem 0; } #header .top_menu li.fs_ctrl > div > a:hover, #header .top_menu li.fs_ctrl > div > a:focus{background:#cedbf3; } #header .mBtn{ display:none; } /* 검색 */ .box_search_0{position:absolute; top:50%; left:50%; width:18.5rem; height:2.25rem; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); } .box_search_0 input{ width:calC(100% - 2.25rem); padding:0 1rem; height:2.25rem; border-radius:.7rem .7rem 0 .7rem; font-size:0.75rem; border:none; background:#f0f7ff; float:left; } .box_search_0 .srch_btn{padding:0; width:2.25rem; height:2.25rem; background:#347ad1; text-align:center; border-radius:.7rem .7rem .7rem 0; font-size:1.1rem; color:#fff; } .box_search_0 input::-webkit-input-placeholder{color:#444; } .box_search_0 .btnSearchClose{position:absolute; display:none; top:-3.5rem; left:0; width:3.5rem; height:3.5rem; background:#1e4096; line-height:3.5rem; color:#fff; font-size:1.2rem; text-align:center; } #searchOpen{display:none; } /* web navigation */ /* gnb common */ #blind{display:none; position:absolute; left:0; top:3rem; width:100%; height:200vh; background:rgba(0,0,0,0.5); z-index:1; } #nav{ position:relative; width:100%; z-index:99; } #gnb{ position:relative; height:50px; z-index:2; } #gnb:before{ content:''; position:absolute; left:0; top:calc(2.9rem + 2px); width:100%; height:2px; background:#1f467b; z-index:2; } #gnb li a{ position:relative; display:block; font-weight:400; } #gnb li a span{ position:relative; z-index: 2; } #gnb .depth01{ width:100%; max-width:70rem; margin:0 auto; z-index:1; } #gnb .depth01.depWidth > ul { display:table; } #gnb .depth01.depWidth > ul > li{ display:table-cell; } #gnb .depth01.depWidth > ul > li > a{ padding:0; } #gnb .depth01 > ul{ text-align:center; width:100%; font-size:0; line-height:0; } #gnb .depth01 > ul > li{ display:inline-block; vertical-align:top; font-size:.8rem; line-height:1.6; } #gnb .depth01 > ul > li.on > a{ color:#1f467b; } #gnb .depth01 > ul > li > a{ display:inline-block; width:auto; height:3rem; line-height:1.2; font-size:0.95rem; color:#333; font-weight:600; } #gnb .depth01 > ul > li > a > span{ position:relative; display:flex; height:100%; justify-content: center; align-items: center; } #gnb .depth01 > ul > li > a > span:before{ content:""; position:absolute; bottom:0; left:50%; width:0px; height:2px; background:#007dda; } #gnb .depth01 > ul > li > a > span:after{ content:""; position:absolute; top:calc(50% - 20px); right:-7px; width:7px; height:7px; border-radius:50%; background:#007dda; transform: scale(0); -webkit-transform: scale(0); transition: all .2s; -webkit-transition: all .2s; } #gnb .depth01 > ul > li > a[target='_blank']:after{ content:"\e980"; display:inline-block; padding-left:.25rem; font-family: 'xeicon'; font-size:.9rem; } #gnb .depth01 > ul > li.on > a > span:before{ left:0; width:100%; } #gnb .depth01 > ul > li.on > a > span:after{ transform: scale(1); -webkit-transform: scale(1); } #gnb .depth02{ width:100%; height:auto; text-align:left; } #gnb .depth02 > ul{ padding:.75rem; } #gnb .depth02 > ul > li + li{ margin-top:.35rem; } #gnb .depth02 > ul > li.dep > a{ padding-right:2rem; } #gnb .depth02 > ul > li.dep > a:before{content:'\e913'; position:absolute; font-family: 'xeicon'; z-index: 2; font-weight:400; } #gnb .depth02 > ul > li > a{ font-size:.75rem; padding:.5rem 1rem .5rem 1rem; background:#eaf7ff; border-radius:.75rem; font-weight: 600; } #gnb .depth02 > ul > li > a[target='_blank'] > span:after{ content:"\e980"; display:inline-block; padding-left:.25rem; font-family: 'xeicon'; vertical-align: middle; font-size:.8rem; } #gnb .depth03{ position:relative; display:none; } #gnb .depth03 > ul{ padding:.5rem; } #gnb .depth03 > ul > li + li{margin-top:.25rem; } #gnb .depth03 > ul > li > a{ font-size:.7rem; padding-left:15px; color:#000; } #gnb .depth03 > ul > li > a:before{ content:""; position:absolute; left:0; top:.25rem; width:9px; height:13px; background:url('/00_common/images/common/dots_gnbFull.png') no-repeat; opacity: .5; } #gnb .depth03 > ul > li > a[target='_blank'] > span:after{ content:"\e980"; display:inline-block; padding-left:.15rem; font-family: 'xeicon'; vertical-align: middle; font-size:.7rem; } #gnb .depth03 > ul > li > a:hover{ color: #1f467b; font-weight: 600; } #gnb .depth03 > ul > li > a:hover:before{ opacity: 1; } #gnb .titBox{ display:none; } #gnb:before, #nav a, #gnb li > a:before, #gnb li > a:after, #gnb li > a > span:before{ transition: all .1s; -webkit-transition: all .1s; } #gnb .active > .depth03{ display:block; } #gnb .depth02 > ul > li > a:hover{color:#007edd; } #gnb .depth02 > ul > li.dep.active > a:before{content:'\e91a'; } #gnb .depth02 > ul > li.active > a{ background:#007edd; color:#fff; } /* gnb : fullDown */ #nav.fullDown .topGnb{ position:relative; height:3rem; width:100%; max-width:70rem; margin:0 auto; z-index:1; overflow:hidden; padding-right:2rem; } #nav.fullDown .topGnb ul{ display:flex; } #nav.fullDown .topGnb li{ flex:1; text-align: center; } #nav.fullDown .topGnb li a{ display:inline-block; width:auto; height:3rem; line-height:1.2; font-size:0.95rem; color:#333; font-weight:600; } #nav.fullDown .topGnb li a span{ position:relative; display:flex; height:100%; justify-content: center; align-items: center; } #nav.fullDown .topGnb li a span:before{ content:""; position:absolute; bottom:0; left:50%; width:0px; height:2px; background:#007dda; } #nav.fullDown .topGnb li a span:after{ content:""; position:absolute; top:calc(50% - 20px); right:-7px; width:7px; height:7px; border-radius:50%; background:#007dda; transform: scale(0); -webkit-transform: scale(0); transition: all .2s; -webkit-transition: all .2s; } #nav.fullDown #gnb{ height:3rem; } #nav.fullDown #gnb:after{ content:""; position:absolute; left:0; top:1px; width:100%; height:calc(100% + 1px); background:#fff; z-index:0; opacity: 0; box-shadow:0 5px 10px rgba(0,0,0,0.1); border-bottom: 2px solid #1f467b; } #nav.fullDown ul, #nav.fullDown li{ height:100%; } #nav.fullDown .depth01{ position:relative; max-width:100%; display:none; padding:1.5rem; } #nav.fullDown .depth01 > ul{ display:table; } #nav.fullDown .depth01 > ul > li{ position:relative; display:table-cell; padding:0 .75rem; } #nav.fullDown .depth01 > ul > li > a{ display:block; height:auto; min-height:2.5rem; justify-content: flex-start; border-bottom:2px solid #ccc; padding-bottom:.75rem; } #nav.fullDown .depth01 > ul > li > a:after{ content:"\e94a"; position:absolute; right:0; top:0; width:1.75rem; height:1.75rem; line-height:1.75rem; border-radius:50%; background:#a6d9f6; font-family: 'xeicon'; color:#fff; } #nav.fullDown .depth01 > ul > li.on > a{ color:#1f467b !important; font-weight: 700; } #nav.fullDown .depth01 > ul > li > a > span{ justify-content: flex-start; padding-top:.25rem; } #nav.fullDown .depth01 > ul > li > a > span:before{ display:none; } #nav.fullDown .depth02{ position:relative; left:auto; top:auto; opacity: 0; visibility: hidden; transition-delay: .0s; } #nav.fullDown .depth02 > ul {padding:0.5rem 0 1rem; } #nav.fullDown .depth02 > ul > li.dep > a:before{ right:0.75rem; top:0.5rem; } #nav.fullDown .depth03 > ul > li > a{font-size:.7rem; border:none; } #nav.fullDown .depth03 > ul > li > a:after{ display:none; } /** fullDown:active **/ #nav.fullDown #gnb.active{ height:auto; } #nav.fullDown #gnb.active:after{ opacity: 1; } #nav.fullDown .topGnb li.on a span:before{ left:0; width:100%; } #nav.fullDown .topGnb li.on a span:after{ transform: scale(1); -webkit-transform: scale(1); } #nav.fullDown .active .depth01 {height:auto; display:block; } #nav.fullDown .active .depth02{ opacity: 1; visibility: visible; } #nav.fullDown .depth01 > ul > li.on > a{ color:#005fa9; border-color:#005fa9; } #nav.fullDown .depth01 > ul > li.on > a:after{ background:#017ddd; } #nav.fullDown .depth02 > ul > li.active{ border-radius:1rem; box-shadow:0 0 5px rgba(0,0,0,0.2); } #nav.fullDown .depth02 > ul > li.active > a{color:#fff; background: #007edd; font-weight: 700; } #nav.fullDown .depth02 > ul > li.active > a::after{opacity: 1; width: calc(100% + 0.75rem); } /* gnb : oneDown */ #nav.oneDown #gnb{ height:3rem; } #nav.oneDown ul, #nav.oneDown li{ height:100%; } #nav.oneDown .depth01{ position:relative; padding-right:2rem; } #nav.oneDown .depth01 > ul{ width:100%; text-align:center; } #nav.oneDown .depth01 > ul > li{ position:relative; display:inline-block; float:none; } #nav.oneDown .depth02{ position:absolute; width:120%; left:-10%; top: 3rem; opacity: 0; visibility: hidden; transition-delay: .0s; border-radius:0 0 1rem 1rem; text-align:left; background:#fff; box-shadow: 2px 2px 5px rgba(0,0,0,0.3); } #nav.oneDown .depth02 > ul > li > a{padding:.5rem; } #nav.oneDown .depth02 > ul > li.dep > a{ padding-right:2rem; } #nav.oneDown .depth02 > ul > li > a > span{z-index:0; padding:0 .25rem; position: relative; z-index: 2; } #nav.oneDown .depth02 > ul > li.dep > a:before{ right:0.75rem; top:0.5rem; } #nav.oneDown .depth03{background:#fff; } /** oneDown : active **/ #nav.oneDown .depth01 > ul > li.on > .depth02{ opacity: 1; visibility: visible; display:block; } /* gnb : oneFull */ #nav.oneFull #gnb{ height:3rem; } #nav.oneFull ul, #nav.oneFull li{ height:100%; } #nav.oneFull .depth01{ padding-right:2rem; } #nav.oneFull .depth01 > ul{ width:100%; text-align:center; font-size:0; line-height:0; } #nav.oneFull .depth01 > ul > li{ display:inline-block; float:none; vertical-align: top; font-size:.8rem; line-height:1.6; } #nav.oneFull .depth02{ display:none; position:absolute; left:0; top:3rem; min-height:20.5rem; transition-delay: .0s; text-align:left; } #nav.oneFull .depth02:before{ content:""; position:absolute; left:0; top:0; width:100%; height:0; background:#fff; z-index:0; opacity: 0; box-shadow:0 5px 10px rgba(0,0,0,0.1); } #nav.oneFull .depth02 > ul{ width:100%; max-width:70rem; margin:0 auto; padding:2rem 0 2rem 16rem; font-size:0; line-height:0; } #nav.oneFull .depth02 > ul > li{ width:25%; display:inline-block; vertical-align: top; padding:.5rem; font-size:.8rem; line-height:1.6; } #nav.oneFull .depth02 > ul > li + li{ margin-top:0; } #nav.oneFull .depth02 > ul > li > a{ z-index: 1; } #nav.oneFull .depth02 > ul > li > a:before{ position:absolute; right:0.75rem; top:0.5rem; width:1.5rem; height:1.5rem; line-height:1.5rem; text-align:center; color:#fff; font-size:.8rem; border-radius:50%; background:#a6d9f6; font-family: 'xeicon'; font-weight:400; } #nav.oneFull .depth02 > ul > li.dep > a:before{ content:"\e94a"; } #nav.oneFull .depth02 > ul > li > a[target="_blank"]:before{ content:"\e980"; } #nav.oneFull .depth02 > ul > li > a[target="_blank"] > span:after{ display:none; } #nav.oneFull .depth02 > ul > li > a{font-size:.85rem; border:2px solid #a6d9f6; background:none; } #nav.oneFull .depth03{ background:#f3faff; border-radius:1rem; margin-top:-1rem; padding:1.25rem .5rem .5rem; } #nav.oneFull .titBox{ display:block; position:absolute; left:calc(50% - 35rem); top:0; width:15rem; height:100%; padding:2.5rem 1rem; } #nav.oneFull .titBox:before{ content:""; position:absolute; right:0; top:0; width:400%; height:100%; background:#e3f5ff url('/00_common/images/common/gnb_oneFull_bg.png') no-repeat calc(100% - 6rem) calc(100% - 1rem); } #nav.oneFull .titBox:after{ content:""; position:absolute; left:1rem; top:12rem; width:5rem; height:5rem; background:url('/00_common/images/common/gnb_oneFull_ico.png') no-repeat center/cover; z-index: 1; } #nav.oneFull .titBox > *{ position:relative; display:block; } #nav.oneFull .titBox strong{ padding-bottom:1.2rem; margin-bottom:1rem; font-size:1.2rem; font-weight:700; color:#0077d1; } #nav.oneFull .titBox strong:before{ content:""; position:absolute; left:0; bottom:0; width:4rem; height:3px; background:#0077d1; } /** oneFull:active **/ #nav.oneFull #gnb.active{ height:auto; } #nav.oneFull .depth02 > ul > li:not(.active) > a:hover{color:#007dda; border-color:#007dda; } #nav.oneFull .depth02 > ul > li.dep.active > a{ color:#fff; border-color:#007dda; background:#007dda; } #nav.oneFull .depth02 > ul > li.dep > a:hover:before{ background:#007dda; } #nav.oneFull .depth02 > ul > li.dep.active > a:before{ content:"\e94a"; background:#fff; color: #007dda; } #nav.oneFull .depth01 > ul > li.on > .depth02{ display:block; } #nav.oneFull .depth01 > ul > li.on > .depth02:before{ height:100%; opacity: 1; transition-delay: 0s; -webkit-transition-delay: 0s; } /* 전체메뉴 */ .fullmenu{position:absolute; z-index:998; bottom:0; right:calc(50% - 35rem); width:2rem; height:3rem; text-align:center; font-size:1.65rem; line-height:3rem; color:#1f4778; } .fullmenuClose{position:absolute; top:1.25rem; right:.75rem; width:2.5rem; height:2.5rem; text-align:center; line-height:2.5rem; font-size:1.25rem; border-radius:.75rem .75rem .75rem 0; background:#0066b1; color:#fff; transition: all .2s; -webkit-transition: all .2s; } .fullmenuClose:hover{ border-radius:.75rem 0 .75rem .75rem; background:#005fa9; } .popFullmenu{display:none; position:fixed; left:0; top:0; width:100%; height:100vh; background:#f7fcff; z-index:999; } .popFullmenu .fullmenu_wrap{position:relative; height:100%; overflow:hidden; } .popFullmenu .fullmenu_group{ height:100%; } .popFullmenu h2{ position:relative; max-width:72rem; height:5rem; line-height:5rem; display:flex; align-items:center; margin:0 auto; font-size:1.25rem; color:#000; padding:0 1rem; font-weight:700; line-height:1; } .popFullmenu h2:before{ content:""; position:absolute; left:-50%; top:0; width:200%; height:100%; background:#fff; border-bottom:1px solid #ccc; z-index:-1; } .popFullmenu h2 span{ position:relative; display:block; padding-right:1.5rem; } .popFullmenu h2 span:after{ content:""; position:absolute; right:.75rem; top:calc(50% - .5rem); height:1rem; border-left:2px solid #ccc; } .popFullmenu .titBox{ display:none; } .popFullmenu .depth01 { max-width:72rem; max-height:calc(100% - 9rem); padding:0 1rem; margin:2rem auto; overflow-y: auto; } /* .popFullmenu .depth01{ scrollbar-arrow-color:#ddd; scrollbar-Track-Color:#ddd; scrollbar-base-color:#aaa; scrollbar-Face-Color:#aaa; scrollbar-3dLight-Color:#aaa; scrollbar-DarkShadow-Color:#aaa; scrollbar-Highlight-Color:#aaa; scrollbar-Shadow-Color:#aaa; } */ .popFullmenu .depth01::-webkit-scrollbar { width:5px; } .popFullmenu .depth01::-webkit-scrollbar-thumb { background-color:#aaa; border-radius:10px; } .popFullmenu .depth01::-webkit-scrollbar-track { background-color:#ddd; border-radius:10px; } .popFullmenu .depth01 > ul > li{ vertical-align:top; font-size:0.8rem; line-height:1.3; } .popFullmenu .depth01 > ul > li + li{ margin-top:2rem; } .popFullmenu .depth01 > ul > li > a{position:relative; display:block; font-size:1.2rem; color:#111; font-weight:700; overflow:hidden; } .popFullmenu .depth02 > ul{ display:flex; flex-wrap: wrap; width:calc(100% + 2rem); margin-top:1rem; margin-left:-1rem; } .popFullmenu .depth02 > ul > li{ width:25%; padding:0 1rem 2.5rem; } .popFullmenu .depth02 > ul > li > a{ position:relative; display:block; position:relative; border-radius:.75rem; border:2px solid #a6d9f8; color:#000; padding:.75rem 1rem; background:#fff; font-weight:600; z-index: 1; } .popFullmenu .depth02 > ul > li > a:before{ position:absolute; right:0.75rem; top:0.35rem; width:1.75rem; height:1.75rem; line-height:1.75rem; text-align:center; color:#fff; font-size:.85rem; border-radius:50%; background:#a6d9f6; font-family: 'xeicon'; font-weight:400; } .popFullmenu .depth02 > ul > li.dep > a{ padding-right:3rem; } .popFullmenu .depth02 > ul > li.dep > a:before{ content:"\e94a"; } .popFullmenu .depth02 > ul > li > a[target="_blank"]:before{ content:"\e980"; } .popFullmenu .depth03{ padding:1.5rem 1rem .5rem; margin-top:-1rem; background:#fff; border:1px solid #ccc; border-radius: 0 0 .75rem .75rem; } .popFullmenu .depth03 > ul > li{ margin:0.5rem 0; } .popFullmenu .depth03 > ul > li > a{display:block; position:relative; padding-left:15px; font-size:0.75rem; } .popFullmenu .depth03 > ul > li > a:before{content:""; position:absolute; left:0; top:.25rem; width:9px; height:13px; background:url('/00_common/images/common/dots_gnbFull.png') no-repeat center; opacity: .35; } .popFullmenu .depth02 > ul > li > a[target="_blank"] span:after, .popFullmenu .depth03 > ul > li > a[target="_blank"] span:after{ content:"\e980"; font-family: 'xeicon'; display:inline-block; margin-left:.25rem; font-weight: 400; } .popFullmenu .depth01 a, .popFullmenu .depth01 a:before{ transition: all .2s; -webkit-transition: all .2s; } .popFullmenu .depth01 > ul > li > a:hover{ color:#0077d1; } .popFullmenu .depth02 > ul > li > a:hover{ color:#fff; background:#0077d1; border-color:#0077d1; } .popFullmenu .depth02 > ul > li > a:hover:before{ color:#0077d1; background:#fff; } .popFullmenu .depth03 > ul > li > a:hover{ color:#0077d1; font-weight: 600; } .popFullmenu .popUntil{display:none; } /* 전체메뉴 :action */ html.fullmenuOpen{overflow:hidden; } .popFullmenu .fullmenu_group .depth01 > li > a:hover, .popFullmenu .fullmenu_group .depth01 > li > a:focus{color:#fff; } .popFullmenu .fullmenu_group .depth01 > li > a:hover:before, .popFullmenu .fullmenu_group .depth01 > li > a:focus:before{top:0; } .popFullmenu a:hover > span:before, .popFullmenu a:focus > span:before{width:100%; } /* 사이트링크 */ #footer .footBtnWrap{position:relative; display:flex; width:calc(100% + 1rem); margin-left:-.5rem; margin-bottom:2rem; } #footer .footBtnWrap:after{display:block; clear:both; content:""; } #footer .footBtn{position:relative; flex:1; margin:0 .5rem; } #footer .footBtn button{position:relative; display:flex; width:100%; height:55px; align-items: center; justify-content: flex-start; padding:0 2.5rem 0 1.5rem; color:#fff; font-size:.8rem; text-align:left; background:#3a4451; } #footer .footBtn button:before{position:absolute; top:50%; right:1.5rem; -moz-transform:translateY(-50%); -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); font-family:"xeicon"; content:"\e944"; } #footer .footBtn div{display:none; overflow-y:auto; position:absolute; z-index:10000; bottom:55px; left:0; width:calc(100% + 1px); max-height:223px; border:1px solid #728197; border-bottom:0; } #footer .footBtn ul li{border-top:1px solid #5d6a77; font-weight:400; font-size:0.7rem; } #footer .footBtn ul li strong{display:block; padding:0.35rem 0.5rem; background:#343b42; color:#fff799; opacity:1; } #footer .footBtn ul li:first-child{border:0; } #footer .footBtn ul li ul{border-top:1px solid #5d6a77; } #footer .footBtn ul li a{display:block; overflow:hidden; padding:0.35rem 0.5rem; background:#343b42; color:#d4dde7; opacity:0.9; } /* 사이트링크 :action */ #footer .footBtn ul li a:hover, #footer .footBtn ul li a:focus, #footer .footBtn ul li a:active{opacity:1; color:#fff; } #footer .footBtn.on button{background:#2c5e9f; } #footer .footBtn.on button:before{-moz-transform:translateY(-50%) rotate(180deg); -webkit-transform:translateY(-50%) rotate(180deg); -ms-transform:translateY(-50%) rotate(180deg); transform:translateY(-50%) rotate(180deg); } #footer .footBtn button, #footer .footBtn button:before{-moz-transition:all .3s ease; -webkit-transition:all .3s ease; -ms-transition:all .3s ease; transition:all .3s ease; } /* footer */ #footer{position:relative; padding:1rem 0 2rem; color:#fff; font-weight:200; font-size:0.7rem; background:#303945; } #footer .f_info{position:relative; } /* #footer .f_info .f_logo{position:absolute; top:0; left:0; max-width:13rem; } */ #footer .footer_link{margin-bottom:1rem; overflow:hidden;;} #footer .footer_link ul{overflow:hidden; margin:0 -1rem; } #footer .footer_link li{position:relative; float:left; padding:.25rem 1rem; } #footer .footer_link li + li:before{position:absolute; top:calc(50% - 2.5px); left:0; width:5px; height:5px; background:#757b83; content:""; border-radius:50%;} #footer .footer_link li a{display:block; font-size:.75rem; letter-spacing:-0.025em; } #footer .footer_link li:first-child a{padding-left:0; background:none; } #footer .footer_link li a:hover, #footer .footer_link li a:focus{text-decoration:underline; } #footer .footer_link li a strong{color:#4595f8; font-weight:400; } #footer address{line-height:2; } #footer address span{display:block; } #footer .copyright{margin-top:1rem; color:#b8b8b8; } #footer .wa_mark { position:absolute; top:-1rem; right:0; max-width:5.25rem; } #footer .wa_mark img { display:block; } /* 탑버튼 */ .btn_top{position:fixed; width:55px; height:55px; background:#00abad; right:1%; bottom:20px; z-index:998; box-shadow:0 5px 5px rgba(0,0,0,.3); border-radius:50%; -webkit-transition:all 600ms ease; transition:all 600ms ease; } .btn_top:before{position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); font-family:"xeicon"; color:#fff; font-size:1.2rem; content:'\e944'; -webkit-transition:top .3s; transition:top .3s; } .btn_top:hover:before, .btn_top:focus:before{top:calc(50% - 3px); } /* quickMenu */ .quickMenu{position:fixed; right:-10rem; top:8.5rem; z-index:101; transition: right .2s; -webkit-transition: right .2s; } .quickMenu .toggleBtn{position:absolute; left:-2rem; top:0.5rem; width:3.5rem; height:3rem; border-radius:0.75rem; padding-left:.5rem; background:rgba(0,0,0,0.7); box-shadow: 0 0 10px rgba(0,0,0,0.2); z-index:-1; } .quickMenu .toggleBtn:before{content:"\e93c"; display:inline-block; color:#fff; line-height:3rem; font-size:1.2rem; font-family: 'xeicon'; } .quickMenu .inner {position: relative; background:#fff; border: 0.5rem solid #0077d1; border-radius:1.1rem; box-shadow: 0 0 10px rgba(0,0,0,0.2); } .quickMenu h3{height: 2.5rem; line-height: 2.5rem; text-align:center; color:#0077d1; font-weight: 700; font-size:1rem; z-index:100; } .quickMenu ul{padding:0.75rem 1rem; width:9rem; border-top:2px dotted #cacaca; visibility: hidden; } .quickMenu li a{ position:relative; display:block; padding: 0.25rem 0 0.25rem 0.5rem; font-size: 0.75rem; color:#333; word-break: keep-all; } .quickMenu li a:before{content:""; position:absolute; left:0; top:.7rem; width:.25rem; height:.25rem; border-radius:50%; background:#525c6e; } /* active */ .openPop .quickMenu{top:15rem; } .quickMenu.active{right:1rem; } .quickMenu.active ul{visibility :inherit; } .quickMenu.active .toggleBtn:before{content:"\e93f"; } /* 방문자수 */ .visitant { position:absolute; top:3.5rem; right:0; width:23%; height:2rem; background:#00c8c5; border-radius:40px; } .visitant h2 { text-indent:-10000em; font-size:0; } .visitant ul { overflow:hidden; } .visitant ul li { width:49%; float:left; line-height:2rem; text-align:center; color:#002A15; font-size:0.65rem; } .visitant ul li + li { background: url('/00_common/images/common/bar_visitant.png') no-repeat left center; } .visitant ul li strong { margin-right:0.5rem; color:#002A15; font-weight: 400; } /* 구글 번역 */ .gbSchlTrans {position: absolute; top: 6rem; right:0; display: inline-block; width:23%; vertical-align: middle; border: 1px solid #d1d8e4; background: #fff; border-radius: 1.5rem;} .goog-te-gadget-simple {position: relative; display: block !important; padding: 0.5rem 1.25rem !important; font-size: 0.7rem !important; background-color: #fff !important; border: none !important; border-radius: 1.5rem; cursor: pointer; zoom: 1;} .goog-te-gadget-icon {margin-left: 5px; margin-right: 5px;} .goog-te-gadget img {border-radius: 50%;} .goog-te-gadget-simple .goog-te-menu-value span {font-family: 'NotoSans';} .goog-te-gadget-simple .goog-te-menu-value img + span {position: absolute; top: 0.65rem; right: 1.25rem; font-size: 0.5rem !important; color: #000 !important; border: none !important;} /* 서브레이아웃 */ #sub_container{position:relative; background:#fff; } #sub_container:after{content:""; display:block; clear:both; } .sub_content{position:relative; max-width:72rem; padding:0 1rem; margin:1.5rem auto 3rem; overflow:hidden; } .sub_content > div{position:relative; width:14.5rem; float:left; } /* 서브메뉴 */ #snb{position:relative; } #snb h2{ display:flex; width:100%; height:6rem; align-items:center; justify-content: center; color:#fff; font-weight:600; font-size:1.2rem; line-height:1.3; background:#007cd6; border-radius:1rem;} #snb h2 span{ display:block; padding-top:.75rem; background:url('/00_common/images/common/dots_lnb.png') no-repeat center top;} #snb .lnb li, #snb .lnb li a{ position:relative; display:block;} #snb .lnb li a > span{ position:relative; } #snb .lnb > li > a{ width:100%; padding:.75rem; font-size:.85rem; font-weight:600; border-radius:.75rem; border:2px solid #eef7ff; background:#eef7ff; } #snb .lnb > li > a:before{ position:absolute; right:.75rem; top:.8rem; font-family: 'xeicon'; } #snb .lnb > li.dep > a:before{ content:"\e913"} #snb .lnb > li > a[target="_blank"]:before{content:"\e980";} #snb .lnb > li > a > span{display:table-cell; vertical-align:middle; width:100%; padding:0 1rem; } #snb .subLnb{display:none; padding:1.5rem .75rem .75rem; border:1px solid #e3e3e3; margin-top:-.75rem; border-radius:0 0 1rem 1rem; background:#fff; box-shadow:1px 1px 3px rgba(0,0,0,0.1);} #snb .subLnb > li{ margin:.35rem 0;} #snb .subLnb > li > a{position:relative; display:block; font-size:.75rem; padding-left:15px; font-weight:400; color:#000; } #snb .subLnb > li > a:before{content:""; position:absolute; left:0; top:.25rem; width:9px; height:13px; background:url('/00_common/images/common/dots_gnbFull.png') no-repeat center; opacity: .35; } #snb .subLnb > li > a[target="_blank"] > span:after{content:"\e980"; display:inline-block; margin-left:0.25rem; vertical-align:middle; font-family:"xeicon"; font-weight:400; } #snb .lnb > li{margin-top:.35rem; } /* active */ #snb .lnb a, #snb .lnb a:before{ transition: all .2s; -webkit-transition: all .2s;} #snb .lnb > li.open > a{border-color:#007cd6; background:#fff; color:#005fa5; } #snb .lnb > li.open > a:before {content:"\e91a";} #snb .lnb > li.open > a > span:before{content:"\e913"; color:#fff; } #snb .lnb > li.open > .subLnb{ display:block;} #snb .lnb > li:not(.open) > a:hover, #snb .lnb > li:not(.open) > a:focus{color:#2c61a2; } #snb .subLnb > li > a:hover, #snb .subLnb > li.open > a{color:#007dda; font-weight:600;} #snb .subLnb > li > a:hover:before, #snb .subLnb > li.open > a:before{ opacity: 1;} /* 서브페이지 */ #subContent{position:relative; width:calc(100% - 14.5rem); padding-left:3rem; float:left; } .subContent_body{position:relative; min-height:600px; } /* sub title */ .title_area{position:relative; margin-bottom:2rem; padding:1.25rem 0 .5rem; border-bottom:1px dashed #999; } .title_area:after{display:block; clear:both; content:""; } .title_area #pageTitle{font-size:1.3rem; font-weight: 700; color:#000; } .title_area .title_tside{ display:flex; flex-wrap: wrap; align-items:center;} .title_area .title_tside .location{ flex:1; color:#666; font-weight:400;} .title_area .title_tside .location span, .title_area .title_tside .location strong{position:relative; display:inline-block; padding-left:1.1rem; font-size:14px; } .title_area .title_tside .location span:before, .title_area .title_tside .location strong:before{position:absolute; top:50%; left:.2rem; -webkit-transform:translateY(-50%); transform:translateY(-50%); font-size:14px; font-family:'xeicon'; content:'\e93f'; font-weight:400;} .title_area .title_tside .location strong{ font-weight:600; } /* etc :sns */ .snsBox{position:relative; vertical-align:middle; padding-left:1.5rem; z-index:2; } .snsBox > button{ position:relative; width:2rem; height:2rem; line-height:2rem; text-align:center; color:#555; font-size:1rem; z-index: 1; } .sns_more{display:none; position:absolute; right:2rem; top:0; width:8.5rem; height:2rem; border-radius:2rem; padding:0.35rem 1.5rem; background:#eef7ff; z-index: 0;} .sns_more.active{ display:block;} .sns_more button{position:relative; z-index:1; display:block; width:1.3rem; height:1.3rem; border-radius:50%; padding:0; float:left; margin:0 3px; overflow:hidden; background:#fff;} .sns_more .btnFbook{color: #445d98;} .sns_more .btnTwt{color: #60c1ff;} .sns_more .btnkks{color: #ffb400;} .sns_more .btnShare{color: #007bd6;} .sns_more .btnClose{ position:absolute; left:-.6rem; top:.4rem; width:1.2rem; height:1.2rem; background:#005fa5; color:#fff; font-size:13px;} .snsBox > button:hover, .snsBox > button:focus, .snsBox > button.active{color:#2c61a2; } /* 2022.11.18.CHo,SY 우측 바로가기 영역이 검색영역 침범 */ @media screen and (min-width: 1241px){ #header .top {display: flex; justify-content: space-between; align-items: center; text-align: left; padding: 0;} #header h1 {flex: 1; position: relative; top: auto; left: auto;} .box_search_0 {position: relative; top: auto; left: auto; -webkit-transform: none; transform: none;} } /* media query mobile */ @media screen and (max-width:1460px){ #nav.oneDown .depth01 > ul > li:first-of-type > .depth02{left:0; } #nav.oneFull .depth02 > ul{ padding-left:13rem; } #nav.oneFull .titBox{ left:0; top:0; width:12rem; } #nav.oneFull .titBox:before{ background-position: calc(100% - 3rem) calc(100% - 1rem); } } @media screen and (max-width:1440px){ /* gnb */ #nav.fullDown .depth01{ padding:1.5rem .5rem; } #nav.fullDown .depth01 > ul > li{ padding:0 .25rem; } .fullmenu{ right:.5rem; } .container { padding:0 1rem; } /* 방문자수 */ .visitant {right: 1rem;} /* 구글 번역 */ .gbSchlTrans {right: 1rem;} } @media screen and (max-width: 1280px){ .quickMenu{display:none; } } @media screen and (max-width: 1240px){ #container{ padding-top:3.5rem; } /* openPop */ .openPop #container { padding-top:calc(140px + 3.5rem) !important; } .openPop #header { top: 140px !important; } /* 상단(로고 및 메뉴) */ #header{ position:fixed; left:0; top:0; width:100%; height:3.5rem; border-bottom:1px solid #ddd; } #header:before{ display:none; } #header h1{position:relative; top:auto; left:auto; line-height:3.5rem; text-align:center; } #header h1 a{ display:flex; height:3.5rem; margin:0 3.5rem; align-items: center; justify-content:center; } #header h1 a img{ max-width:100%; height:auto;} #header .top{position:initial; height:100%; padding:0; } #header .top:before{display:none; } #header .top_menu{display:none; } /* 검색 */ #searchOpen{ display:block; position:absolute; top:.5rem; left:.75rem; width:2.5rem; height:2.5rem; background:#357bd3; line-height:2.5rem; color:#fff; font-size:1.2rem; border-radius:.75rem .75rem 0 .75rem; text-align:center; } .box_search_0{ display:none; left:0; top:3.5rem; width:100%; height:auto; padding:1rem; background:#b1d4ff; transform: none; -webkit-transform: none; box-shadow:0 3px 5px rgba(0,0,0,0.2); } .box_search_0 form{ width:calc(100% - 2.5rem); float:left; margin-right:.25rem; } .box_search_0 input{ width:calc(100% - 2.5rem); border:2px solid #007cd6; } .box_search_0 .srch_btn{ border-radius:.5rem .5rem 0 .5rem; margin-left:.25rem; background:#347ad0; } .box_search_0 .btnSearchClose{ position:relative; right:auto; top:auto; width:2.25rem; height:2.25rem; line-height:2.25rem; margin:0; font-size:1.1rem; display:block; border-radius:.5rem .5rem .5rem 0; } /* 웹네비게이션 */ /* gnb common */ #nav{display:none; } /*전체메뉴*/ .fullmenu{top:.5rem; bottom:auto; right:.75rem; width:2.5rem; height:2.5rem; background:#357bd3; line-height:2.5rem; color:#fff; font-size:1.2rem; border-radius:.75rem .75rem .75rem 0; background:#1f4778; } .fullmenuClose{ top:.5rem; } .popFullmenu{ background:#fff; } .popFullmenu h2, .popFullmenu .popUntil > li.fs_ctrl{display:none; } .popFullmenu .popUntil{height:3.5rem; display:flex; flex-wrap: wrap; align-items:center; background:#eef7ff; border-bottom:1px solid #d5dde5; padding-left:.5rem; padding-right:3.5rem; } .popFullmenu .popUntil > li{padding:0 .75rem; font-size:13px; } .popFullmenu .popUntil > li > a{position:relative; line-height:1.4; } .popFullmenu .popUntil > li + li > a:before{position:absolute; top:calc(50% - 2px); left:-.75rem; width:4px; height:4px; border-radius:50%; background:#aaa; content:""; } .popFullmenu .depth01{ position:relative; height:100%; margin:0; padding:0; max-height:100%; } .popFullmenu .depth01:before{ content:""; position:absolute; left:0; top:0; width:40%; height:100%; background:#0077d1; } .popFullmenu .depth01 > ul{ width:40%; } .popFullmenu .depth01 > ul > li + li{ margin-top:0; } .popFullmenu .depth01 > ul > li > a{ display:flex; align-items:center; height:3rem; background:#0077d1; color:#fff; padding:0 1rem; border-bottom:1px solid #85afe3; font-size:.9rem; font-weight:600; } .popFullmenu .depth01 > ul > li > a:before{ content:"\e94a"; position:absolute; right:.75rem; top:.75rem; font-family: 'xeicon'; font-weight:400; } .popFullmenu .depth01 > ul > li.dep > a{ padding-right:2.5rem; } .popFullmenu .depth02{ display:none; position:absolute; left:40%; top:0; width:60%; padding-left:1rem; } .popFullmenu .depth02 > ul{ width:100%; margin:0; } .popFullmenu .depth02 > ul > li{ width:100%; padding:0; } .popFullmenu .depth02 > ul > li > a{ border:0; font-size:.85rem; border-radius:0; border-bottom:1px solid #ddd; padding:.75rem 0; } .popFullmenu .depth02 > ul > li > a:before{ display:none; } .popFullmenu .depth02 > ul > li.dep > a{ padding-right:2rem; } .popFullmenu .depth02 > ul > li.dep > a:before{ content: "\e913"; right:0; background:none; color:#000; display:block; } .popFullmenu .depth03{ display:none; margin:0; padding:.5rem .25rem .5rem .75rem; background:none; border:0; border-bottom:1px solid #ddd; border-radius:0; } .popFullmenu .depth03 > ul > li > a{ color:#000; } .popFullmenu .depth03 > ul > li > a:before{ top:.2rem; width:6px; height:10px; background-size:cover; } .popFullmenu li.active > .depth02, .popFullmenu li.active > .depth03{display:block; } .popFullmenu .depth01 > ul > li.active > a{ background:#fff; color:#0077d1; } .popFullmenu .depth02 > ul > li.active > a{ color:#005fa5; border-color:#005fa5; background:none; } .popFullmenu .depth02 > ul > li.active > a:before{content:'\e91a'; } /* 서브페이지 */ #subContent{width:100%; float:none; padding:0 1rem; } .sub_content{ margin:0 auto 3rem; padding:0;} .sub_content > div{ width:100%; float:none; } .sub_content:before, .sub_content:after, #subContent .btnPrint{display:none; } .sns_more{ width:auto; right:0; height:auto; padding:1.75rem .25rem 1rem;} .sns_more button{ margin:3px 0; float:none;} .sns_more .btnClose{ right:0.25rem; bottom:-.6rem; left:auto; top:auto;} /* 서브메뉴 */ #snb h2{position:relative; width:100%; height:auto; display:block; padding:1rem 2.5rem 1rem 1.25rem; font-size:.9rem; border-radius:0; color:#fff; cursor:pointer; } #snb h2:before{ content:"\e94a"; position:absolute; right:1rem; top:1rem; font-family: 'xeicon';} #snb h2 span{ padding:0; background:none;} #snb nav{display:none; position:relative; max-height:500px; overflow:hidden; overflow-y:auto; padding:.75rem .75rem 1rem; box-shadow:0 2px 2px rgba(0,0,0,0.2);} #snb .lnb > li > a{ padding:.5rem .75rem; font-size:.8rem;} #snb .lnb > li > a:before{ top:.6rem;} #snb .subLnb > li > a{ font-size:.7rem;} } @media (max-width:1024px) { /* footer */ #footer .footBtnWrap{ flex-wrap: wrap; width:calc(100% + .5rem); margin-left:-.25rem;} #footer .footBtn{ flex:inherit; width:50%; margin:0; padding:.25rem;} #footer .footBtn button{ padding-left:1rem; padding-right:1.75rem;} #footer .footBtn button:before{ right:1rem;} /* 방문자수 */ .visitant { position:relative; top:auto; right:auto; width:50%; margin-top:0.5rem; } /* 구글 번역 */ .gbSchlTrans {position: relative; top: auto !important; right: auto !important; margin: 0.5rem 0 0; width:50%;} } @media (max-width:768px) { .subContent{ padding:1.5rem 0; } } @media screen and (max-width: 480px){ /* openPop */ .openPop #container { padding-top:calc(110px + 3.5rem) !important; } .openPop #header { top: 110px !important; } /* 방문자수 */ .visitant { width:100%; min-width:13rem; } /* 구글 번역 */ .gbSchlTrans {width: 100%;} /*전체메뉴*/ .popFullmenu .depth01:before, .popFullmenu .depth01 > ul{ width:50%; } .popFullmenu .depth01 > ul > li > a{ font-size:.85rem; } .popFullmenu .depth02 > ul > li > a{ font-size:.8rem; } .popFullmenu .depth03 > ul > li > a{ font-size:.75rem; } .popFullmenu .depth02{ left:50%; width:50%; padding-left:.5rem; } } @media (max-width:380px) { /* header */ #tabletLogo a img { width:auto; height:32px; } #menuOpen {left:0.5rem; } /* mobile 검색영역 */ #searchOpen {right:0.5rem; } #mSearch .con { margin:1rem 0.5rem; } /* mobile navi */ #mNavi #mtitle { background-size:auto 32px ; } #mNavi #mgnb .snb li a {padding: 0 0.75rem; } /* mobile navi */ #mgnb .snb li a { padding: 0 0.75rem; } /* footer */ #footer .footBtnWrap{ width:100%; margin-left:0;} #footer .footBtn{ width:100%; padding:.25rem 0;} #footer .footBtn button{height:45px;} /* sub title */ .title_area .title_tside {align-items: flex-end;} /* etc :sns */ .snsBox > button {width: 2rem; height: 1.5rem; line-height: 1.5rem;} .sns_more {top: -0.25rem; padding-top: 2rem;} }