/*#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;} #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: 1500px) { #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: 110px;padding: 0 2%;} #header.header_active {/*background-color:#0d1c3d;*/} #header .header {position: relative;display: flex;justify-content: space-between;height: 100%;} #header h1 {flex: 0 1 320px;} #header h1 a {display: inline-flex;height: 120px;align-items: center;} #header h1 a img {max-width: 95%;} #header button.btn-menu {display:none} /**/ nav.menu_wrap {/*flex-grow: 1;*/margin: 0 10px;} #gnb .depth1 {display: flex;height: 120px;justify-content: space-between;} #gnb .depth1 > li {display: table;position:relative;} #gnb .depth1 > li:first-child {padding-left:0;} #gnb .depth1 > li:last-child {padding-right:0;} #gnb .depth1 > li > a {display: table-cell;height: 100%;margin: 0;padding: 0 20px;text-align:center;font-size: 19px;line-height:1.1em;font-weight: 500;color: #fff;vertical-align: middle;} #header.header_active #gnb .depth1 > li > a, #header.bg_white #gnb .depth1 > li > a {color: var(--colorWhite);} #header #gnb .depth1 > li.sel > a {color:#1385c7;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);background:#0d1c3d;} #gnb .depth2 {display: none;overflow:hidden;position:absolute;top: 100px;left: 0;z-index: 10;width: 250px;padding: 20px 20px 20px;background:#0d1c3d;box-sizing: border-box;text-align:center;} #gnb .depth2 > li {float: left;width: 100%;} #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;padding: 15px 10px;font-size: 16px;line-height: 1.3em;font-weight: 500;color:#fff;border-bottom: 1px solid rgba(255,255,255,0.1);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 {flex: 0 0 230px;display: inline-flex;align-items: flex-start;justify-content: space-between;} #header .etc_wp .etc_btn {display: inline-block;height: 120px;font-size: 0;text-align: right;} #header .etc_wp .etc_btn > li {display: inline-block;height: 100%;} #header .etc_wp .etc_btn > li > a {display: block;height: 120px;font-size: 0;color: #fff;background-repeat: no-repeat;text-indent: -9999em;} #header .etc_wp .etc_btn > li > a.h_login, #header .etc_wp .etc_btn > li > a.h_logout {width: 50px;background-position: 50% 50%;} #header .etc_wp .etc_btn > li > a.h_login {background-image: url(../img/ico_h_login.png);} #header .etc_wp .etc_btn > li > a.h_logout {background-image: url(../img/ico_h_logout.png);} #header .etc_wp .etc_btn > li > a.h_sitemap {width: 40px;background-image: url(../img/ico_h_sitemap.png);background-position: 100% 50%;} #header .etc_wp .sns_wp {display: inline-flex;height: 120px;align-items: center;} #header .etc_wp .sns_wp > a {overflow: hidden;width: 38px;height: 38px;border-radius: 50%;background-repeat: no-repeat;background-position: 50% 50%;text-indent: -9999px;background-size: auto 100%;} #header .etc_wp .sns_wp > a.sns1 {background-image: url(../img/ico_h_sns1.png);} #header .etc_wp .sns_wp > a.sns2 {margin: 0 5px;background-image: url(../img/ico_h_sns2.png);} #header .etc_wp .sns_wp > a.sns3 {background-image: url(../img/ico_h_sns3.png);} #header.header_active {border-bottom:0;} #header.header_active .etc_btn > ul > li > a, #header.bg_white .etc_btn > ul > li > a {color: #fff;} #header.header_active .etc_btn > ul > li > a.h_instagram {background:url(../img/h_instagram_on.png) no-repeat;} #header.header_active .etc_btn > ul > li > a.h_youtube {background:url(../img/h_youtube_on.png) no-repeat;} #header.header_active .etc_wp {border-bottom: 1px solid rgba(255, 255, 255, .1);} #header.header_active .etc_btn > ul.etc_left > li:first-child > a {padding: 0 7px 0 38px;background:url(../img/etc_btn_yu_on.png) no-repeat 0 50%;} #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 {position: relative;z-index: 0;max-width: 1520px;padding: 150px 0;margin: 0 auto;} .section h3 {margin-bottom: 25px;font-size: 40px;font-weight: 600;color: #000;} .section h4 {font-size: 28px;font-weight: 500;color: var(--mainColor);} .section .sub_title {font-size: 20px;font-weight: 400;color: #000;} .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 .m_more {padding-right: 40px;font-size: 16px;background-repeat: no-repeat;background-position: 100% 50%;} .section .m_more.black {color: #000;background-image: url(../img/ico_arrow_b.png);} .section .m_more.white {color: #fff;background-image: url(../img/ico_arrow_w.png);} .section .m_more.white {color: #757575;background-image: url(../img/ico_arrow_g.png);} .main_con .section .m_more {position: absolute;top: 17px;right: 0;} .section .more_btn {margin-top: 40px;} .section .more_btn > a {display: inline-block;padding: 10px;font-size: 16px;font-weight: 400;color: #fff;border-bottom: 1px solid #fff;} .section .more_btn > a::after {content: '';display: inline-block;width: 20px;height: 20px;margin-left: 30px;background-image: url(../img/ico_arrow_w.png);background-repeat: no-repeat;background-position: 50% 50%;vertical-align: middle;} .section .more_btn.black > a {color: #000;border-bottom: 1px solid #333;} .section .more_btn.black > a::after {background-image: url(../img/ico_arrow_b.png);} /**/ .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 .paging {font-size: 16px;} .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*/ #mainVisual {overflow: hidden;position: relative;z-index: 0;width: 100%;height: 1080px;} #mainVisual video {position: absolute;top: 50%;left: 50%;z-index: -2;width: 100%;min-width: 1920px;height: auto;transform: translate(-50%, -50%);} #mainVisual::after {content: '';position: absolute;top: 0;left: 0;z-index: -1;width: 100%;height: 100%;background-color: rgba(0,0,0,0.3);} #mainVisual .main_slogan {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);} #mainVisual .main_slogan p {text-align: center;font-size: 26px;font-weight: 400;color: #fff;text-shadow: 5px 5px 20px rgba(0,0,0,0.5);} #mainVisual .main_slogan p span.tit {position: relative;display: block;width: 100%;margin-bottom: 40px;text-align: center;font-size: 65px;font-weight: 600;color: #fff;line-height: 1.2em;/*animation-name: v_text_typing;animation-duration: 5s;*/} #mainVisual .main_slogan p span.tit > span.type > span {animation: v_text_type 3s ease-in;animation-fill-mode: both;white-space: nowrap;} #mainVisual .main_slogan p span.tit > span.type > span:nth-child(1) {animation-delay: 0s;} #mainVisual .main_slogan p span.tit > span.type > span:nth-child(2) {animation-delay: 0.2s;} #mainVisual .main_slogan p span.tit > span.type > span:nth-child(3) {animation-delay: 0.4s;} #mainVisual .main_slogan p span.tit > span.type > span:nth-child(4) {animation-delay: 0.6s;} #mainVisual .main_slogan p span.tit > span.type > span:nth-child(5) {animation-delay: 0.8s;} #mainVisual .main_slogan p span.tit > span.type > span:nth-child(6) {animation-delay: 1s;} #mainVisual .main_slogan p span.tit > span.type > span:nth-child(7) {animation-delay: 1.2s;} #mainVisual .main_slogan p span.tit > span.type > span:nth-child(8) {animation-delay: 1.4s;} #mainVisual .main_slogan p span.tit > span.type > span:nth-child(9) {animation-delay: 1.6s;} #mainVisual .main_slogan p span.tit > span.type > span:nth-child(10) {animation-delay: 1.8s;} #mainVisual .main_slogan p span.tit > span.line {overflow: hidden;text-indent: 100px;animation: 1.5s v_text_left ease-in-out;animation-delay: 2s;animation-fill-mode: both;white-space: nowrap;opacity: 0;} #mainVisual .main_slogan p span.sub {overflow: hidden;display: block;} /*#mainVisual .main_slogan p span.tit > span:nth-child(13) {animation-delay: 5.5s;} #mainVisual .main_slogan p span.tit > span:nth-child(14) {animation-delay: 6s;} #mainVisual .main_slogan p span.tit > span:nth-child(15) {animation-delay: 6.5s;} #mainVisual .main_slogan p span.tit > span:nth-child(16) {animation-delay: 7s;} #mainVisual .main_slogan p span.tit > span:nth-child(17) {animation-delay: 7.5s;} #mainVisual .main_slogan p span.tit > span:nth-child(18) {animation-delay: 8s;}*/ #mainVisual .v_scroll {position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);} #mainVisual .v_scroll.on {pos-f} #mainVisual .v_scroll > a {position: relative;display: block;padding: 10px 20px 60px;font-size: 18px;font-weight: 500;color: #fff;} #mainVisual .v_scroll > a::after {content: '';position: absolute;top: 40px;left: 50%;width: 1px;height: 50px;margin: 5px auto 0;background-color: #fff;animation: v_scroll 3s ease-in-out;animation-iteration-count: infinite;} @keyframes v_text_type { 0% {opacity: 0;} 20% {opacity: 0.8;} 100% {text-indent: 0;} } @keyframes v_text_left { 0% {text-indent: 100px;opacity: 0;} 30% {opacity: 0.6;} 80% {opacity: 1;text-indent: -30px;} 100% {text-indent: 0;opacity: 1;} } /**/ .main_con #section01 {background-color: #0a0e18;background-image: url(../img/bg_m_section1.jpg);background-repeat: no-repeat;background-position: 100% 100%;background-size: cover;} .main_con #section01 .section_inner {overflow: hidden;} .main_con #section01 .section_inner::after {content: 'Convergence Open Sharing System';position: absolute;top: 150px;right: 0;z-index: -1;color: #fff;writing-mode: vertical-lr;font-size: 160px;font-weight: 700;color: #2c3039;opacity: 0.3;white-space: nowrap;} .main_con #section01 .int_btn_wp {display: flex;margin-top: 50px;} .main_con #section01 .int_btn_wp > div {width: calc(50% - 12px);padding: 50px;border: 1px solid rgba(255,255,255,0.2);border-radius: 40px;text-align: center;font-size: 22px;font-weight: 500;color: #fff;} .main_con #section01 .int_btn_wp > div.int1 {margin-right: 12px;} .main_con #section01 .int_btn_wp > div.int2 {margin-left: 12px;} .main_con #section01 .int_btn_wp > div::before {content: '';display: block;height: 80px;margin-bottom: 30px;background-repeat: no-repeat;background-position: 50% 50%;} .main_con #section01 .int_btn_wp > div.int1::before {background-image: url(../img/ico_m_int1.png);} .main_con #section01 .int_btn_wp > div.int2::before {background-image: url(../img/ico_m_int2.png);} /**/ .main_con #section02 {overflow: hidden;background-image: url(../img/bg_m_section2.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;} .main_con #section02 .section_inner::after {content: 'Green Technology Innovator';position: absolute;top: 50%;left: 0;z-index: -1;transform: translateY(-50%);font-size: 160px;font-weight: 700;color: #fff;opacity: 0.5;white-space: nowrap;} .main_con #section02 .field_wp {display: flex;justify-content: space-between;} .main_con #section02 .field_wp .right {font-size: 0;} .main_con #section02 .field_wp .right > div {display: inline-flex;width: 410px;height: 500px;padding: 50px;border-radius: 40px;background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;vertical-align: top;font-size: 24px;font-weight: 500;color: #000;align-items: end;} .main_con #section02 .field_wp .right > div.field1 {margin-top: 80px;background-image: url(../img/bg_m_field1.jpg);} .main_con #section02 .field_wp .right > div.field2 {margin-left: 40px;background-image: url(../img/bg_m_field2.jpg);} /**/ .main_con #section03 {overflow: hidden;position: relative;z-index: 0;} .main_con #section03 .ico1 {position: absolute;left: 0;transform: translateX(-50%);} .main_con #section03 .ico2 {position: absolute;top: 0;left: 50%;z-index: -1;/*transform: translateX(-40%);*/clip-path: polygon(0 0, 0 0, 0 0, 0 0);} .main_con #section03.active .ico2 {animation: bgSection3 2s;animation-delay: 0.5s ease-in-out;animation-fill-mode: both;} .main_con #section03 .section_inner {display: flex;flex-wrap: wrap;} .main_con #section03 .section_inner > div {position: relative;} .main_con #section03 .m_notice {width: calc(100% - 620px);margin-right: 150px;} .main_con #section03 .m_notice h3 {margin-bottom: 0;} .main_con #section03 .m_notice > ul > li {display: flex;width: 100%;align-items: center;border-bottom: 1px solid #ebebeb;} .main_con #section03 .m_notice > ul > li > span.date {width: 140px;font-size: 18px;font-weight: 400;color: #555;} .main_con #section03 .m_notice > ul > li > a {width: calc(100% - 140px);padding: 40px 0;font-size: 20px;font-weight: 400;color: #000;} .main_con #section03 .m_notice > ul > li:last-child {border-bottom: 0;} .main_con #section03 .m_news {width: 470px;} .main_con #section03 .m_news figure img {border-radius: 40px;} .main_con #section03 .m_news figure figcaption {overflow: hidden;margin-top: 25px;font-size: 20px;font-weight: 400;color: #000;text-overflow: ellipsis;white-space: nowrap;} .main_con #section03 .m_program {width: 100%;margin-top: 110px;} .main_con #section03 .m_program .list {display: flex;padding-top: 20px;} .main_con #section03 .m_program .list > li {width: 33.33333%;padding: 0 25px;} .main_con #section03 .m_program .list > li:nth-child(4n-3) {padding-left: 0;} .main_con #section03 .m_program .list > li:nth-child(4n) {padding-right: 0;} .main_con #section03 .m_program .list > li > a {display: block;height: 100%;padding: 50px;border: 1px solid #ddd;border-radius: 40px;background-color: #fff;} .main_con #section03 .m_program .list > li span.state {display: block;font-size: 18px;font-weight: 600;} .main_con #section03 .m_program .list > li span.state.ing {color: #1f92ae;} .main_con #section03 .m_program .list > li span.state.end {color: #999;} .main_con #section03 .m_program .list > li p.title {overflow: hidden;overflow: hidden;display: -webkit-box;height: 2.6em;margin: 20px 0 50px;font-size: 22px;line-height: 1.3em;font-weight: 400;color: #000;-webkit-box-orient: vertical;-webkit-line-clamp: 2;text-overflow: ellipsis;} .main_con #section03 .m_program .list > li .more {display: inline-block;padding-right: 40px;font-size: 16px;color: #757575;background-image: url(../img/ico_arrow_g.png);background-repeat: no-repeat;background-position: 100% 50%;} /**/ .main_con #section04 {background-image: url(../img/bg_section04.jpg);background-repeat: no-repeat;background-position: 100% 50%;background-size: cover;} .main_con #section04 .section_inner {padding: 100px 0;} /**/ #foot_section {background-color:#070a10;} #foot_section .section_inner {padding: 70px 0;} #foot_section .footer {position:relative;} #foot_section .f_top {position: relative;} #foot_section .f_top .logo img {} #foot_section .f_info {margin: 10px 0 0;} #foot_section .f_info > a {display: inline-block;padding: 30px 0;font-size: 16px;color: #fff;} #foot_section .f_info > a.privacy {color: #81bcff;} #foot_section .f_info > a + a {margin-left: 30px;} #foot_section .f_addr {color: #fff;} #foot_section .f_addr span {display: inline-block;padding: 5px 0;color: #fff;font-size: 16px;line-height: 1.3em;} #foot_section .f_addr span + span {margin-left: 45px;} #foot_section .f_addr span.addr {display: block;} #foot_section .f_addr span.tel {margin-left: 0;} #foot_section cite {display: block;margin-top: 40px;font-size: 16px;color: #fff;font-style: normal;} #foot_section #gotop {position: absolute;top: 70px;right: 0;text-align: right;} #foot_section #gotop a {display: inline-block;width: 95px;height: 95px;font-size: 0;line-height: 1;background: #1f92ae url(../img/btn_top_arr.png) no-repeat 50% 50%;border-radius: 50%;text-indent: -9999px;} #foot_section #gotop p {margin-top: 60px;font-size: 36px;font-weight: 200;color: #fff;} #mCard2 {display: none;} /******************************************************* main - 240709 *******************************************************/ /**/ .main_content .section .title_wp {display: flex;margin-bottom: 30px;justify-content: space-between;align-items: center;} .main_content .section .title_wp.ctrl_center {justify-content: center;} .main_content .section .title_wp h3 {margin-bottom: 0;} .main_content .section .title_wp .controls {display: inline-flex;align-items: center;} .main_content .section .title_wp .m_more {margin-left: 50px;} .main_content .section .slider .slick-track {display: flex;} .main_content .section .slider .slick-track li {float: none;height: auto;} .main_content .section .slider .slick-dots {position: absolute;top: -9999px;left: -9999px;width: 1px;height: 1px;clip: rect(0 0 0 0);} /**/ .main_content #section01 {overflow: hidden;position: relative;z-index: 1;background: #fff;} .main_content #section01::before {content: '';position: absolute;top: 0;left: 0;z-index: 1;width: calc(50% - 760px);height: 100%;background-color: #fff;} .main_content #section01 .section_inner {display: block;} .main_content #section01 .section_inner > div {position: relative;} .main_content #section01 .m_notice {width: 100%;} .main_content #section01 .m_notice h3 {} .main_content #section01 .m_notice > ul.slider li {overflow: hidden;width: 33.33333%;border: 1px solid #ddd;background-color: #fff;border-radius: 40px;} .main_content #section01 .m_notice > ul.slider .slick-track {margin: 0;} .main_content #section01 .m_notice > ul.slider .slick-list {overflow: visible;} .main_content #section01 .m_notice > ul.slider li + li {margin-left: 60px;} .main_content #section01 .m_notice > ul.slider li > a {display: block;padding: 45px 50px;} .main_content #section01 .m_notice > ul.slider li > a > span {display: block;} .main_content #section01 .m_notice > ul.slider li > a > span.title {overflow: hidden;height: 2.8em;font-size: 22px;line-height: 1.4em;color: #000;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;text-overflow: ellipsis;} .main_content #section01 .m_notice > ul.slider li > a > span.date {margin-top: 10px;font-size: 15px;color: #757575;} .main_content #section01 .m_notice > ul.slider li > a > span.more {margin-top: 50px;font-size: 15px;color: #757575;} .main_content #section01 .m_news {overflow: hidden;width: 100%;padding: 150px 0;} .main_content #section01 .m_news .slider {overflow: hidden;margin: 0 -20px;} .main_content #section01 .m_news .slider .slick-track {margin: 0;} .main_content #section01 .m_news figure {padding: 0 20px;} .main_content #section01 .m_news figure img {max-width: 100%;height: 280px;border-radius: 30px;} .main_content #section01 .m_news figure figcaption {overflow: hidden;margin-top: 25px;font-size: 20px;font-weight: 400;color: #000;text-overflow: ellipsis;white-space: nowrap;} .main_content #section01 .m_program {overflow: hidden;width: 100%;} .main_content #section01 .m_program .list {display: flex;padding-top: 20px;margin: 0 -25px;} .main_content #section01 .m_program .list > li {width: 33.33333%;padding: 0 25px;} /*.main_content #section01 .m_program .list > li:nth-child(3n-2) {padding-left: 0;} .main_content #section01 .m_program .list > li:nth-child(3n) {padding-right: 0;}*/ .main_content #section01 .m_program .list > li > a {display: block;height: 100%;padding: 50px;border: 1px solid #ddd;border-radius: 40px;background-color: #fff;} .main_content #section01 .m_program .list > li span.state {display: block;font-size: 18px;font-weight: 600;} .main_content #section01 .m_program .list > li span.state.ing {color: #1f92ae;} .main_content #section01 .m_program .list > li span.state.end {color: #999;} .main_content #section01 .m_program .list > li p.title {overflow: hidden;overflow: hidden;display: -webkit-box;height: 2.6em;margin: 20px 0 50px;font-size: 22px;line-height: 1.3em;font-weight: 400;color: #000;-webkit-box-orient: vertical;-webkit-line-clamp: 2;text-overflow: ellipsis;} .main_content #section01 .m_program .list > li .more {display: inline-block;padding-right: 40px;font-size: 16px;color: #757575;background-image: url(../img/ico_arrow_g.png);background-repeat: no-repeat;background-position: 100% 50%;} /**/ .main_content #section02 {overflow: hidden;background-image: url(../img/bg_m_section2.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;} /*.main_content #section02 .section_inner::after {content: 'Green Technology Innovator';position: absolute;top: 50%;left: 0;z-index: -1;transform: translateY(-50%);font-size: 160px;font-weight: 700;color: #fff;opacity: 0.5;white-space: nowrap;}*/ .main_content #section02 .section_inner {overflow: hidden;} .main_content #section02 .m_video {margin: 0 -50px;} .main_content #section02 .m_video .slider .slick-list .slick-track li {display: flex;align-items: center;} .main_content #section02 .m_video .slider .slick-list .slick-track li div.video {padding: 50px;} .main_content #section02 .m_video .slider .slick-list .slick-track li.slick-current div.video {padding: 0;transition: all 0.3s;} .main_content #section02 .m_video .slider .slick-list .slick-track li div.video > a {display: block;} .main_content #section02 .field_wp {display: flex;justify-content: space-between;} .main_content #section02 .field_wp .right {font-size: 0;} .main_content #section02 .field_wp .right > div {display: inline-flex;width: 410px;height: 500px;padding: 50px;border-radius: 40px;background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;vertical-align: top;font-size: 24px;font-weight: 500;color: #000;align-items: end;} .main_content #section02 .field_wp .right > div.field1 {margin-top: 80px;background-image: url(../img/bg_m_field1.jpg);} .main_content #section02 .field_wp .right > div.field2 {margin-left: 40px;background-image: url(../img/bg_m_field2.jpg);} /**/ .main_content #section03 {background-color: #0a0e18;background-image: url(../img/bg_m_section1.jpg);background-repeat: no-repeat;background-position: 100% 100%;background-size: cover;} .main_content #section03 .section_inner {overflow: hidden;} .main_content #section03 .section_inner::after {content: 'Convergence Open Sharing System';position: absolute;top: 150px;right: 0;z-index: -1;color: #fff;writing-mode: vertical-lr;font-size: 160px;font-weight: 700;color: #2c3039;opacity: 0.3;white-space: nowrap;} .main_content #section03 .int_btn_wp {display: flex;margin-top: 50px;} .main_content #section03 .int_btn_wp > div {width: calc(50% - 12px);padding: 50px;border: 1px solid rgba(255,255,255,0.2);border-radius: 40px;text-align: center;font-size: 22px;font-weight: 500;color: #fff;} .main_content #section03 .int_btn_wp > div.int1 {margin-right: 12px;} .main_content #section03 .int_btn_wp > div.int2 {margin-left: 12px;} .main_content #section03 .int_btn_wp > div::before {content: '';display: block;height: 80px;margin-bottom: 30px;background-repeat: no-repeat;background-position: 50% 50%;} .main_content #section03 .int_btn_wp > div.int1::before {background-image: url(../img/ico_m_int1.png);} .main_content #section03 .int_btn_wp > div.int2::before {background-image: url(../img/ico_m_int2.png);} /**/ #contain {overflow: hidden;position: relative;width: 100%;} #contain .contain {display: flex;max-width: 1520px;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 {display:none;/*width: 100%;height: 285px;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 {max-width: 1440px;margin: 0 auto;height: 100%;} #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: 5px;font-size: 43px;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;} #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: 16px;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 {padding: 150px 0 60px;background-image: url(../img/bg_sub_visual.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;text-shadow: 5px 5px 15px rgba(0,0,0,0.5);} #contain #subTitle .locator > ul > li {display: inline-block;vertical-align: middle;color: #fff;text-shadow: 5px 5px 15px rgba(0,0,0,0.5);} #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;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: 310px;margin: 0 60px 0 0;} #aside h2 {/*display: table;*/width: 100%;padding: 0 15px 50px;text-align: center;} #aside h2 > span {font-size: 24px;font-weight: 400;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.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: 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;} */ #aside ul.left_menu > li {border-bottom: 1px solid #eaeaea;} #aside ul.left_menu > li:first-child {border-top: 1px solid #eaeaea;} #aside ul.left_menu > li > a {position: relative;z-index: 0;display: block;padding: 15px 20px;font-size: 16px;font-weight: 400;color: #555;transition: all 0.3s;} #aside ul.left_menu > li > a:hover {color: var(--mainColor);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; background-image: url(../img/ico_leftmenu.png);background-repeat: no-repeat;background-position: 50% 50%;background-size: auto 10px;} #aside ul.left_menu > li.sel > a::after {background-image: url(../img/ico_leftmenu_on.png);background-size: auto 2px;} #aside ul.left_menu > li.sel > a, #aside ul.left_menu > li.sel > a:hover {color: #fff;border: 0;background-color: var(--mainColor);transition: all 0.5s} #aside ul.left_menu > li ul {display: none;padding: 20px 25px;background: #f3f3f3;border-top: 0;} #aside ul.left_menu > li.sel ul {display: block;} #aside ul.left_menu > li li a {display: block;border: 0;font-size: 15px;height: auto;padding: 4px 0 4px 20px;margin: 0;color: #333; background-image: url(../img/ico_left_submenu.gif);background-repeat: no-repeat;background-position: 0 15px;background-size: auto 1px;} #aside ul.left_menu > li li:last-child a {border: 0} #aside ul.left_menu > li li a:hover, #aside ul.left_menu > li li a.sel {font-size: 15px;color:var(--subColor1);border: 0;background-image: url(../img/ico_left_submenu_on.png); background-position: 0 10px;background-size: 8px auto;} /* #design */ #design {position: relative;float: left;width: calc(100% - 370px);min-height: 650px;} #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 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) { } /* 900 ~ 1339 */ @media all and (min-width: 900px) and (max-width: 1499px) { #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 {position:absolute;top: 0;left: 0;z-index:30002;width:100%;height: 120px;border-bottom: 1px solid rgba(255, 255, 255, .5);/*padding: 0 4.16%;*/} #header.header_active {border-bottom:none;} #header .header {position: relative;padding-top: 60px;} #header h1 {position: absolute;top: 0;left: 0;width: 100%;height: auto;} #header h1 a {display: inline-block;padding: 10px 0 10px 3%;font-size: 0;} #header h1 a img {height: 38px;} #header button.btn-menu {display:none} /**/ nav.menu_wrap {padding: 0 3%;} #gnb .depth1 {display: flex;justify-content: space-between;} #gnb .depth1 > li {width: 16.66667%;text-align: center;position:relative;} #gnb .depth1 > li:hover {background:#0d1c3d;} #gnb .depth1 > li:first-child {padding-left:0;} #gnb .depth1 > li:last-child {padding-right:0;} #gnb .depth1 > li > a {overflow: hidden;display: block;height: 60px;line-height: 60px;text-align:center;font-size:18px;font-weight: 500;color: var(--colorWhite);text-overflow: ellipsis;white-space: nowrap;} #header.header_active #gnb .depth1 > li > a, #header.bg_white #gnb .depth1 > li > a {color: var(--colorWhite);} #header #gnb .depth1 > li.sel > a {color:#1385c7;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: 60px;left: 0;z-index: 10;width: 215px;padding: 10px;box-sizing: border-box;text-align:center;background: #0d1c3d;} #gnb .depth1 > li:last-child > .depth2 {display: none;overflow:hidden;position:absolute;top: 60px;left: initial;right: 0;z-index: 10;width: 215px;padding: 10px;box-sizing: border-box;text-align:center;background: #0d1c3d;} #gnb .depth2 > li {float: left;width: 100%;/* 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;padding: 12px 10px;font-size: 15px;font-weight: 500;color:#fff;border-bottom: 1px solid rgba(255,255,255,0.1);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 {display: flex;position: absolute;top: 0;right: 3%;} #header .etc_wp .etc_btn {margin-left: 20px;height: 60px;font-size: 0;text-align: right;} #header .etc_wp .etc_btn > li {display: inline-block;height: 100%;} #header .etc_wp .etc_btn > li > a {display: block;height: 60px;font-size: 0;color: #fff;background-repeat: no-repeat;text-indent: -9999em; } #header .etc_wp .etc_btn > li > a.h_login, #header .etc_wp .etc_btn > li > a.h_logout {width: 50px;background-image: url(../img/ico_h_login.png);background-position: 50% 50%;} #header .etc_wp .etc_btn > li > a.h_sitemap {width: 40px;background-image: url(../img/ico_h_sitemap.png);background-position: 100% 50%;} #header .etc_wp .sns_wp {display: inline-flex;height: 60px;align-items: center;} #header .etc_wp .sns_wp > a {overflow: hidden;width: 35px;height: 35px;border-radius: 50%;background-repeat: no-repeat;background-position: 50% 50%;text-indent: -9999px;background-size: auto 100%;} #header .etc_wp .sns_wp > a.sns1 {background-image: url(../img/ico_h_sns1.png);} #header .etc_wp .sns_wp > a.sns2 {margin: 0 5px;background-image: url(../img/ico_h_sns2.png);} #header .etc_wp .sns_wp > a.sns3 {background-image: url(../img/ico_h_sns3.png);} /**/ #mainCon {width: 100%;} .section_inner {position: relative;z-index: 0;width: 94%;padding: 120px 0;margin: 0 auto;} .section h3 {margin-bottom: 20px;font-size: 36px;font-weight: 600;color: #000;} .section h4 {font-size: 24px;font-weight: 500;color: var(--mainColor);} .section .sub_title {font-size: 18px;font-weight: 400;color: #000;} .section .btn_wrap {margin-top: 60px;text-align: center;} .section .btn_wrap > a {display: inline-block;width: 216px;height: 62px;border: 1px solid #333;font-size: 17px;font-weight: 400;color: #333;line-height: 62px;} .section .m_more {padding-right: 40px;font-size: 16px;background-repeat: no-repeat;background-position: 100% 50%;} .section .m_more.black {color: #000;background-image: url(../img/ico_arrow_b.png);} .section .m_more.white {color: #fff;background-image: url(../img/ico_arrow_w.png);} .section .m_more.white {color: #757575;background-image: url(../img/ico_arrow_g.png);} .main_con .section .m_more {position: absolute;top: 0;right: 0;} .section .more_btn {margin-top: 30px;} .section .more_btn > a {display: inline-block;padding: 10px;font-size: 15px;font-weight: 400;color: #fff;border-bottom: 1px solid #fff;} .section .more_btn > a::after {content: '';display: inline-block;width: 20px;height: 20px;margin-left: 30px;background-image: url(../img/ico_arrow_w.png);background-repeat: no-repeat;background-position: 50% 50%;vertical-align: middle;} .section .more_btn.black > a {color: #000;border-bottom: 1px solid #000;} .section .more_btn.black > a::after {background-image: url(../img/ico_arrow_b.png);} /**/ .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*/ #mainVisual {overflow: hidden;position: relative;z-index: 0;width: 100%;height: 760px;} #mainVisual video {position: absolute;top: 50%;left: 50%;z-index: -2;width: 100%;min-width: 1920px;height: auto;transform: translate(-50%, -50%);} #mainVisual::after {content: '';position: absolute;top: 0;left: 0;z-index: -1;width: 100%;height: 100%;background-color: rgba(0,0,0,0.3);} #mainVisual .main_slogan {position: absolute;top: 50%;left: 0;width: 100%;transform: translateY(-50%);} #mainVisual .main_slogan p {text-align: center;font-size: 22px;font-weight: 400;color: #fff;text-shadow: 5px 5px 20px rgba(0,0,0,0.5);} #mainVisual .main_slogan p span.tit {position: relative;display: block;width: 100%;margin-bottom: 30px;text-align: center;font-size: 52px;font-weight: 600;color: #fff;line-height: 1.2em;/*animation-name: v_text_typing;animation-duration: 5s;*/} #mainVisual .main_slogan p span.tit > span.type > span {animation: v_text_type 3s ease-in;animation-fill-mode: both;white-space: nowrap;} #mainVisual .main_slogan p span.tit > span.type > span:nth-child(1) {animation-delay: 0s;} #mainVisual .main_slogan p span.tit > span.type > span:nth-child(2) {animation-delay: 0.2s;} #mainVisual .main_slogan p span.tit > span.type > span:nth-child(3) {animation-delay: 0.4s;} #mainVisual .main_slogan p span.tit > span.type > span:nth-child(4) {animation-delay: 0.6s;} #mainVisual .main_slogan p span.tit > span.type > span:nth-child(5) {animation-delay: 0.8s;} #mainVisual .main_slogan p span.tit > span.type > span:nth-child(6) {animation-delay: 1s;} #mainVisual .main_slogan p span.tit > span.type > span:nth-child(7) {animation-delay: 1.2s;} #mainVisual .main_slogan p span.tit > span.type > span:nth-child(8) {animation-delay: 1.4s;} #mainVisual .main_slogan p span.tit > span.type > span:nth-child(9) {animation-delay: 1.6s;} #mainVisual .main_slogan p span.tit > span.type > span:nth-child(10) {animation-delay: 1.8s;} #mainVisual .main_slogan p span.tit > span.line {overflow: hidden;text-indent: 100px;animation: 1.5s v_text_left ease-in-out;animation-delay: 2s;animation-fill-mode: both;white-space: nowrap;opacity: 0;} #mainVisual .main_slogan p span.sub {overflow: hidden;display: block;} /*#mainVisual .main_slogan p span.tit > span:nth-child(13) {animation-delay: 5.5s;} #mainVisual .main_slogan p span.tit > span:nth-child(14) {animation-delay: 6s;} #mainVisual .main_slogan p span.tit > span:nth-child(15) {animation-delay: 6.5s;} #mainVisual .main_slogan p span.tit > span:nth-child(16) {animation-delay: 7s;} #mainVisual .main_slogan p span.tit > span:nth-child(17) {animation-delay: 7.5s;} #mainVisual .main_slogan p span.tit > span:nth-child(18) {animation-delay: 8s;}*/ #mainVisual .v_scroll {position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);} #mainVisual .v_scroll.on {position: fixed;} #mainVisual .v_scroll > a {position: relative;display: block;padding: 10px 20px 60px;font-size: 16px;font-weight: 500;color: #fff;} #mainVisual .v_scroll > a::after {content: '';position: absolute;top: 40px;left: 50%;width: 1px;height: 50px;margin: 5px auto 0;background-color: #fff;animation: v_scroll 3s ease-in-out;animation-iteration-count: infinite;} @keyframes v_text_type { 0% {opacity: 0;} 20% {opacity: 0.8;} 100% {text-indent: 0;} } @keyframes v_text_left { 0% {text-indent: 100px;opacity: 0;} 30% {opacity: 0.6;} 80% {opacity: 1;text-indent: -30px;} 100% {text-indent: 0;opacity: 1;} } /**/ .main_con #section01 {background-color: #0a0e18;background-image: url(../img/bg_m_section1.jpg);background-repeat: no-repeat;background-position: 100% 100%;background-size: cover;} .main_con #section01 .section_inner {overflow: hidden;} .main_con #section01 .section_inner::after {content: 'Convergence Open Sharing System';position: absolute;top: 150px;right: 0;z-index: -1;color: #fff;writing-mode: vertical-lr;font-size: 160px;font-weight: 700;color: #2c3039;opacity: 0.3;white-space: nowrap;} .main_con #section01 .int_btn_wp {display: flex;margin-top: 50px;} .main_con #section01 .int_btn_wp > div {width: calc(50% - 12px);padding: 50px;border: 1px solid rgba(255,255,255,0.2);border-radius: 40px;text-align: center;font-size: 20px;font-weight: 500;color: #fff;} .main_con #section01 .int_btn_wp > div.int1 {margin-right: 12px;} .main_con #section01 .int_btn_wp > div.int2 {margin-left: 12px;} .main_con #section01 .int_btn_wp > div::before {content: '';display: block;height: 80px;margin-bottom: 30px;background-repeat: no-repeat;background-position: 50% 50%;} .main_con #section01 .int_btn_wp > div.int1::before {background-image: url(../img/ico_m_int1.png);} .main_con #section01 .int_btn_wp > div.int2::before {background-image: url(../img/ico_m_int2.png);} /**/ .main_con #section02 {overflow: hidden;background-image: url(../img/bg_m_section2.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;} .main_con #section02 .section_inner::after {content: 'Green Technology Innovator';position: absolute;top: 50%;left: 0;z-index: -1;transform: translateY(-50%);font-size: 160px;font-weight: 700;color: #fff;opacity: 0.5;white-space: nowrap;} .main_con #section02 .field_wp {display: flex;justify-content: space-between;} .main_con #section02 .field_wp .left {width: 30%;} .main_con #section02 .field_wp .right {margin-left: 30px;font-size: 0;text-align: right;flex-grow: 1;} .main_con #section02 .field_wp .right > div {display: inline-flex;width: calc(45% - 15px);height: 400px;padding: 40px;border-radius: 40px;background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;vertical-align: top;font-size: 21px;font-weight: 500;color: #000;align-items: end;} .main_con #section02 .field_wp .right > div.field1 {margin-top: 60px;background-image: url(../img/bg_m_field1.jpg);} .main_con #section02 .field_wp .right > div.field2 {margin-left: 30px;background-image: url(../img/bg_m_field2.jpg);} /**/ .main_con #section03 {overflow: hidden;position: relative;z-index: 0;} .main_con #section03 .ico1 {position: absolute;left: 0;transform: translateX(-50%);} .main_con #section03 .ico2 {position: absolute;top: 0;left: 50%;z-index: -1;/*transform: translateX(-40%);*/clip-path: polygon(0 0, 0 0, 0 0, 0 0);} .main_con #section03.active .ico2 {animation: bgSection3 2s;animation-delay: 0.5s ease-in-out;animation-fill-mode: both;} .main_con #section03 .section_inner {display: flex;flex-wrap: wrap;} .main_con #section03 .section_inner > div {position: relative;} .main_con #section03 .m_notice {width: calc(100% - 500px);margin-right: 100px;} .main_con #section03 .m_notice h3 {margin-bottom: 0;} .main_con #section03 .m_notice > ul > li {display: flex;width: 100%;align-items: center;border-bottom: 1px solid #ebebeb;} .main_con #section03 .m_notice > ul > li > span.date {width: 140px;font-size: 16px;font-weight: 400;color: #555;} .main_con #section03 .m_notice > ul > li > a {width: calc(100% - 140px);padding: 30px 0;font-size: 18px;font-weight: 400;color: #000;} .main_con #section03 .m_notice > ul > li:last-child {border-bottom: 0;} .main_con #section03 .m_news {width: 400px;} .main_con #section03 .m_news figure img {border-radius: 40px;} .main_con #section03 .m_news figure figcaption {overflow: hidden;margin-top: 20px;font-size: 18px;font-weight: 400;color: #000;text-overflow: ellipsis;white-space: nowrap;} .main_con #section03 .m_program {width: 100%;margin-top: 80px;} .main_con #section03 .m_program .list {display: flex;padding-top: 20px;} .main_con #section03 .m_program .list > li {width: 33.33333%;padding: 0 15px;} .main_con #section03 .m_program .list > li:nth-child(3n-2) {padding-left: 0;} .main_con #section03 .m_program .list > li:nth-child(3n) {padding-right: 0;} .main_con #section03 .m_program .list > li > a {display: block;height: 100%;padding: 40px;border: 1px solid #ddd;border-radius: 40px;background-color: #fff;} .main_con #section03 .m_program .list > li span.state {display: block;font-size: 17px;font-weight: 600;} .main_con #section03 .m_program .list > li span.state.ing {color: #1f92ae;} .main_con #section03 .m_program .list > li span.state.end {color: #999;} .main_con #section03 .m_program .list > li p.title {overflow: hidden;overflow: hidden;display: -webkit-box;height: 2.6em;margin: 20px 0 45px;font-size: 20px;line-height: 1.3em;font-weight: 400;color: #000;-webkit-box-orient: vertical;-webkit-line-clamp: 2;text-overflow: ellipsis;} .main_con #section03 .m_program .list > li .more {display: inline-block;padding-right: 40px;font-size: 16px;color: #757575;background-image: url(../img/ico_arrow_g.png);background-repeat: no-repeat;background-position: 100% 50%;} /**/ .main_con #section04 {background-image: url(../img/bg_section04.jpg);background-repeat: no-repeat;background-position: 100% 50%;background-size: cover;} .main_con #section04 .section_inner {padding: 100px 0;} /******************************************************* main - 240709 *******************************************************/ /**/ .main_content .section .title_wp {display: flex;margin-bottom: 30px;justify-content: space-between;align-items: center;} .main_content .section .title_wp.ctrl_center {justify-content: center;} .main_content .section .title_wp h3 {margin-bottom: 0;} .main_content .section .title_wp .controls {display: inline-flex;align-items: center;} .main_content .section .title_wp .m_more {margin-left: 50px;} .main_content .section .slider .slick-track {display: flex;} .main_content .section .slider .slick-track li {float: none;height: auto;} .main_content .section .slider .slick-dots {position: absolute;top: -9999px;left: -9999px;width: 1px;height: 1px;clip: rect(0 0 0 0);} /**/ .main_content .section .title_wp {display: flex;margin-bottom: 30px;justify-content: space-between;align-items: center;} .main_content .section .title_wp.ctrl_center {justify-content: center;} .main_content .section .title_wp h3 {margin-bottom: 0;} .main_content .section .title_wp .controls {display: inline-flex;align-items: center;} .main_content .section .title_wp .m_more {margin-left: 50px;} .main_content .section .slider .slick-track {display: flex;} .main_content .section .slider .slick-track li {float: none;height: auto;} .main_content .section .slider .slick-dots {position: absolute;top: -9999px;left: -9999px;width: 1px;height: 1px;clip: rect(0 0 0 0);} /**/ .main_content #section01 {overflow: hidden;position: relative;z-index: 1;background: #fff;} .main_content #section01::before {content: '';position: absolute;top: 0;left: 0;z-index: 1;width: calc(50% - 760px);height: 100%;background-color: #fff;} .main_content #section01 .section_inner {display: block;} .main_content #section01 .section_inner > div {position: relative;} .main_content #section01 .m_notice {width: 100%;} .main_content #section01 .m_notice h3 {} .main_content #section01 .m_notice > ul.slider li {overflow: hidden;width: 33.33333%;border: 1px solid #ddd;background-color: #fff;border-radius: 40px;} .main_content #section01 .m_notice > ul.slider .slick-track {margin: 0;} .main_content #section01 .m_notice > ul.slider .slick-list {overflow: visible;} .main_content #section01 .m_notice > ul.slider li + li {margin-left: 40px;} .main_content #section01 .m_notice > ul.slider li > a {display: block;padding: 35px 40px;} .main_content #section01 .m_notice > ul.slider li > a > span {display: block;} .main_content #section01 .m_notice > ul.slider li > a > span.title {overflow: hidden;height: 2.8em;font-size: 20px;line-height: 1.4em;color: #000;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;text-overflow: ellipsis;} .main_content #section01 .m_notice > ul.slider li > a > span.date {margin-top: 10px;font-size: 15px;color: #757575;} .main_content #section01 .m_notice > ul.slider li > a > span.more {margin-top: 30px;font-size: 15px;color: #757575;} .main_content #section01 .m_news {width: 100%;padding: 100px 0;} .main_content #section01 .m_news .slider {overflow: hidden;} .main_content #section01 .m_news .slider .slick-list {margin: 0 -15px;} .main_content #section01 .m_news .slider .slick-track {margin: 0;} .main_content #section01 .m_news figure {padding: 0 15px;} .main_content #section01 .m_news figure img {max-width: 100%;height: 200px;border-radius: 30px;} .main_content #section01 .m_news figure figcaption {overflow: hidden;margin-top: 20px;font-size: 18px;font-weight: 400;color: #000;text-overflow: ellipsis;white-space: nowrap;} .main_content #section01 .m_program {overflow: hidden;width: 100%;} .main_content #section01 .m_program .list {display: flex;padding-top: 20px;margin: 0 -15px;} .main_content #section01 .m_program .list > li {width: 33.33333%;padding: 0 15px;} /*.main_content #section01 .m_program .list > li:nth-child(3n-2) {padding-left: 0;} .main_content #section01 .m_program .list > li:nth-child(3n) {padding-right: 0;}*/ .main_content #section01 .m_program .list > li > a {display: block;height: 100%;padding: 30px;border: 1px solid #ddd;border-radius: 30px;background-color: #fff;} .main_content #section01 .m_program .list > li span.state {display: block;font-size: 17px;font-weight: 600;} .main_content #section01 .m_program .list > li span.state.ing {color: #1f92ae;} .main_content #section01 .m_program .list > li span.state.end {color: #999;} .main_content #section01 .m_program .list > li p.title {overflow: hidden;overflow: hidden;display: -webkit-box;height: 2.6em;margin: 15px 0 30px;font-size: 19px;line-height: 1.3em;font-weight: 400;color: #000;-webkit-box-orient: vertical;-webkit-line-clamp: 2;text-overflow: ellipsis;} .main_content #section01 .m_program .list > li .more {display: inline-block;padding-right: 30px;font-size: 15px;color: #757575;background-image: url(../img/ico_arrow_g.png);background-repeat: no-repeat;background-position: 100% 50%;} /**/ .main_content #section02 {overflow: hidden;background-image: url(../img/bg_m_section2.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;} /*.main_content #section02 .section_inner::after {content: 'Green Technology Innovator';position: absolute;top: 50%;left: 0;z-index: -1;transform: translateY(-50%);font-size: 160px;font-weight: 700;color: #fff;opacity: 0.5;white-space: nowrap;}*/ .main_content #section02 .section_inner {overflow: hidden;} .main_content #section02 .m_video {margin: 0 -30px 0 0;} .main_content #section02 .m_video .slider .slick-list .slick-track li {display: flex;align-items: center;} .main_content #section02 .m_video .slider .slick-list .slick-track li div.video {padding: 30px;} .main_content #section02 .m_video .slider .slick-list .slick-track li.slick-current div.video {padding: 0;transition: all 0.3s;} .main_content #section02 .m_video .slider .slick-list .slick-track li div.video > a {display: block;} .main_content #section02 .field_wp {display: flex;justify-content: space-between;} .main_content #section02 .field_wp .right {font-size: 0;} .main_content #section02 .field_wp .right > div {display: inline-flex;width: 410px;height: 500px;padding: 50px;border-radius: 40px;background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;vertical-align: top;font-size: 24px;font-weight: 500;color: #000;align-items: end;} .main_content #section02 .field_wp .right > div.field1 {margin-top: 80px;background-image: url(../img/bg_m_field1.jpg);} .main_content #section02 .field_wp .right > div.field2 {margin-left: 40px;background-image: url(../img/bg_m_field2.jpg);} /**/ .main_content #section03 {background-color: #0a0e18;background-image: url(../img/bg_m_section1.jpg);background-repeat: no-repeat;background-position: 100% 100%;background-size: cover;} .main_content #section03 .section_inner {overflow: hidden;} .main_content #section03 .section_inner::after {content: 'Convergence Open Sharing System';position: absolute;top: 150px;right: 0;z-index: -1;color: #fff;writing-mode: vertical-lr;font-size: 160px;font-weight: 700;color: #2c3039;opacity: 0.3;white-space: nowrap;} .main_content #section03 .int_btn_wp {display: flex;margin-top: 50px;} .main_content #section03 .int_btn_wp > div {width: calc(50% - 12px);padding: 50px;border: 1px solid rgba(255,255,255,0.2);border-radius: 40px;text-align: center;font-size: 20px;font-weight: 500;color: #fff;} .main_content #section03 .int_btn_wp > div.int1 {margin-right: 12px;} .main_content #section03 .int_btn_wp > div.int2 {margin-left: 12px;} .main_content #section03 .int_btn_wp > div::before {content: '';display: block;height: 80px;margin-bottom: 30px;background-repeat: no-repeat;background-position: 50% 50%;} .main_content #section03 .int_btn_wp > div.int1::before {background-image: url(../img/ico_m_int1.png);} .main_content #section03 .int_btn_wp > div.int2::before {background-image: url(../img/ico_m_int2.png);} /**/ #foot_section {background-color:#070a10;} #foot_section .section_inner {padding: 70px 100px 70px 0;} #foot_section .footer {position:relative;} #foot_section .f_top {position: relative;} #foot_section .f_top .logo img {} #foot_section .f_info {margin: 10px 0 0;} #foot_section .f_info > a {display: inline-block;padding: 30px 0;font-size: 15px;color: #fff;} #foot_section .f_info > a.privacy {color: #81bcff;} #foot_section .f_info > a + a {margin-left: 30px;} #foot_section .f_addr {color: #fff;} #foot_section .f_addr span {display: inline-block;padding: 5px 0;color: #fff;font-size: 15px;line-height: 1.3em;} #foot_section .f_addr span + span {margin-left: 45px;} #foot_section .f_addr span.addr {display: block;} #foot_section .f_addr span.tel {margin-left: 0;} #foot_section cite {display: block;margin-top: 40px;font-size: 15px;color: #fff;font-style: normal;} #foot_section #gotop {position: absolute;top: 70px;right: 0;text-align: right;} #foot_section #gotop a {display: inline-block;width: 80px;height: 80px;font-size: 0;line-height: 1;background: #1f92ae url(../img/btn_top_arr.png) no-repeat 50% 50% / auto 50px;border-radius: 50%;text-indent: -9999px;} #foot_section #gotop p {margin-top: 40px;font-size: 28px;font-weight: 200;color: #fff;} #mCard2 {display: none;} /**/ #contain {overflow: hidden;position: relative;width: 100%;} #contain .contain {width: 94%;margin: 50px auto 80px;} #contain .contain::after {content: '';display: block;clear: both;} /* 서브비주얼 */ #contain #subVisual {width: 100%;} #contain #subVisual .sub_visual .visual_wp {display:none;/*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: 94%;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: 5px;font-size: 38px;font-weight: 700;color: #000;} #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;} #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: 16px;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 #subTitle {padding:140px 0 30px;background-image: url(../img/bg_sub_visual.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;color: #fff;} #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;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% - 260px);min-height: 650px;} /**/ #aside {float: left;width: 210px;margin: 0 50px 0 0;} #aside h2 {width: 100%;padding: 0 15px 50px;text-align: center;} #aside h2 > span {font-size: 20px;font-weight: 400;vertical-align: middle;} #aside ul.left_menu > li {border-bottom: 1px solid #eaeaea;} #aside ul.left_menu > li:first-child {border-top: 1px solid #eaeaea;} #aside ul.left_menu > li > a {position: relative;z-index: 0;display: block;padding: 10px 15px;font-size: 16px;font-weight: 400;color: #555;transition: all 0.3s;} #aside ul.left_menu > li > a:hover {color: var(--mainColor);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; background-image: url(../img/ico_leftmenu.png);background-repeat: no-repeat;background-position: 50% 50%;background-size: auto 10px;} #aside ul.left_menu > li.sel > a::after {background-image: url(../img/ico_leftmenu_on.png);background-size: auto 2px;} #aside ul.left_menu > li.sel > a, #aside ul.left_menu > li.sel > a:hover {color: #fff;border: 0;background-color: var(--mainColor);transition: all 0.5s} #aside ul.left_menu > li ul {display: none;padding: 20px 25px;background: #f3f3f3;border-top: 0;} #aside ul.left_menu > li.sel ul {display: block;} #aside ul.left_menu > li li a {display: block;border: 0;font-size: 15px;height: auto;padding: 4px 0 4px 20px;margin: 0;color: #333; background-image: url(../img/ico_left_submenu.gif);background-repeat: no-repeat;background-position: 0 15px;background-size: auto 1px;} #aside ul.left_menu > li li:last-child a {border: 0} #aside ul.left_menu > li li a:hover, #aside ul.left_menu > li li a.sel {font-size: 15px;color:var(--subColor1);border: 0;background-image: url(../img/ico_left_submenu_on.png); background-position: 0 10px;background-size: 8px auto;} /**/ #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 .lefttit{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: 30px;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:30px;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} */ @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: 1100px) { #foot_section #gotop p {display: none;} } @media all and (max-width: 899px) { /**/ #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: 0;width: 100%;max-width: none;padding-left: 60px;padding-right: 60px;text-align: center;} #header h1 a {text-align: center;padding:13px 0;display: flex;justify-content: center;align-items: center;} #header h1 a img {width:260px;} #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=3) 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; } #gnb {display: none;} #header .etc_wp {display: none;} #header button.btn-menu {display: block;} /**/ .section_inner {position: relative;z-index: 0;width: 94%;padding: 60px 0;margin: 0 auto;} .section h3 {margin-bottom: 15px;font-size: 25px;font-weight: 600;color: #000;} .section h4 {font-size: 21px;font-weight: 500;color: var(--mainColor);} .section .sub_title {font-size: 16px;font-weight: 400;color: #000;} .section .btn_wrap {margin-top: 60px;text-align: center;} .section .btn_wrap > a {display: inline-block;width: 216px;height: 62px;border: 1px solid #333;font-size: 17px;font-weight: 400;color: #333;line-height: 62px;} .section .m_more {padding-right: 25px;font-size: 14px;background-repeat: no-repeat;background-position: 100% 50%;background-size: auto 7px;} .section .m_more.black {color: #000;background-image: url(../img/ico_arrow_b.png);} .section .m_more.white {color: #fff;background-image: url(../img/ico_arrow_w.png);} .section .m_more.white {color: #757575;background-image: url(../img/ico_arrow_g.png);} .main_con .section .m_more {position: absolute;top: 13px;right: 0;} .section .more_btn {margin-top: 25px;} .section .more_btn > a {display: inline-block;padding: 10px;font-size: 14px;font-weight: 400;color: #fff;border-bottom: 1px solid #fff;} .section .more_btn > a::after {content: '';display: inline-block;width: 20px;height: 20px;margin-left: 20px;background-image: url(../img/ico_arrow_w.png);background-repeat: no-repeat;background-position: 50% 50%;vertical-align: middle;} .section .more_btn.black > a {color: #000;border-bottom: 1px solid #000;} .section .more_btn.black > a::after {background-image: url(../img/ico_arrow_b.png);} .section [data-aos][data-aos].aos-animate, body .section [data-aos].aos-animate { transition-delay: 0s !important; } /**/ .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;} .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*/ #mainVisual {overflow: hidden;position: relative;z-index: 0;width: 100%;height: 640px;} #mainVisual video {position: absolute;top: 50%;left: 50%;z-index: -2;width: 100%;min-width: 1920px;height: auto;transform: translate(-50%, -50%);} #mainVisual::after {content: '';position: absolute;top: 0;left: 0;z-index: -1;width: 100%;height: 100%;background-color: rgba(0,0,0,0.3);} #mainVisual .main_slogan {position: absolute;top: 50%;left: 0;width: 100%;transform: translateY(-50%);} #mainVisual .main_slogan p {text-align: center;font-size: 18px;font-weight: 400;color: #fff;text-shadow: 5px 5px 20px rgba(0,0,0,0.5);} #mainVisual .main_slogan p span.tit {position: relative;display: block;width: 100%;padding: 0 20px;margin-bottom: 30px;text-align: center;font-size: 36px;font-weight: 600;color: #fff;line-height: 1.2em;/*animation-name: v_text_typing;animation-duration: 5s;*/} #mainVisual .main_slogan p span.tit > span.type > span {animation: v_text_type 3s ease-in;animation-fill-mode: both;white-space: nowrap;} #mainVisual .main_slogan p span.tit > span.type > span:nth-child(1) {animation-delay: 0s;} #mainVisual .main_slogan p span.tit > span.type > span:nth-child(2) {animation-delay: 0.2s;} #mainVisual .main_slogan p span.tit > span.type > span:nth-child(3) {animation-delay: 0.4s;} #mainVisual .main_slogan p span.tit > span.type > span:nth-child(4) {animation-delay: 0.6s;} #mainVisual .main_slogan p span.tit > span.type > span:nth-child(5) {animation-delay: 0.8s;} #mainVisual .main_slogan p span.tit > span.type > span:nth-child(6) {animation-delay: 1s;} #mainVisual .main_slogan p span.tit > span.type > span:nth-child(7) {animation-delay: 1.2s;} #mainVisual .main_slogan p span.tit > span.type > span:nth-child(8) {animation-delay: 1.4s;} #mainVisual .main_slogan p span.tit > span.type > span:nth-child(9) {animation-delay: 1.6s;} #mainVisual .main_slogan p span.tit > span.type > span:nth-child(10) {animation-delay: 1.8s;} #mainVisual .main_slogan p span.tit > span.line {overflow: hidden;text-indent: 100px;animation: 1.5s v_text_left ease-in-out;animation-delay: 2s;animation-fill-mode: both;white-space: nowrap;opacity: 0;} #mainVisual .main_slogan p span.sub {overflow: hidden;display: block;padding: 0 20px;} /*#mainVisual .main_slogan p span.tit > span:nth-child(13) {animation-delay: 5.5s;} #mainVisual .main_slogan p span.tit > span:nth-child(14) {animation-delay: 6s;} #mainVisual .main_slogan p span.tit > span:nth-child(15) {animation-delay: 6.5s;} #mainVisual .main_slogan p span.tit > span:nth-child(16) {animation-delay: 7s;} #mainVisual .main_slogan p span.tit > span:nth-child(17) {animation-delay: 7.5s;} #mainVisual .main_slogan p span.tit > span:nth-child(18) {animation-delay: 8s;}*/ #mainVisual .v_scroll {position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);} #mainVisual .v_scroll.on {position: fixed;} #mainVisual .v_scroll > a {position: relative;display: block;padding: 10px 20px 50px;font-size: 15px;font-weight: 500;color: #fff;} #mainVisual .v_scroll > a::after {content: '';position: absolute;top: 30px;left: 50%;width: 1px;height: 40px;margin: 8px auto 0;background-color: #fff;animation: v_scroll 3s ease-in-out;animation-iteration-count: infinite;} @keyframes v_text_type { 0% {opacity: 0;} 20% {opacity: 0.8;} 100% {text-indent: 0;} } @keyframes v_text_left { 0% {text-indent: 100px;opacity: 0;} 30% {opacity: 0.6;} 80% {opacity: 1;text-indent: -30px;} 100% {text-indent: 0;opacity: 1;} } /**/ .main_con #section01 {background-color: #0a0e18;background-image: url(../img/bg_m_section1.jpg);background-repeat: no-repeat;background-position: 100% 100%;background-size: cover;} .main_con #section01 .section_inner {overflow: hidden;} .main_con #section01 .section_inner::after {content: 'Convergence Open Sharing System';position: absolute;top: 150px;right: 0;z-index: -1;color: #fff;writing-mode: vertical-lr;font-size: 160px;font-weight: 700;color: #2c3039;opacity: 0.3;white-space: nowrap;} .main_con #section01 .int_btn_wp {display: flex;margin-top: 50px;} .main_con #section01 .int_btn_wp > div {width: calc(50% - 12px);padding: 30px;border: 1px solid rgba(255,255,255,0.2);border-radius: 30px;text-align: center;font-size: 18px;font-weight: 500;color: #fff;} .main_con #section01 .int_btn_wp > div.int1 {margin-right: 12px;} .main_con #section01 .int_btn_wp > div.int2 {margin-left: 12px;} .main_con #section01 .int_btn_wp > div::before {content: '';display: block;height: 80px;margin-bottom: 30px;background-repeat: no-repeat;background-position: 50% 50%;} .main_con #section01 .int_btn_wp > div.int1::before {background-image: url(../img/ico_m_int1.png);} .main_con #section01 .int_btn_wp > div.int2::before {background-image: url(../img/ico_m_int2.png);} /**/ .main_con #section02 {overflow: hidden;background-image: url(../img/bg_m_section2.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;} .main_con #section02 .section_inner::after {content: 'Green Technology Innovator';position: absolute;top: 50%;left: 0;z-index: -1;transform: translateY(-50%);font-size: 160px;font-weight: 700;color: #fff;opacity: 0.5;white-space: nowrap;} .main_con #section02 .field_wp {} .main_con #section02 .field_wp .left {} .main_con #section02 .field_wp .right {margin-top: 30px;font-size: 0;text-align: left;flex-grow: 1;} .main_con #section02 .field_wp .right > div {display: inline-flex;width: calc(50% - 15px);height: 250px;padding: 30px;border-radius: 30px;background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;vertical-align: top;font-size: 18px;font-weight: 500;color: #000;align-items: end;} .main_con #section02 .field_wp .right > div.field1 {margin-top: 60px;background-image: url(../img/bg_m_field1.jpg);} .main_con #section02 .field_wp .right > div.field2 {margin-left: 30px;background-image: url(../img/bg_m_field2.jpg);} /**/ .main_con #section03 {overflow: hidden;position: relative;z-index: 0;} .main_con #section03 .ico1 {position: absolute;left: 0;transform: translateX(-50%);} .main_con #section03 .ico2 {position: absolute;bottom: 0;left: 50%;z-index: -1;transform: translateX(-40%);clip-path: polygon(0 0, 0 0, 0 0, 0 0);} .main_con #section03.active .ico2 {display: none;animation: bgSection3 2s;animation-delay: 0.5s ease-in-out;animation-fill-mode: both;} .main_con #section03 .section_inner {} .main_con #section03 .section_inner > div + div {margin-top: 50px;} .main_con #section03 .m_notice {} .main_con #section03 .m_notice h3 {margin-bottom: 0;} .main_con #section03 .m_notice > ul > li {display: flex;width: 100%;align-items: center;border-bottom: 1px solid #ebebeb;} .main_con #section03 .m_notice > ul > li > span.date {width: 140px;font-size: 14px;font-weight: 400;color: #555;} .main_con #section03 .m_notice > ul > li > a {width: calc(100% - 140px);padding: 20px 0;font-size: 16px;font-weight: 400;color: #000;} .main_con #section03 .m_news h3 {margin-bottom: 30px;} .main_con #section03 .m_news figure img {width: 100%;border-radius: 40px;} .main_con #section03 .m_news figure figcaption {overflow: hidden;margin-top: 20px;font-size: 16px;font-weight: 400;color: #000;text-overflow: ellipsis;white-space: nowrap;} .main_con #section03 .m_program {width: 100%;margin-top: 80px;} .main_con #section03 .m_program .list {padding-top: 20px;} .main_con #section03 .m_program .list > li + li {margin-top: 15px;} .main_con #section03 .m_program .list > li > a {display: block;height: 100%;padding: 30px;border: 1px solid #ddd;border-radius: 30px;background-color: #fff;} .main_con #section03 .m_program .list > li span.state {display: block;font-size: 14px;font-weight: 600;} .main_con #section03 .m_program .list > li span.state.ing {color: #1f92ae;} .main_con #section03 .m_program .list > li span.state.end {color: #999;} .main_con #section03 .m_program .list > li p.title {overflow: hidden;overflow: hidden;display: -webkit-box;max-height: 2.6em;margin: 15px 0 25px;font-size: 16px;line-height: 1.3em;font-weight: 400;color: #000;-webkit-box-orient: vertical;-webkit-line-clamp: 2;text-overflow: ellipsis;} .main_con #section03 .m_program .list > li .more {display: inline-block;padding-right: 30px;font-size: 14px;color: #757575;background-image: url(../img/ico_arrow_g.png);background-repeat: no-repeat;background-position: 100% 50%;} /**/ .main_con #section04 {background-image: url(../img/bg_section04.jpg);background-repeat: no-repeat;background-position: 30% 50%;background-size: cover;} .main_con #section04 .section_inner {padding: 80px 0;} /******************************************************* main - 240709 *******************************************************/ /**/ .main_content .section .title_wp {display: flex;margin-bottom: 30px;justify-content: space-between;align-items: center;} .main_content .section .title_wp.ctrl_center {justify-content: center;} .main_content .section .title_wp h3 {margin-bottom: 0;} .main_content .section .title_wp .controls {display: inline-flex;align-items: center;} .main_content .section .title_wp .m_more {margin-left: 50px;} .main_content .section .slider .slick-track {display: flex;} .main_content .section .slider .slick-track li {float: none;height: auto;} .main_content .section .slider .slick-dots {position: absolute;top: -9999px;left: -9999px;width: 1px;height: 1px;clip: rect(0 0 0 0);} /**/ .main_content .section .title_wp {display: flex;margin-bottom: 10px;justify-content: space-between;align-items: center;} .main_content .section .title_wp.ctrl_center {justify-content: center;} .main_content .section .title_wp h3 {margin-bottom: 0;} .main_content .section .title_wp .controls {display: inline-flex;align-items: center;} .main_content .section .title_wp .paging {font-size: 14px;} .main_content .section .title_wp .m_more {margin-left: 20px;} .main_content .section .slider .slick-track {display: flex;} .main_content .section .slider .slick-track li {float: none;height: auto;} .main_content .section .slider .slick-dots {position: absolute;top: -9999px;left: -9999px;width: 1px;height: 1px;clip: rect(0 0 0 0);} /**/ .main_content #section01 {overflow: hidden;position: relative;z-index: 1;background: #fff;} .main_content #section01::before {content: '';position: absolute;top: 0;left: 0;z-index: 1;width: 3%;height: 100%;background-color: #fff;} .main_content #section01 .section_inner {display: block;} .main_content #section01 .section_inner > div {position: relative;} .main_content #section01 .m_notice {width: 100%;} .main_content #section01 .m_notice h3 {} .main_content #section01 .m_notice > ul.slider li {overflow: hidden;width: 50%;border: 1px solid #ddd;background-color: #fff;border-radius: 20px;} .main_content #section01 .m_notice > ul.slider .slick-track {margin: 0;} .main_content #section01 .m_notice > ul.slider .slick-list {overflow: visible;} .main_content #section01 .m_notice > ul.slider li + li {margin-left: 20px;} .main_content #section01 .m_notice > ul.slider li > a {display: block;padding: 20px 25px;} .main_content #section01 .m_notice > ul.slider li > a > span {display: block;} .main_content #section01 .m_notice > ul.slider li > a > span.title {overflow: hidden;height: 2.8em;font-size: 17px;line-height: 1.4em;color: #000;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;text-overflow: ellipsis;} .main_content #section01 .m_notice > ul.slider li > a > span.date {margin-top: 7px;font-size: 13px;color: #757575;} .main_content #section01 .m_notice > ul.slider li > a > span.more {margin-top: 25px;font-size: 13px;color: #757575;} .main_content #section01 .m_news {width: 100%;padding: 70px 0;} .main_content #section01 .m_news .slider {overflow: hidden;} .main_content #section01 .m_news .slider .slick-list {margin-right: -40px;} .main_content #section01 .m_news .slider .slick-track {margin: 0;} .main_content #section01 .m_news figure + figure {padding-left: 40px;} .main_content #section01 .m_news figure img {max-width: 100%;height: 200px !important;margin: auto;border-radius: 20px;} .main_content #section01 .m_news figure figcaption {overflow: hidden;margin-top: 25px;font-size: 17px;font-weight: 400;color: #000;text-overflow: ellipsis;white-space: nowrap;} .main_content #section01 .m_program {width: 100%;} .main_content #section01 .m_program .list {display: block;padding-top: 0;} .main_content #section01 .m_program .list > li {width: 100%;padding: 10px 0;} /*.main_content #section01 .m_program .list > li:nth-child(3n-2) {padding-left: 0;} .main_content #section01 .m_program .list > li:nth-child(3n) {padding-right: 0;}*/ .main_content #section01 .m_program .list > li > a {display: block;height: 100%;padding: 25px;border: 1px solid #ddd;border-radius: 20px;background-color: #fff;} .main_content #section01 .m_program .list > li span.state {display: block;font-size: 15px;font-weight: 600;} .main_content #section01 .m_program .list > li span.state.ing {color: #1f92ae;} .main_content #section01 .m_program .list > li span.state.end {color: #999;} .main_content #section01 .m_program .list > li p.title {overflow: hidden;overflow: hidden;display: -webkit-box;height: 2.6em;margin: 15px 0 25px;font-size: 17px;line-height: 1.3em;font-weight: 400;color: #000;-webkit-box-orient: vertical;-webkit-line-clamp: 2;text-overflow: ellipsis;} .main_content #section01 .m_program .list > li .more {display: inline-block;padding-right: 30px;font-size: 13px;color: #757575;background-image: url(../img/ico_arrow_g.png);background-repeat: no-repeat;background-position: 100% 50%;} /**/ .main_content #section02 {overflow: hidden;background-image: url(../img/bg_m_section2.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;} /*.main_content #section02 .section_inner::after {content: 'Green Technology Innovator';position: absolute;top: 50%;left: 0;z-index: -1;transform: translateY(-50%);font-size: 160px;font-weight: 700;color: #fff;opacity: 0.5;white-space: nowrap;}*/ .main_content #section02 .section_inner {overflow: hidden;} .main_content #section02 .m_video {margin: 0 -30px 0 0;} .main_content #section02 .m_video .slider .slick-list .slick-track li {display: flex;align-items: center;} .main_content #section02 .m_video .slider .slick-list .slick-track li div.video {padding: 30px;} .main_content #section02 .m_video .slider .slick-list .slick-track li.slick-current div.video {padding: 0;transition: all 0.3s;} .main_content #section02 .m_video .slider .slick-list .slick-track li div.video > a {display: block;} .main_content #section02 .field_wp {display: flex;justify-content: space-between;} .main_content #section02 .field_wp .right {font-size: 0;} .main_content #section02 .field_wp .right > div {display: inline-flex;width: 410px;height: 500px;padding: 50px;border-radius: 40px;background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;vertical-align: top;font-size: 24px;font-weight: 500;color: #000;align-items: end;} .main_content #section02 .field_wp .right > div.field1 {margin-top: 80px;background-image: url(../img/bg_m_field1.jpg);} .main_content #section02 .field_wp .right > div.field2 {margin-left: 40px;background-image: url(../img/bg_m_field2.jpg);} /**/ .main_content #section03 {background-color: #0a0e18;background-image: url(../img/bg_m_section1.jpg);background-repeat: no-repeat;background-position: 100% 100%;background-size: cover;} .main_content #section03 .section_inner {overflow: hidden;} .main_content #section03 .section_inner::after {content: 'Convergence Open Sharing System';position: absolute;top: 150px;right: 0;z-index: -1;color: #fff;writing-mode: vertical-lr;font-size: 160px;font-weight: 700;color: #2c3039;opacity: 0.3;white-space: nowrap;} .main_content #section03 .int_btn_wp {display: flex;margin-top: 50px;} .main_content #section03 .int_btn_wp > div {width: calc(50% - 12px);padding: 30px;border: 1px solid rgba(255,255,255,0.2);border-radius: 30px;text-align: center;font-size: 18px;font-weight: 500;color: #fff;} .main_content #section03 .int_btn_wp > div.int1 {margin-right: 12px;} .main_content #section03 .int_btn_wp > div.int2 {margin-left: 12px;} .main_content #section03 .int_btn_wp > div::before {content: '';display: block;height: 80px;margin-bottom: 30px;background-repeat: no-repeat;background-position: 50% 50%;} .main_content #section03 .int_btn_wp > div.int1::before {background-image: url(../img/ico_m_int1.png);} .main_content #section03 .int_btn_wp > div.int2::before {background-image: url(../img/ico_m_int2.png);} /**/ #foot_section {background-color:#070a10;} #foot_section .section_inner {padding: 50px 80px 50px 0;} #foot_section .footer {position:relative;} #foot_section .f_top {position: relative;} #foot_section .f_top .logo img {height: 40px !important;} #foot_section .f_info {margin: 0;} #foot_section .f_info > a {display: inline-block;padding: 20px 0;font-size: 14px;color: #fff;} #foot_section .f_info > a.privacy {color: #81bcff;} #foot_section .f_info > a + a {margin-left: 20px;} #foot_section .f_addr {color: #fff;} #foot_section .f_addr span {display: block;padding: 3px 0;color: #fff;font-size: 14px;line-height: 1.3em;} #foot_section .f_addr span + span {} #foot_section .f_addr span.addr {display: block;} #foot_section .f_addr span.tel {margin-left: 0;} #foot_section cite {display: block;margin-top: 20px;font-size: 14px;color: #fff;font-style: normal;} #foot_section #gotop {position: absolute;top: 50px;right: 0;text-align: right;} #foot_section #gotop a {display: inline-block;width: 60px;height: 60px;font-size: 0;line-height: 1;background: #1f92ae url(../img/btn_top_arr.png) no-repeat 50% 50% / auto 35px;border-radius: 50%;text-indent: -9999px;} #foot_section #gotop p {display: none;margin-top: 30px;font-size: 20px;font-weight: 200;color: #fff;} /* 서브비주얼 */ #contain #subVisual {width: 100%;} #contain #subVisual .sub_visual .visual_wp {display:none;/*width: 100%;height: auto;padding-top: 80px;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-bottom: 110px;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: 24px;font-weight: 700;color: #000;} #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;} #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: 16px;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 {padding: 80px 0 25px;background-image: url(../img/bg_sub_visual.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;text-align: center;} #contain #subTitle h3 {margin-bottom: 0;font-size: 27px;font-weight: 700;color: #fff;} #contain #subTitle .locator > ul > li {display: inline-block;vertical-align: middle;color: #fff;} #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;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: 320px;height: 100%;background:#1e2c5d;padding-bottom: 105px;} #dkleft .lefttit{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: 10px 15px;} #dkleft .lefttit > div a {display:inline-block;padding:5px 10px;border:1px solid #555;border-radius:5px;} #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 34px;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: 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;line-height: 1;color: #fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} #closeleft:before{content:"\e870";font-size:30px;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;} #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 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: 600px) { .main_content #section02 .m_video {margin: 0;} } @media all and (max-width: 460px) { .section h3 {font-size: 24px;} .section .line {display: inline-block;} .main_content .section .section_inner {width: 100%;padding: 50px 15px;} .main_content #section01::before {width: 15px;} /**/ .main_content .section .title_wp {display: block;} .main_content .section .title_wp .controls {display: flex;margin-top: 10px;justify-content: center;} .main_content .section .tac .title_wp .controls {justify-content: center;} .main_content .section .title_wp .arrows {margin-right: 15px;} .main_content .section .title_wp .m_more {margin: 0;} .main_content .section .title_wp h3 + .m_more {position: absolute;top: 7px;right: 0;} /**/ #mainVisual {height: 540px;} #mainVisual .main_slogan p {font-size: 17px;} #mainVisual .main_slogan p span.tit {margin-bottom: 20px;font-size: 28px;} #mainVisual .v_scroll > a {font-size: 14px;} /**/ .main_con #section01 .int_btn_wp {display: block;margin-top: 30px;} .main_con #section01 .int_btn_wp > div {width: 100%;padding: 25px;font-size: 16px;} .main_con #section01 .int_btn_wp > div::before {height: 60px;margin-bottom: 20px;background-size: auto 60px;} .main_con #section01 .int_btn_wp > div.int2 {margin: 15px 0 0;} .main_content #section01 h3 {text-align: center;} .main_content #section01 .m_news {padding: 40px 0;} /**/ .main_con #section02 .field_wp .right > div {display: block;width: calc(100% - 30px);height: 150px;font-size: 17px;} .main_con #section02 .field_wp .right > div.field1 {margin-top: 0;} .main_con #section02 .field_wp .right > div.field2 {margin-top: 15px;} /**/ .main_con #section03 .m_notice > ul > li {display: block;padding: 15px 0;} .main_con #section03 .m_notice > ul > li > span.date {display: block;width: 100%;} .main_con #section03 .m_notice > ul > li > a {display: block;width: 100%;padding: 5px 0;} .main_content #section03 .int_btn_wp {display: block;margin-top: 30px;} .main_content #section03 .int_btn_wp > div {width: 100%;padding: 25px;font-size: 16px;} .main_content #section03 .int_btn_wp > div::before {height: 60px;margin-bottom: 20px;background-size: auto 60px;} .main_content #section03 .int_btn_wp > div.int2 {margin: 15px 0 0;} /**/ #foot_section .section_inner {padding-right: 0;} #foot_section .f_info {margin: 20px 0;} #foot_section .f_info > a {display: block;padding: 3px 0;} #foot_section .f_info > a + a {margin: 0;} #foot_section #gotop {display: none !important;} } }/* media */ /* animation */ @keyframes v_scroll { 0% {height: 0} 50% {height: 50px;} 100% {height: 0;} } @keyframes bgSection3 { 0% {clip-path: polygon(100% 0, 100% 0, 100% 0, 100% 0);} 50% {clip-path: polygon(50% 0, 100% 0, 100% 50%, 50% 50%);} 100% {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);} } @keyframes v_text_typing { 0% {width: 0;] 100% {width: auto;} } @keyframes v_text_bar { 0%, 100% {border-color: transparent} 50% {border-color: #fff} }