@charset "utf-8"; /*─────────────────────────────────────────────────────────── header, footer, main 관련 작성 css 파일입니다. ** 이와 서브페이지 관련 css는 /css/sub.css 에 있습니다. ───────────────────────────────────────────────────────────*/ /*─────────────────────────────────────────────────────────── layout common ───────────────────────────────────────────────────────────*/ /* 일반 */ #wrap {width:100%;margin:0;padding:0; overflow:hidden;}/*position:relative;height:100%;*//* #header 와 #container, #footer 전체 감싸는 영역 */ #wrap #container {width:100%;margin:0;padding:0;} #contents_wrap {width:100%;max-width:1230px;margin:0 auto;padding:0 15px;position:relative;z-index:1;box-sizing:border-box;} /* #container 안의 컨텐츠 감싸는 영역 */ #contents_wrap #side_box {width:100%;padding:110px 0 0 0;box-sizing:border-box;} /* lnb 감싸는 영역 */ #contents_wrap #contents_box {width:100%;padding:110px 0 7.2% 0;box-sizing:border-box;} /* 컨텐츠를 감싸는 영역 */ #contents_wrap #side_box + #contents_box {padding-top:0;} /* lnb와 컨텐츠가 float 일때 사이즈 재설정 */ #contents_wrap .nav_wrap {box-sizing:border-box;} #content {width:100%;margin:0;padding:0;text-align:left;box-sizing:border-box;} /* navigation 을 제외한 컨텐츠 */ #content .sub_content{width:100%;margin:0 auto;background:#fff;box-sizing:border-box;} #content .sub_content:after {clear:both;content:"";display:block;} .w_custom {width:100%;max-width:1330px;text-align:left;margin:0 auto;padding:0 15px;box-sizing:border-box;} .clear:after {clear:both;content:"";display:block;} div, dl, dt, dd, ul, li, th, td, span, strong, p, em {white-space:normal;word-break:keep-all;word-wrap:break-word;} @media only screen and (max-width:1217px) { body.on {height:100%;overflow:hidden;} } @media only screen and (max-width:1023px) { #contents_wrap #side_box {padding: 85px 0 0 0;} #contents_wrap #contents_box {padding:4.8% 0 6.4% 0;} } @media only screen and (max-width:767px) { #contents_wrap #side_box {display:none;} .sub_goods #contents_wrap #side_box {display:block;padding:0;} } @media only screen and (max-width:640px) { #contents_wrap #contents_box {padding:4.2% 0 10.4% 0;} } @media only screen and (max-width:340px) { #contents_wrap, .w_custom {padding-left:10px;padding-right:10px;} } /*─────────────────────────────────────────────────────────── HEADER | outline/header.html, outline/nav.html ───────────────────────────────────────────────────────────*/ .skip_nav {position:relative;z-index:9999;} .skip_nav a {display:block;height:1px;width:1px;margin-bottom:-1px;overflow:hidden;font-size:12px;color:#fff;font-weight:bold;white-space:nowrap;text-align:center;} .skip_nav a:focus, .skip_nav a:active {height:auto;width:100%;padding:0;margin-bottom:0;position:absolute;left:0;top:0;} /* 일반 */ #header {position:fixed;left:0;top:0;width:100%;margin:0 auto;padding:0;border-bottom:1px solid rgba(255,255,255,0.3);background: rgba(255, 255, 255, 0);transition:background 0.3s;z-index:101;} .main_index #header {position:fixed;top:0px;border-bottom:0;}/*메인*/ #header.bg_on, #header.on, #header.ov{box-shadow:0px 0px 7px 1px rgba(0, 0, 0, 0.12);background: rgba(255, 255, 255, 1);} .hd_wrap {max-width:1790px;width:calc(100% - 30px);margin:0 auto;padding:30px 0 29px;height:51px;position:relative;z-index:2;transition:padding 0.3s;} #header.on{background: rgba(255, 255, 255, 1);border-bottom:0;} .hd_logo, .hd_gnb, .hd_icon, .hd_btn, .hd_closed {position:absolute;top:50%;transform:translateY(-50%);display:inline-block;margin:0;padding:0;box-sizing:border-box;} .hd_logo {left:0;} .hd_logo a {width:197px;height:51px;background-image:url(../images/skin/logo-wh.png);display:inline-block;vertical-align:top;background-repeat:no-repeat;background-position:0 0;background-size:auto 100%;font-size:0;} .hd_logo a:hover, #header.bg_on .hd_logo a, #header.on .hd_logo a, #header.ov .hd_logo a {background-image:url(../images/skin/logo.png);} #aside .hd_logo a:hover, #header.bg_on #aside .hd_logo a, #header.on #aside .hd_logo a, #header.ov #aside .hd_logo a {background-image:url(../images/skin/logo-wh.png);} .hd_gnb {left: calc(50% + 36px);transform:translate(-50%, -50%);width: calc(100% - 320px);font-size:0;text-align:center;opacity:1;transition:opacity 0.3s;} .hd_gnb.aside_view {opacity:0;} .hd_gnb > li {vertical-align:top;display:inline-block;position:relative;} .hd_gnb > li + li {} .hd_gnb > li > a {font-size:18px;padding:0.89em 2.25em;font-weight:500;letter-spacing:0;color:#fff;line-height:1;vertical-align:top;display:inline-block;position:relative;z-index:1;font-family: 'Poppins','Pretendard',-apple-system,Roboto,'Helvetica Neue','Apple SD Gothic Neo',Malgun Gothic,'맑은 고딕',AppleGothic,Dotum,'돋움',sans-serif; text-transform:uppercase;} .hd_gnb > li > a:before {width:5px;height:5px;border-radius:100%;background:#ff9500;opacity:0;transition:all 0.3s;position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);display:inline-block;content:"";} .hd_gnb > li:hover > a:before {opacity:1;} #header.ov .hd_gnb > li > a, #header.on .hd_gnb > li > a, #header.bg_on .hd_gnb > li > a {color:#333;} .hd_gnb .gnb_layer {width:100%;max-width:140px;margin:0;padding:20px 0 0;position:absolute;left:50%;top:100%;transform:translateX(-50%);z-index:5;display:none;transition:padding 0.3s;} .hd_gnb li:hover .gnb_layer {display:block;} .hd_gnb > li:nth-of-type(3) .gnb_layer {min-width:212px;max-width:initial;} .hd_gnb .gnb_layer ul {border-radius:6px;padding:16px 0;text-align:center;border:1px #ccc solid;box-shadow: 0px 6px 9px 0 rgba(0, 0, 0, 0.18);background:#fff;box-sizing:border-box;} .hd_gnb .gnb_layer li {padding:12px 5px;font-size:16px;font-weight:400;color:#666;letter-spacing:0;line-height:1;} .hd_gnb .gnb_layer li a {font-size:inherit;letter-spacing:inherit;font-weight:inherit;color:inherit;line-height:inherit;display:inline-block;vertical-align:top;} .hd_gnb .gnb_layer li:hover a {color:#0078c4;} .hd_icon {right:0;text-align:right;} .hd_icon > ul {display:inline-block;vertical-align:middle;} .hd_icon > ul > li {margin:0;padding:0;display:inline-block;vertical-align:middle;} .hd_icon > ul > li + li {margin-left:21px;} .hd_icon > ul > li .navi_step {width:70px;position:relative;z-index:2;} .hd_icon > ul > li .navi_step dt, .hd_icon > ul > li .navi_step dd li {box-sizing:border-box;text-align:left;font-family: 'Poppins','Pretendard',-apple-system,Roboto,'Helvetica Neue','Apple SD Gothic Neo',Malgun Gothic,'맑은 고딕',AppleGothic,Dotum,'돋움',sans-serif;} .hd_icon > ul > li .navi_step dt {font-size:16px;padding:9px 19px 9px 13px;line-height:1;font-weight:400;color:#fff;position:relative;z-index:1;cursor:pointer;} .hd_icon > ul > li .navi_step dt:before {transform:translateY(-50%) rotate(0deg);width:8px;height:4px;right:11px;background:url(../images/skin/icon-lang-arrow@2x.png) no-repeat 50% 50%;background-size:cover;top:50%;display:inline-block;content:"";position:absolute;transition:all 0.3s;} #header.ov .hd_icon > ul > li .navi_step dt, #header.on .hd_icon > ul > li .navi_step dt, #header.bg_on .hd_icon > ul > li .navi_step dt {color:#333;} .hd_icon > ul > li .navi_step dd {width:100%;position:absolute;left:0;top:100%;display:none;} .hd_icon > ul > li .navi_step dd ul {padding:8px 17px;border-radius:6px;box-shadow:0px 6px 9px 0 rgba(0, 0, 0, 0.18);border:solid 1px #ccc;background:#fff;text-align:left;} .hd_icon > ul > li .navi_step dd li {padding:4px 0;font-size:16px;font-weight:400;line-height:1.2em;color:#fff;} .hd_icon > ul > li .navi_step dd li a {font-size:inherit;font-weight:inherit;line-height:inherit;display:inline-block;vertical-align:top;position:relative;z-index:1;font-family:inherit;} .hd_icon > ul > li .navi_step dd li a:before {position:absolute;background:#ff9600;left:0;top:100%;width:0;height:1px;display:inline-block;content:"";} .hd_icon > ul > li .navi_step dd li:hover a {color:#ff9600;} .hd_icon > ul > li .navi_step dd li:hover a:before {width:100%;} .hd_icon > ul > li .navi_step.on dt:before {transform:translateY(-50%) rotate(180deg);} .hd_icon > ul > li .navi_step.on dd {display:block;} #header.on .hd_icon > ul > li .navi_step dd li, #header.bg_on .hd_icon > ul > li .navi_step dd li {color:#333;} .menu-trigger {position:relative;padding:0;width:30px;height:22px;box-sizing:border-box;cursor:pointer;} .menu-trigger span {transition:0.3s;position:absolute;width:100%;height:2px;background-color:#fff;left:0;display:inline-block;vertical-align:top;} .menu-trigger span:nth-of-type(1) {top: 0;} .menu-trigger span:nth-of-type(2) {top: 50%;margin-top: -1px;} .menu-trigger span:nth-of-type(3) {bottom: 0;} #header.ov .menu-trigger span, #header.on .menu-trigger span, #header.bg_on .menu-trigger span {background-color:#333;} .menu-trigger.active {} .menu-trigger.active span:nth-of-type(1) {top:50%;-webkit-transform: translateY (0) rotate (-45deg);transform: translateY(0) rotate(-45deg);} .menu-trigger.active span:nth-of-type(2) {width:0;opacity:0;} .menu-trigger.active span:nth-of-type(3) {top:50%;bottom:auto;-webkit-transform: translateY(0) rotate(45deg);transform: translateY(0) rotate(45deg);} #aside {left:0;top:109px;width:100%;height:0;background:#fff;position:absolute;z-index:1;transition:all 0.3s;opacity:0;overflow:hidden;} #aside.on {height: calc(100vh - 109px);opacity:1;} #aside:before {width:605px;height:269px;left:48px;bottom:19px;background:url(../images/skin/bg-cate-logo.png) no-repeat 50% 50%;background-size:cover;z-index:1;position:absolute;display:inline-block;content:"";} #aside .aside_menu {max-width:1790px;width:calc(100% - 30px);height: calc(100vh - 110px);margin:0 auto;transition:height 0.3s;position:relative;} #aside .menu_container {width:100%;left:50%;position:absolute;top:50%;transform:translate(-50%, -50%);box-sizing:border-box;text-align:center;} #aside .aside_cate {} #aside .aside_cate ul {margin:0;padding:0;box-sizing:border-box;} #aside .aside_cate li {line-height:1;vertical-align:top;margin:0;padding:0;text-align:left;box-sizing:border-box;white-space:normal;word-break:keep-all;word-wrap:break-word;} #aside .aside_cate li a {font-size:inherit;line-height:inherit;display:inline-block;vertical-align:top;margin:0;padding:0;box-sizing:border-box;white-space:normal;word-break:keep-all;word-wrap:break-word;font-family: 'Poppins','Pretendard',-apple-system,Roboto,'Helvetica Neue','Apple SD Gothic Neo',Malgun Gothic,'맑은 고딕',AppleGothic,Dotum,'돋움',sans-serif;} #aside .aside_cate .cate_dep1 {} #aside .aside_cate .cate_dep1 > ul {display:flex;justify-content:space-evenly;align-content: space-evenly;} #aside .aside_cate .cate_dep1 .dep1_li {font-size:28px;line-height:auto;position:relative;z-index:1;flex-grow: 1;text-align:center;} #aside .aside_cate .cate_dep1 .dep1_li.on {z-index:3;} #aside .aside_cate .cate_dep1 .dep1_li > a {line-height:1;padding:0;margin:0 auto 46px;font-weight:500;letter-spacing:0;color:#333;position:relative;display:inline-block;} #aside .aside_cate .cate_dep2 {padding-top:48px;display:block;box-sizing:border-box;position:relative;text-align:center;} #aside .aside_cate .cate_dep2:before {width:30px;left:50%;top:0;height:1px;background:#333;z-index:-1;transform:translateX(-50%);display:inline-block;content:"";position:absolute;} #aside .aside_cate .cate_dep2 > ul {} #aside .aside_cate .cate_dep2 .dep2_li {font-size:18px;line-height:1em;padding:0;box-sizing:border-box;text-align:center;} #aside .aside_cate .cate_dep2 .dep2_li > a {font-weight:400;color:#666;letter-spacing:0;vertical-align:Top;} #aside .aside_cate .cate_dep2 .dep2_li:hover > a {color:#0078c4;} #aside .aside_cate .cate_dep2 .dep2_li + .dep2_li {padding-top:42px;} @media only screen and (max-width:1790px) { #aside:before {left:15px;} } @media only screen and (max-width:1347px) { .hd_gnb > li > a {padding:0.89em 1.9em;} #aside:before {width:576px;height:256px;left:0;} } @media only screen and (max-width:1240px) { .hd_wrap {padding:26px 0;height:46px;} .hd_logo a {width:178px;height:46px;} .hd_gnb {left: calc(50% + 27px);width: calc(100% - 302px);} .hd_gnb > li > a {font-size:18px;padding:0.78em 1.8em;} .hd_gnb > li > a:before, .hd_gnb .gnb_layer, .hd_gnb li.on .gnb_layer, .hd_gnb li:hover .gnb_layer {display:none;} .hd_icon > ul > li + li {margin-left:18px;} #aside {top:97px;} #aside.on, #aside .aside_menu {height: calc(100vh - 97px);} #aside:before {width:553px;height:246px;} #aside .aside_cate .cate_dep1 .dep1_li {font-size:26px;} #aside .aside_cate .cate_dep1 .dep1_li > a {margin-bottom:40px;} #aside .aside_cate .cate_dep2 {padding-top:42px;} #aside .aside_cate .cate_dep2 .dep2_li + .dep2_li {padding-top:36px;} } @media only screen and (max-width:1140px) { .hd_wrap {padding:22px 0;height:44px;} .hd_logo a {width:170px;height:44px;} .hd_gnb {left: calc(50% + 26px);width: calc(100% - 287px);} .hd_gnb > li > a {font-size:17px;padding:0.67em 1.3em;} .hd_icon > ul > li + li {margin-left:15px;} .hd_icon > ul > li .navi_step {width:64px;} .hd_icon > ul > li .navi_step dt {font-size:15px;padding:9px 13px;} .hd_icon > ul > li .navi_step dt:before {right:8px;} .hd_icon > ul > li .navi_step dd li {font-size:15px;} #aside {top:87px;} #aside.on, #aside .aside_menu {height: calc(100vh - 87px);} #aside:before {width:517px;height:230px;bottom:-19px;} #aside .aside_cate .cate_dep1 .dep1_li {font-size:24px;} #aside .aside_cate .cate_dep1 .dep1_li > a {margin-bottom:34px;} #aside .aside_cate .cate_dep2 {padding-top:36px;} #aside .aside_cate .cate_dep2 .dep2_li {font-size:17px;} #aside .aside_cate .cate_dep2 .dep2_li + .dep2_li {padding-top:28px;} } @media only screen and (max-width:1024px) { .hd_wrap {padding:19px 0;height:40px;} .hd_logo a {width:154px;height:40px;} .hd_gnb {display:none;} .hd_icon > ul > li .navi_step {width:64px;} .hd_icon > ul > li .navi_step dt {padding:8px 12px;} .hd_icon > ul > li .navi_step dt:before {right:8px;} .hd_icon > ul > li .navi_step dd ul {padding:6px 14px;border-radius:5px;} .hd_icon > ul > li .navi_step dd li {padding:3px 0;} .menu-trigger {width:28px;height:20px;} #aside {top:77px;} #aside.on, #aside .aside_menu {height: calc(100vh - 77px);} #aside:before {width:472px;height:210px;bottom:-19px;} #aside .menu_container {top:35%;} #aside .aside_cate .cate_dep1 .dep1_li {font-size:21px;} #aside .aside_cate .cate_dep1 .dep1_li > a {margin-bottom:28px;} #aside .aside_cate .cate_dep2 {padding-top:30px;} #aside .aside_cate .cate_dep2 .dep2_li {font-size:16px;} #aside .aside_cate .cate_dep2 .dep2_li + .dep2_li {padding-top:22px;} } @media only screen and (max-width:860px) { #aside .aside_menu {width:100%;} #aside:before {width:436px;height:194px;} #aside .aside_cate .cate_dep1 .dep1_li {font-size:19px;} #aside .aside_cate .cate_dep1 .dep1_li > a {margin-bottom:26px;} #aside .aside_cate .cate_dep2 {padding-top:30px;} #aside .aside_cate .cate_dep2:before {width:20px;} #aside .aside_cate .cate_dep2 .dep2_li {font-size:16px;} #aside .aside_cate .cate_dep2 .dep2_li + .dep2_li {padding-top:20px;} } @media only screen and (max-width:767px) { .hd_wrap {padding:17px 0;} #aside {top:73px;} #aside.on, #aside .aside_menu {height: calc(100vh - 73px);} #aside .aside_menu {width:100%;} #aside:before {width:387px;height:172px;bottom:-10px;} #aside .menu_container {left:0;position:static;top:0;transform:translate(0, 0);} #aside .aside_cate .cate_dep1 > ul {display:block;} #aside .aside_cate .cate_dep1 .dep1_li {font-size:19px;padding:0;z-index:1;position:relative;box-sizing:border-box;text-align:center;} #aside .aside_cate .cate_dep1 .dep1_li.on {z-index:3;} #aside .aside_cate .cate_dep1 .dep1_li > a {margin:0 auto;padding:21px 43px;display:inline-block;width:100%;z-index:1;position:relative;} #aside .aside_cate .cate_dep1 .dep1_li.on > a {background:#0078c4;color:#fff;} #aside .aside_cate span.icons {width:13px;height:60px;right:20px;top:0;background:url(../images/skin/icon-cate-toggle-off.png) no-repeat 50% 50%;background-size:100% auto;display:inline-block;position:absolute;cursor:pointer;z-index:2;} #aside .aside_cate .on span.icons {background:url(../images/skin/icon-cate-toggle-on.png) no-repeat 50% 50%;background-size:100% auto;} #aside .aside_cate .cate_dep2 {padding:0;height:0;overflow:hidden;transition:all 0.3s;} #aside .aside_cate .on .cate_dep2 {height:auto;overflow:inherit;} #aside .aside_cate .cate_dep2:before {display:none;} #aside .aside_cate .cate_dep2 > ul {padding-top:20px;padding-bottom:26px;} #aside .aside_cate .cate_dep2 .dep2_li {font-size:16px;} #aside .aside_cate .cate_dep2 .dep2_li + .dep2_li {padding-top:20px;} } @media only screen and (max-width:640px) { #aside:before {width:351px;height:156px;} #header, #header.ov{background:rgba(255, 255, 255, 0);} #header.bg_on, #header.on{background:rgba(255, 255, 255, 1);} .hd_logo a, #header.ov .hd_logo a{background-image:url(../images/skin/logo-wh.png);} .hd_logo a:hover, #header.bg_on .hd_logo a, #header.on .hd_logo a{background-image:url(../images/skin/logo.png);} .hd_icon > ul > li .navi_step dt, #header.ov .hd_icon > ul > li .navi_step dt{color:#fff;} #header.on .hd_icon > ul > li .navi_step dt, #header.bg_on .hd_icon > ul > li .navi_step dt{color:#333;} .menu-trigger span, #header.ov .menu-trigger span{background-color:#fff;} #header.on .menu-trigger span, #header.bg_on .menu-trigger span{background-color:#333;} } @media only screen and (max-width:500px) { .hd_wrap {padding:16px 0;height:36px;} .hd_logo a {width:139px;height:36px;} .hd_icon > ul > li .navi_step dd ul {box-shadow:0px 3px 5px 0 rgba(0, 0, 0, 0.18);} #aside {top:67px;} #aside.on, #aside .aside_menu {height: calc(100vh - 67px);} #aside:before {width:306px;height:136px;} } @media only screen and (max-width:414px) { #aside:before {width:261px;height:116px;} } @media only screen and (max-width:375px) { .hd_wrap {padding:15px 0;height:34px;} .hd_logo a {width:131px;height:34px;} .hd_icon > ul > li .navi_step {width:60px;} .hd_icon > ul > li .navi_step dt {font-size:14px;padding:8px 12px;} .hd_icon > ul > li .navi_step dd li {padding:3px 0;font-size:14px;} .menu-trigger {width:24px;height:18px;} #aside {top:63px;} #aside.on, #aside .aside_menu {height: calc(100vh - 63px);} #aside:before {width:236px;height:105px;} #aside .aside_cate .cate_dep1 .dep1_li {font-size:18px;} } @media only screen and (max-width:340px) { #aside:before {width:221px;height:98px;bottom:-6px;} #aside .aside_cate .cate_dep1 .dep1_li {font-size:18px;} #aside .aside_cate .cate_dep1 .dep1_li > a {padding:19px 43px;} #aside .aside_cate span.icons {height:56px;} #aside .aside_cate .cate_dep2 > ul {padding-top:18px;padding-bottom:22px;} #aside .aside_cate .cate_dep2 .dep2_li {font-size:15px;} #aside .aside_cate .cate_dep2 .dep2_li + .dep2_li {padding-top:16px;} } @media only screen and (max-height:720px) { } @media only screen and (max-height:630px) { } @media only screen and (max-height:530px) { } /*─────────────────────────────────────────────────────────── FOOTER | outline/footer.html ───────────────────────────────────────────────────────────*/ /* 일반 */ #footer {background:#141a20;position:relative;z-index:1;} #footer .w_custom {padding-top:40px !important;padding-bottom:54px !important;} #footer .ft_logo {width:100%;max-width:253px;float:left;} #footer .ft_logo a {} #footer .ft_logo img {width:auto;height:51px;} #footer .ft_info {float:left;} #footer .ft_info p {font-size:16px;letter-spacing:-0.015em;line-height:1;font-weight:300;color:#fff;} #footer .ft_info p span, #footer .ft_info p a {font-size:inherit;letter-spacing:inherit;line-height:inherit;font-weight:inherit;color:inherit;display:inline-block;vertical-align:top;} #footer .ft_info p span + span {margin-left:2.44em;} #footer .ft_info address {margin-top:1.57em;font-size:14px;line-height:1;letter-spacing:-0.015em;font-weight:300;color:#aaa;font-family: 'Poppins','Pretendard',-apple-system,Roboto,'Helvetica Neue','Apple SD Gothic Neo',Malgun Gothic,'맑은 고딕',AppleGothic,Dotum,'돋움',sans-serif;display:block;} #footer .ft_top {right:8px;bottom:66px;position:absolute;} #footer .ft_top a, #footer .ft_top span {transform: rotate(-90deg);padding-right:43px;box-sizing:border-box;display:inline-block;vertical-align:top;position:relative;} #footer .ft_top a:before, #footer .ft_top span:before {width:6px;height:30px;background:url(../images/skin/icon-top-arrow@2x.png) no-repeat 100% 50%;background-size:6px auto;right:0;top:0;transform: rotate(90deg) translate(-100%, 40%);transition:all 0.3s;display:inline-block;position:absolute;content:"";} #footer .ft_top a:hover:before, #footer .ft_top span:hover:before {transform: rotate(90deg) translate(-100%, 30%);} #footer .ft_top a em, #footer .ft_top span em {font-size:14px;line-height:1;letter-spacing:-0.015em;font-weight:500;color:#fff;font-family: 'Poppins','Pretendard',-apple-system,Roboto,'Helvetica Neue','Apple SD Gothic Neo',Malgun Gothic,'맑은 고딕',AppleGothic,Dotum,'돋움',sans-serif;display:inline-block;vertical-align:top;} #footer .ft_top span {display:none;} @media only screen and (max-width:1300px) { #footer .w_custom {padding-top:3% !important;padding-bottom:4.15% !important;} } @media only screen and (max-width:1280px) { #footer .ft_top a {display:none;} #footer .ft_top span {display:inline-block;} } @media only screen and (max-width:1240px) { #footer .w_custom {padding-top:4% !important;padding-bottom:5.15% !important;} #footer .ft_top {right:0;bottom:7vw;} #footer .ft_top a:before, #footer .ft_top span:before, #footer .ft_top a:hover:before, #footer .ft_top span:hover:before {transform: rotate(90deg) translate(-100%, 40%);} } @media only screen and (max-width:960px) { #footer .w_custom {padding-top:5% !important;padding-bottom:6.45% !important;} #footer .ft_logo img {height:45px;} #footer .ft_info p {font-size:15px;} #footer .ft_info p span + span {margin-left:2.1em;} #footer .ft_info address {font-size:13px;} #footer .ft_top {right:-15px;bottom:8.5vw;} #footer .ft_top a, #footer .ft_top span {padding-right:42px;} #footer .ft_top a em, #footer .ft_top span em {font-size:13px;} } @media only screen and (max-width:860px) { #footer .ft_logo {max-width:194px;} #footer .ft_logo img {height:40px;} #footer .ft_info p {font-size:14px;} #footer .ft_info p span + span {margin-left:1.8em;} } @media only screen and (max-width:767px) { #footer .w_custom {padding-top:6% !important;padding-bottom:7.45% !important;} #footer .ft_logo, #footer .ft_info {float:none;} #footer .ft_logo img {height:37px;} #footer .ft_info p {font-size:14px;margin-top:2.15em;} #footer .ft_info p span + span {margin-left:1.6em;} #footer .ft_info address {margin-top:1.6em;} #footer .ft_top {bottom:auto;top:9.6vw;} } @media only screen and (max-width:500px) { #footer .w_custom {padding-top:8% !important;padding-bottom:10.45% !important;} #footer .ft_logo img {height:33px;} #footer .ft_info p span {display:block;} #footer .ft_info p span + span {margin-left:0;margin-top:0.8em;} #footer .ft_info address {margin-top:2.0em;line-height:1.4;} #footer .ft_top {top:13.2vw;} #footer .ft_top a em, #footer .ft_top span em {} } @media only screen and (max-width:375px) { #footer .w_custom {padding-top:8% !important;padding-bottom:14.45% !important;} #footer .ft_info p {font-size:13px;} #footer .ft_info p span + span {margin-top:0.8em;} #footer .ft_info address {margin-top:2.3em;font-size:12px;} #footer .ft_top {top:14.0vw;} #footer .ft_top a em, #footer .ft_top span em {font-size:12px;} } @media only screen and (max-height:800px) { #footer .ft_top a {display:none;} #footer .ft_top span {display:inline-block;} } /*─────────────────────────────────────────────────────────── SIDE_BOX | outline/left_bbs.html｜outline/left_goods.html｜outline/left_member.html｜outline/left_service.html ───────────────────────────────────────────────────────────*/ #side_box {padding-bottom:1.8%;} #side_box .sub_menu {width:100%;padding:0;margin:0;z-index:2;text-align:center;vertical-align:top;} #side_box .sub_menu dl {position:relative;display:inline-block;margin:0 auto;z-index:3;font-size:0;text-align:center;vertical-align:top;padding:0;} #side_box .sub_menu dt, #side_box .sub_menu dd {display:inline-block;margin:0;padding:0;} #side_box .sub_menu dt {display:none;} #side_box .sub_menu dd {line-height:31px;height:32px;padding:0 12px;border-bottom:1px #ccc solid;position:relative;z-index:1;box-sizing:border-box;vertical-align:top;} #side_box .sub_menu dd + dd {} #side_box .sub_menu dd a, #side_box .sub_menu dd strong {height:31px;line-height:31px;font-size:15px;font-weight:600;padding:0 2px;color:#888;display:inline-block;box-sizing:border-box;vertical-align:top;} #side_box .sub_menu dd:hover a, #side_box .sub_menu dd.on a, #side_box .sub_menu dd strong {border-color:#333;color:#333;position:relative;} #side_box .sub_menu dd:hover a:before, #side_box .sub_menu dd.on a:before, #side_box .sub_menu dd strong:before {bottom:-1px;width:100%;height:2px;background:#333;left:50%;transform:translateX(-50%);position:absolute;content:"";display:block;} @media only screen and (max-width:1200px) { } @media only screen and (max-width:1023px) { } @media only screen and (max-width:860px) { #side_box .sub_menu dd {line-height:29px;height:30px;padding:0 8px;} #side_box .sub_menu dd a, #side_box .sub_menu dd strong {height:29px;line-height:29px;font-size:14px;padding:0 2px;} } @media only screen and (max-width:767px) { } @media only screen and (max-width:640px) { #side_box .sub_menu dd {line-height:27px;height:28px;padding:0 8px;} #side_box .sub_menu dd a, #side_box .sub_menu dd strong {height:27px;line-height:27px;font-size:14px;padding:0 2px;} } @media only screen and (max-width:479px) { #side_box {display:none;} } /*─────────────────────────────────────────────────────────── 메인 main/index ───────────────────────────────────────────────────────────*/ /* 일반 */ /* 풀페이지 */ .bgfff {background:#fff !important;} #fullpage .w_custom {max-width:1410px;padding:0 55px;} .section {position:relative;} .section.active {} .section .cont_wrap {max-width:1300px; margin:0 auto;} #fullpage h3 {vertical-align:top;text-align:center;} #fullpage h3 strong, #fullpage h3 span {color:#333;letter-spacing:-0.015em;font-weight:400;line-height:1;display:block;vertical-align:top;font-family: 'Poppins','Pretendard',-apple-system,Roboto,'Helvetica Neue','Apple SD Gothic Neo',Malgun Gothic,'맑은 고딕',AppleGothic,Dotum,'돋움',sans-serif;} #fullpage h3 strong {font-size:64px;font-weight:500;} #fullpage h3 span {margin-top:30px;font-size:24px;letter-spacing:-0.015em;} #fullpage h3 strong b, #fullpage h3 span b {color:#ff9500;font-size:inherit;font-weight:inherit;line-height:inherit;font-family:inherit;vertical-align:inherit;} #fullpage #section1 h3 strong, #fullpage #section1 h3 span, #fullpage #section4 h3 strong, #fullpage #section4 h3 span {color:#fff;} #fullpage #section4 h3 {text-align:left;} #section0 {} #fullpage .section .aniBox {transform:scale(0.85);transition:all 1.0s;display: flex;align-items: center;justify-content: flex-start;height: 100%;} #fullpage .section.active .aniBox {transform:scale(1);} #fullpage .section .aniBox .intro {width: 100%;margin: 0 auto;box-sizing: border-box;} #section1 .aniBox{background:url(../images/skin/bg-main-sec-02.jpg) no-repeat 50% 50%;background-size:cover;} #section2 .aniBox{background:url(../images/skin/bg-main-sec-03.jpg) no-repeat 50% 50%;background-size:cover;} #section3 .aniBox{background:url(../images/skin/bg-main-sec-04.jpg) no-repeat 50% 50%;background-size:cover;} #section4 {background:url(../images/skin/bg-main-sec-05.jpg) no-repeat 50% 50%;background-size:cover;} #section5 {} body #fp-nav {transform:translateY(-50%);margin-top:0 !important;} body #fp-nav.left {left:25px;} body #fp-nav ul {width:30px;position:relative;z-index:1;} body #fp-nav ul:before {background:url(../images/skin/bg-main-nav.png) repeat-y 50% 0;width:1px;height: calc(100% - 48px);left:50%;top:12.5px;display:inline-block;content:"";position:absolute;z-index:-1;} body #fp-nav ul li, body #fp-nav ul li:hover {width:5px;height:5px;margin:0 auto;padding:12.5px 0;} body #fp-nav ul li:last-child {width:0;height:0;overflow:hidden;margin:0;} body #fp-nav ul li a span, body #fp-nav ul li:hover a span {width:5px;height:5px;margin:0;transform:translate(-50%, -50%);background:#aaa;z-index:2;vertical-align:top;} body #fp-nav ul li a.active span, body #fp-nav ul li:hover a.active span {width:5px;height:5px;margin:0;transform:translate(-50%, -50%);background:#fff;} body #fp-nav ul li a.active:before {width:30px;height:30px;border-radius:100%;left:50%;top:50%;border:1px #fff solid;transform:translate(-50%, -50%);background:rgab(255, 255, 255, 0);box-shadow: 0px 0px 0px 0 rgba(0, 0, 0, 0);display:inline-block;content:"";position:absolute;z-index:-1;box-sizing:border-box;} body #fp-nav ul li a {font-size:0;vertical-align:top;} body #fp-nav.nav-dot-gy ul li a span, body #fp-nav.nav-dot-gy ul li:hover a span {background:#bbb;} body #fp-nav.nav-dot-gy ul li a.active span, body #fp-nav.nav-dot-gy ul li:hover a.active span {background:#333;} body #fp-nav.nav-dot-gy ul li a.active:before {border-color:#333;} #fullpage .section .intro {padding-top:110px;box-sizing:border-box;} /* section0 - 메인 */ #section0 {text-align:center;} #fullpage #section0 .intro {padding:0;text-align:center;box-sizing:border-box;position:relative;z-index:1;} /* 메인 비주얼 */ .main_visual .slick-slide {} .main_visual_wrap {} .main_visual {height:100vh;padding:0;position:relative;width:100%;margin:0 auto;box-sizing:border-box;overflow:hidden;z-index:1;} .main_visual .slick-slide {height:100vh;overflow:hidden;position:relative;text-align:center;z-index:1;} .main_visual .slick-slide .thumb {background-position: center;background-size:cover !important;height:100%;width: 100%;margin:0 auto;text-align:Center;position:absolute;left: 0;top:0;outline:0;z-index:1;} .main_visual .slick-slide a {display:inline-block;height:100%;width: 100%;margin:0 auto;text-align:Center;position:absolute;left: 0;top:0;outline:0;z-index:5;} .main_visual .slick-slide .txt_box {width:100%;max-width:1400px;padding:0 50px;left:50%;top:30.94%;text-align:left;transform:translate(-50%, 0%);position:absolute;font-size:0;z-index:3;box-sizing:border-box;} .main_visual .slick-slide .txt_box h3, .main_visual .slick-slide .txt_box p {line-height:1.25em;color:#fff;font-weight:400;margin:0;padding:0;text-align:left !important;vertical-align:top;display:block;font-family: 'Poppins','Pretendard',-apple-system,Roboto,'Helvetica Neue','Apple SD Gothic Neo',Malgun Gothic,'맑은 고딕',AppleGothic,Dotum,'돋움',sans-serif;} .main_visual .slick-slide .txt_box h3 {font-size:80px;letter-spacing:0.4em;width: calc(100% + 10px);margin-left:-5px;margin-right:-5px;} .main_visual .slick-slide .txt_box p {font-size:36px;margin-top:1.44em;letter-spacing:-0.015em;} .main_visual .slick-slide .txt_box p b {font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:#ff9500;} .main_visual .slick-slide .txt_box .m_br {display:none !important;} .main_visual .slick-slide .txt_box .m_br + br {display:none;} .main_visual .visual_control, .main_visual .slick-dots {bottom:19.5%;} .main_visual .visual_control {width:300px;left: calc(50% - 650px);height:14px;line-height:14px;padding:0;top:auto;position:absolute;text-align:left;z-index:1;box-sizing:border-box;} .main_visual .visual_control .slick-arrow {} .main_visual .slick-arrow {width:13px;height:14px;opacity:0.5;position:relative;z-index:6;font-size:0;display:inline-block;vertical-align:top;margin:0;padding:0;border:0;outline:0;font-size:0;}/*position:absolute;top:50%;*/ .main_visual .slick-arrow:before {display:none;} .main_visual .slick-arrow:hover {opacity:1;} .main_visual .slick-prev {background:url(../images/skin/icon-slide-next@2x.png) no-repeat 50% 50%;background-size:auto 14px;} .main_visual .slick-next {background:url(../images/skin/icon-slide-prev@2x.png) no-repeat 50% 50%;background-size:auto 14px;margin-left:25px;} .main_visual .slick-dots {line-height:8px;padding:3px 0;height:14px;left: calc(50% - 580px);width:auto;transform:translateX(0);font-size:0;vertical-align:top;text-align:left;position:absolute;box-sizing:border-box;z-index:7;} .main_visual .slick-dots li {padding:0 15px;line-height:inherit;margin:0;display:inline-block;vertical-align:top;font-size:0;text-align:center;} .main_visual .slick-dots li button {font-size:0;line-height:8px;height:8px;width:8px;border-radius:100%;background:#fff;outline:0;display:inline-block;vertical-align:top;margin:0;opacity:0.5;border:0;} .main_visual .slick-dots li.slick-active {} .main_visual .slick-dots li.slick-active button {opacity:1;background:#ff9500;} /*.main_visual .slider-progress-wrap {width:200px;height:2px;margin:9px 10px 0;margin-left:130px;display:none;z-index:1;transition:all 6s;padding:0;font-size:0;text-align:left;vertical-align:top;box-sizing:border-box;position:relative;} .main_visual .slider-progress-wrap .slider-progress {width:100%;background:rgba(255, 255, 255, 1);display: inline-block;vertical-align:top;box-sizing:border-box;text-align:left;} .main_visual .slider-progress-wrap .slider-progress .progress {height:2px;background: rgba(255, 0, 0,1);width: 0;} .main_visual .slider-progress-wrap .slider-progress .progress.active {width:100%;}*/ .main_visual .slide_btn {width:14px;height:14px;background-size:auto 13px !important;font-size:0;outline:0;border:0;margin:0;padding:0;display:inline-block;vertical-align:top;background-repeat:no-repeat !important;background-position:50% 50% !important;position:relative;z-index:6;float:right;} .main_visual .slide_btn.btn_pause {background-image:url(../images/skin/icon-slide-pause@2x.png);} .main_visual .slide_btn.btn_play {background-image:url(../images/skin/icon-slide-play@2x.png);} .main_visual .visual_all_txt {width:100%;padding:0 80px;text-align:left;transform:translate(-50%, 0%);position:absolute;z-index:2;left:50%;top:10.5%;box-sizing:border-box;} /* visual active */ .main_visual .slick-slide .thumb {transform: scale(1.4);transition: all 5s ease;background-size: cover !important;} .main_visual .slick-slide.slick-active .thumb {transform: scale(1);} #container .txtani {-webkit-transition: all 1s ease-in-out 0.1s;-moz-transition: all 1s ease-in-out 0.1s;-o-transition: all 1s ease-in-out 0.1s;transition: all 1s ease-in-out 0.1s;opacity:0;} .main_visual .visual_all_txt h3.txtani{} .main_visual .visual_all_txt p.txtani{} .main_visual .slick-slide.slick-active h3.txtani{animation: fadeLeft100 1.5s ease forwards;} .main_visual .slick-slide.slick-active p.txtani {animation: fadeLeft100 1.5s 0.3s ease forwards;} #container .over-wr {overflow:hidden;} #container .left-right {transform: translate(-100px,0);} #container .right-left {transform: translate(100px,0);} #container .top-bottom {transform: translate(0,-100px);} #container .bottom-top {transform: translate(0,100px);} @keyframes step02{ 0%{opacity:0;} 100%{opacity:1;transform: translate(0,0);} } .mconTit p.on{animation: fadeLeft100 1.5s ease forwards;} .mconTit h3.on{animation: fadeLeft100 1.5s 0.3s ease forwards;} @keyframes fadeLeft100{ 0%{opacity:0; transform:translateX(-100px);} 100%{opacity:1; transform:translateX(0);} } #section0 .scr_down {display:inline-block;position:absolute;right:3.1vw;bottom:192px;transform:rotate(90deg);width:12px;z-index:5;cursor:pointer;outline:0;border:0;text-align:left;vertical-align:top;} #section0 .scr_down > button, #section0 .scr_down > a {width:220px;height:1em;line-height:1em;font-size:12px;display:inline-block;vertical-align:top;} #section0 .scr_down em {font-size:inherit;line-height:inherit;height:inherit;letter-spacing:-0.015em;font-weight:300;color:#fff;display:inline-block;margin:0;padding:0;box-sizing:border-box;font-family: 'Poppins','Pretendard',-apple-system,Roboto,'Helvetica Neue','Apple SD Gothic Neo',Malgun Gothic,'맑은 고딕',AppleGothic,Dotum,'돋움',sans-serif;} #section0 .scr_down em:after {margin:4px 18px;width:4px;height:4px;border-radius:100%;vertical-align:top;background-color:#fff;display:inline-block;content:"";} #section0 .scr_down span {margin:6px 0 4px;height:2px;width:90px;background:#fff;display:inline-block;vertical-align:top;padding:0;position:relative;z-index:1;overflow:hidden;box-sizing:border-box;border:0;} #section0 .scr_down span:after {width:20px;height:100%;content:"";background:#ff9500;box-sizing:border-box;border-radius:100%;position: absolute;top:0;left:0;transform: translate(0px, 0);opacity:0;animation:scroll 2.4s ease-in Infinite;}/*animation-fill-mode:forwards;*/ #section0 .scr_down > button {display:none;} #section0 .scr_down > a {display:inline-block;} @keyframes scroll{ 0%{transform: translate(0px, 0);opacity:0;} 30% {opacity:1;} 85% {opacity:1;} 100%{transform: translate(100px, 0);opacity:0;} } /* section1 - Pipeline */ #section1 {} #fullpage #section1 .intro {} #section1 .line_list_wrap {margin-top:70px;position:relative;z-index:1;} #section1 .line_list_wrap:before {top:50%;width:100%;height:1px;background:rgba(255, 255, 255, 0.3);display:inline-block;content:"";position:absolute;left:0;} #wrap #fullpage #section1 .for_pc {display:block;} #wrap #fullpage #section1 .for_m {display:none;} #wrap #fullpage #section1 .line_list_wrap ul.for_pc {text-align:center;vertical-align:top;display:flex;justify-content:space-between;} #section1 .line_list_wrap li {width: calc(33.32% - 53.3px);vertical-align:top;position:relative;z-index:1;} #section1 .line_list_wrap li + li {} #section1 .line_list_wrap li .box {width:100%;height:0;padding:100% 0 0;border-radius:100%;overflow:hidden;margin:0 auto;position:relative;z-index:1;} #section1 .line_list_wrap li .box > a {border-radius:inherit;background:none;border-width:2px;border-style:solid;border-color:#ddd;position:absolute;left:0;top:0;display:inline-block;width:100%;height:100%;z-index:3;box-sizing:border-box;} #section1 .line_list_wrap li:hover .box > a {border-color:#00b1e3;} #section1 .line_list_wrap li .box .thumb {width:100%;height:0;padding:0;padding-top:50%;z-index:1;position:absolute;left:50%;top:0;transform:translateX(-50%);} #section1 .line_list_wrap li.line_num01 .box .thumb {background:url(../images/skin/icon-main-sec-02-1@2x.png) no-repeat 50% 50%;background-size:auto 72px;} #section1 .line_list_wrap li.line_num02 .box .thumb {background:url(../images/skin/icon-main-sec-02-2@2x.png) no-repeat 50% 50%;background-size:auto 73px;} #section1 .line_list_wrap li.line_num03 .box .thumb {background:url(../images/skin/icon-main-sec-02-3@2x.png) no-repeat 50% 50%;background-size:auto 67px;} #section1 .line_list_wrap li.line_num01:hover .box .thumb {background-image:url(../images/skin/icon-main-sec-02-1-on@2x.png);} #section1 .line_list_wrap li.line_num02:hover .box .thumb {background-image:url(../images/skin/icon-main-sec-02-2-on@2x.png);} #section1 .line_list_wrap li.line_num03:hover .box .thumb {background-image:url(../images/skin/icon-main-sec-02-3-on@2x.png);} #section1 .line_list_wrap li .box .txt {margin:0;width:100%;box-sizing:border-box;position:absolute;left:50%;top:50%;height:50%;transform:translateX(-50%);} #section1 .line_list_wrap li .box .txt:before {width:10px;height:10px;border-radius:100%;background:#fff;content:"";display:inline-block;position:absolute;left:50%;top:0;transform:translate(-50%, -50%);} #section1 .line_list_wrap li:hover .box .txt:before {background:#00b1e3;} #section1 .line_list_wrap li .box .txt .txt_content {width:100%;vertical-align:middle;border-collapse:collapse;display:table;table-layout:fixed;position:absolute;left:50%;top:50%;transform:translate(-50%, -55%);} #section1 .line_list_wrap li .box .txt h4 {font-size:28px;line-height:1.27em;height:3.81em;font-weight:500;letter-spacing:-0.015em;color:#fff;display:table-cell;vertical-align:middle;box-sizing:border-box;padding:0;text-align:center;width:100%;} #section1 .line_list_wrap li:nth-of-type(3) .box .txt h4 {height:5.08em;} #section1 .line_list_wrap li:hover .box .txt h4 {color:#00b1e3;} /* section2 - Product */ #section2 {} #fullpage #section2 .intro {} #section2 .pr_list_wrap {padding-top:70px;} #wrap #fullpage #section2 .for_pc {display:block;} #wrap #fullpage #section2 .for_m {display:none;} #wrap #fullpage #section2 .pr_list_wrap ul.for_pc {text-align:center;vertical-align:top;display:flex;justify-content:space-between;} #section2 .pr_list_wrap li {width: calc(33.32% - 23px);vertical-align:top;position:relative;z-index:1;} #section2 .pr_list_wrap li + li {} #section2 .pr_list_wrap li .box {border-radius:8px;overflow:hidden;margin:0 auto;} #section2 .pr_list_wrap li:hover .box {box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.23);} #section2 .pr_list_wrap li .box > a {border-radius:inherit;background:none;border-width:2px;border-style:solid;border-color: rgba(255, 149, 0, 0);position:absolute;left:0;top:0;display:inline-block;width:100%;height:100%;z-index:3;box-sizing:border-box;} #section2 .pr_list_wrap li:hover .box > a {border-color: rgba(255, 149, 0, 1);background:url(../images/skin/icon-main-sec-03-on@2x.png) no-repeat;background-position-x:50%;background-position-y: calc(50% - 64px);background-size:40px auto;} #section2 .pr_list_wrap li .box .thumb {width:100%;height:0;padding:0;padding-top:68.3%;z-index:1;position:relative;} #section2 .pr_list_wrap li.pr_num01 .box .thumb {background:url(../images/skin/bnr-main-sec03-1@2x.jpg) no-repeat 50% 50%;background-size:cover;} #section2 .pr_list_wrap li.pr_num02 .box .thumb {background:url(../images/skin/bnr-main-sec03-2@2x.jpg) no-repeat 50% 50%;background-size:cover;} #section2 .pr_list_wrap li.pr_num03 .box .thumb {background:url(../images/skin/bnr-main-sec03-3@2x.jpg) no-repeat 50% 50%;background-size:cover;} #section2 .pr_list_wrap li:hover .box .thumb {} #section2 .pr_list_wrap li .box .txt {padding:32px 15px;box-sizing:border-box;position:relative;z-index:1;background:#fff;} #section2 .pr_list_wrap li:hover .box .txt {background:#ff9500;} #section2 .pr_list_wrap li .box .txt p, #section2 .pr_list_wrap li .box .txt h4 {color:#333;line-height:1em;display:block;vertical-align:top;margin:0 auto;padding:0;text-align:center;width:100%;} #section2 .pr_list_wrap li .box .txt p {font-size:18px;font-weight:300;letter-spacing:-0.01em;font-family: 'Poppins','Pretendard',-apple-system,Roboto,'Helvetica Neue','Apple SD Gothic Neo',Malgun Gothic,'맑은 고딕',AppleGothic,Dotum,'돋움',sans-serif;} #section2 .pr_list_wrap li .box .txt p strong {margin-bottom:18px;font-size:28px;font-weight:500;letter-spacing:-0.015em;font-family:inherit;line-height:inherit;vertical-align:top;display:block;} #section2 .pr_list_wrap li .box .txt h4 {margin-top:18px;font-size:28px;font-weight:500;letter-spacing:-0.015em;} #section2 .pr_list_wrap li:hover .box .txt p, #section2 .pr_list_wrap li:hover .box .txt h4 {color:#fff;} /* section3 - News */ #section3 {text-align:center;} #section3 .news_slider {width: calc(100% + 32px);margin:0 -16px;padding:0 16px;box-sizing:border-box;position:relative;z-index:1;overflow:hidden;} #section3 .swiper-button-prev, #section3 .swiper-button-next {width:50px;height:50px;border:1px #aaa solid;border-radius:100%;bottom:0;transform:translate(0,0);top:auto;left:auto;right:auto;display:inline-block;margin:0;padding:0;position:absolute;z-index:6;font-size:0;cursor:pointer;box-sizing:border-box;} #section3 .swiper-button-next:after, #section3 .swiper-button-prev:after {display:none;} #section3 .swiper-button-prev {right:92px;background:url(../images/skin/icon-slide-new-prev@2x.png) no-repeat 50% 50%;background-size:auto 14px;} #section3 .swiper-button-next {right:32px;background:url(../images/skin/icon-slide-new-next@2x.png) no-repeat 50% 50%;background-size:auto 14px;} #section3 .swiper-pagination-progressbar {width: calc(100% - 214px);height:2px;left:32px;bottom:24px;top:auto;background-color:#ccc;border-radius:0;display:block;overflow:hidden;background-repeat: no-repeat;background-size: 0 100%;transition: background-size .4s ease-in-out;position:absolute;z-index:3;} #section3 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background:#0078c4;height:100%;} #section3 .news_slider .board_ul {padding:70px 0 90px;counter-reset:list-number;} #section3 .news_slider .board_li {padding:0 16px;box-sizing:border-box;counter-increment:list-number;} #section3 .news_slider .board_li .txt {padding:38px 30px 42px;border-radius:8px;border:1px #ddd solid;background:#fff;box-sizing:border-box;position:relative;z-index:1;} #section3 .news_slider .board_li:hover .txt {box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.23);background:#0078c4;border-color:#0078c4;} #section3 .news_slider .board_li .txt > a {position:absolute;left:0;top:0;width:100%;height:100%;display:inline-block;z-index:3;} #section3 .news_slider .board_li .txt strong, #section3 .news_slider .board_li .txt span {line-height:1em;display:block;margin:0;padding:0;vertical-align:top;box-sizing:border-box;letter-spacing:-0.015em;font-weight:400;font-family: 'Poppins','Pretendard',-apple-system,Roboto,'Helvetica Neue','Apple SD Gothic Neo',Malgun Gothic,'맑은 고딕',AppleGothic,Dotum,'돋움',sans-serif;} #section3 .news_slider .board_li .txt strong {font-size:20px;padding:0 0 11px;min-width:24px;border-bottom-width:2px;border-bottom-style:solid;border-bottom-color:#333;color:#333;display:inline-block;} #section3 .news_slider .board_li .txt h4, #section3 .news_slider .board_li .txt div.contents {letter-spacing:-0.015em;font-weight:400;line-height:1em;display:block;margin:0;padding:0;vertical-align:top;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;} #section3 .news_slider .board_li .txt h4 {margin-top:39px;font-size:22px;height:1em;white-space:nowrap;color:#333;} #section3 .news_slider .board_li .txt div.contents {margin-top:16px;margin-bottom:55px;font-size:16px;line-height:1.75em;height:3.5em;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-wrap:break-word;color:#777;} #section3 .news_slider .board_li .txt span {font-size:16px;color:#aaa;} #section3 .news_slider .board_li:hover .txt h4, #section3 .news_slider .board_li:hover .txt div.contents, #section3 .news_slider .board_li:hover .txt span, #section3 .news_slider .board_li:hover .txt strong {border-bottom-color:#fff;color:#fff;} /* section4 - Contact Us */ #section4 {position:relative;z-index:2;} #section4:before {bottom:-0.16em;font-size:100px;font-weight:500;line-height:1;letter-spacing:-0.015em;color: rgba(255, 255, 255, 0.05);width:100%;display:inline-block;text-align:center;margin:0 auto;position:absolute;left:50%;transform:translateX(-50%);content:"NES BIOTECHNOLOGY";font-family: 'Poppins','Pretendard',-apple-system,Roboto,'Helvetica Neue','Apple SD Gothic Neo',Malgun Gothic,'맑은 고딕',AppleGothic,Dotum,'돋움',sans-serif;} #section4 .thumb {float:right;margin-top:-8.46%;width:53.85%;height:0;padding:0;padding-top:35.39%;box-shadow: 0px 12px 35px 0 rgba(0, 0, 0, 0.31);background:url(../images/skin/bnr-main-sec-05@2x.jpg) no-repeat 50% 50%;background-size:cover;box-sizing:border-box;} #section4 .txt_area {float:left;margin-top:-19.23%;width:50.77%;padding:54px 60px 60px;box-shadow: 0px 12px 35px 0 rgba(0, 0, 0, 0.31);background:#0078c4;box-sizing:border-box;} #section4 .txt_area h4, #section4 .txt_area p {color:#fff;display:block;margin:0;padding:0;vertical-align:top;} #section4 .txt_area h4 {font-size:46px;font-weight:400;letter-spacing:-0.015em;font-family: 'Poppins','Pretendard',-apple-system,Roboto,'Helvetica Neue','Apple SD Gothic Neo',Malgun Gothic,'맑은 고딕',AppleGothic,Dotum,'돋움',sans-serif;} #section4 .txt_area p {margin-top:23px;margin-bottom:60px;font-size:18px;font-weight:300;color: rgba(255, 255, 255, 0.8);letter-spacing:-0.015em;} #section4 .txt_area a {font-size:18px;border-radius:30px;height:60px;width:32.9%;min-width:104px;max-width:160px;padding:20px 30px;line-height:1em;letter-spacing:-0.015em;color:#fff;border:1px #fff solid;display:inline-block;margin:0 auto 0 0;vertical-align:top;box-sizing:border-box;text-align:left;font-family: 'Poppins','Pretendard',-apple-system,Roboto,'Helvetica Neue','Apple SD Gothic Neo',Malgun Gothic,'맑은 고딕',AppleGothic,Dotum,'돋움',sans-serif;} #section4 .txt_area a span {font-size:inherit;display:inline-block;background:url(../images/skin/icon-main-sec-05-more@2x.png) no-repeat 100% 50%;background-size:10px auto;width:100%;font-family:inherit;font-weight:inherit;} @media only screen and (max-width:1920px) { #section1 .aniBox{background-size:1920px auto;} #section2 .aniBox{background-size:1920px auto;} #section3 .aniBox{background-size:1920px auto;} #section4 {background-size:1920px auto;} } @media only screen and (max-width:1680px) { /* 풀페이지 */ body #fp-nav.left {left:15px;} /* section0 - 메인 */ .main_visual .slick-slide .txt_box h3 {font-size:75px;letter-spacing:0.38em;} .main_visual .slick-slide .txt_box p {font-size:34px;margin-top:1.44em;} } @media only screen and (max-width:1410px) { #fullpage h3 strong {font-size:60px;} #fullpage h3 span {margin-top:28px;font-size:23px;} /* section0 - 메인 */ /* 메인 비주얼 */ .main_visual .slick-slide .txt_box {padding:0 60px;} .main_visual .slick-slide .txt_box h3, .main_visual .slick-slide .txt_box p {line-height:1.2em;} .main_visual .slick-slide .txt_box h3 {font-size:72px;letter-spacing:0.35em;} .main_visual .slick-slide .txt_box p {font-size:31px;margin-top:1.38em;} .main_visual .slick-dots {left:130px;} #section0 .scr_down {right:1.5vw;bottom:172px;} #section0 .scr_down > button, #section0 .scr_down > a {width:200px;} #section0 .scr_down span {width:70px;} @keyframes scroll{ 0%{transform: translate(0px, 0);opacity:0;} 30% {opacity:1;} 85% {opacity:1;} 100%{transform: translate(70px, 0);opacity:0;} } } @media only screen and (max-width:1297px) { #fullpage h3 strong {font-size:56px;} /* section0 - 메인 */ /* 메인 비주얼 */ .main_visual .slick-slide .txt_box {top:28.3%;}/*11.3*/ .main_visual .slick-slide .txt_box h3 {font-size:70px;} .main_visual .slick-slide .txt_box p {font-size:30px;} #section0 .scr_down {bottom:164px;} #section0 .scr_down em:after {margin:4px 14px;} /* section1 - Pipeline */ #fullpage #section1 .intro {padding-top:22.3%;padding-bottom:14.93%;} #section1 .line_list_wrap li {width: calc(33.32% - 41px);} #section1 .line_list_wrap li:hover .box > a {border-color:#ddd;} #section1 .line_list_wrap li.line_num01:hover .box .thumb {background-image:url(../images/skin/icon-main-sec-02-1@2x.png);} #section1 .line_list_wrap li.line_num02:hover .box .thumb {background-image:url(../images/skin/icon-main-sec-02-2@2x.png);} #section1 .line_list_wrap li.line_num03:hover .box .thumb {background-image:url(../images/skin/icon-main-sec-02-3@2x.png);} #section1 .line_list_wrap li:hover .box .txt:before {background:#fff;} #section1 .line_list_wrap li:hover .box .txt h4 {color:#fff;} /* section2 - Product */ #fullpage #section2 .intro {padding-top:11.5%;padding-bottom:12%;} #section2 .pr_list_wrap li {width: calc(33.32% - 21px);} #section2 .pr_list_wrap li:hover .box {box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.23);} #section2 .pr_list_wrap li:hover .box > a {border-color: rgba(255, 149, 0, 0);background:none;} #section2 .pr_list_wrap li .box .txt {padding:32px 10px;} #section2 .pr_list_wrap li:hover .box .txt {background:#fff;} #section2 .pr_list_wrap li .box .txt p {font-size:17px;} #section2 .pr_list_wrap li .box .txt p strong {font-size:26px;} #section2 .pr_list_wrap li .box .txt h4 {font-size:26px;} #section2 .pr_list_wrap li:hover .box .txt p, #section2 .pr_list_wrap li:hover .box .txt h4 {color:#333;} /* section3 - News */ #fullpage #section3 .intro {padding-top:11.85%;padding-bottom:12.3%;} #section3 .news_slider .board_ul {padding:64px 0 84px;} #section3 .news_slider .board_li .txt {padding:32px 24px 36px;} #section3 .news_slider .board_li:hover .txt {box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.23);background:#fff;border-color:#ddd;} #section3 .news_slider .board_li .txt strong {font-size:19px;} #section3 .news_slider .board_li .txt h4 {margin-top:34px;font-size:21px;} #section3 .news_slider .board_li .txt div.contents {margin-top:16px;margin-bottom:50px;font-size:15px;} #section3 .news_slider .board_li .txt span {font-size:15px;} #section3 .news_slider .board_li:hover .txt h4 {color:#333;} #section3 .news_slider .board_li:hover .txt div.contents {color:#777;} #section3 .news_slider .board_li:hover .txt span {color:#aaa;} #section3 .news_slider .board_li:hover .txt strong {border-bottom-color:#333;color:#333;} /* section4 - Contact Us */ #fullpage #section4 .intro {padding-top:12.3%;padding-bottom:12.3%;} #section4 .txt_area {padding:52px 56px 56px;} #section4 .txt_area h4 {font-size:43px;} #section4 .txt_area p {margin-top:20px;margin-bottom:56px;} } @media only screen and (max-width:1280px) { #fullpage .w_custom {max-width:1330px;padding:0 15px;} #fullpage #section3 .w_custom {overflow:hidden;} /* section0 - 메인 */ /* 메인 비주얼 */ .main_visual .slick-slide .txt_box {padding:0 30px;} .main_visual .visual_control {left:30px;} .main_visual .slick-dots {left:100px;} #section0 .scr_down > button {display:none;} #section0 .scr_down > a {display:inline-block;} } @media only screen and (max-width:1240px) { #fullpage .section .intro {padding-top:98px;} } @media only screen and (max-width:1140px) { #fullpage h3 strong {font-size:52px;} #fullpage h3 span {margin-top:24px;font-size:21px;} #fullpage .section .intro {padding-top:88px;} /* section0 - 메인 */ /* 메인 비주얼 */ .main_visual .slick-slide .txt_box {top:25.3%;} .main_visual .slick-slide .txt_box h3 {font-size:68px;width: calc(100% + 8px);margin-left:-4px;margin-right:-4px;} .main_visual .slick-slide .txt_box p {font-size:29px;} #section0 .scr_down {right:17px;bottom:166px;} #section0 .scr_down > button, #section0 .scr_down > a {width:200px;} #section0 .scr_down em:after {margin:4px 10px;} #section0 .scr_down span {width:60px;margin:5px 0;} #section0 .scr_down span:after {width:10px;} @keyframes scroll{ 0%{transform: translate(0px, 0);opacity:0;} 30% {opacity:1;} 85% {opacity:1;} 100%{transform: translate(62px, 0);opacity:0;} } /* section1 - Pipeline */ #fullpage #section1 .intro {padding-top:21.3%;padding-bottom:15%;} #section1 .line_list_wrap {margin-top:64px;} #section1 .line_list_wrap li {width: calc(33.32% - 36px);} #section1 .line_list_wrap li.line_num01 .box .thumb {background-size:auto 71px;} #section1 .line_list_wrap li.line_num02 .box .thumb {background-size:auto 72px;} #section1 .line_list_wrap li.line_num03 .box .thumb {background-size:auto 66px;} #section1 .line_list_wrap li .box .txt h4 {font-size:24px;line-height:1.2em;height:3.6em;} #section1 .line_list_wrap li:nth-of-type(3) .box .txt h4 {height:4.8em;} /* section2 - Product */ #section2 .pr_list_wrap {padding-top:64px;} #section2 .pr_list_wrap li {width: calc(33.32% - 16px);} #section2 .pr_list_wrap li .box .txt {padding:30px 10px;} #section2 .pr_list_wrap li .box .txt p {font-size:16px;} #section2 .pr_list_wrap li .box .txt p strong {margin-bottom:16px;font-size:24px;} #section2 .pr_list_wrap li .box .txt h4 {margin-top:16px;font-size:24px;} /* section4 - Contact Us */ #section4 {} #fullpage #section4 .intro {padding-top:13.3%;padding-bottom:13.3%;} #section4 .thumb {margin-top:-8.76%;} #section4 .txt_area h4 {font-size:40px;} #section4 .txt_area p {margin-top:16px;margin-bottom:50px;font-size:17px;line-height:1.23em;} #section4 .txt_area a {font-size:17px;} } @media only screen and (max-width:1024px) { #fullpage h3 strong {font-size:48px;} #fullpage h3 span {font-size:20px;} #fullpage .section .intro {padding-top:78px;} /* section0 - 메인 */ /* 메인 비주얼 */ .main_visual .slick-slide .txt_box {top:22.3%;} .main_visual .slick-slide .txt_box h3 {font-size:62px;width: calc(100% + 8px);margin-left:-4px;margin-right:-4px;} .main_visual .slick-slide .txt_box p {font-size:28px;margin-top:1.28em;} #section0 .scr_down {bottom:146px;} /* section1 - Pipeline */ #fullpage #section1 .intro {padding-top:20.3%;padding-bottom:16%;} #section1 .line_list_wrap {margin-top:54px;} #section1 .line_list_wrap li {width: calc(33.32% - 30px);} #section1 .line_list_wrap li.line_num01 .box .thumb {background-size:auto 66px;} #section1 .line_list_wrap li.line_num02 .box .thumb {background-size:auto 66px;} #section1 .line_list_wrap li.line_num03 .box .thumb {background-size:auto 62px;} /* section2 - Product */ #wrap #fullpage #section2 .for_pc {display:none;} #wrap #fullpage #section2 .for_m {display:block;} #fullpage #section2 .intro {padding-top:13.4%;padding-bottom:15%;} #section2 .pr_list_wrap {padding-top:54px;padding-bottom:52px;position:relative;} #section2 .swiper-pagination-progressbar {width:100%;height:2px;left:0;bottom:0;top:auto;background-color:#ccc;border-radius:0;display:block;overflow:hidden;background-repeat: no-repeat;background-size: 0 100%;transition: background-size .4s ease-in-out;position:absolute;z-index:3;} #section2 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background:#0078c4;height:100%;} #wrap #fullpage #section2 .pr_list_wrap ul.for_pc {display:none;} #wrap #fullpage #section2 .pr_list_wrap ul.for_m {width: calc(100% + 30px);margin:0 -15px;padding:0 8px;box-sizing:border-box;display:flex;justify-content:flex-start;} #section2 .pr_list_wrap li {width:auto;padding:0 8px;box-sizing:border-box;} #section2 .pr_list_wrap li .box .txt {padding:28px 10px;} #section2 .pr_list_wrap li .box .txt h4 {font-size:22px;} /* section3 - News */ #fullpage #section3 .intro {padding-top:12.53%;padding-bottom:15%;} #section3 .swiper-button-prev, #section3 .swiper-button-next {width:40px;height:40px;} #section3 .swiper-button-prev {right:82px;background-size:auto 12px;} #section3 .swiper-button-next {background-size:auto 12px;} #section3 .swiper-pagination-progressbar {width: calc(100% - 194px);bottom:19px;} #section3 .news_slider .board_ul {padding:54px 0 84px;} /* section4 - Contact Us */ #section4 {} #section4:before {font-size:9.98vw;} #fullpage #section4 .intro {padding-top:14.3%;padding-bottom:14.3%;} #section4 .thumb {margin-top:-9.26%;} #section4 .txt_area {padding:38px 40px 40px;} #section4 .txt_area h4 {font-size:38px;} #section4 .txt_area p {margin-top:12px;margin-bottom:45px;line-height:1.43em;} #section4 .txt_area a {border-radius:28px;height:55px;padding:18px 26px;} } @media only screen and (max-width:960px) { #fullpage h3 strong {font-size:46px;} #fullpage h3 span {font-size:19px;} /* section0 - 메인 */ /* 메인 비주얼 */ .main_visual .slick-slide .txt_box {top:19.3%;} .main_visual .slick-slide .txt_box h3 {font-size:60px;} .main_visual .slick-slide .txt_box p {font-size:27px;} /* section1 - Pipeline */ #fullpage #section1 .intro {padding-top:19.3%;padding-bottom:17%;} #section1 .line_list_wrap li {width: calc(33.32% - 22px);} #section1 .line_list_wrap li.line_num01 .box .thumb {background-size:auto 60px;} #section1 .line_list_wrap li.line_num02 .box .thumb {background-size:auto 60px;} #section1 .line_list_wrap li.line_num03 .box .thumb {background-size:auto 58px;} #section1 .line_list_wrap li .box .txt:before {width:8px;height:8px;} #section1 .line_list_wrap li .box .txt .txt_content {transform: translate(-50%, -65%);} #section1 .line_list_wrap li:nth-of-type(3) .box .txt .txt_content {transform: translate(-50%, -55%);} #section1 .line_list_wrap li .box .txt h4 {font-size:22px;} /* section2 - Product */ #fullpage #section2 .intro {padding-top:14.4%;padding-bottom:16%;} /* section4 - Contact Us */ #section4 {} #fullpage #section4 .intro {padding-top:15.3%;padding-bottom:15.3%;} #section4 .thumb {margin-top:-9.96%;} #section4 .txt_area p {margin-top:10px;margin-bottom:40px;} #section4 .txt_area a {border-radius:27px;height:53px;padding:17px 20px;} } @media only screen and (max-width:860px) { /* section0 - 메인 */ /* 메인 비주얼 */ .main_visual .slick-slide .txt_box h3 .m_br + br {display:inline-block;} /* section1 - Pipeline */ #fullpage #section1 .intro {padding-bottom:18%;} #section1 .line_list_wrap {margin-top:44px;} #section1 .line_list_wrap li {width: calc(33.32% - 10px);} #section1 .line_list_wrap li.line_num01 .box .thumb {background-size:auto 56px;} #section1 .line_list_wrap li.line_num02 .box .thumb {background-size:auto 56px;} #section1 .line_list_wrap li.line_num03 .box .thumb {background-size:auto 54px;} #section1 .line_list_wrap li .box .txt h4 {font-size:21px;} /* section2 - Product */ #fullpage #section2 .intro {padding-top:14.4%;padding-bottom:16%;} #section2 .pr_list_wrap {padding-top:44px;padding-bottom:42px;} #section2 .pr_list_wrap li .box .txt {padding:25px 10px;} /* section3 - News */ #fullpage #section3 .intro {padding-top:13.53%;padding-bottom:17%;} #section3 .news_slider {width: calc(100% + 16px);margin:0 -8px;padding:0 4px;} #section3 .swiper-button-prev {right:63px;} #section3 .swiper-button-next {right:13px;} #section3 .swiper-pagination-progressbar {width: calc(100% - 150px);left:13px;} #section3 .news_slider .board_ul {padding:44px 0 74px;} #section3 .news_slider .board_li {padding:0 8px;} #section3 .news_slider .board_li .txt {padding:30px 24px 32px;} #section3 .news_slider .board_li .txt strong {padding-bottom:8px;min-width:22px;} #section3 .news_slider .board_li .txt h4 {margin-top:23px;font-size:20px;line-height:1.25em;height:2.5em;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-wrap:break-word;} #section3 .news_slider .board_li .txt div.contents {margin-top:10px;margin-bottom:40px;line-height:1.5em;height:3em;} /* section4 - Contact Us */ #section4 {} #section4 .thumb {margin-top:27px;width:66%;padding-top:43.34%;} #section4 .txt_area {margin-top:-13.34%;width:66%;padding:32px 35px 35px;} } @media only screen and (max-width:767px) { #fullpage h3 strong {font-size:44px;} #fullpage h3 span {font-size:18px;} #fullpage .section .intro {padding-top:74px;} #section1 .aniBox{background:url(../images/skin/m-bg-main-sec-02.jpg) no-repeat 50% 50%;background-size:cover;} #section2 .aniBox{background:url(../images/skin/m-bg-main-sec-03.jpg) no-repeat 50% 50%;background-size:cover;} #section3 .aniBox{background:url(../images/skin/m-bg-main-sec-04.jpg) no-repeat 50% 50%;background-size:cover;} #section4 {background:url(../images/skin/m-bg-main-sec-05.jpg) no-repeat 50% 50%;background-size:cover;} /* section0 - 메인 */ /* 메인 비주얼 */ .main_visual .visual_control {display:none;} .main_visual .slick-dots {padding:0;height:8px;left:30px;} /* section1 - Pipeline */ #section1 {} #fullpage #section1 .intro {padding-bottom:19%;} #section1 .line_list_wrap li.line_num01 .box .thumb {background-size:auto 50px;} #section1 .line_list_wrap li.line_num02 .box .thumb {background-size:auto 50px;} #section1 .line_list_wrap li.line_num03 .box .thumb {background-size:auto 47px;} #section1 .line_list_wrap li .box .txt:before {width:6px;height:6px;} #section1 .line_list_wrap li .box .txt h4 {font-size:17px;} /* section2 - Product */ #fullpage #section2 .intro {padding-top:15.4%;padding-bottom:17%;} /* section3 - News */ #section3 .news_slider .board_li .txt strong {font-size:18px;} #section3 .news_slider .board_li .txt h4 {font-size:19px;} /* section4 - Contact Us */ #section4 {} #section4:before {bottom:-0.14em;font-size:10.2vw;}/*38*/ #fullpage #section4 .intro {padding-top:18%;padding-bottom:18%;} #section4 .thumb {width:76%;padding-top:49.34%;} #section4 .txt_area {width:76%;} #section4 .txt_area h4 {font-size:36px;} #section4 .txt_area p {margin-top:8px;margin-bottom:32px;font-size:16px;} #section4 .txt_area p br {display:inline-block;} #section4 .txt_area a {font-size:16px;border-radius:26px;height:52px;} } @media only screen and (max-width:640px) { /* section0 - 메인 */ /* 메인 비주얼 */ .main_visual .slick-slide .txt_box h3 {font-size:58px;width: calc(100% + 6px);margin-left:-3px;margin-right:-3px;} .main_visual .slick-slide .txt_box p {font-size:27px;}/*25*/ .main_visual .slick-slide .txt_box p .m_br + br {display:inline-block;} .main_visual .slick-dots {bottom:19.5%;} .main_visual .slick-dots {line-height:8px;height:8px;left:15px;}/*6*/ .main_visual .slick-dots li {padding:0 15px;}/*7*/ .main_visual .slick-dots li button {line-height:8px;height:8px;width:8px;} #section0 .scr_down {bottom:131px;} #section0 .scr_down > button, #section0 .scr_down > a {width:147px;} #section0 .scr_down span {width:45px;} @keyframes scroll{ 0%{transform: translate(0px, 0);opacity:0;} 30% {opacity:1;} 85% {opacity:1;} 100%{transform: translate(56px, 0);opacity:0;} } /* section1 - Pipeline */ #fullpage #section1 .intro {padding-top:19.3%;padding-bottom:19%;} #fullpage #section1 .w_custom {padding:0;width:100%;margin:0;} #section1 .line_list_wrap {margin-top:44px;position:relative;z-index:1;} #section1 .swiper-button-prev, #section1 .swiper-button-next {width:20px;height:20px;border:0;border-radius:0;bottom:auto;transform:translate(0,-50%);top:50%;left:auto;right:auto;display:inline-block;margin:0;padding:0;position:absolute;z-index:6;font-size:0;cursor:pointer;box-sizing:border-box;} #section1 .swiper-button-next:after, #section1 .swiper-button-prev:after {display:none;} #section1 .swiper-button-prev {left:11px;background:url(../images/skin/icon-slide-sec02-prev.png) no-repeat 50% 50%;background-size:auto 20px;} #section1 .swiper-button-next {right:11px;background:url(../images/skin/icon-slide-sec02-next.png) no-repeat 50% 50%;background-size:auto 20px;} #wrap #fullpage #section1 .for_pc {display:none;} #wrap #fullpage #section1 .for_m {display:block;} #wrap #fullpage #section1 .line_list_wrap ul.for_pc {display:none;} #wrap #fullpage #section1 .line_list_wrap ul.for_m {display:flex;justify-content:flex-start;width:100%;margin:0;padding:0;box-sizing:border-box;} #section1 .line_list_wrap li {width:46vw;padding:0 8px;box-sizing:border-box;} #section1 .line_list_wrap li.line_num01 .box .thumb {background-size:auto 46px;} #section1 .line_list_wrap li.line_num02 .box .thumb {background-size:auto 46px;} #section1 .line_list_wrap li.line_num03 .box .thumb {background-size:auto 43px;} #section1 .line_list_wrap li .box .txt .txt_content {transform: translate(-50%, -55%);} #section1 .line_list_wrap li:nth-of-type(3) .box .txt .txt_content {transform: translate(-50%, -50%);} #section1 .line_list_wrap li .box .txt h4 {font-size:18px;} /* section2 - Product */ #fullpage #section2 .intro {padding-top:16.4%;padding-bottom:18%;} #section2 .pr_list_wrap li .box .txt {padding:22px 10px;} /* section3 - News */ #fullpage #section3 .intro {padding-top:14.53%;padding-bottom:18%;} #section3 .news_slider .board_li .txt {padding:28px 24px;} #section3 .news_slider .board_li .txt strong {font-size:17px;} #section3 .news_slider .board_li .txt h4 {font-size:18px;} #section3 .news_slider .board_li .txt div.contents {line-height:1.38em;height:2.76em;} #section3 .news_slider .board_li .txt div.contents, #section3 .news_slider .board_li .txt span {font-size:14px;} } @media only screen and (max-width:500px) { #fullpage h3 strong {font-size:42px;} #fullpage .section .intro {padding-top:68px;} /* section0 - 메인 */ /* 메인 비주얼 */ .main_visual .slick-slide .txt_box h3 {font-size:54px;} .main_visual .slick-slide .txt_box p {font-size:26px;} .main_visual .slick-dots {left:20px;} .main_visual .slick-dots li {padding:0 10px;} #section0 .scr_down {bottom:131px;} #section0 .scr_down > button, #section0 .scr_down > a {width:147px;} #section0 .scr_down span {width:45px;} @keyframes scroll{ 0%{transform: translate(0px, 0);opacity:0;} 30% {opacity:1;} 85% {opacity:1;} 100%{transform: translate(56px, 0);opacity:0;} } /* section1 - Pipeline */ #fullpage #section1 .intro {padding-top:18.3%;padding-bottom:20%;} #section1 .line_list_wrap {margin-top:40px;} #section1 .line_list_wrap li {width:52vw;} #section1 .line_list_wrap li .box .txt h4 {font-size:17px;} /* section2 - Product */ #section2 {} #fullpage #section2 .intro {padding-top:17.4%;padding-bottom:19%;} #section2 .pr_list_wrap {padding-top:40px;padding-bottom:38px;} #section2 .pr_list_wrap li .box .thumb {padding-top:63.3%;} #section2 .pr_list_wrap li .box .txt {padding:20px 10px;} #section2 .pr_list_wrap li .box .txt p {font-size:15px;} #section2 .pr_list_wrap li .box .txt p strong {margin-bottom:10px;font-size:21px;} #section2 .pr_list_wrap li .box .txt h4 {margin-top:10px;font-size:21px;} /* section3 - News */ #fullpage #section3 .intro {padding-top:15.53%;padding-bottom:19%;} #section3 .news_slider {width: calc(100% + 30px);margin: 0 -15px;padding: 0 7.5px;} #section3 .news_slider .board_li {padding:0 7.5px;} #section3 .news_slider .board_li .txt strong {font-size:16px;} #section3 .news_slider .board_li .txt h4 {font-size:17px;} /* section4 - Contact Us */ #section4 {} #fullpage #section4 .intro {padding-top:20%;padding-bottom:20%;} #section4 .thumb {width:82%;padding-top:54.34%;box-shadow: 0px 6px 18px 0 rgba(0, 0, 0, 0.31);} #section4 .txt_area {width:82%;padding:28px 30px 30px;box-shadow: 0px 6px 18px 0 rgba(0, 0, 0, 0.31);} #section4 .txt_area h4 {font-size:33px;} #section4 .txt_area p {margin-bottom:32px;font-size:15px;} #section4 .txt_area a {font-size:15px;height:51px;} } @media only screen and (max-width:414px) { /* section0 - 메인 */ /* 메인 비주얼 */ .main_visual .slick-slide .txt_box {top:15.3%;} .main_visual .slick-slide .txt_box h3 {font-size:52px;width: calc(100% + 10px);margin-left:-3px;margin-right:-7px;letter-spacing:0.3em;} .main_visual .slick-slide .txt_box p {font-size:26px;} /* section1 - Pipeline */ #section1 .line_list_wrap li {width:57.6vw;} /* section2 - Product */ #section2 .pr_list_wrap li .box {border-radius:5px;} #section2 .pr_list_wrap li .box .thumb {padding-top:58.3%;} #section2 .pr_list_wrap li.pr_num01 .box .thumb {background:url(../images/skin/bnr-main-sec03-1@2x.jpg) no-repeat 50% 50%;background-size:cover;} #section2 .pr_list_wrap li.pr_num02 .box .thumb {background:url(../images/skin/bnr-main-sec03-2@2x.jpg) no-repeat 50% 50%;background-size:cover;} #section2 .pr_list_wrap li.pr_num03 .box .thumb {background:url(../images/skin/bnr-main-sec03-3@2x.jpg) no-repeat 50% 50%;background-size:cover;} #section2 .pr_list_wrap li .box .txt {padding:20px 5px;} #section2 .pr_list_wrap li .box .txt p {font-size:14px;} #section2 .pr_list_wrap li .box .txt p strong {margin-bottom:9px;font-size:20px;} #section2 .pr_list_wrap li .box .txt h4 {margin-top:9px;font-size:20px;} } @media only screen and (max-width:375px) { #fullpage h3 strong {font-size:40px;} #fullpage h3 span {font-size:17px;} #fullpage .section .intro {padding-top:64px;} /* section0 - 메인 */ /* 메인 비주얼 */ .main_visual .slick-slide .txt_box {top:12.3%;} .main_visual .slick-slide .txt_box h3 {font-size:50px;letter-spacing:0.28em;} .main_visual .slick-slide .txt_box p {font-size:25px;} .main_visual .slick-dots {line-height:6px;height:6px;left:23px;} .main_visual .slick-dots li {padding:0 7px;} .main_visual .slick-dots li button {line-height:6px;height:6px;width:6px;} /* section1 - Pipeline */ #fullpage #section1 .intro {padding-top:18.3%;padding-bottom:20%;} #section1 .line_list_wrap {margin-top:34px;} #section1 .line_list_wrap li {width:62.6vw;} #section1 .line_list_wrap li.line_num01 .box .thumb {background-size:auto 44px;} #section1 .line_list_wrap li.line_num02 .box .thumb {background-size:auto 44px;} #section1 .line_list_wrap li.line_num03 .box .thumb {background-size:auto 43px;} #section1 .line_list_wrap li .box .txt h4 {font-size:16px;} /* section2 - Product */ #section2 .pr_list_wrap {padding-top:34px;padding-bottom:32px;} #section2 .pr_list_wrap li .box .txt p {font-size:14px;} #section2 .pr_list_wrap li .box .txt p strong {margin-bottom:9px;font-size:20px;} #section2 .pr_list_wrap li .box .txt h4 {margin-top:9px;font-size:20px;} /* section3 - News */ #fullpage #section3 .intro {padding-top:16.53%;padding-bottom:20%;} #section3 .swiper-button-prev, #section3 .swiper-button-next {width:35px;height:35px;} #section3 .swiper-button-prev {right:60px;background-size:auto 10px;} #section3 .swiper-button-next {right:15px;background-size:auto 10px;} #section3 .swiper-pagination-progressbar {width: calc(100% - 124px);left:15px;bottom:16px;} #section3 .news_slider .board_ul {padding:35px 0 65px;} #section3 .news_slider .board_li .txt {border-radius:5px;} #section3 .news_slider .board_li .txt strong {font-size:15px;padding-bottom:6px;min-width:20px;} #section3 .news_slider .board_li .txt h4 {font-size:16px;} #section3 .news_slider .board_li .txt div.contents {margin-bottom:36px;font-size:13px;} #section3 .news_slider .board_li .txt span {font-size:13px;} /* section4 - Contact Us */ #section4 {} #section4 .thumb {width:91.3%;padding-top:66.5%;} #section4 .txt_area {margin-top:-13.34%;width:91.3%;padding:23px 25px 25px;} #section4 .txt_area h4 {font-size:30px;} #section4 .txt_area p {margin-bottom:27px;font-size:14px;} #section4 .txt_area a {font-size:14px;border-radius:25px;height:50px;} } @media only screen and (max-width:360px) { #fullpage h3 strong {font-size:38px;} #fullpage h3 span {font-size:16px;} /* section0 - 메인 */ /* 메인 비주얼 */ .main_visual .slick-slide .txt_box {padding:0 25px;top:12.3%;} .main_visual .slick-slide .txt_box h3 {font-size:48px;letter-spacing:0.28em;} .main_visual .slick-slide .txt_box p {font-size:24px;} /* section4 - Contact Us */ #section4 .txt_area h4 {font-size:29px;} } @media only screen and (max-width:340px) { #fullpage h3 strong {font-size:36px;} #fullpage h3 span {font-size:15px;} /* section0 - 메인 */ /* 메인 비주얼 */ .main_visual .slick-slide .txt_box {padding:0 20px;} .main_visual .slick-slide .txt_box h3 {font-size:47px;} /* section1 - Pipeline */ #fullpage #section1 .intro {padding-top:19.3%;padding-bottom:22%;} #section1 .line_list_wrap li {width:62.6vw;} #section1 .line_list_wrap li.line_num01 .box .thumb {background-size:auto 40px;} #section1 .line_list_wrap li.line_num02 .box .thumb {background-size:auto 40px;} #section1 .line_list_wrap li.line_num03 .box .thumb {background-size:auto 40px;} #section1 .line_list_wrap li .box .txt h4 {font-size:15px;} /* section2 - Product */ #section2 .pr_list_wrap li .box .txt p {font-size:13px;} #section2 .pr_list_wrap li .box .txt p strong {font-size:18px;} #section2 .pr_list_wrap li .box .txt h4 {font-size:18px;} /* section3 - News */ #section3 .news_slider .board_li .txt {padding:22px 20px;} #section3 .news_slider .board_li .txt strong {font-size:14px;} #section3 .news_slider .board_li .txt h4 {font-size:15px;} #section3 .news_slider .board_li .txt div.contents, #section3 .news_slider .board_li .txt span {font-size:12px;} /* section4 - Contact Us */ #section4 {} #section4 .txt_area {padding:18px 20px 20px;} #section4 .txt_area h4 {font-size:27px;} #section4 .txt_area p {margin-bottom:24px;font-size:13px;} #section4 .txt_area a {font-size:13px;height:49px;} } @media only screen and (max-width:1280px) { /*** 풀페이지 해재 ***/ .fp-section, .fp-tableCell {height:auto !important;} #fullpage .section .aniBox {transform:scale(1);transition:all 1.0s;} #fullpage .section.active .aniBox {transform:scale(1);} } @media only screen and (max-height:800px) { /*** 풀페이지 해재 ***/ .fp-section, .fp-tableCell {height:auto !important;} #fullpage .section .aniBox {transform:scale(1);transition:all 1.0s;} #fullpage .section.active .aniBox {transform:scale(1);} }