@charset "utf-8"; /* CSS Document */ /* ********************************************** * * GLOBAL * ********************************************** */ html {width:100%; height:100%; } body,p,pre,form,span,div,table,td,ul,ol,li,dl,dt,dd,input,textarea,label,button {color:#888; font-family:'NanumSquare',sans-serif; letter-spacing:-0.5px; font-size:15px; font-weight:400} body,p,pre,form,span,div,table,td,ul,ol,li,dl,dt,dd,input,textarea,label,button {word-wrap:break-word; word-break:break-all; text-decoration-skip-ink: none; -webkit-text-size-adjust:none;} b,strong {color:#666; word-wrap:break-word; word-break:break-all; font-size:inherit; font-family:inherit; font-weight:600} p,form,span,h1,h2,h3,h4,h5,h6 {margin:0; padding:0; font-weight:normal} div,table {margin:0; padding:0; border-spacing:0; border-collapse:collapse; border:0px none; } table caption { width:0px; height:0px; font-size:0; visibility:hidden; } ul,ol,li,td,dl,dt,dd {margin:0; padding:0;} em,i {font-style:normal} a,span {display:inline-block;} img {border:0;} table caption {width:0px; height:0px; font-size:0; visibility:hidden; } u {text-decoration: none;} a:link, a:visited {color:inherit; text-decoration: none; cursor:pointer} a:hover, a:active {text-decoration: none;} .if_eng * {font-family:"Heebo",Noto Sans CJK KR,'Noto',Sans-serif;} .gall_modify { float: right; background-color: #f3f3f3; color: #000; font-size: 12px; font-weight: bold; padding: 3px 7px 3px 7px; margin-top: 0px; } /* ********************************************** * * FORM * ********************************************** */ /* lable */ /* label {display:inline-block; overflow:hidden; cursor:pointer; color:#888} label:hover {color:#333} label input[type=checkbox],label input[type=radio] {float:left; margin-right:5px; height:13px; width:13px; cursor:pointer; -webkit-gradient:none; -webkit-border-radius:0;} */ /* input */ input[type=submit],input[type=button],button {cursor:pointer; border:0;} input[type=text],input[type=password],input[type=search],input[type=email],input[type=number],input[type=tel] {margin:0;padding:0; border:none; background:none; box-sizing:border-box;} input[type=text],input[type=password],input[type=search],input[type=email],input[type=number],input[type=tel] {border-radius:0px; -webkit-border-radius:0; -webkit-appearance:none; -webkit-gradient:none; } input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button {-webkit-appearance:none; margin:0;} /* number 오른쪽에 나타나는 화살표 버튼없애기 */ input[type=date]::-webkit-outer-spin-button, input[type=date]::-webkit-inner-spin-button {-webkit-appearance:none; margin:0;} /* 오른쪽에 나타나는 화살표 버튼없애기 */ input {color:#999; background:transparent; margin:0; padding:0; border:0; -webkit-appearance: none; -webkit-border-radius: 0;} input[type=text],input[type=password],input[type=search],input[type=email],input[type=number],input[type=tel]:focus {color:#333 !important;} input::-ms-clear {display: none;} /* 크롬 자동완성 BG색 버림(아이디비번저장 시) */ input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px #fff inset;} input:-webkit-autofill:focus {-webkit-box-shadow: 0 0 0px 1000px #fff inset;} /* textarea */ textarea {color:#999; background:transparent; margin:0;padding:0; border:0; border-radius:0px; -webkit-border-radius:0; -webkit-appearance:none; -webkit-gradient:none; } textarea:focus {color:#333 !important;} /* select */ select {color:#999; cursor:pointer; font-size: inherit !important; font-family: inherit !important;} /* select desgin */ .select {overflow:hidden; position:relative; background:#fff; height:35px; width:100%;} .select select {box-sizing:border-box; border:1px solid #ddd; height:100%; width:100%; padding-left:10px; color:#999; position:absolute; left:0; top:0; z-index:2; background:none !important; } .select select {width:100%; -webkit-appearance: none; appearance: none; -moz-appearance: none; -webkit-user-select: none; padding-right:40px; border-radius:0; -webkit-border-radius:0 !important;} .select select::-ms-expand {display:none;} .select .icons {height:100%; position:absolute; right:0; top:0; z-index:1; color:#ccc; text-align:center; width:35px; line-height:35px; font-size:0.85em; font-weight:600;} .select .icons:before {position:absolute; left:0; top:0; width:35px; line-height:35px;} .select select:focus+ .icons:before {color:#333; } .select select:focus+ .icons:before {transform: rotate(180deg); -webkit-transform: rotate(180deg);} .select select:focus {border:1px solid #999; color:#333;} .select {transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .select .icons:before {transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} /* placeholder */ placeholder {color:#bbb !important} input::-webkit-input-placeholder {color:#bbb !important} input:-ms-input-placeholder {color:#bbb !important} input:-moz-placeholder {color:#bbb !important} textarea::-webkit-input-placeholder {color:#bbb !important} textarea:-ms-input-placeholder {color:#bbb !important} textarea:-moz-placeholder {color:#bbb !important} /* 검색인풋에 자동x버튼 삭제 */ input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration {display:none;} /* 인풋포커스 라인삭제 : 웹접근성 작업 시 사용하면 안됨 */ input,select,textarea {outline:none} /* 마우스 드래그시 컬러 (디자인적으로 필요하면 사용) 하위브라우저 적용안됨 */ ::selection {background:#002b68; color:#fff; text-shadow: none;} ::-moz-selection {background:#002b68; color:#fff; text-shadow: none;} ::-webkit-selection {background:#002b68; color:#fff; text-shadow: none;} /* ********************************************** * * ESSENTIAL * ********************************************** */ .wrap {position:relative; box-sizing:border-box; } /* 사이트 전체 감싸는 영역 */ .lineup {display:inline-block} /* float요소들 정렬시킬때 사용 */ .layout_fix {max-width:1024px; margin:0 auto; position:relative; box-sizing:content-box;} /* 이부분 실작업시 수정할것! 컨첸츠 레이아웃 전체값 */ .upper_link {position:absolute; left:0; top:0; width:100%; height:100%; box-sizing:border-box; z-index:9} /* z-index값 수정하지말것 */ .upper_link img {width:100%; height:100%;} .flex_box {margin:0 auto; word-wrap:break-word; word-break:keep-all; font-size:inherit !important;} /* 이미지 버튼 코딩 규격 */ .img_btn {position:relative; font-size:0px;} .img_off {font-size:0px;} .img_over {position:absolute; left:0; top:0; opacity: 0; filter: alpha(opacity=0); -ms-filter:alpha(opacity=0); width:100%; font-size:0px;} /* */ /* **************************************** * * ELEMENT (common) * **************************************** */ /* 글씨 br역할 반응형 */ u {display:block;} /* PC/모바일 요소 스위칭 */ .if_pc {display:block;} .if_mo {display:none;} .if_mid {display:none;} .if_min {display:none;} /* PC/모바일 이미지 스위칭 */ .img_pc {display:inline-block;} .img_mo {display:none;} /* PC/모바일 전화걸기 스위칭 */ .tel_pc {display:inline-block;} .tel_mo {display:none;} /* 폰트아이콘 */ .icons {display:inline-block;} .icons.on {display:none;} i:before, i:after {margin-left:0px !important;} /* */ /* ****************************************** HEADER -- ****************************************** */ .header {position:absolute; width:100%; left:0; top:0; z-index:500; background:rgb(0 0 0 / 19%);} .header li {list-style:none;} .header .inner_box {position:relative; padding:0px; max-width:1024px; margin: 0 auto;} .header .table {display:table; width:100%; table-layout:fixed; height:80px; } .header .table .td {display:table-cell; vertical-align:middle;} .header .table .td.left {width:220px;} .header .table .td.right {width:220px;} .header .table .td.center {text-align:center; font-size:0px;} .header .logo {position:relative; z-index:101;} .header .logo a {} .header .logo img {width:47px;} .header .nav { text-align:center; font-size:0px; display:inline-block; font-size:0px;} .header .nav:before {content:""; position:absolute; left:0; top:80px; width:100%; height:0; z-index:1; border-top:1px solid #ddd; box-sizing:border-box; z-index:100; } .header .nav:before {background:#fff url('../images/wepco/nav_bg.png') right bottom no-repeat;} .header .nav:before {opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0); transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .header .nav .ul {display:table; table-layout:fixed;} .header .nav .li {display:table-cell; vertical-align:middle; position:relative;} .header .nav dt {height:80px; padding:31px 0px; box-sizing:border-box; position:relative;} .header .nav .ctg1 {padding:0 37px; white-space:nowrap;} .header .nav .ctg1:before {content:""; position:absolute; left:0; bottom:-3px; width:0px; height:3px; background:#fff; z-index:102;} .header .nav .ctg1:before {transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .header .nav .ctg1 .txt {color:#fff; font-size:18px; line-height:1;} .header .nav .ctg1 .ic {position:absolute; left:-35px; top:50%; margin-top:-11px; } .header .nav .li:first-child .ctg1 .ic {display:none;} .header .nav .hit .ctg1 .txt {color:#0042ff; font-weight:500;} .header .nav .hit .ctg1:after {content:""; position:absolute; left:0; bottom:-1px; width:100%; height:1px; background:#0042ff; z-index:102;} /*.header .nav li+ li dd {border-left:1px solid #e8e8e8;}*/ .header .nav dd {position:absolute; left:0; top:80px; width:100%; text-align:center; z-index:10; padding:0px 0 0px; height:0; overflow:hidden; z-index:101; box-sizing:border-box;} .header .nav dd {opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0); transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .header .nav dd:before {content:""; position:absolute; left:0; top:0; width:0px; height:100%; background:#f4f4f4; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .header .nav li+ li dd:after {content:""; position:absolute; left:0; top:0; width:1px; height:0px; background:#e8e8e8; } .header .nav dd ul {position:relative;} .header .nav .ctg2 {display:block; text-align:center; line-height:1.3; padding:10px 0;} .header .top {text-align:right;} .header .top .ul {display:inline-block;} .header .top .li {float:left;} .header .top .li.this_all {float:right;} .header .top .lang_btn {position:relative; padding:21px 10px 21px 22px; font-size:0px; z-index:1;} .header .top .lang_btn .btn+ .btn { position:relative; padding-left:11px; margin-left:10px;} .header .top .lang_btn .btn+ .btn:before {content:""; position:absolute; left:0; top:50%; width:1px; height:11px; background:rgba(255,255,255,0.2); margin-top:-5px;} .header .top .lang_btn .txt {color:rgba(255,255,255,0.3); font-size:14px; letter-spacing:0px; line-height:24px; height:20px; position:relative; font-family:"Heebo"; font-weight:500;} .header .top .lang_btn .txt .ic {display:none; position:absolute; left:0; top:0;} .header .top .lang_btn .txt .ic img {width:20px;} .header .top .lang_btn .hit .txt {padding-left:30px; color:#fff;} .header .top .lang_btn .hit .txt .ic {display:block;} .header .all_btn {font-size:0px; z-index:505;} .header .all_btn .shape_box {display : inline-block; transition : all .4s; box-sizing : border-box;} .header .all_btn .shape_box {position:relative; width:26px; height:18px; font-size:0px;} .header .all_btn .shape {width:26px; height:2px; z-index:4; position: absolute; right: 0; background: #f2f2f2; } .header .all_btn .shape {-webkit-transition: all 200ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: all 200ms cubic-bezier(0.215, 0.61, 0.355, 1); } .header .all_btn .shape0 {top:0} .header .all_btn .shape1 {top:8px;} .header .all_btn .shape2 {bottom:0px; top: 16px;} /* 사이트맵 모션 */ /* .nav .all_btn.active .shape {width:27px; height:3px;} */ /* .header .all_btn.active .shape0 {-webkit-animation : menu-bar01 .75s forwards; animation : menu-bar01 .75s forwards;} .header .all_btn.active .shape1 {transition : all .25s .25s; opacity : 1;} .header .all_btn.active .shape2 {-webkit-animation : menu-bar02 .75s forwards; animation : menu-bar02 .75s forwards;} */ @-webkit-keyframes menu-bar01 { 0% { -webkit-transform : translateY(10px) rotate(45deg);} 50% { -webkit-transform : translateY(10px) rotate(0);} 100% { -webkit-transform : translateY(0) rotate(0);} } @keyframes menu-bar01 { 0% {transform : translateY(10px) rotate(45deg);} 50% {transform : translateY(10px) rotate(0);} 100% {transform : translateY(0) rotate(0);} } @-webkit-keyframes menu-bar02 { 0% {-webkit-transform : translateY(-10px) rotate(-45deg);} 50% {-webkit-transform : translateY(-10px) rotate(0);} 100% {-webkit-transform : translateY(0) rotate(0);} } @keyframes menu-bar02 { 0% {transform : translateY(-10px) rotate(-45deg);} 50% {transform : translateY(-10px) rotate(0);} 100% {transform : translateY(0) rotate(0);} } /* 사이트맵 열릴때 */ /* .header.if_open_all .all_btn.active .shape0 {-webkit-animation : active-menu-bar01 .75s forwards; animation : active-menu-bar01 .75s forwards;} .header.if_open_all .all_btn.active .shape1 {opacity : 0;} .header.if_open_all .all_btn.active .shape2 {-webkit-animation : active-menu-bar03 .75s forwards; animation : active-menu-bar03 .75s forwards;} */ @-webkit-keyframes active-menu-bar01 { 0% {-webkit-transform : translateY(0) rotate(0);} 50% {-webkit-transform : translateY(10px) rotate(0);} 100% {-webkit-transform : translateY(10px) rotate(45deg);} } @keyframes active-menu-bar01 { 0% {transform : translateY(0) rotate(0);} 50% {transform : translateY(10px) rotate(0);} 100% {transform : translateY(10px) rotate(45deg);} } @-webkit-keyframes active-menu-bar03 { 0% { -webkit-transform : translateY(0) rotate(0);} 50% {-webkit-transform : translateY(-10px) rotate(0);} 100% {-webkit-transform : translateY(-10px) rotate(-45deg);} } @keyframes active-menu-bar03 { 0% {transform : translateY(0) rotate(0);} 50% {transform : translateY(-10px) rotate(0);} 100% {transform : translateY(-10px) rotate(-45deg);} } .header .open_all {position:absolute; left:0; top:95px; border-top:1px solid #ddd; box-sizing:border-box; z-index:10; width:100%; background:#fff; height:0px; overflow:hidden; z-index:105;} .header .open_all {opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0); transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .header .open_all .menu_box {width:605px; margin:0 auto; } .header .open_all .menu_box ul {float:left; width:25%;} .header .open_all .menu_box li {text-align:center;} .header .open_all .menu_box .ctg2 {display:block; text-align:center; line-height:33px; font-size:15px; color:#666; letter-spacing:-1px; } .header.if_open_all .open_all {height:190px; padding:30px 0 60px; opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} .header.if_open_all .btn_all .icons {display:none;} .header.if_open_all .btn_all.close {display:block;} /* 모바일 슬라이드메뉴 */ .slider {position:fixed; left:-270px; top:0; width:270px; height:100%; overflow-y:scroll; background:#fff; z-index:999999; box-sizing:border-box;} .slider {transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .slider .in_box {padding:0 20px; padding-bottom:50px; } .slider .logo {text-align:center; display:block !important; font-size:0px; padding:20px 0; border-bottom:1px solid #ddd;} .slider .logo a {float:none !important; display:inline-block;} .slider .menu_box {text-align:left; margin-top:15px;} .slider .menu_box dt {border-bottom:1px solid #ddd; position:relative;} .slider .menu_box dd {overflow:hidden; height:0px; box-sizing:border-box; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .slider .menu_box .ctg1 {color:#000; font-weight:500; font-size:1.3em; height:45px; line-height:48px; display:block; padding:0 5px;} .slider .menu_box .ctg2 {color:#91919e; height:33px; line-height:34px; display:block; padding:0 15px;} .slider .menu_box .icon {width:35px; height:45px; position:absolute; right:0; top:0; z-index:1; } .slider .menu_box .icon .shape {width:100%; height:100%; background:transparent url('../images/mo/default/slider_ic.png') center center no-repeat; background-size:13px;} .slider .menu_box .icon .shape {transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .slider .menu_box .icon .shape {-webkit-filter: grayscale(100%); filter: grayscale(100%); opacity: 0.3; filter: alpha(opacity=30); -ms-filter:alpha(opacity=30);} .slider .menu_box .if_open_ctg {margin-bottom:20px;} .slider .menu_box .if_open_ctg dd {height:33px; border-bottom:1px solid #e4e4f3; background:#f5f5f5;} .slider .menu_box .if_open_ctg .ctg1 {color:#ea5413;} .slider .menu_box .if_open_ctg .icon .shape {opacity: 1; filter: alpha(opacity=100); -ms-filter:alpha(opacity=100); -webkit-filter: none; filter:none; transform: rotate(180deg); -webkit-transform: rotate(180deg);} .slider .member_box {overflow:hidden; } .slider .member_box .txt {margin-bottom:10px; font-weight:300; color:#a1a1ae; font-size:1.2em; letter-spacing:-1px;} .slider .member_box .txt strong {font-weight:500; color:#000;} .slider .member_box ul {display:table; width:100%; box-sizing:border-box; table-layout:fixed; background:#f1f4fb;} .slider .member_box li {display:table-cell; vertical-align:middle; border:1px solid #e4e4f3; } .slider .member_box .btn {display:block; height:35px; line-height:36px; color:#91919e; text-align:center;} .slider .cs_box {margin-top:20px; text-align:center;} .slider .cs_box .cs_info {text-align:center; display:inline-block; margin-top:5px;} .slider .cs_box .cs_info .cs_tit {color:#31313e; font-size:1.1em; margin-bottom:10px;} .slider .cs_box .cs_info dl {padding:0px; display:block; height:auto;} .slider .cs_box .cs_info dt {color:#ea5413; font-weight:600; font-size:25px; margin-bottom:10px;} .slider .cs_box .cs_info dd {color:#91919e; font-size:0.95em; letter-spacing:0px; margin-left:5px; line-height:1.3; margin-top:2px;} .slider_close {background:rgba(0,0,0,0.0); width:0; height:100%; position:fixed; left:0; top:0; z-index:99999; overflow:hidden;} .slider_close {transition: background 0.2s ease-in-out; -webkit-transition: background 0.2s ease-in-out;} .slider_close .shape {width:16px; height:36px; background:transparent url('../images/mo/default/slider_close.png') center center no-repeat; background-size:16px; position:fixed; right:-57px; top:0; margin:12px 0; } .slider_close .shape {opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0);} .slider.if_en .cs_box .cs_info dd {word-wrap:break-word; word-break:keep-all;} .if_open_slider .slider_close .shape {right:17px;} /* ****************************************** SITEMAP -- ****************************************** */ .sitemap {position:fixed; left:-100%; top:0; width:100%; height:100%; background:#fff; overflow:hidden;} .sitemap li {list-style:none;} .sitemap .ul {display:table; width:100%; table-layout:fixed; height:100%;} .sitemap .li {display:table-cell; vertical-align:top; box-sizing:border-box;} .sitemap .site_left {width:450px; background:transparent url('/theme/sample03/img/sitemap_left.jpg') center top no-repeat; text-align:center; font-size:0px; padding-top:20px; background-size:cover;} .sitemap .site_left .logo {display:inline-block;} .sitemap .site_left .logo a {float:left;} .sitemap .site_left .logo img {width:100%; max-width:500px; max-height:500px; float:left;} .sitemap .site_right {position:relative;} .sitemap .site_right .layout_fix {position:static;} .sitemap .site_right .layout_fix:before {content:""; position:absolute; right:35px; bottom:35px; width:921px; height:228px; background:transparent url('../images/wepco/sitemap_bg.png') right bottom no-repeat;} .sitemap .tit_box {display:table; width:100%; table-layout:fixed; border-bottom:1px solid #003f98; } .sitemap .tit_box .title, .sitemap .tit_box .lang_btn, .sitemap .tit_box .close_box {display:table-cell; vertical-align:middle; padding:40px 0;} .sitemap .tit_box .title {font-family:"Heebo"; color:#003f98; font-size:30px; font-weight:700; line-height:1; letter-spacing:0px;} .sitemap .lang_btn {width:190px; text-align:center; font-size:0px; display:none !important;} .sitemap .lang_btn .btn {position:relative; padding:10px 22px;} .sitemap .lang_btn .btn+ .btn:before {content:""; position:absolute; left:0; top:50%; width:1px; height:12px; background:#ccc; margin-top:-6px;} .sitemap .lang_btn .btn .txt {color:#b2b2b2; font-weight:500; font-family:"Heebo"; letter-spacing:0px; line-height:1; font-size:17px; transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out;} .sitemap .lang_btn .btn.hit .txt {color:#000 !important;} .sitemap .close_box {width:67px;} .sitemap .close_box .close_btn {padding:19px; box-sizing:border-box; border:1px solid #ddd; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .sitemap .close_box .close_btn img {width:27px; float:left;} .sitemap .menu {padding-top:80px; margin:0 -20px 0 -50px;} .sitemap .menu ul {display:table; width:100%; table-layout:fixed; box-sizing:border-box;} .sitemap .menu li {display:table-cell; vertical-align:top; padding:0 20px 0 50px;} .sitemap .menu li+ li {border-left:1px solid #e8e8e8;} .sitemap .menu dl {} .sitemap .menu dt {margin-bottom:35px;} .sitemap .menu dd {} .sitemap .menu dd+ dd {} .sitemap .menu .ctg1 {font-size:27px; color:#000; font-weight:700; letter-spacing:-1px; line-height:1; transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out;} .sitemap .menu .ctg1 h1 {white-space:nowrap;} .sitemap .menu .ctg2 {padding:10px 10px 10px 0; display:block;} .sitemap .menu .ctg2 .txt {font-size:17px; color:#888; line-height:1; padding:5px 0; position:relative;} .sitemap .menu .ctg2 .txt:before {content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:#000; overflow:hidden; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .if_open_sitemap {overflow:hidden; } .if_open_sitemap .sitemap {left:0; z-index:1000; transition: all 0.6s ease-out; -webkit-transition: all 0.6s ease-out;} /* ****************************************** SITEMAP -- ****************************************** */ .sitemap {position:fixed; left:-100%; top:0; width:100%; height:100%; background:#fff; overflow:hidden;} .sitemap li {list-style:none;} .sitemap .ul {display:table; width:100%; table-layout:fixed; height:100%;} .sitemap .li {display:table-cell; vertical-align:top; box-sizing:border-box;} .sitemap .site_left {width:450px; background:transparent url('/theme/sample03/img/sitemap_left.jpg') center top no-repeat; text-align:center; font-size:0px; padding-top:20px; background-size:cover;} .sitemap .site_left .logo {display:inline-block;} .sitemap .site_left .logo a {float:left;} .sitemap .site_left .logo img {max-width:500px; max-height:500px; float:left;} .sitemap .site_right {position:relative;} .sitemap .site_right .layout_fix {position:static;} .sitemap .site_right .layout_fix:before {content:""; position:absolute; right:35px; bottom:35px; width:921px; height:228px; background:transparent url('../images/wepco/sitemap_bg.png') right bottom no-repeat;} .sitemap .tit_box {display:table; width:100%; table-layout:fixed; border-bottom:1px solid #003f98; } .sitemap .tit_box .title, .sitemap .tit_box .lang_btn, .sitemap .tit_box .close_box {display:table-cell; vertical-align:middle; padding:40px 0;} .sitemap .tit_box .title {font-family:"Heebo"; color:#003f98; font-size:30px; font-weight:700; line-height:1; letter-spacing:0px;} .sitemap .lang_btn {width:190px; text-align:center; font-size:0px; display:none !important;} .sitemap .lang_btn .btn {position:relative; padding:10px 22px;} .sitemap .lang_btn .btn+ .btn:before {content:""; position:absolute; left:0; top:50%; width:1px; height:12px; background:#ccc; margin-top:-6px;} .sitemap .lang_btn .btn .txt {color:#b2b2b2; font-weight:500; font-family:"Heebo"; letter-spacing:0px; line-height:1; font-size:17px; transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out;} .sitemap .lang_btn .btn.hit .txt {color:#000 !important;} .sitemap .close_box {width:67px;} .sitemap .close_box .close_btn {padding:19px; box-sizing:border-box; border:1px solid #ddd; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .sitemap .close_box .close_btn img {width:27px; float:left;} .sitemap .menu {padding-top:80px; margin:0 -20px 0 -50px;} .sitemap .menu ul {display:table; width:100%; table-layout:fixed; box-sizing:border-box;} .sitemap .menu li {display:table-cell; vertical-align:top; padding:0 20px 0 50px;} .sitemap .menu li+ li {border-left:1px solid #e8e8e8;} .sitemap .menu dl {} .sitemap .menu dt {margin-bottom:35px;} .sitemap .menu dd {} .sitemap .menu dd+ dd {} .sitemap .menu .ctg1 {font-size:27px; color:#000; font-weight:700; letter-spacing:-1px; line-height:1; transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out;} .sitemap .menu .ctg1 h1 {white-space:nowrap;} .sitemap .menu .ctg2 {padding:10px 10px 10px 0; display:block;} .sitemap .menu .ctg2 .txt {font-size:17px; color:#888; line-height:1; padding:5px 0; position:relative;} .sitemap .menu .ctg2 .txt:before {content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:#000; overflow:hidden; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .if_open_sitemap {overflow:hidden; } .if_open_sitemap .sitemap {left:0; z-index:1000; transition: all 0.6s ease-out; -webkit-transition: all 0.6s ease-out;} /* ********************************************** * * SLIDE * ********************************************** */ .slide_bg {background:rgba(0,0,0,0.3); position:fixed; right:-100%; top:0; z-index:500; width:100%; height:100%; overflow-y:auto} .slide {position:fixed; right:-100%; top:0px; z-index:501; width:100%; max-width:400px; box-sizing:border-box; height:100%; background:#fff;} .slide {transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out;} .slide li {list-style:none;} .slide .ul {display:table; width:100%; table-layout:fixed; height:100%;} .slide .li {display:table-cell; vertical-align:top; position:relative;} .slide .slide_left {} .slide .slide_right {width:80px; background:#003f98; } .slide .slide_right .inner:before {content:""; position:absolute; left:0; bottom:20px; width:100%; height:643px; background:transparent url('../images/wepco_m/slide_bg.png') right bottom no-repeat; background-size:60px;} .slide .top_box {text-align:center; height:80px; border-bottom:1px solid #003f98; box-sizing:border-box;} .slide .top_box .tit {font-size:27px; font-family:"Heebo"; font-weight:700; color:#003f98; letter-spacing:0px; line-height:1; line-height:80px; } .slide .menu {padding:20px 30px 112px;; height:100%; box-sizing:border-box; overflow-y:auto;} .slide .menu dl {} .slide .menu dt {position:relative; border-bottom:1px solid #e8e8e8; box-sizing:border-box;} .slide .menu .ctg1 {font-size:21px; color:#000; font-weight:700; line-height:1; padding:20px 0;} .slide .menu .more_btn {position:absolute; right:-10px; top:0; width:50px; height:100%;} .slide .menu .more_btn:before {content:""; position:absolute; left:50%; top:50%; width:12px; height:2px; background:#000; margin:-1px 0 0 -6px;} .slide .menu .more_btn:after {content:""; position:absolute; left:50%; top:50%; width:2px; height:12px; background:#000; margin:-6px 0 0 -1px;} .slide .menu .more_btn:after {transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .slide .menu dd {border-bottom:1px solid transparent; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .slide .menu dd ul {} .slide .menu dd li {height:0px; overflow:hidden; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .slide .menu .ctg2 {padding:0 10px; height:35px; line-height:35px; display:block;} .slide .menu .ctg2 .txt {padding-left:16px; position:relative; color:#888;} .slide .menu .ctg2 .txt:before {content:""; position:absolute; left:0; top:50%; width:9px; height:2px; background:#ccc; margin-top:-1px;} .slide .btn_box {position:absolute; left:0; bottom:0; padding:30px; width:100%; box-sizing:border-box; background:#eee;} .slide .btn_box ul {display:table; width:100%; table-layout:fixed; box-sizing:border-box;} .slide .btn_box li {display:table-cell; vertical-align:middle; border:1px solid #003f98;} .slide .btn_box .btn {display:block; height:50px; line-height:48px; color:#003f98; text-align:center; background:#fff;} .slide .clode_btn {height:80px; border-bottom:1px solid #fff; box-sizing:border-box; text-align:center; width:100%; position:relative; z-index:1;} .slide .clode_btn {background:transparent url('/theme/sample03/img/slide_close.png') center center no-repeat; background-size:21px;} .slide .lang_btn {padding-top:30px; text-align:center; position:relative; z-index:1;} .slide .lang_btn .btn {display:block; padding:5px 0;} .slide .lang_btn .btn+ .btn {margin-top:10px;} .slide .lang_btn .txt {font-family:"Heebo"; font-size:19px; font-weight:500; letter-spacing:0px; line-height:1; color:rgba(255,255,255,0.3);} .slide .lang_btn .btn.hit .txt {color:#fff;} .slide .menu .if_open_ctg .more_btn:after {transform:rotate(90deg);} .slide .menu .if_open_ctg dd {padding:5px 0 30px; border-color:#e8e8e8;} .slide .menu .if_open_ctg dd li {height:35px;} /* ****************************************** 메인비주얼 -- ****************************************** */ .ma_visual {position:relative;} .ma_visual .rolling_box {position:relative; overflow:hidden;} .ma_visual .visual_box {height:970px; background-position:center bottom;} .ma_visual .visual_img {overflow:hidden; display:none;} .ma_visual .visual_img img {width:100%; float:left;} /* 롤링배너 */ .ma_visual .visual_txt {position:absolute; left:0; top:0; width:100%; height:100%; text-align:center; } .ma_visual .visual_txt .table {display:table; width:100%; table-layout:fixed; height:100%;} .ma_visual .visual_txt .inner {display:table-cell; vertical-align:middle; padding:0 60px; text-align:center;} .ma_visual .visual_txt .inline {display:inline-block;} .ma_visual .visual_txt .text { position:relative; padding-bottom:13px; overflow:hidden; margin-bottom:0px;} .ma_visual .visual_txt .text:before {content:""; position:absolute; left:0; bottom:0; width:0px; height:1px; background:rgba(255,255,255,0.5);} .ma_visual .visual_txt .text .tt {font-size:50px; font-weight:100; letter-spacing:-2.5px; line-height:1; color:#fff; } .ma_visual .visual_txt .text .tt {-webkit-transform: translate(0,65px); -ms-transform: translate(0,65px); -mo-transform: translate(0,65px); -o-transform: translate(0,65px); transform: translate(0,65px);} .ma_visual .visual_txt .title {margin-bottom:0px; overflow:hidden; padding-top:7px;} .ma_visual .visual_txt .title .tt {font-family:"Heebo"; font-size:65px; color:#fff; font-weight:900; letter-spacing:0px; line-height:1; } .ma_visual .visual_txt .title .tt {-webkit-transform: translate(0,-65px); -ms-transform: translate(0,-65px); -mo-transform: translate(0,-65px); -o-transform: translate(0,-65px); transform: translate(0,-65px);} .ma_visual .visual_txt .sub {color:rgba(255,255,255,0.8); font-size:19px; letter-spacing:-0.5px; font-weight:300; line-height:1.4; word-wrap:break-word; word-break:keep-all; margin-top:33px;} .ma_visual .visual_txt .sub {transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0); } .ma_visual .visual_txt .sub .flex_box {max-width:800px;} .ma_visual .visual_txt .btn {border:1px solid #fff; padding:0 30px; box-sizing:border-box; color:#fff; height:45px; text-align:center; border-radius:100px; margin-top:58px; position:relative; z-index:100;} .ma_visual .visual_txt .btn {transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0); transition-delay:.1s; -webkit-transition-delay:.1s;} .ma_visual .visual_txt .btn .txt {position:relative; font-family:"Heebo"; font-size:13px; color:#fff; letter-spacing:0; font-weight:400; line-height:43px; line-height:45px\0;} .ma_visual .visual_txt .btn .txt {transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .ma_visual .visual_txt .btn .icon {position:absolute; right:-5px; top:17px; width:5px; overflow:hidden; } .ma_visual .visual_txt .btn .icon {transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0);} .ma_visual .visual_txt .btn .icon img {float:right; } .ma_visual .visual_txt .btn .icon .ov {position:absolute; right:0; top:0; } .ma_visual .active .visual_txt .tt {animation: ma_tit2 1.5s ease; -webkit-animation: ma_tit2 1.5s ease; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; animation-delay:.3s; -webkit-animation-delay:.3s} /* .ma_visual .active .visual_txt .text:before {animation: ma_tit 2s ease; -webkit-animation: ma_tit 2s ease; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; animation-delay:.3s; -webkit-animation-delay:.3s} */ .ma_visual .active .visual_txt .title .tt {animation: ma_tit3 1.2s ease; -webkit-animation: ma_tit3 1.2s ease; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; animation-delay:1s; -webkit-animation-delay:1s} .ma_visual .active .visual_txt .sub {animation: ma_tit4 1.5s ease; -webkit-animation: ma_tit4 1.5s ease; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; animation-delay:1.5s; -webkit-animation-delay:1.5s} .ma_visual .active .visual_txt .btn {animation: ma_tit4 1.5s ease; -webkit-animation: ma_tit4 1.5s ease; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; animation-delay:2s; -webkit-animation-delay:2s} /* .ma_visual .active .visual_txt .text {margin-bottom:20px; opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} .ma_visual .active .visual_txt .title {margin-bottom:30px; opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} .ma_visual .active .visual_txt .sub {opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} .ma_visual .active .visual_txt .btn {margin-top:60px; opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} */ /* .p_tit {text-align:center; padding:0 20px; margin-bottom:80px; overflow:hidden;} .p_tit .tit_tx {position:relative; overflow:hidden; padding-bottom:20px; } .p_tit .txt {line-height:1; font-size:40px; color:#000; font-weight:600; letter-spacing:-0.5px; } .p_tit .txt {-webkit-transform: translate(0,60px); -ms-transform: translate(0,60px); -mo-transform: translate(0,60px); -o-transform: translate(0,60px); transform: translate(0,60px);} .p_tit .txt {animation: p_tit2 1s ease; -webkit-animation: p_tit2 1s ease; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; animation-delay:0.3s; -webkit-animation-delay:0.3s} .p_tit .line {height:1px; position:absolute; left:0; bottom:0; background:#000;} .p_tit .line {animation: p_tit 0.8s ease; -webkit-animation: p_tit 0.8s ease; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;} .p_tit .next_box {overflow:hidden; padding-top:30px; font-size:17px; } .p_tit .next {color:#666; font-weight:300; line-height:1.4; word-wrap:break-word; word-break:keep-all; white-space:normal;} .p_tit .next {-webkit-transform: translate(0,-60px); -ms-transform: translate(0,-60px); -mo-transform: translate(0,-60px); -o-transform: translate(0,-60px); transform: translate(0,-60px);} .p_tit .next {animation: p_tit3 0.8s ease; -webkit-animation: p_tit3 0.8s ease; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; animation-delay:0.3s; -webkit-animation-delay:0.3s} */ @-webkit-keyframes ma_tit { 0% {width:0px; left:0;} 50% {width:100%; right:auto; left:0; } 100% {width:0; right:0; left:auto;} } @keyframes ma_tit { 0% {width:0px; left:0;} 50% {width:100%; right:auto; left:0;} 100% {width:0; right:0; left:auto;} } @-webkit-keyframes ma_tit2 { from {-webkit-transform: translate(0,60px); -ms-transform: translate(0,60px); -mo-transform: translate(0,60px); -o-transform: translate(0,60px); transform: translate(0,60px);} to {-webkit-transform: translate(0,0); -ms-transform: translate(0,0); -mo-transform: translate(0,0); -o-transform: translate(0,0); transform: translate(0,0);} } @keyframes ma_tit2 { from {-webkit-transform: translate(0,60px); -ms-transform: translate(0,60px); -mo-transform: translate(0,60px); -o-transform: translate(0,60px); transform: translate(0,60px);} to {-webkit-transform: translate(0,0); -ms-transform: translate(0,0); -mo-transform: translate(0,0); -o-transform: translate(0,0); transform: translate(0,0);} } @-webkit-keyframes ma_tit3 { from {-webkit-transform: translate(0,-60px); -ms-transform: translate(0,-60px); -mo-transform: translate(0,-60px); -o-transform: translate(0,-60px); transform: translate(0,-60px);} to {-webkit-transform: translate(0,0); -ms-transform: translate(0,0); -mo-transform: translate(0,0); -o-transform: translate(0,0); transform: translate(0,0);} } @keyframes ma_tit3 { from {-webkit-transform: translate(0,-60px); -ms-transform: translate(0,-60px); -mo-transform: translate(0,-60px); -o-transform: translate(0,-60px); transform: translate(0,-60px);} to {-webkit-transform: translate(0,0); -ms-transform: translate(0,0); -mo-transform: translate(0,0); -o-transform: translate(0,0); transform: translate(0,0);} } @-webkit-keyframes ma_tit4 { from {opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0);} to {opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} } @keyframes ma_tit4 { from {opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0);} to {opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} } /* 이전, 다음 버튼 */ .ma_visual .prevnext {position:absolute; top:50%; margin-top:-47px; z-index:10; width:auto; height:auto;} .ma_visual .prevnext.if_mid {display:none;} .ma_visual .prevnext.prev {left:28px;} .ma_visual .prevnext.next {right:28px;} .ma_visual .prevnext a {float:left; padding:20px 32px; position:relative;} .ma_visual .prevnext .rect {position:absolute; left:0; top:0; width:100%; height:100%; opacity: .3; -ms-filter:alpha(opacity=30); filter:alpha(opacity=30);} .ma_visual .prevnext .rect .line {position:absolute; background:#fff; width:0px; height:0px; overflow:hidden;} .ma_visual .prevnext .rect .line { transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0);} .ma_visual .prevnext .rect .line1 {left:0; top:0;} .ma_visual .prevnext .rect .line2 {right:0; top:0;} .ma_visual .prevnext .rect .line3 {right:0; bottom:0;} .ma_visual .prevnext .rect .line4 {left:0; bottom:0;} .ma_visual .prevnext .icon {opacity: .3; -ms-filter:alpha(opacity=30); filter:alpha(opacity=30); transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .ma_visual .prevnext img {width:28px; float:left;} /* 스크롤 다운 */ .ma_visual .scroll_down {position:absolute; left:0; bottom:30px; width:100%; text-align:center; z-index:99999;} .ma_visual .scroll_down .icon {display:block; width:10px; height:43px; overflow:hidden; margin:0 auto; position:relative;} .ma_visual .scroll_down .icon:before {content:""; position:absolute; left:50%; bottom:0; width:1px; height:43px; background:rgba(255,255,255,0.3); margin-left:-1px;} .ma_visual .scroll_down .ic {position:absolute; left:0px; top:0px; -webkit-animation: mymove 2s infinite; animation: mymove 2s infinite;} .ma_visual .scroll_down .ic img {position:absolute; left:0; bottom:0; width:9px;} .ma_visual .scroll_down .txt {font-family:"Heebo"; color:#fff; font-size:13px; letter-spacing:0px; line-height:1; display:block; margin-top:10px;} /* 모션 */ @-webkit-keyframes mymove { from {top: 0px;} to {top: 86px;} } @keyframes mymove { from {top: 0px;} to {top: 86px;} } /* 롤링아이콘 */ .ma_visual .rolling_icon {position:absolute; left:0; bottom:10px; width:100%; font-size:0px; text-align:center; z-index:1; display:none;} .ma_visual .rolling_icon .lineup {display:inline-block;} .ma_visual .rolling_icon .icon {float:left; width:13px; height:13px; margin:0 3px; position:relative; border-radius:100px; overflow:hidden; border:1px solid transparent; box-sizing:border-box;} .ma_visual .rolling_icon .icon:before {content:""; position:absolute; left:3px; top:3px; width:5px; height:5px; background:#fff; border:1px solid #fff; border-radius:100px; overflow:hidden; box-sizing:border-box;} .ma_visual .rolling_icon .icon.active {border-color:#fff;} /* ****************************************** 사업분야 -- ****************************************** */ .ma_business {margin-top:80px;} .ma_business li {list-style:none;} .ma_business .layout_fix {max-width:100%;} .ma_business .busi_box {margin:0 -40px; overflow:hidden;} .ma_business .ul {display:table; width:100%; table-layout:fixed; border-collapse:separate; border-spacing:40px 0; } .ma_business .li {display:table-cell; vertical-align:top; padding:65px 80px 0; position:relative; height:420px; box-sizing:border-box;} .ma_business .in_box {} .ma_business .in_box .upper_link {height:500%;} .ma_business .flex_box {max-width:390px; margin:0;} .ma_business h1 {text-shadow:none !important;} .ma_business dl {position:relative;} .ma_business dt {font-size:40px; color:#fff; line-height:1.4; font-weight:100; letter-spacing:-1px; position:relative; opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0); left:-50px; } .ma_business dt h1 { white-space:nowrap; } .ma_business dt strong {font-weight:700;} .ma_business dd {font-size:17px; color:#fff; font-weight:300; line-height:1.4; margin-top:10px; position:relative; opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0); left:-50px; } .ma_business .btn_box {width:100%; margin-top:45px; box-sizing:border-box; position:absolute; left:0; bottom:0; padding:0 80px; } .ma_business .btn_box .table {width:100%; max-width:300px; padding:15px 0 15px 40px; box-sizing:border-box; overflow:hidden; position:relative; opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0); left:-50px;} .ma_business .btn_box .table {z-index:10;} .ma_business .btn_box ul {} .ma_business .btn_box li {border-top:1px solid rgba(255,255,255,0.2);} .ma_business .btn_box ul:first-child li:first-child {border-top:0;} .ma_business .btn_box .btn {color:#fff; display:block; position:relative; padding:10px 0; padding-right:55px;} .ma_business .btn_box .btn {transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} /* .ma_business .btn_box .btn:before {content:""; position:absolute; right:0; top:0; height:100%; background:#fff; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; width:0px;} */ .ma_business .btn_box .btn h1 {position:relative; } .ma_business .btn_box .ic {position:absolute; right:31px; top:50%; margin-top:-3px; height:8px;} .ma_business .btn_box .ic { transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; opacity: .5; -ms-filter:alpha(opacity=50); filter:alpha(opacity=50);} .ma_business .btn_box .ic img {height:7px; float:left;} .ma_business .btn_box .ic:before {content:""; position:absolute; right:0; top:50%; width:0px; height:1px; background:#fff; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; margin-top:-1px;} .ma_business .btn_box .ov_box {position:absolute; right:0; top:0; width:0; height:100%; background:#fff; overflow:hidden; box-sizing:border-box; padding:10px 0px 10px 0;} .ma_business .btn_box .ov_box {transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .ma_business .btn_box .ov_tx {color:#000; } .ma_business .btn_box .ov_tx .ic {opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} .ma_business .li.if_elec {background:transparent url('/theme/sample03/img/ma_busi_bg1.jpg') center center no-repeat; background-size:auto 100%;} .ma_business .li.if_elec .btn_box .table {background:rgb(0 25 93 / 69%);} .ma_business .li.if_energy {background:transparent url('/theme/sample03/img/ma_busi_bg2.jpg') center center no-repeat;} .ma_business .li.if_energy .btn_box .table {background:rgb(0 68 55 / 70%);} .ma_business.if_scroll dt {-webkit-animation: mbt 1s forwards; animation: mbt 1s forwards; } .ma_business.if_scroll dd {-webkit-animation: mbt 1s forwards; animation: mbt 1s forwards; animation-delay:.5s; -webkit-animation-delay:.5s;} .ma_business.if_scroll .btn_box .table {-webkit-animation: mbt 1s forwards; animation: mbt 1s forwards; animation-delay:1s; -webkit-animation-delay:1s;} @-webkit-keyframes mbt { from {left:-50px; opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0);} to {left:0; opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} } @keyframes mbt { from {left:-50px; opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0);} to {left:0; opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} } /* ****************************************** 사업실적/연구개발 -- ****************************************** */ .ma_lab {margin-top:80px;} .ma_lab .lab_box {width:100%; position:relative; overflow:hidden;} .ma_lab .lab_box+ .lab_box {margin-top:50px;} .ma_lab .lab_box .img_box {position:absolute; left:0; top:0; width:100%; height:100%;} .ma_lab .lab_box .img_box .bg {position:relative; width:100%; overflow:hidden;} .ma_lab .lab_box .img_box .map {position:absolute; text-align:center; z-index:1;} .ma_lab .lab_box .img_box .map.kr {right: 255px; bottom: 214px;} .ma_lab .lab_box .img_box .map.ma {right: 425px; bottom: 143px; opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0);} .ma_lab .lab_box .img_box .map.vi {right: 350px; bottom:165px; opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0);} .ma_lab .lab_box .img_box .map.mi {right: 245px; bottom:154px; opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0);} .ma_lab .lab_box .img_box .map.fi {right:240px; bottom:108px; opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0);} .ma_lab .lab_box .img_box .map .shape {width:6px; height:6px; background:#fff; border:1px solid #fff; border-radius:100px; overflow:hidden; box-sizing:border-box; margin:0 auto;} .ma_lab .lab_box .img_box .map .tt {color:#fff; font-size:14px; font-weight:500; letter-spacing:0px; line-height:1; display:block; font-family:"Heebo"; margin-top:9px;} .ma_lab .lab_box.if_on .img_box .img {position:absolute; left:0; top:0; width:100%; height:100%; opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0); -webkit-animation: rnd 1s forwards; animation: rnd 1s forwards;} .ma_lab .lab_box.if_on .img_box .map.ma {-webkit-animation: rnd1 1s forwards; animation: rnd1 1s forwards; animation-delay:1.6s;} .ma_lab .lab_box.if_on .img_box .map.vi {-webkit-animation: rnd1 1s forwards; animation: rnd1 1s forwards; animation-delay:.6s;} .ma_lab .lab_box.if_on .img_box .map.mi {-webkit-animation: rnd1 1s forwards; animation: rnd1 1s forwards; animation-delay:1s;} .ma_lab .lab_box.if_on .img_box .map.fi {-webkit-animation: rnd1 1s forwards; animation: rnd1 1s forwards; animation-delay:2s;} @-webkit-keyframes rnd { from {opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0);} to {opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} } @keyframes rnd { from {opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0);} to {opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} } @-webkit-keyframes rnd1 { from {opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0);} to {opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} } @keyframes rnd1 { from {opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0);} to {opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} } .ma_lab .lab_box .img_box .map.kr .tt {font-size:23px;} .ma_lab .lab_box .img_box .map .point {position:relative; width:170px; height:170px; margin-bottom:-75px;} .ma_lab .lab_box .img_box .map .circle {position:absolute; top:0; left:0; width:100%; height:100%;} .ma_lab .lab_box .img_box .map .cir1 {transform:scale(0); } .ma_lab .lab_box .img_box .map .cir2 {opacity: .3; -ms-filter:alpha(opacity=30); filter:alpha(opacity=30); transform:scale(0);} .ma_lab .lab_box .img_box .map .cir3 {opacity: .2; -ms-filter:alpha(opacity=20); filter:alpha(opacity=20); transform:scale(0);} .ma_lab .lab_box .img_box .map .cir4 {opacity: .2; -ms-filter:alpha(opacity=20); filter:alpha(opacity=20); transform:scale(0);} .ma_lab .lab_box .img_box .map .cir5 {opacity: .1; -ms-filter:alpha(opacity=10); filter:alpha(opacity=10); transform:scale(0);} .ma_lab .lab_box.if_on .img_box .map .cir1 {-webkit-animation: myfirst 3s 0s linear infinite; animation: myfirst 3s 0s linear infinite; } .ma_lab .lab_box.if_on .img_box .map .cir2 {-webkit-animation: myfirst2 3s 0s linear infinite; animation: myfirst2 3s 0s linear infinite; animation-delay: -0.4s;} .ma_lab .lab_box.if_on .img_box .map .cir3 {-webkit-animation: myfirst3 3s 0s linear infinite; animation: myfirst3 3s 0s linear infinite; animation-delay: -0.8s;} .ma_lab .lab_box.if_on .img_box .map .cir4 {-webkit-animation: myfirst4 3s 0s linear infinite; animation: myfirst4 3s 0s linear infinite; animation-delay: -1.2s;} .ma_lab .lab_box.if_on .img_box .map .cir5 {-webkit-animation: myfirst5 3s 0s linear infinite; animation: myfirst5 3s 0s linear infinite; animation-delay: -1.6s;} @-webkit-keyframes myfirst { 0% {transform:scale(0); opacity: 0; } 50% {opacity: 1; } 100% {transform:scale(0.15); opacity: 0; } } @keyframes myfirst { 0% {transform:scale(0); opacity: 0; } 50% {opacity: 1; } 100% {transform:scale(0.15); opacity: 0; } } @-webkit-keyframes myfirst2 { 0% {transform:scale(0); opacity: 0; } 50% {opacity: 0.3; } 100% {transform:scale(0.3); opacity: 0; } } @keyframes myfirst2 { 0% {transform:scale(0); opacity: 0; } 50% {opacity: 0.3; } 100% {transform:scale(0.3); opacity: 0; } } @-webkit-keyframes myfirst3 { 0% {transform:scale(0); opacity: 0; } 50% {opacity: 0.3; } 100% {transform:scale(0.6); opacity: 0; } } @keyframes myfirst3 { 0% {transform:scale(0); opacity: 0; } 50% {opacity: 0.3; } 100% {transform:scale(0.6); opacity: 0; } } @-webkit-keyframes myfirst4 { 0% {transform:scale(0); opacity: 0; } 50% {opacity: 0.3; } 100% {transform:scale(1); opacity: 0; } } @keyframes myfirst4 { 0% {transform:scale(0); opacity: 0; } 50% {opacity: 0.3; } 100% {transform:scale(1); opacity: 0; } } @-webkit-keyframes myfirst5 { 0% {transform:scale(0); opacity: 0; } 50% {opacity: 0.3; } 100% {transform:scale(1.5); opacity: 0; } } @keyframes myfirst5 { 0% {transform:scale(0); opacity: 0; } 50% {opacity: 0.3; } 100% {transform:scale(1.5); opacity: 0; } } .ma_lab .lab_box .img_box .round {position:absolute; left:266px; top:128px;} .ma_lab .lab_box .img_box .round .line {box-sizing:border-box; border-radius:500px; overflow:hidden;} .ma_lab .lab_box .img_box .round .line1 {padding:11px; border:1px solid #1b2f5c; opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0); } .ma_lab .lab_box.if_on .img_box .round .line1 {-webkit-animation: rnd2 1s forwards; animation: rnd2 1s forwards; animation-delay:.5s; -webkit-animation-delay:.5s; } .ma_lab .lab_box .img_box .round .line2 {padding:8px; border:1px solid rgba(27,47,92,0.3);} .ma_lab .lab_box.if_on .img_box .round .line2 {} .ma_lab .lab_box.if_on .img_box .round .line2 img {-webkit-animation: rnd5 5s linear infinite; animation: rnd5 5s linear infinite; -webkit-transform:scale(1); transform:scale(1);} .ma_lab .lab_box .img_box .round .point {position:absolute; left:0; top:0; width:100%; height:100%; animation-delay:1s; -webkit-animation-delay:1s;} .ma_lab .lab_box.if_on .img_box .round .po1, .ma_lab .lab_box .img_box .round .po3 {-webkit-animation: rnd3 20s linear infinite; animation: rnd3 20s linear infinite; -webkit-transform: rotate(360deg); transform: rotate(360deg); } .ma_lab .lab_box.if_on .img_box .round .po2, .ma_lab .lab_box .img_box .round .po4 {-webkit-animation: rnd3 13s linear infinite; animation: rnd3 13s linear infinite; -webkit-transform: rotate(360deg); transform: rotate(360deg); } .ma_lab .lab_box.if_on .img_box .round .po5, .ma_lab .lab_box .img_box .round .po6 {-webkit-animation: rnd3 5s linear infinite; animation: rnd3 5s linear infinite; -webkit-transform: rotate(360deg); transform: rotate(360deg); } .ma_lab .lab_box .img_box .round .point .in {position:absolute; border-radius:100px; overflow:hidden; background:#e3e8f5; border:1px solid #e3e8f5; box-sizing:border-box; padding:5px;} .ma_lab .lab_box.if_on .img_box .round .point .in {-webkit-animation: rnd4 3s forwards; animation: rnd4 3s forwards; animation-delay:.5s; -webkit-animation-delay:.5s;} .ma_lab .lab_box .img_box .round .point .in {opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0);} .ma_lab .lab_box .img_box .round .point .in:before {content:""; display:block; width:7px; height:7px; background:#1b2f5c; border:1px solid #1b2f5c; border-radius:100px; overflow:hidden; box-sizing:border-box;} .ma_lab .lab_box .img_box .round .point.if_b .in:before {width:11px; height:11px;} .ma_lab .lab_box .img_box .round .po1 .in {left:50%; top:-5px; margin-left:-51px; } .ma_lab .lab_box .img_box .round .po2 .in {right:-11px; top:99px;} .ma_lab .lab_box .img_box .round .po3 .in {right:-9px; top:131px;} .ma_lab .lab_box .img_box .round .po4 .in {left:50%; bottom:-8px; margin-left:8px;} .ma_lab .lab_box .img_box .round .po5 .in {left:-8px; top:135px;} .ma_lab .lab_box .img_box .round .po6 .in {left:-1px; top:72px;} @-webkit-keyframes rnd2 { from {opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0);} to {opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} } @keyframes rnd2 { from {opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0);} to {opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} } @-webkit-keyframes rnd3 { 0%{-webkit-transform: rotate(-360deg) scale(1); transform: rotate(-360deg) scale(1);} 100%{-webkit-transform: rotate(360deg) scale(1); transform: rotate(360deg) scale(1);} } @keyframes rnd3 { 0%{-webkit-transform: rotate(-360deg) scale(1); transform: rotate(-360deg) scale(1);} 100%{-webkit-transform: rotate(360deg) scale(1); transform: rotate(360deg) scale(1);} } @-webkit-keyframes rnd4 { from {opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0);} to {opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} } @keyframes rnd4 { from {opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0);} to {opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} } @-webkit-keyframes rnd5 { 0% { -webkit-transform:scale(1); transform:scale(1);} 50% { -webkit-transform:scale(0.9); transform:scale(0.9);} 100% { -webkit-transform:scale(1); transform:scale(1);} } @keyframes rnd5 { 0% { -webkit-transform:scale(1); transform:scale(1);} 50% { -webkit-transform:scale(0.9); transform:scale(0.9);} 100% { -webkit-transform:scale(1); transform:scale(1);} } .ma_lab .lab_box .txt_box {width:50%; height:100%; position:absolute; top:0; padding:0 50px 0 100px; box-sizing:border-box;} .ma_lab .lab_box .txt_box .table {display:table; width:100%; table-layout:fixed; height:100%;} .ma_lab .lab_box .txt_box .inner {display:table-cell; vertical-align:middle; } .ma_lab .lab_box .txt_box dl {} .ma_lab .lab_box .txt_box dt {} .ma_lab .lab_box .txt_box .tit {font-size:30px; font-weight:700; line-height:1; margin-bottom:15px; position:relative;} .ma_lab .lab_box .txt_box .txt {font-size:40px; font-weight:100; letter-spacing:-1.5px; line-height:1; position:relative;} .ma_lab .lab_box .txt_box dd {font-size:17px; line-height:1.5; margin-top:25px; position:relative;} .ma_lab .lab_box .txt_box .flex_box {max-width:550px; margin:0; } .ma_lab .lab_box .txt_box .more_box {margin-top:40px; overflow:hidden; position:relative; margin-left:4px;} .ma_lab .lab_box .txt_box .more_btn {font-weight:500; letter-spacing:0px; line-height:1; padding:5px 20px 5px 0; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .ma_lab .lab_box .txt_box .more_box .ic {position:absolute; left:0; bottom:0; width:100%; height:5px;} .ma_lab .lab_box .txt_box .more_box .ic span {float:right;} .ma_lab .lab_box .txt_box .more_box img {float:right; height:5px;} .ma_lab .lab_box.if_r {background:#0c1636 url('../images/wepco/ma_lab_bg.jpg') center top no-repeat; height:530px;} .ma_lab .lab_box.if_r .img_box img {float:right;} .ma_lab .lab_box.if_r .txt_box {left:0;} .ma_lab .lab_box.if_r .txt_box .flex_box {text-shadow:1px 1px 3px #0c1636;} .ma_lab .lab_box.if_r .txt_box .tit {color:#fff; left:-50px; opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0);} .ma_lab .lab_box.if_r .txt_box .txt {color:#fff; left:-50px; opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0);} .ma_lab .lab_box.if_r .txt_box dd {color:rgba(255,255,255,0.7); left:-50px; opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0);} .ma_lab .lab_box.if_r .txt_box .more_box {left:-50px; opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0);} .ma_lab .lab_box.if_r .txt_box .more_btn {color:#fff; } .ma_lab .lab_box.if_r.if_on .txt_box .tit { -webkit-animation: labt 1s forwards; animation: labt 1s forwards; } .ma_lab .lab_box.if_r.if_on .txt_box .txt { -webkit-animation: labt 1s forwards; animation: labt 1s forwards; animation-delay:.5s; -webkit-animation-delay:.5s; } .ma_lab .lab_box.if_r.if_on .txt_box dd { -webkit-animation: labt 1s forwards; animation: labt 1s forwards; animation-delay:1s; -webkit-animation-delay:1s; } .ma_lab .lab_box.if_r.if_on .txt_box .more_box {-webkit-animation: labt 1s forwards; animation: labt 1s forwards; animation-delay:1.5s; -webkit-animation-delay:1.5s;} .ma_lab .lab_box.if_r.if_on .img_box img {-webkit-animation: lab1 1.5s forwards; animation: lab1 1.5s forwards; opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} .ma_lab .lab_box.if_d {background:#e1e6f2 url('../images/wepco/ma_lab_bg2.jpg') center top no-repeat; height:480px;} .ma_lab .lab_box.if_d .img_box {} .ma_lab .lab_box.if_d .txt_box {right:0; padding:0 50px 0 80px;} .ma_lab .lab_box.if_d .txt_box .tit {color:#000; right:-50px; opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0);} .ma_lab .lab_box.if_d .txt_box .txt {color:#000; right:-50px; opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0);} .ma_lab .lab_box.if_d .txt_box dd {color:rgba(0,0,0,0.7); right:-50px; opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0);} .ma_lab .lab_box.if_d .txt_box .more_box {right:-50px; opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0);} .ma_lab .lab_box.if_d .txt_box .more_btn {color:#000; font-weight:700;} .ma_lab .lab_box.if_d.if_on .txt_box .tit { -webkit-animation: labt2 1s forwards; animation: labt2 1s forwards; } .ma_lab .lab_box.if_d.if_on .txt_box .txt { -webkit-animation: labt 1s forwards; animation: labt2 1s forwards; animation-delay:.5s; -webkit-animation-delay:.5s; } .ma_lab .lab_box.if_d.if_on .txt_box dd { -webkit-animation: labt2 1s forwards; animation: labt2 1s forwards; animation-delay:1s; -webkit-animation-delay:1s; } .ma_lab .lab_box.if_d.if_on .txt_box .more_box {-webkit-animation: labt2 1s forwards; animation: labt2 1s forwards; animation-delay:1.5s; -webkit-animation-delay:1.5s;} @-webkit-keyframes labt { from {left:-50px; opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0);} to {left:0; opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} } @keyframes labt { from {left:-50px; opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0);} to {left:0; opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} } @-webkit-keyframes labt2 { from {right:-50px; opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0);} to {right:0; opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} } @keyframes labt2 { from {right:-50px; opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0);} to {right:0; opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} } @-webkit-keyframes lab1 { 0% { opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} 25% { opacity: .3; -ms-filter:alpha(opacity=30); filter:alpha(opacity=30);} 50% { opacity: .8; -ms-filter:alpha(opacity=80); filter:alpha(opacity=80);} 75% { opacity: .6; -ms-filter:alpha(opacity=60); filter:alpha(opacity=60);} 100% {opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} } @keyframes lab1 { 0% { opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} 25% { opacity: .3; -ms-filter:alpha(opacity=30); filter:alpha(opacity=30);} 50% { opacity: .8; -ms-filter:alpha(opacity=80); filter:alpha(opacity=80);} 75% { opacity: .6; -ms-filter:alpha(opacity=60); filter:alpha(opacity=60);} 100% {opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} } /* ****************************************** 공지사항 / 회사소개 -- ****************************************** */ .ma_news {margin-top:80px;} .ma_news li {list-style:none;} .ma_news .ma_title {text-align:center; margin-bottom:25px;} .ma_news .ma_title .btn {font-family:"Heebo"; font-weight:700; color:#000; letter-spacing:0px; line-height:1; font-size:40px; } .ma_news .ma_title .btn {transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .ma_news .news_box {position:relative;} .ma_news .news_box .rolling_box {margin-left:-55px; overflow:hidden;} .ma_news .news_box ul {} .ma_news .news_box li {float:left; width:33.33333333%;} .ma_news .news_box .news {margin-left:55px;} .ma_news .news_box .thumb {position:relative; width:100%; overflow:hidden;} .ma_news .news_box .thumb:before {content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.1); z-index:1;} .ma_news .news_box .thumb:after {content:""; position:absolute; left:0; top:0; width:0; height:100%; background:rgba(0,63,152,0.7); z-index:2; transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out;} .ma_news .news_box .thumb img {width:100%; float:left; transition: all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out;} .ma_news .news_box .real_img {position:absolute; left:0; top:0; width:100%; height:100%;} .ma_news .news_box .real_img img {position:absolute; left:0; top:0;} .ma_news .news_box .fake_img {width:100%; float:left;} .ma_news .news_box .more_btn {position:absolute; left:50%; top:50%; text-align:center; margin-top:-25px; z-index:10; margin-left:-75px;} .ma_news .news_box .more_btn {opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0); transition: all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out;} .ma_news .news_box .more_btn .txt {position:relative; z-index:10; font-family:"Heebo"; color:#fff; font-weight:500; letter-spacing:0px; height:51px; line-height:51px; box-sizing:border-box; width:150px; text-align:center;} .ma_news .news_box .more_btn .txt {border:1px solid #fff; border-radius:100px; overflow:hidden; display:inline-block; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .ma_news .news_box dl { box-sizing:border-box; padding-top:20px;} .ma_news .news_box dt {display:table; width:100%; table-layout:fixed;} .ma_news .news_box dd {padding:10px;} .ma_news .news_box .tit {max-width:100%; color:#333; font-size:20px; letter-spacing:-1px; font-weight:500; } .ma_news .news_box .txt {display:block;} .ma_news .news_box .tit h1 {overflow:hidden; text-overflow:ellipsis; white-space: nowrap; word-wrap: normal !important; display:block;} .ma_news .news_box .tag_box, .ma_news .news_box .date {display:table-cell; vertical-align:middle;} .ma_news .news_box .tag_box {padding:0 10px;} .ma_news .news_box .tag {font-size:13px; font-weight:500; padding:0 15px; height:30px; line-height:28px; color:#0042ff; border:1px solid #0042ff; max-width:100%; box-sizing:border-box; border-radius:30px; overflow:hidden;} .ma_news .news_box .tag .tt {overflow:hidden; text-overflow:ellipsis; white-space: nowrap; word-wrap: normal !important; display:block;} .ma_news .news_box .date {width:80px; text-align:right; color:#999; font-size:15px; font-family:"Heebo"; padding:0 3px; box-sizing:border-box;} .ma_news .news_box .prevnext {position:absolute; top:50%; margin-top:-118px; z-index:10; width:auto; height:auto;} .ma_news .news_box .prevnext.if_mid {display:none;} .ma_news .news_box .prevnext.prev {left:-155px;} .ma_news .news_box .prevnext.next {right:-155px;} .ma_news .news_box .prevnext a {float:left; padding:20px; position:relative;} .ma_news .news_box .prevnext .icon {float:left; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; position:relative;} .ma_news .news_box .prevnext .icon:before {content:""; position:absolute; top:50%; width:0px; height:2px; background:#000; margin-top:-1px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .ma_news .news_box .prevnext.prev .icon:before {left:2px;} .ma_news .news_box .prevnext.next .icon:before {right:2px;} .ma_news .news_box .prevnext .txt {float:left; height:43px; line-height:45px; color:#aaa; font-weight:300; letter-spacing:0px; overflow:hidden;} .ma_news .news_box .prevnext img {width:22px; float:left;} .ma_news .news_box .prevnext.prev .icon {/* padding-right:30px; */} .ma_news .news_box .prevnext.prev .txt {margin-left:15px;} .ma_news .news_box .prevnext.next .icon {float:right; /* padding-left:30px; */} .ma_news .news_box .prevnext.next .txt {float:right; margin-right:15px;} .ma_news .news_box .rolling_icon {width:100%; font-size:0px; text-align:center; margin-top:40px;} .ma_news .news_box .rolling_icon .lineup {display:inline-block;} .ma_news .news_box .rolling_icon .icon {float:left; width:15px; height:15px; margin:0 10px; position:relative; opacity: .3; -ms-filter:alpha(opacity=30); filter:alpha(opacity=30);} /* .ma_news .news_box .rolling_icon .icon {background:#333; border:1px solid #333; box-sizing:border-box; border-radius:100px; overflow:hidden;} */ .ma_news .news_box .rolling_icon .icon img {width:15px; float:left;} .ma_news .news_box .rolling_icon .icon.active {opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} /* 공지/회사소개 */ .ma_news .news_wrap+ .notice_box {margin-top:50px; border-top:1px solid #e8e8e8; } .ma_news .notice_box {} .ma_news .notice_box .ul {display:table; width:100%; table-layout:fixed;} .ma_news .notice_box .li {display:table-cell; vertical-align:top; padding:60px 90px 0 0; box-sizing:border-box;} .ma_news .notice_box .li+ .li {padding-left:90px; padding-right:0; border-left:1px solid #e8e8e8;} .ma_news .notice_box .tit_box {margin-bottom:20px;} .ma_news .notice_box .tit_box .new_tit {padding-right:24px; position:relative; color:#333; font-size:25px; letter-spacing:-1px; font-weight:700; max-width:100%; box-sizing:border-box;} .ma_news .notice_box .tit_box .more_ic {position:absolute; right:0; top:50%; margin-top:-6px; margin-top:-5px\0; width:12px; height:12px;} .ma_news .notice_box .tit_box .more_ic {transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .ma_news .notice_box .tit_box .more_ic:before {content:""; position:absolute; left:0; top:50%; width:12px; height:2px; background:#333; margin-top:-1px;} .ma_news .notice_box .tit_box .more_ic:after {content:""; position:absolute; top:0; left:50%; height:12px; width:2px; background:#333; margin-left:-1px;} .ma_news .notice_box .bn_box .tit_box .new_tit h1 {overflow:hidden; text-overflow:ellipsis; white-space: nowrap; word-wrap: normal !important; display:block;} .ma_news .list_box {} .ma_news .list_box li {border-top:1px solid #e8e8e8;} .ma_news .list_box dl {display:table; width:100%; table-layout:fixed;} .ma_news .list_box dt, .ma_news .list_box dd {display:table-cell; vertical-align:middle; padding:18px 0;} .ma_news .list_box dd {width:100px; padding:18px 10px; box-sizing:border-box; text-align:right;} .ma_news .posting {float:left; display:inline-block; max-width:100%; overflow:hidden; position:relative; padding:0 50px 0 23px; box-sizing:border-box; } .ma_news .posting:before {content:""; width:3px; height:3px; background:#aaa; position:absolute; top:50%; left:10px; margin-top:-2px;} .ma_news .posting .txt_box {position:relative; color:#333; font-size:19px; letter-spacing:-1px; font-weight:300; /* max-width:100%; float:left; */ display:block;} .ma_news .posting .txt_box h1 { overflow:hidden; text-overflow:ellipsis; white-space: nowrap; word-wrap: normal !important; display:block; } .ma_news .posting .new {width:19px; height:19px; float:right; display:inline-block; margin-top:5px; padding-left:10px;} .ma_news .posting .new img {width:100%; height:100%;} .ma_news .list_box .date {color:#999; letter-spacing:0px; font-family:"Heebo"; font-size:14px; line-height:1;} .ma_news .list_box .name {color:#333; font-size:13px; display:block; line-height:1; margin-top:5px;} .ma_news .btn_box {margin:23px -10px 0;} .ma_news .btn_box ul {display:table; width:100%; table-layout:fixed; border-collapse:separate; border-spacing:10px 0;} .ma_news .btn_box li {display:table-cell; vertical-align:middle;} .ma_news .btn_box .btn {display:block; text-align:center; background:#000; border:1px solid #000; padding:28px 0 27px; position:relative; overflow:hidden; } .ma_news .btn_box .btn.color {background:#003f98; border-color:#003f98;} .ma_news .btn_box .btn {transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .ma_news .btn_box .btn .img_over {transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} /* .ma_news .btn_box .btn:before {content:""; position:absolute; right:-50px; top:0; width: 0; height: 100px; -webkit-transform: skew(-40deg); -moz-transform: skew(-40deg);-o-transform: skew(-40deg); background: #0042ff;} .ma_news .btn_box .btn:before {transition: all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out;} */ .ma_news .btn_box .btn .inner {display:inline-block; position:relative; z-index:1;} .ma_news .btn_box .btn .txt {padding-left:10px; float:left; line-height:18px; font-size:19px; font-weight:500; color:#fff; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .ma_news .btn_box .btn .ic {float:left;} .ma_news .btn_box .btn .ic img {height:20px; float:left;} .ma_news .img_box {position:relative;} .ma_news .img_box .tit_box .new_tit {padding-right:0; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .ma_news .img_box .thumb {width:100%; height:375px; overflow:hidden; position:relative; } .ma_news .img_box .thumb .bg {width:100%; height:375px; background-repeat:no-repeat; background-position:center center; position:relative; z-index:2;} .ma_news .img_box .thumb .bg {transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out;} .ma_news .img_box .thumb img {width:100%; float:left;} .ma_news .img_box .thumb .bg:before {content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0); z-index:1; transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out;} .ma_news .img_box .real_img {position:absolute; left:0; top:0; width:100%; height:100%; display:none;} .ma_news .img_box .real_img img {position:absolute; left:0; top:0; transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out;} .ma_news .img_box .fake_img {width:100%; float:left; display:none;} .ma_news .img_box .rolling_nate {position:absolute; left:0; bottom:0; width:100%; padding-right:135px; box-sizing:border-box; height:80px; z-index:10;} .ma_news .img_box .tt_box {background:rgba(255,255,255,0.9); transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out;} .ma_news .img_box .tt_box ul {} .ma_news .img_box .tt_box li {} .ma_news .img_box .tt_box .table {display:table; width:100%; table-layout:fixed; height:80px;} .ma_news .img_box .tt_box .title {display:table-cell; vertical-align:middle;} .ma_news .img_box .tt_box .title .tt {font-size:17px; font-weight:300; color:#333; padding:0 30px; line-height:1.3;} .ma_news .img_box .prevnext_box {position:absolute; right:0; top:0; width:135px; height:100%; text-align:center; z-index:10;} .ma_news .img_box .prevnext_box:before {content:""; position:absolute; left:50%; top:50%; width:1px; height:27px; background:rgba(255,255,255,0.2); margin-top:-13px; z-index:1;} .ma_news .img_box .prevnext {display:inline-block; position:relative; width:50%; font-size:0px; background:rgba(0,0,0,0.6); height:100%; } .ma_news .img_box .prevnext:before {content:""; position:absolute; top:0; width:0; height:100%; background:#003f98; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .ma_news .img_box .prevnext:before {opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0);} .ma_news .img_box .prevnext.prev {float:left;} .ma_news .img_box .prevnext.next {float:right;} .ma_news .img_box .prevnext.prev:before {left:0;} .ma_news .img_box .prevnext.next:before {right:0;} .ma_news .img_box .prevnext a { padding:20px; position:relative; width:100%; height:100%; box-sizing:border-box; text-align:center;} .ma_news .img_box .prevnext .icon {position:absolute; left:50%; top:50%; margin:-13px 0 0 -6px;} .ma_news .img_box .prevnext .txt {float:left; height:43px; line-height:45px; color:#aaa; font-weight:300; letter-spacing:0px; overflow:hidden;} .ma_news .img_box .prevnext img {width:13px; float:left;} /* ****************************************** 하단 -- ****************************************** */ .ma_win {margin-top:80px; background:transparent url('../images/wepco/ma_win_bg.jpg') center center no-repeat; background-attachment:fixed;} .ma_win li {list-style:none;} .ma_win .top {overflow:hidden; padding:110px 0 90px;} .ma_win .top .left {float:left; } .ma_win .top .left dl {float:left; text-align:center; position:relative;} .ma_win .top .left dl+ dl {padding-left:75px;} .ma_win .top .left dl+ dl:before {content:""; position:absolute; left:36px; top:25px; width:5px; height:5px; background:#fff; border:1px solid #fff; border-radius:100px; overflow:hidden; box-sizing:border-box;} .ma_win .top .left dt {font-weight:100; color:#fff; font-size:50px; letter-spacing:0px; line-height:1;} .ma_win .top .left dt h1 {font-family:Noto Sans CJK KR,'Noto',Sans-serif !important;} .ma_win .top .left dd {font-weight:700; color:#fff; font-size:35px; letter-spacing:0px; line-height:1; margin-top:15px;} .ma_win .top .result {float:right; margin-top:-13px; position:relative;} .ma_win .top .result .ul {width:100%; position:relative;} .ma_win .top .result .li {float:left; text-align:left; position:relative;} .ma_win .top .result .li+ .li {text-align:center; padding-left:100px;} .ma_win .top .result .li+ .li:before {content:""; position:absolute; left:25px; top:18px; width:50px; height:50px; background:transparent url('../images/wepco/ma_win_line.png') left top no-repeat;} /* .ma_win .top .result .li+ .li:after {content:""; position:absolute; left:0%; top:18px; width:50px; height:50px; background:transparent url('../images/wepco/ma_win_line.png') left top no-repeat; margin:0 -67px 0 0;} */ .ma_win .top .result .li:last-child {text-align:right;} .ma_win .top .result dl {text-align:center; display:inline-block; font-size:0px;} .ma_win .top .result dt {text-align:center; display:inline-block;} .ma_win .top .result dd {text-align:center; font-size:17px; color:rgba(255,255,255,0.6); font-weight:300; line-height:1; margin-top:5px;} .ma_win .top .result dt ul {float:left;} .ma_win .top .result dt li {font-family:"benton" !important; font-size:80px; color:#fff; font-weight:700; letter-spacing:0px; line-height:1;} .ma_win .top .result dt li h1 {font-family:"benton" !important;} .ma_win .bn_box {background:rgba(0,0,0,0.3); padding:60px 0 80px; overflow:hidden; } .ma_win .bn_box .inner {position:relative;} .ma_win .bn_box ul {/*overflow:hidden; -- 롤링이 안되어 주석처리 LCY -- */ } .ma_win .bn_box li {float:left; width:20%; text-align:center;} .ma_win .bn_box .in_box {position:relative; padding:0 45px; display:inline-block; box-sizing:border-box; max-width:100%;} .ma_win .bn_box .bg {position:absolute; bottom:0;} .ma_win .bn_box .bg.left {left:0;} .ma_win .bn_box .bg.right {right:0;} .ma_win .bn_box .bg img {width:38px; float:left;} .ma_win .bn_box dl {text-align:center; } .ma_win .bn_box dt {} .ma_win .bn_box dd {font-size:18px; font-weight:500; line-height:1.4; color:#fff; max-width:120px; margin:15px auto 0;} .ma_win .bn_box .year {font-weight:300; line-height:1.1; color:rgba(255,255,255,0.7); font-family:"Heebo"; display:block;} .ma_win .bn_box .title {font-weight:300; line-height:1; color:rgba(255,255,255,0.7); max-width:100%; box-sizing:border-box; margin-top:2px;} .ma_win .bn_box .title strong {overflow:hidden; text-overflow:ellipsis; white-space: nowrap; word-wrap: normal !important; display:block;} .ma_win .prevnext {position:absolute; top:50%; opacity: .3; -ms-filter:alpha(opacity=30); filter:alpha(opacity=30); font-size:0px; margin-top:-40px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .ma_win .prevnext.prev {left:-100px;} .ma_win .prevnext.next {right:-100px;} .ma_win .prevnext a {padding:20px; } .ma_win .prevnext .icon {float:left;} .ma_win .prevnext .icon img {width:20px; float:left;} /* ****************************************** FOOTER -- ****************************************** */ .footer {margin-top:150px; border-top:1px solid #ddd; padding:55px 0 70px;} .footer.if_main {margin-top:0;} .footer li {list-style:none;} .footer .layout_fix {max-width:100%;} .footer .ul {overflow:hidden; position:relative; padding-right:400px; } .footer .li {float:left;} .footer .logo_box {width:350px; padding-top:10px;} .footer .logo {overflow:hidden;} .footer .logo a {float:left;} .footer .logo img {float:left; max-width:330px; max-height:80px;} .footer .info_box {} .footer .info_box ul {} .footer .info_box li {overflow:hidden; font-size:0px;} .footer .info_box .txt {color:#999; line-height:1.5; float:left; font-size:15px;} .footer .info_box .txt+ .txt {padding-left:15px;} .footer .info_box .copy {color:#aaa; font-family:"Heebo"; font-size:14px; letter-spacing:0px; margin-top:20px;} .footer .menu_box {width:400px; position:absolute; right:0; top:0;} .footer .menu {text-align:right; margin-top:-10px;} .footer .menu ul { display:inline-block; margin-right:-18px;} .footer .menu li {float:left;} .footer .menu .btn { padding:10px 18px; color:#888; position:relative;} .footer .menu li+ li .btn:before {content:""; position:absolute; left:0; top:50%; width:1px; height:12px; background:#ddd; margin-top:-6px;} /* ****************************************** 맨위로 -- ****************************************** */ .scroll_fix {position:fixed; right:0; bottom:-70px; z-index:10000; overflow:hidden; margin:20px; } .scroll_fix {transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out;} .scroll_fix .btn_gotop {transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; } .scroll_fix .btn_gotop .icon {position:relative; background:#fff; color:#003f98; font-size:18px; line-height:1; font-weight:400; width:50px; height:50px; line-height:50px; text-align:center;} .scroll_fix .btn_gotop .icon {transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out;} .scroll_fix .btn_gotop .icon:before {content:""; position:absolute; left:0; top:0; right:0; bottom:0; border:1px solid #003f98;} .scroll_fix .btn_gotop i {color:#003f98; display:inline-block; font-weight:700;} .scroll_fix .btn_gotop .ov_tx {position:absolute; left:0; bottom:0; width:100%; z-index:57; background-color:transparent;} .scroll_fix .btn_gotop .ov_bg {position:absolute; left:0; bottom:0; width:100%; z-index:56; background:#003f98; height:0px !important;} .scroll_fix.if_scroll {bottom:0} /* * Max ~ 900px (Mouse Over) * 1600px * 1500px * 1400px * 1250px * 1024px * 1150px * 1100px * 1030px * 1000px * 1000px ~ 800px * 950px * 900px : Show mobile images * 850px * 800px * 770px * 750px * 700px * 650px * 600px : Show mobile step2 * 550px * 500px * 450px * 350px */ /* TAG */ .wrap:before {position:fixed; left:0; bottom:0; background:#ff0000; color:#fff; z-index:10000000; padding:5px 10px; display:none !important;} .wrap:after {position:fixed; left:0; bottom:20px; background:#000; color:yellow; z-index:100000000; padding:5px 10px; display:none !important;} /* **************************************** * * ELEMENT (common) * **************************************** */ /* 글씨 brì—­í•  반응형 */ u {display:block;} /* PC/모바일 요소 스위칭 */ .if_pc {display:block;} .if_mo {display:none !important;} .if_mid {display:none;} .if_min {display:none;} /* PC/모바일 이미지 스위칭 */ .img_pc {display:inline-block;} .img_mo {display:none;} /* **************************************** * â—† Max ~ 900px (Mouse Over) * **************************************** */ @media screen and (min-width:900px) { .wrap:after {content:"Mouse"; } /* header */ .header .sitemap:hover .this_btn .space {display:block;} .header .sitemap:hover .btn_all .copy .icons {left:-7px} .header .nav:hover:before {height:0px; opacity:0; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} .header .nav:hover dd {height:350px; padding-top:30px; opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} .header .nav:hover li+ li dl dd:after {height:350px;} .header .nav dl:hover .ctg1 .txt {colot:#c5d9ff !important} .header .nav dl:hover .ctg1:before {left:0; width:100%;} .header .nav dl:hover dd:before {width:100%;} .header .nav:hover .hit .ctg1 .txt {color:#fff;} .header .nav:hover .hit .ctg1:after {left:0; width:0;} .header .nav .ctg2:hover {text-decoration:underline;} .header .open_all .menu_box .ctg2:hover {color:#0042ff;} .sitemap .menu dl:hover .ctg1 {color:#1d4161;} .sitemap .menu .ctg2:hover .txt {color:#000;} .sitemap .menu .ctg2:hover .txt:before {width:100%;} .sitemap .close_box .close_btn:hover {border-color:#000; background:#f6f6f6;} /* .sitemap .close_box .close_btn:hover .img_over {opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} */ .sitemap .lang_btn .btn:hover .txt {color:#003f98;} .ma_visual .visual_txt .btn:hover {background:#fff;} .ma_visual .visual_txt .btn:hover .txt {padding-right:20px; color:#000;} .ma_visual .visual_txt .btn:hover .icon {opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} .ma_visual .prevnext a:hover .icon {opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} .ma_visual .prevnext a:hover .line {opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} .ma_visual .prevnext a:hover .line1 {width:100%; height:1px;} .ma_visual .prevnext a:hover .line2 {width:1px; height:100%; transition-delay:.1s; -webkit-transition-delay:.1s; -ms-transition-delay:.1s;} .ma_visual .prevnext a:hover .line3 {width:100%; height:1px; transition-delay:.1s; -webkit-transition-delay:.2s; -ms-transition-delay:.2s;} .ma_visual .prevnext a:hover .line4 {width:1px; height:100%; transition-delay:.1s; -webkit-transition-delay:.3s; -ms-transition-delay:.3s;} .ma_business .btn_box .btn:hover .ic {opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100); right:20px;} .ma_business .btn_box .btn:hover .ic:before {width:25px;} /* .ma_business .btn_box .btn:hover {color:#000;} .ma_business .btn_box .btn:hover:before {width:100%; padding-left:25px;} .ma_business .btn_box .btn:hover .ic {opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} .ma_business .btn_box .btn:hover .img_over {opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} .ma_business .btn_box .btn:hover .ov_box {width:100%;} */ .ma_lab .lab_box .txt_box .more_btn:hover {padding-right:35px;} .ma_news .posting:hover .txt_box {text-decoration:underline;} .ma_news .btn_box .btn:hover {background:#fff;} .ma_news .btn_box .btn:hover .txt {color:#000;} .ma_news .btn_box .btn:hover .img_over {opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} .ma_news .btn_box .btn.color:hover {background:#fff;} .ma_news .btn_box .btn.color:hover .txt {color:#003f98;} .ma_news .news_box .tit:hover {color:#000;} .ma_news .news_box .thumb:hover:after {left:0; width:100%;} .ma_news .news_box .thumb:hover img {transform:scale(1.1); -webkit-transform:scale(1.1);} .ma_news .news_box .thumb:hover .more_btn {opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} .ma_news .news_box .more_btn .txt:hover {background:#fff; color:#003f98;} .ma_news .news_box .prevnext:hover .icon:before {width:100%;} .ma_news .news_box .prevnext.prev:hover .icon {padding-right:30px;} .ma_news .news_box .prevnext.next:hover .icon {padding-left:30px;} .ma_news .notice_box .tit_box .new_tit:hover .more_ic {transform:rotate( 180deg );} .ma_news .img_box .tit_box .new_tit:hover {color:#003f98;} .ma_news .img_box .thumb:hover .bg {transform:scale(1.1); -webkit-transform:scale(1.1);} .ma_news .img_box .thumb:hover .bg:before {background:rgba(0,0,0,0.3);} .ma_news .img_box .rolling_nate:hover .tt_box {background:#fff;} .ma_news .img_box .prevnext_box:hover:before {display:none;} .ma_news .img_box .prevnext:hover:before {opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} .ma_news .img_box .prevnext.prev:hover:before {left:auto; right:0; width:100%;} .ma_news .img_box .prevnext.next:hover:before {right:auto; left:0; width:100%;} .footer .menu .btn:hover {text-decoration:underline;} .ma_win .prevnext:hover {opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} .btn_gotop:hover i {color:#fff; font-weight:500;} .btn_gotop:hover .ov_tx {height:50px !important;} .btn_gotop:hover .ov_bg {height:50px !important;} } /* **************************************** * â—† 1700px ~ * **************************************** */ @media screen and (max-width:1700px) { .wrap:before {content:"1700"; } .sitemap .site_left {width:400px;} .sitemap .menu {margin-left:-40px;} .sitemap .menu li {padding-left:40px;} .ma_news .news_box .prevnext.prev {left:-110px;} .ma_news .news_box .prevnext.next {right:-110px;} .ma_news .news_box .prevnext.prev .txt {margin-left:10px;} .ma_news .news_box .prevnext.next .txt {margin-right:10px;} } /* **************************************** * â—† 1600px ~ * **************************************** */ @media screen and (max-width:1600px) { .wrap:before {content:"1600"; } .layout_fix {padding:0 90px;} /*.header .table .td.left {width:330px;}*/ .sitemap .site_left {width:350px;} .sitemap .menu {margin-left:-30px;} .sitemap .menu li {padding-left:30px;} .ma_news .news_box .prevnext.prev {left:-60px;} .ma_news .news_box .prevnext.next {right:-60px;} .ma_news .news_box .prevnext .txt {display:none;} .ma_win .prevnext.prev {left:-60px;} .ma_win .prevnext.next {right:-60px;} } /* **************************************** * â—† 1500px ~ * **************************************** */ @media screen and (max-width:1500px) { .wrap:before {content:"1500"; } .layout_fix {padding:0 80px;} .sitemap .site_left {width:300px;} .sitemap .site_right .layout_fix {padding:0 60px;} .ma_news .notice_box .li {padding-right:70px;} .ma_news .notice_box .li+ .li {padding-left:70px; padding-right:0 !important;} .footer .ul {padding:0 0 0 350px;} .footer .li {float:none;} .footer .logo_box {position:absolute; left:0; top:0;} .footer .menu {text-align:left;} .footer .menu_box {position:static; width:100%;} .footer .menu ul {margin:0 0 0 -18px;} .footer .info {margin-top:5px;} } /* **************************************** * â—† 1400px ~ * **************************************** */ @media screen and (max-width:1400px) { .wrap:before {content:"1400"; } .layout_fix {padding:0 70px;} .header .inner_box {padding:0 40px;} .header .nav .ctg1 {padding:15px 35px;} .sitemap .site_left {display:none;} .sitemap .site_right .layout_fix {padding:0 50px;} .sitemap .site_right .layout_fix:before {background-size:auto 180px;} .ma_visual .prevnext {margin-top:-39px;} .ma_visual .prevnext.prev {left:15px;} .ma_visual .prevnext.next {right:15px;} .ma_visual .prevnext a {padding:12px 25px;} .ma_business .li {padding:50px 60px 0;} .ma_business .btn_box {padding:0 60px;} .ma_news .news_box .rolling_box {margin-left:-40px;} .ma_news .news_box .news {margin-left:40px;} .ma_news .news_wrap+ .notice_box {margin-top:50px;} .ma_news .notice_box .li {padding-right:50px; padding-top:50px;} .ma_news .notice_box .li+ .li {padding-left:50px; padding-right:0 !important;} .ma_win .top .result .li+ .li {padding-left:90px;} .ma_win .top .result .li+ .li:before {left:20px; } } /* **************************************** * â—† 1300px ~ * **************************************** */ @media screen and (max-width:1300px) { .wrap:before {content:"1300"; } .layout_fix {padding:0 60px;} .header .nav .ctg1 {padding:15px 15px; min-width:150px; box-sizing:border-box;} .header .inner_box {padding:0px;} .header .table {display:inline-block; height:auto; position:relative; padding:0 30px 60px; box-sizing:border-box;} .header .table .td.left {float:left; width:auto;} .header .table .td.center {position:absolute; left:0; bottom:0px; display:block; width:100%; height:60px; border-top:1px solid rgba(255,255,255,0.15);} .header .table .td.right {float:right; width:auto;} .header .logo {text-align:left; height:100px;} .header .logo a {padding:15px 0;} .header .logo img {max-height:70px;} .header .logo .img_pc {display:none !important;} .header .logo .img_mo {display:inline-block !important;} .header .top {padding-top:25px;} .header .top .lang_btn {padding:15px 0; padding-right:10px; } .header .all_btn {padding:12px 0px;} .header .all_btn .shape_box {height:23px;} .header .all_btn .shape {height:2px;} .header .nav:before {top:60px;} .header .nav dt {padding:0; height:auto;} .header .nav dd {top:60px;} .header .nav .ul {width:100%;} .header .nav .ctg1 {padding:0;} .header .nav .ctg1 .txt {height:60px; line-height:58px;} .header .nav .ctg2 {padding:7px 0;} .header .nav:hover:before {height:0px; opacity:0;} .header .nav:hover dd {padding-top:20px; height:300px;} .ma_lab .lab_box .txt_box {padding-left:80px;} .ma_win {background-size:cover;} .ma_win .bn_box li {width:25%;} .ma_win .prevnext a {padding:20px 15px;} .ma_win .prevnext.prev {left:-40px;} .ma_win .prevnext.next {right:-40px;} } /* **************************************** * â—† 1024px ~ * **************************************** */ @media screen and (max-width:1024px) { .wrap:before {content:"1200"; } .layout_fix {padding:0 50px;} .ma_visual .visual_box {height:900px; background-size:auto 100%;} .ma_visual .visual_txt .inner {padding:100px 30px 0;} .ma_visual .scroll_down {display:none;} .ma_visual .rolling_icon {display:block;} .ma_visual .prevnext {display:none;} .ma_business {margin-top:60px;} .ma_business .li {padding:40px 40px 0; height:400px;} .ma_business .btn_box {padding:0 40px;} .ma_business .btn_box .table {max-width:260px;} .ma_lab {margin-top:60px;} .ma_lab .lab_box .txt_box {padding-left:60px;} .ma_lab .lab_box.if_d .img_box {left:-50px;} .ma_lab .lab_box.if_d .txt_box {padding:0 40px 0 80px;} .ma_lab .lab_box+ .lab_box {margin-top:40px;} .ma_news {margin-top:60px;} .ma_news .news_wrap+ .notice_box {margin-top:40px;} .ma_news .notice_box .li {padding-right:40px; padding-top:40px;} .ma_news .notice_box .li+ .li {padding-left:40px; padding-right:0 !important;} .ma_news .list_box dt {padding:12px 0;} .ma_news .list_box dd {width:60px; padding:12px 5px;} .ma_news .posting {padding-right:0px;} .ma_news .list_box .name {display:none;} .ma_news .list_box .date {padding-top:4px;} .ma_news .posting .new {margin-top:4px;} .ma_news .btn_box {margin:5px 0 0;} .ma_news .btn_box ul {display:block; border-spacing:0;} .ma_news .btn_box li {display:block;} .ma_news .btn_box li+ li {margin-top:5px;} .ma_news .btn_box .btn {padding:18px 20px; text-align:left; position:relative;} .ma_news .btn_box .btn:after { content:""; position:absolute; right:0; top:0; width:50px; height:100%; background:transparent url('../images/wepco/ma_notice_ar.png') center center no-repeat;} .ma_news .img_box .thumb {height:334px;} .ma_win {margin-top:60px; text-align:center; } .ma_win .top {padding:80px 0 40px;} .ma_win .top .left {float:none; display:inline-block; width:auto;} .ma_win .top .result {float:none; width:100%; margin-top:50px;} .ma_win .top .result .ul {margin:0 -50px;} .ma_win .top .result .ul:before {display:none;} .ma_win .top .result .ul:after {display:none;} .ma_win .top .result .ul {width:auto; display:inline-block;} .ma_win .top .result .li {width:auto; padding:0 50px !important; position:relative;} .ma_win .top .result .li+ .li:before {left:-25px;} .ma_win .bn_box {padding:50px 0 80px;} .footer {margin-top:120px;} } /* **************************************** * â—† 1100px ~ * **************************************** */ @media screen and (max-width:1100px) { .wrap:before {content:"1100"; } .layout_fix {padding:0 40px;} .sitemap .site_right .layout_fix:before {background-size:auto 150px;} .ma_business .busi_box {margin:0 -30px;} .ma_business .ul {border-spacing:30px 0;} .ma_lab .lab_box.if_r .img_box {left:50px;} .ma_lab .lab_box.if_d .img_box {left:-80px;} .ma_lab .lab_box.if_d .txt_box {padding-left:60px;} .ma_news .news_box .prevnext {display:none;} } /* **************************************** * â—† 1050px ~ * **************************************** */ @media screen and (max-width:1050px) { .wrap:before {content:"1050"; } } /* **************************************** * â—† 1000px ~ * **************************************** */ @media screen and (max-width:1000px) { .wrap:before {content:"1000"; } .layout_fix {padding:0 40px;} .header .table {padding-bottom:50px;} .header .table .td.center {height:0px;} .header .logo {height:80px;} .header .logo a {padding:15px 0;} .header .logo img {max-height:60px;} .header .top {padding-top:17px;} .header .nav:before {top:50px;} .header .nav dd {top:50px;} .header .nav .ctg1 {padding:0 25px;} .header .nav .ctg1 .txt {height:50px; line-height:48px;} .header .all_btn.if_pc {display:none !important;} .header .all_btn.if_mo {display:block !important;} .if_open_sitemap .sitemap {left:-100%;} .if_open_slider {overflow:hidden;} .if_open_slider .slide_bg {right:0;} .if_open_slider .slide {right:0;} .ma_visual .visual_box {height:800px;} .ma_lab .lab_box .txt_box {padding-left:40px;} .ma_lab .lab_box.if_r .img_box {left:100px;} .ma_lab .lab_box.if_d .img_box {left:-100px;} .ma_news .notice_box .li {padding-right:30px; } .ma_news .notice_box .li+ .li {padding-left:30px; padding-right:0 !important;} .ma_news .news_box .rolling_box {margin-left:-30px;} .ma_news .news_box .news {margin-left:30px;} .ma_news .news_box .rolling_icon {margin-top:30px;} .ma_win .bn_box .inner {padding:0 20px;} .ma_win .bn_box li {width:33.333333%;} .ma_win .bn_box dd {max-width:110px;} .ma_win .prevnext {margin-top:-37px;} .ma_win .prevnext a {padding:20px 10px;} .ma_win .prevnext.prev {left:-20px;} .ma_win .prevnext.next {right:-20px;} .ma_win .prevnext .icon img {width:17px;} } /* **************************************** * â—† 950px ~ * **************************************** */ @media screen and (max-width:950px) { .wrap:before {content:"950"; } } /* **************************************** * â—† 900px ~ (Mobile Start) * **************************************** */ @media screen and (max-width:900px) { .wrap:before {content:"900"; } .if_pc {display:none !important;} .if_mo {display:block !important;} .img_pc {display:none !important;} .img_mo {display:inline-block !important;} .layout_fix {padding:0 30px;} .header .table {padding:0 26px 0px;} .header .nav {padding:0 20px;} .header .nav:before {display:none !important;} .header .nav .ctg1 {padding:0 20px; min-width:auto;} .header .nav:hover dd {height:auto;} .header .top .lang_btn.if_pc {display:block !important;} .header .top .lang_btn.if_mo {display:none !important;} .header .nav li:nth-of-type(4) dd {left:auto; right:0; } .header .nav li:last-child dd {left:auto; right:0;} .header .nav dd {width:auto; min-width:100%; padding:0 !important; z-index:103; height:0px; } .header .nav dd ul {height:0px; overflow:hidden; border:1px solid #000; border-top:0; box-sizing:border-box;} .header .nav dd li {background:#fff; height:36px; box-sizing:border-box;} .header .nav dd li+ li {border-top:1px solid #e9e9e9;} .header .nav .ctg2 {text-align:left; padding:0px 30px !important; height:35px; line-height:35px;} .header .nav .ctg2 h1 {white-space:nowrap;} .header .nav .if_open_nav dd {height:72px; opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100); } .header .nav .if_open_nav dd ul {height:72px;} .header .nav .li:nth-of-type(1).if_open_nav dd {height:180px;} .header .nav .li:nth-of-type(1).if_open_nav dd ul {height:180px;} .ma_visual .visual_box {height:700px;} .ma_visual .visual_txt .inner {padding:100px 20px 0;} .ma_visual .active .visual_txt .text {padding-bottom:5px;} .ma_visual .active .visual_txt .title {padding-top:5px;} .ma_visual .visual_txt .sub {margin-top:20px;} .ma_visual .visual_txt .btn {margin-top:30px;} .ma_business {margin-top:40px;} .ma_business .busi_box {margin:0} .ma_business .ul { display:block;} .ma_business .li {display:block; background-size:auto 100% !important; padding:30px 30px 0; height:auto;} .ma_business .li+ .li {margin-top:20px;} .ma_business .btn_box {position:static; padding:0; margin-top:30px;} .ma_business .btn_box .table {max-width:300px; padding-left:30px;} .ma_business dt h1 { white-space:normal;} .ma_lab {margin-top:40px;} .ma_lab .lab_box {height:auto !important; background-size:auto 100% !important; padding-bottom:50px;} .ma_lab .lab_box .img_box {position:static;} .ma_lab .lab_box .txt_box {position:static; padding:0px 40px 0 !important; width:100%;} .ma_lab .lab_box.if_d .txt_box {padding-top:40px !important;} .ma_lab .lab_box.if_d .img_box {background:linear-gradient( to bottom, #e1e6f2, #d5def4 );} .ma_lab .lab_box.if_d .img_box .bg {text-align:center; margin-left:-25px;} .ma_lab .lab_box.if_d .img_box .bg img {max-height:400px; max-width:100%;} .ma_lab .lab_box+ .lab_box {margin-top:30px;} .ma_lab .lab_box .img_box .round {top:50%; left:50%; margin:-85px 0 0 -80px;} .ma_lab .lab_box .img_box .round .line img {max-height:180px; } .ma_lab .lab_box .img_box .round .point .in {background:#d5def4; border-color:#d5def4;} .ma_lab .lab_box .img_box .round .po3 .in {right:-5px;} .ma_lab .lab_box .img_box .round .po5 .in {left:-5px;} .ma_lab .lab_box .img_box .round .po6 .in {left:-4px;} .ma_news {margin-top:40px;} .ma_news .ma_title {margin-bottom:20px;} .ma_news .news_box .rolling_box {margin-left:-20px; overflow:visible;} .ma_news .news_box li {width:50%;} .ma_news .news_box .news {margin-left:20px;} .ma_news .news_box dl {padding-top:15px;} .ma_news .news_box dd {padding:5px 0;} .ma_news .news_box .tag_box {padding:0;} .ma_news .news_box .rolling_icon .icon {width:13px; height:13px; background:#000; border:1px solid #000; box-sizing:border-box; border-radius:100px; overflow:hidden; margin:0 8px;} .ma_news .news_box .rolling_icon .icon img {display:none;} .ma_news .notice_box .tit_box {text-align:center;} .ma_news .notice_box .tit_box a {display:inline-block;} .ma_news .news_wrap+ .notice_box {margin-top:30px;} .ma_news .notice_box .ul {display:block;} .ma_news .notice_box .li {display:block; padding:30px 0 0 !important;} .ma_news .notice_box .li+ .li {border-left:0; border-top:1px solid #e8e8e8; margin-top:30px;} .ma_news .notice_box .tit_box {text-align:center; position:relative;} .ma_news .notice_box .tit_box .new_tit {padding-right:0; position:static;} .ma_news .posting .new {margin-top:4px; width:17px; height:17px;} .ma_news .list_box dd {width:80px;} .ma_news .list_box .date {padding-top:2px;} .ma_news .list_box .name {display:block;} .ma_news .img_box .tit_box .new_tit {display:inline-block;} .ma_news .img_box .thumb {height:auto; background:none;} .ma_news .img_box .thumb .bg {opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0); position:absolute; left:0; top:0; width:100%; height:100%;} .ma_news .img_box .real_img {display:block;} .ma_news .img_box .fake_img {display:block;} .ma_news .btn_box {margin:10px -10px 0;} .ma_news .btn_box ul {display:table; border-spacing:10px 0;} .ma_news .btn_box li {display:table-cell;} .ma_news .btn_box .btn {padding:20px; text-align:center;} .ma_news .btn_box .btn:after {display:none;} .ma_news .btn_box .btn:before {width:40px; background:transparent url('../images/wepco_m/ma_notice_ar.png') center center no-repeat; background-size:8px; display:none;} .ma_news .img_box .rolling_nate {height:70px;} .ma_news .img_box .tt_box .table {height:70px;} .ma_news .img_box .tt_box .title .tt {padding:0 20px;} .ma_win {margin-top:40px;} .ma_win .bn_box dd {max-width:110px;} .ma_win .bn_box .year {line-height:1.2;} .ma_win .top .result .li+ .li:before {background:transparent url('../images/wepco_m/ma_win_line.png') left top no-repeat; background-size:100%;} .ma_win .top .left dl+ dl:before {top:20px;} .footer {margin-top:100px; padding:20px 0 60px;} .footer .ul {padding:0; text-align:center;} .footer .logo_box {position:static; width:auto; text-align:center; font-size:0px; margin-bottom:20px;} .footer .logo img {float:none; max-height:50px;} .footer .menu {text-align:center;} .footer .menu ul {margin:0} .footer .menu .btn {padding:10px 15px;} .footer .info_box .txt {display:inline-block; float:none; padding:0 5px !important; } .scroll_fix .btn_gotop {border-radius:300px; box-sizing:border-box; overflow:hidden; border:1px solid #003f98;} .scroll_fix .btn_gotop .icon {} .scroll_fix .btn_gotop .ov_tx {left:1px;} .scroll_fix .btn_gotop .icon:before {border-radius:300px; overflow:hidden; box-sizing:border-box; display:none;} } /* **************************************** * â—† 800px ~ * **************************************** */ @media screen and (max-width:800px) { .wrap:before {content:"800"; } .ma_visual .visual_box {height:650px;} .ma_lab .lab_box.if_r .img_box img {height:480px;} .ma_lab .lab_box .img_box .map .cir1 {transform:scale(0.11)} .ma_lab .lab_box .img_box .map.kr {right: 222px; bottom: 190px;} .ma_lab .lab_box .img_box .map.ma {right: 387px; bottom: 130px;} .ma_lab .lab_box .img_box .map.vi {right: 317px; bottom:150px;} .ma_lab .lab_box .img_box .map.mi {right: 225px; bottom:140px;} .ma_lab .lab_box .img_box .map.fi {right:215px; bottom:95px;} .ma_win .bn_box .inner {padding:0 10px;} .ma_win .bn_box dd {max-width:100px;} .ma_win .prevnext {margin-top:-35px;} .ma_win .prevnext a {padding:20px 10px;} .ma_win .prevnext.prev {left:-30px;} .ma_win .prevnext.next {right:-30px;} .ma_win .prevnext .icon img {width:15px;} } /* **************************************** * â—† 700px ~ * **************************************** */ @media screen and (max-width:700px) { .wrap:before {content:"700"; } .header .nav {padding:0;} .header .nav .ul {width:auto; margin:0 auto;} .header .nav .ctg1 {padding:0 30px;} .ma_visual .visual_box {height:auto;} .ma_visual .visual_img {display:block;} .ma_business .btn_box .table {max-width:260px; } .ma_lab .lab_box.if_r .img_box {font-size:0px;} .ma_lab .lab_box.if_r .img_box img {} .ma_lab .lab_box.if_r .img_box .bg {overflow:visible; display:inline-block; margin-left:50px;} .ma_win {background:transparent url('../images/wepco_m/ma_win_bg.jpg') center center no-repeat; background-size:cover;} .ma_win .top .left dl+ dl {padding-left:60px;} .ma_win .top .left dl+ dl:before {left:30px;} .ma_win .bn_box {padding:40px 0 60px;} .ma_win .bn_box li {width:50%;} .ma_win .bn_box dd {max-width:95px;} .scroll_fix {margin:10px;} .scroll_fix .btn_gotop .icon {width:40px; height:40px; line-height:38px; font-size:15px;} } /* **************************************** * â—† 650px ~ * **************************************** */ @media screen and (max-width:650px) { .wrap:before {content:"650"; } .ma_visual .visual_txt .sub {margin-top:15px;} .ma_visual .visual_txt .btn {margin-top:25px;} .ma_visual .visual_txt .btn {height:35px; padding:0 15px;} .ma_visual .visual_txt .btn .txt {line-height:33px;} } /* **************************************** * â—† 600px ~ 슬라이드 모바일 형태 시작 (네비2ì°¨ 열고닫기) * **************************************** */ @media screen and (max-width:600px) { .wrap:before {content:"600"; } .layout_fix {padding:0 20px;} .header .table {padding-bottom:45px;} .header .table .td.center {height:0px;} .header .logo {height:60px;} .header .logo a {padding:10px 0;} .header .logo img {max-height:60px; width:40px;} .header .top {padding-top:9px;} .header .nav .ctg1 {padding:0 25px;} .header .nav .ctg1 .txt {height:45px; line-height:43px;} .header .all_btn .shape_box {height:18px;} .header .all_btn .shape {height:2px; width:26px;} .header .all_btn .shape1 {top:8px;} .header .nav dd {top:45px;} .header .nav .ctg2 {padding:12px 25px;} .header .top .lang_btn {padding:0; margin-right:-15px;} .header .top .lang_btn.if_pc {display:none !important;} .header .top .lang_btn.if_mo {display:block !important;} .header .top .lang_btn .lang {padding:0 25px; position:relative;} .header .top .lang_btn .lang .txt {height:42px; line-height:42px; color:#fff; font-size:15px;} .header .top .lang_btn .lang .ic {position:absolute; left:5px; top:50%; width:15px; height:15px; background:transparent url('../images/wepco_m/lang_ic.png') center center no-repeat; background-size:13px; margin-top:-8px;} .header .top .lang_btn .lang .ar {position:absolute; right:12px; top:50%; width:6px; height:3px; margin-top:-2px; overflow:hidden;} .header .top .lang_btn .lang .triangle-down {border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 3px solid #fff; margin-bottom:5px;} .header .top .lang_btn .lang .triangle-up {border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 3px solid #fff;} .header .top .lang_btn .lang .triangle-down, .header .top .lang_btn .lang .triangle-up {transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .header .top .lang_btn .btn_box {position:absolute; left:0; top:35px; width:100%; background:#fff; } .header .top .lang_btn .btn_box {transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; opacity: 0; } .header .top .lang_btn .btn {display:block; text-align:center; color:#333; height:0px; overflow:hidden; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .header .top .lang_btn .btn .txt {color:#333; padding-left:0; height:35px; box-sizing:border-box; font-weight:400; letter-spacing:0px; line-height:35px; font-size:15px;} .header .top .lang_btn .btn+ .btn {margin-left:0; padding-left:0; border-top:1px solid #ddd;} .header .table .td.right {position:relative; z-index:500;} .if_open_lang .header .top .lang_btn .lang .triangle-down {margin-top:-8px;} .if_open_lang .header .top .lang_btn .btn_box {opacity: 1;} .if_open_lang .header .top .lang_btn .btn {height:35px;} .slide .slide_right {width:60px;} .slide .slide_right .inner:before {bottom:10px; background-size:40px;} .slide .top_box {height:60px;} .slide .top_box .tit {line-height:60px;} .slide .clode_btn {height:60px; background-size:18px;} .slide .menu {padding:10px 20px 87px;} .slide .btn_box {padding:20px;} .slide .btn_box .btn {height:45px; line-height:45px;} .ma_visual .visual_txt .inner {padding:100px 20px 20px;} .ma_visual .visual_txt .text {letter-spacing:-1px;} .ma_visual .rolling_icon {bottom:20px;} .ma_business {margin-top:30px;} .ma_business dd {margin-top:5px;} .ma_lab {margin-top:30px;} .ma_lab .lab_box {padding-bottom:15px;} .ma_lab .lab_box .txt_box {padding:20px !important;} .ma_lab .lab_box.if_d .txt_box {} .ma_lab .lab_box .txt_box .tit {margin-bottom:10px;} .ma_lab .lab_box .txt_box dd {margin-top:15px;} .ma_lab .lab_box .txt_box .more_box {margin-top:30px;} .ma_lab .lab_box.if_d .img_box .bg {margin-left:-25px;} .ma_lab .lab_box .img_box .round {top:50%; left:50%; margin:-70px 0 0 -65px;} .ma_lab .lab_box .img_box .round .line img {max-height:140px; } .ma_lab .lab_box .img_box .round .po1 .in {top:-7px; margin-left:-40px;} .ma_lab .lab_box .img_box .round .po2 .in {top:60px; right:-10px;} .ma_lab .lab_box .img_box .round .po3 .in {right:-9px; top:93px;} .ma_lab .lab_box .img_box .round .po5 .in {left:-8px; top:100px;} .ma_lab .lab_box .img_box .round .po6 .in {left:-4px; top:50px;} .ma_lab .lab_box+ .lab_box {margin-top:20px;} .ma_lab .lab_box.if_r .txt_box {padding-top:0 !important;} .ma_lab .lab_box.if_r .img_box .bg {margin-left:100px;} .ma_news {margin-top:30px;} .ma_news .notice_box .tit_box {margin-bottom:15px;} .ma_news .list_box dt {padding:10px 0;} .ma_news .list_box dd {width:80px;} .ma_news .list_box .name {margin-top:3px;} .ma_news .posting .new {margin-top:3px; width:15px; height:15px; padding-left:5px;} .ma_news .posting {padding-left:15px;} .ma_news .posting:before {left:7px; width:2px; height:2px; margin-top:0;} .ma_news .btn_box .btn {padding:15px 10px;} .ma_news .btn_box .btn .txt {line-height:16px; padding-left:8px;} .ma_news .btn_box .btn .ic img {height:17px;} .ma_news .btn_box .btn:before {background-size:6px; width:35px;} .ma_news .img_box .rolling_nate {padding-right:100px; height:60px;} .ma_news .img_box .prevnext_box {width:100px;} .ma_news .img_box .tt_box .table {height:60px;} .ma_news .img_box .tt_box .title .tt {padding:0 10px;} .ma_news .img_box .prevnext_box:before {height:16px; margin-top:-8px;} .ma_news .img_box .prevnext .icon {margin:-8px 0 0 -4px;} .ma_news .img_box .prevnext img {width:8px;} .ma_win {margin-top:30px;} .ma_win .top {padding:60px 0 40px;} .ma_win .top .result {margin-top:30px;} .ma_win .top .result .ul {margin:0 -30px;} .ma_win .top .result .li {padding:0 30px !important;} .ma_win .top .result .li+ .li:before {width:36px; height:36px; left:-18px; top:15px;} .ma_win .bn_box {padding:30px 0 50px;} .ma_win .bn_box dd {margin-top:10px;} .ma_win .prevnext .icon img {width:13px;} .ma_win .prevnext.prev {left:-15px;} .ma_win .prevnext.next {right:-15px;} .footer {margin-top:60px;} .footer .menu .btn {padding:10px;} .footer .info_box .txt {padding:0 3px !important;} } /* **************************************** * â—† 550px ~ * **************************************** */ @media screen and (max-width:550px) { .wrap:before {content:"550"; } .header .nav .ctg1 {padding:0 20px;} .header .nav .ctg2 {padding:10px 30px 10px 20px;} } /* **************************************** * â—† 500px ~ * **************************************** */ @media screen and (max-width:500px) { .wrap:before {content:"500"; } .layout_fix {padding:0 15px;} .header .table {padding:0 15px} .header .nav .ctg1 {padding:0 17px;} .header .nav .ctg2 {padding:10px 30px 10px 17px;} .header .nav .if_open_nav dd {padding:15px 0;} .slide {max-width:100%} .ma_business .li {padding:0; background:none !important;} .ma_business dl {padding:40px 30px;} .ma_business .li.if_elec dl {background:#dc7a39 url('../images/wepco_m/ma_busi_bg1.jpg') right top no-repeat; background-size:cover;} .ma_business .li.if_energy dl {background:#6874a6 url('../images/wepco_m/ma_busi_bg2.jpg') right bottom no-repeat; background-size:cover;} .ma_business .btn_box {margin-top:0; overflow:hidden;} .ma_business .btn_box .table {max-width:100%; padding:0; overflow:hidden; margin-top:-1px; position:relative; left:0 !important; opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} .ma_business .btn_box .table:before {content:""; position:absolute; left:50%; top:0; width:1px; height:100%; background:rgba(255,255,255,0.2);} .ma_business .btn_box ul {display:table; width:100%; table-layout:fixed;} .ma_business .btn_box li {display:table-cell; vertical-align:middle; border-top:1px solid rgba(255,255,255,0.2);} .ma_business .btn_box .btn {padding:10px; padding-right:30px} .ma_business .btn_box .ic {right:10px;} .ma_business .li.if_elec .btn_box .table {background:#c55013;} .ma_business .li.if_energy .btn_box .table {background:#2f3d79;} .ma_business.if_scroll .btn_box .table {-webkit-animation: mbt2 1s forwards; animation: mbt2 1s forwards; animation-delay:1s; -webkit-animation-delay:1s;} .ma_lab .lab_box+ .lab_box {margin-top:15px;} .ma_lab .lab_box.if_d .img_box .bg img {max-width:450px;} .ma_lab .lab_box .img_box .round {margin:0; top:80px; left:150px;} .ma_lab .lab_box.if_r .img_box .bg {margin-left:70px;} .ma_lab .lab_box.if_r .img_box img {height:370px;} .ma_lab .lab_box .img_box .map .point {width:140px; height:140px; margin-bottom:-65px;} .ma_lab .lab_box .img_box .map.kr {right: 168px; bottom: 140px;} .ma_lab .lab_box .img_box .map.ma {right: 300px; bottom: 95px;} .ma_lab .lab_box .img_box .map.vi {right: 240px; bottom:110px;} .ma_lab .lab_box .img_box .map.mi {right: 160px; bottom:110px;} .ma_lab .lab_box .img_box .map.fi {right:165px; bottom:75px;} .ma_lab .lab_box .img_box .map .tt {margin-top:5px;} .ma_news .news_box li {width:300px;} .ma_news .news_box .rolling_icon {margin-top:20px;} .ma_news .img_box .rolling_nate {height:0px; padding-right:0;} .ma_news .img_box .tt_box .table {height:40px;} .ma_news .img_box .tt_box .title .tt h1 {overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; display: -webkit-box;} .ma_news .img_box .rolling_nate {position:static;} .ma_news .img_box .tt_box {position:absolute; left:0; bottom:0; width:100%; height:40px; z-index:1;} .ma_news .img_box .prevnext_box {position:static;} .ma_news .img_box .prevnext {position:absolute; top:50%; width:35px; height:50px; margin-top:-25px; z-index:1;} .ma_news .img_box .prevnext a {padding:0;} .ma_news .img_box .prevnext.prev {left:-15px;} .ma_news .img_box .prevnext.prev .icon {margin-left:-6px;} .ma_news .img_box .prevnext.next {right:-15px;} .ma_news .img_box .prevnext.next .icon {margin-left:-2px;} .ma_news .img_box .prevnext_box:before {display:none;} .ma_win .top .left dl+ dl {padding-left:40px;} .ma_win .top .left dl+ dl:before {left:20px; width:3px; height:3px; top:18px;} .ma_win .top .result .ul {margin:0 -20px;} .ma_win .top .result .li {padding:0 20px !important;} .ma_win .top .result .li+ .li:before {width:26px; height:26px; left:-13px; top:12px;} .ma_win .bn_box dd {max-width:90px;} .ma_win .bn_box .in_box {padding:0 35px;} .ma_win .bn_box .bg img {width:30px;} .ma_win .prevnext .icon img {width:11px;} } /* **************************************** * â—† 450px ~ * **************************************** */ @media screen and (max-width:450px) { .wrap:before {content:"450"; } .header .nav .ctg1 {padding:0 13px;} .header .nav .ctg2 {padding:10px 30px 10px 13px;} .ma_lab .lab_box .img_box .map.kr {right: 122px; bottom: 114px;} .ma_lab .lab_box .img_box .map.ma {right: 235px; bottom: 70px;} .ma_lab .lab_box .img_box .map.vi {right: 192px; bottom:90px;} .ma_lab .lab_box .img_box .map.mi {right: 120px; bottom:85px;} .ma_lab .lab_box .img_box .map.fi {right:125px; bottom:60px;} .ma_lab .lab_box.if_d .img_box .bg {margin-left:-50px;} .ma_lab .lab_box.if_r .img_box .bg {margin-left:60px;} .ma_lab .lab_box.if_r .img_box img {height:300px;} .ma_win .bn_box li {width:100%;} .ma_win .bn_box dd {max-width:85px; } .ma_win .bn_box .in_box {padding:0 25px;} .ma_win .bn_box .bg img {width:25px;} } /* **************************************** * â—† 400px ~ * **************************************** */ @media screen and (max-width:400px) { .wrap:before {content:"400"; } .header .nav {margin:0 -12px;} .header .nav .ctg1 {padding:0 12px;} .header .nav .ctg2 {padding:10px 30px 10px 12px;} .ma_visual .active .visual_txt .title {margin-bottom:10px;} .ma_visual .active .visual_txt .btn {height:30px; margin-top:15px;} .ma_visual .active .visual_txt .btn .txt {line-height:30px;} .ma_lab .lab_box.if_d .img_box .bg {margin-left:-70px; overflow:visible;} .ma_news .news_box li {width:270px;} .ma_win .top .result .li {padding:0 15px !important;} .ma_win .top .result .li+ .li:before {width:20px; height:20px; left:-10px; top:5px;} } /* **************************************** * â—† 360px ~ * **************************************** */ @media screen and (max-width:360px) { .wrap:before {content:"360"; } .header .nav {margin:0 -5px;} .header .nav .ctg1 {padding:0 5px;} .header .nav .ctg2 {padding:8px 15px 8px 5px;} .ma_business .btn_box .table:before {display:none;} .ma_business .btn_box li {display:block;} .ma_lab .lab_box.if_r .img_box .bg {margin-left:80px;} .ma_news .btn_box {margin:10px -5px 0;} .ma_news .btn_box ul {border-spacing:5px 0;} } /* **************************************** * â—† 높이 700px ~ * **************************************** */ @media (min-width: 1024px) and (max-height: 800px) { .ma_visual .visual_txt .inner {padding-top:60px;} .ma_visual .visual_txt .text {padding-bottom:5px;} .ma_visual .visual_txt .sub {margin-top:10px;} .ma_visual .visual_txt .btn {margin-top:20px;} } @charset 'utf-8'; /* * Directory : /css/ * File : responsive_common.css * SUMMARY : 게시판 (공통) * DESCRIPTION : 반응형 * * *********************************************** * * SUMMARY * 00) 기본 * 01) Max ~ 900px (Mouse Over) * 02) 1400px * 03) 1250px * 04) 1024px * 05) 1150px * 06) 1100px * 07) 1030px * 08) 1000px * 09) 1000px ~ 800px * 10) 950px * 11) 900px : Show mobile images * 12) 850px * 13) 800px * 14) 770px * 15) 750px * 16) 700px * 17) 650px * 18) 600px * 19) 550px * 20) 500px * 21) 450px * 22) 400px * 23) 370px * 24) 360px */ /* **************************************** * â—† 기본 * **************************************** */ /* 컬러 변경 */ .rb_board label.r_design input:checked+ .tx .icon {background:#0042ff; border-color:#0042ff;} /* â—† 문의폼 */ .rb_board {position:relative;} .rb_board * {font-size:15px;} .rb_board .rb_form {border-top:1px solid #333; } .rb_board .rb_form .tr {display:table; width:100%; box-sizing:border-box; table-layout:fixed;} .rb_board .rb_form .td {display:table-cell; vertical-align:middle; box-sizing:border-box;} .rb_board .rb_form .inner {display:table; width:100%; box-sizing:border-box; table-layout:fixed; } .rb_board .rb_form .inner dt, .rb_board .rb_form .inner dd {display:table-cell; padding:12px 15px; vertical-align:middle; box-sizing:border-box; border-bottom:1px solid #ddd; } .rb_board .rb_form .inner dt {text-align:left; background:#f8f8f8; width:170px; padding-right:5px;} .rb_board .rb_form .inner dd {} .rb_board .rb_form .inner .email {padding-right:50%} .rb_board .rb_form .inner .email .input_box {padding-right:15px; box-sizing:border-box;} .rb_board .rb_form .inner .email .tooltip {right:15px;} .rb_board .rb_form .opt {position:relative; font-weight:400; padding:0 0 0 15px; box-sizing:border-box; word-wrap:break-word; word-break:break-all; white-space:normal; line-height:1.2;} .rb_board .rb_form .opt:after {content:""; width:8px; height:13px; position:absolute; left:0; top:2px; color:#e60012; white-space:nowrap;} .rb_board .rb_form .opt:after {background:transparent url('../images/rb_img/form_ess_off.png') left center no-repeat; font-size:13px; padding-left:10px;} .rb_board .rb_form .ess .opt:after {background:transparent url('../images/rb_img/form_ess.png') left center no-repeat; } .rb_board .rb_form .ess .table {display:table; width:100%; table-layout:fixed;} .rb_board .rb_form .ess .table .input_box, .rb_board .rb_form .ess .table .label_box {display:table-cell; vertical-align:middle; float:none; width:auto;} .rb_board .rb_form .ess .table .label_box {box-sizing:border-box; width:130px; padding-left:10px; box-sizing:border-box;} .rb_board .rb_form .if_tip .inner dd {height:84px;} .rb_board .rb_form+ .rb_group_tit {border-bottom:0; margin-top:30px;} .rb_board .rb_form .inner .if_only {padding-right:51%;} /* 이메일 */ .rb_board .box_email {display:inline-block;} .rb_board .box_email ul {display:table; box-sizing:border-box; table-layout:fixed;} .rb_board .box_email li {display:table-cell; vertical-align:middle; position:relative; box-sizing:border-box; width:284px;} .rb_board .box_email li+ li {padding-left:30px;} .rb_board .box_email .dash {width:30px; text-align:center; position:absolute; left:0; top:0; line-height:35px;} .rb_board .box_email .other {padding-left:10px;} /* 인풋 */ .rb_board input::placeholder {color:#ccc !important} .rb_board input::-webkit-input-placeholder {color:#ccc !important} .rb_board input:-ms-input-placeholder {color:#ccc !important} .rb_board input:-moz-placeholder {color:#ccc !important} .rb_board textarea::placeholder {color:#ccc !important} .rb_board textarea:-ms-input-placeholder {color:#ccc !important} .rb_board textarea:-moz-placeholder {color:#ccc !important} .rb_board .rb_form input.design {height:35px; border:1px solid #ddd; width:100%; box-sizing:border-box; padding:0 10px; background:#fff; line-height:36px; line-height:32px\0; color:#333;} .rb_board .rb_form input.design:focus {border-color:#999; color:#333 !important;} .rb_board .rb_form .input_box {position:relative; width:100%; /* float:left; */ margin-left:0;} .rb_board .rb_form .input_box.mail {margin-left:-5px;} .rb_board .rb_form .input_box .tooltip {font-size:0.85em; background:#ea5413; color:#fff; height:25px; line-height:25px; padding:0 10px; opacity: 0; filter: alpha(opacity=0); -ms-filter:alpha(opacity=0); overflow:hidden;} .rb_board .rb_form .input_box .tooltip {transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .rb_board .rb_form .input_box .tooltip {position:absolute; right:0; top:0; height:0px; z-index:3;} .rb_board .rb_form .input_box.readonly input {background:#f1f4fb; Cursor:no-drop; border:1px solid #eee !important; padding:0 10px !important;} .rb_board .rb_form .input_box.readonly .tooltip {display:none !important;} .rb_board .rb_form .ess input.design:focus+ .tooltip {opacity: 1; filter: alpha(opacity=100); -ms-filter:alpha(opacity=100); top:-23px; height:25px; top:-25px;} .rb_board .rb_form textarea.design {width:100%; box-sizing:border-box; padding:10px; line-height:1.5; background:#fff; float:left; border:1px solid #ddd; color:#333; height:170px; box-shadow:none; } .rb_board .rb_form textarea.design {border-radius:0px; } .rb_board .rb_form textarea.design:focus {border-color:#999; color:#000 !important;} .rb_board .rb_form .input_box .table {margin:0 -5px} .rb_board .rb_form .input_box .table ul {display:table; width:100%; table-layout:fixed; border-collapse:separate; border-spacing:5px 0;} .rb_board .rb_form .input_box .table li {list-style:none; display:table-cell; vertical-align:middle; position:relative;} .rb_board .rb_form .input_box.if_sel .table .r_design {margin-left:10px;} /* 셀렉트 */ .rb_select {overflow:hidden; position:relative; background:#fff; height:40px; width:100%;} .rb_select select {box-sizing:border-box; border:1px solid #ddd; height:100%; width:100%; padding-left:10px; color:#666; position:absolute; left:0; top:0; z-index:2; background:none !important; } .rb_select select {width:100%; -webkit-appearance: none; appearance: none; -moz-appearance: none; -webkit-user-select: none; padding-right:40px; border-radius:0; -webkit-border-radius:0 !important;} .rb_select select::-ms-expand {display:none;} .rb_select .icons {height:100%; position:absolute; right:0; top:0; z-index:1; color:#666; text-align:center; width:40px; line-height:40px; font-weight:600;} .rb_select .icons:before {position:absolute; left:0; top:0; width:40px; line-height:40px; font-size:11px; margin-left:0px; color:#ccc;} .rb_select .icons:before {transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .rb_select select:focus+ .icons:before {color:#333; } .rb_select select:focus+ .icons:before {transform: rotate(180deg); -webkit-transform: rotate(180deg); line-height:33px !important;} .rb_select select:focus {border:1px solid #999; color:#333;} .rb_select {transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .rb_board .rb_form .rb_select {height:35px;} .rb_board .rb_form .rb_select select {height:35px; border-color:#ddd; line-height:31px;} .rb_board .rb_form .rb_select .icons {width:35px;} .rb_board .rb_form .rb_select .icons:before {width:35px; line-height:37px;} /* 도움말 */ .rb_board .rb_form .tip_txt {color:#999; letter-spacing:0px; position:relative; clear:both; font-size:0.85em; padding-left:8px; margin-top:5px; line-height:1.2;} .rb_board .rb_form .tip_txt+ .tip_txt {margin-top:6px;} .rb_board .rb_form .tip_txt:before {content:""; position:absolute; left:0; top:7px; width:2px; height:2px; background:#999; } .rb_board .rb_form .tip_txt .icons {position:absolute; left:0; top:11px; } .rb_board .rb_form .tip_txt .icons:before {margin-left:0; color:#999;} /* 파일첨부 */ .rb_board .input_file_box {background:#fff; border:1px solid #ddd; position:relative; float:left; height:35px; width:100%;} .rb_board .input_file_box:first-child {margin-top:0} .rb_board .input_file_box .fakeFileTxt { float:left; width:100%; color:#999; margin-top:3px; text-indent:10px; border:0; } .rb_board .input_file_box .fileDiv { width:100px; height:100%; } .rb_board .input_file_box .buttonImg {background:#aaa; width:90px; height:30px; position: absolute; top:-1px; right:-1px; color:#fff; border:0; padding:5px 0 8px; font-size:0.9em; padding-top:6px\0; box-sizing:border-box;} .rb_board .input_file_box:hover .buttonImg {background:#999} .rb_board .input_file_box:hover {border:1px solid #ddd;} .rb_board .input_file_box .realFile {position:absolute; right:0px; top:0px; width:100%; font-size:200px; height:100%; cursor:pointer !important; } .rb_board .input_file_box .realFile {opacity:0; filter: alpha(opacity=0); -ms-filter: "alpha(opacity=0)"; -khtml-opacity: 0; -moz-opacity: 0;} /* 사진첨부 */ .rb_board .form_file {overflow:hidden;} .rb_board .form_file .input_file_box {height:30px; border:1px solid #ddd; box-sizing:border-box;} /* 첨부파일-추가삭제 */ .rb_board .duplicate.if_add { margin-top:-8px; margin-bottom:6px;} .rb_board .duplicate.if_add .form_file {padding-right:65px; position:relative; margin-top:8px} .rb_board .duplicate.if_add .input_file_box {float:left; box-sizing:border-box;} .rb_board .duplicate.if_add .add_btn_box {position:absolute; right:0; top:0;} .rb_board .duplicate.if_add .add_btn_box .c_btn {width:60px; margin-left:0} /* 등록된 파일 */ .rb_board .duplicate_file {overflow:hidden; position:relative; padding-bottom:8px; } .rb_board .duplicate_file .table {display:table; width:100%; table-layout:fixed; border-top:1px solid #ddd; border-bottom:1px solid #ddd;} .rb_board .duplicate_file .title {display:table-cell; vertical-align:middle; background:#f5f5f5; width:110px; text-align:center; color:#666;} .rb_board .duplicate_file ul {display:table-cell;} .rb_board .duplicate_file li {list-style:none; overflow:hidden; position:relative; border-top:1px solid #ddd; padding-left:10px; height:30px; box-sizing:border-box;} .rb_board .duplicate_file li:first-child {border-top:0;} .rb_board .duplicate_file .txt {float:left; line-height:29px; line-height:28px\0; color:#999;} .rb_board .duplicate_file .del_btn {float:right; line-height:29px; line-height:28px\0; padding:0 10px} .rb_board .duplicate_file .del_btn input {margin:9px 3px 0 0; float:left;} .rb_board .duplicate_file .txt:hover {text-decoration:underline;} .rb_board textarea.design {width:100%; box-sizing:border-box; padding:10px; line-height:1.5; background:#fff; float:left; border:1px solid #ddd; color:#666; height:170px; overflow-y:auto;} .rb_board textarea.design:focus {border-color:#666; color:#000 !important;} /* 개인정보처리방침 안내 */ .rb_agree {margin-top:30px; } .rb_agree .agree_check {text-align:center;} .rb_agree .form .textarea_design {height:120px;} /* 약관동의 */ .rb_agree .agree_form {overflow:hidden; } .rb_agree .agree_form li {list-style:none;} .rb_agree .agree_form .ul {margin-top:-1px;} .rb_agree .agree_form .li { list-style:none;} .rb_agree .agree_form .li+ .li {margin-top:20px;} .rb_agree .agree_form .text_box {overflow:hidden; border:1px solid #ddd; box-sizing:border-box; border-top:0;} .rb_agree .agree_form .agree {overflow:hidden; text-align:center; background:#fff; border-bottom:1px solid #ddd; padding:12px 20px;} .rb_agree .agree_form label.r_design {float:none; margin-right:0;} .rb_agree .agree_form .agree_tit {color:#333; border-bottom:1px solid #ccc; padding:10px 25px;} .rb_agree .agree_form textarea.design {height:130px; padding:10px 20px; line-height:1.4; background:#fff; float:left; color:#999 !important; border:0 !important; font-size:0.9em; word-wrap:break-word; word-break:keep-all;} /* 개인정보 수집항목 */ .rb_board .agree_add_info {overflow:hidden; background:#fff; margin-top:10px;} .rb_board .agree_add_info .table {display:table; width:100%; table-layout:fixed; box-sizing:border-box;} .rb_board .agree_add_info .tr {display:table-row;} .rb_board .agree_add_info .td {display:table-cell; vertical-align:middle; text-align:center; word-wrap:break-word; word-break:keep-all; box-sizing:border-box; border:1px solid #ddd; } .rb_board .agree_add_info .td {padding:9px 10px 12px; line-height:1.2; word-wrap:break-word; word-break:keep-all;} .rb_board .agree_add_info .thead .td {background:#f5f5f5; color:#333;} .rb_board .agree_add_info dt {background:#f5f5f5; color:#333; padding:9px 10px 12px; font-weight:400; letter-spacing:-0.5px; display:none; border-bottom:1px solid #ddd; word-wrap:break-word; word-break:keep-all;} .rb_board .agree_add_info dd {word-wrap:break-word; word-break:keep-all;} .rb_board .agree_add_info dd ul {display:table; width:100%; table-layout:fixed;} .rb_board .agree_add_info dd li {display:table-cell; vertical-align:middle; height:40px; padding:0 10px; line-height:1.2; } .rb_board .agree_add_info dd li+ li {} /* 단락타이틀 */ .rb_group_tit {border-bottom:1px solid #333; color:#333; font-weight:600; overflow:hidden; padding-bottom:10px; position:relative;} .rb_group_tit .tit {color:#333; font-size:1.21em; font-weight:600; float:left; } .rb_group_tit .sub_tt {letter-spacing:-1px; color:#ff0000; line-height:15px; font-weight:400; margin:5px 0 0 5px; float:left;} .rb_group_tit .sub_txt {letter-spacing:-1px; color:#aaa; line-height:15px; font-weight:400; margin-top:7px; float:right; padding-left:13px; position:relative;} .rb_group_tit .sub_txt:before {content:""; position:absolute; left:0; top:5px; width:8px; height:6px; background:transparent url('../images/c_img/join_check.gif') right center no-repeat; } .rb_group_tit .right_txt {float:right; margin-top:5px;} .rb_group_tit .right_txt .txt {position:relative; font-size:0.95em; color:#999; font-weight:400;} .rb_group_tit .right_txt .ess {display:inline; background:transparent url('../images/rb_img/form_ess.png') left center no-repeat; padding-left:12px;} .rb_group_tit .right_txt .icons {position:absolute; left:0; top:4px; top:6px\0;} .rb_group_tit .right_txt .icons:before {color:#e60012; font-size:0.45em; margin:0} /* 라벨 */ .rb_board label.r_design {float:left; position:relative; text-align:left; height:35px; box-sizing:border-box; margin-right:10px;} .rb_board label.r_design input {position:absolute; left:0; top:50%; margin-top:-5px; z-index:5; color:#666;} .rb_board label.r_design input {-webkit-appearance:none; appearance:none; opacity: 0; filter: alpha(opacity=0); -ms-filter:alpha(opacity=0);} .rb_board label.r_design .tx {color:#666; height:35px; line-height:36px; line-height:34px\0;; padding:0 10px 0 25px; display:block; box-sizing:border-box; white-space:nowrap} .rb_board label.r_design .icon {width:20px; height:20px; position:absolute; left:0; top:50%; box-sizing:border-box; margin-top:-10px; border:1px solid #ccc; box-sizing:border-box; text-align:center;} .rb_board label.r_design .icon .icons {} .rb_board label.r_design .icon .icons:before {margin-left:0; color:#ccc; font-size:10px; width:100%; text-align:center; line-height:18px; font-weight:400;} .rb_board label.r_design input[type=radio]+ .tx .icon {border-radius:100px; overflow:hidden;} .rb_board label.r_design input[type=radio]+ .tx .icons:before {display:none;} .rb_board label.r_design input[type=radio]+ .tx .icons:after {content:""; position:absolute; left:5px; top:5px; width:8px; height:8px; background:#ccc; margin:0; border:1px solid #ccc; border-radius:100px; overflow:hidden;} .rb_board label.r_design input[type=radio]+ .tx .icons:after {box-sizing:border-box;} .rb_board label.r_design input:checked+ .tx {color:#333;} .rb_board label.r_design input:checked+ .tx .icons:before {color:#fff;} .rb_board label.r_design input:checked+ .tx .icons:after {background:#fff; border-color:#fff;} .rb_board .label_list {} .rb_board .label_list ul {overflow:hidden;} .rb_board .label_list li {list-style:none; float:left;} /* â—† 게시판 목록 */ /* 내용없을때 */ .rb_no_posting {text-align:center; color:#a1a1ae; padding-top:70px; margin:50px 0 30px; position:relative;} .rb_no_posting {background:transparent url('../images/rb_img/board_no.png') center top no-repeat; } .rb_no_posting .icon {position:absolute; left:0; top:0; width:100%; text-align:center;} .rb_no_posting .icons {float:none; margin-left:0; height:auto; text-align:center;} .rb_no_posting .icons:before {font-size:50px; color:#ddd; margin-left:0; text-align:center;} /* 게시판상단 */ .rb_top {margin-bottom:15px; position:relative;} .rb_top:after {content:""; display:table; width:100%;} .rb_top li {list-style:none;} .rb_top .total {float:left; color:#999; line-height:1; margin-top:15px; font-size:0.95em;} .rb_top .total strong {font-weight:400; color:#333; font-size:0.95em;} .rb_top .total em {margin-left:5px; font-size:0.95em; display:none;} /* 게시판검색 */ .rb_top .search {float:right; overflow:hidden; box-sizing:border-box;} .rb_top .search li {float:left; padding-left:10px;} .rb_top .search .select {width:150px;} .rb_top .search .select select {font-size:0.9em !important;} .rb_top .search .select .icons {color:#000;} .rb_top .search .select .icons:before {font-size:11px;} .rb_top .search .this_write {width:100px;} .rb_top .search .this_write .c_btn {width:100%; padding:0px; margin:0;} .rb_top .search_form {position:relative; overflow:hidden; box-sizing:border-box;} .rb_top .search_form form {display:block; width:100%; box-sizing:border-box;} .rb_top .search_form .input_search {border:1px solid #ddd; height:35px; line-height:34px; box-sizing:border-box; padding:0 40px 0 10px; width:250px; background:#fff; } .rb_top .search_form .input_search:focus {border-color:#999;} .rb_top .search_form .btn_box {position:absolute; right:0; top:0; width:50px; height:35px; color:#fff; text-align:center; line-height:35px;} .rb_top .search_form .btn_box .btn_search {background:transparent url('../images/rb_img/icon_search.png') center center no-repeat; float:left;} .rb_top .search_form .btn_box .btn_search {color:#fff; height:35px; line-height:35px; width:100%; font-size:0px;} .rb_top .search_form .btn_viewall {position:absolute; right:45px; top:1px; padding:10px; z-index:2;} .rb_top .search_form .btn_viewall img {width:17px; float:left;} .rb_top .search_form .search_btn {display:none; width:45px; height:35px; background:transparent url('../images/rb_img/icon_search.png') center center no-repeat; background-size:20px !important;} .rb_top .search_form .search_btn {opacity:.5;} /* 검색-바탕형 */ /* .rb_top .search_form .input_search {border:1px solid #f3f3f3; background:#f3f3f3;} .rb_top .search_form .input_search:focus {border-color:#f0f0f0; background:#f0f0f0;} */ /* â—† 게시판 목록 (기본) */ .rb_list {overflow:hidden; border-top:1px solid #333;} .rb_list li {list-style:none;} .rb_list .list {display:table; width:100%; box-sizing:border-box; table-layout:fixed;} .rb_list .list ul {display:table-row; } .rb_list .list li {display:table-cell; vertical-align:middle; border-bottom:1px solid #ddd; text-align:center; box-sizing:border-box; line-height:1.25; white-space:nowrap; position:relative;} .rb_list .thead li {background:#f8f8f8; color:#333; padding:15px 10px; font-weight:400; } .rb_list .tbody li {padding:0 10px; } .rb_list .t_number {width:80px;} .rb_list .t_subject {width:120px;} .rb_list .t_title {} .rb_list .t_file {width:90px; } .rb_list .t_date {width:110px;} .rb_list .t_date .icons:before {font-size:13px;} .rb_list .t_writer {width:130px;} .rb_list .t_hit {width:85px;} .rb_list .t_state {width:100px;} .rb_list .tbody .t_subject {color:#999;} .rb_list .tbody .t_number {color:#999; letter-spacing:0px; font-size:0.95em;} .rb_list .tbody .t_number .icon {display:none; background:transparent url('../images/rb_img/board_notice.png') center center no-repeat; height:30px;} .rb_list .tbody .t_title {text-align:left;} .rb_list .tbody .t_title strong {font-weight:600; margin-right:10px; font-size:1.21em; color:#e5c466;} .rb_list .tbody .t_file {font-size:0px;} .rb_list .tbody .t_date {color:#999; letter-spacing:0px; font-size:0.95em;} .rb_list .tbody .t_writer {color:#999; font-size:0.95em;} .rb_list .tbody .t_hit {color:#999; letter-spacing:0px; font-size:0.95em;} .rb_list .tbody .t_state {font-size:0px; float:none;} .rb_list .tbody .t_state .c_tag {float:none;} .rb_list .tbody .t_state .c_btn {float:none; padding:0px; width:100%;} /* 게시물 하나 */ .rb_list .tit_wrap {overflow:hidden;} .rb_list .posting {overflow:hidden; position:relative; float:left; box-sizing:border-box; height:50px; line-height:50px; max-width:100%; } .rb_list .posting .title {overflow:hidden; text-overflow:ellipsis; white-space: nowrap; word-wrap: normal !important; display:block; letter-spacing:-0.5px;} .rb_list .posting .right {float:right; margin-top:17px;} .rb_list .posting .right .icons {height:16px; float:left; margin-left:5px; display:block !important;} .rb_list .posting .icons.new {background:transparent url('../images/rb_img/board_new.png') left top no-repeat; width:16px;} .rb_list .posting .icons.secret {background:transparent url('../images/rb_img/board_secret.png') left top no-repeat; width:13px;} .rb_list .posting .icons.photo {background:transparent url('../images/rb_img/board_photo.png') left top no-repeat; width:18px;} .rb_list .posting .icons.file {background:transparent url('../images/rb_img/board_file1.gif') left center no-repeat; width:16px;} .rb_list .btn_file {position:relative; overflow:hidden; width:40px; display:inline-block;} .rb_list .btn_file:before {content:""; width:100%; height:100%; position:absolute; left:0; top:0; z-index:1;} .rb_list .btn_file .btn {background:transparent url('../images/rb_img/board_file.png') center center no-repeat; height:25px; display:block;} .rb_list .btn_file .btn {opacity: 0.3; filter: alpha(opacity=30); -ms-filter:alpha(opacity=30);} .rb_list .btn_file .on {background:transparent url('../images/rb_img/board_file_on.png') center center no-repeat; display:block; height:25px; opacity: 0; filter: alpha(opacity=0); -ms-filter:alpha(opacity=0);} .rb_list .btn_file .on {transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .rb_list .btn_file.if_upload:before {display:none; } .rb_list .btn_file.if_upload .btn {opacity: 1; filter: alpha(opacity=100); -ms-filter:alpha(opacity=100);} /* 공지사항체크시 */ .rb_list .if_notice {} .rb_list .if_notice .t_number .icon {display:block;} .rb_list .if_notice .posting .title {color:#000;} /* 갤러리 게시판 */ .rb_photo {overflow:hidden; border-top:1px solid #333; padding-top:15px;} .rb_photo li {list-style:none; float:left; width:20%;} .rb_photo .photo_list {margin-left:-20px; margin-top:-30px;} .rb_photo .photo_list ul {overflow:hidden; width:100%;} .rb_photo .photo_list li {} .rb_photo .photo_list li:nth-of-type(5n)+ li {clear:both} .rb_photo .photo_box {margin-left:20px; margin-top:30px;} .rb_photo .photo_box .thumb {position:relative; overflow:hidden; font-size:0px; background:#ebecef url('../images/c_img/board_none.png') center center no-repeat;} .rb_photo .photo_box .thumb img {width:100%; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out;} .rb_photo .photo_box .thumb:before {content:""; position:absolute; left:0; top:0; bottom:0; right:0; border:1px solid rgba(0,0,0,0.1); box-sizing:border-box; z-index:2;} .rb_photo .photo_box .img_fake {overflow:hidden;} .rb_photo .photo_box .img_real {position:absolute; left:0; top:0; width:100%; height:100%; z-index:1} .rb_photo .photo_box .tit {position:relative; padding-top:10px;} .rb_photo .photo_box .tit .ctg {color:#999; padding-bottom:3px; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; display: -webkit-box;} .rb_photo .photo_box .tit .tx {overflow:hidden; text-overflow:ellipsis; white-space: nowrap; word-wrap: normal !important; display:block; line-height:1.25; color:#666;} .rb_photo .if_cf .photo_box .thumb_box {padding:12px; background-color:#fff; border:1px solid #eaeaea; box-sizing:border-box;} .rb_photo .gallery_box {position:relative; margin-left:40px; margin-top:30px} .rb_photo .gallery_box .gallery {overflow:hidden; position:relative; border:0; box-sizing:border-box; position:relative;} .rb_photo .gallery_box .in_box {position:relative; overflow:hidden;} .rb_photo .gallery_box .in_box:before {content:""; position:absolute; left:50%; top:0; width:1px; height:100%; background:#fff; z-index:9;} .rb_photo .gallery_box .in_box li {float:left; width:50%; list-style:none; position:relative;} .rb_photo .gallery_box .thumb_box {position:relative; width:100%;} .rb_photo .gallery_box .thumb_box .thumb {overflow:hidden; position:relative; background:#f8f8f8 url('../images/skin/none_photo.png') center center no-repeat; width:100%;} .rb_photo .gallery_box .thumb_box .thumb img {width:100%; float:left;} .rb_photo .gallery_box .thumb_box .thumb .real_img {position:absolute; left:0; top:0; width:100%; height:100%;} .rb_photo .gallery_box .thumb_box .thumb .fake_img {overflow:hidden;} .rb_photo .gallery_box .thumb_box .tag { font-family:'Open Sans'; color:#fff; font-weight:600; letter-spacing:0px; height:30px; line-height:30px; width:100px; text-align:center;} .rb_photo .gallery_box .thumb_box .tag {position:absolute; bottom:0; z-index:8} .rb_photo .gallery_box .thumb_box .tag.before {right:0; background:#ccc;} .rb_photo .gallery_box .thumb_box .tag.after {right:0; background:#ffc336;} .rb_photo .gallery_box .tit {position:relative; padding-top:10px;} .rb_photo .gallery_box .tit .ctg {color:#999; display:inline} .rb_photo .gallery_box .tit .tx {overflow:hidden; text-overflow:ellipsis; white-space: nowrap; word-wrap: normal !important; display:block; line-height:1.25; color:#666; padding-right:20px;} /* 인증서 게시판 */ .rb_paper {overflow:hidden; border-top:1px solid #333; padding-top:25px;} .rb_paper li {list-style:none; float:left; width:20%;} .rb_paper .photo_list {margin-left:-20px; margin-top:-30px;} .rb_paper .photo_list ul {overflow:hidden; width:100%;} .rb_paper .photo_list li {} .rb_paper .photo_list li:nth-of-type(5n)+ li {clear:both} .rb_paper .photo_box {margin-left:20px; margin-top:30px;} .rb_paper .photo_box .thumb_box {padding:12px; background-color:#fff; border:1px solid #eaeaea; box-sizing:border-box;} .rb_paper .photo_box .thumb {position:relative; overflow:hidden; font-size:0px; background:#ebecef url('../images/c_img/board_none.png') center center no-repeat;} .rb_paper .photo_box .thumb img {width:100%; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out;} .rb_paper .photo_box .img_fake {overflow:hidden;} .rb_paper .photo_box .img_real {position:absolute; left:0; top:0; width:100%; height:100%; z-index:1} .rb_paper .photo_box .tit {position:relative;} .rb_paper .photo_box .tit .tx {overflow:hidden; text-overflow:ellipsis; white-space: nowrap; word-wrap: normal !important; display:block; padding-top:15px; line-height:1.25;} /* 뉴스형 게시판 */ .rb_list .news_list {margin:0px;} .rb_list .news_list li {width:100%; border-bottom:1px solid #ddd; padding:20px 0; margin:0px; box-sizing:border-box;} .rb_list .news_list .item_name {font-size:15px; font-weight:500;} .rb_list .news_list .tit_box {float:left; display:inline-block; max-width:100%; overflow:hidden; position:relative; padding-right:10px;} .rb_list .news_list .tit_box .tt {color:#333; position:relative; font-size:15px; font-weight:500;} .rb_list .news_list .tit_box .tt {overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; display: -webkit-box;} .rb_list .news_list .icon {float:right; display:inline-block; box-sizing:border-box; height:25px; margin-left:3px;} .rb_list .news_list .icon img {float:left; height:15px;} .rb_list .news_list .news_top {display:table; width:100%; box-sizing:border-box; table-layout:fixed;} .rb_list .news_list .news_top .news, .rb_list .news_list .news_top .tit_box {display:table-cell; vertical-align:top;} .rb_list .news_list .news_top .tit_box {padding-left:10px;} .rb_list .news_list .news {width:140px;} .rb_list .news_list .gallery_info {overflow:hidden; padding-top:50px;} .rb_list .news_list .gallery_info .date {float:left; color:#bbb;} .rb_list .news_list .gallery_info .view {float:left; margin-left:10px; padding-left:10px; position:relative; color:#bbb;} .rb_list .news_list .gallery_info .view:before {content:""; width:1px; height:12px; background:#ddd; position:absolute; left:0; top:50%; margin-top:-6px;} .rb_list .news_list .gallery_info .view em {display:inline-block;} .rb_list .news_list .ic_reply {color:#999; float:left; height:13px; line-height:15px; margin-left:10px;} .rb_list .news_list .ic_reply img {margin-right:3px; height:13px; float:left;} .rb_list .news_box {position:relative; } .rb_list .news_box dl {display:table; width:100%; table-layout:fixed;} .rb_list .news_box dt, .rb_list .news_box dd {display:table-cell; vertical-align:top;} .rb_list .news_box dt {width:300px;} .rb_list .news_box dd {padding-left:30px;} .rb_list .news_box .thumb {position:relative; overflow:hidden; font-size:0px; background:#f8f8f8 url('../images/c_img/board_none.png') center center no-repeat; } .rb_list .news_box .thumb:before {content:""; position:absolute; left:0; top:0; right:0; bottom:0; border:1px solid rgba(0,0,0,0.08); z-index:2;} .rb_list .news_box .thumb img {width:100%; float:left;} .rb_list .news_box .fake_img {overflow:hidden; width:100%;} .rb_list .news_box .real_img {position:absolute; left:0; top:0; width:100%; height:100%; z-index:1} .rb_list .news_box .real_img img {position:absolute; left:0; top:0;} .rb_list .news_box .posting_box {overflow:hidden; margin-top:10px; } .rb_list .news_box .posting {height:30px; line-height:30px; max-width:80%;} .rb_list .news_box .posting .title {font-size:19px; color:#333; font-weight:500;} .rb_list .news_box .posting .right {margin-top:7px;} .rb_list .news_box .sub_txt { color:#999; padding-top:0; word-wrap:break-word; word-break:keep-all;} .rb_list .news_box .info {overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical; display: -webkit-box; clear:both; height:60px; line-height:20px; padding-top:15px; } .rb_list .news_box .info.if_mo {display:none;} .rb_list .news_box .news img {width:100%; float:left;} /* 뉴스갤러리형 */ .rb_list .news_list.if_gallery {overflow:hidden; border-bottom:1px solid #ddd;} .rb_list .news_list.if_gallery ul {overflow:hidden; margin:0 -30px; position:relative;} .rb_list .news_list.if_gallery ul:before {content:""; position:absolute; left:33.333333%; top:0; width:1px; height:100%; background:#ededed;} .rb_list .news_list.if_gallery ul:after {content:""; position:absolute; right:33.333333%; top:0; width:1px; height:100%; background:#ededed;} .rb_list .news_list.if_gallery li {float:left; width:33.33333333%; padding:30px; box-sizing:border-box; border-bottom:0; position:relative;} .rb_list .news_list.if_gallery li:before {content:""; position:absolute; left:0; top:-1px; width:300%; height:1px; background:#ddd; z-index:1;} .rb_list .if_gallery .news_box dl {display:block;} .rb_list .if_gallery .news_box dt, .rb_list .if_gallery .news_box dd {display:block;} .rb_list .if_gallery .news_box dt {width:100%;} .rb_list .if_gallery .news_box dd {padding:20px 15px 0;} .rb_list .if_gallery .news_box .posting_box {margin-top:0;} .rb_list .if_gallery .news_box .info {overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; height:40px;} .rb_list .news_list.if_gallery .gallery_info {padding-top:25px;} /* 뉴스레터형 */ .news_preview {background:#f5f5f5; padding:60px;} .news_preview dl {display:table; width:100%; table-layout:fixed;} .news_preview dt, .news_preview dd {display:table-cell; vertical-align:top;} .news_preview dt {width:800px;} .news_preview dd {} .news_preview .posting_box {padding:20px 0 0 50px;} .news_preview .posting_box .title {word-wrap:break-word; word-break:keep-all; color:#000; font-weight:500;line-height:1.3; height:70px; line-height:35px;} .news_preview .posting_box .title {overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box;} .news_preview .posting_box .date {font-family:"Barlow"; color:#aaa; font-weight:500; letter-spacing:0px; line-height:1; margin-top:15px;} .news_preview .posting_box .info {overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp: 7; -webkit-box-orient: vertical; display: -webkit-box; height:196px; line-height:28px; margin-top:30px;} .news_preview .posting_box .sub_txt {word-wrap:break-word; word-break:keep-all; letter-spacing:-1px;} .news_preview .posting_box .c_btn {margin:40px 0 0;} .news_preview .thumb {position:relative; overflow:hidden; font-size:0px; background:#fff url('../images/c_img/board_none.png') center center no-repeat; } .news_preview .thumb img {width:100%; float:left;} .news_preview .fake_img {overflow:hidden; width:100%;} .news_preview .real_img {position:absolute; left:0; top:0; width:100%; height:100%; z-index:1} .news_preview .real_img img {position:absolute; left:0; top:0;} .nletter_list {margin-top:40px; text-align:center; position:relative;} .nletter_list .rolling_box {display:inline-block; margin:0 -11px;} .nletter_list ul {display:inline-block; font-size:0px;} .nletter_list li {list-style:none; width:16.666666%; display:inline-block;} .nletter_list .letter_box {margin:0 11px; position:relative;} .nletter_list .letter_box .thumb {position:relative; overflow:hidden; font-size:0px; background:#f6f6f6 url('../images/c_img/board_none.png') center center no-repeat; } .nletter_list .letter_box .thumb img {width:100%; float:left;} .nletter_list .letter_box .fake_img {overflow:hidden; width:100%;} .nletter_list .letter_box .real_img {position:absolute; left:0; top:0; width:100%; height:100%; z-index:1} .nletter_list .letter_box .real_img img {position:absolute; left:0; top:0;} .nletter_list .letter_box .title {overflow:hidden; text-overflow:ellipsis; white-space: nowrap; word-wrap: normal !important; display:block; text-align:center; padding:0 15px; margin-top:5px;} .nletter_list .prevnext {position:absolute; top:50%; margin-top:-52px; display:none;} .nletter_list .prevnext.prev {left:0;} .nletter_list .prevnext.next {right:0;} .nletter_list .prevnext a {padding:20px; float:left; opacity: .2; -ms-filter:alpha(opacity=20); filter:alpha(opacity=20);} .nletter_list .prevnext .ic {float:left;} .nletter_list .prevnext .ic img {height:38px; float:left;} .nletter_list.if_full {padding:0 60px;} .nletter_list.if_full .prevnext {display:block;} /* 공통탭메뉴 */ .rb_tab {height:50px; box-sizing:border-box; position:relative; text-align:center; margin:0px 0px 40px; text-align:center;} .rb_tab li {list-style:none;} .rb_tab:before {content:""; width:100%; height:1px; position:absolute; left:0; bottom:0; background:#ddd; z-index:1} .rb_tab .inner {display:inline-block;} .rb_tab .inner ul {display:table; table-layout:fixed; box-sizing:border-box; background:#f9f9f9;} .rb_tab .inner li {display:table-cell; vertical-align:middle; position:relative; height:50px; box-sizing:border-box;} .rb_tab .inner li {transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .rb_tab .inner li:before {content:""; width:100%; background:#ddd; position:absolute; left:0; top:0; height:1px;} .rb_tab .inner .btn {color:#aaa; padding:0 40px; letter-spacing:-1px; font-size:16px; display:block; height:50px; line-height:48px; } .rb_tab .inner .btn { white-space:nowrap; min-width:190px; box-sizing:border-box;} .rb_tab .inner .btn:before {content:""; width:1px; height:50px; background:#ddd; position:absolute; left:-1px; top:0; z-index:1} .rb_tab .inner .btn:after {content:""; width:1px; height:50px; background:#ddd; position:absolute; right:0; top:0; z-index:1} .rb_tab .inner li:first-child .btn:before {left:0} .rb_tab .inner .hit {background:#fff !important; z-index:2} .rb_tab .inner .hit:after {content:""; width:100%; height:2px; position:absolute; left:0; bottom:-1px; background:#fff; z-index:2; } .rb_tab .inner .hit:before {background:#ddd;} .rb_tab .inner .hit .btn {color:#000 !important; font-weight:500; } .rb_tab .inner .hit .btn:before {background:#ddd; z-index:3; height:50px;} .rb_tab .inner .hit .btn:after {background:#ddd; z-index:3; height:50px;} .rb_tab.if_en .inner .btn {letter-spacing:0px;} /* 페이지네이트 */ .rb_paginate {text-align:center; overflow:hidden; position:relative; clear:both; padding-top:50px; font-size:0px;} .rb_paginate li {list-style:none;} .rb_paginate .inner {display:table; box-sizing:border-box; table-layout:fixed; margin:0 auto;} .rb_paginate .prevnext, .rb_paginate .number {display:table-cell;} .rb_paginate a {position:relative; box-sizing:border-box; border:1px solid #ddd; line-height:38px; height:40px; width:40px; float:left; background:#fff; overflow:hidden;} .rb_paginate .btn_first {border-right:0;} .rb_paginate .btn_last {border-left:0;} /* 이전,다음,처음,끝 버튼 */ .rb_paginate .prevnext a {cursor:default !important} .rb_paginate .prevnext a.ok {cursor:pointer !important} .rb_paginate .prevnext a .icons {color:#ccc; height:38px; line-height:38px; font-size:13px;} /* 페이징 넘버 */ .rb_paginate .number {overflow:hidden; padding:0 25px; position:relative;} .rb_paginate .number li {float:left;} .rb_paginate .number a {color:#999; margin:0 3px;} .rb_paginate .number .hit a {color:#333 !important; border:1px solid #333 !important; } .rb_paginate .inner.if_pc {} .rb_paginate .inner.if_mo {display:none;} .rb_paginate .inner.if_mo .number {padding:0 5px;} .rb_paginate .inner.if_mo a {margin:0; width:35px; font-size:13px; text-align:center;} .rb_paginate .inner.if_mo .number a {border-right:0;} .rb_paginate .inner.if_mo .number li:last-of-type a {border-right:1px solid #ddd;} /* .rb_paginate .inner.if_mo .number li:only-of-type a {border:0 !important;} */ .rb_paginate .inner.if_mo .number .hit+ li a {border-left:0;} /* â—† 게시판 보기 (기본) */ .rb_view {border-top:1px solid #333; padding-bottom:30px;} .rb_board+ .c_btnbox {margin-top:0; /* padding-top:30px; border-top:1px solid #ddd; */} .rb_board.if_gallery+ .c_btnbox {padding-top:0; border-top:0;} /* 게시물 타이틀,ì •ë³´ */ .rb_view .board_tit {border-bottom:1px solid #ddd;} .rb_view .board_tit dl {} .rb_view .board_tit dt {padding:20px 30px; background:#fafafa; font-size:1.21em; color:#000; line-height:1.3; text-align:center; word-wrap:break-word; word-break:keep-all;} .rb_view .board_tit dt em {color:#999; font-size:1em; padding-right:5px;} .rb_view .board_tit dt strong {font-weight:400; color:#999; margin-right:5px; font-size:1em;} .rb_view .board_tit dd {padding:15px 15px 12px; font-size:0px; border-top:1px solid #ddd; } .rb_view .board_tit .info {overflow:hidden; display:table; box-sizing:border-box; table-layout:fixed;} .rb_view .board_tit .info li {display:table-cell; vertical-align:middle; list-style:none;} .rb_view .board_tit .tx {position:relative; color:#999;} .rb_view .board_tit .info li+ li .tx {margin-left:15px; padding-left:15px;} .rb_view .board_tit .info li+ li .tx:before {content:""; width:1px; height:11px; background:#ccc; position:absolute; left:0; top:50%; margin-top:-5px;} /* 게시물 ë‚´ìš©(에디터) */ .rb_view .conts {padding:30px 0; overflow:hidden; line-height:1.5; width:100%; box-sizing:border-box;} .rb_view .conts img {max-width:100%} /* 댓글 */ .rb_view .reply {margin-top:30px; border:1px solid #ea5413;} .rb_view .reply li {list-style:none;} .rb_view .reply .list {overflow:hidden;} .rb_view .reply .list dl {padding:30px; position:relative} .rb_view .reply .list dl+ dl {border-top:1px solid #ddd; } .rb_view .reply .list dt strong {color:#ea5413; font-size:15px;} .rb_view .reply .list dt em {color:#999; margin-left:10px; font-size:13px;} .rb_view .reply .list dd {color:#888; margin-top:10px; line-height:1.5;} /* 관리자 답변 */ .rb_view .answer {border:2px solid #999; margin:30px 0 0 0; padding:20px; position:relative; } .rb_view .answer .tit {position:absolute; left:0; top:0; margin:-13px 0 0 -2px; background:#999; height:40px; line-height:36px; color:#fff; letter-spacing:-1px; font-size:14px; padding:0 20px 0 20px; font-weight:600} .rb_view .answer .tit strong {letter-spacing:0px;} .rb_view .answer .tit:after {content:''; width: 0; height: 0; border-bottom: 13px solid #333; border-right: 13px solid transparent; position:absolute; right:-13px; top:0; } .rb_view .answer .conts {margin:20px 0 10px 0; overflow:hidden; padding:10px 10px 0} .rb_view .answer .conts img {max-width:100%;} /* 첨부파일 */ .rb_view .file {margin-top:30px; overflow:hidden; background:#fafafa; border:1px solid #ddd; border-right:0; border-left:0; position:relative;} .rb_view .file dl {display:table; width:100%; box-sizing:border-box; } .rb_view .file dt, .rb_view .file dd {display:table-cell; vertical-align:middle; line-height:25px; box-sizing:border-box;} .rb_view .file dt {width:140px; border-right:1px solid #eee; } .rb_view .file .tx {background:transparent url('../images/rb_img/board_file.png') left top no-repeat; padding-left:30px; display:block;color:#999; margin-left:30px; white-space:nowrap; font-size:0.9em;} .rb_view .file dd {padding:10px 10px; } .rb_view .file .link {white-space:nowrap; float:left; margin:5px 5px; background:#fff; border:1px solid #ddd; padding:5px 20px; border-radius:100px; box-sizing:border-box; position:relative; font-size:0.9em;} .rb_view .file .link span {display:block;} .rb_view .file .link .icons {color:#ccc; margin-left:10px; font-size:1.1em;} /* 이전다음글 */ .rb_view .prevnext {margin-top:30px; border-bottom:1px solid #ddd;} .rb_view .prevnext dl {display:table; width:100%; box-sizing:border-box; table-layout:fixed; border-collapse:separate; border-spacing:0px; border-top:1px solid #ddd;} .rb_view .prevnext dt, .rb_view .prevnext dd {display:table-cell; vertical-align:middle; padding:15px 0; box-sizing:border-box;} .rb_view .prevnext dt {width:140px; border-right:1px solid #eee; } .rb_view .prevnext dt .tx {overflow:hidden; margin-left:30px; color:#999; position:relative; padding-left:30px; font-size:0.95em;} .rb_view .prevnext dt .icons {color:#ccc; width:30px; position:absolute; left:0; top:0; text-align:center; line-height:21px\0; line-height:20px;} .rb_view .prevnext dt .icons:before {margin:0; font-size:11px;} .rb_view .prevnext dd {padding:0 20px;} .rb_view .prevnext .title_box {float:left; display:inline-block; max-width:100%; overflow:hidden; box-sizing:border-box;} .rb_view .prevnext .title {color:#aaa; font-size:0.95em; position:relative;} .rb_view .prevnext .title strong {overflow:hidden; text-overflow:ellipsis; white-space: nowrap; word-wrap: normal !important; display:block; color:#777; line-height:1.2; } .rb_view .prevnext .date {width:150px; text-align:right} .rb_view .prevnext .date .tx {color:#aaa; font-size:0.95em;} .rb_baf {text-align:center; padding-top:30px;} /* **************************************** * * LAYER POPUP (common) * **************************************** */ .rb_pop {width:100% !important; box-sizing:border-box; display:table; position:fixed; left:0; top:0; height:100%;} .rb_pop * {font-size:14px;} .rb_pop li {list-style:none;} /* .rb_pop .inner_box {padding:20px 20px 15px;} .rb_pop .c_form {margin:0 !important;} .rb_pop .c_form table .tit:before {background:transparent url('../images/rb_img/form_ess.png') left center no-repeat;} .rb_pop .c_form table td {background:#f5f5f5; padding:15px;} .rb_pop .c_form .tip_txt {font-size:0.9em; padding-left:12px;} .rb_pop .c_form .tip_txt:before {width:2px; height:2px; background:#999; left:5px; top:13px;} .rb_pop .pop_title {font-size:1.6em; letter-spacing:-1px;} .rb_pop .pop_title .btn_close { background:none; position:absolute; right:0; top:20px; font-size:13px; padding:0px; color:#333; box-sizing:border-box; text-align:center; width:auto; height:auto ; line-height:14px;} .rb_pop .pop_title .btn_close .icons {padding:10px;} .rb_pop .c_group_tit {text-align:center;} .rb_pop .c_group_tit .tit {font-size:1.15em; float:none; margin-bottom:8px} .rb_pop .c_btnbox {padding-top:0; border-top:0; margin-top:0} */ .rb_pop .inner {display:table-cell; vertical-align:middle; box-sizing:border-box; padding:0 20px; position:relative; } .rb_pop .layout_fix {max-width:450px; box-shadow:0 0 10px rgba(0,0,0,0.5); padding:0px !important;} .rb_pop .tit {color:#fff; font-size:20px; font-weight:300; position:relative; text-align:center; line-height:1.2; padding:25px; background:#333; } .rb_pop .tit span {overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; display: -webkit-box;} .rb_pop .conts {background:#fff; padding:20px 30px; } .rb_pop .btn_close {position:absolute; right:0; top:50%; font-size:13px; padding:0 10px; color:#fff; box-sizing:border-box; text-align:center; margin-top:-17px;} .rb_pop .btn_close .icons {padding:10px;} .rb_pop .pop_guide {overflow:hidden; line-height:1.4; box-sizing:border-box; display:table; width:100%; box-sizing:border-box; background:#fff; padding:0; margin:0; border:0;} .rb_pop .pop_guide .tx {display:table-cell; vertical-align:middle; padding:0 20px; text-align:center; color:#999;} .rb_pop .c_btn_box {margin-top:20px;} .rb_pop .form {border:1px solid #ddd; padding:20px; background:#f5f5f5; margin-top:20px; text-align:center;} .rb_pop .form .input_design {box-sizing:border-box; border:1px solid #ddd; padding:0 10px; height:40px; width:100%; background:#fff; line-height:40px;} .rb_pop .c_btnbox {padding-top:20px; border:0; margin:0} /* ********************************************** * * ◆◆◆ popup (common) * ********************************************** */ .c_popup label.r_design {float:left; position:relative; text-align:left; box-sizing:border-box; margin-right:10px; padding:10px;} .c_popup label.r_design input {position:absolute; left:10px; top:10px; z-index:5; color:#666; width:20px; height:20px; margin:0} .c_popup label.r_design input {-webkit-appearance:none; appearance:none; opacity: 0; filter: alpha(opacity=0); -ms-filter:alpha(opacity=0);} .c_popup label.r_design .tx {color:#666; height:20px; line-height:18px; padding:0 10px 0 25px; display:block; box-sizing:border-box; white-space:nowrap; position:relative; font-size:12px;} .c_popup label.r_design .icon {width:20px; height:20px; position:absolute; left:0; top:50%; box-sizing:border-box; margin-top:-10px; border:1px solid #ccc; box-sizing:border-box; text-align:center;} .c_popup label.r_design .icon .icons {} .c_popup label.r_design .icon .icons:before {margin-left:0; color:#ccc; font-size:10px; width:100%; text-align:center; line-height:20px; font-weight:400;} .c_popup label.r_design input[type=radio]+ .tx .icon {border-radius:100px; overflow:hidden;} .c_popup label.r_design input[type=radio]+ .tx .icons:before {display:none;} .c_popup label.r_design input[type=radio]+ .tx .icons:after {content:""; position:absolute; left:5px; top:5px; width:8px; height:8px; background:#ccc; margin:0; border:1px solid #ccc; border-radius:100px; overflow:hidden;} .c_popup label.r_design input[type=radio]+ .tx .icons:after {box-sizing:border-box;} .c_popup label.r_design input:checked+ .tx {color:#333;} .c_popup label.r_design input:checked+ .tx .icons:before {color:#fff;} .c_popup label.r_design input:checked+ .tx .icons:after {background:#fff; border-color:#fff;} .c_popup .close_box .btn_close {background:none; width:20px; height:20px; padding:10px; text-align:center;} .c_popup .close_box .btn_close .icons {line-height:20px; } .c_popup .close_box .btn_close .icons:before {font-size:11px; color:#333;} /* **************************************** * â—† Max ~ 900px (Mouse Over) * **************************************** */ @media screen and (min-width:900px) { .wrap:after {content:"Mouse"; } .board_letter .letter_box:hover .upper_link {border-color:#ea5413;} .rb_list .btn_file.if_upload:hover .on {opacity: 1; filter: alpha(opacity=100); -ms-filter:alpha(opacity=100);} .rb_list .posting:hover .title {color:#000; text-decoration:underline;} .rb_list .news_box:hover .posting .title {text-decoration:underline;} .rb_view .file .link:hover {border-color:#999;} .rb_view .file .link:hover .icons:before {color:#0063af;} .rb_view .file .link.hit:hover {background:#333; border-color:#333; color:#fff !important;} .rb_view .prevnext .title a:hover {text-decoration:underline;} .rb_photo .photo_box:hover .thumb img {transform: scale(1.1);} .rb_photo .photo_box:hover .tx {text-decoration:underline;} .rb_photo .gallery_box:hover .tx {text-decoration:underline;} .rb_paper .photo_box:hover .thumb_box {border-color:#ccc;} .rb_paper .photo_box:hover .tit {text-decoration:underline;} .news_preview .posting_box .more_btn:hover {background:#fff; color:#333;} .nletter_list .prevnext a:hover {opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} } /* **************************************** * â—† 1500px ~ * **************************************** */ @media screen and (max-width:1500px) { .wrap:before {content:"1500"; } .news_preview dt {width:65%;} } /* **************************************** * â—† 1400px ~ * **************************************** */ @media screen and (max-width:1400px) { .wrap:before {content:"1400"; } .news_preview {padding:40px;} .news_preview .posting_box {padding:15px 0 0 30px;} } /* **************************************** * â—† 1300px ~ * **************************************** */ @media screen and (max-width:1300px) { .wrap:before {content:"1300"; } .board_letter .list {margin-left:-20px; margin-top:-20px;} .board_letter .letter_box {margin-left:20px; margin-top:20px;} .rb_tab {margin:0px 0px 40px;} .rb_tab .inner .btn {min-width:150px;} } /* **************************************** * â—† 1024px ~ * **************************************** */ @media screen and (max-width:1024px) { .wrap:before {content:"1200"; } .c_page_tit .title .tit {font-size:35px;} .rb_list .posting {max-width:100%} .rb_list .if_gallery .posting {max-width:100% !important;} .rb_board .rb_form .inner dt {width:150px; padding-left:10px;} .rb_board .rb_form .inner dd {padding:10px;} .rb_photo .photo_list li {width:25%;} .rb_photo .photo_list li:nth-of-type(4n)+ li {clear:both} .rb_photo .photo_list li:nth-of-type(5n)+ li {clear:none;} .rb_paper li {width:25%;} .rb_paper .photo_list li:nth-of-type(4n)+ li {clear:both} .rb_paper .photo_list li:nth-of-type(5n)+ li {clear:none;} .news_preview {padding:30px;} .news_preview .posting_box {padding:10px 0 0 20px;} .news_preview .posting_box .title {height:64px; line-height:32px;} .news_preview .posting_box .info {margin-top:20px;} .news_preview .posting_box .c_btn {margin-top:30px;} .nletter_list .rolling_box {margin:0 -5px;} .nletter_list .letter_box {margin:0 5px;} .nletter_list.if_full {padding:0 40px;} .nletter_list .prevnext a {padding:20px 10px;} } /* **************************************** * â—† 1100px ~ * **************************************** */ @media screen and (max-width:1100px) { .wrap:before {content:"1100"; } .rb_tab .inner .btn {min-width:120px;} .news_preview dl {display:block; position:relative;} .news_preview dt, .news_preview dd {display:block;} .news_preview dt {width:100%;} .news_preview dd {position:absolute; right:0; top:0; width:350px; height:100%; background:rgba(0,0,0,0.5); z-index:1; box-sizing:border-box;} .news_preview .posting_box {padding:60px 40px; padding-right:20px; } .news_preview .posting_box .title {color:#fff; } .news_preview .posting_box .c_btn {position:absolute; left:40px; bottom:40px; background:#fff !important; color:#333 !important; border-color:#fff !important;} } /* **************************************** * â—† 1000px ~ * **************************************** */ @media screen and (max-width:1000px) { .wrap:before {content:"1000"; } .rb_list .tbody li {padding:0 5px;} .rb_list .t_number {width:50px; font-size:13px;} .rb_list .t_title {} .rb_list .t_file {width:80px;} .rb_list .t_date {width:90px; font-size:13px;} .rb_list .t_writer {width:120px; font-size:13px;} .rb_list .t_hit {width:70px; font-size:13px;} .rb_list .t_state {width:80px;} .rb_list .news_list.if_gallery ul {margin:0 -20px;} .rb_list .news_list.if_gallery li {padding:20px;} .rb_list .if_gallery .news_box dd {padding:15px 5px 0;} .rb_list .if_gallery .news_box .info {padding-top:5px;} .rb_list .news_list.if_gallery .gallery_info {padding-top:15px;} } /* **************************************** * â—† 900px ~ (Mobile Start) * **************************************** */ @media screen and (max-width:900px) { .wrap:before {content:"900"; } .c_pagi {padding-top:30px;} .c_board .c_page_tit {margin-bottom:30px;} .c_page_tit .title .tit {font-size:33px;} .rb_top .search_form .btn_box .btn_search {background:transparent url('../images/rb_img/mo/icon_search.png') center center no-repeat; background-size:17px !important;} .rb_top .search .select select {font-size:13px !important;} .rb_top .search_form .input_search {} .rb_group_tit .right_txt .txt {padding-left:14px;} .rb_group_tit .right_txt .ess {background:transparent url('../images/rb_img/mo/form_ess.png') left center no-repeat; background-size:7px;} .rb_group_tit .right_txt .icons:before {font-size:0.68em;} /* 문의폼 */ .rb_board * {font-size:13px;} .rb_board .rb_form .tr {display:block;} .rb_board .rb_form .td {display:block; border:0 !important;} .rb_board .rb_form .opt {padding-left:13px;} .rb_board .rb_form .opt:after {background:transparent url('../images/rb_img/mo/form_ess_off.png') left center no-repeat; background-size:7px;} .rb_board .rb_form .ess .opt:after {background:transparent url('../images/rb_img/mo/form_ess.png') left center no-repeat; background-size:7px;} .rb_board .rb_form .opt .icons:before {font-size:0.65em;} .rb_board .rb_form .inner dt, .rb_board .rb_form .inner dd {padding:10px;} .rb_board .rb_form .inner dt {width:120px;} .rb_board .rb_form .inner .email {padding-right:10px;} .rb_board .rb_form .inner .email .input_box {padding-right:0px; box-sizing:border-box;} .rb_board .rb_form .inner .email .tooltip {right:0px;} .rb_board .rb_form .select select {line-height:1; padding-bottom:3px; padding-right:25px; } .rb_board .rb_form .if_tip .inner dd {height:55px;} .rb_board .rb_form .inner .if_only {padding-right:10px;} .rb_board .box_email ul {width:100%;} .rb_board .box_email li {width:auto;} .rb_board .rb_form .group_tit dt {font-weight:500;} .rb_board .rb_form .group_tit dd {font-size:13px;} .rb_board .rb_form .agree_form textarea.design {line-height:1.35; padding:15px;} .rb_board .rb_form .agree_form .agree {padding:5px 15px;} .rb_board .rb_form .input_file_box .buttonImg {background:#aaa; width:90px; height:33px; position: absolute; top:-1px; right:-1px; color:#fff; border:0; padding:5px 0 8px; border-radius:0px; appearance:none;} .rb_board .rb_form .input_file_box .realFile {position:absolute; right:0px; top:0px; width:100%; font-size:200px; height:100%; cursor:pointer !important; opacity:0; filter: alpha(opacity=0); -ms-filter: "alpha(opacity=0)"; -khtml-opacity: 0; -moz-opacity: 0;} .rb_board .rb_form .tip_txt {color:#999; letter-spacing:0px; position:relative; clear:both; } .rb_board .rb_form .tip_txt.if_beside {margin-top:6px !important; float:left !important; clear:none; margin-left:5px;} .rb_board .duplicate.if_add {margin-bottom:5px;} .rb_board .rb_form .tip_txt+ .tip_txt {margin-top:5px;} .rb_board .rb_form .tip_txt:before {top:6px;} .rb_agree .agree_form textarea.design {padding:10px;} .rb_btn.h55 {height:50px; line-height:48px; font-size:16px !important; padding:0 40px;} .rb_paginate {padding-top:30px;} .rb_paginate .inner.if_mo {display:inline-block !important;} .rb_board label.r_design {height:30px;} .rb_board label.r_design .tx {height:30px; line-height:30px;} .rb_board label.r_design .icon .icons:before {line-height:19px;} /* 게시판-목록 */ .rb_list .posting .right {margin-top:18px;} .rb_list .posting .icons.new {background:transparent url('../images/rb_img/mo/board_new.png') left top no-repeat; width:14px; background-size:auto 14px;} .rb_list .posting .icons.secret {background:transparent url('../images/rb_img/mo/board_secret.png') left top no-repeat; width:14px; background-size:12px;} .rb_list .posting .icons.photo {background:transparent url('../images/rb_img/mo/board_photo.png') left top no-repeat; width:16px; background-size:auto 14px;} .rb_list .posting .icons.file {background:transparent url('../images/rb_img/mo/board_file1.png') left center no-repeat; width:16px; background-size:auto 14px;} .rb_list .tbody .t_number .icon { background:transparent url('../images/rb_img/mo/board_notice.png') center center no-repeat; background-size:18px;} .rb_list .posting .btn_file .btn {background:transparent url('../images/rb_img/mo/board_file.png') center center no-repeat; background-size:16px;} .rb_no_posting {padding-top:50px; position:relative; margin:40px 0 20px; background:transparent url('../images/rb_img/mo/board_no.png') center top no-repeat; background-size:40px;} /* 게시판-보기 */ .rb_view .board_tit dt {padding:15px 10px;} .rb_view .board_tit dd {padding:10px 0;} .rb_view .board_tit .tx.ic_writer {padding-left:15px;} .rb_view .board_tit .tx.ic_date {padding-left:15px;} .rb_view .board_tit .tx.ic_hit {padding-left:15px;} .rb_view .conts {padding:20px 0; } .rb_view .file {margin-top:20px;} .rb_view .file dt {width:80px; text-align:center; padding:10px 0;} .rb_view .file .tx {padding-left:0px; margin-left:0px; background:transparent url('../images/rb_img/mo/board_file.png') center top no-repeat; background-size:18px; padding-top:30px; line-height:1;} .rb_view .file .btn {padding:3px 15px; margin:3px; box-sizing:border-box; line-height:1.3;} .rb_view .answer {padding:10px;} .rb_view .prevnext dt {width:80px; text-align:center;} .rb_view .prevnext dt .tx {margin-left:0px;} .rb_view .prevnext dt .icons {width:20px; text-align:left;} .rb_view .reply {margin-top:15px;} .rb_view .reply .list dl {padding:20px;} .rb_view .prevnext dt .tx {padding-left:15px} .rb_view .prevnext dt .icons {width:15px;} .rb_view .prevnext dt .icons:before {font-size:10px;} .rb_view .prevnext dd {padding:0 10px} .rb_pop {padding:0 15px;} .rb_pop * {font-size:13px;} .rb_pop .c_group_tit .tit {line-height:1.2; word-wrap:break-word; word-break:keep-all; font-size:1.05em;} .rb_pop .c_form table .tit:before {top:4px; background:transparent url('../images/rb_img/mo/form_ess.png') left center no-repeat; background-size:7px;} .rb_pop .c_form table th {width:80px !important;} .rb_photo .photo_list {margin-top:-25px; margin-left:-10px;} .rb_photo .photo_box {margin-left:10px; margin-top:25px;} .rb_photo .photo_box .thumb {background-image:url('../images/rb_img/mo/photo_none.png'); background-size:40px;} .rb_photo .gallery_box {margin-left:20px; margin-top:20px;} .rb_photo .gallery_box .thumb_box .thumb {background:#f8f8f8 url('../images/rb_img/mo/photo_none.png') center center no-repeat; background-size:30px;} .rb_photo .gallery_box .thumb_box .tag {width:80px; height:25px; line-height:25px;} .rb_paper .photo_list {margin-top:-25px; margin-left:-10px;} .rb_paper .photo_box {margin-left:10px; margin-top:25px;} .rb_paper .photo_box .thumb {background-image:url('../images/rb_img/mo/photo_none.png'); background-size:40px;} .c_popup {border:0; padding:10px; box-sizing:border-box;} .c_popup .img_box {border:1px solid #ddd; border-bottom:0; box-sizing:border-box;} .c_popup .editor_box {width:100% !important; border:1px solid #ddd; border-bottom:0; box-sizing:border-box;} .c_popup .close_box {border:1px solid #ddd; } .rb_tab {margin:0 -20px 20px;} .rb_tab .inner {padding:0 30px;} .rb_tab .inner ul {width:100%;} .rb_tab .inner .btn {font-size:15px; min-width:auto;} .rb_list .news_box .info.if_pc {display:block !important; display:-webkit-box !important;} .rb_list .news_box .info.if_mo {display:none !important;} .rb_list .news_box dt {width:230px;} .rb_list .news_box dd {padding-left:20px;} .rb_list .news_list .gallery_info {padding-top:20px;} .rb_list .news_list .gallery_info .view .if_pc {display:inline-block !important;} .rb_list .news_box .posting_box {margin-top:5px;} .rb_list .news_box .posting {max-width:90%;} .rb_list .news_box .posting .title {font-size:16px;} .rb_list .news_box .info {padding-top:10px;} .rb_list .news_box .sub_txt {letter-spacing:-0.5px;} /* .rb_list .news_box .info {overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp: 4; -webkit-box-orient: vertical; display: -webkit-box; height:80px; padding-top:3px; letter-spacing:-0.5px;} */ .c_btnbox {margin-top:20px;} .news_preview {padding:20px;} .news_preview dd {width:300px;} .news_preview .posting_box {padding:40px 20px;} .news_preview .posting_box .info {height:161px; line-height:23px;} .news_preview .posting_box .c_btn {left:20px; bottom:20px;} .nletter_list {margin-top:30px;} .nletter_list li {width:25%;} .nletter_list .prevnext {margin-top:-48px;} .nletter_list .prevnext .ic img {height:30px;} } /* **************************************** * â—† 800px ~ * **************************************** */ @media screen and (max-width:800px) { .wrap:before {content:"800"; } .rb_top.if_qna .search .this_select {display:none;} .rb_top .search .select {width:150px;} .rb_photo .photo_list li {width:50%;} .rb_photo .photo_list li:nth-of-type(4n)+ li {clear:none;} .rb_photo .photo_list li:nth-of-type(2n)+ li {clear:both;} .rb_paper .photo_list li {width:50%;} .rb_paper .photo_list li:nth-of-type(4n)+ li {clear:none;} .rb_paper .photo_list li:nth-of-type(2n)+ li {clear:both;} .news_preview dd {width:260px;} .news_preview .posting_box {padding-top:20px;} } /* **************************************** * â—† 700px ~ * **************************************** */ @media screen and (max-width:700px) { .wrap:before {content:"700"; } /* .rb_top {margin-bottom:10px;} .rb_top .total {position:absolute; left:0; bottom:0; line-height:35px; margin:0px;} .rb_top .search {float:none; width:100%; padding-left:150px;} .rb_top .search ul {display:table; width:100%; box-sizing:border-box; table-layout:fixed;} .rb_top .search li {display:table-cell; vertical-align:bottom; padding:0px; float:none} .rb_top .search .this_select {width:120px;} .rb_top .search .select {width:115px;} .rb_top .search_form {width:100%; } .rb_top .search_form .input_search {width:100%; } .rb_top .search_form .this_write {padding-left:5px; width:65px;} .rb_top.if_qna .search .form {padding-right:5px;} */ .rb_top {margin-bottom:10px;} .rb_top * {font-size:13px;} .rb_top .total {position:absolute; left:0; top:0; line-height:35px; margin:0px;} .rb_top .search {float:none; width:100%; padding-left:150px;} .rb_top .search ul {display:table; width:100%; box-sizing:border-box; table-layout:fixed;} .rb_top .search li {display:table-cell; vertical-align:bottom; padding:0px; float:none} .rb_top .search .this_select {width:120px;} .rb_top .search .select {width:115px;} .rb_top .search_form .input_search {width:100%; } .rb_top .search .this_write {padding-left:5px; width:65px;} .rb_board .box_email {display:block;} .rb_board .box_email ul {display:block; width:100%;} .rb_board .box_email li {display:inline-block; float:left; width:45%; } .rb_board .box_email li+ li {padding-left:20px; width:55%;} .rb_board .box_email .other {padding-left:0px !important; width:100%;} .rb_board .box_email .other input.design {margin-top:5px;} .rb_board .box_email .other input.design:focus+ .tooltip {top:-20px !important;} .rb_board .box_email .dash {width:20px;} .rb_board .rb_form .inner dt {width:110px;} .rb_board .rb_form .ess .table .input_box {} .rb_board .rb_form .ess .table .label_box { width:110px;} .rb_view .reply .reply_tit {padding-bottom:10px;} .rb_view .reply .reply_tit dt, .rb_view .reply .reply_tit dd {display:block; padding:3px 0; text-align:left} .rb_view .reply .reply_tit dt strong {font-weight:500;} .rb_view .reply .reply_tit dd {font-size:0.85em;} .rb_view .reply .form .tx {display:none;} .rb_view .reply .form .input_box {margin-right:10px;} .rb_view .reply .form .btn_ok {width:100px;} .rb_view .reply .form .text_design {padding-right:120px;} .rb_view .prevnext dt, .rb_view .prevnext dd {padding-top:10px; padding-bottom:10px;} .rb_paper {padding-top:20px;} .rb_tab {height:41px; margin-bottom:20px; } .rb_tab .inner {padding:0 20px;} .rb_tab .inner ul {width:100%;} .rb_tab .inner .btn {height:40px; line-height:42px; padding:0px; min-width:100%;} .rb_tab .inner li {height:40px;} .rb_tab .inner .btn:before {height:40px;} .rb_tab .inner .btn:after {height:40px;} .rb_tab .inner .hit .btn:before {height:41px;} .rb_tab .inner .hit .btn:after {height:41px;} .rb_list .t_hit {width:60px;} .rb_list .t_date {width:80px;} .rb_list .t_number {width:45px;} .rb_list .t_writer {width:100px;} .rb_list .t_subject {width:80px;} .rb_photo .gallery_box .thumb_box .tag {width:70px; height:23px; line-height:23px; font-size:12px;} .rb_list .news_list.if_gallery ul:before {left:50%;} .rb_list .news_list.if_gallery ul:after {display:none;} .rb_list .news_list.if_gallery li {width:50%;} .rb_list .news_list.if_gallery .gallery_info {padding-top:10px;} .news_preview dd {position:static; width:100%; background:none;} .news_preview .posting_box {padding:20px 0 0;} .news_preview .posting_box .title {color:#000; height:auto; line-height:25px; max-height:50px;} .news_preview .posting_box .info {-webkit-line-clamp:3; height:auto; line-height:18px; max-height:54px;} .news_preview .posting_box .c_btn {background:#333 !important; color:#fff !important; border-color:#333 !important; position:static; float:none;} } /* **************************************** * â—† 650px ~ * **************************************** */ @media screen and (max-width:650px) { .wrap:before {content:"650"; } .rb_photo .photo_list li {width:50%;} .rb_photo .photo_list li:nth-of-type(3n)+ li {clear:none;} .rb_photo .photo_list li:nth-of-type(2n)+ li {clear:both;} .rb_paper .photo_list li {width:50%;} .rb_paper .photo_list li:nth-of-type(3n)+ li {clear:none;} .rb_paper .photo_list li:nth-of-type(2n)+ li {clear:both;} } /* **************************************** * â—† 600px ~ * **************************************** */ @media screen and (max-width:600px) { .wrap:before {content:"600"; } .c_board .c_page_tit {margin-bottom:20px;} .c_page_tit .title .tit {font-size:30px;} .rb_tab {margin:0 0 20px; height:auto;} .rb_tab:before {display:none;} .rb_tab .inner {padding:0; width:100%;} .rb_tab .inner ul {display:block; border-bottom:1px solid #ddd; overflow:hidden; background:#fff;} .rb_tab .inner li {display:block; float:left; width:33.3333333%; height:auto;} .rb_tab .inner li:before {width:300%;} .rb_tab .inner .btn {height:36px; line-height:36px; font-size:13px;} .rb_tab .inner .btn:before {height:200% !important;} .rb_tab .inner .hit:after {display:none;} .rb_tab .inner .hit .btn {background:#f5f5f5; font-weight:400;} /* .rb_top .search .this_select {display:none;} .rb_top .search {padding-left:75px;} .rb_top .total em {display:none;} */ .rb_top {margin-bottom:0} .rb_top .search {padding-left:0;} .rb_top .search .this_select {display:none;} .rb_top .search li {display:block;} .rb_top .search_form {padding:0; text-align:right; font-size:0px;} .rb_top .search_form .input_search {display:none;} .rb_top .search_form .btn_viewall {border:1px solid #e9e9e9; background-color:#e9e9e9; box-sizing:border-box; top:0; right:45px; padding:10px 8px; width:35px; border-radius:100px; overflow:hidden;} .rb_top .search_form .search_btn {display:inline-block; background:transparent url('../images/rb_img/mo/icon_search.png') right center no-repeat; background-size:17px !important; opacity: 1; } .rb_top .search_form .btn_box {display:none; background:#333;} .rb_top .search_form .btn_box .btn_search {font-size:12px; background:none; border-radius:0px; float:none;} .rb_top .if_open_search .search_form .input_search {display:block; margin:0px 0 10px;} .rb_top .if_open_search .search_form .btn_box {display:block; top:auto; bottom:10px;} .rb_top.if_qna {margin-bottom:10px;} .rb_top.if_qna .search_form {padding-right:64px;} .rb_top.if_qna .search_form .search_btn {background-position:center center;} .rb_top.if_qna .search_form .btn_box {width:65px;} .rb_top.if_qna .search_form .btn_viewall {right:110px;} .rb_top.if_qna .if_open_search .search_form .btn_box {bottom:0;} .rb_top.if_qna .if_open_search .search_form .input_search {margin:5px 0 0;} .rb_top.if_qna .total {line-height:1; margin-top:17px;} .rb_top .search .this_write {position:absolute; right:0; top:0;} .rb_board .rb_form input.design {line-height:34px;} .rb_board .agree_add_info .table {border-bottom:1px solid #ddd;} .rb_board .agree_add_info .thead {display:none;} .rb_board .agree_add_info .td {padding:0; vertical-align:top; display:block; border-bottom:0;} .rb_board .agree_add_info dl {display:table; width:100%; table-layout:fixed;} .rb_board .agree_add_info dt {display:table-cell; vertical-align:middle; width:110px; border:0;} .rb_board .agree_add_info dd {display:table-cell; vertical-align:middle; text-align:left; padding:10px;} .rb_board .duplicate.if_add {margin-bottom:3px;} .rb_board .rb_form .tip_txt+ .tip_txt {margin-top:3px;} .rb_board .rb_form .opt {word-break:keep-all;} .rb_board .rb_form .opt em {display:none;} .rb_select select {padding-right:30px; padding-bottom:2px;} .rb_view .prevnext .date {display:none;} .rb_view .prevnext .title {line-height:20px;} .rb_view .prevnext .title a {line-height:20px;} .rb_view .file .btn {float:none; width:100%; margin:5px 0; display:block; font-size:0.9em;} .rb_view .file .btn {} .rb_view .file .btn .icons {position:absolute; right:10px; top:50%; margin-top:-13px;} .rb_view .reply .list dt em {display:block; margin-left:0px; margin-top:5px;} .rb_view .reply .list dd {font-size:13px;} .rb_view .board_tit dt {font-size:1.15em; padding:10px;} .rb_view .board_tit dt strong {margin:0; display:block; padding-bottom:2px;} .rb_view .board_tit dd {position:relative;} .rb_view .board_tit .info li {display:block; } .rb_view .board_tit .info .tx {padding-left:10px !important; line-height:1;} .rb_view .board_tit .info li+ li .tx {margin-left:0; margin-top:5px;} .rb_view .board_tit .info li+ li .tx:before {display:none;} .rb_view .board_tit .info li .tx:after {content:""; position:absolute; left:2px; top:5px; width:2px; height:2px; background:#aaa;} /* .rb_view .board_tit .tx.ic_hit {position:absolute; right:10px; top:10px; margin-top:0 !important;} */ .rb_list .tbody .t_subject {text-align:left;} .rb_list .tbody .t_writer {color:#bbb; display:inline-block; width:auto; margin-right:15px; padding-left:15px; line-height:22px;;} .rb_list .tbody .t_writer {background:transparent url('../images/rb_img/mo/board_pen.png') left center no-repeat; background-size:auto 12px;} .rb_list .tbody .t_date {color:#bbb; float:left; width:auto; padding-left:18px; margin-right:15px; background:transparent url('../images/rb_img/mo/board_date.png') left center no-repeat; background-size:auto 12px;} .rb_list .tbody .t_hit {color:#bbb; float:right; width:auto; padding-left:19px; background:transparent url('../images/rb_img/mo/board_view.png') left center no-repeat; background-size:auto 9px;} .rb_list .thead {display:none !important;} .rb_list .list {display:block;} .rb_list .list ul {display:block; overflow:hidden; border-bottom:1px solid #ddd; position:relative; padding:8px 5px; padding-left:40px; } .rb_list .list li {display:block; border:0; width:auto; overflow:hidden; padding:0px; line-height:20px; font-size:13px;} .rb_list .list .icons {display:block; } .rb_list .list .icons:before {color:#ddd;} .rb_list .posting {height:30px; line-height:30px; text-align:left; padding-right:90px; position:static} .rb_list .posting .title {color:#333; font-size:13px;} .rb_list .posting .right {margin-top:8px;} .rb_list .tbody .t_writer {font-size:0.88em;} .rb_list .tbody .t_number {position:absolute; left:0; top:13px; width:40px; height:20px; line-height:20px;} .rb_list .tbody .t_file {display:none;} .rb_list .icons {margin-left:3px;} .rb_list .if_notice .posting .title {font-weight:500;} .rb_list .tbody .t_state {position:absolute; right:0; top:50%; margin-top:-12px; width:65px !important;} .rb_list .tbody .t_state .c_tag.h25 {font-size:11px !important;} .rb_list .tbody .t_title strong {font-size:15px;} .rb_list.if_qna .tbody .t_number {height:30px; line-height:30px;} .rb_list.if_qna .tbody .t_state {top:12px; margin-top:0;} .c_popup {width:100%; left:0 !important; border:0; padding:10px; box-sizing:border-box;} .c_popup .img_box {border:1px solid #ddd; border-bottom:0; box-sizing:border-box;} .c_popup .img_box a {width:100%;} .c_popup .img_box img {width:100%; max-width:none;} .c_popup .editor_box {width:100% !important; border:1px solid #ddd; border-bottom:0; box-sizing:border-box;} .c_popup .close_box {border:1px solid #ddd; } .c_popup .close_box .btn_close .icons:before {font-size:13px;} .rb_list .news_list li {padding:10px 0;} .rb_list .news_list .gallery_info {padding-top:6px;} .rb_list .news_list .gallery_info .view .if_pc {display:none !important;} .rb_list .news_list .gallery_info .date {font-size:12px; padding-left:18px; background:transparent url('../images/rb_img/mo/board_date.png') left center no-repeat; background-size:auto 12px;} .rb_list .news_list .gallery_info .view {font-size:12px; padding-left:19px; background:transparent url('../images/rb_img/mo/board_view.png') left center no-repeat; background-size:auto 9px; margin-left:15px;} .rb_list .news_list .gallery_info .view:before {display:none;} .rb_list .news_box dt {width:120px; } .rb_list .news_box dd {padding-left:15px; } .rb_list .news_box .info.if_pc {display:none !important;} .rb_list .news_box .info.if_mo {display:block !important; margin-top:5px;} .rb_list .news_box .posting_box {margin-top:0px;} .rb_list .news_box .posting {height:20px; line-height:20px; padding-right:20px;} .rb_list .news_box .posting .title {font-size:13px;} .rb_list .news_box .posting .right {margin-top:3px;} .rb_list .news_box .info {overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; height:30px; font-size:12px; line-height:15px; padding-top:3px;} .rb_list .news_box .sub_txt {font-size:12px;} .rb_photo {padding-top:10px;} /* .rb_photo .photo_list li {width:100%;} */ .rb_board .rb_form+ .rb_group_tit {margin-top:20px;} .rb_agree {margin-top:20px;} .rb_board .rb_form .input_file_box .buttonImg {width:auto; padding:5px 10px 6px; height:30px;} .rb_board .duplicate.if_add .form_file {padding-right:55px;} .rb_board .duplicate.if_add .add_btn_box .c_btn {width:50px; padding:0;} .rb_list .news_list.if_gallery ul {margin:0 -15px;} .rb_list .news_list.if_gallery li {padding:15px;} .rb_list .if_gallery .news_box dd {padding:10px 0 0;} .rb_list .if_gallery .posting {padding-right:30px;} .rb_list .if_gallery .news_box .info {height:30px;} .rb_board .rb_form .input_box.if_sel .table {margin:0} .rb_board .rb_form .input_box.if_sel .table ul {display:block; overflow:hidden; margin-left:-5px; width:auto; border-spacing:0;} .rb_board .rb_form .input_box.if_sel .table li {width:50%; float:left;} .rb_board .rb_form .input_box.if_sel .table .rb_select ,.rb_board .rb_form .input_box.if_sel .table .r_design {margin-left:5px; width:auto;} .rb_board .rb_form .input_box.if_sel .table li+ li {} .nletter_list {margin-top:20px;} .nletter_list li {width:33.3333333%;} .nletter_list.if_full {padding:0 35px;} .nletter_list .prevnext {margin-top:-45px;} .nletter_list .prevnext .ic img {height:24px;} .rb_pop .tit {padding:15px;} } /* **************************************** * â—† 500px ~ * **************************************** */ @media screen and (max-width:500px) { .wrap:before {content:"500"; } /* 문의폼 */ .rb_board .rb_form .inner dt {width:90px; padding:10px 6px;} .rb_board .rb_form input.design {padding:0 7px;} .rb_board .rb_form .rb_select select {padding-right:20px; padding-left:7px;} .rb_board .rb_form .rb_select .icons {width:25px;} .rb_board .rb_form .rb_select .icons:before {width:25px;} .rb_board .rb_form .tr.if_editor dt {display:none;} .rb_board .rb_form .tr.if_editor dd {background:#f5f5f5;} .rb_board label.r_design {margin-right:5px;} /* .rb_top.if_qna .total em {display:none;} .rb_top.if_qna .search {padding-left:70px;} .rb_top .search .this_write {width:80px;} .rb_top .search .this_write .c_btn {font-size:13px;} .rb_top .search_form .input_search {padding-left:5px;} */ .rb_top.if_qna .total em {display:none;} .rb_list .posting {padding-right:50px;} /* .rb_photo .photo_box .tit .tx {padding-top:10px;} */ .rb_paper .photo_box .tit .tx {padding-top:10px;} .rb_tab .inner .btn {font-size:13px; letter-spacing:-0.5px;} } /* **************************************** * â—† 450px ~ * **************************************** */ @media screen and (max-width:450px) { .wrap:before {content:"450"; } } /* **************************************** * â—† 400px ~ * **************************************** */ @media screen and (max-width:400px) { .wrap:before {content:"400"; } .c_page_tit .title .tit {font-size:27px;} /* 문의폼 */ .c_board .c_agree .form .textarea_design {padding:15px;} .c_agree .agree_add_info th {padding:8px 5px; line-height:1.3; } .c_agree .agree_add_info td {padding:8px 5px; line-height:1.3;} .c_agree .agree_check label {line-height:18px;} .c_agree .agree_check input {margin-top:0;} .rb_list .posting {padding-right:20px;} .rb_board .agree_add_info .table {border:1px solid #ddd;} .rb_board .agree_add_info .td {display:block; border:0;} .rb_board .agree_add_info .td+ .td {border-left:0; border-top:1px solid #ddd;} .rb_board .agree_add_info dl {display:table; width:100%; table-layout:fixed;} .rb_board .agree_add_info dt, .rb_board .agree_add_info dd {display:table-cell; vertical-align:middle;} .rb_board .agree_add_info dt {width:90px; text-align:center;} .rb_board .agree_add_info dd {border:0; text-align:left; } .rb_agree .agree_form .agree {padding:8px 10px 10px;} .rb_paginate .inner.if_mo .btn_first {display:none;} .rb_paginate .inner.if_mo .btn_last {display:none;} /* .rb_tab .inner ul {} .rb_tab .inner li:first-child {width:60px;} .rb_tab .inner .btn {font-size:12px; } */ .rb_board .rb_form .ess .table .input_box, .rb_board .rb_form .ess .table .label_box {display:block;} .rb_board .rb_form .ess .table .label_box {padding-left:0} .nletter_list li {width:50%;} .nletter_list.if_full {padding:0 30px;} .nletter_list .prevnext {margin-top:-43px;} .nletter_list .prevnext a {padding:20px 5px;} .nletter_list .prevnext .ic img {height:20px;} .c_btnbox ul {margin-left:-5px;} .c_btn {margin-left:5px; } } /* **************************************** * â—† 350px ~ * **************************************** */ @media screen and (max-width:360px) { .wrap:before {content:"360"; } .rb_board .rb_form .input_box.if_sel .table {margin:0} .rb_board .rb_form .input_box.if_sel .table li {width:100%;} .rb_board .rb_form .input_box.if_sel .table li+ li {margin-top:5px;} .rb_list .tbody .t_writer {margin-right:10px;} .rb_list .tbody .t_date {margin-right:10px;} } @charset 'utf-8'; h1 {font-size:inherit; font-weight:inherit; letter-spacing:inherit; word-wrap:break-word; line-height:inherit; word-break:keep-all; white-space:normal;} /* **************************************** * â—† 1300px ~ * **************************************** */ @media screen and (max-width:1300px) { } /* **************************************** * â—† 1024px ~ * **************************************** */ @media screen and (max-width:1024px) { h1 {font-size:0.97em} .ma_visual .active .visual_txt .text h1 {font-size:0.9em;} .ma_visual .active .visual_txt .title h1 {font-size:0.9em;} } /* **************************************** * â—† 1100px ~ * **************************************** */ @media screen and (max-width:1100px) { h1 {font-size:0.94em} } /* **************************************** * â—† 1000px ~ * **************************************** */ @media screen and (max-width:1000px) { h1 {font-size:0.91em} } /* **************************************** * â—† 900px ~ * **************************************** */ @media screen and (max-width:900px) { h1 {font-size:0.88em} .ma_visual .active .visual_txt .text h1 {font-size:0.8em;} .ma_visual .active .visual_txt .title h1 {font-size:0.8em;} .sb_board .board_top .input_design .input {font-size:14px;} } /* **************************************** * â—† 800px ~ * **************************************** */ @media screen and (max-width:800px) { h1 {font-size:0.85em} .sc_greeting .top_box .tit_box h1 {font-size:0.75em;} } /* **************************************** * â—† 700px ~ * **************************************** */ @media screen and (max-width:700px) { u { display: inline;} h1 {font-size:0.82em} .ma_visual .active .visual_txt .text h1 {font-size:0.7em;} /* 0.1씩 줄어듬 */ .ma_visual .active .visual_txt .title h1 {font-size:0.7em;} .sc_greeting .top_box .tit_box h1 {font-size:0.65em;} .if_eng .sc_vision .title h1 {font-size:0.73em;} } /* **************************************** * â—† 600px ~ * **************************************** */ @media screen and (max-width:600px) { h1 {font-size:0.79em} .ma_visual .active .visual_txt .text h1 {font-size:0.6em;} .ma_visual .active .visual_txt .title h1 {font-size:0.6em;} .ma_business dt h1 {font-size:0.8em;} .sb_board .board_top .input_design .input {font-size:13px;} .sb_board .board_top .search_form .input_search {font-size:13px;} .sub_top .location .depth h1 {font-size:0.82em;} .if_eng .sub_top .location .depth h1 {font-size:0.85em;} .sc_greeting .top_box .tit_box h1 {font-size:0.58em;} .sc_vision .title h1 {font-size:0.7em;} .if_eng .sc_vision .title h1 {font-size:0.63em;} } /* **************************************** * â—† 500px ~ * **************************************** */ @media screen and (max-width:500px) { /* h1 {font-size:0.76em} */ .ma_news .btn_box .btn .txt h1 {font-size:0.76em;} .ma_business dt h1 {font-size:0.77em;} .ma_win .top .left dt h1 {font-size:0.7em;} .ma_win .top .left dd h1 {font-size:0.7em;} .ma_win .top .result dt li h1 {font-size:0.7em;} .ma_win .top .result dd h1 {font-size:0.76em;} .ma_win .bn_box dd h1 {font-size:0.76em;} .sub_top .sub_visual .tit h1 {font-size:0.71em;} .ctg2_wrap dt h1 {font-size:0.71em;} .ctg2_wrap .share_box .tit h1 {font-size:0.71em;} .ctg2_wrap .share_box .txt h1 {font-size:0.71em;} .sc_top .title h1 {font-size:0.71em;} .sc_top dt h1 {font-size:0.71em;} .sc_top dd h1 {font-size:0.71em;} .sc_greeting .top_box .tit_box h1 {font-size:0.55em;} .if_eng .sc_motto .round .tit h1 {font-size:0.7em;} .if_eng .sc_operation .op_box .tit h1 {font-size:0.7em;} .if_eng .sc_operation .first .op_box .title h1 {font-size:0.7em;} .if_eng .sb_part .title h1 {font-size:0.7em;} .sr_about .tit_box .tit h1 {font-size:0.7em;} .sr_about .txt_box .en h1 {font-size:0.7em;} .sr_about .txt_box .txt h1 {font-size:0.75em;} .if_eng .sc_vision .title h1 {font-size:0.58em;} } /* **************************************** * â—† 450px ~ * **************************************** */ @media screen and (max-width:450px) { /* h1 {font-size:0.73em} */ .ma_visual .active .visual_txt .text h1 {font-size:0.5em;} .ma_visual .active .visual_txt .title h1 {font-size:0.5em;} .ma_visual .active .visual_txt .sub h1 {font-size:0.71em;} .ma_news .btn_box .btn .txt h1 {font-size:0.73em;} .ma_business dt h1 {font-size:0.74em;} .ma_win .top .result dt li h1 {font-size:0.6em;} .ma_win .top .result dd h1 {font-size:0.71em;} .ma_win .bn_box dd h1 {font-size:0.73em;} .sc_greeting .top_box .tit_box h1 {font-size:0.48em;} .if_eng .sc_vision .title h1 {font-size:0.52em;} } /* **************************************** * â—† 400px ~ * **************************************** */ @media screen and (max-width:400px) { /* h1 {font-size:0.71em} */ .header .nav .ctg1 .txt h1 {font-size:0.7em;} .if_eng .header .nav .ctg1 .txt h1 {font-size:0.78em;} .sub_top .sub_visual .tit h1 {font-size:0.6em;} .ma_visual .active .visual_txt .text h1 {font-size:0.45em;} .ma_visual .active .visual_txt .title h1 {font-size:0.45em;} .ma_visual .active .visual_txt .sub h1 {font-size:0.65em;} .ma_business dt h1 {font-size:0.72em;} .ma_win .top .result dt li h1 {font-size:0.45em;} .ma_win .top .result dd h1 {font-size:0.65em;} .sb_board .board_top .input_design .input {font-size:12px;} .sb_board .board_top .search_form .input_search {font-size:12px;} .ma_win .bn_box dd h1 {font-size:0.71em;} .ctg2_wrap dt h1 {font-size:0.67em;} .if_eng .sc_motto .round .tit h1 {font-size:0.6em;} .if_eng .sc_operation .op_box .tit h1 {font-size:0.65em;} .sr_about .tit_box .tit h1 {font-size:0.65em;} .sr_about .txt_box .en h1 {font-size:0.6em;} .if_eng .sub_ctg .inner .btn h1 {font-size:0.7em;} .sr_part .part_box .round_box .tc_box h1 {font-size:0.68em;} .sc_greeting .top_box .tit_box h1 {font-size:0.45em;} .sc_vision .in_box .txt h1 {font-size:0.75em;} .if_eng .sc_vision .title h1 {font-size:0.5em;} } /* **************************************** * â—† 360px ~ * **************************************** */ @media screen and (max-width:360px) { .ma_visual .active .visual_txt .sub h1 {font-size:0.6em;} } /* **************************************** * â—† 높이 700px ~ * **************************************** */ @media (min-width: 1024px) and (max-height: 700px) { .ma_visual .active .visual_txt .text h1 {font-size:0.8em;} .ma_visual .active .visual_txt .title h1 {font-size:0.8em;} .ma_visual .active .visual_txt .sub h1 {font-size:0.9em;} } @charset 'utf-8'; /* ********************************************** * * 서브 레이아웃 * ********************************************** */ .sub_top {} .sub_top li {list-style:none;} .sub_top .sub_visual {width:100%; height:410px; position:relative; overflow:hidden;} .sub_top .sub_visual .bg {width:100%; height:410px; background-size:cover !important; z-index:-1; opacity: 0; filter: alpha(opacity=0); -ms-filter:alpha(opacity=0);} .sub_top .sub_visual .img {display:none;} .sub_top .sub_visual img {width:100%;} .sub_top .sub_visual .txt_box {position:absolute; left:0; top:0; width:100%; height:100%; padding:100px 20px 0px; box-sizing:border-box;} .sub_top .sub_visual .table {display:table; width:100%; table-layout:fixed; height:100%;} .sub_top .sub_visual dl {display:table-cell; vertical-align:middle; text-align:center;} .sub_top .sub_visual dt { overflow:hidden; padding-bottom:5px;} .sub_top .sub_visual dd {padding:10px 0 2px; overflow:hidden;} .sub_top .sub_visual .tit {color:#fff; font-weight:700; letter-spacing:-1px; line-height:1; font-size:35px;} .sub_top .sub_visual .tit {-webkit-transform: translate(0,60px); -ms-transform: translate(0,60px); -mo-transform: translate(0,60px); -o-transform: translate(0,60px); transform: translate(0,60px);} .sub_top .sub_visual .tit {animation: p_tit2 2s ease; -webkit-animation: p_tit2 2s ease; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; } .sub_top .sub_visual .txt {color:rgba(255,255,225,0.5); font-size:18px; font-weight:300; line-height:1; letter-spacing:-0.3px;} .sub_top .sub_visual .txt {-webkit-transform: translate(0,-60px); -ms-transform: translate(0,-60px); -mo-transform: translate(0,-60px); -o-transform: translate(0,-60px); transform: translate(0,-60px);} .sub_top .sub_visual .txt {animation: p_tit3 2s ease; -webkit-animation: p_tit3 2s ease; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; } .sub_top.sub_01 .sub_visual .bg {background:transparent url('../images/wepco/sub/sub_visual01.jpg') center top no-repeat; animation: subvs 5s forwards; -webkit-animation: subvs 5s forwards;} .sub_top.sub_02 .sub_visual .bg {background:transparent url('../images/wepco/sub/sub_visual02.jpg') center top no-repeat; animation: subvs 5s forwards; -webkit-animation: subvs 5s forwards;} .sub_top.sub_03 .sub_visual .bg {background:transparent url('../images/wepco/sub/sub_visual03.jpg') center top no-repeat; animation: subvs 5s forwards; -webkit-animation: subvs 5s forwards;} .sub_top.sub_04 .sub_visual .bg {background:transparent url('../images/wepco/sub/sub_visual04.jpg') center top no-repeat; animation: subvs 5s forwards; -webkit-animation: subvs 5s forwards;} .sub_top.sub_05 .sub_visual .bg {background:transparent url('../images/wepco/sub/sub_visual05.jpg') center top no-repeat; animation: subvs 5s forwards; -webkit-animation: subvs 5s forwards;} .sub_top.sub_06 .sub_visual .bg {background:transparent url('../images/wepco/sub/sub_visual06.jpg') center top no-repeat; animation: subvs 5s forwards; -webkit-animation: subvs 5s forwards;} @-webkit-keyframes subvs { 0% {opacity: 0; filter: alpha(opacity=0); -ms-filter:alpha(opacity=0); -ms-transform: scale(1.2,1.2); -o-transform: scale(1.2,1.2); -moz-transform: scale(1.2,1.2); -webkit-transform: scale(1.2,1.2); transform: scale(1.2,1.2); } 20% {opacity: 1; filter: alpha(opacity=100); -ms-filter:alpha(opacity=100); } 100% {opacity: 1; filter: alpha(opacity=100); -ms-filter:alpha(opacity=100); -o-transform: scale(1.0,1.0) rotate(0.01deg); -moz-transform: scale(1.0,1.0) rotate(0.01deg); -webkit-transform: scale(1.0,1.0) rotate(0.01deg); transform: scale(1.0,1.0) rotate(0.01deg);} } @keyframes subvs { 0% {opacity: 0; filter: alpha(opacity=0); -ms-filter:alpha(opacity=0); -ms-transform: scale(1.2,1.2); -o-transform: scale(1.2,1.2); -moz-transform: scale(1.2,1.2); -webkit-transform: scale(1.2,1.2); transform: scale(1.2,1.2); } 20% {opacity: 1; filter: alpha(opacity=100); -ms-filter:alpha(opacity=100); } 100% {opacity: 1; filter: alpha(opacity=100); -ms-filter:alpha(opacity=100); -o-transform: scale(1.0,1.0) rotate(0.01deg); -moz-transform: scale(1.0,1.0) rotate(0.01deg); -webkit-transform: scale(1.0,1.0) rotate(0.01deg); transform: scale(1.0,1.0) rotate(0.01deg);} } @-webkit-keyframes p_tit2 { from {-webkit-transform: translate(0,60px); -ms-transform: translate(0,60px); -mo-transform: translate(0,60px); -o-transform: translate(0,60px); transform: translate(0,60px);} to {-webkit-transform: translate(0,0); -ms-transform: translate(0,0); -mo-transform: translate(0,0); -o-transform: translate(0,0); transform: translate(0,0);} } @keyframes p_tit2 { from {-webkit-transform: translate(0,60px); -ms-transform: translate(0,60px); -mo-transform: translate(0,60px); -o-transform: translate(0,60px); transform: translate(0,60px);} to {-webkit-transform: translate(0,0); -ms-transform: translate(0,0); -mo-transform: translate(0,0); -o-transform: translate(0,0); transform: translate(0,0);} } @-webkit-keyframes p_tit3 { from {-webkit-transform: translate(0,-60px); -ms-transform: translate(0,-60px); -mo-transform: translate(0,-60px); -o-transform: translate(0,-60px); transform: translate(0,-60px);} to {-webkit-transform: translate(0,0); -ms-transform: translate(0,0); -mo-transform: translate(0,0); -o-transform: translate(0,0); transform: translate(0,0);} } @keyframes p_tit3 { from {-webkit-transform: translate(0,-60px); -ms-transform: translate(0,-60px); -mo-transform: translate(0,-60px); -o-transform: translate(0,-60px); transform: translate(0,-60px);} to {-webkit-transform: translate(0,0); -ms-transform: translate(0,0); -mo-transform: translate(0,0); -o-transform: translate(0,0); transform: translate(0,0);} } /* 로케이션 */ .sub_top .location { padding:0 60px; background:#f8f8f8; border-bottom:1px solid #ddd; box-sizing:border-box; height:55px; position:relative;} .sub_top .location .ul {display:table; table-layout:fixed; float:left; height:54px; box-sizing:border-box;} .sub_top .location .li {display:table-cell; border:1px solid #ddd; border-top:0; border-bottom:0; vertical-align:middle; } .sub_top .location .li.home {width:61px; box-sizing:border-box; text-align:center; font-size:0px;} .sub_top .location .home_btn {width:100%; height:54px; padding-top:20px; box-sizing:border-box; position:relative;} .sub_top .location .home_btn .icon {} .sub_top .location .home_btn .icon img {width:18px; float:left;} .sub_top .location .depth_box {position:relative; display:block; width:100%;} .sub_top .location .depth {padding:0 50px 0 20px; height:54px; line-height:55px; position:relative; min-width:238px; box-sizing:border-box; z-index:100; color:#888;} .sub_top .location .depth .ic {position:absolute; right:20px; top:50%; width:11px; height:6px; margin-top:-3px; overflow:hidden;} .sub_top .location .depth .triangle-down {width: 0; height: 0; border-left: 6px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #333; margin-bottom:5px;} .sub_top .location .depth .triangle-down {transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out;} .sub_top .location .depth .triangle-up {width: 0; height: 0; border-left: 6px solid transparent; border-right: 5px solid transparent; border-bottom: 6px solid #333;} .sub_top .location .depth .triangle-up {transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out;} .sub_top .location .ctg_box {position:absolute; left:-1px; right:-1px; top:0; padding-top:54px; border:1px solid #000; border-top:0; box-sizing:border-box; z-index:99; } .sub_top .location .ctg_box {transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0);} .sub_top .location .ctg_box ul {} .sub_top .location .ctg_box li {height:0; overflow:hidden; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } .sub_top .location .ctg_box .btn {display:block; height:55px; border-top:1px solid #ddd; box-sizing:border-box; padding:0 20px; line-height:55px; background:#fff; color:#333;} .sub_top .location .share {float:right; position:relative; margin-right:-36px;} .sub_top .location .share_btn {text-align:center; padding:0 36px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .sub_top .location .share_btn .txt {padding-left:29px; font-family:"Heebo"; color:#888; letter-spacing:0px; line-height:56px; position:relative;} .sub_top .location .share_btn .icon {position:absolute; left:0; top:50%; margin-top:-11px;} .sub_top .location .share_btn .icon img {width:19px; float:left;} .sub_top .location .share_box {position:absolute; left:0; top:54px; border:1px solid #333; box-sizing:border-box; width:100%; height:0px; box-sizing:border-box; opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0);} .sub_top .location .share_box {transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; overflow:hidden; z-index:10;} .sub_top .location .share_box:before {content:""; position:absolute; left:0; top:-9px; width:100%; height:9px; background:transparent url('../images/wepco/sub/sc_share_ar.gif') center top no-repeat; z-index:1;} .sub_top .location .share_box li {} .sub_top .location .share_box .btn {display:block; text-align:center; padding:7px 0 8px;} .sub_top .location .share_box .txt {padding-left:29px; font-size:13px; color:#888; position:relative; line-height:20px;} .sub_top .location .share_box .ic {position:absolute; left:0; top:50%; margin-top:-10px;} .sub_top .location .share_box .ic img {height:20px; float:left;} .sub_top .if_open_loc .depth {background:#fff; color:#a0a0a0;} .sub_top .if_open_loc .depth .triangle-down {margin-top:-11px;} .sub_top .if_open_loc .ctg_box {opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} .sub_top .if_open_loc .ctg_box li {height:55px; } /*.sub_top .if_open_share .share_btn {background:#333;} .sub_top .if_open_share .share_btn .txt {color:#fff !important;} .sub_top .if_open_share .share_btn .img_over {opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);}*/ .sub_top .if_open_share .share_box {display:block; padding:10px 0; height:130px; opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100); overflow:visible;} /* 2차 레이아웃 */ .ctg2_wrap {padding:60px 0 50px;} .ctg2_wrap li {list-style:none;} .ctg2_wrap dl {text-align:center;} .ctg2_wrap dt {font-size:45px; color:#000; font-weight:600; line-height:1; letter-spacing:-1px; position:relative; } .ctg2_wrap dd {color:#888; font-size:19px; letter-spacing:-1px; font-weight:300; line-height:1.3; max-width:800px; margin:20px auto 0;} .ctg2_wrap .share {display:none; position:absolute; right:-10px; top:50%; margin-top:-20px;} .ctg2_wrap .share .share_btn {position:relative;} .ctg2_wrap .share .share_btn .icon {font-size:0px; padding:10px;} .ctg2_wrap .share .share_btn img {height:26px;} .ctg2_wrap .share_box {position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:500; display:none;} .ctg2_wrap .share_box .in_box {position:absolute; left:0; top:0; height:100%; width:100%;} .ctg2_wrap .share_box .table {display:table; table-layout:fixed; height:100%; margin:0 auto;} .ctg2_wrap .share_box .inner {display:table-cell; vertical-align:middle; } .ctg2_wrap .share_box .s_box {background:#fff; border:1px solid #000; box-sizing:border-box; min-width:360px;} .ctg2_wrap .share_box .tit {position:relative; text-align:center; font-family:"Heebo"; font-size:30px; font-weight:700; padding:20px 0; background:#f9f9f9; letter-spacing:0px;} .ctg2_wrap .share_box .close_btn {position:absolute; right:0; top:50%; width:60px; height:60px; background:transparent url('../images/wepco_m/sub/sc_sns_close.png') center center no-repeat; background-size:20px; margin-top:-30px;} .ctg2_wrap .share_box ul {overflow:hidden; padding:20px; max-width:500px;} .ctg2_wrap .share_box li {float:left; width:33.333333%; box-sizing:border-box;} .ctg2_wrap .share_box .btn {display:block; text-align:center; padding:15px;} .ctg2_wrap .share_box .txt {font-size:16px; color:#888; position:relative; line-height:1; margin-top:15px; white-space:nowrap; font-weight:400; letter-spacing:0px;} .ctg2_wrap .share_box .txt h1 {white-space:nowrap;} .ctg2_wrap .share_box .ic {display:block; text-align:center; font-size:0px;} .ctg2_wrap .share_box .ic img {height:35px; } .if_open_mshare .ctg2_wrap .share_box {display:block;} /* 서브섹션 */ .section_wrap {} .section {} .section+ .section {margin-top:130px;} /* 서브 탭 */ .sub_ctg {height:65px; box-sizing:border-box; position:relative; text-align:center; text-align:center; margin-bottom:70px;} .sub_ctg li {list-style:none;} .sub_ctg:before {content:""; width:100%; height:1px; position:absolute; left:0; bottom:0; background:#003f98; z-index:1} .sub_ctg .inner {display:inline-block;} .sub_ctg .inner ul {display:table; table-layout:fixed; box-sizing:border-box; } .sub_ctg .inner li {display:table-cell; vertical-align:middle; position:relative; height:65px; box-sizing:border-box;} .sub_ctg .inner li {transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out;} .sub_ctg .inner li:before {content:""; width:100%; background:#ddd; position:absolute; left:0; top:0; height:1px;} .sub_ctg .inner .btn {color:#888; padding:0 40px; letter-spacing:-1px; font-size:17px; display:block; height:65px; line-height:63px; box-sizing:border-box;} .sub_ctg .inner .btn { white-space:nowrap; min-width:300px; box-sizing:border-box;} .sub_ctg .inner .btn:before {content:""; width:1px; height:64px; background:#ddd; position:absolute; left:-1px; top:0; z-index:1} .sub_ctg .inner .btn:after {content:""; width:1px; height:64px; background:#ddd; position:absolute; right:0; top:0; z-index:1} .sub_ctg .inner li:first-child .btn:before {left:0} .sub_ctg .inner .hit {background:#fff !important; z-index:2} .sub_ctg .inner .hit:after {content:""; width:100%; height:2px; position:absolute; left:0; bottom:-1px; background:#fff; z-index:2; } .sub_ctg .inner .hit:before {background:#003f98;} .sub_ctg .inner .hit .btn {color:#003f98 !important; font-weight:700; font-size:18px;} .sub_ctg .inner .hit .btn:before {background:#003f98; z-index:3; height:65px;} .sub_ctg .inner .hit .btn:after {background:#003f98; z-index:3; height:65px;} .sub_ctg.if_col .inner ul {width:100%;} /* ********************************************** * * 사업분야 * ********************************************** */ .sb_part {margin:0px -50px 0;} .sb_part li {list-style:none;} .sb_part .ul {display:table; width:100%; table-layout:fixed; box-sizing:border-box; } .sb_part .ul+ .ul {margin-top:70px;} .sb_part .li {display:table-cell; vertical-align:top; box-sizing:border-box; padding:0 50px;} .sb_part .part_box { position:relative;} .sb_part .li+ .li {border-left:1px solid #e8e8e8;} .sb_part .thumb {position:relative; width:100%; overflow:hidden;} .sb_part .thumb:before {content:""; position:absolute; right:0; top:0; width:100%; height:100%; background:#000; z-index:1; } .sb_part .thumb:before {transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0);} .sb_part .thumb img {width:100%; float:left; transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; } .sb_part .thumb .real_img {position:absolute; left:0; top:0; width:100%; height:100%;} .sb_part .thumb .real_img img {position:absolute; left:0; top:0;} .sb_part .thumb .fake_img {width:100%; float:left;} .sb_part .thumb .txt_box {position:absolute; left:50%; top:50%; width:180px; text-align:center; z-index:10; margin-top:-27px; margin-left:-90px;} .sb_part .thumb .txt_box {transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0);} .sb_part .thumb .txt_box .txt {display:block; height:55px; line-height:53px; color:#fff; border:1px solid #fff; border-radius:30px; overflow:hidden; box-sizing:border-box; text-align:center; font-size:17px;} .sb_part .thumb .txt_box .txt {transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .sb_part dl {padding-top:20px; overflow:hidden;} .sb_part dt {padding-right:100px; position:relative;} .sb_part dd {color:#888; font-size:17px; letter-spacing:-0.3px; font-weight:300; line-height:1.4; margin-top:10px;} .sb_part dd strong {display:inline-block; font-weight:500;} .sb_part .title {color:#000; font-size:30px; font-weight:500; letter-spacing:-2px; line-height:1.2;} .sb_part .more_btn {position:absolute; right:-10px; top:-5px; text-align:right; padding:10px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .sb_part .more_btn .tt {color:#b2b2b2; font-size:13px; letter-spacing:0px; font-family:"Heebo"; font-weight:500; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .sb_part .more_btn .ic {position:absolute; left:10px; bottom:9px; opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0); transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .sb_part .more_btn .ic img {height:5px; float:right;} .sb_part .text {display:block; color:#003f98; letter-spacing:-0.3px; font-weight:400; font-size:15px; margin-top:10px;} .sb_part .text .btn {position:relative; padding-right:21px; border-bottom:1px solid #003f98;} .sb_part .text .btn .ic {position:absolute; right:2px; top:50%; width:8px; height:4px; margin-top:-2px; margin-top:-1px\0; overflow:hidden;} .sb_part .text .btn .triangle-down {width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #003f98; margin-bottom:5px;} .sb_part .text .btn .triangle-down {transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out;} .sb_part .text .btn .triangle-up {width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 4px solid #003f98;} .sb_part .text .btn .triangle-up {transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out;} .sb_part .open_box {position:absolute; left:0; bottom:-308px; box-sizing:border-box; width:100%; padding:0px; z-index:15; display:none;} .sb_part .open_box .in_box {position:relative; border:1px solid #cdcdcd; background:#f5f5f5;} .sb_part .open_box .close_btn {position:absolute; right:0px; top:0px; padding:20px; z-index:1;} .sb_part .open_box .close_btn img {width:15px;} .sb_part .open_box .bg {position:relative; width:100%; text-align:center; font-size:0px; } .sb_part .open_box .bg .img {display:inline-block;} .sb_part .open_box .bg img {float:left;} .sb_part .open_box .on_txt {position:absolute; left:0; bottom:0; text-align:center; width:100%; height:100%; padding-top:150px; box-sizing:border-box;} .sb_part .open_box .on_txt .tb {display:table; width:100%; table-layout:fixed; height:100%;} .sb_part .open_box .on_txt .tc {display:table-cell; vertical-align:middle; color:#fff; font-weight:300; letter-spacing:0px; font-size:22px; line-height:1.6;} .sb_part .open_box .on_txt .tc em {display:block; font-family:"Heebo"; font-size:21px; letter-spacing:0px;} .sb_part .open_box .on_txt .tc strong {font-weight:700;} .sb_part .open_box .tt_box {position:absolute; left:0; bottom:15px;} .sb_part .open_box .table {} .sb_part .open_box ul {display:table; width:100%; table-layout:fixed;} .sb_part .open_box li {display:table-cell; vertical-align:middle; padding:20px 0;} .sb_part .open_box .left {text-align:left;} .sb_part .open_box .center {text-align:center;} .sb_part .open_box .right {text-align:right;} .sb_part .open_box .inner {display:inline-block; text-align:center; min-width:75px; margin:0 auto;} .sb_part .open_box .num {font-family:"Heebo"; color:#aaa; font-weight:500; font-size:17px; letter-spacing:-0.3px; line-height:1;} .sb_part .open_box .tit {color:#000; font-weight:500; letter-spacing:-0.3px; line-height:1; margin-top:5px;} .sb_part .open_box .top {padding:0 175px; height:80px;} .sb_part .open_box .top li {padding:10px 0;} .sb_part .open_box .top .center {padding:0 0 55px;} .sb_part .open_box .top .inner {min-width:auto;} .sb_part .open_box .middle {padding:0 50px;} .sb_part .open_box .middle ul {height:90px;} .sb_part .open_box .bottom {padding:0 20px;} .sb_part .if_open_ostop .open_box {display:block;} .sb_part .if_open_ostop .triangle-down {margin-top:-9px;} /* ********************************************** * * 사업실적 * ********************************************** */ .sb_project {background:transparent url('../images/wepco/sub/sb_pro_bg.jpg') left top no-repeat; padding:0 100px; overflow:hidden; margin-bottom:80px;} .sb_project li {list-style:none;} .sb_project .top_tit {text-align:center; color:#fff; font-size:30px; font-weight:700; height:100px; line-height:100px;} .sb_project .project_box {padding:60px 30px 0; background:#fff; position:relative; } .sb_project .project_box .rolling_box {display:inline-block; width:100%;} .sb_project .project_box ul {} .sb_project .project_box li {float:left; width:50%; box-sizing:border-box; padding:0 30px;} .sb_project .prevnext {position:absolute; bottom:110px; width:100px; text-align:center; background:#fff; z-index:10; padding:15px 0;} .sb_project .prevnext:before {content:""; position:absolute; left:0; top:100%; width:100%; height:300%; background:#fff;} .sb_project .prevnext.prev {left:-100px;} .sb_project .prevnext.next {right:-100px;} .sb_project .prevnext .img_off {transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .sb_project .prevnext .img_over {transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .sb_project .prevnext img {height:50px;} .sb_project .pro_box {position:relative;} .sb_project .pro_box .thumb {position:relative; width:100%; overflow:hidden; background:#eee url('../images/wepco/sub/sb_pro_none.png') center center no-repeat;} .sb_project .pro_box .thumb:before {content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.05); z-index:1; } .sb_project .pro_box .thumb img {width:100%; float:left; } .sb_project .pro_box .real_img {position:absolute; left:0; top:0; width:100%; height:100%;} .sb_project .pro_box .real_img img {position:absolute; left:0; top:0;} .sb_project .pro_box .fake_img {width:100%; float:left;} .sb_project .pro_box .info {padding:20px 0 0; position:relative; /* height:90px; */} .sb_project .pro_box .info:before {content:""; position:absolute; left:-50%; top:0; width:300%; height:200%; background:#fff;} .sb_project .pro_box .txt {overflow:hidden; position:relative; z-index:1;} .sb_project .pro_box .ctg {color:#003f98; font-size:16px; font-weight:700; letter-spacing:-1px; float:left;} .sb_project .pro_box .date {font-family:"Heebo"; color:#aaa; letter-spacing:0px; float:right;} .sb_project .pro_box dl {margin-top:10px; position:relative; z-index:1;} .sb_project .pro_box dt {font-size:21px; color:#000; letter-spacing:-1px; line-height:1.2;} .sb_project .pro_box dd {color:#888; margin-top:10px;} /* 일반 리스트 */ .sb_board {} .sb_board li {list-style:none;} .sb_board .ctg_tab {} .sb_board .ctg_tab ul {display:table; width:100%; table-layout:fixed; box-sizing:border-box;} .sb_board .ctg_tab li {display:table-cell; vertical-align:bottom; border:1px solid #ddd; background:#f4f4f4; text-align:center;} .sb_board .ctg_tab li {transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .sb_board .ctg_tab dl {position:relative; padding:25px 0 20px;} .sb_board .ctg_tab dt {opacity: .5; -ms-filter:alpha(opacity=50); filter:alpha(opacity=50); transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .sb_board .ctg_tab dt img {height:60px;} .sb_board .ctg_tab dd {font-size:16px; font-weight:400; color:#999; letter-spacing:-1px; line-height:1; margin-top:15px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .sb_board .ctg_tab .img_over {transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .sb_board .ctg_tab .img_off {transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .sb_board .ctg_tab .hit {background:#333 !important; } .sb_board .ctg_tab .hit dt {opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} .sb_board .ctg_tab .hit .img_off {opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0);} .sb_board .ctg_tab .hit .img_over {opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} .sb_board .ctg_tab .hit dd {color:#fff !important; font-weight:500;} /* 리스트 상단 */ .sb_board .board_top {margin:0px 0 20px; position:relative;} .sb_board .ctg_tab+ .board_top {margin-top:50px;} .sb_board .board_top:after {content:""; display:table; width:100%;} .sb_board .board_top li {list-style:none;} .sb_board .board_top .total {float:left; color:#000; margin-top:10px; font-size:20px; font-family:"Heebo"; font-weight:300; letter-spacing:0px;} .sb_board .board_top .total strong {font-weight:500; color:#000; } /* 리스트 검색 */ .sb_board .board_top dl {} .sb_board .board_top dt {overflow:hidden; float:left;} .sb_board .board_top dd {float:left; margin-left:10px;} .sb_board .board_top .input_design {float:left;} .sb_board .board_top .input_design .input {width:90px; text-align:center; height:41px; border:1px solid #ddd; box-sizing:border-box; font-family:"Heebo"; color:#888; letter-spacing:0px; background:#fff;} .sb_board .board_top .input_design .input:focus {border-color:#999;} .sb_board .board_top .dash {width:25px; text-align:center; height:41px; line-height:41px; color:#888; float:left;} .sb_board .board_top .btn {min-width:100px; height:41px; text-align:center; line-height:39px; background:#666; border:1px solid #666; box-sizing:border-box; color:#fff; font-size:14px;} .sb_board .board_top .btn {transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .sb_board .board_top .btn.line {background:#003f98; border-color:#003f98; color:#fff;} .sb_board .board_top .search {float:right; overflow:hidden; box-sizing:border-box;} .sb_board .board_top .search .this_search {float:right; display:none !important;} .sb_board .board_top .search li {float:left; padding-left:10px;} .sb_board .board_top .search .select {width:180px; height:41px;} .sb_board .board_top .search li:last-child .select {width:150px;} .sb_board .board_top .search .select select {font-size:14px !important; padding-left:15px; color:#888; font-weight:400;} .sb_board .board_top .search .select .icons {color:#000; line-height:41px;} .sb_board .board_top .search .select .icons:before {font-size:11px; line-height:41px;} .sb_board .board_top .search .this_write {width:100px;} .sb_board .board_top .search .this_write .c_btn {width:100%; padding:0px; margin:0;} .sb_board .board_top .search_form {position:relative; overflow:hidden; box-sizing:border-box;} .sb_board .board_top .search_form form {display:block; width:100%; box-sizing:border-box;} .sb_board .board_top .search_form .input_search {border:1px solid #ddd; height:41px; box-sizing:border-box; padding:0 75px 0 10px; width:250px; background:#fff; font-size:14px;} .sb_board .board_top .search_form .input_search:focus {border-color:#999;} .sb_board .board_top .search_form .btn_box {position:absolute; right:0; top:0; width:45px; height:41px; color:#fff; text-align:center; line-height:35px;} .sb_board .board_top .search_form .btn_box .btn_search {background:transparent url('../images/rb_img/icon_search.png') center center no-repeat; float:left;} .sb_board .board_top .search_form .btn_box .btn_search {color:#fff; height:41px; line-height:35px; width:100%; font-size:0px;} .sb_board .board_top .search_form .btn_viewall {position:absolute; right:40px; top:5px; padding:10px; z-index:2;} .sb_board .board_top .search_form .btn_viewall img {width:17px; float:left;} .sb_board .board_top .search_form .search_btn {display:none; width:45px; height:41px; background:transparent url('../images/rb_img/icon_search.png') center center no-repeat; background-size:20px !important;} .sb_board .board_top .search_form .search_btn {opacity:.5;} /* 목록 */ .sb_list {overflow:hidden; } .sb_list+ .sb_list {margin-top:70px;} .sb_list li {list-style:none;} .sb_list .group_tit {} .sb_list .group_tit dl {display:table; width:100%; table-layout:fixed; height:60px;} .sb_list .group_tit dt, .sb_list .group_tit dd {display:table-cell; vertical-align:middle; } .sb_list .group_tit dt {width:70px; background:#333; text-align:center; color:#fff; font-family:"Heebo"; font-weight:500; letter-spacing:0px; font-size:19px;} .sb_list .group_tit dd {background:#f4f4f4; font-size:18px; color:#333; padding:0 20px;} .sb_list .list {display:table; width:100%; box-sizing:border-box; table-layout:fixed; border-top:2px solid #000;} .sb_list .list ul {display:table-row; } .sb_list .list li {display:table-cell; vertical-align:middle; text-align:center; box-sizing:border-box; line-height:1.25; white-space:nowrap; position:relative; border-bottom:1px solid #ddd;} .sb_list .thead li {color:#333; padding:17px 5px; font-weight:400;} .sb_list .tbody li {padding:15px 5px; font-size:15px; } .sb_list .t_number {width:110px; } .sb_list .t_date {width:220px;} .sb_list .t_title {text-align:left;} .sb_list .t_name {width:230px; } .sb_list .t_state {width:123px;} .sb_list .t_state .attend {display:none; font-weight:500; font-size:16px; color:#00998f;} .sb_list .t_state .subject {font-size:16px; font-weight:500; color:#e88327;} .sb_list .if_attend .t_state .subject {display:none; } .sb_list .if_attend .t_state .attend {display:block;} .sb_list .tbody .t_number {color:#aaa; font-size:16px; font-family:"Heebo";} .sb_list .tbody .t_location {color:#003f98; font-weight:500;} .sb_list .tbody .t_date { } .sb_list .tbody .t_date .date {color:#333; font-family:"Heebo"; letter-spacing:0px;} .sb_list .tbody .t_date .dash {color:#999; font-family:"Heebo"; letter-spacing:0px; padding:0 1px;} .sb_list .tbody .t_title {text-align:left; color:#666; padding:0 20px 0 40px;} .sb_list .tbody .t_title em {color:#003f98; font-weight:500; padding-right:20px;} .sb_list .tbody .t_name {text-align:right; padding-right:30px;} .sb_list .tbody .t_name .name {position:relative; display:inline;} .sb_list .tbody .t_name h1 {display:inline;} .sb_list .tbody .t_name .ic {position:absolute; left:0; top:5px; font-size:0px; display:none;} .sb_list .tbody .t_name .ic img {height:12px; float:left; } .sb_list .tbody.if_kepco .t_name .name {padding-left:25px;} .sb_list .tbody.if_kepco .t_name .ic {display:block;} /* 게시물 하나 */ .sb_list .tit_wrap {overflow:hidden;} .sb_list .posting {overflow:hidden; position:relative; float:left; box-sizing:border-box; height:50px; line-height:50px; max-width:100%; } .sb_list .posting .title {overflow:hidden; text-overflow:ellipsis; white-space: nowrap; word-wrap: normal !important; display:block; letter-spacing:-0.5px;} .sb_list .posting .right {float:right; margin-top:17px;} .sb_list .posting .right .icons {height:16px; float:left; margin-left:5px; display:block !important;} .sb_list .posting .icons.new {background:transparent url('../images/rb_img/board_new.png') left top no-repeat; width:16px;} .sb_list .posting .icons.secret {background:transparent url('../images/rb_img/board_secret.png') left top no-repeat; width:13px;} .sb_list .posting .icons.photo {background:transparent url('../images/rb_img/board_photo.png') left top no-repeat; width:18px;} .sb_list .posting .icons.file {background:transparent url('../images/rb_img/board_file1.gif') left center no-repeat; width:16px;} .sb_list .btn_file {position:relative; overflow:hidden; width:40px; display:inline-block;} .sb_list .btn_file:before {content:""; width:100%; height:100%; position:absolute; left:0; top:0; z-index:1;} .sb_list .btn_file .btn {background:transparent url('../images/rb_img/board_file.png') center center no-repeat; height:25px; display:block;} .sb_list .btn_file .btn {opacity: 0.3; filter: alpha(opacity=30); -ms-filter:alpha(opacity=30);} .sb_list .btn_file .on {background:transparent url('../images/rb_img/board_file_on.png') center center no-repeat; display:block; height:25px; opacity: 0; filter: alpha(opacity=0); -ms-filter:alpha(opacity=0);} .sb_list .btn_file .on {transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .sb_list .btn_file.if_upload:before {display:none; } .sb_list .btn_file.if_upload .btn {opacity: 1; filter: alpha(opacity=100); -ms-filter:alpha(opacity=100);} /* 연구소 리스트 */ .sb_board.if_rnd .board_top .total {margin-top:0;} .sb_board.if_rnd .sb_list .t_name {width:210px;} .sb_board.if_rnd .sb_list .t_date {width:160px;} .sb_board.if_rnd .sb_list .tbody .t_name {padding-right:50px;} .sb_board.if_rnd .sb_list .tbody .t_date {font-family:"Heebo"; color:#333; font-weight:400;} .sb_board.if_rnd .sb_list .tbody .t_title {padding-left:10px;} .sb_board.if_rp .sb_list .list {border-top:0;} .sb_board.if_rp .sb_list .thead {background:#f4f4f4;} /* ********************************************** * * 연구소 소개 * ********************************************** */ .sr_about {} .sr_about li {list-style:none;} .sr_about dl {display:table; width:100%; table-layout:fixed;} .sr_about dt, .sr_about dd {display:table-cell; vertical-align:top;} .sr_about dt {width:480px;} /* .sr_about .img {overflow:hidden; opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0);} */ .sr_about .img img {width:480px; float:left;} .sr_about .this_right .img {margin-top:-155px;} .sr_about dd {padding:45px 0 0 0px; overflow:hidden;} .sr_about .tit_box {padding-left:80px; position:relative; display:inline-block;} .sr_about .tit_box .tit {font-weight:100; font-size:40px; letter-spacing:-1px; position:relative; color:#000; padding-bottom:20px;} .sr_about .tit_box .tit strong {font-weight:700;} /* .sr_about .tit_box .tit:after {content:""; width:100%; height:100%; position:absolute; right:0; top:-5px; z-index:5; background:#fff;} */ .sr_about .tit_box .line {position:absolute; left:0; bottom:0; width:100%; height:1px; background:#000;} .sr_about .txt_box {padding-left:80px; overflow:hidden; margin-top:20px;} .sr_about .txt_box .en {font-family:"Heebo"; color:#ccc; font-size:60px; font-weight:100; letter-spacing:0px; position:relative;} /* .sr_about .txt_box .en:after {content:""; width:100%; height:100%; position:absolute; right:0; top:-5px; z-index:5; background:#fff;} */ .sr_about .txt_box .txt {font-size:19px; color:#888; max-width:670px; margin-top:10px; position:relative; line-height:1.4;} /* .sr_about .txt_box .txt:after {content:""; width:100%; height:100%; position:absolute; right:0; top:-5px; z-index:5; background:#fff;} */ .sr_about .this_right dd {text-align:right; padding-top:80px;} .sr_about .this_right dd.if_mo {display:none;} .sr_about .this_right .tit_box {padding-left:0; padding-right:80px;} .sr_about .this_right .txt_box {padding-left:0; padding-right:80px;} .sr_about .this_right .txt_box .txt { max-width:600px; float:right;} /* .sr_about .if_scroll .img {animation: motion_bg 1.5s ease; -webkit-animation: motion_bg 1.5s ease; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;} .sr_about .if_scroll .tit_box .tit:after {animation: txt_white 1.5s ease; -webkit-animation: txt_white 1.5s ease; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; } .sr_about .if_scroll .tit_box .tit:after {animation-delay: 0.3s; -webkit-animation-delay: 0.3s;} .sr_about .if_scroll .tit_box .line {animation: motion_line 1.7s ease; -webkit-animation: motion_line 1.7s ease; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards} .sr_about .if_scroll .tit_box .line {animation-delay: 0.3s; -webkit-animation-delay: 0.3s;} .sr_about .if_scroll .txt_box .en:after {animation: txt_white 2s ease; -webkit-animation: txt_white 2s ease; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; } .sr_about .if_scroll .txt_box .en:after {animation-delay: 0.7s; -webkit-animation-delay: 0.7s;} .sr_about .if_scroll .txt_box .txt:after {animation: txt_white 2.5s ease; -webkit-animation: txt_white 2.5s ease; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; } .sr_about .if_scroll .txt_box .txt:after {animation-delay: 1s; -webkit-animation-delay: 1s;} @-webkit-keyframes motion_bg { from {} to {margin-left:0; margin-right:0px; opacity: 1; filter: alpha(opacity=100); -ms-filter:alpha(opacity=100);} } @keyframes motion_bg { from {} to {margin-left:0; margin-right:0px; opacity: 1; filter: alpha(opacity=100); -ms-filter:alpha(opacity=100);} } @-webkit-keyframes motion_line { from {width:0px;} to {width:100%;} } @keyframes motion_line { from {width:0px;} to {width:100%;} } @-webkit-keyframes txt_white { from {} to {width:0;} } @keyframes txt_white { from {} to {width:0;} } */ /* 연구분야 */ .sr_part {text-align:center; background:#f3f3f3; padding:70px 0;} .sr_part li {list-style:none;} .sr_part .comment {font-size:23px; color:#003f98; margin-bottom:30px;} .sr_part .part_box {text-align:center; display:inline-block;} .sr_part .part_box .title {font-size:35px; color:#000; font-weight:500; display:inline-block; min-width:190px; background:#f3f3f3; z-index:1; position:relative; padding:0 20px;} .sr_part .part_box .title:before {content:""; position:absolute; left:0; bottom:22px; width:27px; height:2px; background:#9db4d3; transform: rotate(45deg); margin-left:-22px;} .sr_part .part_box .title:after {content:""; position:absolute; right:0; bottom:4px; width:27px; height:2px; background:#9db4d3; transform: rotate(45deg); margin-right:-23px;} .sr_part .part_box .round_box {text-align:center; padding:36px 40px; position:relative; border-radius:600px; border:2px solid #9db4d3; box-sizing:border-box; margin-top:-15px;} .sr_part .part_box .round_box:before {} .sr_part .part_box .round_box:after {} .sr_part .part_box .round_box ul {display:inline-block;} .sr_part .part_box .round_box li {float:left; width:240px; height:240px; border-radius:500px; box-sizing:border-box; position:relative;} .sr_part .part_box .round_box li+ li:before {content:""; position:absolute; left:-24px; top:50%; width:20px; height:20px; margin-top:-10px;} .sr_part .part_box .round_box li+ li:before {background:#000; border:1px solid #000; border-radius:100px; overflow:hidden; box-sizing:border-box; opacity: .3; -ms-filter:alpha(opacity=30); filter:alpha(opacity=30); z-index:1;} .sr_part .part_box .round_box .table {display:table; width:100%; table-layout:fixed; height:100%;} .sr_part .part_box .round_box .txt_box {width:100%; height:100%; background:#fff; border-radius:500px; overflow:hidden;} .sr_part .part_box .round_box .tc_box {display:table-cell; vertical-align:middle; font-size:21px; font-weight:500; line-height:1.2;} .sr_part .part_box .round_box .no1 {border:30px solid rgba(0,153,143,0.7);} .sr_part .part_box .round_box .no1 .tc_box {color:#00998f;} .sr_part .part_box .round_box .no2 {border:30px solid rgba(0,63,152,0.7); margin:0 -30px;} .sr_part .part_box .round_box .no2 .tc_box {color:#003f98;} .sr_part .part_box .round_box .no3 {border:30px solid rgba(61,40,115,0.7);} .sr_part .part_box .round_box .no3 .tc_box {color:#3d2873;} .sr_part .sub_box {margin-top:50px;} .sr_part .sub_box .ul {display:table; width:100%; table-layout:fixed; box-sizing:border-box;} .sr_part .sub_box .li {display:table-cell; vertical-align:top; padding:15px 40px;} .sr_part .sub_box .li+ .li {border-left:1px solid #ddd;} .sr_part .sub_box dl {} .sr_part .sub_box dt {font-size:0px; overflow:hidden; display:table; width:100%; table-layout:fixed;} .sr_part .sub_box dt img {width:84px;} .sr_part .sub_box dd {margin-top:20px;} .sr_part .sub_box .txt_box {display:inline-block; margin-top:20px;} .sr_part .sub_box .num {font-family:"Heebo"; font-size:34px; float:left; line-height:1;} .sr_part .sub_box .tit {font-size:23px; font-weight:500; margin-top:2px; line-height:1.2; float:left; margin-left:10px;} .sr_part .sub_box .tt_box {text-align:left; clear:both; height:62px;} .sr_part .sub_box .tt {color:#888; line-height:1.3; display:block; position:relative; padding-left:10px;} .sr_part .sub_box .tt:before {content:""; position:absolute; left:0; top:7px; width:3px; height:3px; background:#888; border-radius:100px; overflow:hidden; border:1px solid #888; box-sizing:border-box;} .sr_part .sub_box .tt+ .tt {margin-top:5px;} .sr_part .sub_box .photo {margin-top:20px; overflow:hidden;} .sr_part .sub_box .photo span {width:100%;} .sr_part .sub_box .photo img {width:100%; float:left;} .sr_part .sub_box .photo .txt {text-align:center; padding-top:10px; color:#888;} .sr_part .sub_box .no1 .num, .sr_part .sub_box .no1 .tit {color:#00998f;} .sr_part .sub_box .no2 .num, .sr_part .sub_box .no2 .tit {color:#003f98;} .sr_part .sub_box .no3 .num, .sr_part .sub_box .no3 .tit {color:#3d2873;} .sr_part .btn_box {text-align:center; margin-top:60px;} .sr_part .btn_box .btn {text-align:center; background:#fff; border:1px solid #000; padding:21px 40px 20px; position:relative; overflow:hidden; } .sr_part .btn_box .btn.color {background:#003f98; border-color:#003f98;} .sr_part .btn_box .btn {transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .sr_part .btn_box .btn .img_over {transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .sr_part .btn_box .btn .inner {display:inline-block; position:relative; z-index:1;} .sr_part .btn_box .btn .txt {padding-left:10px; float:left; line-height:18px; font-size:19px; font-weight:500; color:#000; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .sr_part .btn_box .btn .ic {float:left; margin-top:-2px;} .sr_part .btn_box .btn .ic img {height:20px; float:left;} /* ********************************************** * * 인사말 * ********************************************** */ .sc_top {} .sc_top ul {display:table; width:100%; table-layout:fixed; background:transparent url('/theme/sample03/img/sc_gr_top.jpg') right top no-repeat; height:450px;} .sc_top li {list-style:none; display:table-cell; vertical-align:middle; text-align:center;} .sc_top .bg {background:rgba(0,80,118,0.3);} .sc_top .if_mo {display:none;} .sc_top dl {max-width:490px; margin:0 auto; padding:0 20px;} .sc_top dt {font-size:28px; color:#fff; font-weight:700; line-height:1.3; letter-spacing:-1px;} .sc_top dd {font-size:21px; color:rgba(255,255,255,0.7); padding:0 30px; margin-top:20px; line-height:1.3;} .sc_top .title {font-family:"bentoni" !important; font-weight:600; font-size:40px; color:rgba(255,255,255,0.7); letter-spacing:0px; line-height:1; padding:20px 0; } .sc_top .title h1 {font-family:"bentoni" !important; } .sc_top .title {border-top:1px solid rgba(255,255,255,0.5); border-bottom:1px solid rgba(255,255,255,0.5);} .sc_greeting {margin-top:90px;} .sc_greeting li {list-style:none;} .sc_greeting .layout_fix {padding:0 100px; box-sizing:border-box;} .sc_greeting .top_box {} .sc_greeting .top_box .tit_box {position:relative; font-size:37px; color:#000; font-weight:300; letter-spacing:-2px; line-height:1.4; padding:40px 0; z-index:1;} .sc_greeting .top_box .line {position:absolute; left:0; top:0; width:110px; height:2px; background:#000;} .sc_greeting .mid_box {background:#f2f2f2; position:relative;} .sc_greeting .mid_box:before {content:""; position:absolute; left:50%; top:0; margin-left:400px; background:transparent url('../images/wepco/sub/sc_gr_bg.jpg') left top no-repeat; width:700px; height:100%;} .sc_greeting .mid_box .layout_fix:after {content:""; position:absolute; left:0; top:0; margin-left:-170px; background:transparent url('../images/wepco/sub/sc_gr_left.png') left bottom no-repeat; width:249px; height:100%;} .sc_greeting .mid_box ul {display:table; width:100%; table-layout:fixed;} .sc_greeting .mid_box li {display:table-cell; vertical-align:top;} .sc_greeting .mid_box .this_left {padding-top:50px; font-size:17px; color:#888; padding-bottom:35px; line-height:1.6;} .sc_greeting .mid_box .this_right {vertical-align:bottom; width:300px;} .sc_greeting .mid_box .img {margin-right:-100px; float:right; margin-top:-185px;} .sc_greeting .name {margin-top:30px;} .sc_greeting .name dl {text-align:right;} .sc_greeting .name dt {font-size:17px; color:#333;} .sc_greeting .name dd {color:#333; font-size:19px;} .sc_greeting .name dd strong {font-weight:700;} .sc_greeting .bot_box {} .sc_greeting .bot_box .layout_fix {padding-right:20px;} .sc_greeting .bot_box ul {display:table; width:100%; table-layout:fixed;} .sc_greeting .bot_box li {display:table-cell; vertical-align:top;} .sc_greeting .bot_box .img_box {width:540px;} .sc_greeting .bot_box .img_box.mo {display:none;} .sc_greeting .bot_box .img {float:left; margin-top:-210px; position:relative;} .sc_greeting .bot_box .img:before {content:""; position:absolute; left:-140px; top:0; width:140px; height:100%; background:transparent url('../images/wepco/sub/sc_gr_left.png') left bottom no-repeat;} .sc_greeting .bot_box .txt_box {padding:75px 0 0 100px;} .sc_greeting .bot_box .txt {font-size:17px; color:#888; line-height:1.4;} .sc_greeting .bot_box .txt+ .txt {margin-top:30px;} /* ********************************************** * * 회사개요 * ********************************************** */ /* 경영이념 및 비전 */ .sc_motto { margin-top:70px;} .sc_motto li {list-style:none;} .sc_motto .table {display:table; width:100%; table-layout:fixed; height:100%;} .sc_motto .tc_box {display:table-cell; vertical-align:middle; padding:0 20px;} .sc_motto .ul {max-width:1036px; position:relative; margin:0 auto;} .sc_motto .li {text-align:center; position:relative;} .sc_motto .round1 {position:absolute; left:0; top:20px;} .sc_motto .round1:before {content:""; position:absolute; left:100%; top:50%; width:100%; height:1px; background:#ccc;} .sc_motto .round2 {position:absolute; right:0; top:20px;} .sc_motto .round2:before {content:""; position:absolute; right:100%; top:50%; width:100%; height:1px; background:#ccc;} .sc_motto .round3 {padding-top:65px;} .sc_motto .round3:before {content:""; position:absolute; left:50%; top:-100%; width:1px; height:100%; background:#ccc; margin-top:65px;} .sc_motto .round {width:256px; height:256px; margin:0 auto; position:relative;} .sc_motto .round .r_box {width:256px; height:256px; margin:0 auto; position:relative; z-index:5; border-radius:300px; box-sizing:border-box; border:1px solid #ccc; background:#fff;} .sc_motto .round .r_box .tt {color:#fff; font-size:19px; font-weight:500; line-height:1.2;} .sc_motto .round .bg {position:absolute; left:50%; bottom:-3px; border-radius:300px; overflow:hidden; box-sizing:border-box; margin-left:-124px;} .sc_motto .round .bg img {height:60px;} .sc_motto .round .line {position:absolute; left:50%; bottom:-12px; width:324px; height:164px; border-radius:0 0 400px 400px; border:1px dashed #003f98; border-top:0; margin-left:-162px; background:#fff;} .sc_motto .round .line {z-index:2; box-sizing:border-box; } .sc_motto .round .point {position:absolute; width:11px; height:11px; border-radius:100px; box-sizing:border-box; z-index:4; background:#003f98; border:1px solid #003f98;} .sc_motto .round .point.p1 {left:-6px; top:-5px;} .sc_motto .round .point.p2 {right:-6px; top:-5px;} .sc_motto .round .point.p3 {left:50%; bottom:-6px; margin-left:-5px;} .sc_motto .round dt {font-size:0px;} .sc_motto .round dt img {width:68px;} .sc_motto .round dd {padding-top:30px;} .sc_motto .round .tit {font-size:31px; color:#003f98; font-weight:700; line-height:1;} .sc_motto .round .txt {font-size:22px; color:rgba(51,51,51,0.5); line-height:1; margin-top:10px;} .sc_motto .center .round {width:300px; height:300px;} .sc_motto .center .round .r_box {width:300px; height:300px; background:#003f98; border-color:#003f98;} .sc_motto .center .round dt {padding-bottom:20px;} .sc_motto .center .round dt img {width:60px;} .sc_motto .center .round dd {font-size:40px; color:#fff; font-weight:500; padding-top:22px; border-top:1px solid rgba(255,255,255,0.1); line-height:1;} .sc_motto .center .tc_box {padding:0 60px 40px;} /*.sc_vision {background:transparent url('../images/wepco/sub/sv_bg.jpg') center bottom no-repeat;} .sc_vision li {list-style:none;} .sc_vision .ul {display:table; width:100%; table-layout:fixed; height:100%;} .sc_vision .li {display:table-cell; vertical-align:middle; padding:62px 60px;} .sc_vision .this_left {text-align:center;} .sc_vision .this_left dl {max-width:330px; margin:0 auto;} .sc_vision .this_left dt {font-size:40px; color:#fff; font-weight:100; line-height:1; margin-top:15px;} .sc_vision .this_left dd {font-size:33px; color:#fff; font-weight:700; line-height:1.4; } .sc_vision .this_right {background:rgba(0,11,57,0.8);} .sc_vision .this_right ul {max-width:500px; margin:0 auto;} .sc_vision .this_right li {} .sc_vision .this_right li+ li {border-top:1px solid rgba(255,255,255,0.1);} .sc_vision .this_right dl {display:table; width:100%; table-layout:fixed; height:90px;} .sc_vision .this_right dt, .sc_vision .this_right dd {display:table-cell; vertical-align:middle;} .sc_vision .this_right dt {width:35px; font-family:"Heebo"; font-style:italic; font-size:30px; font-weight:500; letter-spacing:0px; color:#fff; line-height:1.2;} .sc_vision .this_right dd {padding-left:15px; font-size:18px; color:#fff; font-weight:300; line-height:1.2;}*/ .sc_vision {background:#f0f0f0; padding:70px 0 90px;} .sc_vision li {list-style:none;} .sc_vision .v_tit {text-align:center;} .sc_vision .v_tit .tit {background:#fff; border:1px solid #fff; border-radius:100px; overflow:hidden; box-sizing:border-box; box-shadow:0px 1px 0px rgba(170,170,170,1); padding:0 30px;} .sc_vision .v_tit .tit {font-family:"Heebo"; font-size:18px; color:#aaa; letter-spacing:1.5px; font-weight:700; height:45px; line-height:45px;} .sc_vision .title {text-align:center; font-size:40px; color:#000; font-weight:700; line-height:1.35; margin-top:20px; letter-spacing:-1px;} .sc_vision .title strong {color:#003f98;} .sc_vision .table {margin:180px -85px 0;} .sc_vision .table .ul {display:table; width:100%; table-layout:fixed; border-collapse:separate; border-spacing:85px 0; box-sizing:border-box;} .sc_vision .table .li {display:table-cell; vertical-align:middle; text-align:center; vertical-align:top; border:2px solid #ddd; border-top:0; position:relative; box-sizing:border-box;} .sc_vision .in_box {} .sc_vision .in_box:before {content:""; position:absolute; left:-2px; right:-2px; top:0; height:2px; background:#003f98;} .sc_vision .in_box .plus {position:absolute; left:-85px; top:50%; width:85px; height:19px; text-align:center; margin-top:-10px;} .sc_vision .li:first-child .in_box .plus {display:none;} .sc_vision .in_box .circle {position:relative; z-index:1; } .sc_vision .in_box .circle {width:180px; height:180px; background:#003f98; border:1px solid #003f98; box-sizing:border-box; border-radius:500px; box-sizing:border-box; margin:-130px auto 0;} .sc_vision .in_box .circle .inner {display:table; width:100%; table-layout:fixed; height:100%;} .sc_vision .in_box .circle dl {display:table-cell; vertical-align:middle;} .sc_vision .in_box .circle dt {color:rgba(255,255,255,0.5); font-family:"Heebo"; font-size:35px; letter-spacing:0px; line-height:1; font-weight:300; font-style:italic;} .sc_vision .in_box .circle dd {margin-top:15px;} .sc_vision .in_box .circle dd img {height:64px;} .sc_vision .in_box .txt {padding:35px 25px; color:#666; font-size:19px; line-height:1.4;} .sc_operation {padding:80px 100px; background:#f2f2f2; margin-top:70px;} .sc_operation ul {overflow:hidden; margin:-45px 0 0 -45px;} .sc_operation li {list-style:none; float:left; width:33.333333%;} .sc_operation .op_box {margin:45px 0 0 45px; background:#fff; text-align:center;} .sc_operation .op_box .table {display:table; width:100%; table-layout:fixed; height:375px;} .sc_operation .op_box .tc_box {display:table-cell; vertical-align:top; padding-top:35px;} .sc_operation .op_box dl {} .sc_operation .op_box dt {} .sc_operation .op_box dd {margin-top:35px;} .sc_operation .op_box .num {font-family:"Heebo"; color:#ccc; font-size:21px; line-height:1;} .sc_operation .op_box .ic {font-size:0px; margin-top:35px;} .sc_operation .op_box .ic img {width:58px;} .sc_operation .op_box .tit {font-size:33px; color:#333; line-height:1; font-weight:700;} .sc_operation .op_box .sub {font-size:18px; color:#333; font-weight:300; margin-top:10px;} .sc_operation .op_box .txt {font-size:17px; color:#999; max-width:270px; margin:0 auto; letter-spacing:-1px; line-height:1.3; margin-top:30px;} .sc_operation .op_box .txt u {display:block;} .sc_operation .first .op_box {background:transparent url('../images/wepco/sub/so_tbg.jpg') center center no-repeat;} .sc_operation .first .op_box .tc_box {vertical-align:middle; padding:0 10px;} .sc_operation .first .op_box .title {color:#fff; font-size:40px; line-height:1.2;} /* 조직도 */ .sc_chart {background:#fff; text-align:center; padding:230px 0px 40px;} .sc_chart li {list-style:none;} .sc_chart .ul {position:relative;} .sc_chart .li {position:relative; height:140px;} .sc_chart .li:before {content:""; position:absolute; left:50%; top:-50px; width:1px; height:100%; background:#ccc; z-index:0; margin-left:-1px;} .sc_chart .table {display:table; width:100%; table-layout:fixed; height:100%;} .sc_chart .tc_box {display:table-cell; vertical-align:middle; padding:0 20px;} .sc_chart .round {width:140px; height:140px; margin:0 auto; position:relative;} .sc_chart .round .bg {position:absolute; overflow:hidden; box-sizing:border-box;} .sc_chart .round .bg.bg1 {left:-20px; top:-230px; right:-20px; bottom:-20px; z-index:9;} .sc_chart .round .bg.bg2 {left:-40px; top:-40px; right:-40px; bottom:-40px; ;} .sc_chart .round .line {position:absolute; z-index:2; box-sizing:border-box;} .sc_chart .round .point {position:absolute; width:10px; height:10px; border-radius:100px; overflow:hidden; box-sizing:border-box; z-index:4;} .sc_chart .round .r_box {width:240px; height:60px; margin:0 auto; position:relative; z-index:5; box-sizing:border-box; margin-left:-50px;} .sc_chart .round .r_box .tt {color:#fff; font-size:18px; font-weight:500; line-height:1.2;letter-spacing: 10;} .sc_chart .round.if_ceo .r_box {background:#1d4161; border:1px solid #1d4161; z-index:999;} .sc_chart .round.if_ceo .r_box .tt {font-size:18px; letter-spacing: 12;} .sc_chart .round.if_ceo .line {left:50%; bottom:-8px; width:156px; height:78px; border-radius:0 0 300px 300px; border-top:0; margin-left:-78px;} .sc_chart .round.if_ceo .point { } .sc_chart .round.if_sub .r_box {background:#6899c7; border:1px solid #6899c7; margin-top:70px;} .sc_chart .round.if_sub .line {left:50%; bottom:-8px; width:156px; height:78px; border-radius:0 0 300px 300px; border:1px solid #6899c7; border-top:0; margin-left:-78px;} .sc_chart .round.if_sub .point { left:50%; bottom:-13px; background:#6899c7; border:1px solid #6899c7; margin-left:-5px;} .sc_chart .round.if_left { position: absolute; right: 50%; top: 120px; margin-right: 115px;} .sc_chart .round.if_left:before {content:""; position:absolute; left: 140px; top:50%; width:115px; height:1px; background:#ccc;} .sc_chart .round.if_left .r_box {background:#a4c1ea; border:1px solid #a4c1ea; } .sc_chart .round.if_left .line {right: -7%; bottom: -8px; width: 78px; height: 156px; border-radius: 0 300px 300px 0; border: 1px solid #a4c1ea; border-left: 0; margin-left: -78px;} .sc_chart .round.if_left .point { right: -13px;; top:50%; background:#83b5fd; border:1px solid #a4c1ea; margin-top:-5px;} .sc_chart .round.if_right {position:absolute; left:50%; top:-100px; margin-left:315px;} .sc_chart .round.if_right:before {content:""; position:absolute; left:-315px; top:50%; width:315px; height:1px; background:#ccc;} .sc_chart .round.if_right .r_box {background:#213b75; border:1px solid #213b75; margin-top:45px; } .sc_chart .round.if_right .line {left:50%; bottom:-8px; width:78px; height:156px; border-radius:300px 0 0 300px; border-right:0; margin-left:-78px;} .sc_chart .round.if_right .point { } .sc_chart .li.list {overflow:hidden; padding-top:70px; height:auto; position:relative; z-index:6;margin-top: -122px;} .sc_chart .li.list:before {display:none;} .sc_chart dl {float:left; width:25%; padding-top:40px;} .sc_chart dt {} .sc_chart dt .tt_box {max-width:240px; margin:0 auto; height:60px; background:#686868; box-sizing:border-box; position:relative;} .sc_chart dt .point { position: absolute; box-sizing: border-box; overflow: hidden; margin-left: -50px; top: -100px; z-index: 1;} .sc_chart dt .tt_box:before {content:""; position:absolute; left:0; top:-40px; width:150%; height:1px; background:#ccc;} .sc_chart dl:first-child dt .tt_box:before {left:50%; width:150%;} .sc_chart dl:last-child dt .tt_box:before {left:auto; right:50%; width:150%;} .sc_chart dt .tt_box:after {content:""; position:absolute; left:50%; top:-40px; width:1px; height:40px; background:#ccc;} .sc_chart dt .tit {color:#fff; font-size:17px; font-weight:500; line-height:1.3; letter-spacing:3;} .sc_chart dd {max-width:230px; margin:0 auto; padding-top:40px; position:relative;} .sc_chart dd:before {content:""; position:absolute; left:50%; top:0px; width:1px; height:40px; background:#ccc;} .sc_chart dd li {background:#f8f8f8; border:1px solid #f8f8f8; box-sizing:border-box; height:53px;} .sc_chart dd li+ li {margin-top:10px;} .sc_chart dd .txt {color:#888; line-height:1.3;} /* 관계사 */ .sc_relative {} .sc_relative li {list-style:none;} .sc_relative .top {background:transparent url('../images/wepco/sub/sc_or_top.jpg') center top no-repeat; padding:0 20px 130px; height:440px; box-sizing:border-box; text-align:center;} .sc_relative .top .table {display:table; width:100%; table-layout:fixed; height:100%;} .sc_relative .top .inner {display:table-cell; vertical-align:middle; font-size:33px; color:#fff; font-weight:100; letter-spacing:-1px; line-height:1.3;} .sc_relative .rel_wrap {padding:0 100px;} .sc_relative .rel_wrap .table {margin:-130px -40px 0;} .sc_relative .rel_wrap .ul {display:table; width:100%; table-layout:fixed; border-collapse:separate; border-spacing:40px 0;} .sc_relative .rel_wrap .ul+ .ul {margin-top:40px;} .sc_relative .rel_wrap .li {display:table-cell; vertical-align:top; background:#fff; border:1px solid #e8e8e8; position:relative; padding-bottom:50px;} .sc_relative .rel_box {padding:25px 50px 35px; } .sc_relative .rel_box:before {content:""; position:absolute; left:-1px; top:-1px; right:-1px; height:2px; background:#003f98;} .sc_relative .rel_box .title {font-size:25px; color:#333; font-weight:700; letter-spacing:-1.5px;} .sc_relative .rel_box .info {margin-top:25px;} .sc_relative .rel_box .info li {padding-left:35px; position:relative;} .sc_relative .rel_box .info li+ li {margin-top:15px;} .sc_relative .rel_box .info .ic {position:absolute; left:3px; top:0;} .sc_relative .rel_box .info .ic img {height:18px;} .sc_relative .rel_box .info .txt {line-height:17px; line-height:18px\0;} .sc_relative .rel_box .info .tel .txt, .sc_relative .rel_box .info .fax .txt {font-family:"Heebo"; font-size:19px; font-weight:500;} .sc_relative .rel_box .info .tel .txt {color:#003f98;} .sc_relative .rel_box .info .fax .txt {color:#333;} .sc_relative .rel_box .info .location .txt {font-size:17px; color:#888; font-weight:300;} .sc_relative .rel_box .btn_box {position:absolute; left:-1px; bottom:-1px; right:-1px;} .sc_relative .rel_box .btn_box ul {display:table; width:100%; table-layout:fixed; box-sizing:border-box;} .sc_relative .rel_box .btn_box li {display:table-cell; vertical-align:middle; border:1px solid #e8e8e8;} .sc_relative .rel_box .btn_box .btn {height:48px; display:block; line-height:46px; background:#f6f6f6; color:#999; text-align:center; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .sc_relative .open_box {position:fixed; left:50%; top:50%; z-index:10001; width:500px; margin-top:-225px; display:none; margin-left:-250px;} .sc_relative .open_box .in_box {position:relative; border:1px solid #333; background:#f5f5f5; box-sizing:border-box; box-shadow:0px 0px 30px rgba(0,0,0,0.5);} .sc_relative .open_box .close_btn {position:absolute; right:0px; top:5px; padding:20px; z-index:1;} .sc_relative .open_box .close_btn img {width:15px;} .sc_relative .open_box .open_table {padding:20px 30px 30px;} .sc_relative .open_box .open_table .title {font-size:23px; font-weight:700; color:#333; letter-spacing:-1px; padding:0 0 10px;} .sc_relative .open_box .open_table .in {background:#fff; border-top:1px solid #333; } .sc_relative .open_box .open_table dl {display:table; width:100%; table-layout:fixed; border-bottom:1px solid #e8e8e8;} .sc_relative .open_box .open_table dl+ dl {} .sc_relative .open_box .open_table dt, .sc_relative .open_box .open_table dd {display:table-cell; vertical-align:middle; padding:10px; letter-spacing:0px; word-wrap:break-word; word-break:keep-all; white-space:normal;} .sc_relative .open_box .open_table dt {width:120px; text-align:center; background:#f9f9f9; color:#333; font-size:14px; line-height:1.3;} .sc_relative .open_box .open_table dd {border-left:1px solid #e8e8e8; padding-left:20px; font-size:14px; line-height:1.3;} .sc_relative .open_box .open_table .img {overflow:hidden;} .sc_relative .open_box .open_table .img img {width:100%; float:left;} .sc_relative .if_long .open_box {margin-top:-329px;} .sc_relative .if_open_rlbox .open_box {display:block;} /* ********************************************** * * 회사연혁 * ********************************************** */ .sc_history {overflow:hidden;} .sc_history li {list-style:none;} .sc_history .top {background:transparent url('../images/wepco/sub/sc_hs_bg.jpg') center top no-repeat; height:360px; text-align:center; padding:0 20px; background-size:cover;} .sc_history .top .table {display:table; width:100%; table-layout:fixed; height:100%;} .sc_history .top .inner {display:table-cell; vertical-align:middle; font-size:33px; color:#fff; font-weight:100; letter-spacing:-1px; line-height:1.2;} .sc_history .his_box {padding:0px;} .sc_history .his_box .ul {display:table; width:100%; table-layout:fixed;} .sc_history .his_box .li {display:table-cell; vertical-align:top; box-sizing:border-box;} .sc_history .his_box .img_box {padding-right:75px; text-align:center; width:475px; border-right:1px solid #ccd9ea; position:relative;} .sc_history .his_box .img_box ul {overflow:hidden;} .sc_history .his_box .img_box ul:before {content:""; position:absolute; right:-1px; top:0; width:1px; height:200%; background:#ccd9ea;} .sc_history .his_box .img_box li {width:100%; overflow:hidden;} .sc_history .his_box .img_box li+ li {margin-top:30px;} .sc_history .his_box .img {width:100%; } .sc_history .his_box .img img {width:100%; float:left;} .sc_history .his_box .year {width:225px; height:225px; border-radius:500px; overflow:hidden; box-sizing:border-box; background:#fff; border:1px solid #003f98; margin:-70px auto 40px; text-align:center;} .sc_history .his_box .year .table {display:table; width:100%; table-layout:fixed; height:100%;} .sc_history .his_box .year dl {display:table-cell; vertical-align:middle; padding-bottom:15px;} .sc_history .his_box .year dt {font-size:0px;} .sc_history .his_box .year .number {display:inline-block;} .sc_history .his_box .year strong {float:left; font-family:"benton" !important; color:#003f98; font-size:70px; font-weight:700; letter-spacing:0px;} .sc_history .his_box .year strong h1 {font-family:"benton" !important;} .sc_history .his_box .year em {float:left; font-family:"benton" !important; color:#003f98; font-size:50px; font-weight:600; margin-top:19px; margin-left:-6px;} .sc_history .his_box .year em h1 {font-family:"benton" !important;} .sc_history .his_box .year dd {font-size:22px; color:#000; letter-spacing:0px; line-height:1.2;} .sc_history .tt_box {text-align:left;} .sc_history .history dl {display:table; width:100%; table-layout:fixed; border-bottom: 1px solid #e8e8e8;} .sc_history .history dl+ dl {margin-top:39px;} .sc_history .history dt, .sc_history .history dd {display:table-cell; vertical-align:top;padding-bottom:41px; } .sc_history .history .if_one dt, .sc_history .history .if_one dd {vertical-align:middle;} .sc_history .history dt {width:479px; box-sizing:border-box; text-align:center;} .sc_history .history .num {font-family:"Heebo"; color:#5f9ace; font-weight:700; line-height:1; font-size:36px; padding-left:45px; position:relative;letter-spacing: -2px;} .sc_history .history .point {position:absolute; left:-14px; top:-5px; width:28px; height:28px; background:#fff; border-radius:100px; overflow:hidden; box-sizing:border-box; display:none;} .sc_history .history .point:before {} .sc_history .history dd {} .sc_history .history ul {} .sc_history .history li {display:table; width:100%; table-layout:fixed;} .sc_history .history li+ li {margin-top:22px;} .sc_history .history .month, .sc_history .history .txt_box {display:table-cell; vertical-align:top;} .sc_history .history .month {width:35px; color:#666; letter-spacing:0px; line-height:1.5; font-size:18px; font-weight:700;} .sc_history .history .txt {line-height:2; display:block; color:#888; font-size:14px; position:relative;} .sc_history .history .txt+ .txt {margin-top:5px;} .sc_history .history .txt em {display:block; color:#aaa;} .sc_history .history .img {display:none;} .sc_history .his_box .ul+ .ul {margin-top:100px;} /* 인증 및 수상 */ .sc_certi {} .sc_certi li {list-style:none;} .sc_certi .top {background:transparent url('../images/wepco/sub/sc_cer_bg.jpg') center top no-repeat; height:360px; text-align:center; padding:0 20px 100px; box-sizing:border-box; overflow:hidden; position:relative; background-size:cover;} .sc_certi .top .table {display:table; width:100%; table-layout:fixed; height:100%;} .sc_certi .top .inner {display:table-cell; vertical-align:middle; font-size:33px; color:#fff; font-weight:100; letter-spacing:-1px; line-height:1.2;} .sc_certi .top .txt {width:330px; height:330px; margin:0 auto; border:1px solid rgba(240,240,240,0.3); border-radius:300px; position:absolute; left:50%; bottom:-175px; margin-left:-165px; box-sizing:border-box; } .sc_certi .top .txt {padding:8px 8px 0 8px;} .sc_certi .top .txt dl {background:#f0f0f0; border:1px solid #f0f0f0; border-radius:300px; overflow:hidden; box-sizing:border-box; height:100%; padding-top:37px; position:relative;} .sc_certi .top .txt dl:before {content:""; position:absolute; left:0; top:144px; width:100%; height:3px; background:#f0f0f0; z-index:2;} .sc_certi .top .txt dt {font-family:"Heebo"; color:#aaa; font-weight:500; letter-spacing:0px; font-size:18px; line-height:1;} .sc_certi .top .txt dd {font-family:"benton" !important; font-size:45px; font-weight:700; color:#000; letter-spacing:0px; line-height:1; margin-top:5px;} .sc_certi .top .txt dd h1 {font-family:"benton" !important;} .sc_certi .certi_box {background:#f0f0f0 url('../images/wepco/sub/sc_cer_bg2.jpg') center top no-repeat; padding:80px 100px; background-size:cover;} .sc_certi .certi_box ul {overflow:hidden; margin:-55px 0 0 -40px;} .sc_certi .certi_box li {width:25%; float:left;} .sc_certi .certi_box dl {margin:55px 0 0 40px; background:#fff; border-top:2px solid #003f98; border-bottom:1px solid #ccc; padding:0 20px; text-align:center;} .sc_certi .certi_box dt {display:table; width:100%; table-layout:fixed; height:81px; border-bottom:1px solid #e8e8e8;} .sc_certi .certi_box .logo {display:table-cell; vertical-align:middle; padding:5px; box-sizing:border-box;} .sc_certi .certi_box .logo img {max-width:100%; max-height:68px;} .sc_certi .certi_box .logo.txt {color:#003f98; font-size:18px; font-weight:700; line-height:1.2;} .sc_certi .certi_box dd {display:table; width:100%; table-layout:fixed; height:130px;} .sc_certi .certi_box .inner {display:table-cell; vertical-align:middle;} .sc_certi .certi_box .title {font-size:18px; color:#333; font-weight:500; line-height:1.2; max-width:200px; margin:0 auto;} .sc_certi .certi_box .date {font-family:"Heebo"; color:#aaa; letter-spacing:-0.3px; line-height:1; margin-top:10px;} /* ********************************************** * * 주요파트너사 * ********************************************** */ .sc_partners {} .sc_partners ul {margin:0 0 0 -6px; overflow:hidden;} .sc_partners li {list-style:none; float:left; width:20%;} .sc_partners li:nth-of-type(5n)+ li {clear:both;} .sc_partners dl {margin:6px 0 0 6px;} .sc_partners dt {position:relative; text-align:center; border:1px solid #ddd; box-sizing:border-box; height:80px;overflow:hidden;} .sc_partners dt {transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .sc_partners dd {text-align:center; font-size:17px; color:#888; margin-top:10px; line-height:1.3;} .sc_partners .upper_link {display:none;} .sc_partners .link {position:absolute; right:-1px; bottom:-1px; border:1px solid #ddd; box-sizing:border-box; padding:15px 14px; display:none; overflow:hidden; background:#fff;} .sc_partners .link {transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out;} .sc_partners .link .span {transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out;} .sc_partners .link img {width:16px; float:left;} .sc_partners .logo_box {display:table; width:100%; table-layout:fixed; height:100%; } .sc_partners .logo_box .logo {display:table-cell; vertical-align:middle; padding:0px; font-size:0px;} .sc_partners .logo_box .logo img {max-width:100%; max-height:100px; } .sc_partners .if_link .upper_link {display:block;} .sc_partners .if_link .link {display:block;} /* ********************************************** * * 오시는길 * ********************************************** */ .sc_location {} .sc_location li {list-style:none;} .sc_location .ul {overflow:hidden; position:relative; border-top:2px solid #333; border-bottom:1px solid #ddd;} .sc_location .ul:before {content:""; position:absolute; left:50%; top:0; width:1px; height:100%; background:#ddd; z-index:1;} .sc_location .ul+ .ul {margin-top:100px;} .sc_location .li {width:50%;} .sc_location .txt_box {float:right; padding:55px 0 80px 100px; box-sizing:border-box;} .sc_location .txt_box .title {overflow:hidden; margin-bottom:15px;} .sc_location .txt_box .tit {float:left; font-size:30px; color:#333; font-weight:700; letter-spacing:-1.5px; line-height:44px;} .sc_location .txt_box .tit em {color:#999; font-weight:300;} .sc_location .txt_box .right_btn {float:right;} .sc_location .txt_box .tel_btn {float:left; width:44px; height:44px; border-radius:100px; overflow:hidden; box-sizing:border-box; border:1px solid #333; margin-right:10px;} .sc_location .txt_box .tel_btn {background:#333 url('../images/wepco_m/sub/sc_dr_ic2.png') center center no-repeat; background-size:18px;} .sc_location .txt_box .map_btn {float:left; background:#999; border:1px solid #999; border-radius:30px; box-sizing:border-box; overflow:hidden; height:44px; line-height:40px; padding:0 25px;} .sc_location .txt_box .map_btn {transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .sc_location .txt_box .map_btn .ic {float:left; margin-top:10px; margin-right:5px;} .sc_location .txt_box .map_btn .ic img {width:23px; float:left;} .sc_location .txt_box .map_btn .txt {font-size:14px; color:#fff; float:left;} .sc_location .txt_box .map_img {overflow:hidden;} .sc_location .txt_box .map_img img {width:100%; float:left;} .sc_location .txt_box ul {margin-top:30px;} .sc_location .txt_box li {} .sc_location .txt_box li+ li {margin-top:11px;} .sc_location .txt_box dl {display:table; width:100%; table-layout:fixed;} .sc_location .txt_box dt, .sc_location .txt_box dd {display:table-cell; vertical-align:top;} .sc_location .txt_box dt {width:83px; padding-left:5px; box-sizing:border-box; font-size:17px; color:#aaa; line-height:1.2;} .sc_location .txt_box dd {} .sc_location .txt_box .tt {padding-left:16px; font-size:17px; color:#666; line-height:1.2; position:relative;} .sc_location .txt_box .tt:before {content:""; position:absolute; left:0; top:10px; width:2px; height:2px; background:#ccc;} .sc_location .txt_box .if_tel .tt {font-family:"Heebo"; font-size:20px; font-weight:500; color:#003f98;} .sc_location .txt_box .if_fax .tt {font-family:"Heebo"; font-size:20px; font-weight:500; color:#666;} .sc_location .map_box {float:left;} .sc_location .map {position:absolute; left:0; top:0; width:50%; height:100%; background:#f5f5f5;} .sc_location .map .marker {overflow:hidden; float:left;} .sc_location .map .marker img {width:37px; float:left;} /* **************************************** * ◆ Max ~ 900px (Mouse Over) * **************************************** */ @media screen and (min-width:900px) { .sub_top .location .home_btn:hover {background:#333;} .sub_top .location .home_btn:hover:before {content:""; position:absolute; left:-1px; top:0; right:-1px; bottom:-1px; border:1px solid #333;} .sub_top .location .home_btn:hover .img_over {opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} .sub_top .location .depth:hover {background:#fff;} .sub_top .location .share_btn:hover .txt {color:#333;} .sub_top .location .ctg_box .btn:hover {background:#f0f0f0;} .sub_top .location .share_box .btn:hover .txt {color:#333; text-decoration:underline;} .sub_ctg .inner li:hover {background:#f0f0f0;} .sb_part .thumb:hover:before {opacity: .7; -ms-filter:alpha(opacity=70); filter:alpha(opacity=70);} .sb_part .thumb:hover img {transform:scale(1.1); -webkit-transform:scale(1.1);} .sb_part .thumb:hover .txt_box {opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} .sb_part .more_btn:hover {right:10px;} .sb_part .more_btn:hover .tt {color:#000;} .sb_part .more_btn:hover .ic {opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} .sb_part .thumb .txt_box:hover .txt {background:#fff; color:#000;} .sb_board .board_top .btn:hover {border-color:#000; background:#000; color:#fff;} .sb_board .ctg_tab li:hover {background:#fff;} .sb_board .ctg_tab li:hover dt {opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} .sb_board .ctg_tab li:hover dd {color:#000;} .sb_project .prevnext:hover .img_over {opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} .sc_relative .rel_box .btn_box .btn:hover {background:#333; color:#fff;} .sc_partners .if_link:hover {border-color:#333;} .sc_partners .if_link:hover .link {border-color:#333; background:#333;} .sc_partners .if_link:hover .link .img_off {opacity: 0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0);} .sc_partners .if_link:hover .link .img_over {opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100)} .sc_location .txt_box .map_btn:hover {background:#333; border-color:#333;} .sr_part .btn_box .btn:hover {background:#000;} .sr_part .btn_box .btn:hover .txt {color:#fff;} .sr_part .btn_box .btn:hover .img_over {opacity: 1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100);} } /* **************************************** * ◆ 1600px ~ * **************************************** */ @media screen and (max-width:1600px) { .sb_project {padding:0 90px;} .sb_project .prevnext {width:90px;} .sb_project .prevnext.prev {left:-90px;} .sb_project .prevnext.next {right:-90px;} .sc_history .his_box {padding:0px;} .sc_certi .certi_box {padding:70px 90px;} .sc_location .txt_box {padding:50px 0 75px 90px;} .sc_operation {padding:80px 90px;} .sc_chart {padding:250px 90px 40px;} .sc_relative .rel_wrap {padding:0 90px;} } /* **************************************** * ◆ 1500px ~ * **************************************** */ @media screen and (max-width:1500px) { .sb_part .open_box li {padding:10px 0;} .sb_part .open_box .inner {max-width:80px; } .sb_part .open_box .tit {line-height:1.2;} .sb_project {padding:0 80px;} .sb_project .prevnext {width:80px; padding:10px 0;} .sb_project .prevnext.prev {left:-80px;} .sb_project .prevnext.next {right:-80px;} .sc_history .his_box {padding:0px;} .sc_certi .certi_box {padding:60px 80px;} .sc_location .txt_box {padding:45px 0 70px 80px;} .sc_operation {padding:80px;} .sc_chart {padding:220px 80px 40px;} .sc_relative .rel_wrap {padding:0 80px;} .sr_part {padding:60px 0;} .sr_about .tit_box {padding-left:60px;} .sr_about .txt_box {padding-left:60px;} .sr_about .this_right .tit_box {padding-right:60px;} .sr_about .this_right .txt_box {padding-right:60px;} .sc_vision {padding:60px 0 80px;} } /* **************************************** * ◆ 1400px ~ * **************************************** */ @media screen and (max-width:1400px) { .sb_part .open_box .bottom {padding:0 5px;} .sb_part .open_box .middle {padding:0 30px;} .sb_part .open_box .top {padding:0 150px;} .sb_project {padding:0 70px;} .sb_project .project_box {padding:40px 20px 0;} .sb_project .project_box li {padding:0 20px;} .sb_project .prevnext {width:70px;} .sb_project .prevnext.prev {left:-70px;} .sb_project .prevnext.next {right:-70px;} .sc_history .his_box {padding:0px;} .sc_certi .certi_box {padding:60px 70px;} .sc_location .txt_box {padding:40px 0 65px 70px;} .sc_operation {padding:70px;} .sc_chart {padding:220px 70px 40px;} .sc_relative .rel_wrap {padding:0 70px;} } /* **************************************** * ◆ 1300px ~ * **************************************** */ @media screen and (max-width:1300px) { .sb_part .ul {position:relative;} .sb_part .part_box {position:static;} .sb_part .open_box {width:auto; right:0; padding:0 50px;} .sb_part .open_box .bg {max-width:390px; margin:0 auto;} .sb_part .open_box .tt_box {max-width:600px; left:50%; margin-left:-300px;} .sb_project {padding:0 60px;} .sb_project .prevnext {width:60px;} .sb_project .prevnext.prev {left:-60px;} .sb_project .prevnext.next {right:-60px;} .sc_greeting .mid_box .img img {width:550px;} .sc_greeting .bot_box .txt_box {padding:50px 0 0 70px;} .sc_history .his_box {padding:0px;} .sc_history .his_box .img_box {padding-right:50px; width:450px;} .sc_certi .certi_box {padding:60px;} .sc_location .ul+ .ul {margin-top:80px;} .sc_location .txt_box {padding:40px 0 65px 60px;} .sc_operation {padding:60px;} .sc_chart {padding:220px 60px 40px;} .sc_relative .rel_wrap {padding:0 60px;} .sr_about dt {width:450px;} .sr_about .img {width:450px; overflow:hidden;} .sr_about .tit_box {padding-left:50px;} .sr_about .txt_box {padding-left:50px;} .sr_about .this_right .tit_box {padding-right:50px;} .sr_about .this_right .txt_box {padding-right:50px;} } /* **************************************** * ◆ 1024px ~ * **************************************** */ @media screen and (max-width:1024px) { .c_user_box {padding-top:40px;} .sub_top .sub_visual .txt_box {padding-top:160px;} .sub_top .location {padding:0 50px;} .ctg2_wrap {padding:50px 0 40px;} .ctg2_wrap dd {margin-top:15px;} .sub_ctg {margin-bottom:60px;} .sub_ctg .inner .btn {min-width:200px; padding:0 20px;} .section+ .section {margin-top:100px;} .sb_part {margin:0px -40px 0;} .sb_part .ul+ .ul {margin-top:60px;} .sb_part .li {padding:0 40px;} .sb_part .open_box {padding:0 40px;} .sb_project {padding:0 50px;} .sb_project .top_tit {height:90px; line-height:90px;} .sb_project .prevnext {width:50px; bottom:100px;} .sb_project .prevnext.prev {left:-50px;} .sb_project .prevnext.next {right:-50px;} .sb_list+ .sb_list {margin-top:60px;} .sb_list .t_number {width:90px;} .sb_list .t_date {width:160px;} .sb_board.if_rnd .sb_list .t_name {width:180px;} .sb_board.if_rnd .sb_list .tbody .t_name {padding-right:30px;} .sb_project {margin-bottom:60px;} .sc_greeting {margin-top:70px;} .sc_greeting .layout_fix {padding:0 80px;} .sc_greeting .top_box .tit_box {padding-top:30px;} .sc_greeting .mid_box .img {margin-top:-175px;} .sc_greeting .mid_box .img img {width:510px;} .sc_greeting .bot_box .img_box {width:450px;} .sc_greeting .bot_box .img {margin-top:-140px;} .sc_greeting .bot_box .img img {width:450px;} .sc_greeting .bot_box .txt_box {padding:45px 0 0 50px;} .sc_history .top {height:300px; background-size:cover;} .sc_history .his_box {padding:0px;} .sc_history .history dt {width:250px;} .sc_history .history .num {padding-left:0px; font-size:25px} .sc_certi .top {height:340px;} .sc_certi .certi_box {padding:50px;} .sc_certi .certi_box ul {margin:-45px 0 0 -35px;} .sc_certi .certi_box dl {margin:45px 0 0 35px;} .sc_partners ul {margin:-15px 0 0 -15px;} .sc_partners dl {margin:15px 0 0 15px;} .sc_partners dt {height:100px;} .sc_partners .logo_box .logo img {max-height:90px;} .sc_location .txt_box {padding:35px 0 50px 50px;} .sc_location .txt_box ul {margin-top:25px;} .sc_location .txt_box li+ li {margin-top:8px;} .sc_location .txt_box .tt:before {top:8px;} .sc_motto {margin-top:60px;} .sc_operation {margin-top:60px; padding:50px;} .sc_operation ul {margin:-30px 0 0 -30px;} .sc_operation .op_box {margin:30px 0 0 30px;} .sc_operation .op_box .table {height:350px;} .sc_operation .op_box .ic {margin-top:30px;} .sc_operation .op_box dd {margin-top:30px;} .sc_operation .op_box .txt {margin-top:25px;} .sc_chart {padding:220px 50px 40px;} .sc_chart dt .tt_box {max-width:230px;} .sc_chart dd {max-width:240px;} .sc_chart .round.if_right .r_box {} .sc_chart .round.if_right {margin-left: 290px;} .sc_chart .round.if_right:before {left:-290px;} .sc_relative .top {height:400px; padding-bottom:100px; background-size:cover;} .sc_relative .rel_wrap {padding:0 50px;} .sc_relative .rel_wrap .table {margin:-100px -30px 0;} .sc_relative .rel_wrap .ul {border-spacing:30px 0;} .sc_relative .rel_wrap .ul+ .ul {margin-top:30px;} .sc_relative .rel_box {padding:25px 40px 35px;} .sr_about dt {width:420px;} .sr_about .img {width:420px;} .sc_vision .table {margin:180px -60px 0;} .sc_vision .table .ul {border-collapse:separate; border-spacing:60px 0;} .sc_vision .in_box .plus {width:60px; left:-60px;} } /* **************************************** * ◆ 1100px ~ * **************************************** */ @media screen and (max-width:1100px) { .sub_top .location {padding:0 40px;} .sub_top .location .share {margin-right:-25px;} .sub_top .location .share_btn {padding:0 25px;} .sb_project .project_box {padding:20px 10px 0;} .sb_project .project_box li {padding:0 10px;} .sc_top ul {background-size:cover; height:400px;} .sc_greeting .top_box .tit_box u {display:inline;} .sc_greeting .bot_box .img {margin-top:-120px;} .sc_greeting .mid_box .this_left u {display:inline;} .sc_history .his_box {padding:0px;} .sc_history .his_box .img_box {width:45%;} .sc_history .his_box .year {width:200px; height:200px;} .sc_history .history .point {top:-6px;} .sc_certi .certi_box {padding:40px;} .sc_certi .certi_box ul {margin:-35px 0 0 -30px;} .sc_certi .certi_box dl {margin:35px 0 0 30px;} .sc_location .txt_box {padding:30px 0 40px 40px;} /* .sc_vision {background-size:cover;} .sc_vision .li {padding:50px;} */ .sc_operation {padding:40px;} .sc_operation .first .op_box {background-size:cover;} .sc_chart {padding:220px 40px 40px;} .sc_chart .round.if_right .r_box {margin-left: -310px;} .sc_chart .round.if_right:before { width:200px;} .sc_relative .rel_wrap {padding:0 40px;} .sc_relative .rel_box {padding:20px 30px 30px;} .sr_about dt {width:400px;} .sr_about .img {width:400px;} .sr_about .this_right .img {margin-top:-145px;} .sr_about .tit_box {padding-left:40px;} .sr_about .txt_box {padding-left:40px;} .sr_about .this_right .tit_box {padding-right:40px;} .sr_about .this_right .txt_box {padding-right:40px;} .sr_part .btn_box {margin-top:40px;} .sc_vision .table {margin:30px 0 0;} .sc_vision .table .ul {display:block;} .sc_vision .table .li {display:inline-block; width:100%;} .sc_vision .table .li+ .li {margin-top:10px;} .sc_vision .in_box .plus {display:none;} .sc_vision .in_box .circle {width:160px; height:auto; margin:0px; position:absolute; left:-2px; top:0; bottom:-2px; border-radius:0px;} .sc_vision .in_box .circle dd {margin-top:5px;} .sc_vision .in_box .txt {text-align:left; padding:50px 15px 50px 180px; display:block; box-sizing:border-box; } .sc_vision .in_box .txt u {display:inline;} } /* **************************************** * ◆ 1050px ~ * **************************************** */ @media screen and (max-width:1050px) { .sc_greeting .bot_box .img_box {width:400px;} .sc_greeting .bot_box .img {margin-top:-100px;} .sc_greeting .bot_box .img img {width:400px;} } /* **************************************** * ◆ 1000px ~ * **************************************** */ @media screen and (max-width:1000px) { .sub_top .sub_visual .txt_box {padding-top:130px;} .sub_ctg {margin-bottom:40px;} .sb_part {margin:0px -30px 0;} .sb_part .ul+ .ul {margin-top:40px;} .sb_part .li {padding:0 30px;} .sb_part dl {padding-top:15px;} .sb_part dd {margin-top:5px;} .sb_part .open_box {padding:0 30px;} .sb_board .board_top .total {margin-top:7px;} .sb_list .t_number {width:60px;} .sb_list .t_date {width:150px;} .sb_list .t_name {width:190px;} .sb_list .tbody .t_title {padding:0 10px 0 20px;} .sb_list .tbody .t_title em {padding-right:10px;} .sb_list .tbody .t_name {padding-right:10px;} .sb_board.if_rnd .sb_list .t_name {width:160px;} .sc_greeting {margin-top:50px;} .sc_greeting .layout_fix {padding:0 40px;} .sc_greeting .top_box .tit_box {padding:0 40px;} .sc_greeting .top_box .line {width:2px; height:auto; top:7px; bottom:4px; left:20px;} .sc_greeting .mid_box {background:none;} .sc_greeting .mid_box ul {display:block; overflow:hidden;} .sc_greeting .mid_box li {display:block;} .sc_greeting .mid_box .layout_fix:after {display:none;} .sc_greeting .name dl {text-align:center;} .sc_greeting .mid_box:before {display:none;} .sc_greeting .mid_box .this_left {padding:40px 40px 100px;} .sc_greeting .mid_box .this_right {width:100%; text-align:center; background:#f2f2f2; position:relative;} .sc_greeting .mid_box .this_right:before {content:""; position:absolute; left:-280px; top:0; width:700px; height:100%; background:transparent url('../images/wepco/sub/sc_gr_bg.jpg') left top no-repeat; background-size:700px;} .sc_greeting .mid_box .img {float:none; display:inline-block; margin-top:-80px; margin-right:0; position:relative;} .sc_greeting .bot_box ul {display:block;} .sc_greeting .bot_box li {display:block;} .sc_greeting .bot_box .img_box {display:none;} .sc_greeting .bot_box .txt_box {padding:40px;} .sc_greeting .bot_box .img_box.mo {display:block; width:100%;} .sc_greeting .bot_box .img {margin:0; float:none;} .sc_greeting .bot_box .img:before {width:250px; height:100px; left:auto; right:10px; top:-100px; background:transparent url('../images/wepco_m/sub/sc_gr_left.png') right bottom no-repeat; background-size:auto 100px; z-index:-1;} .sc_greeting .bot_box .img img {width:100%;} .sc_greeting .bot_box .layout_fix {padding:0 40px;} .sc_certi .top {height:320px;} .sc_certi .certi_box li {width:33.33333%;} .sc_certi .certi_box li:nth-of-type(3n)+ li {clear:both} .sc_certi .certi_box ul {margin:-30px 0 0 -30px;} .sc_certi .certi_box dl {margin:30px 0 0 30px;} .sc_certi .certi_box .title {max-width:180px;} .sc_certi .certi_box dd {height:120px;} .sc_partners ul {margin:-15px 0 0 -15px;} .sc_partners li {width:25%;} .sc_partners li:nth-of-type(5n)+ li {clear:none;} .sc_partners li:nth-of-type(4n)+ li {clear:both;} .sc_partners dl {margin:15px 0 0 15px;} .sc_partners dt {height:100px;} .sc_partners .logo_box .logo img {max-height:80px;} .sc_location .ul+ .ul {margin-top:60px;} .sc_motto .round1 {position:relative; float:left; margin-top:-52px;} .sc_motto .round2 {position:relative; float:right; margin-top:-52px;} .sc_motto .round3 {padding-top:180px;} .sc_motto .round3:before {margin-top:180px;} .sc_motto .round .point.p3 {bottom:-91px;} .sc_motto .round .point.p3:before {content:""; position:absolute; left:50%; bottom:100%; width:1px; height:80px; background:#003f98;} /* .sc_vision {margin-top:50px;} .sc_vision .li {padding:40px;} .sc_vision .this_left dl {max-width:270px;} .sc_vision .this_right dl {height:85px;} .sc_vision .this_left dd {font-size:30px;} */ .sc_operation {margin-top:50px;} .sc_operation li {width:50%;} .sc_operation .op_box .table {height:200px;} .sc_operation .first .op_box {background-position:center 20%;} .sc_operation .first .op_box .tc_box {padding:0 10px;} .sc_operation .op_box .tc_box {padding:20px 0; vertical-align:middle;} .sc_operation .op_box dl {display:table; width:100%; table-layout:fixed;} .sc_operation .op_box dt, .sc_operation .op_box dd {display:table-cell; vertical-align:middle;} .sc_operation .op_box dt {width:120px; border-right:1px solid #eee;} .sc_operation .op_box dd {text-align:left; padding:0 10px 0 20px;} .sc_operation .op_box .sub {margin-top:5px;} .sc_operation .op_box .txt {max-width:100%; margin-top:15px;} .sc_operation .op_box .txt u {display:inline;} .sc_operation .op_box .ic {margin-top:15px;} .sc_operation .op_box .ic img {width:50px;} .sc_chart dt .tt_box {max-width:210px; height:60px;} .sc_chart dd {max-width:210px;} .sc_chart dd li {height:50px;} .sr_about li+ li {margin-top:50px;} .sr_about dl {display:block;} .sr_about dt, .sr_about dd {display:block; width:100%;} .sr_about .img {width:100%;} .sr_about .img img {width:100%;} .sr_about .img.if_pc {display:none;} .sr_about .img.if_mo { display:block;} .sr_about dd {padding:30px 40px 0 !important; box-sizing:border-box; position:relative;} .sr_about dd.if_pc {display:none;} .sr_about dd.if_mo {display:block;} .sr_about .tit_box {position:static; padding:0 0 0 40px !important;} .sr_about .tit_box .tit {padding-bottom:0;} .sr_about .tit_box .line {width:1px; height:100%; left:40px; bottom:auto; top:0;} .sr_about .txt_box {margin-top:10px; padding:0 0 0 40px !important;} .sr_about .this_right dd {text-align:left; } .sr_about .this_right .img {margin-top:0;} .sr_about .this_right .txt_box .txt {float:left;} } /* **************************************** * ◆ 950px ~ * **************************************** */ @media screen and (max-width:950px) { .sr_part .sub_box .li {padding:15px 20px;} .sb_project .pro_box .ctg {float:none; display:block;} .sb_project .pro_box .date {float:none; display:block;} } /* **************************************** * ◆ 900px ~ (Mobile Start) * **************************************** */ @media screen and (max-width:900px) { .c_user_box {padding-top:30px;} .sub_top .sub_visual .tit {line-height:1.1;} .sub_top .sub_visual dd {padding-top:5px;} .sub_top .sub_visual .txt {line-height:1.4; max-width:500px; margin:0px auto; color:rgba(255,255,255,0.7);} /* .sub_top .location {padding:0;} .sub_top .location .ul {width:100%; position:relative;} .sub_top .location .li {border:0; border-left:1px solid #ddd;} .sub_top .location .li.depth1 {position:static; border-left:0;} .sub_top .location .home_btn {position:absolute; left:0; top:0; width:60px; text-align:center; border-right:1px solid #ddd; box-sizing:border-box; display:none !important;} .sub_top .location .depth_box {position:static; } .sub_top .location .ctg_box ul {border-top:1px solid #000;} .sub_top .location .ctg_box li:first-child .btn {border-top:0;} .sub_top .location .ctg_box .btn {padding:0 15px;} .sub_top .location .depth {width:100%; min-width:auto; padding:0 45px 0 15px;} .sub_top .location .depth .ic {right:15px; width:10px;} .sub_top .location .depth .triangle-down {border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #333; margin-bottom:5px;} .sub_top .location .depth .triangle-up {border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #333;} .sub_top .if_open_loc .depth .triangle-down {margin-top:-10px;} .sub_top .if_open_loc .depth:before {content:""; position:absolute; left:-1px; top:-1px; right:-1px; bottom:-1px; border:1px solid #000; border-bottom:0;} .sub_top .if_open_loc .depth:after {content:""; position:absolute; left:0; bottom:-1px; width:100%; height:3px; background:#fff;} .sub_top .if_open_loc .ctg_box {box-shadow:0px 5px 5px rgba(0,0,0,0.1);} */ .sub_top .location {padding:0 30px;} .sub_top .location .li.home.if_pc {display:table-cell !important;} .sub_top .location .home_btn.if_mo {display:none !important;} .sub_top .location .depth {} .ctg2_wrap {padding:40px 0 30px;} .ctg2_wrap dt {font-weight:700;} /* .ctg2_wrap .share {position:fixed; right:0; top:auto; bottom:0px; margin-top:0; margin:20px; z-index:10000; transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out;} .ctg2_wrap .share .share_btn {width:50px; height:50px; background:rgba(255,255,255,0.8); border:1px solid #000; border-radius:100px; overflow:hidden; text-align:center;} .ctg2_wrap .share .share_btn .icon {padding:13px 10px;} .ctg2_wrap .share .share_btn img {height:24px; } .ctg2_wrap .share.if_scroll {bottom:60px;} */ .sub_ctg {height:auto; overflow:hidden; margin-bottom:30px;} .sub_ctg:before {display:none;} .sub_ctg .inner {text-align:center; } .sub_ctg .inner ul {display:table; width:100%; table-layout:fixed; } .sub_ctg .inner li {display:table-cell; height:auto; box-sizing:border-box; border:1px solid #ddd; box-sizing:border-box; position:static; transition:none; -webkit-transition:none;} .sub_ctg .inner li+ li {border-left:0;} .sub_ctg .inner li:before {display:none;} .sub_ctg .inner .btn {display:block; height:auto; line-height:1.1; text-align:center; color:#888; padding:15px 5px; min-width:auto;} .sub_ctg .inner .btn:before {display:none;} .sub_ctg .inner .btn:after {display:none;} .sub_ctg .inner .hit {border-color:#003f98; background:#003f98 !important;} .sub_ctg .inner .hit:after {display:none;} .sub_ctg .inner .hit .btn {color:#fff !important; background:#003f98 !important; font-weight:400;} .sub_ctg .inner .hit .btn:before {content:""; display:block; position:absolute; left:-1px; top:-1px; bottom:-1px; width:1px; background:#003f98; z-index:1; height:auto;} .sub_ctg.if_col4 .inner {display:block;} .sub_ctg.if_col4 .inner ul {display:block; display:inline-block; border-bottom:1px solid #ddd; border-right:1px solid #ddd;} .sub_ctg.if_col4 .inner li {display:block; width:50%; box-sizing:border-box; float:left; border-bottom:0; border-right:0;} .sub_ctg.if_col4 .inner li+ li {border-left:1px solid #ddd;} .sub_ctg.if_col4 .inner .btn {min-width:auto;} .sub_ctg.if_col4 .inner .hit .btn:before {bottom:0;} .sub_ctg.if_col4 .inner .hit .btn:after {content:""; display:block; position:absolute; right:-1px; top:-1px; bottom:0px; width:1px; background:#003f98; z-index:1; height:auto;} .sub_ctg.if_more .inner {display:block;} .sub_ctg.if_more .inner ul {display:block; display:inline-block; border-bottom:1px solid #ddd; border-right:1px solid #ddd;} .sub_ctg.if_more .inner li {display:block; width:33.333333%; box-sizing:border-box; float:left; border-bottom:0; border-right:0; position:relative; } .sub_ctg.if_more .inner li:before {content:""; display:block; position:absolute; left:0; top:-1px; width:300%; height:1px; background:#ddd; } .sub_ctg.if_more .inner li:after {content:""; display:block; position:absolute; left:-1px; top:0px; height:300%; width:1px; background:#ddd;} .sub_ctg.if_more .inner li+ li {border-left:1px solid #ddd;} .sub_ctg.if_more .inner .btn {min-width:auto;} .sub_ctg.if_more .inner .hit:before {} .sub_ctg.if_more .inner .hit .btn:before {bottom:0; background:#003f98; z-index:10;} .sub_ctg.if_more .inner .hit .btn:after {content:""; display:block; position:absolute; right:-1px; top:-1px; bottom:0px; left:-1px; border:1px solid #003f98; z-index:10; height:auto; box-sizing:border-box; width:auto;} .sub_ctg.if_more .inner .hit .btn:after {background:none;} .section+ .section {margin-top:70px;} .sb_project {padding:0 30px; margin-bottom:40px;} .sb_project .top_tit {height:80px; line-height:80px;} .sb_project .prevnext.prev {left:-30px;} .sb_project .prevnext.next {right:-30px;} .sb_project .prevnext {width:30px; padding:0; bottom:85px;} .sb_project .prevnext a {padding:15px 0; display:block;} .sb_project .prevnext img {height:23px;} .sb_project .pro_box .info {padding-top:15px;} .sb_project .pro_box dl {margin-top:5px;} .sb_project .pro_box dd {margin-top:5px;} .sb_part {margin:30px -20px 0;} .sb_part .ul+ .ul {margin-top:30px;} .sb_part .li {padding:0 20px;} .sb_part dt {padding-right:35px;} .sb_part dd u {display:inline;} .sb_part .more_btn {width:20px; height:20px;} .sb_part .more_btn:before {content:""; position:absolute; left:50%; top:50%; width:20px; height:2px; background:#000; margin-top:-1px; margin-left:-10px;} .sb_part .more_btn:after {content:""; position:absolute; top:50%; left:50%; height:20px; width:2px; background:#000; margin-left:-1px; margin-top:-10px;} .sb_part .more_btn .tt, .sb_part .more_btn .ic {display:none;} .sb_part .open_box {padding:0 20px;} .sb_board .board_top {padding-left:120px; margin:0px 0 20px;} .sb_board .ctg_tab+ .board_top {margin-top:40px;} .sb_board .board_top .total {position:absolute; left:0; top:0;} .sb_board .board_top .search .this_search {width:40px;} .sb_board .board_top .search_form {padding:0; text-align:right; font-size:0px; position:static;} .sb_board .board_top .search_form .input_search {display:none; width:100%; position:absolute; right:0; bottom:0;} .sb_board .board_top .search_form .btn_viewall {box-sizing:border-box; top:auto; bottom:4px; right:45px; padding:10px 8px; width:35px; border-radius:100px; overflow:hidden; display:none;} .sb_board .board_top .search_form .search_btn {width:40px; display:inline-block; background:#f4f4f4 url('../images/rb_img/mo/icon_search.png') center center no-repeat; background-size:17px !important; opacity: 1; } .sb_board .board_top .search_form .btn_box {display:none; background:#333;} .sb_board .board_top .search_form .btn_box .btn_search {font-size:12px; background:none; border-radius:0px; float:none;} .sb_board .board_top .if_open_search .search_form {padding-bottom:50px;} .sb_board .board_top .if_open_search .search_form .btn_viewall {display:block;} .sb_board .board_top .if_open_search .search_form .input_search {display:block; } .sb_board .board_top .if_open_search .search_form .btn_box {display:block; top:auto; bottom:0px; z-index:2;} .sb_board .ctg_tab dl {padding:20px 5px;} .sb_board .ctg_tab dt img {height:50px;} .sb_board.if_rnd .board_top {padding-left:0; margin-bottom:10px;} .sb_board.if_rnd .board_top .total {position:static;} .sb_board.if_rnd .sb_list .tbody .t_name {padding-right:30px;} .sb_list .t_state {width:110px;} .sb_list+ .sb_list {margin-top:50px;} .sb_list .group_tit dl {height:50px;} .sb_list .group_tit dt {width:60px;} .sc_top ul {height:350px;} .sc_top .if_mo {display:none !important;} .sc_top .if_pc {display:table-cell !important;} .sc_top dd {padding:0 10px;} .sc_greeting {margin-top:40px;} .sc_greeting .layout_fix {padding:0 30px;} .sc_greeting .top_box .tit_box {padding:0 30px;} .sc_greeting .top_box .line {left:10px;} .sc_greeting .mid_box .this_left {padding:35px 30px 100px; } .sc_greeting .mid_box .img img {width:450px;} .sc_greeting .bot_box .layout_fix {padding:0 30px;} .sc_greeting .bot_box .txt_box {padding:40px 30px;} .sc_greeting .bot_box .txt+ .txt {margin-top:20px;} .sc_history .top {height:260px; background-size:cover;} .sc_history .his_box {padding:0 30px;} .sc_history .his_box .ul {display:block;} .sc_history .his_box .li {display:block; width:100%;} .sc_history .his_box .img_box {border:0; padding-right:0; position:relative;} .sc_history .his_box .img_box:before {content:""; position:absolute; left:0; top:50px; width:1px; height:200%; background:#ccd9ea;} .sc_history .his_box .img_box ul {display:none; } .sc_history .his_box .year {margin-bottom:0; width:180px; height:180px; margin-top:-50px;} .sc_history .his_box .year dl {padding-bottom:5px;} .sc_history .his_box .year em {margin-top:15px;} .sc_history .tt_box {;} .sc_history .history .img {display:block; margin-top:15px;} .sc_history .history dl{margin-top:30px;} .sc_history .history dl+ dl {margin-top:30px;} .sc_history .history dl+ dl {margin-top:30px;} .sc_history .history .month {width:55px;} .sc_history .history .point {top:-7px;} .sc_history .his_box .ul+ .ul .img_box:before {top:-50px;} .sc_certi .top {height:300px;} .sc_certi .top .txt {bottom:-160px; width:300px; height:300px; margin-left:-150px;} .sc_certi .top .txt dl {padding-top:25px;} .sc_certi .certi_box {padding:30px; background-position:center center; background-size:100%;} .sc_certi .certi_box ul {margin:-25px 0 0 -25px;} .sc_certi .certi_box dl {margin:25px 0 0 25px; padding:0 15px;} .sc_partners dd {margin-top:5px;} .sc_location .ul+ .ul {margin-top:50px;} .sc_location .ul:before {display:none;} .sc_location .li {float:none; width:100%; padding:20px 0 0;} .sc_location .map_box {padding-top:30px;} .sc_location .map {position:static; height:300px; width:100%; border:1px solid #ddd; box-sizing:border-box; border-bottom:0;} .sc_location .map .marker img {width:30px;} .sc_location .txt_box .title {margin-bottom:10px;} .sc_location .txt_box ul {margin-top:20px;} .sc_location .txt_box dt {width:80px;} .sc_location .txt_box .tt:before {top:7px;} .sc_motto .round {width:220px; height:220px;} .sc_motto .round .r_box {width:220px; height:220px;} .sc_motto .round dt img {width:60px;} .sc_motto .round dd {padding-top:20px;} .sc_motto .round .txt {margin-top:5px;} .sc_motto .round1 {margin-top:-45px;} .sc_motto .round2 {margin-top:-45px;} .sc_motto .round3 {padding-top:160px;} .sc_motto .round .point.p3 {bottom:-82px;} .sc_motto .round .point.p3:before {height:71px;} .sc_motto .center .round {width:260px; height:260px;} .sc_motto .center .round .r_box {width:260px; height:260px;} .sc_motto .round .line {width:280px; height:142px; margin-left:-140px; bottom:-10px;} /* .sc_vision {margin-top:40px;} */ .sc_operation {margin-top:40px; padding:30px;} .sc_operation ul {margin:-20px 0 0 -20px;} .sc_operation .op_box {margin:20px 0 0 20px;} .sc_chart {padding:220px 30px 30px;} .sc_chart dt .tt_box {max-width:200px; } .sc_chart dd {max-width:200px;} .sc_relative .top {height:360px; padding-bottom:80px; background-size:cover;} .sc_relative .rel_wrap {padding:0 30px;} .sc_relative .rel_wrap .table {margin:-80px -20px 0;} .sc_relative .rel_wrap .ul {border-spacing:20px 0;} .sc_relative .rel_wrap .ul+ .ul {margin-top:20px;} .sc_relative .rel_box {padding:20px 20px 25px;} .sc_relative .rel_box .info {margin-top:20px;} .sc_relative .rel_box .info li+ li {margin-top:10px;} .sc_relative .open_box {margin-top:-240px !important;} /* .sc_relative .open_box .open_table .in {max-height:400px; overflow-y:auto;} */ .sr_part { padding:40px 0;} .sr_part .part_box .round_box li {width:220px; height:220px;} .sr_part .sub_box {margin-top:30px;} .sr_part .comment u {display:inline;} .sr_part .btn_box {margin-top:30px;} .sr_part .btn_box .btn {padding:15px 25px 14px;} .sr_about dd {padding:20px 20px 0 !important;} .sr_about .tit_box {padding-left:20px !important;} .sr_about .tit_box .line {left:20px;} .sr_about .txt_box {padding-left:20px !important;} .sr_about .txt_box .en {line-height:1;} .sr_about .txt_box .txt {margin-top:5px;} .sc_vision {padding:40px 0 60px;} .sc_vision .in_box .circle dd img {height:60px;} } /* **************************************** * ◆ 800px ~ * **************************************** */ @media screen and (max-width:800px) { .sub_top .sub_visual {height:380px;} .sub_top .sub_visual .bg {height:380px;} .sub_top.sub_01 .sub_visual .bg {background:transparent url('../images/wepco_m/sub/sub_visual01.jpg') center bottom no-repeat;} .sub_top.sub_02 .sub_visual .bg {background:transparent url('../images/wepco_m/sub/sub_visual02.jpg') center bottom no-repeat;} .sub_top.sub_03 .sub_visual .bg {background:transparent url('../images/wepco_m/sub/sub_visual03.jpg') center bottom no-repeat;} .sub_top.sub_04 .sub_visual .bg {background:transparent url('../images/wepco_m/sub/sub_visual04.jpg') center bottom no-repeat;} .sub_top.sub_05 .sub_visual .bg {background:transparent url('../images/wepco_m/sub/sub_visual05.jpg') center bottom no-repeat;} .sub_top.sub_06 .sub_visual .bg {background:transparent url('../images/wepco_m/sub/sub_visual06.jpg') center bottom no-repeat;} .sb_list .t_date {width:130px;} .sb_list .t_name {width:180px;} .sb_board.if_rnd .sb_list .t_name {width:140px;} .sb_board.if_rnd .sb_list .tbody .t_name {padding-right:20px;} .sc_top dl {padding:0 10px;} .sc_history .history dt {width:120px;} .sc_history .history .num {padding-left:0px;} .sc_history .history .point {left:-13px; width:26px; height:26px; display:none;} .sc_history .history .point:before {width:6px; height:6px;} .sc_certi .top {height:280px;} .sc_certi .certi_box dt {height:70px;} .sc_partners ul {margin:-20px 0 0 -20px;} .sc_partners dl {margin:20px 0 0 20px;} .sc_partners dt {height:70px;} .sc_partners .logo_box .logo img {max-height:75px;} .sc_partners .link {padding:11px 10px;} .sc_location .txt_box dt {width:75px;} .sr_part .part_box .title {min-width:auto; max-width:170px; padding:0 30px; line-height:1;} .sr_part .part_box .title:before {bottom:4px; left:-13px; margin-left:0;} .sr_part .part_box .title:after {transform:rotate(-45deg); bottom:4px; margin-right:0; left:auto; right:-13px;} .sc_motto .round {width:180px; height:180px;} .sc_motto .round .r_box {width:180px; height:180px;} .sc_motto .round dt img {width:50px;} .sc_motto .round dd {padding-top:15px;} .sc_motto .round .txt {margin-top:5px;} .sc_motto .round1 {margin-top:-30px;} .sc_motto .round2 {margin-top:-30px;} .sc_motto .round3 {padding-top:0; clear:both;} .sc_motto .round3:before {margin-top:0;} .sc_motto .round .point.p3 {bottom:-77px;} .sc_motto .round .point.p3:before {height:67px;} .sc_motto .center .round {width:220px; height:220px;} .sc_motto .center .round .r_box {width:220px; height:220px;} .sc_motto .round .line {width:240px; height:122px; margin-left:-120px; bottom:-10px;} .sc_motto .center .round dt {padding-bottom:10px;} .sc_motto .center .round dt img {width:50px;} .sc_motto .center .round dd {padding-top:15px;} .sc_motto .center .tc_box {padding:0 40px 40px;} .sc_motto .round .bg {margin-left:-103px;} .sc_motto .round .bg img {height:50px;} /* .sc_vision {background:transparent url('../images/wepco_m/sub/sv_bg.jpg') center bottom no-repeat; background-size:cover;} .sc_vision .ul {display:block;} .sc_vision .li {display:block; padding:30px;} .sc_vision .this_left .table {display:table; width:100%; table-layout:fixed; height:250px;} .sc_vision .this_left .tc_box {display:table-cell; vertical-align:middle;} .sc_vision .this_left dl {max-width:250px;} .sc_vision .this_right dl {height:75px;} */ .sc_operation .op_box .table {height:300px;} .sc_operation .op_box .tc_box {vertical-align:top;} .sc_operation .op_box .tc_box {padding:30px 20px 0;} .sc_operation .op_box .ic {margin-top:25px;} .sc_operation .op_box dl {display:block;} .sc_operation .op_box dt, .sc_operation .op_box dd {display:block; width:100%; text-align:center; border:0;} .sc_operation .op_box dd {margin-top:25px; box-sizing:border-box; padding:0 15px;;} .sc_operation .op_box .txt {margin-top:20px;} .sc_operation .op_box .txt u {display:block;} .sc_chart dt .tt_box {max-width:150px; } .sc_chart dd {max-width:150px;} .sc_relative .top {height:330px;} .sr_part .part_box .round_box {padding:30px 70px 70px;} .sr_part .part_box .round_box:before {top:10px; margin-left:-111px;} .sr_part .part_box .round_box:after {top:10px; margin-left:83px; transform:rotate(-45deg);} .sr_part .part_box .round_box .no1 {margin:0 auto; float:none;} .sr_part .part_box .round_box .no2 {clear:both; margin:-56px -15px 0;} .sr_part .part_box .round_box .no2:before {top:-10px; margin-top:0; left:50%; margin-left:40px;} .sr_part .part_box .round_box .no3 { margin:-56px -15px 0;} .sr_part .part_box .round_box .no3:before {top:-13px; margin-top:0; left:50%; margin-left:-55px;} .sr_part .sub_box .ul {display:block;} .sr_part .sub_box .li {display:block; border:0; padding:20px 0;} .sr_part .sub_box .li+ .li {border-top:1px solid #ddd;} .sr_part .sub_box dl {display:table; width:100%; table-layout:fixed;} .sr_part .sub_box dt, .sr_part .sub_box dd {display:table-cell; vertical-align:middle;} .sr_part .sub_box dt {width:140px;} .sr_part .sub_box dt img {width:80px;} .sr_part .sub_box dd {text-align:left; padding-left:40px; position:relative;} .sr_part .sub_box .txt_box {} .sr_part .sub_box .num {float:none;} .sr_part .sub_box .tit {margin:5px; float:none;} .sr_part .sub_box .tt_box {height:auto;} .sr_part .sub_box .photo {margin-top:10px;} } /* **************************************** * ◆ 700px ~ * **************************************** */ @media screen and (max-width:700px) { .company_info { margin-top:50px;} .sub_top .location {height:50px;} .sub_top .location .ul {height:49px;} .sub_top .location .depth {width:100%; padding:0 45px 0 15px; height:49px; line-height:50px;} .sub_top .location .depth .ic {right:15px;} .sub_top .location .home_btn {height:49px; width:50px; padding-top:17px; box-sizing:border-box;} .sub_top .location .ctg_box {padding-top:49px;} .sub_top .if_open_loc .ctg_box li {height:50px;} .sub_top .location .ctg_box .btn {height:50px; line-height:50px; padding:0 15px;} .sb_part {margin:0;} .sb_part .ul {display:block;} .sb_part .li {padding:0px; display:block; border:0 !important; position:relative;} .sb_part .li+ .li .part_box {margin-top:30px;} .sb_part dl {padding-top:10px;} .sb_part .open_box {padding:0px;} .sb_part .open_box .tt_box {width:100%; max-width:500px; margin-left:-250px;} .sb_part .open_box .inner {min-width:auto; max-width:50px;;} .sb_list .list {display:block;} .sb_list .list ul {display:block;} .sb_list .list li {border-bottom:0; display:block; text-align:left !important; padding:0 !important;} .sb_list .list .thead {display:none;} .sb_list .tbody {position:relative; padding:10px 10px 10px 60px; border-bottom:1px solid #ddd;} .sb_list .tbody .t_number {position:absolute; left:0; top:11px; width:50px; text-align:center !important;} .sb_list .tbody .t_date {width:auto; line-height:1;} .sb_list .tbody .t_date .date {} .sb_list .tbody .t_title {display:block; margin-top:5px;} .sb_list .tbody .t_title em {padding-right:5px;} .sb_list .tbody .t_name {width:auto; margin-top:5px;} .sb_list .tbody .t_name .name {line-height:1.1;} .sb_list .tbody .t_name .ic {top:8px;} .sb_list .tbody .t_name .ic img {height:10px;} .sb_list .tbody.if_kepco .t_name .name { padding-left:20px;} .sb_board .ctg_tab dt img {height:45px;} .sb_board .board_top .search li {padding-left:5px;} .sb_board .board_top .input_design .input {width:70px;} .sb_board .board_top .btn {min-width:90px;} .sb_project .top_tit {height:70px; line-height:70px;} .sb_project .project_box li {width:100%;} .sb_project .prevnext {bottom:75px;} .sb_project .prevnext img {height:20px;} .sb_project .pro_box .info {padding-top:10px;} .sb_project .pro_box .ctg {float:left; } .sb_project .pro_box .date {float:right;} .sb_list+ .sb_list {margin-top:40px;} .sb_list .group_tit dl {height:45px;} .sb_list .group_tit dt {width:50px;} .sb_list .group_tit dd {padding:0 15px;} .sb_list .list .t_state {position:absolute !important; right:0px; bottom:6px; width:auto;} .sb_list .list .t_state span {padding:3px 10px; border-radius:30px; overflow:hidden; box-sizing:border-box;} .sb_list .t_state .attend {border:1px solid #00998f;} .sb_list .t_state .subject {border:1px solid #e88327;} .sb_board.if_rp .sb_list {border-top:1px solid #ddd;} .sb_board.if_rnd .sb_list .list ul {overflow:hidden;} .sb_board.if_rnd .sb_list .list .tbody {} .sb_board.if_rnd .sb_list .tbody .t_number {top:14px;} .sb_board.if_rnd .sb_list .t_title {margin:0 0 10px;} .sb_board.if_rnd .sb_list .t_name {padding-left:17px !important; background:transparent url('../images/rb_img/mo/board_cer.png') left center no-repeat; background-size:auto 14px; width:auto; padding-right:85px !important;} .sb_list .list .t_date {width:auto; height:17px; line-height:14px; padding-left:17px !important; background:transparent url('../images/rb_img/mo/board_date.png') left center no-repeat; background-size:auto 12px; } .sb_board.if_rnd .sb_list .t_date {margin-top:8px; height:12px; line-height:15px;} .sc_top ul {display:block; height:auto; background:transparent url('../images/wepco_m/sub/sc_gr_top.jpg') right top no-repeat; background-size:cover;} .sc_top li {display:block; padding:50px 0;} .sc_top .bg {padding:30px 0;} .sc_top .if_pc {display:none !important;} .sc_top .if_mo {display:block !important;} .sc_top dl {max-width:360px;} .sc_top dd {margin-top:15px;} .sc_top .title {padding:15px 0;} .sc_history .top {height:220px; background-size:cover;} .sc_certi .top {height:260px; padding-bottom:85px;} .sc_certi .top .txt {bottom:-140px; width:260px; height:260px; margin-left:-130px; } .sc_certi .top .txt dl {padding-top:20px;} .sc_certi .certi_box ul {margin:-20px 0 0 -20px;} .sc_certi .certi_box dl {margin:20px 0 0 20px;} .sc_partners li {width:50%;} .sc_partners li:nth-of-type(3n)+ li {clear:none;} .sc_partners li:nth-of-type(2n)+ li {clear:both;} .sc_location .ul+ .ul {margin-top:40px;} .sc_location .txt_box dt {width:70px;} .sc_location .txt_box .tt {padding-left:13px;} .sc_location .txt_box .tit {line-height:40px;} .sc_location .txt_box .tel_btn {width:40px; height:40px; margin-right:7px;} .sc_location .txt_box .map_btn {height:40px; line-height:38px; padding:0 20px;} .sc_location .txt_box .map_btn .ic {margin-top:7px;} /* .sc_vision .li {padding:20px;} .sc_vision .this_left .table {height:auto;} .sc_vision .this_left .tc_box {padding:50px 0;} .sc_vision .this_left dt {margin-top:10px;} .sc_vision .this_right ul {max-width:420px;} .sc_vision .this_right dt {width:30px;} .sc_vision .this_right dd {padding-left:10px;} */ .sc_operation .op_box dd {padding:0 5px;} .sc_chart .li.list {background:#fff;} .sc_chart dl {float:none; display:table; width:auto; table-layout:fixed; margin:0 auto;} .sc_chart dl+ dl {margin-top:40px;} .sc_chart dt .tt_box:before {display:none;} .sc_chart dl:last-child dt .tt_box:before {display:block; width:1px; height:627px; left:-43px; bottom:50%; top:auto;} .sc_chart dt, .sc_chart dd {display:table-cell; vertical-align:top; padding:0 10px;} .sc_chart dt .tt_box {z-index:10;} .sc_chart dt .tt_box:after {width:40px; height:1px; left:-42px; top:50%; display:block !important;} .sc_chart dt .point {left:-6px; top:50%; margin:-5px 0 0 0; display:none;} .sc_chart dd {padding-top:6px;} .sc_chart dd:before {display:none;} .sc_chart dd ul {max-width:180px;} .sc_chart dd li {position:relative;} .sc_chart dd li:before {content:""; position:absolute; left:-110px; top:50%; width:110px; height:1px; background:#ccc;} .sc_chart dd li+ li:after {content:""; position:absolute; left:-110px; bottom:50%; width:1px; height:150%; background:#ccc;} .sc_relative .rel_wrap .table {margin:-60px 0 0;} .sc_relative .rel_wrap .ul {display:block;} .sc_relative .rel_wrap .li {display:block;} .sc_relative .rel_wrap .li+ .li {margin-top:15px;} .sc_relative .top {height:300px;} .sc_relative .rel_box .info li {padding-left:25px;} .sc_relative .rel_box .info .ic {top:0px;} .sc_relative .rel_box .info .ic img {height:15px;} .sc_relative .rel_box .info .fax .ic {top:4px;} .sr_part .part_box .title {min-width:auto; padding:0 20px;} .sr_part .part_box .round_box {padding:25px 55px 55px;} .sr_part .part_box .round_box:before {margin-left:-85px; top:5px; z-index:1;} .sr_part .part_box .round_box:after {margin-left:58px; top:6px; z-index:1;} .sr_part .part_box .round_box li {width:200px; height:200px; border-width:26px !important;} .sr_part .part_box .round_box .no2 {margin:-49px -13px 0;} .sr_part .part_box .round_box .no2:before {top:-10px; margin-left:36px;} .sr_part .part_box .round_box .no3 {margin:-49px -13px 0;} .sr_part .part_box .round_box .no3:before {top:-10px;} .sr_part .sub_box .li+ .li {border-left:0;} .sr_part .sub_box dt {width:110px;} .sr_part .sub_box dt img {width:70px;} .sr_part .sub_box .tt {margin-top:5px;} .sc_vision .in_box .circle {width:140px;} .sc_vision .in_box .circle dd img {height:55px;} .sc_vision .in_box .txt {padding:45px 10px 45px 160px;} } @media (min-width: 320px) and (max-width: 768px) {.sc_chart dl:first-child dt .tt_box:before {top:-70px; left:auto; right:0px; display:block; width:223px;} .sc_chart dl:last-child dt .tt_box:before { display: block; width: 1px; height: 627px; left: -43px; bottom: 170%; top: auto; }} /* **************************************** * ◆ 650px ~ * **************************************** */ @media screen and (max-width:650px) { .sc_operation li {width:100%;} .sc_operation .op_box .table {height:auto;} .sc_operation .first .op_box .table {height:150px;} .sc_operation .op_box .tc_box {padding:20px 0;} .sc_operation .op_box dl {display:table; width:100%; table-layout:fixed;} .sc_operation .op_box dt, .sc_operation .op_box dd {display:table-cell; vertical-align:middle;} .sc_operation .op_box dt {width:100px; border-right:1px solid #eee;} .sc_operation .op_box dd {text-align:left; padding:0 20px;} .sc_operation .op_box .sub {margin-top:5px;} .sc_operation .op_box .txt {max-width:100%; margin-top:15px;} .sc_operation .op_box .txt u {display:inline;} .sc_operation .op_box .ic {margin-top:15px;} .sc_operation .op_box .ic img {width:50px;} /* .sc_certi .certi_box .title u {display:inline;} */ } /* **************************************** * ◆ 600px ~ 슬라이드 모바일 형태 시작 (네비2차 열고닫기) * **************************************** */ @media screen and (max-width:600px) { .m_main_v {padding-top:80% !important;} .c_user_box {font-size:14px; } .sub_top .sub_visual {height:330px;} .sub_top .sub_visual .bg {height:330px;} .sub_top .sub_visual .txt_box {padding-top:105px;} .sub_top .location {padding:0;} .sub_top .location .ul {width:100%; position:relative;} .sub_top .location .li {border:0; border-left:1px solid #ddd;} .sub_top .location .li.depth1 {position:static; border-left:0;} .sub_top .location .li.home.if_pc {display:none !important;} .sub_top .location .home_btn {position:absolute; left:0; top:0; width:60px; text-align:center; border-right:1px solid #ddd; box-sizing:border-box; display:none !important;} .sub_top .location .depth_box {position:static; } .sub_top .location .ctg_box ul {border-top:1px solid #000;} .sub_top .location .ctg_box li:first-child .btn {border-top:0;} .sub_top .location .ctg_box .btn {padding:0 15px;} .sub_top .location .depth {width:100%; min-width:auto; padding:0 45px 0 15px;} .sub_top .location .depth .ic {right:15px; width:10px;} .sub_top .location .depth .triangle-down {border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #333; margin-bottom:5px;} .sub_top .location .depth .triangle-up {border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #333;} .sub_top .if_open_loc .depth .triangle-down {margin-top:-10px;} .sub_top .if_open_loc .depth:before {content:""; position:absolute; left:-1px; top:-1px; right:-1px; bottom:-1px; border:1px solid #000; border-bottom:0;} .sub_top .if_open_loc .depth:after {content:""; position:absolute; left:0; bottom:-1px; width:100%; height:3px; background:#fff;} .sub_top .if_open_loc .ctg_box {box-shadow:0px 5px 5px rgba(0,0,0,0.1);} .ctg2_wrap .share {position:fixed; right:0; top:auto; bottom:0px; margin-top:0; margin:20px; z-index:100; transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out;} .ctg2_wrap .share .share_btn {width:50px; height:50px; background:rgba(255,255,255,0.8); border:1px solid #000; border-radius:100px; overflow:hidden; text-align:center;} .ctg2_wrap .share .share_btn .icon {padding:13px 10px;} .ctg2_wrap .share .share_btn img {height:24px; } .ctg2_wrap .share.if_scroll {bottom:60px;} .ctg2_wrap .share {margin:10px;} .ctg2_wrap .share .share_btn {width:40px; height:40px;} .ctg2_wrap .share .share_btn .icon {padding:11px 4px 12px 3px;} .ctg2_wrap .share .share_btn img {height:17px;} .ctg2_wrap .share.if_scroll {bottom:50px;} .ctg2_wrap .share_box .s_box {min-width:auto;} .sub_ctg {margin-bottom:20px;} .sub_ctg .inner li { height:40px; } .sub_ctg .inner .btn {display:block; padding:10px 0px;} .section+ .section {margin-top:50px;} .sb_part .more_btn {width:14px; height:14px;} .sb_part .more_btn:before {width:14px; margin-left:-7px} .sb_part .more_btn:after {height:14px; margin-top:-7px;} .sb_part .open_box {bottom:-282px;} .sb_part .open_box .bg {max-width:350px;} .sb_part .open_box .bg img {width:100%;} .sb_part .open_box .tt_box {max-width:470px; margin-left:-235px;} .sb_part .open_box .top {height:60px; padding:0 125px;} .sb_part .open_box .top .center {padding-bottom:45px;} .sb_board .ctg_tab ul {display:block; overflow:hidden; border-bottom:1px solid #ddd; border-right:1px solid #ddd; box-sizing:border-box;} .sb_board .ctg_tab li {float:left; width:50%; box-sizing:border-box; border:0; border-top:1px solid #ddd; border-left:1px solid #ddd;} .sb_board .ctg_tab li:nth-of-type(2n)+ li {clear:both;} .sb_board .ctg_tab dl {padding:10px; display:table; width:100%; table-layout:fixed; height:80px;} .sb_board .ctg_tab dt, .sb_board .ctg_tab dd {display:table-cell; vertical-align:middle;} .sb_board .ctg_tab dt {width:70px; padding-left:10px; box-sizing:border-box;} .sb_board .ctg_tab dt img {height:40px;} .sb_board .ctg_tab dd { text-align:left; padding:0 10px;} .sb_board .board_top {padding-left:0; margin:0px 0 10px;} .sb_board .ctg_tab+ .board_top {margin-top:20px;} .sb_board .board_top .total {} .sb_project .prevnext img {height:18px;} .sb_list+ .sb_list {margin-top:30px;} .sc_greeting {margin-top:30px;} .sc_greeting .layout_fix {padding:0 20px;} .sc_greeting .top_box .tit_box {padding:0 20px;} .sc_greeting .top_box .line {left:0px; width:1px;} .sc_greeting .mid_box .this_left {padding:30px 20px 80px; } .sc_greeting .mid_box .img img {width:400px;} .sc_greeting .mid_box .this_right:before {left:-170px; background-size:500px;} .sc_greeting .bot_box .layout_fix {padding:0 20px;} .sc_greeting .bot_box .txt_box {padding:30px 20px;} .sc_greeting .bot_box .txt+ .txt {margin-top:15px;} .sc_greeting .bot_box .img:before {background-size:auto 80px;} .sc_greeting .name {margin-top:20px;} .sc_history .his_box {padding:0px;} .sc_history .his_box .year {width:160px; height:160px;} .sc_history .his_box .year em {margin-top:14px;} .sc_history .history .num {padding-left:0px;} .sc_history .history dl+ dl {margin-top:20px;} .sc_history .history dt {width:100px;} .sc_history .history .month {width:40px;} .sc_history .history .txt {padding-left:10px;} .sc_history .history .txt:before {width:2px; height:2px;} .sc_history .history .img {margin-top:10px;} .sc_certi .certi_box {padding:20px;} .sc_certi .certi_box ul {margin:-20px 0 0 -15px;} .sc_certi .certi_box dl {margin:20px 0 0 15px; padding:0 10px;} .sc_certi .certi_box li {width:50%;} .sc_certi .certi_box li:nth-of-type(3n)+ li {clear:none} .sc_certi .certi_box li:nth-of-type(2n)+ li {clear:both} .sc_certi .certi_box .logo img {max-height:60px;} .sc_certi .certi_box dd {height:110px;} .sc_partners ul {margin:-15px 0 0 -15px;} .sc_partners dl {margin:15px 0 0 15px;} .sc_partners dt {height:150px;} .sc_partners .logo_box .logo img {max-height:70px;} .sc_location .txt_box ul {margin-top:15px;} .sc_location .txt_box li+ li {margin-top:5px;} .sc_location .txt_box dt {width:65px;} .sc_location .map {} .sc_location .map .marker img {width:26px;} /* .sc_vision {margin-top:30px;} */ .sc_operation {margin-top:30px; padding:20px;} .sc_chart {padding:220px 20px 20px;} .sc_relative .top {height:270px; padding-bottom:60px; background-size:cover;} .sc_relative .rel_wrap {padding:0 20px;} .sc_relative .rel_wrap .ul {border-spacing:15px 0;} .sc_relative .rel_wrap .ul+ .ul {margin-top:15px;} .sc_relative .rel_wrap .li {padding-bottom:40px;} .sc_relative .rel_box .btn_box .btn {height:38px; line-height:36px;} .sc_relative .rel_box {padding:15px;} .sc_relative .rel_box .info {margin-top:15px;} .sc_relative .rel_box .info li+ li {margin-top:5px;} .sc_relative .open_box {width:100%; margin-left:0; left:0; padding:0 40px; box-sizing:border-box;} .sc_relative .open_box .open_table {padding:20px;} .sc_relative .open_box .open_table dt {width:100px;} .sc_relative .open_box .open_table dd {padding-left:10px;} .sc_chart .li {height:120px;} .sc_chart .round {width:140px; height:140px;} .sc_chart .round .r_box {width:180px; height:50px; margin-left:-20;} .sc_chart .round.if_ceo .line {width:136px; margin-left:-68px; height:68px;} .sc_chart .round.if_sub .r_box {margin-top:50px;} .sc_chart .round.if_sub .line {width:136px; margin-left:-68px; height:68px;} .sc_chart .round.if_right {margin-left:100px;} .sc_chart .round.if_right:before {width:100px; left:-100px;} .sc_chart .round.if_right .r_box {margin-left:-15px;} .sc_chart .round.if_right .line {height:136px; margin-left:-68px; width:68px;} .sc_chart .tc_box {padding:0 10px;} .sc_chart dl:first-child dt .tt_box:before {width:210px;} .sc_chart dt .tt_box {max-width:160px;} .sc_chart dd ul {max-width:160px;} .sr_part .sub_box {margin-top:20px;} .sr_part .sub_box dt {display:table; width:100%; table-layout:fixed;} .sr_part .sub_box dd {display:block; padding-left:0; width:100%;} .sr_part .sub_box .picto, .sr_part .sub_box .txt_box {display:table-cell; vertical-align:middle;} .sr_part .sub_box .picto {width:85px; text-align:left;} .sr_part .sub_box .txt_box {text-align:left; overflow:hidden;} .sr_part .sub_box .num, .sr_part .sub_box .tit {float:left; margin:0} .sr_part .sub_box .num {margin:0 10px;} .sr_part .sub_box .photo .txt {padding-top:5px;} .sr_part .btn_box {margin-top:20px;} .sr_part .btn_box .btn {padding:12px 15px 11px;} .sc_vision {padding:30px 0 50px;} .sc_vision .v_tit .tit {height:40px; line-height:40px; padding:0 20px;} } /* **************************************** * ◆ 550px ~ * **************************************** */ @media screen and (max-width:550px) { .sb_part .open_box .tt_box {max-width:440px; margin-left:-220px;} .sb_board .board_top .total {} .sb_board .board_top .search {width:100%; float:none; position:relative; box-sizing:border-box; padding-left:100px;} .sb_board .board_top .search .this_search {margin-right:-50px;} .sb_board .board_top .search .this_input {padding-left:0; margin:0 -10px;} .sb_board .board_top dl {display:table; width:100%; table-layout:fixed; border-collapse:separate; border-spacing:10px 0;} .sb_board .board_top dt, .sb_board .board_top dd {display:table-cell; vertical-align:middle; float:none;} .sb_board .board_top dt {width:60%;} .sb_board .board_top .input_box {display:table; width:100%; table-layout:fixed;} .sb_board .board_top .input_design, .sb_board .board_top .dash {display:table-cell; vertical-align:bottom; float:none;} .sb_board .board_top .input_design .input {width:100%;} .sb_board .board_top .btn {min-width:auto; width:100%;} .sb_board .board_top .dash {width:20px;} .sc_partners .logo_box .logo img {max-height:65px;} .sr_part .sub_box .picto {width:75px;} .sr_part .sub_box dt img {width:60px;} .sr_part .part_box .round_box li {width:180px; height:180px;} } /* **************************************** * ◆ 500px ~ * **************************************** */ @media screen and (max-width:500px) { .sub_top .sub_visual dd {display:none;} .sub_top .sub_visual dt {opacity: .3; -ms-filter:alpha(opacity=30); filter:alpha(opacity=30);} .sub_top .sub_visual .tit {font-weight:300; } .sub_top .location {height:45px;} .sub_top .location .ul {height:44px;} .sub_top .location .depth {width:100%; min-width:auto; padding:0 40px 0 10px; height:44px; line-height:45px;} .sub_top .location .depth .ic {right:10px; margin-top:-1px; width:8px;} .sub_top .location .depth .triangle-down {border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #333; margin-bottom:5px;} .sub_top .location .depth .triangle-up {border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 4px solid #333;} .sub_top .if_open_loc .depth .triangle-down {margin-top:-9px;} .sub_top .location .home_btn {height:44px; width:45px; padding-top:15px; box-sizing:border-box;} .sub_top .location .home_btn .icon img {width:16px;} .sub_top .location .ctg_box {padding-top:44px;} .sub_top .if_open_loc .ctg_box li {height:40px;} .sub_top .location .ctg_box .btn {height:40px; line-height:40px; padding:0 10px;} .ctg2_wrap .share_box .table {width:100%;} .ctg2_wrap .share_box .inner {padding:0 40px;} .ctg2_wrap .share_box .tit {padding:15px 0;} .ctg2_wrap .share_box .close_btn {background-size:18px;} .ctg2_wrap .share_box ul {overflow:hidden; padding:15px; max-width:500px;} .ctg2_wrap .share_box .btn {display:block; text-align:center; padding:10px;} .ctg2_wrap .share_box .txt {margin-top:10px;} .ctg2_wrap .share_box .ic img {height:30px; } .sb_part .open_box {bottom:-220px;} .sb_part .open_box .bg {max-width:270px;} .sb_part .open_box .on_txt {padding:0 30px; padding-top:100px;} .sb_part .open_box .on_txt .tc em {line-height:1; padding-top:3px;} .sb_part .open_box .on_txt .tc strong {display:block;} .sb_part .open_box .tt_box {max-width:380px; margin-left:-190px;} .sb_part .open_box li {padding:0;} .sb_part .open_box .middle {padding:0 20px;} .sb_part .open_box .middle ul {height:70px;} .sb_part .open_box .top {padding:0 90px; height:50px;} .sb_project .top_tit {height:60px; line-height:60px;} .sb_project .prevnext {bottom:70px;} .sb_project .pro_box .ctg {float:none; display:block;} .sb_project .pro_box .date {float:none; display:block;} .sc_greeting .bot_box .img:before {background-size:auto 60px; top:-90px;} .sc_history .his_box {padding:0;} .sc_history .top {height:200px; background-size:cover;} .sc_history .history dt {width:90px;} .sc_certi .top {height:240px; padding-bottom:85px;} .sc_certi .top .txt {bottom:-130px; width:240px; height:240px; margin-left:-120px; } .sc_certi .top .txt dl {padding-top:15px;} .sc_partners dt {height:100px;} .sc_location .txt_box .tit {line-height:36px;} .sc_location .txt_box .tel_btn {width:36px; height:36px; margin-right:5px; background-size:14px;} .sc_location .txt_box .map_btn {height:36px; line-height:34px; padding:0 15px;} .sc_location .txt_box .map_btn .ic {margin-top:7px; margin-right:3px;} .sc_location .txt_box .map_btn .ic img {width:19px;} .sc_motto .round {width:140px; height:140px;} .sc_motto .round .r_box {width:140px; height:140px;} .sc_motto .round dt img {width:40px;} .sc_motto .round dd {padding-top:10px;} .sc_motto .round .txt {margin-top:5px;} .sc_motto .round1 {margin-top:-30px;} .sc_motto .round2 {margin-top:-30px;} .sc_motto .round3 {padding-top:0; clear:both;} .sc_motto .round3:before {margin-top:0;} .sc_motto .round .point.p3 {bottom:-57px;} .sc_motto .center .round {width:180px; height:180px;} .sc_motto .center .round .r_box {width:180px; height:180px;} .sc_motto .round .line {width:200px; height:102px; margin-left:-100px; bottom:-10px;} .sc_motto .center .round dt {padding-bottom:10px;} .sc_motto .center .round dt img {width:45px;} .sc_motto .center .round dd {padding-top:10px;} .sc_motto .center .tc_box {padding:0 30px 30px;} .sc_motto .round .bg {margin-left:-82px;} .sc_motto .round .bg img {height:40px;} .sc_motto .round .point.p3:before {height:47px;} /* .sc_vision .this_left .tc_box {padding:30px 0;} .sc_vision .this_right dl {height:65px;} */ .sc_operation {padding:15px;} .sc_chart {padding:220px 15px 15px;} /* .sc_relative .rel_wrap {padding:0 15px;} */ .sc_relative .open_box {padding:0 25px; margin-top:-171px;} .sc_relative .open_box .open_table {padding-top:10px;} .sc_relative .open_box .open_table dt, .sc_relative .open_box .open_table dd {padding:5px;} .sc_relative .if_long .open_box {margin-top:-238px;} .sc_relative .open_box .close_btn {top:-5px;} .sc_chart .round.if_right {margin-left:50px;} .sc_chart .round.if_right:before {width:50px; left:-50px;} .sc_chart dl:last-child dt .tt_box:before {left:-23px;} .sc_chart dl:first-child dt .tt_box:before {width:190px;} .sc_chart dt .tt_box:after {width:20px; left:-22px;} .sr_part .part_box .title {min-width:auto; padding:0 20px;} .sr_part .part_box .title:before {bottom:1px;} .sr_part .part_box .title:after {bottom:1px;} .sr_part .part_box .round_box {padding:20px 40px 40px;} .sr_part .part_box .round_box li+ li:before {width:16px; height:16px;} .sr_part .part_box .round_box li {width:150px; height:150px; border-width:20px !important;} .sr_part .part_box .round_box .no2 {margin:-37px -10px 0;} .sr_part .part_box .round_box .no2:before {top:-7px; margin-left:28px;} .sr_part .part_box .round_box .no3 {margin:-37px -10px 0;} .sr_part .part_box .round_box .no3:before {top:-9px; margin-left:-40px;} .sr_about dd {padding:15px 15px 0 !important;} .sr_about .tit_box {padding-left:15px !important;} .sr_about .tit_box .line {left:15px;} .sr_about .txt_box {padding-left:15px !important;} .sr_about .txt_box .en {line-height:1;} .sr_about .txt_box .txt {margin-top:5px;} .sb_board .ctg_tab dl {height:70px;} .sb_board .ctg_tab dt {width:55px;} .sb_board .ctg_tab dt img {height:35px;} .sb_board .ctg_tab dd {padding:0 5px;} .sc_vision .in_box .circle {width:120px;} .sc_vision .in_box .circle dd img {height:50px;} .sc_vision .in_box .txt {padding:35px 10px 35px 140px;} .sc_vision .title {margin-top:15px;} .sc_vision .table {margin-top:20px 0 0;} } /* **************************************** * ◆ 450px ~ * **************************************** */ @media screen and (max-width:450px) { .sb_part .open_box {bottom:-190px;} .sb_part .open_box .close_btn {padding:15px;} .sb_part .open_box .bg {max-width:230px;} .sb_part .open_box .on_txt {padding:0 30px; padding-top:80px;} .sb_part .open_box .on_txt .tc em {line-height:1; padding-top:3px;} .sb_part .open_box .on_txt .tc strong {display:block;} .sb_part .open_box .tt_box {max-width:320px; margin-left:-160px;} .sb_part .open_box li {padding:0;} .sb_part .open_box .tt_box {bottom:10px;} .sb_part .open_box .bottom {padding:0;} .sb_part .open_box .middle {padding:0 10px;} .sb_part .open_box .middle ul {height:60px;} .sb_part .open_box .top {padding:0 80px; height:45px;} .sb_part .open_box .top .center {padding-bottom:35px;} .sb_part .open_box .tit {margin-top:2px;} .sc_greeting .layout_fix {padding:0 15px;} .sc_greeting .top_box .tit_box {padding:0 15px; } .sc_greeting .mid_box .this_left {padding:20px 15px 70px; } .sc_greeting .mid_box .img {margin-top:-60px;} .sc_greeting .mid_box .img img {width:300px;} .sc_greeting .mid_box .this_right:before {background-size:420px;} .sc_greeting .bot_box .layout_fix {padding:0 15px;} .sc_greeting .bot_box .txt_box {padding:25px 15px;} .sc_greeting .bot_box .txt+ .txt {margin-top:10px;} .sc_chart .li.list {padding-left:20px; margin-top:-80px;} .sc_chart .li:before { z-index:9} .sc_chart dl:first-child dt .tt_box:before {right:3px; left:-22px; width:auto;} .sc_chart dt, .sc_chart dd {padding:0 5px;} .sc_chart dd {padding-top:6px;} .sc_chart dt .tt_box {height:54px; max-width:150px;} .sc_chart dd ul {max-width:150px;} .sc_chart dd li {height:46px;} .sc_chart dd li:before {width:85px; left:-85px;} .sc_chart dd li+ li:after {left:-85px;} .sr_part .sub_box .li {padding:15px 0;} .sr_part .sub_box .picto {width:60px;} .sr_part .sub_box dt img {width:50px;} .sc_relative .if_open_rlbox .open_box {margin-top:-210px !important;} /* .sc_relative .open_box .open_table .in {max-height:400px;} */ .sc_vision .in_box .circle {width:95px;} .sc_vision .in_box .circle dd img {height:45px;} .sc_vision .in_box .txt {padding:30px 10px 30px 110px;} } /* **************************************** * ◆ 400px ~ * **************************************** */ @media screen and (max-width:400px) { .sc_chart { padding: 150px 15px 15px; } .sub_top .sub_visual {height:260px;} .sub_top .sub_visual .bg {height:260px;} .sb_part .open_box {bottom:-170px;} .sb_part .open_box .bg {max-width:200px;} .sb_part .open_box .on_txt {padding:0 20px; padding-top:70px;} .sb_part .open_box .tt_box {max-width:300px; margin-left:-150px;} .sb_part .open_box .tt_box {bottom:5px;} .sb_part .open_box .middle ul {height:50px;} .sb_board .ctg_tab dt img {height:35px;} .sb_project .prevnext {bottom:90px;} .sb_board .board_top .search {padding-left:80px;} .sb_board .board_top dt {width:auto;} .sb_board .board_top dd {width:70px;} .sb_board .board_top .all {width:40px;} .sb_board .board_top .all .btn {border:0; background:#f4f4f4 url('../images/rb_img/mo/cs_return_ic.png') center center no-repeat; background-size:17px;} .sb_board .board_top .all .btn h1 {display:none;} .sc_greeting .mid_box .img img {width:260px;} .sc_greeting .mid_box .this_right:before {background-size:380px; left:-150px;} .sc_history .his_box .year {width:150px; height:150px;} .sc_history .his_box .year dd {margin-top:-5px;} .sc_history .his_box .year em {margin-top:12px;} .sc_history .history .num { padding-left: 0px; font-size: 36px; margin-left: -20px; font-weight: 600; } .sc_partners dt {height:100px;} .sc_partners .logo_box .logo {padding:10px;} .sc_partners .link {padding:8px 7px;} .sc_partners .link img {width:13px;} .sc_location .ul+ .ul {margin-top:30px;} .sc_motto .round {width:120px; height:120px;} .sc_motto .round .r_box {width:120px; height:120px;} .sc_motto .round dt img {width:35px;} .sc_motto .round dd {padding-top:8px;} .sc_motto .round .txt {margin-top:3px;} .sc_motto .round1 {margin-top:-30px;} .sc_motto .round2 {margin-top:-30px;} .sc_motto .round3 {padding-top:0; clear:both;} .sc_motto .round3:before {margin-top:0;} .sc_motto .round .point.p3 {bottom:-47px;} .sc_motto .center .round {width:160px; height:160px;} .sc_motto .center .round .r_box {width:160px; height:160px;} .sc_motto .round .line {width:180px; height:92px; margin-left:-90px; bottom:-10px;} .sc_motto .center .round dt {padding-bottom:10px;} .sc_motto .center .round dt img {width:40px;} .sc_motto .center .round dd {padding-top:10px;} .sc_motto .center .tc_box {padding:0 20px 30px;} .sc_motto .round .bg {margin-left:-62px;} .sc_motto .round .bg img {height:30px;} .sc_motto .round .point.p3:before {height:37px;} .sc_relative .top {height:240px;} .sc_relative .rel_wrap {padding:0;} .sc_relative .open_box .open_table dt {width:90px;} .sc_chart .li {height:100px;} .sc_chart .round .bg.bg1 img {width:100%; z-index:9;} .sc_chart .round {width:100px; height:100px;} .sc_chart .round .r_box {width:150px;margin-left: -25px; z-index:9;} .sc_chart .round .bg.bg1{right: -20px; width: 100px; margin: 0 auto; top:-145px;z-index:9;} .sc_chart .round.if_right .r_box {margin-top:-30px; z-index: 8; } .sc_chart .round.if_ceo .line {width:116px; margin-left:-58px; height:58px;} .sc_chart .round.if_sub .r_box {margin-top:50px;width: } .sc_chart .round.if_sub .line {width:116px; margin-left:-58px; height:58px;} .sc_chart .round.if_right {margin-left:30px; top:0px;} .sc_chart .round.if_right:before {width:30px; left:-30px; margin-top:-50px;} .sc_chart .round.if_right .line {height:116px; margin-left:-58px; width:58px;} .sc_chart .tc_box {padding:0 5px;} .sr_part .part_box .title {max-width:140px; padding:0 20px; line-height:1;} .sr_part .part_box .title:before {left:-9px; bottom:-1px;} .sr_part .part_box .title:after {right:-9px; bottom:-1px;} .sr_part .part_box .round_box {padding:20px 30px 35px;} .sr_part .part_box .round_box li+ li:before {width:14px; height:14px;} .sr_part .part_box .round_box:before {top:9px;} .sr_part .part_box .round_box:after {top:8px;} .sr_part .part_box .round_box li {width:140px; height:140px; border-width:16px !important;} .sr_part .part_box .round_box .no2 {margin:-32px -8px 0;} .sr_part .part_box .round_box .no2:before {top:-4px; margin-left:28px;} .sr_part .part_box .round_box .no3 {margin:-32px -8px 0;} .sr_part .part_box .round_box .no3:before {top:-6px; margin-left:-40px;} .c_user_box {font-size:13px; } .sc_certi .certi_box dt {height:60px;} } @media screen and (max-width:400px) { .sc_chart .li:before {top:-80%;}} /* **************************************** * ◆ 400px ~ * **************************************** */ @media screen and (max-height:400px) { .sc_relative .if_long .open_box {width:100%; height:100%; overflow-y:auto; box-sizing:border-box; padding:40px; margin:0 !important; top:0; left:0;} } /* **************************************** * ◆ 360px ~ * **************************************** */ @media screen and (max-width:360px) { .sr_part .part_box .title:before {left:-5px; bottom:-1px;} .sr_part .part_box .tit } /* 20210518 */ .main_wrap {width: 100%; height:970px; overflow: hidden; position: relative;} .flex-container { position:absolute; height: 970px; width: 100%; display: -webkit-flex; /* Safari */ display: flex; overflow: hidden; } @media screen and (max-width: 768px) { .sc_chart .round.if_ceo .r_box .tt {letter-spacing: 5;} .sc_chart .round .r_box .tt {letter-spacing: 5;} .flex-container { flex-direction: column; } } .flex-title { font-size: 44px; letter-spacing: -3px; color: #fff; position: relative; font-weight: 700; margin: auto; text-align: center; top: 38%; line-height: 60px; -webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; -ms-transition: all 200ms ease; -o-transition: all 200ms ease; transition: all 200ms ease; } .flex-about { color: #fff; position: relative; width: 90%; font-size: 16px; font-weight: bold; top: 40%; line-height: 1.3; margin: auto; text-align: center; letter-spacing: -0.5px; -webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; -ms-transition: all 200ms ease; -o-transition: all 200ms ease; transition: all 200ms ease; } .flex-about p {color: #fff !important; font-size:24px;} .flex-about p span {opacity: 1; color:#fff; font-size:24px;} .flex-btn { opacity: 0; position: relative; width: 90%; top: 43%; margin: auto; text-align: center; -webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; -ms-transition: all 200ms ease; -o-transition: all 200ms ease; transition: all 200ms ease; } .main_v_btn { background-color: transparent; border:2px solid #fff; height:40px; width:150px; color:#fff; outline: none; box-sizing: border-box; cursor: pointer; border-radius: 6px; transition: all 350ms cubic-bezier(0.86, 1, 0.07, 1); } .main_v_btn:hover {background-color: rgba(0,0,0,0.4);} .flex-slide { -webkit-flex: 1; /* Safari 6.1+ */ -ms-flex: 1; /* IE 10 */ flex: 1; cursor: pointer; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } @media screen and (min-width: 1281px) { .latest_bbs_img {height: 167px; overflow: hidden;} } @media screen and (max-width: 768px) { .flex-slide { overflow: auto; overflow-x: hidden; } } .flex-slide:hover { -webkit-flex-grow: 2; flex-grow: 1.5; } /* 1번째 백그라운드 { */ .home { height: 100%; background: url(../new/bg01.jpg); background-size: cover; background-position: center center; background-attachment: fixed; text-align: center; } /* } */ /* 2번째 백그라운드 { */ .about { background: url(../new/bg03.jpg); background-size: cover; background-position: center center; background-attachment: fixed; text-align: center; } /* } */ /* 3번째 백그라운드 { */ .work { background: url(../new/mov_bg.png); background-size: cover; background-position: left; background-attachment: fixed; text-align: center; } /* } */ /* 모바일용 { */ .m_sw_bg1 {background-image: url('../new/bg01.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover; text-align: center; overflow: hidden;} .m_sw_bg2 {background-image: url('../new/bg03.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover; text-align: center; overflow: hidden;} .m_sw_bg3 {background-image: url('../new/bg02.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover; text-align: center; overflow: hidden;} .m_main_v {padding-top: 50%; position: absolute; width: 100%; top:0px;} .m_main_v_tit {font-size: 30px; font-weight: 700; letter-spacing: -2px; line-height: 35px; color:#fff;} .m_main_v_sub {margin-top:20px; color:#fff; font-weight: 500;} .m_main_v_sub span {opacity: 0.7; color:#fff;} .m_main_v_btn {margin-top: 50px;} .bg_g {background-color: rgba(0,0,0,0.3); height:100%; width:100%; position: absolute;} /* } */ @media screen and (min-width: 1000px) { .m_main_v {padding-top:28%;} } @media screen and (min-width: 768px) { .home { -moz-animation: aboutFlexSlide; -moz-animation-duration: 3s; -moz-animation-iteration-count: 1; -moz-animation-delay: 0s; -webkit-animation: aboutFlexSlide; -webkit-animation-duration: 3s; -webkit-animation-iteration-count: 1; -webkit-animation-delay: 0s; animation: aboutFlexSlide; animation-duration: 3s; animation-iteration-count: 1; animation-delay: 0s; } } @keyframes aboutFlexSlide { 0% { -webkit-flex-grow: 1; flex-grow: 1; } 50% { -webkit-flex-grow: 3; flex-grow: 3; } 100% { -webkit-flex-grow: 1; flex-grow: 1; } } .flex-about-home { opacity: 1; } @media screen and (min-width: 768px) { .flex-about-home { -moz-animation: flexAboutHome; -moz-animation-duration: 3s; -moz-animation-iteration-count: 1; -moz-animation-delay: 0s; -webkit-animation: flexAboutHome; -webkit-animation-duration: 3s; -webkit-animation-iteration-count: 1; -webkit-animation-delay: 0s; animation: flexAboutHome; animation-duration: 3s; animation-iteration-count: 1; animation-delay: 0s; } } @keyframes flexAboutHome { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 1; } } .mp4_div {position: absolute; top:0px; height:100%; overflow: hidden; width: 100%;} .mp4_div_d {overflow: hidden;position: relative;text-align: center;} .mp4_div_d video { height: 100%; margin-left: -50%; } .link_div {background-color: #f9f9f9; padding-top: 60px; padding-bottom: 60px; text-align: center;} body.sLightBox{overflow:hidden !important;} #d_sLightBox_win{position:fixed;left:0;top:0;width:100%;height:100%;display:none;z-index:99999999} #d_sLightBox_win .bg{position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.7)/*ie9+*/} /*#d_sLightBox_win .inner{position:relative;width:800px;margin:0 auto;top:15%; height: 70%; box-shadow: 30px 30px 70px rgba(0,0,0,0.2); background-color: #fff;}*/ #d_sLightBox_win .inner{position:relative;top:25%;transform: translate(0, -25%);width:60%;height:750px;margin:0 auto;box-shadow: 30px 30px 70px rgba(0,0,0,0.2); background-color: #fff;} #d_sLightBox_win .inner .iframe{width:100%;height:100%;border:0; border-radius: 15px; background-color: #fff;} #d_sLightBox_win .inner .popup{display:none;} #d_sLightBox_win .inner .close{position:absolute;right:-50px;top:-5px;width:30px;height:30px;cursor:pointer; color:#fff;} .swiper-container { width: 100%; height: 100%; } .swiper-slide { height: auto; -webkit-box-sizing: border-box; box-sizing: border-box; } .swiper-slide img { width:100%; height:auto; } .swiper-pagination-bullet-active { background: #fff !important; } .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 30px !important; } .mo_div {display: none;} @media (min-width: 1000px) and (max-width: 1280px) { .tl_latest_box_warp .counsel_latest { margin-left: 180px !important; } .inner { padding: 0px 20px; } } @media all and (max-width:1335px) { .swiper-container1 {height:1100px !important;} .main_wrap {height:auto !important;} .m_sw_bg1 {} .m_sw_bg2 {} .m_sw_bg3 {} .footer{padding:30px 20px;} .flex-container { display: none; } .mo_div {display: block;} .main_news_wrap_sub {padding-top: 20px; padding-left: 20px; padding-right: 20px;} .main_news_wrap_tit { text-align: center; font-size: 20px; font-weight: 700; letter-spacing: 5px; color: #000; } #d_sLightBox_win .inner{width:100%;margin:0 auto;top:0; height: 100%;transform: translate(0);} #d_sLightBox_win .inner .close{right:15px; top:20px; width:30px;height:30px;cursor:pointer; color:#000 !important; z-index: 9999} } /* } */ @media all and (max-width:1920px) { .main_wrap {height:100%;} .flex-container { height:100%; } } @media all and (min-width:1921px) { .main_wrap {height:970px;} .flex-container { height:970px; } } @media all and (min-width: 1336px) and (max-width: 1920px) { /* 스크롤 */ #DB_etc34{position:fixed;left:0;top:0;width:100%;height:100%;overflow:hidden} #DB_etc34 .d_container{width:100%;} #DB_etc34 .btn{position:fixed;z-index:990;right:50px;top:40%} #DB_etc34 .btn li{width:10px;height:10px;border-radius:100%;cursor:pointer;margin:10px;background:#999} #DB_etc34 .btn li.on{background:#000} #DB_etc34 .arrow{position:fixed;z-index:990;left:50%;height:100%;margin-left:-25px} #DB_etc34 .arrow .up{position:absolute;top:90px;background:url('images/up.png') no-repeat center;width:50px;height:50px;opacity:0;transition: 0.2s} #DB_etc34 .arrow .down{position:absolute;bottom:90px;background:url('images/down.png') no-repeat center;width:50px;height:50px;opacity:0;transition: 0.2s} #DB_etc34 .arrow .up:hover{top:85px;transition: 0.2s} #DB_etc34 .arrow .down:hover{bottom:85px;transition: 0.2s} #DB_etc34 .arrow .up.on, #DB_etc34 .arrow .down.on{cursor:pointer;opacity:1;transition: 0.5s} #DB_etc34 .pages{position:absolute;left:0;top:100%;width:100%;height:100%;overflow:hidden} #DB_etc34 .pages .d_container{position:relative;height:100%} #DB_etc34 .pages .move{position:relative;z-index:10;height:100%;top:50%} #DB_etc34 .pages .move .objs{position:absolute} #DB_etc34 .p1{top:0;} #DB_etc34 .p2{} body.p2 .header {background-color: rgba(0 0 0 / 50%);} body.p2 .main_news_wrap {padding-bottom: 40px;} body.p2 .main_news_wrap_tit {padding-top: 50px;} /* footer {width:100%; background-color:#fff; padding:10px 0 50px 0; clear:both} footer .inner{position:absolute; padding: 20px 20px 0 20px; box-sizing:border-box;} */ } /* 메인 NEWS 20210610 { */ .main_news_wrap {padding-top: 70px; padding-bottom: 70px;} .main_news_wrap_tit {text-align: center; font-size: 30px; font-weight: 700; letter-spacing: 15px; color: #000;padding-bottom:40px;} .main_news_wrap_sub {padding-top: 0;} .latest_bbs_img { overflow: hidden;} .latest_bbs_tit {font-size: 18px; font-weight: 700; letter-spacing: -0.2px; margin-top: 45px;} .latest_bbs_sub {font-size: 15px; font-weight: 500; letter-spacing: -0.2px; margin-top: 20px; line-height:22px; color:#555;} .latest_bbs_date { font-size: 12px; color: #bbb !important; margin-top: 15px; } .latest_bbs_tit a {color:#000 !important; text-decoration: none;} .latest_bbs {width: 1024px; margin: 0 auto;} .latest_bbs ul {width: 306px; float: left;} .latest_bbs .ul3_1 {margin-right: 52px;} .latest_bbs .ul3_2 {margin-right: 52px;} .latest_bbs .ul3_3 {} .latest_bbs .ul3_4 {} .latest_bbs_img img {width: 100%;} .latest_bbs_img a {width: 100%;} .cut { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 90%; display: block; } @media (min-width:985px) { .latest_bbs .ul3_4 {display: none;} } @media (min-width: 985px) and (max-width: 1280px) { .latest_bbs {width: 100%;padding: 0px 20px;} .latest_bbs ul {float: left;width: 32%;} .latest_bbs .ul3_1 {margin-right: 2%;} .latest_bbs .ul3_2 {margin-right: 2%;margin-top: 0px;} .latest_bbs .ul3_3 {margin-right: 0px;margin-top: 0px;} .latest_bbs .ul3_4 {margin-right: 0px;margin-top: 0px;} .inner { padding: 0px 20px; } } @media (min-width:769px) and (max-width:984px) { .latest_bbs {padding: 0px 20px;} } @media (min-width:500px) and (max-width:984px) { .latest_bbs {width: 100%;} .latest_bbs ul {width: 49%; float: left;} .latest_bbs .ul3_1 {margin-right: 2%;} .latest_bbs .ul3_2 {margin-right: 0%;} .latest_bbs .ul3_3 {clear: both; margin-right: 2%; margin-top: 30px;} .latest_bbs .ul3_4 {display: block !important; margin-right: 0%; margin-top: 30px;} } @media all and (max-width:499px) { .latest_bbs {width: 100%; padding: 0px 0px} .latest_bbs ul {width: 100%; float: none;} .latest_bbs .ul3_1 {margin-right: 0%;} .latest_bbs .ul3_2 {margin-right: 0%; margin-top: 20px;} .latest_bbs .ul3_3 {margin-right: 0%; margin-top: 20px;} .latest_bbs .ul3_4 {margin-right: 0%; margin-top: 20px;} } .latest_bbs_img img {border:1px solid rgba(0,0,0,0.1); /* } */