/*#fullpage .section {min-height: 920px;} #fullpage .fp-auto-height.fp-section, #fullpage .fp-auto-height .fp-slide, #fullpage .fp-auto-height .fp-tableCell {min-height: auto;}*/ #wait {text-align:center} #wait img {max-width: 100%;} /**/ #skipBtnWrap a {display: block;width: 1px;height: 0;line-height: 0;text-align: center;background: #333;color: #fff;} #skipBtnWrap a:focus, #skipBtnWrap a:hover, #skipBtnWrap a:active {width: 100%;height: 30px;line-height: 30px;} /**/ #poplayer{position:absolute;z-index:99999;top:120px;left:50%;margin:0 0 0 -280px;width:560px;height:595px;} #poplayer *{margin:0;padding:0;border:0} #poplayer img{display:block} #poplayer .todays{padding:2px 20px 8px 20px;text-align:right;background:#323232} #poplayer .todays a{font-size:14px;color:#fff} #poplayer area{cursor:pointer} /**/ #popupbar{position:relative;background:#0e6faf url(../img/popupbarbg.png) no-repeat 50% 50%;overflow:hidden;display:none} #popupbar .popupbar{max-height:117px !important;overflow:hidden} #popupbar .popupbar .slide h3{display:inline-block;margin:0;padding:0 20px 5px 0;font-size:26px;color:#fff;text-shadow:-1px -1px 2px rgba(0,0,0,0.2)} #popupbar .popupbar .slide .close{display:inline-block} #popupbar .popupbar .slide .close button{font-size:14px;font-weight:800;letter-spacing:-1px;color:#fff;border:0;background:none} #popupbar .popupbar img{display:block} #popupbar .bx-controls{position:absolute;z-index:100;bottom:3px;left:50%} #popupbar .bx-pager{float:left;display:block} #popupbar .bx-pager .bx-pager-item{display:inline;*zoom:1} #popupbar .bx-pager.bx-default-pager a{display:inline-block;margin-right:5px;width:12px;height:12px;border:2px solid #fff;background:transparent;border-radius:50px;text-indent:-9999px} #popupbar .bx-pager.bx-default-pager a.active{border:2px solid #00558b;background:#00558b} #popupbar .bx-prev{position:absolute;top:0px;right:80px;display:none;width:10px;height:19px;text-indent:-9999px;background:url(../img/banner_prev.png) no-repeat} #popupbar .bx-next{position:absolute;top:0px;right:20px;display:none;width:10px;height:19px;text-indent:-9999px;background:url(../img/banner_next.png) no-repeat} #popupbar i.b1{position:absolute;z-index:3;top:0px;left:0%;display:block;width:100%;height:5px;background:#00558b} #popupbar i.b2{position:absolute;z-index:4;top:0px;left:50%;margin:0 0 0 570px;display:block;width:100%;height:5px;background:#ffbd3f} #popupbar .holidays{padding-top:40px;text-align:center} #popupbar .opens{text-align:center} #popupbar .opens a{display:block;text-align:center} #popupbar .opens a img{display:block;margin:0 auto} /* 1400 - all */ @media all and (min-width: 1400px) { #divpop { display:none;} #mm-blocker{display:none} #popupWindow{position:absolute} #OpenLayer {position: absolute;top: 150px;left: 100px;z-index: 9999;background: #fff;padding: 10px;border-radius: 5px;border: 1px solid #ccc;box-shadow: 5px 5px 20px rgba(0,0,0,0.3);text-align: right;} #OpenLayer > a {clear: both;font-size: 14px;} #OpenLayer #TodayClose {float: left;margin-right: 20px;} /* header */ #header {position:absolute;top: 0;left: 0;z-index:30002;width:100%;/*height: 100px;*/padding: 0 8%;} #header.header_active {background-color: var(--colorNavy);} #header .header {position: relative;height: 100px;display: flex;justify-content: space-between;align-items: center;} #header .header_top {color:#fff;display: flex;justify-content: flex-end;border-bottom: 1px solid rgba(255, 255, 255, .1);} #header .header_top a {display:inline-block;margin-left:20px;font-size: 15px;padding:15px 0;} #header h1 {} #header h1 a {display: block;font-size: 0;} #header h1 a img { height: 36px !important; } #header button.btn-menu {display:none} /**/ nav.menu_wrap {flex: 0 1 60%;} #gnb .depth1 {display: flex;justify-content: space-evenly;} #gnb .depth1 > li {display: inline-block;vertical-align: top;} #gnb .depth1 > li > a {display:block;height: 100px;margin: 0;font-size: 20px;line-height: 100px;font-weight: 500;color: var(--colorWhite);} #header.header_active #gnb .depth1 > li > a, #header.bg_white #gnb .depth1 > li > a {color: var(--colorWhite);} #header #gnb .depth1 > li.sel > a {color: var(--colorBlue);font-weight: 500;text-decoration: underline;} #header.header_active #gnb .depth1 > li.sel > a, #header.bg_white #gnb .depth1 > li.sel > a {color: var(--colorBlue);font-weight: 500;text-decoration: underline;} #header #gnb .depth1 > li:hover > a, #header #gnb .depth1 > li > a:hover {color: var(--colorBlue);} #gnb .depth2 {display: none;overflow:hidden;position:absolute;top: 100px;left: 0;z-index: 10;width: 100%;padding: 0 0 40px;box-sizing: border-box;text-align:center;} #gnb .depth2 > li {float: left;width: calc(33.33333% - 10px);margin: 5px;} #gnb .depth2 > li:nth-child(3n-2) {margin-left: 0;} #gnb .depth2 > li:nth-child(3n) {margin-right: 0;} #gnb .depth2 > li a{display:block;height: 58px;padding: 0 15px;font-size: 17px;line-height: 58px;font-weight: 500;color:#fff;border: 1px solid rgba(255,255,255,0.3);text-align: left;} #gnb .depth2 > li a:hover{background: #fff;color: var(--mainColor);border-bottom: 0;} #gnb .depth1 > li > a::after {content: "";position:absolute;bottom: 0;left: 0;display:none;width: 100%;height: 5px;background: #558fff;} #gnb .nav_bg {display:none;position:absolute;top: 110px;left: 0;width: 100%;height: 400px;background: #f5f5f5;} #header .etc_wp {max-width: 320px;text-align: right;} #header .etc_btn > ul {display: inline-block;vertical-align: middle;} #header .etc_btn > ul > li {display: inline-block;} #header .etc_btn > ul > li > a {display: block;padding: 0 7px;vertical-align: middle;font-size: 15px;color: var(--colorWhite);} #header .etc_btn > ul > li > a:last-child {padding-right: 0;} #header .etc_btn > ul > li > a.h_sitemap {position: absolute;top: 50%;right: 0;transform: translateY(-50%);width:30px;height:30px;font-size:0;text-indent:-99999px;background: url(../img/icon_sitemap.png) no-repeat center 50%;} #header.header_active .etc_btn > ul > li > a, #header.bg_white .etc_btn > ul > li > a {color: #fff;} #header.fix_menu {position:fixed; top: 0;background:#fff;border-bottom:1px solid #ddd;} #header.fix_menu #gnb .depth1 > li > a {color:#333;} #header.fix_menu #gnb .depth1 > li.sel > a {color:#558fff} #allbg{position:fixed;z-index:30000;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.35);display:none} /**/ #mainCon {width: 100%;} .section_inner {width:84%;margin: 0 auto;} .section h3, .section h3.eng {font-size:70px;font-weight:200;color:#222;margin-bottom:10px;} .section h4 {font-size: 28px;font-weight: 500;} .section .section_txt {font-size: 60px;font-weight: 500;line-height:1.2em;margin-bottom: 20px;} .section .m_more {} .section .m_more.white {} .section .m_more a {font-size:20px;font-weight:700;padding-right:20px;background: url(../img/icon_m_more.png) no-repeat right 4px;} .section .m_more.white a {display:inline-block;font-size:20px;font-weight:700;color:#fff;padding-right:20px;background: url(../img/icon_m_more_w.png) no-repeat right 4px;} /* .section .kind.lib1 {background-color: var(--mainColor);color: var(--colorWhite);} .section .kind.lib2 {background-color: var(--libColor2);color: var(--colorWhite);} .section .kind.lib3 {background-color: var(--libColor3);color: var(--colorWhite);} .section .lib1 {color: var(--mainColor);} .section .lib2 {color: var(--libColor2);} .section .lib3 {color: var(--libColor3);} */ .section .btn_wrap {margin-top: 80px;text-align: center;} .section .btn_wrap > a {display: inline-block;width: 216px;height: 62px;border: 1px solid #333;font-size: 18px;font-weight: 400;color: #333;line-height: 62px;} /**/ .section .controls {} .section .controls .slick-arrow {overflow: hidden;width: 55px;height: 55px;border-radius: 50%;border-width: 1px;border-style: solid;border-color: #000;background-repeat: no-repeat;background-position: 50% 50%;text-indent: -9999px;vertical-align: middle;} .section .controls .slick-prev {margin-right: 15px;background-image: url(../img/arrow_b_prev.png);} .section .controls .slick-next {margin-left: 15px;background-image: url(../img/arrow_b_next.png);} .section .controls.white .slick-arrow {border-color: #fff;} .section .controls.white .slick-prev {background-image: url(../img/arrow_w_prev.png);} .section .controls.white .slick-next {background-image: url(../img/arrow_w_next.png);} .section .controls .slider_dots {display: inline-block;vertical-align: middle;} .section .controls .slider_dots ul li {display: none;} .section .controls .slider_dots ul li.slick-active {display: block;} /*main_visual*/ #main_visual {width:100%;height:100vh;} #main_visual .visual {position:relative;} #main_visual .visual, #main_visual .slider, #main_visual .slick-list, #main_visual .slick-track, #main_visual .slick-slide {height:100%;} #main_visual .visual .vs1 {background:url(../img/main_visual01.jpg) no-repeat 50% 0;background-size:cover;} #main_visual .visual .vs2 {background:url(../img/main_visual02.jpg) no-repeat 50% 0;background-size:cover;} #main_visual .visual .slider .slick-dots {position:absolute;bottom: 10%;left:8%;opacity:0.5;} #main_visual .visual .slider .slick-dots li {color:#90969e;font-size:16px;font-weight:700;display: inline-block;margin-right: 20px;} #main_visual .visual .slider .slick-dots li.slick-active {color:#fff;} #main_visual .main_slogan {position:absolute;bottom: 16%;left:8%;} #main_visual .main_slogan div {font-size:60px;font-weight:500;color:#fff;line-height: 1.2em;} #main_visual .main_slogan div.stit {font-size:40px;font-weight:400;margin-bottom:30px;} #main_visual .controler {position: absolute;bottom: 10%;left: 15%;} #main_visual .controler button {text-indent: -9999px;} #main_visual .controler button.stop {width:20px;height:25px;background: url(../img/slides_m_stop.png) no-repeat 50% 55%;} #main_visual .controler button.play {width:20px;height:25px;background: url(../img/slides_m_play.png) no-repeat 50% 55%;} #main_visual .mv_scroll {position:absolute;right:8%;bottom:5%;} /**/ #section1 {width: 100%;padding:140px 0 150px;background: url(../img/bg_section1.jpg) no-repeat 0 0;background-size:cover;} #section1 .m_work {display:flex;margin-top:70px;} #section1 .m_work li {width:33.33333%;height:350px;display:flex;align-items: center;justify-content: center;} #section1 .m_work li.m_work01 {background: url(../img/m_work01.jpg) no-repeat 50% 0;background-size:cover;} #section1 .m_work li.m_work02 {background: url(../img/m_work02.jpg) no-repeat 50% 0;background-size:cover;} #section1 .m_work li.m_work03 {background: url(../img/m_work03.jpg) no-repeat 50% 0;background-size:cover;} #section1 .m_work li span {font-size:30px;font-weight:500;color:#fff;} /* #section2 */ #section2 {width: 100%;padding:140px 0 150px;background: url(../img/bg_section2.jpg) no-repeat 0 0;background-size:cover;} #section2 .m_apply {margin-top:70px;} #section2 .m_apply ul {display:flex;} #section2 .m_apply ul li {width:25%;color:#fff;border-left: 1px solid rgba(255, 255, 255, .2);} #section2 .m_apply ul li .in {padding:35px;} #section2 .m_apply ul li .state {margin-bottom:10px;} #section2 .m_apply ul li .state strong {display:inline-block;font-size:18px;font-weight:500;} #section2 .m_apply ul li .state strong.ing {color:#54e9ff;} #section2 .m_apply ul li .state strong.end {color:#a3a6ab;} #section2 .m_apply ul li .state .g_name {display:inline-block;font-size:18px;font-weight:500;} #section2 .m_apply ul li .tit {font-size:30px;font-weight:500;margin-bottom:25px; line-height: 1.2em;height: 2.4em;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;} #section2 .m_apply ul li .info {font-size:15px;margin-bottom:25px; line-height: 1.3em;height: 3.9em;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;} #section2 .m_apply ul li .view {font-size:15px;font-weight:500;} /* #section3 */ #section3 {width: 100%;padding:140px 0 150px;background: url(../img/bg_section3.jpg) no-repeat 16% bottom;} #section3 .m_notice {display:flex;} #section3 .m_notice .txt_area {width:50%;} #section3 .m_notice .list_area {width:50%;} #section3 .m_notice .list_area .con {padding:35px 0;border-bottom:1px solid #ddd;} #section3 .m_notice .list_area li:last-child .con {padding-bottom:0;border-bottom:0;} #section3 .m_notice .list_area .con .title {font-size:24px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;} #section3 .m_notice .list_area .con .date {font-size:17px;color:#555;} #section3 .m_notice .list_area {} #section3 .m_notice .list_area ul li {border-bottom:1px solid #ddd;} #section3 .m_notice .list_area ul li:last-child {border-bottom:none;} #section3 .m_notice .list_area .noticeList a {display:block;} #section3 .m_notice .list_area .noticeList a p.title {font-size:24px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;} #section3 .m_notice .list_area .noticeList .con_wp {margin:0;padding:35px 0;} #section3 .m_notice .list_area .noticeList a span.time {display:block;font-size:17px;color:#555;} /**/ #section4 {margin-bottom:80px;} #section4 .m_intro {height:450px;background: url(../img/bg_section4.jpg) no-repeat 0 0;background-size:cover;display:flex;justify-content: center;align-items: center;} #section4 .m_intro h3 {line-height: 1.1em;margin-bottom: 30px;} /**/ #foot_section {padding: 60px 0;background-color: #efefef;position:relative;} #foot_section .f_top {position: relative;margin-bottom: 45px;} #foot_section .f_top .logo img {height:38px} #foot_section .f_top .relate_site {position: absolute;top: 0;right: 0;width: 50%;max-width: 200px;} #foot_section .f_top .relate_site option {font-size: 15px;font-weight: 300;background-color: #fff;color: #000;} #foot_section .f_top .relate_site > button {display: block;width: 100%;max-width: 200px;padding: 15px 20px;font-size: 17px;border: 1px solid #1d2c57;background-color: transparent;background-image: url(../img/ico_relative_site.png);background-repeat: no-repeat;background-position: calc(100% - 20px) 50%;text-align: left;} #foot_section .f_top .relate_site > div.sub {overflow-y: auto;display: none;position: absolute;top: 52px;left: 0;width: 100%;max-height: 250px;background-color: #fff;padding: 5px 15px;} #foot_section .f_top .relate_site > div.sub ul li a {display: block;padding: 10px 0;font-size: 16px;} #foot_section .f_top .relate_site > div.sub ul li + li a {border-top: 1px solid #ddd;} #foot_section .f_lib dl {display: flex;align-items: center;} #foot_section .f_lib dl + dl {margin-top: 5px;align-items: center;} #foot_section .f_lib dl dt {position:absolute;top: -9999px;left: -99999px;z-index: -10;} #foot_section .f_lib dl dd {width: calc(100% - 180px);font-size: 16px;font-weight: 500;} #foot_section .f_lib dl dd span {display: inline-block;} #foot_section .f_lib dl dd span + span {margin-left: 30px;} #foot_section .f_info {margin-top: 40px;border-bottom: 1px solid rgba(255,255,255,0.1);} #foot_section .f_info > a {display: inline-block;padding: 20px 0;font-size: 17px;} #foot_section .f_info > a.privacy {color: var(--colorBlue);} #foot_section .f_info > a + a {margin-left: 50px;} #foot_section cite {display: block;padding-top: 20px;font-size: 16px;font-style: normal;} #foot_section .logo_knu {position:absolute;top: 145px;right: 8%;} #foot_section #gotop {position: absolute;top: 0;right: 8%;} #foot_section #gotop a{display:block;width: 80px;height: 80px;text-indent:-9999em;background:#133568 url(../img/btn_top_arr.png) no-repeat 50% 50%;} #mCard2 {display: none;} /**/ #contain {overflow: hidden;position: relative;width: 100%;} #contain .contain {display: flex;width: 84%;margin: 60px auto 100px;} /*#contain .contain {margin: 30px auto 0;max-width:1560px;overflow: hidden;position:relative;} #contain + #footer .contact {display:none;}*/ /* 서브비주얼 */ #contain #subVisual {width: 100%;} #contain #subVisual .sub_visual .visual_wp {width: 100%;height: 400px;padding-top: 130px;background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;background-image: url(../img/bg_sub_visual.jpg);} #contain #subVisual .sub_visual .visual {width: 84%;margin: 0 auto;height: 100%;background-image: url(../img/ico_sub_visual.png);background-repeat: no-repeat;background-position: 100% 100%;background-size: auto 185px;} #contain #subVisual .sub_visual .visual .visual_top {display: table;width: 100%;height: 100%;} #contain #subVisual .sub_visual .visual .visual_top > div {display: table-cell;vertical-align: middle;} #contain #subVisual .sub_visual .visual .visual_top h2 {margin-bottom: 20px;font-size: 20px;font-weight: 400;color: #fff;opacity:0.7;} #contain #subVisual .sub_visual .visual .visual_top h3 {margin-bottom: 20px;font-size: 45px;font-weight: 700;color: #fff;} #contain #subVisual .sub_visual .visual .visual_top p {font-size: 22px;font-weight: 300;color: #fff;} #contain #subVisual .sub_visual .visual_wp .visual .locator {margin-top: 10px;opacity:0.7;} #contain #subVisual .sub_visual .visual_wp .visual .locator > ul > li {display: inline-block;vertical-align: middle;} #contain #subVisual .sub_visual .visual_wp .visual .locator > ul > li a, #contain #subVisual .sub_visual .visual_wp .visual .locator > ul > li span, #contain #subVisual .sub_visual .visual_wp .visual .locator > ul > li button {display: block;font-size: 14px;font-weight: 400;color: #fff;font-family: inherit;background-color: transparent;} #contain #subVisual .sub_visual .visual_wp .visual .locator > ul > li button::before, #contain #subVisual .sub_visual .visual_wp .visual .locator > ul > li span::before {content: '>';display: inline-block;width: 20px;vertical-align: top;text-align: center;font-size: inherit;font-family: inherit;} #contain #subVisual .sub_visual .visual_wp .visual .locator .navi {display: none;} /*#contain #subVisual .sub_visual::after {content: '';position: absolute;top: 88px;right: -14%;width: 923px;height: 526px;background-image: url(../img/bg_sub_contents.png);background-repeat: no-repeat;background-position: 50% 50%;}*/ #contain #subTitle {display:none;/*padding: 35px 0;background-image: url(../img/bg_sub_title.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;text-align: center;*/} #contain #subTitle h3 {margin-bottom: 0;font-size: 45px;font-weight: 700;color: #fff;} #contain #subTitle .locator > ul > li {display: inline-block;vertical-align: middle;} #contain #subTitle .locator > ul > li a, #contain #subTitle .locator > ul > li span, #contain #subTitle .locator > ul > li button {display: block;font-size: 15px;font-weight: 400;color: #fff;font-family: inherit;background-color: transparent;} #contain #subTitle .locator > ul > li button::before, #contain #subTitle .locator > ul > li span::before {content: '>';display: inline-block;width: 20px;vertical-align: top;text-align: center;font-size: inherit;font-family: inherit;} #contain #subTitle .locator .navi {display: none;} /**/ #aside {width: 260px;margin: 0 60px 0 0;} #aside h2 {display: table;width: 100%;height: 170px;padding: 0 10px;text-align: center;background-color: #00a54c;} #aside h2 > span {display: table-cell;font-size: 28px;font-weight: 400;color:#fff;vertical-align: middle;} #aside ul.left_menu > li {} #aside ul.left_menu > li > a {position: relative;z-index: 0;display:block;padding: 0 30px 0 0;font-size: 21px;font-weight: 500;color:#000;transition:all 0.3s;} #aside ul.left_menu > li + li > a {margin-top: 15px;} #aside ul.left_menu > li > a:hover {color: var(--mainColor);text-decoration: underline;font-weight: 500;transition: all 0.3s;} /*#aside ul.left_menu > li > a::after {content: '';position: absolute;top: 50%;right: 10px;z-index: -1;width: 10px;height: 10px;margin-top: -5px;}*/ #aside ul.left_menu > li.sel > a::after {content: '';display: inline-block;width: 16px;height: 16px;margin-left: 15px;background-image: url(../img/ico_left_on.png);background-repeat: no-repeat;background-position: 50% 50%;} #aside ul.left_menu > li.sel > a {color: var(--mainColor);} /*#aside ul.left_menu > li.sel > a:hover{color: #fff;border: 0;background-color: #4e0080;transition:all 0.5s}*/ #aside ul.left_menu > li ul {display: none;padding-left: 20px;margin: 15px 0 30px;border-left: 5px solid #eee;} #aside ul.left_menu > li.sel ul {display: block;} #aside ul.left_menu > li li a {display: block;font-size: 17px; height:auto;margin: 0;color: #333;} #aside ul.left_menu > li li + li {margin-top: 12px;} #aside ul.left_menu > li li:last-child a{border:0} #aside ul.left_menu > li li a:hover {color: var(--subColor1);text-decoration: underline;} #aside ul.left_menu > li li a.sel {color: var(--colorOrange);} #aside ul.left_menu > li li a.sel::after {content: '→';display: inline-block;font-size: 20px;margin-left: 10px;vertical-align: middle;} /* #design */ #design {position: relative;float: left;width: calc(100% - 320px);min-height: 650px;font-family: var(--fontSubSet);} #blind{position:absolute;z-index:99998;top:0px;left:0px;width:100%;height:100%;background:rgba(0,0,0,0.7)} #dkleft{display:none;} @keyframes mv00 { from {background-position:center 110px; } to {background-position:center 0px; } } @keyframes mv01 { from {top:100px; opacity:0;} to {top:170px; opacity:1;} } @keyframes mv02 { from {top:200px;opacity:0;} to {top:295px;opacity:1;} } @keyframes v_img { from {right:50px; opacity:0} to {right:0px; opacity:1} } @keyframes v_text { from {padding-left:30px; opacity:0} to {padding-left:0px; opacity:1} } @keyframes v_navi { from {margin-top:-20px; opacity:0} to {margin-top:0px; letter-spacing:-1px; opacity:1} } @keyframes con_bg { from {background:url(../img/sub_con_bg.png) repeat-x left -30px; } to {background:url(../img/sub_con_bg.png) repeat-x left 138px; } } } /* header - 1340 ~ 1749 */ @media (max-width: 1749px) and (min-width: 768px) { } /* 841 ~ 1339 */ @media all and (min-width: 841px) and (max-width: 1399px) { #divpop { display:none;} #mm-blocker{display:none} #popupWindow{position:absolute} #hCheon {position:relative;top:0px;padding:0; margin:0;width:100%;} #OpenLayer {position: absolute;top: 180px;left: 100px;z-index: 9999;background: #fff;padding: 10px;border-radius: 5px;border: 1px solid #ccc;box-shadow: 5px 5px 20px rgba(0,0,0,0.3);text-align: right;} #OpenLayer > a {clear: both;font-size: 14px;} #OpenLayer #TodayClose {float: left;margin-right: 20px;} /* header */ #header {overflow: hidden;position:absolute;top: 0;left: 0;z-index:30002;width:100%;height: 110px;padding: 0;} /*#header::before {content: '';position: absolute;top: 50px;width: 100%;height: 1px;background-color: rgba(255,255,255,0.1);}*/ #header.sel {box-sizing: border-box;background:#fff;} #header.header_active {background-color: var(--colorNavy);} #header.bg_white {background-color: #fff;border-bottom: 1px solid #d9d9d9;} #header .header {position: relative;width: 90%;height: 110px;padding: 50px 0 0;margin: 0 auto;} #header .header::after {content: '';display: block;clear: both;} #header .header_top {color: #fff;position:absolute;top:12px;right:120px;z-index: 99;} #header .header_top a {display:inline-block;margin-left:20px;} #header h1 {position: absolute;top: 0;left: 0;width: 50%;max-width: 300px;} #header h1 a {display: block;height: 50px;padding: 7px 0;/*width: 100%;height: 50px;background-image: url(../img/logo.png);background-repeat: no-repeat;background-position: 0 50%;background-size: auto 28px;text-indent: -9999px;*/} #header h1 a img {height: 30px;} /*#header.header_active h1 a, #header.bg_white h1 a {background-image: url(../img/logo_on.png);}*/ #header button.btn-menu {display:none} /**/ nav.menu_wrap {width: 100%;} #gnb .depth1 {height: 60px;text-align: center;margin: 0;font-size: 0;text-align: center;} #gnb .depth1::after {content: '';display: block;clear: both;} #gnb .depth1 > li {float: none;display: inline-block;width: 20%;padding: 0;} #gnb .depth1 > li > a {overflow: hidden;display:block;height: 60px;margin: 0;padding: 0;line-height: 60px;font-size: 20px;font-weight: 500;color: #fff;text-overflow: ellipsis;white-space: nowrap;} #header.header_active #gnb .depth1 > li > a, #header.bg_white #gnb .depth1 > li > a {color: #fff;} #gnb .depth1 > li > a em{position:absolute;top:23px;right:0;display:block;margin:-10px 0 0 0;width:1px;height:16px;background:#ccc;display:none} #header #gnb .depth1 > li.sel > a {color: var(--colorBlue);font-weight: 500;text-decoration: underline;} #header #gnb .depth1 > li:hover > a, #header #gnb .depth1 > li > a:hover {color: var(--colorBlue);} #header.header_active #gnb .depth1 > li.sel > a {color: var(--colorBlue);} #gnb .depth2 {display:none;overflow:hidden;position:absolute;top: 110px;left: 0;z-index: 10;width: 100%;padding: 10px 0 30px;box-sizing: border-box;text-align:center;} #gnb .depth2 li {float: left;width: calc(33.33333% - 10px);margin: 5px;} #gnb .depth2 li:nth-child(3n-2) {margin-left: 0;} #gnb .depth2 li:nth-child(3n) {margin-right: 0;} #gnb .depth2 li a{display:block;height: 48px;padding: 0 12px;line-height: 48px;font-size: 16px;color:#fff;font-weight: 500;border: 1px solid rgba(255,255,255,0.3);text-align: left;} /*#gnb .depth2 li a{display:block;padding:18px 0;line-height:15px;font-size:15px;color:#333;border-bottom: 1px solid #ddd;text-align: left;} #gnb .depth2 li a:hover{padding-bottom: 19px;background: #0e4fa3;color: #fff;border-bottom: 0;}*/ #gnb .depth2 li a:hover{/*color: #0e4fa3;border-bottom: 1px solid #0e4fa3;padding-bottom: 19px;*/background: #fff;color: var(--mainColor);border-width: 0;} #gnb .depth1 > li > a::after {content: "";position:absolute;bottom: 0;left: 0;display:none;width: 100%;height: 5px;background: #558fff;} #gnb .nav_bg {display:none;position:absolute;top: 110px;left: 0;width: 100%;height: 400px;background: #f5f5f5;} #header .etc_wp {position: absolute;top: 10px;right: 0;} #header .etc_btn > ul {display: inline-block;vertical-align: middle;} #header .etc_btn > ul > li {display: inline-block;} #header .etc_btn > ul > li > a {display: block;padding: 0 10px;vertical-align: middle;font-size: 15px;line-height: 50px;color: var(--colorDarkgray);} #header .etc_btn > ul > li > a.h_sitemap {position: absolute;top: 50%;right: 0;transform: translateY(-50%);width: 30px;height: 30px;font-size: 0;text-indent: -99999px;background: url(../img/icon_sitemap.png) no-repeat center 50%;} #header.header_active .etc_btn > ul > li > a, #header.bg_white .etc_btn > ul > li > a {color: #fff;} /**/ #mainCon {width: 100%;} .section_inner {width:90%;margin: 0 auto;} .section h3, .section h3.eng {font-size:60px;font-weight:200;color:#222;margin-bottom:10px;} .section h4 {font-size: 28px;font-weight: 500;} .section .section_txt {font-size: 50px;font-weight: 500;line-height:1.2em;margin-bottom: 20px;} .section .m_more {} .section .m_more.white {} .section .m_more a {font-size:18px;font-weight:700;padding-right:20px;background: url(../img/icon_m_more.png) no-repeat right 4px;} .section .m_more.white a {display:inline-block;font-size:18px;font-weight:700;color:#fff;padding-right:20px;background: url(../img/icon_m_more_w.png) no-repeat right 4px;} /**/ .section .kind.lib1 {background-color: var(--mainColor);color: var(--colorWhite);} .section .kind.lib2 {background-color: var(--libColor2);color: var(--colorWhite);} .section .kind.lib3 {background-color: var(--libColor3);color: var(--colorWhite);} .section .lib1 {color: var(--mainColor);} .section .lib2 {color: var(--libColor2);} .section .lib3 {color: var(--libColor3);} .section .btn_wrap {margin-top: 80px;text-align: center;} .section .btn_wrap > a {display: inline-block;width: 216px;height: 62px;border: 1px solid #333;font-size: 18px;font-weight: 400;color: #333;line-height: 62px;} /**/ .section .controls {} .section .controls .slick-arrow {overflow: hidden;width: 55px;height: 55px;border-radius: 50%;border-width: 1px;border-style: solid;border-color: #000;background-repeat: no-repeat;background-position: 50% 50%;text-indent: -9999px;vertical-align: middle;} .section .controls .slick-prev {margin-right: 15px;background-image: url(../img/arrow_b_prev.png);} .section .controls .slick-next {margin-left: 15px;background-image: url(../img/arrow_b_next.png);} .section .controls.white .slick-arrow {border-color: #fff;} .section .controls.white .slick-prev {background-image: url(../img/arrow_w_prev.png);} .section .controls.white .slick-next {background-image: url(../img/arrow_w_next.png);} .section .controls .slider_dots {display: inline-block;vertical-align: middle;} .section .controls .slider_dots ul li {display: none;} .section .controls .slider_dots ul li.slick-active {display: block;} /*main_visual*/ #main_visual {width:100%;height:100vh;} #main_visual .visual {position:relative;} #main_visual .visual, #main_visual .slider, #main_visual .slick-list, #main_visual .slick-track, #main_visual .slick-slide {height:100%;} #main_visual .visual .vs1 {background:url(../img/main_visual01.jpg) no-repeat 50% 0;background-size:cover;} #main_visual .visual .vs2 {background:url(../img/main_visual02.jpg) no-repeat 50% 0;background-size:cover;} #main_visual .visual .slider .slick-dots {position:absolute;bottom: 10%;left:8%;opacity:0.5;} #main_visual .visual .slider .slick-dots li {color:#90969e;font-size:16px;font-weight:700;display: inline-block;margin-right: 20px;} #main_visual .visual .slider .slick-dots li.slick-active {color:#fff;} #main_visual .main_slogan {position:absolute;bottom: 16%;left:8%;} #main_visual .main_slogan div {font-size:50px;font-weight:500;color:#fff;line-height: 1.2em;} #main_visual .main_slogan div.stit {font-size:32px;font-weight:400;margin-bottom:30px;} #main_visual .controler {position: absolute;bottom: 10%;left: 18%;} #main_visual .controler button {text-indent: -9999px;} #main_visual .controler button.stop {width:20px;height:25px;background: url(../img/slides_m_stop.png) no-repeat 50% 55%;} #main_visual .controler button.play {width:20px;height:25px;background: url(../img/slides_m_play.png) no-repeat 50% 55%;} #main_visual .mv_scroll {position:absolute;right:8%;bottom:5%;} /**/ #section1 {width: 100%;padding:80px 0 90px;background: url(../img/bg_section1.jpg) no-repeat 0 0;background-size:cover;} #section1 .m_work {display:flex;margin-top:70px;} #section1 .m_work li {width:33.33333%;height:300px;display:flex;align-items: center;justify-content: center;} #section1 .m_work li.m_work01 {background: url(../img/m_work01.jpg) no-repeat 50% 0;background-size:cover;} #section1 .m_work li.m_work02 {background: url(../img/m_work02.jpg) no-repeat 50% 0;background-size:cover;} #section1 .m_work li.m_work03 {background: url(../img/m_work03.jpg) no-repeat 50% 0;background-size:cover;} #section1 .m_work li span {font-size:26px;font-weight:500;color:#fff;} /* #section2 */ #section2 {width: 100%;padding:80px 0 90px;background: url(../img/bg_section2.jpg) no-repeat 0 0;background-size:cover;} #section2 .m_apply {margin-top:70px;} #section2 .m_apply ul {display:flex;flex-wrap:wrap;} #section2 .m_apply ul li {width:50%;color:#fff;border-left: 1px solid rgba(255, 255, 255, .2);margin-bottom:20px;} #section2 .m_apply ul li .in {padding:30px;} #section2 .m_apply ul li .state {margin-bottom:10px;} #section2 .m_apply ul li .state strong {display:inline-block;font-size:18px;font-weight:500;} #section2 .m_apply ul li .state strong.ing {color:#54e9ff;} #section2 .m_apply ul li .state strong.end {color:#a3a6ab;} #section2 .m_apply ul li .state .g_name {display:inline-block;font-size:18px;font-weight:500;} #section2 .m_apply ul li .tit {font-size:28px;font-weight:500;margin-bottom:25px; line-height: 1.2em;height: 1.2em;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;} #section2 .m_apply ul li .info {font-size:15px;margin-bottom:25px; line-height: 1.3em;height: 2.6em;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;} #section2 .m_apply ul li .view {font-size:15px;font-weight:500;} /* #section3 */ #section3 {width: 100%;padding:80px 0 90px;background: url(../img/bg_section3.jpg) no-repeat 16% bottom;background-size: 500px;} #section3 .m_notice {display:flex;} #section3 .m_notice .txt_area {width:50%;} #section3 .m_notice .list_area {width:50%;} #section3 .m_notice .list_area .con {padding:30px 0;border-bottom:1px solid #ddd;} #section3 .m_notice .list_area li:last-child .con {padding-bottom:0;border-bottom:0;} #section3 .m_notice .list_area .con .title {font-size:20px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;} #section3 .m_notice .list_area .con .date {font-size:17px;color:#555;} #section3 .m_notice .list_area {} #section3 .m_notice .list_area ul li {border-bottom:1px solid #ddd;} #section3 .m_notice .list_area ul li:last-child {border-bottom:none;} #section3 .m_notice .list_area .noticeList a {display:block;} #section3 .m_notice .list_area .noticeList a p.title {font-size:20px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;} #section3 .m_notice .list_area .noticeList .con_wp {margin:0;padding:30px 0;} #section3 .m_notice .list_area .noticeList a span.time {display:block;font-size:17px;color:#555;} /**/ #section4 {margin-bottom:80px;} #section4 .m_intro {height:360px;background: url(../img/bg_section4.jpg) no-repeat 0 0;background-size:cover;display:flex;justify-content: center;align-items: center;} #section4 .m_intro h3 {line-height: 1.1em;margin-bottom: 30px;} /**/ #foot_section {padding: 60px 0;background-color: #efefef;position:relative;} #foot_section .f_top {position: relative;margin-bottom: 45px;} #foot_section .f_top .logo img { height:35px;} #foot_section .f_top .relate_site {position: absolute;top: 0;right: 0;width: 50%;max-width: 200px;} #foot_section .f_top .relate_site option {font-size: 15px;font-weight: 300;background-color: #fff;color: #000;} #foot_section .f_top .relate_site > button {display: block;width: 100%;max-width: 200px;padding: 15px 20px;font-size: 17px;border: 1px solid #1d2c57;background-color: transparent;background-image: url(../img/ico_relative_site.png);background-repeat: no-repeat;background-position: calc(100% - 20px) 50%;text-align: left;} #foot_section .f_top .relate_site > div.sub {overflow-y: auto;display: none;position: absolute;top: 52px;left: 0;width: 100%;max-height: 250px;background-color: #fff;padding: 5px 15px;} #foot_section .f_top .relate_site > div.sub ul li a {display: block;padding: 10px 0;font-size: 16px;} #foot_section .f_top .relate_site > div.sub ul li + li a {border-top: 1px solid #ddd;} #foot_section .f_lib dl {display: flex;align-items: center;} #foot_section .f_lib dl + dl {margin-top: 5px;align-items: center;} #foot_section .f_lib dl dt {position:absolute;top: -9999px;left: -99999px;z-index: -10;} #foot_section .f_lib dl dd {width: calc(100% - 180px);font-size: 16px;font-weight: 500;} #foot_section .f_lib dl dd span {display: inline-block;} #foot_section .f_lib dl dd span + span {margin-left: 30px;} #foot_section .f_lib dl dd span.tel, #foot_section .f_lib dl dd span.fax {display:block;margin-left:0;} #foot_section .f_info {margin-top: 40px;border-bottom: 1px solid rgba(255,255,255,0.1);} #foot_section .f_info > a {display: inline-block;padding: 20px 0;font-size: 17px;} #foot_section .f_info > a.privacy {color: var(--colorBlue);} #foot_section .f_info > a + a {margin-left: 50px;} #foot_section cite {display: block;padding-top: 20px;font-size: 16px;font-style: normal;} #foot_section .logo_knu {position:absolute;top: 145px;right: 8%;} #foot_section #gotop {position: absolute;top: 0;right: 8%;} #foot_section #gotop a{display:block;width: 80px;height: 80px;text-indent:-9999em;background:#133568 url(../img/btn_top_arr.png) no-repeat 50% 50%;} #mCard2 {display: none;} /**/ #contain {overflow: hidden;position: relative;width: 100%;} #contain .contain {width: 90%;margin: 50px auto 80px;} #contain .contain::after {content: '';display: block;clear: both;} /* 서브비주얼 */ #contain #subVisual {width: 100%;} #contain #subVisual .sub_visual .visual_wp {width: 100%;height: 300px;padding-top: 100px;background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;background-image: url(../img/bg_sub_visual.jpg);} #contain #subVisual .sub_visual .visual {width: 90%;margin: 0 auto;height: 100%;background-image: url(../img/ico_sub_visual.png);background-repeat: no-repeat;background-position: 100% 100%;background-size: auto 180px;} #contain #subVisual .sub_visual .visual .visual_top {display: table;width: 100%;height: 100%;} #contain #subVisual .sub_visual .visual .visual_top > div {display: table-cell;vertical-align: middle;} #contain #subVisual .sub_visual .visual .visual_top h2 {margin-bottom: 10px;font-size: 18px;font-weight: 400;color: #fff;opacity: 0.7;} #contain #subVisual .sub_visual .visual .visual_top h3 {margin-bottom: 10px;font-size: 40px;font-weight: 700;color: #fff;} #contain #subVisual .sub_visual .visual .visual_top p {font-size: 20px;font-weight: 300;color: #000;} #contain #subVisual .sub_visual .visual_wp .visual .locator {margin-top: 10px;opacity:0.7;} #contain #subVisual .sub_visual .visual_wp .visual .locator > ul > li {display: inline-block;vertical-align: middle;} #contain #subVisual .sub_visual .visual_wp .visual .locator > ul > li a, #contain #subVisual .sub_visual .visual_wp .visual .locator > ul > li span, #contain #subVisual .sub_visual .visual_wp .visual .locator > ul > li button {display: block;font-size: 14px;font-weight: 400;color: #fff;font-family: inherit;background-color: transparent;} #contain #subVisual .sub_visual .visual_wp .visual .locator > ul > li button::before, #contain #subVisual .sub_visual .visual_wp .visual .locator > ul > li span::before {content: '>';display: inline-block;width: 20px;vertical-align: top;text-align: center;font-size: inherit;font-family: inherit;} #contain #subVisual .sub_visual .visual_wp .visual .locator .navi {display: none;} /*#contain #subVisual .sub_visual::after {content: '';position: absolute;top: 88px;right: -14%;width: 923px;height: 526px;background-image: url(../img/bg_sub_contents.png);background-repeat: no-repeat;background-position: 50% 50%;}*/ #contain #subTitle {display:none;/*padding: 35px 0;background-image: url(../img/bg_sub_title.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;text-align: center;*/} #contain #subTitle h3 {margin-bottom: 0;font-size: 42px;font-weight: 700;color: #fff;} #contain #subTitle .locator > ul > li {display: inline-block;vertical-align: middle;} #contain #subTitle .locator > ul > li a, #contain #subTitle .locator > ul > li span, #contain #subTitle .locator > ul > li button {display: block;font-size: 15px;font-weight: 400;color: #fff;font-family: inherit;background-color: transparent;} #contain #subTitle .locator > ul > li button::before, #contain #subTitle .locator > ul > li span::before {content: '>';display: inline-block;width: 20px;vertical-align: top;text-align: center;font-size: inherit;font-family: inherit;} #contain #subTitle .locator .navi {display: none;} /* #design */ #design {position: relative;float: left;width: calc(100% - 250px);min-height: 650px;font-family: var(--fontSubSet);} /**/ #aside {float: left;width: 200px;margin: 0 50px 0 0;} #aside ul.left_menu > li {} #aside ul.left_menu > li > a {position: relative;z-index: 0;display:block;padding: 0;font-size: 18px;font-weight: 400;color:#000;transition:all 0.3s;} #aside ul.left_menu > li + li > a {margin-top: 10px;} #aside ul.left_menu > li > a:hover {color: #4e0080;font-weight: 500;transition: all 0.3s;} #aside ul.left_menu > li.sel > a::after {content: '';display: inline-block;width: 16px;height: 16px;margin-left: 15px;background-image: url(../img/ico_left_on.png);background-repeat: no-repeat;background-position: 50% 50%;} #aside ul.left_menu > li.sel > a {color: var(--mainColor);} #aside ul.left_menu > li ul {display: none;padding-left: 15px;margin: 12px 0 25px;border-left: 4px solid #eee;} #aside ul.left_menu > li.sel ul {display: block;} #aside ul.left_menu > li li a {display: block;font-size: 16px; height:auto;margin: 0;color: #333;} #aside ul.left_menu > li li + li {margin-top: 10px;} #aside ul.left_menu > li li:last-child a{border:0} #aside ul.left_menu > li li a:hover {color: var(--subColor1);text-decoration: underline;} #aside ul.left_menu > li li a.sel {color: var(--colorOrange);} #aside ul.left_menu > li li a.sel::after {content: '→';display: inline-block;font-size: 20px;margin-left: 10px;vertical-align: middle;} /**/ #blind {position:absolute;z-index:9999;top:0px;left:0px; bottom:0;width:100%;height:100%;background:rgba(0,0,0,0.7)} #dkleft {display:none;position:absolute;z-index:10;left:0px;top:0px;width:100%;height: 100%;background:#1e2c5d;padding-bottom: 60px;} #dkleft .left_link {padding:30px 15px;} #dkleft .lefttit{display:none;/*text-align:left;width: 100%;box-sizing: border-box;background:#1e2c5d;*/} #dkleft .lefttit img{height: 25px;} #dkleft .select {height: 100%;overflow-y: auto;} #dkleft .lefttit button {display:block;position:relative;padding: 20px 15px;font-size: 16px;color:#fff;border:0;background:transparent;font-family: 'Montserrat';font-weight: 500;} #dkleft .lefttit button i {display: inline-block;padding: 0 7px 0 0;font-size: 15px;color:#fff;vertical-align: middle;} #dkleft .lefttit > div {background-color: #eee;padding: 0 15px;} #dkleft .lefttit .join{display:inline-block;position:relative;padding:0 10px;height:36px;line-height:36px;margin:5px 0;font-size:15px;color:#1e2c5d;border:1px solid #1e2c5d;border-radius:5px;background:#eee;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .lefttit .join i{padding:0 7px 0 0;font-size:24px;color:#1e2c5d} #dkleft .lefttit .idpw{display:inline-block;position:relative;padding:0 10px;height:36px;line-height:36px;margin:5px 0;font-size:15px;color:#1e2c5d;border:1px solid #1e2c5d;border-radius:5px;background:#eee;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .lefttit .sel_btn {display:inline-block;position:relative;padding:0 8px;height:36px;line-height:36px;margin:5px 0;font-size:14px;color:#1e2c5d;border:1px solid #1e2c5d;border-radius:5px;background:#eee;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .lefttit .mobile_member {display: block;padding-bottom: 5px;border-top: 1px solid rgba(255,255,255,0.3);} #dkleft .lefttit .mobile_member > a {display: block;padding: 10px 0 10px 35px;color: #fff;font-size: 15px;box-sizing: border-box;background: url(../img/member_icon.png) no-repeat 0 50%;} #dkleft .select .modify{display:block;position:relative;padding:0 17px;line-height:45px;font-size:16px;color:#000;border-bottom:1px solid #ccc;background:#eee;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .select .modify span {display:inline-block;padding:0 16px;height:36px;line-height:36px;background:#2e4287;color:#fff;border-radius:5px;} #dkleft .select .modify i{display:inline-block;position:relative;top:1px;padding:0 7px 0 0;font-size:24px;color:#fff} #dkleft .depth1{display:block;width: 100%;position:relative;padding: 0 15px;line-height:50px;font-size:16px;color:#fff;text-align:left;border-bottom: 1px solid rgba(255, 255, 255, .1);transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .depth1 strong {position:relative;top:-2px;padding:0 4px;height:14px;line-height:14px;font-size:10px;background:#ff0000;border-radius:30px} #dkleft .depth1 span{font-style:normal;color:#ffa800} #dkleft .depth1 em{position:absolute;z-index:2;top:0;right:4px;width:39px;height:39px;background:url(/web/seomun/img/common/plus.png) no-repeat 50% 50%;background-size:11px 11px} #dkleft .depth1.sel {background: #2e4287;color:#fff;border-bottom:1px solid #596170} /*#dkleft .depth1 i {font-family:Linearicons-Free;display:block;margin:15px 15px 0 0;color:#aaa;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s}*/ #dkleft .depth1 i {display:block;width: 20px;height: 20px;margin: 15px 15px 0 0;background-image: url(../img/ico_dkleft_arrow.png);background-size: auto 7px;text-indent: -9999px;background-repeat: no-repeat;background-position: 50% 50%;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .depth1 i.rightico {float:right} #dkleft .depth1.sel i.rightico{color:#fff;-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);transition:all 0.2s ease-in-out 0s;-webkit-transition:all 0.2s ease-in-out 0s} #dkleft .depth2{display:none;background:#fff} #dkleft .depth2 a{display:block;padding:0 20px;line-height:40px;font-size:14px;color:#555;border-bottom:1px solid #ddd;text-decoration:none} #dkleft .depth2 a.sel{color:#81c341} #dkleft .depth2 .depth3 {background-color: #f4f4f4;} #dkleft .depth2 .depth3 > li > a {display: block;font-size: 13px;padding: 7px 20px;color: #555;border-bottom: 0;line-height: 1.2em;} #dkleft .depth2 .depth3 > li:first-child > a {padding-top: 15px;} #dkleft .depth2 .depth3 > li:last-child > a {padding-bottom: 15px;border-bottom: 1px solid #ddd;} #closeleft{position: absolute;z-index: 9999999;left: -45px;top: 15px;width: 35px;height: 35px;display: block;text-align: center;font-size: 40px;font-family: Linearicons-Free;speak: none;font-style: normal;font-weight: 400;font-variant: normal;text-transform: none;line-height: 1;color: #fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} #closeleft:before{content:"\e870";font-size:40px;line-height:1;} @keyframes mv00 { from {background-position:center 110px; } to {background-position:center 0px; } } @keyframes mv01 { from {top:100px; opacity:0;} to {top:170px; opacity:1;} } @keyframes mv02 { from {top:200px;opacity:0;} to {top:295px;opacity:1;} } @keyframes v_img { from {right:50px; opacity:0} to {right:0px; opacity:1} } @keyframes v_text { from {padding-left:30px; opacity:0} to {padding-left:0px; opacity:1} } @keyframes v_navi { from {margin-top:-20px; opacity:0} to {margin-top:0px; letter-spacing:-1px; opacity:1} } @keyframes con_bg { from {background:url(../img/sub_con_bg.png) repeat-x left -30px; } to {background:url(../img/sub_con_bg.png) repeat-x left 138px; } } } @media (min-width: 841px) and (max-width: 1199px) { } @media all and (max-width: 1099px) { /* header */ #header {overflow: hidden;position:absolute;top: 0;left: 0;z-index:30002;width:100%;height: 60px !important;padding: 0;} /*#header::before {content: '';position: absolute;top: 59px;width: 100%;height: 1px;background-color: rgba(255,255,255,0.2);}*/ #header.sel {height: 510px;box-sizing: border-box;background:#fff;} #header.header_active {background-color: var(--colorNavy);} #header.bg_white {background-color: #fff;border-bottom: 1px solid #d9d9d9;} #header .header {position: relative;height: 60px;padding: 0;margin: 0 auto;} #header .header::after {content: '';display: block;clear: both;} #header h1 {position: absolute;top: 0;left: 0;width: 100%;max-width: none;} #header h1 a {display: block;height: 60px;padding: 10px 0;text-align: center;/*width: 100%;height: 60px;background-image: url(../img/logo.png);background-repeat: no-repeat;background-position: 50% 50%;background-size: auto 28px;*/} #header h1 a img {height: 40px;} /*#header.header_active h1 a, #header.bg_white h1 a {background-image: url(../img/logo_on.png);}*/ #header button.btn-menu {position:absolute;top: 0;right: 3%;z-index: 10;display: block;width:30px;height: 60px;background-image: url(../img/ico_menu.png);background-repeat: no-repeat;background-position: 100% 50%;} #header button.btn-menu i{display: none !important;font-size:24px !important;color: #000;} #header button.btn-page{height:40px;width:40px;text-align:center;top:36px;right:10px;display:block;line-height:14px;font-size:11px;font-family:'Roboto';} #header button.btn-page2{height:40px;width:48px;text-align:center;top:36px;right:55px;display:block; line-height:14px;font-size:11px;font-family:'Roboto';} #header button.btn-page i{display:block !important;padding:5px 0 0 0;height:20px;font-size:18px !important; } /**/ nav.menu_wrap {} #gnb {display: none;} #header .etc_wp {display: none;} #header .header_top {display:none;} /*#header button.btn-menu {position:absolute;top: 0;right: 0;z-index: 10;width: 30px;height: 60px;background: url(../img/ico_menu.png) no-repeat 100% 50%;}*/ #header button.btn-menu {position:absolute;top: 0;left: 0;z-index: 10;width: 30px;height: 60px;background: url(../img/ico_menu.png?v=2) no-repeat 100% 50%;} #header button.btn-menu i{display: none !important;font-size:24px !important;color: #000;} #header button.btn-page{height:40px;width:40px;text-align:center;top:36px;right:10px;display:block;line-height:14px;font-size:11px;font-family:'Roboto';} #header button.btn-page2{height:40px;width:48px;text-align:center;top:36px;right:55px;display:block; line-height:14px;font-size:11px;font-family:'Roboto';} #header button.btn-page i{display:block !important;padding:5px 0 0 0;height:20px;font-size:18px !important; } /**/ #contain #subVisual .sub_visual .visual_wp {display: table;width: 100%;height: 260px;padding-top: 60px;} #contain #subVisual .sub_visual .visual_wp .visual {height: 200px;background-size: auto 180px;} #contain #subVisual .sub_visual .visual_wp .visual h2 {margin-bottom: 10px;font-size: 17px;font-weight: 400;color: #fff;opacity: 0.7;} #contain #subVisual .sub_visual .visual .visual_top h3 {margin-bottom: 10px;font-size: 36px;font-weight: 700;color: #fff;} #contain #subVisual .sub_visual .visual .visual_top p {font-size: 20px;} #contain #subVisual .sub_visual .visual_wp .visual .locator {margin-top: 10px;} #contain #subVisual .sub_visual .visual_wp .visual .locator > ul {} #contain #subVisual .sub_visual .visual_wp .visual .locator > ul::after {content: '';display: block;clear: both;} #contain #subVisual .sub_visual .visual_wp .visual .locator > ul > li {display: inline-block;vertical-align: middle;} #contain #subVisual .sub_visual .visual_wp .visual .locator > ul > li.home {width: auto;} #contain #subVisual .sub_visual .visual_wp .visual .locator > ul > li > a, #contain #subVisual .sub_visual .visual_wp .visual .locator > ul > li > button {font-size: 16px;font-weight: 400;color: #fff;font-family: inherit;background-color: transparent;vertical-align: middle;} #contain #subTitle {padding: 45px 0;} #contain #subTitle h3 {font-size: 40px;} /**/ #design {float: none;width: 100%;font-family: var(--fontSubSet);} /**/ #aside {float: none;display: none;} } @media all and (max-width: 999px) { } @media all and (max-width: 840px) { /**/ #poplayer{position:absolute;z-index:1000;top:120px;left:50%;margin:0 0 0 -150px;width:300px;cursor:move} img{width:auto;max-width:100%;height:auto !important;} #OpenLayer {position: absolute;top: 150px;left: 10px;width: 70%;z-index: 9999;background: #fff;padding: 5px;border-radius: 5px;border: 1px solid #ccc;box-shadow: 5px 5px 20px rgba(0,0,0,0.3);text-align: right;} #OpenLayer > a {clear: both;font-size: 12px;} #OpenLayer #TodayClose {float: left;margin-right: 20px;} #OpenLayer img {width: 100%;} html.fp-enabled, .fp-enabled body {overflow: visible;} /* header */ #header {overflow: hidden;position:absolute;top: 0;left: 0;z-index:30002;width:100%;height: 60px !important;padding: 0;} #header::before {content: '';position: absolute;top: 59px;width: 100%;height: 1px;background-color: rgba(255,255,255,0.2);} #header.sel {height: 510px;box-sizing: border-box;background:#fff;} #header.header_active {background-color: #fff;} #header.bg_white {background-color: #fff;border-bottom: 1px solid #d9d9d9;} #header .header {position: relative;height: 60px;padding: 0;margin: 0 auto;} #header .header::after {content: '';display: block;clear: both;} #header h1 {position: absolute;top: 0;left: 50%;transform: translateX(-50%);width: 100%;max-width: none;} #header h1 a {display: block;text-align: center;/*width: 100%;height: 60px;background-image: url(../img/logo.png);background-repeat: no-repeat;background-position: 5px 50%;background-size: auto 22px;text-indent: -9999px;*/} #header h1 a img {height: 25px !important;} /*#header.header_active h1 a, #header.bg_white h1 a {background-image: url(../img/logo_on.png);}*/ /*#header button.btn-menu {position:absolute;top: 0;right: 0;z-index: 10;width: 20%;min-width: 60px;height: 60px;padding: 0 !important;background: url(../img/ico_menu.png) no-repeat;background-position: calc(100% - 15px) 50%;}*/ #header button.btn-menu {position:absolute;top: 0;left: 0;z-index: 10;width: 60px;height: 60px;padding: 0 !important;background: url(../img/ico_menu.png?v=2) no-repeat;background-position: 50% 50%;} #header button.btn-menu i{display: none !important;font-size:24px !important;color: #000;} #header button.btn-page{height:40px;width:40px;text-align:center;top:36px;right:10px;display:block;line-height:14px;font-size:11px;font-family:'Roboto';} #header button.btn-page2{height:40px;width:48px;text-align:center;top:36px;right:55px;display:block; line-height:14px;font-size:11px;font-family:'Roboto';} #header button.btn-page i{display:block !important;padding:5px 0 0 0;height:20px;font-size:18px !important; } /**/ .section_inner {width:90%;margin: 0 auto;} .section h3, .section h3.eng {font-size:45px;font-weight:200;color:#222;margin-bottom:10px;} .section h4 {font-size: 28px;font-weight: 500;} .section .section_txt {font-size: 35px;font-weight: 500;line-height:1.2em;margin-bottom: 20px;} .section .m_more {} .section .m_more.white {} .section .m_more a {font-size:18px;font-weight:700;padding-right:20px;background: url(../img/icon_m_more.png) no-repeat right 4px;} .section .m_more.white a {display:inline-block;font-size:18px;font-weight:700;color:#fff;padding-right:20px;background: url(../img/icon_m_more_w.png) no-repeat right 4px;} /**/ .section .kind.lib1 {background-color: var(--mainColor);color: var(--colorWhite);} .section .kind.lib2 {background-color: var(--libColor2);color: var(--colorWhite);} .section .kind.lib3 {background-color: var(--libColor3);color: var(--colorWhite);} .section .lib1 {color: var(--mainColor);} .section .lib2 {color: var(--libColor2);} .section .lib3 {color: var(--libColor3);} .section .btn_wrap {margin-top: 80px;text-align: center;} .section .btn_wrap > a {display: inline-block;width: 216px;height: 62px;border: 1px solid #333;font-size: 18px;font-weight: 400;color: #333;line-height: 62px;} /**/ .section .controls {} .section .controls .slick-arrow {overflow: hidden;width: 40px;height: 40px;border-radius: 50%;border-width: 1px;border-style: solid;border-color: #000;background-repeat: no-repeat;background-position: 50% 50%;text-indent: -9999px;vertical-align: middle;background-size: auto 15px;} .section .controls .slick-prev {margin-right: 15px;background-image: url(../img/arrow_b_prev.png);} .section .controls .slick-next {margin-left: 15px;background-image: url(../img/arrow_b_next.png);} .section .controls.white .slick-arrow {border-color: #fff;} .section .controls.white .slick-prev {background-image: url(../img/arrow_w_prev.png);} .section .controls.white .slick-next {background-image: url(../img/arrow_w_next.png);} .section .controls .slider_dots {display: inline-block;vertical-align: middle;font-size: 13px;} .section .controls .slider_dots ul li {display: none;} .section .controls .slider_dots ul li.slick-active {display: block;} /*main_visual*/ #main_visual {width:100%;height:100vh;} #main_visual .visual {position:relative;} #main_visual .visual, #main_visual .slider, #main_visual .slick-list, #main_visual .slick-track, #main_visual .slick-slide {height:100%;} #main_visual .visual .vs1 {background:url(../img/main_visual01.jpg) no-repeat 50% 0;background-size:cover;} #main_visual .visual .vs2 {background:url(../img/main_visual02.jpg) no-repeat 50% 0;background-size:cover;} #main_visual .visual .slider .slick-dots {position:absolute;bottom: 10%;left:5%;opacity:0.5;} #main_visual .visual .slider .slick-dots li {color:#90969e;font-size:16px;font-weight:700;display: inline-block;margin-right: 20px;} #main_visual .visual .slider .slick-dots li.slick-active {color:#fff;} #main_visual .main_slogan {position:absolute;bottom: 16%;left:5%;} #main_visual .main_slogan div {font-size:37px;font-weight:500;color:#fff;line-height: 1.2em;} #main_visual .main_slogan div.stit {font-size:24px;font-weight:400;margin-bottom:30px;} #main_visual .controler {position: absolute;bottom: 10%;left: 22%;} #main_visual .controler button {text-indent: -9999px;} #main_visual .controler button.stop {width:20px;height:25px;background: url(../img/slides_m_stop.png) no-repeat 50% 55%;} #main_visual .controler button.play {width:20px;height:25px;background: url(../img/slides_m_play.png) no-repeat 50% 55%;} #main_visual .mv_scroll {position:absolute;right:8%;bottom:2%;} /**/ #section1 {width: 100%;padding:60px 0 70px;background: url(../img/bg_section1.jpg) no-repeat 0 0;background-size:cover;} #section1 .m_work {display:flex;margin-top:50px;} #section1 .m_work li {width:33.33333%;height:250px;display:flex;align-items: center;justify-content: center;} #section1 .m_work li.m_work01 {background: url(../img/m_work01.jpg) no-repeat 50% 0;background-size:cover;} #section1 .m_work li.m_work02 {background: url(../img/m_work02.jpg) no-repeat 50% 0;background-size:cover;} #section1 .m_work li.m_work03 {background: url(../img/m_work03.jpg) no-repeat 50% 0;background-size:cover;} #section1 .m_work li span {font-size:22px;font-weight:500;color:#fff;} /* #section2 */ #section2 {width: 100%;padding:60px 0 70px;background: url(../img/bg_section2.jpg) no-repeat 0 0;background-size:cover;} #section2 .m_apply {margin-top:50px;} #section2 .m_apply ul {} #section2 .m_apply ul li {color:#fff;border-bottom: 1px solid rgba(255, 255, 255, .2);margin-bottom:30px;} #section2 .m_apply ul li:last-child {border-bottom:0;margin-bottom:0;} #section2 .m_apply ul li .in {padding-bottom:30px;} #section2 .m_apply ul li .state {margin-bottom:10px;} #section2 .m_apply ul li .state strong {display:inline-block;font-size:16px;font-weight:500;} #section2 .m_apply ul li .state strong.ing {color:#54e9ff;} #section2 .m_apply ul li .state strong.end {color:#a3a6ab;} #section2 .m_apply ul li .state .g_name {display:inline-block;font-size:16px;font-weight:500;} #section2 .m_apply ul li .tit {font-size:22px;font-weight:500;margin-bottom:20px; line-height: 1.2em;height: 1.2em;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;} #section2 .m_apply ul li .info {font-size:14px;margin-bottom:25px; line-height: 1.3em;height: 2.6em;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;} #section2 .m_apply ul li .view {font-size:15px;font-weight:500;} /* #section3 */ #section3 {width: 100%;padding:60px 0 70px;background: url(../img/bg_section3.jpg) no-repeat right bottom;background-size: 200px;} #section3 .m_notice {} #section3 .m_notice .txt_area {} #section3 .m_notice .txt_area .section_txt br {display:none;} #section3 .m_notice .list_area {margin-top: 15px;} #section3 .m_notice .list_area .con {padding:20px 0;border-bottom:1px solid #ddd;} #section3 .m_notice .list_area li:last-child .con {padding-bottom:0;border-bottom:0;} #section3 .m_notice .list_area .con .title {font-size:18px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;} #section3 .m_notice .list_area .con .date {font-size:15px;color:#555;} #section3 .m_notice .list_area ul li {border-bottom:1px solid #ddd;} #section3 .m_notice .list_area ul li:last-child {border-bottom:none;} #section3 .m_notice .list_area .noticeList a {display:block;} #section3 .m_notice .list_area .noticeList a p.title {font-size:18px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;} #section3 .m_notice .list_area .noticeList .con_wp {margin:0;padding:20px 0;} #section3 .m_notice .list_area .noticeList a span.time {display:block;font-size:15px;color:#555;} /**/ #section4 {margin-bottom:80px;} #section4 .m_intro {height:320px;background: url(../img/bg_section4.jpg) no-repeat 0 0;background-size:cover;display:flex;justify-content: center;align-items: center;} #section4 .m_intro h3 {line-height: 1.1em;margin-bottom: 30px;} /**/ #foot_section {padding: 50px 0;background-color: #efefef;position:relative;} #foot_section .f_top {position: relative;margin-bottom: 25px;} #foot_section .f_top .logo img {height: 25px !important;} #foot_section .f_top .relate_site {position: absolute;top: 0;right: 0;width: 50%;max-width: 200px;} #foot_section .f_top .relate_site option {font-size: 15px;font-weight: 300;background-color: #fff;color: #000;} #foot_section .f_top .relate_site > button {display: block;width: 100%;max-width: 200px;padding: 15px 20px;font-size: 17px;border: 1px solid #1d2c57;background-color: transparent;background-image: url(../img/ico_relative_site.png);background-repeat: no-repeat;background-position: calc(100% - 20px) 50%;text-align: left;} #foot_section .f_top .relate_site > div.sub {overflow-y: auto;display: none;position: absolute;top: 52px;left: 0;width: 100%;max-height: 250px;background-color: #fff;padding: 5px 15px;} #foot_section .f_top .relate_site > div.sub ul li a {display: block;padding: 10px 0;font-size: 16px;} #foot_section .f_top .relate_site > div.sub ul li + li a {border-top: 1px solid #ddd;} #foot_section .f_lib dl {display: flex;align-items: center;} #foot_section .f_lib dl + dl {margin-top: 5px;align-items: center;} #foot_section .f_lib dl dt {position:absolute;top: -9999px;left: -99999px;z-index: -10;} #foot_section .f_lib dl dd {width: calc(100% - 180px);font-size: 16px;font-weight: 500;} #foot_section .f_lib dl dd span {display: inline-block;} #foot_section .f_lib dl dd span + span {margin-left: 30px;} #foot_section .f_lib dl dd span.tel, #foot_section .f_lib dl dd span.fax {display:block;margin-left:0;} #foot_section .f_info {margin-top: 40px;border-bottom: 1px solid rgba(255,255,255,0.1);} #foot_section .f_info > a {display: inline-block;padding: 20px 0;font-size: 17px;} #foot_section .f_info > a.privacy {color: var(--colorBlue);} #foot_section .f_info > a + a {margin-left: 50px;} #foot_section cite {display: block;padding-top: 20px;font-size: 16px;font-style: normal;} #foot_section .logo_knu {position:absolute;top: 120px;right: 5%;} #foot_section .logo_knu img {width:150px;} #foot_section #gotop {position: absolute;top: 0;right: 5%;} #foot_section #gotop a{display:block;width: 80px;height: 80px;text-indent:-9999em;background:#133568 url(../img/btn_top_arr.png) no-repeat 50% 50%;} /* 서브비주얼 */ #contain #subVisual {width: 100%;} #contain #subVisual .sub_visual .visual_wp {width: 100%;height: auto;padding-top: 60px;background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;background-image: url(../img/bg_sub_visual.jpg);} #contain #subVisual .sub_visual .visual_wp .visual {width: 94%;height: auto;margin: 0 auto;padding: 50px 0;background-image: url(../img/ico_sub_visual.png);background-repeat: no-repeat;background-position: 100% 100%;background-size: auto 100px;} #contain #subVisual .sub_visual .visual .visual_top {} #contain #subVisual .sub_visual .visual .visual_top > div {} #contain #subVisual .sub_visual .visual .visual_top h2 {margin-bottom: 5px;font-size: 15px;font-weight: 400;color: #fff;opacity: 0.7;text-align:center;} #contain #subVisual .sub_visual .visual .visual_top h3 {font-size: 34px; font-weight: 700;color: #fff;text-align:center;} #contain #subVisual .sub_visual .visual .visual_top p {font-size: 16px;font-weight: 300;color: #000;} #contain #subVisual .sub_visual .visual_wp .visual .locator {margin-top: 10px;opacity: 0.7;} #contain #subVisual .sub_visual .visual_wp .visual .locator > ul {text-align: center;} #contain #subVisual .sub_visual .visual_wp .visual .locator > ul > li {display: inline-block;vertical-align: middle;} #contain #subVisual .sub_visual .visual_wp .visual .locator > ul > li a, #contain #subVisual .sub_visual .visual_wp .visual .locator > ul > li span, #contain #subVisual .sub_visual .visual_wp .visual .locator > ul > li button {display: block;font-size: 14px;font-weight: 400;color: #fff;font-family: inherit;background-color: transparent;} #contain #subVisual .sub_visual .visual_wp .visual .locator > ul > li button::before, #contain #subVisual .sub_visual .visual_wp .visual .locator > ul > li span::before {content: '>';display: inline-block;width: 20px;vertical-align: top;text-align: center;font-size: inherit;font-family: inherit;} #contain #subVisual .sub_visual .visual_wp .visual .locator .navi {display: none;} /*#contain #subVisual .sub_visual::after {content: '';position: absolute;top: 88px;right: -14%;width: 923px;height: 526px;background-image: url(../img/bg_sub_contents.png);background-repeat: no-repeat;background-position: 50% 50%;}*/ #contain #subTitle {display:none;/*padding: 30px 0;background-image: url(../img/bg_sub_title.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;text-align: center;*/} #contain #subTitle h3 {margin-bottom: 5px;font-size: 27px;font-weight: 700;color: #fff;} #contain #subTitle .locator > ul > li {display: inline-block;vertical-align: middle;} #contain #subTitle .locator > ul > li a, #contain #subTitle .locator > ul > li span, #contain #subTitle .locator > ul > li button {display: block;font-size: 14px;font-weight: 400;color: #fff;font-family: inherit;background-color: transparent;} #contain #subTitle .locator > ul > li button::before, #contain #subTitle .locator > ul > li span::before {content: '>';display: inline-block;width: 20px;vertical-align: top;text-align: center;font-size: inherit;font-family: inherit;} #contain #subTitle .locator .navi {display: none;} /* #design */ #design {position: relative;width: 94%;margin: 30px auto 60px;} #aside {display: none;} /**/ #blind{position:absolute;z-index:39999;top:0px;left:0px; bottom:0;width:100%;height:100%;background:rgba(0,0,0,0.7)} #dkleft{display:none;position:fixed;z-index:100 !important;left:0px;top:0px;width: 100%;max-width: 320px;height: 100%;background:#1e2c5d;padding-bottom: 105px;} #dkleft .left_link {padding:30px 15px;} #dkleft .left_link img {width:200px;} #dkleft .lefttit{display:none;/*text-align:left;width: 100%;box-sizing: border-box;background:#1e2c5d;*/} #dkleft .lefttit img{height: 25px;} #dkleft .select {height: 100%;overflow-y: auto;} #dkleft .lefttit button {display:block;position:relative;padding: 20px 15px;font-size: 16px;color:#fff;border:0;background:transparent;font-family: 'Montserrat';font-weight: 500;} #dkleft .lefttit button i {display: inline-block;padding: 0 7px 0 0;font-size: 15px;color:#fff;vertical-align: middle;} #dkleft .lefttit > div {background-color: #eee;padding: 0 15px;} #dkleft .lefttit .join{display:inline-block;position:relative;padding:0 10px;height:36px;line-height:36px;margin:5px 0;font-size:15px;color:#1e2c5d;border:1px solid #1e2c5d;border-radius:5px;background:#eee;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .lefttit .join i{padding:0 7px 0 0;font-size:24px;color:#1e2c5d} #dkleft .lefttit .idpw{display:inline-block;position:relative;padding:0 10px;height:36px;line-height:36px;margin:5px 0;font-size:15px;color:#1e2c5d;border:1px solid #1e2c5d;border-radius:5px;background:#eee;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .lefttit .sel_btn {display:inline-block;position:relative;padding:0 8px;height:36px;line-height:36px;margin:5px 0;font-size:14px;color:#1e2c5d;border:1px solid #1e2c5d;border-radius:5px;background:#eee;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .lefttit .mobile_member {display: block;padding-bottom: 5px;border-top: 1px solid rgba(255,255,255,0.3);} #dkleft .lefttit .mobile_member > a {display: block;padding: 10px 0 10px 35px;color: #fff;font-size: 15px;box-sizing: border-box;background: url(../img/member_icon.png) no-repeat 0 50%;} #dkleft .select .modify{display:block;position:relative;padding:0 17px;line-height:45px;font-size:16px;color:#000;border-bottom:1px solid #ccc;background:#eee;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .select .modify span {display:inline-block;padding:0 16px;height:36px;line-height:36px;background:#2e4287;color:#fff;border-radius:5px;} #dkleft .select .modify i{display:inline-block;position:relative;top:1px;padding:0 7px 0 0;font-size:24px;color:#fff} #dkleft .depth1 {overflow: hidden;display:block;width: 100%;position:relative;padding: 0 15px;line-height:50px;font-size:16px;color:#fff;text-align:left;border-bottom: 1px solid rgba(255, 255, 255, .1);transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .depth1 strong{position:relative;top:-2px;padding:0 4px;height:14px;line-height:14px;font-size:10px;background:#ff0000;border-radius:30px} #dkleft .depth1 span{font-style:normal;color:#ffa800} #dkleft .depth1 em{position:absolute;z-index:2;top:0;right:4px;width:39px;height:39px;background:url(/web/seomun/img/common/plus.png) no-repeat 50% 50%;background-size:11px 11px} #dkleft .depth1.sel{background: #2e4287;color:#fff;border-bottom:1px solid #596170} #dkleft .depth1 i {display:block;width: 20px;height: 20px;margin: 15px 0 0 0;background-image: url(../img/ico_dkleft_arrow.png);background-size: auto 7px;text-indent: -9999px;background-repeat: no-repeat;background-position: 50% 50%;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .depth1 i.rightico {float:right} #dkleft .depth1.sel i.rightico {color:#fff;-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);transition:all 0.2s ease-in-out 0s;-webkit-transition:all 0.2s ease-in-out 0s} #dkleft .depth2{display:none;background:#fff} #dkleft .depth2 a{display:block;padding:0 20px;line-height:40px;font-size:14px;color:#555;border-bottom:1px solid #ddd;text-decoration:none} #dkleft .depth2 a.sel{color:#81c341} #dkleft .depth2 .depth3 {background-color: #f4f4f4;} #dkleft .depth2 .depth3 > li > a {display: block;font-size: 13px;padding: 7px 20px;color: #555;border-bottom: 0;line-height: 1.2em;} #dkleft .depth2 .depth3 > li:first-child > a {padding-top: 15px;} #dkleft .depth2 .depth3 > li:last-child > a {padding-bottom: 15px;border-bottom: 1px solid #ddd;} /*#closeleft{position: absolute;z-index: 9999999;left: -45px;top: 15px;width: 35px;height: 35px;display: block;text-align: center;font-size: 30px;font-family: Linearicons-Free;speak: none;font-style: normal;font-weight: 400;font-variant: normal;text-transform: none;text-indent: -9999px;line-height: 1;color: #fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*/ #closeleft{position: absolute;z-index: 9999999;right: 5px;top: 25px;width: 35px;height: 35px;display: block;text-align: center;font-size: 35px;font-family: Linearicons-Free;speak: none;font-style: normal;font-weight: 400;font-variant: normal;text-transform: none;line-height: 1;color: #fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} #closeleft:before{content:"\e870";font-size:35px;line-height:1;} /*#gotop{display: none;position:fixed;z-index:90000;bottom:20px;right:20px;display:none} #gotop a{display:block;width:40px;height:30px;padding:30px 0 0 0;font-size:10px;font-weight:800;text-align:center;color:#fff;background:rgba(0,0,0,0.3) url(../img/gotop.png) no-repeat 48% 28%;border-radius:50px;overflow:hidden}*/ #gotop{position:fixed;z-index: 10000;bottom:0px;right:0px;display:none} #gotop a{display:block;width: 54px;height: 60px;padding: 32px 0 0 0;font-size:10px;font-weight:800;text-align:center;color:#fff;background:rgba(0,0,0,0.3) url(../img/gotop.png) no-repeat 50% 32%;border-radius:0px;overflow:hidden} #mCard {position: fixed;bottom: 0;left: 0;z-index: 9999;width: 100%;} #mCard2 {position: fixed;bottom: 0;left: 0;z-index: 9999;width: 100%;padding-left: 5%;} #mCard > a {display: block;height: 55px;padding: 0 5px;font-size: 15px;line-height: 55px;border-top: 1px solid rgba(255,255,255,0.4);} #mCard2 > a {overflow: hidden;display: block;height: 60px;font-size: 18px;font-weight: 500;line-height: 60px;border-radius: 20px 0 0 0;background-color: #058849;color: #fff;border-radius: 20px 0 0 0;background-image: url(../img/arrow_lib_next.png);background-repeat: no-repeat;background-position: calc(100% - 70px) 50%;background-size: auto 15px;} #mCard > a > span {vertical-align: middle;} #mCard > a::before {content: '';display: inline-block;width: 50px;height: 55px;background-image: url(../img/ico_m_card.png);background-repeat: no-repeat;background-position: 50%;vertical-align: middle;background-size: auto 30px;} #mCard2 > a span.ico {overflow: hidden;position: relative;z-index: 0;display: inline-block;width: 76px;height: 60px;margin-right: 15px;vertical-align: top;} #mCard2 > a span.ico::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-image: url(../img/ico_m_card2.png);background-repeat: no-repeat;background-position: 40% 50%;background-size: auto 31px;} #mCard2 > a span.ico::after {content: '';position: absolute;top: 50%;right: 0;z-index: -1;width: 100px;height: 100px;margin-top: -50px;border-radius: 50%;background-color: #047a42;} @keyframes mv00 { from {background-position:center 110px; } to {background-position:center 0px; } } @keyframes mv01 { from {top:0px; opacity:0;} to {top:34px; opacity:1;} } @keyframes mv02 { from {top:180px;opacity:0;} to {top:240px;opacity:1;} } @keyframes v_img { from {right:50px; opacity:0} to {right:0px; opacity:1} } @keyframes v_text { from {padding-left:30px; opacity:0} to {padding-left:0px; opacity:1} } @keyframes v_navi { from {margin-top:-20px; opacity:0} to {margin-top:0px; letter-spacing:-1px; opacity:1} } @keyframes con_bg { from {background:url(../img/sub_con_bg.png) repeat-x left -30px; } to {background:url(../img/sub_con_bg.png) repeat-x left 138px; } } } @media all and (max-width: 767px) { /*#section0 .visual_wp {padding: 30px 0 50px;} #section0 .visual_wp .m_member {display: block !important;text-align: center;font-size: 0;} #section0 .visual_wp .m_member > a {display: inline-block;width: 50%;margin-bottom: 3vh;font-size: 16px;color: #fff;font-weight: 500;} #section0 .visual_wp .m_member > a::before {content: '';display: block;width: 15vw;max-width: 50px;height: 15vw;max-height: 50px;margin: 0 auto 10px;background-color: #333;border-radius: 50%;background-repeat: no-repeat;background-position: 50% 50%;} #section0 .visual_wp .m_member > a.m_login1 {padding-left: 10%;} #section0 .visual_wp .m_member > a.m_login1::before {background-image: url(../img/ico_m_login1.png);background-size: auto 45%;} #section0 .visual_wp .m_member > a.m_login2 {padding-right: 10%;} #section0 .visual_wp .m_member > a.m_login2::before {background-image: url(../img/ico_m_login2.png);background-size: auto 45%;}*/ } @media all and (max-width: 500px) { #foot_section .f_lib > ul {display: block;max-width: none;vertical-align: top;padding: 0;} #foot_section .f_lib > ul:nth-child(odd) {padding-left: 0;} #foot_section .f_lib > ul:nth-child(even) {padding-right: 0;} #foot_section .f_lib > ul + ul {margin-top: 12px;} #foot_section .f_lib > ul > li {position: relative;min-height: 50px;padding-left: 0px;font-size: 13px;font-weight: 400;color: #fff;} #foot_section .f_lib > ul > li + li {margin-top: 12px;} #foot_section .f_lib > ul > li .lib {position: static;display: inline-block;width: auto;padding: 5px 10px;margin-bottom: 6px;border: 1px solid #fff;text-align: center;} #foot_section .f_lib > ul > li .lib .line {display: inline;} #foot_section .f_lib > ul > li .con {} #foot_section .f_lib > ul > li .con > span {display: block;} #foot_section .f_lib > ul > li .con > span + span {margin-top: 3px;} #foot_section .f_lib > ul > li .con .contact > span + span {display: block;margin: 3px 0 0;} #foot_section .site_info .sns_wp {margin-top: 10px;} #foot_section .site_info .sns_wp > a {display: inline-block;width: 20px;height: 20px;margin-left: 7px;vertical-align: middle;text-indent: -9999px;background-repeat: no-repeat;background-position: 50% 50%;} #foot_section .site_info .sns_wp > a.facebook {background-image: url(../img/ico_f_facebook.png);} #foot_section .site_info .sns_wp > a.yutube {background-image: url(../img/ico_f_yutube.png);} #foot_section .site_info .sns_wp > a:first-child {margin-left: 0;} } @media all and (max-width: 400px) { #foot_section .f_link > ul > li {float: none;width: 100%;border: 1px solid #dde1df;border-bottom: 0;} #foot_section .f_link > ul > li:last-child {border-bottom: 1px solid #dde1df;} #foot_section .f_link > ul > li:nth-child(-n+2) {border-top: 1px solid #dde1df;} #foot_section .f_link > ul > li:first-child {border-top: 0;} }