@charset "utf-8"; /*─────────────────────────────────────────────────────────── header, footer, main 관련 작성 css 파일입니다. ** 이와 서브페이지 관련 css는 /css/sub.css 에 있습니다. ───────────────────────────────────────────────────────────*/ /*─────────────────────────────────────────────────────────── layout common ───────────────────────────────────────────────────────────*/ #wrap {position:relative;height:100%;width:100%;margin:0;padding:0;} /* #header 와 #container, #footer 전체 감싸는 영역 */ #wrap #header {width:100%;margin:0;padding: 30px 0;overflow: visible;} #wrap #container {width:100%;margin:0;padding:0;} #wrap #footer {width:100%;margin:0;} /* #container 안의 레이아웃 */ #contents_wrap {width:1200px;margin:0 auto;padding:0;position:relative;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 14.2% 0;box-sizing:border-box;} /* 컨텐츠를 감싸는 영역 */ #contents_wrap #side_box + #contents_box {padding-top:0;} /* lnb와 컨텐츠가 float 일때 사이즈 재설정 */ /* navigation layout */ #contents_wrap .nav_wrap {box-sizing:border-box;} /* #content */ #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:1240px;text-align:left;margin:0 auto;padding:0;box-sizing:border-box;} @media only screen and (max-width:1257px) { body.on {height:100%;overflow:hidden;} #contents_wrap {width:100%;padding-left:15px !important;padding-right:15px !important;} .w_custom{width:100%;padding-left:15px !important;padding-right:15px !important;} } @media only screen and (max-width:1200px) { } @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:860px) { #contents_wrap #side_box {padding: 85px 0 0 0;} #contents_wrap #contents_box {padding:4.2% 0 20.4% 0;} } @media only screen and (max-width:767px) { /*.w_custom {padding-left:4% !important;padding-right:4% !important;}*/ #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 {width:100%;padding-left:15px !important;padding-right:15px !important;} #contents_wrap #contents_box {padding:4.2% 0 20.4% 0;} } @media only screen and (max-width:479px) { #contents_wrap #contents_box {padding:4.2% 0 40% 0;} } @media only screen and (max-width:320px) { .w_custom {padding-left:10px !important;padding-right:10px !important;} #contents_wrap{padding-left:10px !important;padding-right:10px !important;} } /*─────────────────────────────────────────────────────────── 메인 상품 진열 ───────────────────────────────────────────────────────────*/ /* 메인상품진열 - 공통 */ .main .list_cont {} .main .list_cont ul {font-size:0;width:calc(100% + 15px);margin-left:-15px;} .main .list_cont ul li {display:inline-block;margin-left:15px;vertical-align:top;} .main .list_cont ul li a {display:block;height:100%;} .main .list_cont ul li .thumb {} .main .list_cont ul li .thumb img {max-width:100%;width:100%;} .main .list_cont ul li .info {} .main .list_cont ul li .info p {color:#333;line-height:1.2;} .main .list_cont ul li .info .name {font-size:14px;} /* 메인상품진열 - 갤러리형 */ .main .list_Galleryform {} .main .list_Galleryform ul {text-align:left;} .main .list_Galleryform ul li {width:calc(25% - 15px);} .main .list_Galleryform ul li:nth-of-type(n+5) {margin-top:40px;} .main .list_Galleryform ul li .thumb {} .main .list_Galleryform ul li .thumb img {} .main .list_Galleryform ul li .info {margin-top:10px;} .main .list_Galleryform ul li .info p {} .main .list_Galleryform ul li .info .name {} /* 메인상품진열 - 리스트형 */ .main .list_Listform {} .main .list_Listform ul {} .main .list_Listform ul li {width:calc(50% - 15px);} .main .list_Listform ul li a {width:100%;display:table;} .main .list_Listform ul li:nth-of-type(n+3) {margin-top:40px;} .main .list_Listform ul li .thumb, .main .list_Listform ul li .info {display:table-cell;vertical-align:middle;width:50%;box-sizing:border-box;} .main .list_Listform ul li .thumb {} .main .list_Listform ul li .thumb img {} .main .list_Listform ul li .info {border:1px solid #ddd;padding:0 15px;} .main .list_Listform ul li .info p {} .main .list_Listform ul li .info .name {} @media only screen and (max-width:860px) { /* 메인상품진열 - 갤러리형 */ .main .list_Galleryform ul li {width:calc(50% - 15px);} .main .list_Galleryform ul li:nth-of-type(n+3) {margin-top:40px;} /* 메인상품진열 - 리스트형 */ .main .list_Listform ul li {width:calc(100% - 15px);} .main .list_Listform ul li:nth-of-type(n+2) {margin-top:40px;} } /*─────────────────────────────────────────────────────────── sub custom ───────────────────────────────────────────────────────────*/ /*** company/history (연혁) ***/ /* 연도 */ .sub_history.history1 .history_box .his_year .year strong {background:#4aabe6;} /* 원 */.sub_history.history1 .history_box .his_year .year::before {background-color:#4aabe6;} /* 삼각형 */.sub_history.history1 .history_box .his_year .year strong::after {border-bottom:12px solid #4aabe6;border-color:#4aabe6 !important;} /*** company/history2 (연혁2) ***/ /* 연도 */ .sub_history.history2 .history_box .his_year .year strong {color:#4aabe6;} .sub_history.history2 .history_box .his_year .year strong::before {background:#4aabe6;} .sub_history.history2 .history_box .his_year .year strong::after {border-color:#4aabe6;} /*** company/history3 (연혁3) ***/ /* 연도 */ .sub_history.history3 .history_box table.history span {color:#49abe6;} /*** company/work (조직도1번) ***/ .sub_chart.chart1 .chart .chart_box h3 + h3 {background:#ffa531;} /*** company/work (조직도2번) ***/ /* :before 요소는 라인, :after 요소는 원형 */ .sub_chart.chart2 .chart h3 {box-shadow:0 0 0 20px #f2fafd;border:2px #0095da solid;} .sub_chart.chart2 .chart h3:before{border-color:#0095da;} .sub_chart.chart2 .chart h4{border-color:#0095da;0 0 0 8px #f2fafd;} .sub_chart.chart2 .chart h3:after, .sub_chart.chart2 .chart h4:after, .sub_chart.chart2 .chart li.chart_side li h5:after{border-color:#0095da;} @media only screen and (max-width:479px) { /* 삼각형 */.sub_history.history1 .history_box .his_year .year strong::after {border-bottom:8px solid #4aabe6;} } /*─────────────────────────────────────────────────────────── 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 .hd_lnb li a, #header .hd_gnb li, #header .hd_gnb li a {} #header {left:0;top:0;height: 125px;border:0;text-align:center;position:fixed;z-index:10;width:100%;box-sizing:border-box;font-size:0;background:#fff;} #header .w_set {width:100%;box-sizing:border-box;max-width:1180px;padding:0;margin:0 auto;} #header .w_set2 {position:relative;} #header .hd_logo {left:92px;top: 50%;position:absolute;z-index:15;width: 189px;height: 38px;transform: translateY(-50%);} #header .hd_logo a {background: url('../images/skin/ft_logo.png') no-repeat left;font-size: 0;display: block;height: 100%;background-size: auto 100%;} #header .hd_lnb {line-height:30px;margin:0;padding:0;font-size:0;width:100%;display:block;vertical-align:top;text-align:center;display:inline-block;box-sizing:border-box;z-index:10; padding-right:15px;} #header.main .hd_lnb{padding-top:0;} #header.hd_main .hd_lnb{padding-top:25px;} #header .hd_lnb li, #header .hd_lnb li a {padding:0;line-height: 2;font-size: 18px;font-weight: 500;color:#333;vertical-align: middle;text-align:center;display:inline-block;box-sizing:border-box;transition: all .2s;} #header .hd_lnb li {padding: 0 41px;position:relative;} #header .hd_lnb li a {padding:0;position:relative;z-index:1;line-height:1.6} #header .hd_lnb > li > a{line-height:80px;} #header .hd_lnb li.on a {color: #1b2272;} #header .hd_lnb li a.on:after{width:100%;} #header .hd_lnb li .hd_lnb_dep2 {z-index: 55;display:none;position:absolute;left:-10px;top:calc(100% - 5px); width:100%; background:#fff; box-shadow:3px 4px 5px rgba(0,0,0,0.05);padding:10px 10px; } #header .hd_lnb li .hd_lnb_dep2 .dep2{padding:7px 0; display:block; } #header .hd_lnb li .hd_lnb_dep2 .dep2 a{color:#333 !important; display:block; font-size:14px; font-family: 'Noto Sans KR', 'Malgun Gothic', '맑은 고딕', dotum, sans-serif;} #header .hd_right {top:50%;right:110px;height:14px;line-height:14px;margin:0;padding:0;font-size:0;position:absolute;vertical-align:top;text-align:center;display:inline-block;box-sizing:border-box;z-index:15;margin-top: -20.5px;} #header .hd_right .hd_gnb, #header .hd_right .hd_lang, #header .hd_right .menu-trigger {display:inline-block;vertical-align:middle;} #header .hd_right .hd_lang {margin-right:30px;} #header .hd_right .hd_lang li, #header .hd_right .hd_lang li a {line-height: 1;padding:0;font-size:14px;font-weight:400;color:#888;vertical-align:top;text-align:center;display:inline-block;box-sizing:border-box;} #header .hd_right .hd_lang li {} #header .hd_right .hd_lang li + li a {padding:0 0 0 30px;} #header .hd_right .hd_lang li, #header .hd_right .hd_lang li a {line-height: 1;padding:0;font-size:14px;font-weight:400;color:#888;vertical-align:top;text-align:center;display:inline-block;box-sizing:border-box;} #header .hd_right .hd_gnb {} #header .hd_right .hd_gnb li, #header .hd_right .hd_gnb li a {line-height: 1;padding:0;font-size:14px;font-weight:400;color:#888;vertical-align:top;text-align:center;display:inline-block;box-sizing:border-box;} #header .hd_right .hd_gnb li {} #header .hd_right .hd_gnb li + li a {padding:0 0 0 30px;} #header .hd_right .menu-trigger {position:relative;padding:0;width: 30px;height: 25px;box-sizing: border-box;margin-left: 30px; display:none;} #header .hd_right .menu-trigger span {transition:0.3s;position:absolute;width: 100%;height:2px;background-color: #333;left: 0;} #header .hd_right .menu-trigger span:nth-of-type(1) {top: 0;} #header .hd_right .menu-trigger span:nth-of-type(2) {top: 50%;margin-top: -1px;} #header .hd_right .menu-trigger span:nth-of-type(3) {bottom: 0;} #header .hd_right .language li{width:90px; height:40px; border:1px solid #333; line-height:40px; box-sizing:border-box; border-radius:20px; font-size:16px; font-weight:400; color:#fff; font-family:'Montserrat'; cursor:pointer; height:100%; background:#fff;} #header.hd_main .hd_right .language li{background:rgba(255, 255, 255, 0);} #header .hd_right .language li span{display:block; font-size:16px; font-weight:500; color:#333; font-family:'Montserrat';} #header .hd_right .language li a{display:block; font-size:16px; font-weight:500; color:#333; font-family:'Montserrat';} #header.main .hd_right .language li{border:1px solid #adadad; color:#333; overflow:hidden;} #header.main .hd_right .language li span, #header.main .hd_right .language li a{color:#333;} #header.hd_main .hd_right .language li{border:1px solid rgba(255,255,255,0.4); color:#fff; overflow:hidden;} #header.hd_main .hd_right .language li span, #header.hd_main .hd_right .language li a{color:#fff;} #header .hd_right .language > li > span:after{display:inline-block; content:''; background:url('../images/skin/language_btn_on.png') no-repeat center center; width:12px; height:7px; vertical-align:middle; margin-bottom:2px; margin-left:8px;} #header.main .hd_right .language > li > span:after{display:inline-block; content:''; background:url('../images/skin/language_btn_on.png') no-repeat center center; width:12px; height:7px; vertical-align:middle; margin-bottom:2px; margin-left:8px;} #header.hd_main .hd_right .language > li > span:after{display:inline-block; content:''; background:url('../images/skin/language_btn.png') no-repeat center center; width:12px; height:7px; vertical-align:middle; margin-bottom:2px; margin-left:8px;} #header .hd_right .language > li:hover ul{display:block;} #header.main .hd_right .language > li:hover ul{} #header.hd_main .hd_right .language > li:hover ul{} #header .hd_right .language li ul{display:none; border-top:1px solid #adadad; border-radius:0 0 20px 20px;} #header .hd_right .language li ul li{border:0 !important; width:100%; height:100%;} #header .hd_right .language li ul li a{} /* main header */ #wrap #header{height:80px; background:#fff; transition:all 0.4s; padding:0;} #wrap #header:after{position:absolute; content:''; width:100%; height:1px; background:#eee; left:0; bottom:0;transition:all 0.4s;} #wrap #header.on {} #wrap #header .header_cont{} #wrap #header .hd_logo{top:50%;} #wrap #header .hd_logo a {background: url('../images/skin/hd_logo_on.png') no-repeat left;background-size: auto 100%; transition:all 0.4s;} #wrap #header .hd_right .hd_lnb li, #wrap #header .hd_right .hd_lnb li a{transition:all 0.3s;color:#fff;} #wrap #header .hd_right .hd_lnb li a:after{background:#fff;} #wrap #header .hd_right .hd_lang li a {color:#fff;} #wrap #header .hd_right .hd_gnb li a {color:#fff;} #wrap #header .hd_right .hd_lnb li a:after {background:#fff;} #wrap #header .hd_right .menu-trigger span {background:#1b2272;} #wrap #header.main .hd_right .menu-trigger span {background:#fff;} #wrap #header.hd_main{background:transparent; border-bottom:0; transition:all 0.4s; height:125px; padding:0;} #wrap #header.hd_main:after{background:rgba(255, 255, 255, 0); transition:all 0.4s;} #wrap #header.hd_main .header_cont{} #wrap #header.hd_main .hd_logo{top:50%;} #wrap #header.hd_main .hd_logo a {background: url('../images/skin/hd_logo.png') no-repeat left;background-size: auto 100%; transition:all 0.4s;} #wrap #header.hd_main .hd_lnb li a{color:#fff; transition:all 0.4s;} /* aside */ #aside {top:0px;right:-420px;width:420px;transition:0.8s;height:100%;box-sizing:border-box;box-sizing:border-box;position:fixed;background:#fff;z-index:99;} #aside.on {right:0%;} .aside_bg {left:0px;top:0px;bottom:0;right:0;width:100%;height:100%;background:rgba(0,0,0,0.6);opacity:0;transition:0.8s;z-index:50;position:fixed;display:none;} .aside_bg.on {opacity:1;display:block;} #aside .aside_box .btn_aside_close {position:absolute;right:60px;top:30px;width:32px;height:32px;cursor:pointer;} #aside .aside_box .btn_aside_close .menu-trigger2.active-1 {width:100%;height:100%;} #aside .aside_box .btn_aside_close .menu-trigger2.active-1 span {transition:0.3s;position:absolute;width:100%;height:1px;background-color:#666;left:0;top:14px;} #aside .aside_box .btn_aside_close .menu-trigger2.active-1 span:nth-of-type(1) {-webkit-transform:translateY (0) rotate (-45deg);transform:translateY(0) rotate(-45deg);} #aside .aside_box .btn_aside_close .menu-trigger2.active-1 span:nth-of-type(2) {opacity:0;} #aside .aside_box .btn_aside_close .menu-trigger2.active-1 span:nth-of-type(3) {-webkit-transform:translateY(0) rotate(45deg);transform:translateY(0) rotate(45deg);} #aside .aside_box {} #aside .aside_box .aside_logo {text-align:center;margin-bottom:58px;} #aside .aside_box .aside_logo a {display:block;background:url('../images/skin/hd_logo.png') no-repeat center;font-size:0;height:30px;background-size:auto 100%;} #aside .aside_box {width:100%;height:100%;margin:0;padding:20px 15px;overflow-y:auto;position:relative;z-index:1;box-sizing:border-box;display:block;} #aside .aside_box .btn_aside_close {right:15px;top:15px;width:25px;height:25px;} #aside .aside_box .aside_logo {text-align:left;margin-bottom:22px;} #aside .aside_box .aside_logo a {display:block;background:url('../images/skin/hd_logo_on.png') no-repeat left;font-size:0;height:30px;background-size:auto 100%;} #aside .aside_box .aside_gnb {text-align:left;display:block;} #aside .aside_box .aside_gnb li {display:inline-block;vertical-align:middle;} #aside .aside_box .aside_gnb li + li {margin-left:23px;} #aside .aside_box .aside_gnb li a {display:block;font-size:14px;color:#333;} #aside .aside_box .aside_search {margin:40px 0 28px;height:40px;background:#fff;position:relative;display:block; border:1px solid #ddd;} #aside .aside_box .aside_search .search_input {width:calc(100% - 39px);padding:0 10px;box-sizing:border-box;color:#333;font-size:13px;border:none;line-height:40px; height:40px;} #aside .aside_box .aside_search .search_enter {width:24px;height:24px;background:url('../images/skin/aside_search.png') no-repeat 0 0;position:absolute;right:15px;top:50%;margin-top:-12px;background-size:auto 100%;font-size: 0;border: 0;} #aside ul.slidemenu {padding:0 0 50px 0;} #aside ul.slidemenu li.on > .icons {background:linear-gradient(#1c2271,#1c2271),linear-gradient(#1c2271,#1c2271),transparent;background-position:center;background-size:100% 1px,0 100%;background-repeat:no-repeat; transition:all 0.4s;} #aside ul.slidemenu .depth1_li {text-align:left;display:block;vertical-align:top;font-size:0;border-bottom:1px solid #ddd;position:relative;} #aside ul.slidemenu .depth1_li + .depth1_li {margin-top:0;margin-left:0;} #aside ul.slidemenu .depth1_li a, #aside ul.slidemenu .depth1_li .icons {display:inline-block;vertical-align:middle;} #aside ul.slidemenu .depth1_li a {width:calc(100% - 60px);} #aside ul.slidemenu .depth1_li .depth1_a {background:url('../images/skin/aside_cate_off.png') no-repeat 97%;background-size:auto 8px;transition:0.2s;padding:0 10px;line-height:2.9;font-size:20px;color:#333;} #aside ul.slidemenu .depth1_li .icons {width:20px;height:20px;background:linear-gradient(#666,#666),linear-gradient(#666,#666),transparent;background-position:center;background-size:100% 1px,1px 100%;background-repeat:no-repeat; transition:all 0.4s; cursor:pointer;} #aside ul.slidemenu .depth1_li .depth1_a.now {background:url('../images/skin/aside_cate_on.png') no-repeat 97%;background-size:auto 8px;} #aside ul.slidemenu .depth1_li .depth {padding:15px 15px 30px;display:none;border:0;border-bottom:0;} #aside ul.slidemenu .depth1_li .depth li {padding-left:0;position:relative;} #aside ul.slidemenu .depth1_li .depth li + li {margin-top:26px;} #aside ul.slidemenu .depth1_li .depth li a {font-size:16px;line-height:16px;color:#666;position:relative;padding-left:15px;} #aside ul.slidemenu .depth1_li .depth li:before {content:"";display:block;width:2px;height:2px;position:absolute;left:0;top:8px;background:#666;} #aside .language li{width:90px; height:40px; border-radius:20px; text-align:center; line-height:40px; border:1px solid #adadad; color:#333; margin:0 auto; height:100%; overflow:hidden;cursor:pointer;} #aside .language li a{color:#333; font-size:16px; font-family:'Montserrat'; font-weight:400;} #aside .language > li > span{font-size:16px; color:#333; font-family:'Montserrat'; font-weight:400; display:block;} #aside .language > li > span:after{display:inline-block; content:''; background:url('../images/skin/language_btn_on.png') no-repeat center center; width:12px; height:7px; vertical-align:middle; margin-bottom:2px; margin-left:8px;} #aside .language > li ul{display:block; border-radius:0; border-top:1px solid #adadad;} #aside .language li ul{display:none;} #aside .language li ul li{border:0 !important;} #aside .language li ul li a{} @media only screen and (max-width:1430px) { #wrap.main_index #header .header_cont{/*width:1240px; margin:0 auto; position:relative;*/} #header .hd_logo{left:30px;} #header .hd_right{right:30px;} } @media only screen and (max-width:1300px) { #header .hd_lnb > li {padding:0 30px;left:3%;position:relative;} } @media only screen and (max-width:1257px) { #header .hd_lnb li, #header .hd_lnb li a{font-size:17px;} #wrap.main_index #header .header_cont{width:100%;} #header .hd_logo{left:15px;} #header .hd_right{right:15px;} } @media only screen and (max-width:1100px) { #header .hd_lnb > li{padding:0 20px;} #header .hd_lnb li, #header .hd_lnb li a{font-size:16px} } @media only screen and (max-width:1023px) { #header {height:75px;} #header .hd_logo {left:15px;} #header .hd_lnb, #header .hd_right .hd_gnb {display:none;} #header .hd_right {right:15px;} #header.hd_main .hd_lnb{padding-top:0;} #wrap.main_index #header, #wrap #header{padding:0;} #wrap.main_index #header .header_cont{position:static;} #wrap.main_index #header.hd_main{height:80px; padding:0;} #wrap.main_index #header.hd_main.on{background:#fff;} #wrap.main_index #header.hd_main.on .hd_logo a{background:url('../images/skin/hd_logo_on.png') no-repeat left;} #wrap.main_index #header{background:rgba(255, 255, 255, 0);} #wrap.main_index #header:after{display:none;} #wrap.main_index #header .hd_logo a{background:url('../images/skin/hd_logo.png') no-repeat left; background-size:auto 100%;} #wrap.main_index #header.on{background:#fff; border-bottom:1px solid #eee;} #wrap.main_index #header.on .hd_logo a{background:url('../images/skin/hd_logo_on.png') no-repeat left; background-size:auto 100%;} #header .hd_right .language{display:none;} #header .hd_right .menu-trigger{display:block; top:7px;} #wrap.main_index #header.on .hd_right .menu-trigger span{background:#333;} } @media only screen and (max-width: 980px) { } @media only screen and (max-width:860px) { } @media only screen and (max-width:767px) { } @media only screen and (max-width:640px) { #wrap #header{height:65px;} #header {height:57px;} #header .hd_logo {} #header .hd_right {} #aside ul.slidemenu .depth1_li .depth1_a{font-size:19px;} } @media only screen and (max-width:479px) { #aside {right: -80%;width:80%;} #aside ul.slidemenu .depth1_li .depth1_a{font-size:17px;} } @media only screen and (max-width:431px) { #wrap.main_index #header{height:70px;} #header .hd_logo{width:132px; height:28px;} #header .hd_right .menu-trigger{ width:25px; height:23px;} #aside ul.slidemenu .depth1_li .depth1_a{font-size:16px;} #aside ul.slidemenu .depth1_li .depth .depth2_li a{font-size:15px; width:calc(100% - 10px);} #aside ul.slidemenu .depth1_li .depth li + li{margin-top:15px;} #aside ul.slidemenu .depth1_li .depth{padding:5px 15px 20px;} } @media only screen and (max-width:395px) { #aside ul.slidemenu .depth1_li .depth1_a{font-size:15px;} #aside ul.slidemenu .depth1_li .depth .depth2_li a{font-size:14px;} #aside .language li{border-radius:15px;line-height:38px; width:80px;} #aside .language li, #aside .language > li > span, #aside .language li a{font-size:15px;} } @media only screen and (max-width:375px) { #aside ul.slidemenu .depth1_li .depth1_a{font-size:14px;} } @media only screen and (max-width:320px) { #aside ul.slidemenu .depth1_li .depth1_a, #aside ul.slidemenu .depth1_li .depth .depth2_li a{font-size:13px;} } /*─────────────────────────────────────────────────────────── FOOTER | outline/footer.html ───────────────────────────────────────────────────────────*/ #footer{} #footer .ft_inner {position:relative;width:calc(100% - 80px);margin:0 auto;overflow:hidden;padding:40px 0 70px;font-size:0;border-top:1px solid #ddd;} #footer .ft_inner .logo, #footer .ft_inner .info {display:inline-block;vertical-align:top;} #footer .ft_inner .logo {} #footer .ft_inner .logo h2 {font-size:20px;line-height:1;color:#333;font-weight:500;} #footer .ft_inner .logo p {font-size:12px;line-height:1;margin-top:1em;color:#333;} #footer .ft_inner .info {margin-left:180px;font-size:12px;line-height:1;color:#333;} #footer .ft_inner .info p {font-size:inherit;line-height:inherit;color:inherit;} #footer .ft_inner .info p + p {margin-top:1em;} #footer .footer_nav {margin:0 0 50px;} #footer .footer_nav li {display:inline-block;vertical-align:middle;margin:0 5px;} #footer .footer_nav li a {} @media only screen and (max-width:1380px) { #footer .ft_inner {width:calc(100% - 30px);padding:30px 0 60px;} } @media only screen and (max-width:1023px) { } @media only screen and (max-width:860px) { #footer .ft_inner .info {margin-left:5%;} } @media only screen and (max-width:767px) { } @media only screen and (max-width:640px) { #footer .ft_inner .logo, #footer .ft_inner .info {display:block;} #footer .ft_inner .info {margin-left:0;margin-top:12px;} } @media only screen and (max-width:479px) { } /*─────────────────────────────────────────────────────────── 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.html ───────────────────────────────────────────────────────────*/ .main_index #container {padding-top:0 !important;} .main {width:100%;overflow:hidden;} .main .w_set {width:100%;box-sizing:border-box;max-width:1260px;padding:0;margin:0 auto;} .main .tit {display:block;font-size: 40px;line-height: 1;color: #333;text-align:center;margin-top: 3em;margin-bottom: 2em;} .main .btn_more {display: inline-block;padding: 21px 29px;position: relative;vertical-align: middle;font-size: 16px;line-height: 1;border: 1px solid transparent;border-radius: 0px;background: transparent;overflow: hidden;-webkit-transition: color .55s cubic-bezier(.52,.08,.18,1);transition: color .55s cubic-bezier(.52,.08,.18,1);border:1px solid #333;background:#fff;} .main .btn_more span {position: relative;color:#333;transition:all .2s;} .main .btn_more:before {content: '';display: block;width: 120%;height: 100%;position: absolute;left: 0;top: 0;-webkit-transform-origin: right top;-ms-transform-origin: right top;transform-origin: right top;-webkit-transform: translateX(-101%) skewX(-17.62deg);-ms-transform: translateX(-101%) skewX(-17.62deg);transform: translateX(-101%) skewX(-17.62deg);-webkit-transition: -webkit-transform .55s cubic-bezier(.52,.08,.18,1);transition: -webkit-transform .55s cubic-bezier(.52,.08,.18,1);transition: transform .55s cubic-bezier(.52,.08,.18,1);transition: transform .55s cubic-bezier(.52,.08,.18,1), -webkit-transform .55s cubic-bezier(.52,.08,.18,1);-webkit-backface-visibility: hidden;backface-visibility: hidden;background:#333;} .main .btn_more:hover span {color:#fff;} .main .btn_more:hover:before {-webkit-transform: translateX(0) skewX(-17.62deg);-ms-transform: translateX(0) skewX(-17.62deg);transform: translateX(0) skewX(-17.62deg);-webkit-transform-origin: left top;-ms-transform-origin: left top;transform-origin: left top;} /* visual */ .main_visual {position:relative;width:100%;min-width:1200px;margin:0;height:798px;background:#000;} .main_visual .slick-slide {overflow:hidden;position:relative;text-align:center;height:798px;} .main_visual .slick-slide a {display:inline-block;height:100%;width: 100%;max-width:100%;margin:0 auto;text-align:Center;position:absolute;left: 0;top:0;outline:0;background-position: center;background-size:cover !important; z-index:9;} .main_visual .slick-slide .img_wrap{position:absolute; left:0; top:0; margin:0 auto; width:100%; height:100%; z-index:-1; background-size:cover; background-position:center;} .main_visual .slick-slide.active{} .main_visual .slick-slide img {display:inline-block;height:auto;width:100%;max-width:1920px;} .main_visual .txt_box {text-align:left;transform:translate(-50%, -50%);position:absolute;left:50%;top:43%;font-size: 0; margin-left:15px;} .main_visual .txt_box p, .main_visual .txt_box b, .main_visual .txt_box span {display:block;text-align:left;color:#fff;font-family: 'Noto Sans KR';} .main_visual .txt_box p {font-size: 50px; line-height: 1.6; color: #fff; margin-bottom:20px;} .main_visual .txt_box b {font-size: 79px; font-weight: bold; line-height: 1;} .main_visual .txt_box span {font-size:24px;line-height:36px;font-weight: 300;} .main_visual .visual_btn_wrap {position:absolute;left: -10px;bottom: 77px;overflow:hidden;width: 100%;text-align: center;} .main_visual .visual_btn_wrap .control_btn, .main_visual .visual_btn_wrap .slider-progress-wrap, .main_visual .visual_btn_wrap .slide_count {display:inline-block;vertical-align:middle;} .main_visual .visual_btn_wrap .control_btn {font-size:0;} .main_visual .visual_btn_wrap .control_btn #pause-btn, .main_visual .visual_btn_wrap .control_btn .slick-arrow {font-size:0;display:inline-block;vertical-align:middle;height: 20px;} .main_visual .visual_btn_wrap .control_btn #pause-btn {width: 35px;background:url('../images/skin/visual_sld_pause.png') no-repeat center;margin-right: 15px; position:relative; right:-5px;} .main_visual .visual_btn_wrap .control_btn .slick-arrow {width: 32px;} .main_visual .visual_btn_wrap .control_btn .slick-prev {background: url('../images/skin/visual_sld_prev.png') no-repeat left;} .main_visual .visual_btn_wrap .control_btn .slick-next {background: url('../images/skin/visual_sld_next.png') no-repeat right;} .main_visual .visual_btn_wrap .menu_btn {font-size:0;float:right;background: #222222;width: 600px;} .main_visual .visual_btn_wrap .slider-progress-wrap {width: 1040px;transition:all 0.3s;z-index:5;margin:0 auto;padding:0;text-align:center;font-size: 0;margin-right: 45px;} .main_visual .visual_btn_wrap .slider-progress-wrap .slider-progress {width: 100%;background:rgba(255,255,255,0.4);display: inline-block;vertical-align: middle;} .main_visual .visual_btn_wrap .slider-progress-wrap .slider-progress .progress {height:2px;background:#3c49f4;width: 0;} .main_visual .visual_btn_wrap .slider-progress-wrap .slider-progress .progress.active {width:100%;} .main_visual .visual_btn_wrap .slide_count {color:#fff;font-size:14px;} .main_visual .visual_btn_wrap .slide_count span {font-size:inherit;color:inherit; opacity:0.5; font-weight:300;} .main_visual .visual_btn_wrap .slide_count span.current{opacity:1;} .main_visual .visual_btn_wrap .slide_count span.current:before{display:inline-block; content:'0'; font-size:inherit; color:inherit;} .main_visual .slick-dots {width: 50px;box-sizing: border-box;} .main_visual .slick-dots li {opacity:0;} .main_visual .slick-dots li.slick-active {opacity:1;} .main_visual .slick-dots li button {font-size:16px;line-height: 16px;color:#fff;font-weight: 600;} .main_visual .slick-counter span {display:inline-block;vertical-align: top;letter-spacing:-1px;} .main_visual .slick-counter, .main_visual .slick-counter span {} body #fp-nav{top:45.5%;} body #fp-nav.fp-right{right:107px;} body #fp-nav ul li, body .fp-slidesNav ul li{margin:0; width:3px; height:40px;} body #fp-nav ul li a, body .fp-slidesNav ul li a{height: 40px;width: 1px;background:#aea59e;} body #fp-nav ul li a.active{width:3px; background: #3c49f4; left:-1px;} body #fp-nav ul li a.active span, body .fp-slidesNav ul li a.active span, body #fp-nav ul li:hover a.active span, body .fp-slidesNav ul li:hover a.active span{width: auto;height:auto;margin:0;display: block;} body #fp-nav ul li:hover a span, body .fp-slidesNav ul li:hover a span{width:auto;height:auto;margin:0;} body #fp-nav ul li a span, body .fp-slidesNav ul li a span{width:auto; height:auto; margin:0;} body #fp-nav ul li a span.fp-sr-only, body #fp-nav ul li a.active span.fp-sr-only{text-align: right;clip:auto;background:none;color:#beb9b4;top:12px;right: -120px;border-radius:0;font-size:14px;font-family: 'GmarketSansMedium';line-height:1;margin:0;transform: translateX(-139px); transition:all 0.4s;} body #fp-nav ul li:first-child a span.fp-sr-only{font-family: 'GmarketSansLight';} body #fp-nav ul li:first-child a.active span.fp-sr-only{font-family:'GmarketSansLight'; color:#fff;} .fp-viewing-secondPage #fp-nav ul li a.active span.fp-sr-only, .fp-viewing-3rdPage #fp-nav ul li a.active span.fp-sr-only, .fp-viewing-4thPage #fp-nav ul li a.active span.fp-sr-only{color:#333; transition:all 0.4s;} body #fp-nav ul li a span.fp-sr-only{opacity:1;} body #fp-nav ul li a.active span.fp-sr-only{opacity:1;} body #fp-nav ul li:hover .fp-tooltip, body #fp-nav.fp-show-active a.active + .fp-tooltip{opacity:0; font-family:'GmarketSansLight';} /*body #fp-nav ul li a span + span:after{position:absolute; font-size:14px; font-family:'GmarketSansLight'; color:#beb9b4; top:-10px; right:18px;} body #fp-nav ul li:nth-child(1) a span + span:after{content:'MAIN';} body #fp-nav ul li:nth-child(2) a span + span:after{content:'02';} body #fp-nav ul li:nth-child(3) a span + span:after{content:'03';} body #fp-nav ul li:nth-child(4) a span + span:after{content:'04';} body #fp-nav ul li:nth-child(5) a span + span:after{content:'05';} body #fp-nav ul li a.active span + span:after{display:none;}*/ /* visual active */ /*.main_visual .slick-slide a {transition:transform 2s ease-in-out, opacity 2s ease-in-out;transform:scale(1) rotate(0.003deg);opacity: .8;} .main_visual .slick-slide.slick-active a {transform:scale(1.2) rotate(0.003deg);opacity: 1;}*/ @keyframes zoomInimg{from{transform:scale3d(1,1,1);} to{transform:scale3d(1.2,1.2,1.2);}} .main_visual .slick-slide.slick-active .img_wrap{ animation: zoomInimg; animation-duration:3s; transform:scale3d(1.2,1.2,1.2); transition:all 0.8 ease;} /* main_txt */ .main_txt {text-align: center;} .main_txt .top_txt {text-align:center;} .main_txt .top_txt span, .main_txt .top_txt strong {display:block;line-height:1;} .main_txt .top_txt span {font-size:15px;color:#ccc;padding-top: 7em;font-weight: 700;} .main_txt .top_txt strong {margin:0.75em 0 1.25em;font-size:40px;color:#444;} .main_txt .top_txt p {font-size:17px;line-height:2.1;font-weight: 770;} .main_txt .btm_txt {margin: 80px 0 0;} .main_txt .btm_txt ul {font-size:0;} .main_txt .btm_txt ul li {display:inline-block;vertical-align:top;width:33.3%;box-sizing:border-box;text-align: center;} .main_txt .btm_txt ul li + li {border-left: 1px solid #ddd;} .main_txt .btm_txt ul li strong {padding-top: 7.5em;padding-bottom: 1.2em;font-size: 20px;line-height:1;color:#444;display: block;} .main_txt .btm_txt ul li:nth-of-type(1) strong {background:url('../images/skin/main_txt_ico01.png') no-repeat center 7px;} .main_txt .btm_txt ul li:nth-of-type(2) strong {background:url('../images/skin/main_txt_ico02.png') no-repeat center 7px;} .main_txt .btm_txt ul li:nth-of-type(3) strong {background:url('../images/skin/main_txt_ico03.png') no-repeat center 7px;} .main_txt .btm_txt ul li p {font-size:14px;line-height: 1.7;color:#949494;} .main_txt .link {display:inline-block;font-size:12px;line-height:1;color:#333;background: url('../images/skin/main_txt_more.png') no-repeat right;padding-right: 50px;margin: 7em 0 0;} #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 .txtani, .main_visual .slick-slide.slick-active .txtani {animation: step02 1.0s ease-in-out;animation-fill-mode:forwards;animation-delay: 0.6s;} .main_visual .visual_all_txt h3.txtani{} .main_visual .visual_all_txt p.txtani{} .main_visual .slick-slide.slick-active p.txtani {animation-delay: 0.4s;} .main_visual .slick-slide.slick-active b.txtani {animation-delay: 0.6s;} #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 step01{ 0%{transition:transform 5s ease-in-out, opacity 5s ease-in-out;transform:scale(1.2) rotate(0.003deg);opacity: .9;} 100%{transition:transform 5s ease-in-out, opacity 5s ease-in-out;transform:scale(1) rotate(0.003deg);opacity:1;} } @keyframes step02{ 0%{opacity:0;} 100%{opacity:1;transform: translate(0,0);-webkit-transform: translate(0,0);-moz-transform: translate(0,0);-ms-transform: translate(0,0);-o-transform: translate(0,0);} } /* 메인 컨텐츠 */ #wrap .fp-tableCell{} #wrap .iScrollVerticalScrollbar.iScrollLoneScrollbar{display:none;} .main_tit{text-align:center;} .main_tit > h3{font-family: 'Montserrat';font-size: 40px;font-weight: bold;color: #222;letter-spacing: -1px;margin-bottom: 14px; opacity:0;transform:translateY(-50px); transition:all 0.4s ease-in;} .active .main_tit > h3{opacity:1; transform:translateY(0px); transition-delay:0.2s;} .main_tit > h4{font-family: 'SourceHanSansKR'; font-size: 31px; font-weight: normal; line-height: 1.4; color: #333; margin-bottom:31px;} .main_tit > h4 strong{font-size:37px; color: #1c2271; font-weight:bold;} .main_tit > p{font-size: 16px; color: #888; margin-bottom:37px; opacity:0;transform:translateY(-50px); transition:all 0.4s ease-in;font-family:'Noto Sans KR', 'Malgun Gothic', '맑은 고딕', dotum, sans-serif;} .active .main_tit > p{opacity:1;transform:translateY(0px);} #section2 .solution, #section3 .cloud{padding:5vh 0 0;} #section4 .contact{padding:17.8vh 0 0;} .main_more_btn{position:relative; display:inline-block; font-family: 'Montserrat', 'Noto Sans KR'; font-size: 14px; font-weight: 300; text-align: center; color: #fff; width:140px; height:48px; line-height:48px; box-sizing:border-box; border:1px solid rgba(255,255,255,0.5); z-index:1; transition:all 0.6s;} .main_more_btn:hover{color:#333; font-weight:500; transition:all 0.6s;} .main_more_btn:after{position:absolute; content:''; width:0; height:100%; background:#fff; top:0; left:0; transition:all 0.6s; z-index:-1;} .main_more_btn:hover:after{width:100%; transition:all 0.6s;} /* section2 */ #section2{position:relative; z-index:1;} #section2:before{position:absolute; content:''; z-index:-1; width:1400px; height:500px; background:url('../images/skin/main_sec2_bg.jpg') no-repeat center center; left:50%; margin-left:-969px; bottom:50%; margin-bottom:-412px;} #section2 .solution .sol_con{width:100%; height:56.6vh;} #section2 .solution .sol_con > ul{font-size:0; width:100%; height:100%;} #section2 .solution .sol_con > ul li{display:inline-block; position:relative; width:200px; height:56.6vh; transition:all 0.4s;} #section2 .solution .sol_con > ul li.on{width:840px;} #section2 .solution .sol_con .txt_wrap{text-align:center;position:absolute;left:50%; top:98%; transform:translate(-50%, -50%); transition:all 0.4s; z-index:9; opacity:1; transition:all 0.6s; width:100%;} #section2 .solution .sol_con li:first-child .txt_wrap{top:96%;} #section2 .solution .sol_con .txt_wrap > p{font-size: 24px;font-weight: bold;color: #fff;margin-bottom: 42px; opacity:0; transform:translateY(100px); transition:all 0.6s; padding:0 10px;} #section2.active .solution .sol_con .txt_wrap > p{opacity:1; transform:translateY(0); transition:all 0.4s; transition-delay:0.8s;} #section2 .solution .sol_con .txt_wrap .main_more_btn{opacity:0; transition:all 0.4s;} #section2 .solution .sol_con > ul li.on .txt_wrap{top: 49.5%;} #section2 .solution .sol_con > ul li.on .txt_wrap .main_more_btn{opacity:0; transition:all 0.4s;} #section2.active .solution .sol_con > ul li.on .txt_wrap .main_more_btn{opacity:1; transition:all 0.4s;} #section2 .solution .sol_con .img_wrap{width:100%; height:100%; opacity:0;transform:translateY(100px); transition:all 0.6s;} #section2.active .solution .sol_con .img_wrap{width:100%; height:100%; opacity:1;transform:translateY(0); transition:all 0.6s; transition-delay:0.4s;} #section2 .solution .sol_con .img_wrap img{width:100%; height:100%; object-fit:cover;} /* section3 */ #section3{position:relative; z-index:1;} #section3:before{position:absolute; content:''; z-index:-1; width:1400px; height:500px; background:url('../images/skin/main_sec2_bg.jpg') no-repeat center center; right:50%; margin-right:-969px; bottom:50%; margin-bottom:-412px;} #section3 .cloud .clo_con{position:relative;} #section3 .cloud .clo_con .txt_wrap{width:100%; text-align:center;position:absolute;left:50%; top:50%; transform:translate(-50%, -50%); z-index:9;} #section3 .cloud .clo_con .txt_wrap > h4{font-size: 41px; font-weight: bold; line-height: 1; color: #fff; margin-bottom:69px; opacity:0; transform:translateY(100px); transition:all 0.4s; transition-delay:0.2s; padding:0 10px;} #section3.active .cloud .clo_con .txt_wrap > h4{opacity:1; transform:translateY(0); transition:all 0.4s; transition-delay:0.2s;} #section3 .cloud .clo_con .txt_wrap .main_more_btn{border:1px solid rgba(255,255,255,0.4); opacity:0; transform:translateY(100px); transition:all 0.6s;} #section3.active .cloud .clo_con .txt_wrap .main_more_btn{opacity:1; transform:translateY(0); transition:all 0.6s;} #section3 .cloud .clo_con .img_wrap{width:100%; height:56.6vh; opacity:0; transform:translateY(100px); transition:all 0.6s;} #section3.active .cloud .clo_con .img_wrap{width:100%; height:56.6vh; opacity:1; transform:translateY(0); transition:all 0.6s;} #section3 .cloud .clo_con .img_wrap img{width:100%; height:100%; object-fit:cover;} /* section4 */ #section4{} #section4 .contact .main_tit > h3{margin-bottom:22px;} #section4 .contact .main_tit > h4{letter-spacing:-1px; opacity:0; transform:translateY(-50px); transition:all 0.4s;} #section4.active .contact .main_tit > h4{opacity:1; transform:translateY(0); transition:all 0.4s; transition-delay:0.4s;font-family:'Noto Sans KR', 'Malgun Gothic', '맑은 고딕', dotum, sans-serif;} #section4.active .contact .main_tit > h4 strong{font-family:inherit;} #section4 .contact .main_tit > p{color:#666;} #section4.active .contact .main_tit > p{transition-delay:0.6s;} #section4 .contact .main_tit .main_more_btn{color:#333; font-weight:500; border:1px solid rgba(51,51,51,0.34); margin-bottom:125px; opacity:0; transform:translateY(100px); transition:all 0.4s;} #section4.active .contact .main_tit .main_more_btn{opacity:1; transform:translateY(0); transition:all 0.4s;} #section4 .contact .main_tit .main_more_btn:after{background:#1c2271;} #section4 .contact .main_tit .main_more_btn:hover{color:#fff; border:1px solid #1c2271;} @media only screen and (max-width:1700px) { body #fp-nav.fp-right{right:25px;} } @media only screen and (max-width:1380px) { .main_visual {min-width:100%;} .main_visual .txt_box p{font-size:40px;} .main_visual .txt_box b {font-size:60px;} .main_visual .txt_box span {font-size:22px;line-height:32px;} } @media only screen and (max-width:1300px) { .main_visual .visual_btn_wrap{left:0;} .main_visual .visual_btn_wrap .slider-progress-wrap{width:calc(100% - 250px);} } @media only screen and (max-width:1257px) { #section2 .solution .sol_con > ul li{width:20%;} #section2 .solution .sol_con > ul li.on{width:60%;} #section3 .cloud .clo_con .txt_wrap > h4{font-size:37px;} } @media only screen and (max-width:1023px) { .main_tit > h3{font-size:37px;opacity:1; transform:translateY(0);} .main_tit > h4{font-size:25px;opacity:1; transform:translateY(0);} .main_tit > h4 strong{font-size:31px;} .main_tit > p{opacity:1; transform:translateY(0);} #section2 .solution .sol_con .txt_wrap > p{opacity:1; transform:translateY(0);} #section2 .solution .sol_con > ul li.on .txt_wrap .main_more_btn{opacity:1;} #section2 .solution{padding:100px 0 0;} #section2 .solution .sol_con .img_wrap{opacity:1; transform:translateY(0);} #section3 .cloud{padding:150px 0 0;} #section4 .contact{padding:150px 0 0;} #section2:before{left:auto; right:65px; margin-left:0; bottom:0; margin-bottom:-50px; height:58.8vh;} #section3:before{right:auto; left:65px; margin-right:0; bottom:0; margin-bottom:-50px; height:58.8vh;} #section3 .cloud .clo_con .txt_wrap > h4{font-size:31px; opacity:1; transform:translateY(0);} #section3 .cloud .clo_con .txt_wrap .main_more_btn{opacity:1; transform:translateY(0);} #section3 .cloud .clo_con .img_wrap{opacity:1; transform:translateY(0);} #section4 .contact .main_tit > h4{opacity:1; transform:translateY(0);} #section4 .contact .main_tit .main_more_btn{opacity:1; transform:translateY(0);} } @media only screen and (max-width: 860px) { .main_visual .txt_box{top:48%;} .main_visual .txt_box p{margin-bottom:10px; font-size:35px;} .main_visual .txt_box b{font-size:50px;} #section2 .solution .sol_con{height:auto;} #section2 .solution .sol_con > ul li{width:100%;} #section2 .solution .sol_con > ul li + li{margin-top:20px;} #section2 .solution .sol_con .txt_wrap{top:49.5%;} #section2 .solution .sol_con .txt_wrap .main_more_btn{opacity:1;} #section2 .solution .sol_con > ul li.on{width:100%;} #section3 .cloud .clo_con .txt_wrap > h4{font-size:24px; margin-bottom:45px;} } @media only screen and (max-width:767px) { .main_visual .txt_box p{font-size:31px;} .main_visual .txt_box b{font-size:45px;} .main_tit > h3{font-size:4.2vw;} .main_tit > h4{font-size:3.3vw; letter-spacing:-1px;} .main_tit > h4 strong{font-size:4.1vw;} } @media only screen and (max-width: 680px) { .main_visual .txt_box p{font-size:4.5vw;} .main_visual .txt_box b{font-size:7vw;} #section3 .cloud .clo_con .txt_wrap > h4{font-size:4.5vw; line-height:125%;} } @media only screen and (max-width:479px) { .main_visual, .main_visual .slick-slide{height:600px !important;} .main_visual .visual_btn_wrap{bottom:45px} .main_visual .visual_btn_wrap .slider-progress-wrap{margin-right:15px; width:calc(100% - 210px);} .main_tit > h3{font-size:5vw; line-height:145%;} .main_tit > h4{font-size:3.5vw;} .main_tit > h4 strong{font-size:5vw;} .main_tit > p{font-size:13px;} .main_more_btn{width:130px; height:46px; line-height:46px;} #section2 .solution{padding:50px 0 0;} #section2 .solution .sol_con .txt_wrap > p{/*font-size:21px;*/} #section3 .cloud{padding:100px 0 0;} #section3 .cloud .clo_con .txt_wrap > h4{font-size:24px; padding:0 10px;} #section4 .contact{padding:100px 0 0;} #section4 .contact .main_tit .main_more_btn{margin-bottom:70px;} .main_more_btn:hover:after{display:none;} .main_more_btn:hover{color:#fff; border:1px solid #fff;} #section4 .contact .main_tit .main_more_btn:hover{color:#333; border:1px solid rgba(51,51,51,0.34);} } @media screen and (max-width:395px) { .main_visual, .main_visual .slick-slide{height:450px !important;} .main_visual .visual_btn_wrap{bottom:30px} .main_tit > p{font-size:13px;} .main_more_btn{width:120px; height:44px; line-height:44px;} #section2 .solution .sol_con .txt_wrap > p, #section3 .cloud .clo_con .txt_wrap > h4{font-size:19px; padding:0 10px;} #section4 .contact .main_tit > h4{font-size:14px;} } @media screen and (max-width:320px) { #section4 .contact .main_tit > h4{font-size:13px;} .main_tit > p{font-size:12px;} } /*─────────────────────────────────────────────────────────── FOOTER | outline/footer.html ───────────────────────────────────────────────────────────*/ .footer{background:#222;padding: 40px 0 38px;} .footer .ftr_con{position:relative;border-bottom:1px solid #4e4e4e;padding-bottom: 40px;} .footer .ftr_con .ftr_logo{position:absolute;left:0;top: 5px;} .footer .ftr_con .ftr_logo.m_logo{display:none;} .footer .ftr_con .ftr_logo h2{} .footer .ftr_con .ftr_nav{text-align:center;padding-right: 0;} .footer .ftr_con .ftr_nav dl{display:inline-block; vertical-align:top; text-align:left;} .footer .ftr_con .ftr_nav dl + dl{margin-left:55px;} .footer .ftr_con .ftr_nav dl.last{margin-left:120px;} .footer .ftr_con .ftr_nav dt{font-size:16px; color:#fff; font-weight:400; margin-bottom:15px;} .footer .ftr_con .ftr_nav dd{} .footer .ftr_con .ftr_nav ul{} .footer .ftr_con .ftr_nav li{} .footer .ftr_con .ftr_nav a{font-size:14px; font-weight:300; color:#aaa; line-height:26px;font-family:'Noto Sans KR', 'Malgun Gothic', '맑은 고딕', dotum, sans-serif;} .footer .ftr_con .biz_logo{position:absolute;top: -3px;right: 30px;} .footer .ftr_info{padding: 34px 0 0;} .footer .ftr_info .info_con{display:flex;align-items:flex-start;justify-content:flex-start;padding-left: 0;margin-bottom: 1px;} .footer .ftr_info .info_con dl{display:table; } .footer .ftr_info .info_con dl + dl{margin-left:15px;} .footer .ftr_info .info_con dt, .footer .ftr_info .info_con dd{display:table-cell; font-size:12px; font-weight:400; color:#888;font-family:'Noto Sans KR', 'Malgun Gothic', '맑은 고딕', dotum, sans-serif;} .footer .ftr_info .info_con dt{padding-right:5px;} .footer .ftr_info .info_con dd{} .footer .ftr_info .info_con dd.ftc_btn{cursor:pointer;} .footer .ftr_info .copyright{padding-left: 0;font-size:12px;color:#aaa;margin-top: 17px;} @media screen and (max-width:1257px) { .footer .ftr_con .ftr_nav{padding-right:0; padding-left:100px;} .footer .ftr_con .biz_logo{right:0;} .footer .ftr_info .info_con{padding-left:0; justify-content:center; flex-wrap:wrap;} .footer .ftr_info .copyright{text-align:center; padding-left:0;} } @media screen and (max-width:1100px) { .footer .ftr_con .ftr_nav dl + dl{margin-left:30px;} .footer .ftr_con .ftr_nav dt{font-size:15px;} .footer .ftr_con .ftr_nav a{font-size:13px;} } @media screen and (max-width:1023px) { .footer .ftr_con .ftr_logo.pc_logo{display:none;} .footer .ftr_con .ftr_logo.m_logo{display:block;} .footer .ftr_con .ftr_logo{position:relative; text-align:center; margin-top:40px; top:0;} .footer .ftr_con .ftr_nav{padding-left:0;} .footer .ftr_con .biz_logo{position:relative; text-align:center; top:0; margin-top:40px;} } @media screen and (max-width:700px) { .footer .ftr_con .ftr_nav dl + dl{margin-left:15px;} } @media screen and (max-width:655px) { .footer .ftr_con .ftr_nav dt{font-size:14px;} .footer .ftr_con .ftr_nav a{font-size:12px;} } @media screen and (max-width:610px) { .footer .ftr_con .ftr_nav{display: flex;justify-content: center;align-items: flex-start;} .footer .ftr_con .ftr_nav dl{width:100%; padding-right:5px; box-sizing:border-box;} .footer .ftr_con .ftr_nav dl + dl{margin-left:0;} .footer .ftr_con .ftr_nav a{line-height:135%; display:block; margin-bottom:10px;} } @media screen and (max-width:598px) { .footer .ftr_info .info_con:first-child dl:nth-child(n+3):nth-child(-n+4){margin-left:0;} } @media screen and (max-width:479px) { .footer .ftr_con .ftr_nav dt{font-size:13px;} .footer .ftr_con .ftr_nav a{font-size:11.5px;} } @media screen and (max-width:431px) { } @media screen and (max-width:320px) { } /*─────────────────────────────────────────────────────────── ceo인사말 | company/greetings.html ───────────────────────────────────────────────────────────*/ .sub_greeting {font-size: 0;} .sub_greeting .greeting_left, .sub_greeting .greeting_right {float: left;} .sub_greeting .greeting_left {position: relative; width: 35.8%; min-width: 280px; margin-top: 14px;} .sub_greeting .greeting_left > div {width: 100%; padding-bottom: 144.5%;} .sub_greeting .greeting_left .greeting_img_bg {position: absolute; left: 20px; top: 20px; background: #f5f5f5;} .sub_greeting .greeting_left .greeting_img {position: relative; background: url(../images/sub/greeting_img.jpg) no-repeat center; background-size: 100%; z-index: 1;} .sub_greeting .greeting_right {width: calc(100% - 35.8%); box-sizing: border-box; padding-left: 110px;} .sub_greeting .greeting_right .greeting_tit h3 {font-size: 33px; font-weight: 500; color: #333; letter-spacing: -0.04em; line-height: 1.38; word-break: keep-all;} .sub_greeting .greeting_right .greeting_tit h3 span {display: block; font-size: 33px; color: #1b2272;} .sub_greeting .greeting_right .greeting_txt {padding-top: 22px;} .sub_greeting .greeting_right .greeting_txt p {display: block; word-break: keep-all; font-size: 15px; font-weight: 400; color: #666; line-height: 1.875; font-family: 'Noto Sans KR', 'Malgun Gothic', '맑은 고딕', dotum, sans-serif;} .sub_greeting .greeting_right .greeting_txt p + p {margin-top: 30px;} .sub_greeting .greeting_right .greeting_txt .greeting_ceo {margin-top: 80px; text-align: right;} .sub_greeting .greeting_right .greeting_txt .greeting_ceo strong {display: block; font-size: 16px; font-weight: 400; color: #666; line-height: 1.875; font-family: 'Noto Sans KR', 'Malgun Gothic', '맑은 고딕', dotum, sans-serif;} .sub_greeting .greeting_right .greeting_txt .signature_img {display: inline-block; width: 130px; height: 43px; margin-top: 40px; background: url(../images/sub/greeting_signature.jpg) no-repeat center; background-size: 100%;} @media screen and (max-width:1257px) { .sub_greeting .greeting_right {padding-left: 90px;} .sub_greeting .greeting_right .greeting_tit h3, .sub_greeting .greeting_right .greeting_tit h3 span {font-size: 31px;} } @media screen and (max-width:1080px) { .sub_greeting .greeting_right .greeting_tit h3, .sub_greeting .greeting_right .greeting_tit h3 span {font-size: 29px;} } @media screen and (max-width:1023px) { .sub_greeting .greeting_right {padding-left: 70px;} .sub_greeting .greeting_right .greeting_txt .greeting_ceo {margin-top: 60px;} .sub_greeting .greeting_right .greeting_txt .signature_img {width: 120px; margin-top: 30px;} } @media screen and (max-width:975px) { .sub_greeting .greeting_right .greeting_tit h3, .sub_greeting .greeting_right .greeting_tit h3 span {font-size: 24px;} } @media screen and (max-width:850px) { .sub_greeting .greeting_right {padding-left: 50px;} .sub_greeting .greeting_right .greeting_tit h3, .sub_greeting .greeting_right .greeting_tit h3 span {font-size:2.55vw;} .sub_greeting .greeting_right .greeting_txt p, .sub_greeting .greeting_right .greeting_txt .greeting_ceo strong {font-size: 13px;} } @media screen and (max-width:812px) { .sub_greeting .greeting_right {width: calc(100% - 280px);} } @media screen and (max-width:680px) { .sub_greeting .greeting_left, .sub_greeting .greeting_right {float: none;} .sub_greeting .greeting_right {width: 100%; padding-left: 0; padding-top: 60px;} .sub_greeting .greeting_right .greeting_tit h3, .sub_greeting .greeting_right .greeting_tit h3 span {font-size: 27px;} .sub_greeting .greeting_right .greeting_txt p + p {margin-top: 24px;} .sub_greeting .greeting_right .greeting_txt .greeting_ceo {margin-top: 40px;} .sub_greeting .greeting_right .greeting_txt .signature_img {width: 110px; margin-top: 20px;} } @media screen and (max-width:540px) { .sub_greeting .greeting_right .greeting_tit h3, .sub_greeting .greeting_right .greeting_tit h3 span{font-size:5vw;} } @media screen and (max-width:375px) { .sub_greeting .greeting_right .greeting_tit h3, .sub_greeting .greeting_right .greeting_tit h3 span{font-size:4.9vw;} } @media screen and (max-width:320px) { .sub_greeting .greeting_left {width: calc(100% - 20px); min-width: inherit;} } /*─────────────────────────────────────────────────────────── 사회공헌 | company/corporate.html ───────────────────────────────────────────────────────────*/ .sub_corporate .corporate_img {font-size: 0;} .sub_corporate .corporate_img li {display: inline-block; width: 50%; overflow: hidden;} .sub_corporate .corporate_img li img {width: 100%;} .sub_corporate .corporate_con {margin-top: 70px;} .sub_corporate .corporate_con .sub_con_tit {margin-bottom: 20px;} .sub_corporate .corporate_con .corporate_txt dt {margin-bottom: 12px; font-size: 20px; font-weight: 400; color: #333; letter-spacing: -0.04em;} .sub_corporate .corporate_con .corporate_txt dd p {font-size: 16px; color: #666; line-height: 1.62; /*letter-spacing: -0.04em;*/ font-family: 'Noto Sans KR', 'Malgun Gothic', '맑은 고딕', dotum, sans-serif;} .sub_corporate .corporate_con .corporate_txt dd p .respon_br {display: none;} .sub_corporate .corporate_con.share .corporate_txt dd ul {margin-top: 40px; font-size: 0;} .sub_corporate .corporate_con.share .corporate_txt dd li {display: inline-block; width: calc(33.33% - 20px); overflow: hidden; vertical-align: top;} .sub_corporate .corporate_con.share .corporate_txt dd li + li {margin-left: 29px;} .sub_corporate .corporate_con.share .corporate_txt dd li img {width: 100%;} .sub_corporate .corporate_con.support .corporate_txt dd p {display: inline-block; vertical-align: top;} .sub_corporate .corporate_con.support .corporate_txt dd ul {display: block; margin-top: 20px; margin-left: 0; vertical-align: top;} .sub_corporate .corporate_con.support .corporate_txt dd li {display: inline-block; height: 64px; vertical-align: top;} .sub_corporate .corporate_con.support .corporate_txt dd li + li {margin-left: 30px;} .sub_corporate .corporate_con.support .corporate_txt dd li img {height: 100%;} .sub_corporate .sub_table .sub_table_th {word-break: break-all;} .sub_corporate .corporate_con.contri > ul {margin-top: 40px; text-align: center;} .sub_corporate .corporate_con.contri > ul > li {display: inline-block; height: 94px; margin-bottom: 10px; box-sizing: border-box; padding: 0 10px;} .sub_corporate .corporate_con.contri > ul > li img {height: 100%;} @media screen and (max-width:1257px) { .sub_corporate .corporate_con.support .corporate_txt dd li {/*height: 60px;*/} .sub_corporate .corporate_con.contri > ul > li {height: 80px;} } @media screen and (max-width:1140px) { .sub_corporate .corporate_con.volunteer .corporate_txt dd p br {display: none;} .sub_corporate .corporate_con.volunteer .corporate_txt dd p .respon_br {display: block;} } @media screen and (max-width:1100px) { .sub_corporate .corporate_con.contri > ul > li {height: 75px;} } @media screen and (max-width:1023px) { .sub_corporate .corporate_con .sub_con_tit {margin-bottom: 18px;} .sub_corporate .corporate_con .corporate_txt dt {font-size: 18px;} .sub_corporate .corporate_con.share .corporate_txt dd li {width: calc(33.33% - 14px);} .sub_corporate .corporate_con.share .corporate_txt dd li + li {margin-left: 20px;} .sub_corporate .corporate_con.support .corporate_txt dd ul {/*margin-left: 30px;*/} .sub_corporate .corporate_con.support .corporate_txt dd li {/*height: 54px;*/} .sub_corporate .corporate_con.support .corporate_txt dd li + li {margin-left: 24px;} .sub_corporate .corporate_con.contri > ul > li {height: 70px; padding: 0 6px;} } @media screen and (max-width:940px) { .sub_corporate .corporate_con.support .corporate_txt dd li {height: 48px;} .sub_corporate .corporate_con.contri > ul {margin-top: 30px;} .sub_corporate .corporate_con.contri > ul > li {height: 65px;} } @media screen and (max-width:890px) { .nav_wrap .nav_box p.corporate br {display: none;} } @media screen and (max-width:860px) { .sub_corporate .corporate_con.contri > ul > li {height: 60px;} } @media screen and (max-width:840px) { .sub_corporate .corporate_con .sub_con_tit {margin-bottom: 16px;} .sub_corporate .corporate_con .corporate_txt dd p {font-size: 15px;} .sub_corporate .corporate_con.share .corporate_txt dd ul {margin-top: 30px;} .sub_corporate .corporate_con.share .corporate_txt dd li {width: calc(33.33% - 10px);} .sub_corporate .corporate_con.share .corporate_txt dd li + li {margin-left: 15px;} .sub_corporate .corporate_con.support .corporate_txt dd ul {margin-left: 20px;} .sub_corporate .corporate_con.support .corporate_txt dd li {height: 44px;} .sub_corporate .corporate_con.support .corporate_txt dd li + li {margin-left: 18px;} .sub_corporate .corporate_con.contri > ul {margin-top: 20px;} } @media screen and (max-width:760px) { .sub_corporate .corporate_con.volunteer .corporate_txt dd p .respon_br {display: none;} } @media screen and (max-width:745px) { .sub_corporate .corporate_con.support .corporate_txt dd ul {display: block; margin-top: 20px; margin-left: 0;} .sub_corporate .corporate_con.support .corporate_txt dd li {height: 42px;} } @media screen and (max-width:700px) { .sub_corporate .sub_table .sub_table_th {width: 100px;} } @media screen and (max-width:580px) { .sub_corporate .corporate_con.share .corporate_txt dd li {display: block; width: 100%} .sub_corporate .corporate_con.share .corporate_txt dd li + li {margin-left: 0; margin-top: 10px;} } @media screen and (max-width:640px) { .sub_corporate .corporate_img li {display: block; width: 100%;} .sub_corporate .corporate_con .sub_con_tit {margin-bottom: 14px;} .sub_corporate .corporate_con .corporate_txt dt {margin-bottom: 8px; font-size: 16px;} .sub_corporate .corporate_con .corporate_txt dd p {font-size: 14px;} .sub_corporate .corporate_con.support .corporate_txt dd li {height: 38px;} .sub_corporate .corporate_con.contri > ul > li {height: 55px;} } @media screen and (max-width:480px) { .sub_corporate .corporate_con.support .corporate_txt dd li {height: 32px;} .sub_corporate .corporate_con.support .corporate_txt dd li + li {margin-left: 12px;} } @media screen and (max-width:475px) { .sub_corporate .sub_table .sub_table_td {width: auto;} } @media screen and (max-width:431px) { .sub_corporate .corporate_con .corporate_txt dt{font-size:15px;} .sub_corporate .corporate_con .corporate_txt dd p{font-size:13px;} } @media screen and (max-width:431px) { .sub_corporate .corporate_con .corporate_txt dt{font-size:14px;} .sub_corporate .corporate_con .corporate_txt dd p{font-size:12px;} } @media screen and (max-width:362px) { .sub_corporate .corporate_con.support .corporate_txt dd li {height: 28px;} .sub_corporate .corporate_con.support .corporate_txt dd li + li {margin-left: 8px;} .sub_corporate .corporate_con.contri > ul > li {height: 50px;} } /*─────────────────────────────────────────────────────────── 화이트인재상 | recruitment/talent.html ───────────────────────────────────────────────────────────*/ .nav_wrap .nav_box p.talent span br.respon_br {display: none;} .sub_talent .talent_list {font-size: 0; padding-top: 18px;} .sub_talent .talent_list > li {display: inline-block; width: calc(50% - 20px); margin-right: 40px; margin-bottom: 70px; font-size: 0; vertical-align: top;} .sub_talent .talent_list > li:nth-child(2n) {margin-right: 0;} .sub_talent .talent_list > li:nth-child(n+3) {margin-bottom: 0;} .sub_talent .talent_list > li .icon {display: inline-block; width: 140px; height: 140px; box-sizing: border-box; padding-top: 94px; border-radius: 50%; text-align: center; vertical-align: top;} .sub_talent .talent_list > li .icon span {font-size: 14px; font-weight: 400; color: rgba(255,255,255,0.5); /*letter-spacing: -0.08em;*/} .sub_talent .talent_list > li:nth-child(1) .icon {background: #1c2271 url(../images/sub/talent_icon01.png) no-repeat; background-position: center 34%;} .sub_talent .talent_list > li:nth-child(2) .icon {background: #1c2271 url(../images/sub/talent_icon02.png) no-repeat; background-position: center 34%;} .sub_talent .talent_list > li:nth-child(3) .icon {background: #1c2271 url(../images/sub/talent_icon03.png) no-repeat; background-position: center 34%;} .sub_talent .talent_list > li:nth-child(4) .icon {background: #1c2271 url(../images/sub/talent_icon04.png) no-repeat; background-position: center 34%;} .sub_talent .talent_list > li .txt {display: inline-block; width: calc(100% - 140px); box-sizing: border-box; vertical-align: top;} .sub_talent .talent_list > li .txt dt {box-sizing: border-box; padding: 12px 0; padding-left: 18px; border-bottom: 1px solid #1c2271; font-size: 23px; font-weight: bold; color: #333;} .sub_talent .talent_list > li .txt dd {box-sizing: border-box; padding-left: 18px; padding-top: 20px;} .sub_talent .talent_list > li .txt li {position: relative; font-size: 15px; font-weight: 400; color: #666; line-height: 1.25; word-break: keep-all;} .sub_talent .talent_list > li .txt li + li {margin-top: 10px;} .sub_talent .talent_list > li .txt li:before {content: ""; position: absolute; left: -8px; top: 8px; width: 2px; height: 2px; background: #666; border-radius: 50%;} @media screen and (max-width:1257px) { .sub_talent .talent_list > li .icon {width: 130px; height: 130px; padding-top: 86px; background-size: auto 50px !important; background-position: center 32% !important;} .sub_talent .talent_list > li .txt {width: calc(100% - 130px);} } @media screen and (max-width:1023px) { .sub_talent .talent_list > li {margin-bottom: 60px;} .sub_talent .talent_list > li .icon {width: 120px; height: 120px; padding-top: 76px; background-size: auto 46px !important;} .sub_talent .talent_list > li .icon span{font-size:13px;} .sub_talent .talent_list > li .txt {width: calc(100% - 120px);} .sub_talent .talent_list > li .txt dt {padding: 10px 0; padding-left: 18px; font-size: 21px;} .sub_talent .talent_list > li .txt dd {padding-top: 18px;} } @media screen and (max-width:860px) { .nav_wrap .nav_box p.talent span br {display: none;} .nav_wrap .nav_box p.talent span br.respon_br {display: block;} .sub_talent .talent_list > li {margin-bottom: 50px;} .sub_talent .talent_list > li .icon {width: 110px; height: 110px; padding-top: 68px; background-size: auto 42px !important;} .sub_talent .talent_list > li .icon span {font-size: 12px;} .sub_talent .talent_list > li .txt {width: calc(100% - 110px);} .sub_talent .talent_list > li .txt li {font-size: 15px;} .sub_talent .talent_list > li .txt dt{font-size:19px;} } @media screen and (max-width:775px) { .sub_talent .talent_list > li {display: block; width: 100%; margin-right: 0; margin-bottom: 40px;} .sub_talent .talent_list > li:nth-child(n+3) {margin-bottom: 40px;} .sub_talent .talent_list > li:last-child {margin-bottom: 0;} .sub_talent .talent_list > li .txt li br {display: none;} } @media screen and (max-width:640px) { .nav_wrap .nav_box p.talent span br.respon_br {display: none;} .sub_talent .talent_list > li .icon {width: 100px; height: 100px; padding-top: 62px; background-size: auto 38px !important; background-position: center 30% !important;} .sub_talent .talent_list > li .icon span {font-size: 11px;} .sub_talent .talent_list > li .txt {width: calc(100% - 100px);} .sub_talent .talent_list > li .txt dt {padding: 8px 0; padding-left: 18px;} .sub_talent .talent_list > li .txt dd {padding-top: 16px;} .sub_talent .talent_list > li .txt li{font-size:14px;} } @media screen and (max-width:480px) { .sub_talent .talent_list > li .txt li {font-size: 14px;} } @media screen and (max-width:431px) { .sub_talent .talent_list > li .txt dt{font-size:17px;} .sub_talent .talent_list > li .txt li{font-size:13px;} } @media screen and (max-width:320px) { .sub_talent .talent_list > li .txt dt{font-size:15px;} .sub_talent .talent_list > li .txt li{font-size:12px;} } /*─────────────────────────────────────────────────────────── 채용프로세스 | recruitment/process.html ───────────────────────────────────────────────────────────*/ .sub_process .process_list {margin: 6px 0 80px 0; font-size: 0; text-align: center;} .sub_process .process_list li {position: relative; display: inline-block; width: calc(20% - 47px); border: 4px solid rgba(28,34,113,0.2); border-radius: 50%;} .sub_process .process_list li:after {display: none; content: ""; position: absolute; right: -34px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; background: url(../images/sub/process_arrow.png) no-repeat center; background-size: 100%;} .sub_process .process_list li:nth-child(5):after {display: none;} .sub_process .process_list li + li {margin-left: 48px;} .sub_process .process_list li + li:before {content: ""; position: absolute; left: -46px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; background: url(../images/sub/process_arrow.png) no-repeat center; background-size: 100%;} .sub_process .process_list li .inner {width: 100%; box-sizing: border-box; padding-bottom: 100%;} .sub_process .process_list li .inner span {position: absolute; left: 0; bottom: 30px; display: block; width: 100%; font-size: 17px; font-weight: 400; color: #333; letter-spacing: -0.2px; text-align: center;} .sub_process .process_list li:nth-child(1) {background: url(../images/sub/process_icon01.png) no-repeat center; background-size: 100%;} .sub_process .process_list li:nth-child(2) {background: url(../images/sub/process_icon02.png) no-repeat center; background-size: 100%;} .sub_process .process_list li:nth-child(3) {background: url(../images/sub/process_icon03.png) no-repeat center; background-size: 100%;} .sub_process .process_list li:nth-child(4) {background: url(../images/sub/process_icon04.png) no-repeat center; background-size: 100%;} .sub_process .process_list li:last-child {border-color: #1c2271; background: #1c2271 url(../images/sub/process_icon05.png) no-repeat center; background-size: 100%;} .sub_process .process_list li:last-child .inner span {color: #fff;} .sub_process .sub_table .sub_table_th {padding: 15px 15px;font-weight: 400;width: 270px;} .sub_process .sub_table .sub_table_th .num {display: inline-block; width: 24px; height: 24px; margin-top: -3px; margin-right: 10px; background: #1c2271; border-radius: 50%; font-size: 14px; font-weight: 500; color: #fff; letter-spacing: -0.04em; line-height: 24px; text-align: center; font-family: 'Noto Sans KR', 'Malgun Gothic', '맑은 고딕', dotum, sans-serif; vertical-align: middle;} .sub_process .sub_table .sub_table_td {height: auto;padding: 15px 15px;font-size: 16px;font-weight: 300;/*letter-spacing: -0.02em;*/color: #666;} .sub_process .recruitment_btn {display: block; width: 170px; height: 40px; margin: 60px auto 0; background: #333; font-size: 16px; color: #fff; letter-spacing: -0.04em; line-height: 40px; text-align: center;} @media screen and (max-width:1400px) { } @media screen and (max-width:1257px) { } @media screen and (max-width:1023px) { .sub_process .process_list {margin-bottom: 60px;} .sub_process .process_list li {width: calc(20% - 40px);} .sub_process .process_list li + li {margin-left: 40px;} .sub_process .process_list li + li:before {left: -39px; width: 30px; height: 30px;} .sub_process .process_list li .inner span {bottom: 26px; font-size: 16px;} } @media screen and (max-width:860px) { .sub_process .process_list {margin-bottom: 50px;} .sub_process .process_list li {width: calc(33.33% - 90px); margin-bottom: 10px;} .sub_process .process_list li + li {margin-left: 48px;} .sub_process .process_list li + li:before {left: -46px; width: 34px; height: 34px;} .sub_process .process_list li .inner span {bottom: 30px;} } @media screen and (max-width:840px) { .sub_process .sub_table .sub_table_th {font-size: 14px; width:245px;} .sub_process .sub_table .sub_table_th .num {width: 20px; height: 20px; margin-right: 8px; font-size: 12px; line-height: 20px;} .sub_process .sub_table .sub_table_td {font-size: 14px;} .sub_process .recruitment_btn {margin: 50px auto 0;} } @media screen and (max-width:760px) { .sub_process .process_list {margin-bottom: 50px;} .sub_process .process_list li {width: calc(33.33% - 40px);} .sub_process .process_list li + li {margin-left: 40px;} .sub_process .process_list li + li:before {left: -39px; width: 30px; height: 30px;} .sub_process .process_list li .inner span {bottom: 26px;} } @media screen and (max-width:760px) { .sub_process .process_list li .inner span {font-size: 14px;} } @media screen and (max-width:640px) { .sub_process .sub_table .sub_table_th, .sub_process .sub_table .sub_table_td {display: block; width: 100%;} .sub_process .sub_table .sub_table_td {padding: 14px 20px;} .sub_process .sub_table .sub_table_tr:first-child .sub_table_td {border-top: 0;} .sub_process .recruitment_btn {margin: 40px auto 0;} .sub_process .process_list li .inner span{font-size:13px;} } @media screen and (max-width:560px) { .sub_process .process_list li .inner span{font-size:12px; bottom:20px;} } @media screen and (max-width:510px) { .sub_process .process_list {margin-bottom: 50px;} .sub_process .process_list li {width: calc(33.33% - 28px);} .sub_process .process_list li + li {margin-left: 30px;} .sub_process .process_list li + li:before {left: -31px; width: 24px; height: 24px;} .sub_process .process_list li .inner span {bottom: 24px;} } @media screen and (max-width:500px) { .sub_process .process_list li {width: calc(50% - 50px);} .sub_process .process_list li:after {display: block; right:-42px;} .sub_process .process_list li + li {margin-left: 50px;} .sub_process .process_list li + li:before {display: none;} .sub_process .process_list li:nth-child(2n) {margin-right: 34px;} .sub_process .process_list li:nth-child(2n+1) {margin-left: 0;} .sub_process .process_list li .inner span{font-size:14px; bottom:30px;} } @media screen and (max-width:440px) { .sub_process .process_list li .inner span{font-size:13px; bottom:26px;} } @media screen and (max-width:414px) { .sub_process .process_list li .inner span{font-size:12px; bottom:22px; line-height:115%;} } @media screen and (max-width:360px) { .sub_process .process_list li .inner span{font-size:10px; bottom:18px;} } /*─────────────────────────────────────────────────────────── 고객센터 | /board/board_write?code=inquiry.html ───────────────────────────────────────────────────────────*/ .sub_inquiry .inquiry_info {margin-top: 22px; border-top: 1px solid #333; font-size: 0;} .sub_inquiry .inquiry_info dl {position: relative; display: inline-block; width: 50%; border-bottom: 1px solid #ddd;} .sub_inquiry .inquiry_info dl + dl:before {content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 30%; background: #ddd;} .sub_inquiry .inquiry_info dl:first-child {display: block; width: 100%;} .sub_inquiry .inquiry_info dl:first-child dd {width: auto;} .sub_inquiry .inquiry_info dl:nth-child(2):before {display: none;} .sub_inquiry .inquiry_info dt {display: inline-block;box-sizing: border-box;padding: 18px 28px;font-size: 15px;font-weight: 500;color: #333;/* letter-spacing: -0.04em; */} .sub_inquiry .inquiry_info dt img {margin-right: 10px; vertical-align: sub;} .sub_inquiry .inquiry_info dd {display: inline-block;font-size: 15px;font-weight: 300;color: #666;/* letter-spacing: -0.04em; */font-family: 'Noto Sans KR', 'Malgun Gothic', '맑은 고딕', dotum, sans-serif;} .sub_inquiry .inquiry_list {margin: 84px 0 74px; font-size: 0;} .sub_inquiry .inquiry_list li {position:relative; display: inline-block; width: 25%; box-sizing: border-box; padding: 0 10px;text-align: center; vertical-align: top;} .sub_inquiry .inquiry_list li:after{position:absolute; content:''; width:1px; height:100%; min-height:115px; background:#ddd; top:0; right:0; } .sub_inquiry .inquiry_list li:last-child:after{display:none;} .sub_inquiry .inquiry_list li strong {display: block;margin-bottom: 12px;font-size: 21px;font-weight: 500;color: #333;/* letter-spacing: -0.04em; */font-family: 'Noto Sans KR', 'Malgun Gothic', '맑은 고딕', dotum, sans-serif;} .sub_inquiry .inquiry_list li p {font-size: 15px;font-weight: 300;color: #666;/* letter-spacing: -0.04em; */line-height: 1.6;word-break: keep-all;font-family: 'Noto Sans KR', 'Malgun Gothic', '맑은 고딕', dotum, sans-serif;} .sub_inquiry .write_inquiry {width: 100%; background: #f5f5f5; box-sizing: border-box; padding: 52px 50px;} .sub_inquiry .write_inquiry .write_box {width: 100%; height: 100%;} .sub_inquiry .write_inquiry .write_box .inquiry_tit {width: 100%; background: #fff; box-sizing: border-box; padding: 30px 40px 24px; border: 1px solid #e7eaed; border-radius: 4px 4px 0 0;} .sub_inquiry .write_inquiry .write_box .inquiry_tit h4 {display: inline-block; font-size: 24px; font-weight: 500; color: #333; letter-spacing: -0.04em;} .sub_inquiry .write_inquiry .write_box .inquiry_tit .important {float: right; padding-top: 12px; font-size: 14px; font-weight: 400; color: #666; letter-spacing: -0.04em;} .sub_inquiry .write_inquiry .write_box .inquiry_tit .important span {display: inline-block; width: 4px; height: 4px; background: #ef0000; border-radius: 50%; margin-top: -2px; margin-right: 8px; vertical-align: middle;} .sub_inquiry table.bbs_write {display: block; width: 100%; border: 0;} .sub_inquiry table.bbs_write tbody {display: block; width: 100%; background: #fff; box-sizing: border-box; padding: 40px; border: 1px solid #e7eaed; border-top: 0; border-radius: 0 0 4px 4px; font-size: 0;} .sub_inquiry table.bbs_write tbody + tbody {margin-top: 20px; border-top: 1px solid #e7eaed; border-radius: 4px; padding-top: 30px;} .sub_inquiry table.bbs_write tr {display: inline-block;width: 50%;font-size: 0;box-sizing: border-box;} .sub_inquiry table.bbs_write tr.right_txt{padding-left: 47px;} .sub_inquiry table.bbs_write tr.dis_block {display: block;} .sub_inquiry table.bbs_write tr.content, .sub_inquiry table.bbs_write tr.w100 {width: 100%;} .sub_inquiry table.bbs_write th {position: relative;display: inline-block;width: 200px;box-sizing: border-box;padding: 10px 0 10px 8px;background: #fff;border: 0;font-size: 15px;font-weight: 500;color: #333;} .sub_inquiry table.bbs_write .pl_no th{padding-left:0;} .sub_inquiry table.bbs_write th.important:before {content: ""; position: absolute; left: 0; top: 30%; width: 3px; height: 3px; background: #ef0000; border-radius: 50%;} .sub_inquiry table.bbs_write td {display: inline-block;width: calc(100% - 200px);padding: 5px 0;border: 0;} .sub_inquiry table.bbs_write th.w160 {width: 200px;padding-left: 20px;} .sub_inquiry table.bbs_write th.w160.important:before {left: 10px;} .sub_inquiry table.bbs_write th.w160 + td {width: calc(100% - 200px);} .sub_inquiry table.bbs_write th.dis_block {width: 100%;padding-bottom: 0;word-break: keep-all;} .sub_inquiry table.bbs_write th.dis_block + td {width: 100%; padding-top: 0; padding-left: 10px; padding-right: 10px;} .sub_inquiry table.bbs_write .pl_no th.dis_block + td{padding-left:0; padding-right:0;} .sub_inquiry table.bbs_write td select, .sub_inquiry table.bbs_write td input {width: 85%; height: 40px; background-color: #fafafa; box-sizing: border-box; padding: 0 20px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; vertical-align: middle;} .sub_inquiry table.bbs_write td select {font-size: 14px; font-weight: 300; color: #aaa; background:#fafafa url('../images/common/bg_select.png') no-repeat 92% center;} .sub_inquiry table.bbs_write td label {display: inline-block;margin-right: 36px;font-size: 14px;font-weight: 400;color: #333;} .sub_inquiry table.bbs_write td label + .custom {margin-left: -20px;} .sub_inquiry table.bbs_write tr.dis_block td input[type="text"].custom {width: 140px; min-width: inherit;} .sub_inquiry table.bbs_write tr.pl_no input[type="radio"] + label:before, .sub_inquiry table.bbs_write tr.pl_no input[type="radio"] + label::before{margin-left:0;} .sub_inquiry table.bbs_write th.w160 + td input {width: 100%;} .sub_inquiry table.bbs_write tr td .etc {display: inline-block;} .sub_inquiry table.bbs_write .policy_cont {margin-top: 10px; border-top:2px solid #1c2271;} .sub_inquiry table.bbs_write .policy_cont > div {margin-top: 10px;} .sub_inquiry table.bbs_write .policy_cont > dl{display:table; width:100%;} .sub_inquiry table.bbs_write .policy_cont > dl dt, .sub_inquiry table.bbs_write .policy_cont > dl dd{display:table-cell;font-size:14px;color:#333;/* line-height:60px; */padding: 0 10px 0 0; height:60px; border-bottom:1px solid #ddd; line-height:145%; vertical-align:middle;} .sub_inquiry table.bbs_write .policy_cont > dl dt{font-weight:400; background:#fafafa; width:240px; padding-left:30px; box-sizing:border-box; border-right:1px solid #ddd; vertical-align:middle;} .sub_inquiry table.bbs_write .policy_cont > dl dd{font-weight:300; width:calc(100% - 240px);padding-left:40px;} .sub_inquiry table.bbs_write .policy_cont > dl dd li{position:relative; font-size:14px;color:#333} .sub_inquiry table.bbs_write .policy_cont > dl dd li:before{position:absolute;content:'';width:2px;height:2px;background:#858585;top: 8px;left: -9px;} .sub_inquiry table.bbs_write td #refreshCode {height: 40px; line-height: 38px; border-radius: 4px;} .sub_inquiry .btn {width: 140px;} .sub_inquiry .btn_sm {font-weight: 500;} select {background-image: url(../images/common/bg_select.png); background-repeat: no-repeat; background-position: 92% center;} input[type="radio"] + label:before, input[type="radio"] + label::before {width: 16px; height: 16px; margin-top: -3px; background:#fff;; background-size: 100%; border:1px solid #ddd; border-radius:100%; box-sizing:border-box;} input[type="radio"]:checked + label:before, input[type="radio"]:checked + label::before {background: url(../images/common/icon_input_radio_on.png) no-repeat center; background-size: 100%; border:0;} @media screen and (max-width:1257px) { .sub_inquiry .inquiry_list li strong{font-size:19px;} .sub_inquiry .inquiry_list li p{font-size:14px;} .sub_inquiry .write_inquiry {padding: 42px 40px;} } @media screen and (max-width:1180px) { .sub_inquiry .write_inquiry .write_box .inquiry_tit h4 {font-size: 22px;} .sub_inquiry table.bbs_write td label {margin-right: 10px;} .sub_inquiry .etc input[type="radio"] + label:before, input[type="radio"] + label::before{margin-left:20px;} .sub_inquiry table.bbs_write td label + .custom{margin-left:0;} } @media screen and (max-width:1050px) { .sub_inquiry table.bbs_write tr {width: 100%;} .sub_inquiry table.bbs_write tr.right_txt{padding-left:0;} .sub_inquiry table.bbs_write td select, .sub_inquiry table.bbs_write td input {width: 100%;} .sub_inquiry table.bbs_write tr td .etc {display: inline-block;margin-top: 5px;position: relative;width: 50%;} .sub_inquiry table.bbs_write .pl_no th.dis_block + td{padding-bottom:15px;} .sub_inquiry table.bbs_write tr.dis_block td .etc input[type="text"].custom {width: calc(100% - 74px);min-width: inherit;position: absolute;top: -3px;left: 80px;} .sub_inquiry table.bbs_write tr.dis_block td input[type="text"].custom{margin-left:5px;} .sub_inquiry table.bbs_write th.w160{padding-left:10px;} .sub_inquiry table.bbs_write th.w160.important:before{left:0;} .sub_inquiry table.bbs_write td{font-size:0;} .sub_inquiry table.bbs_write td #refreshCode{font-size:13px; margin-left:5px;} .sub_inquiry table.bbs_write td > label{width:50%; margin:0;} .sub_inquiry .etc input[type="radio"] + label:before, input[type="radio"] + label::before{margin-left:0;} } @media screen and (max-width:1030px) { .sub_inquiry .inquiry_list li:after{height:130px;} } @media screen and (max-width:1024px) { .sub_inquiry .inquiry_info {margin-top: 0;} .sub_inquiry .inquiry_info dl + dl:before {height: 50%;} .sub_inquiry .inquiry_info dt, .sub_inquiry .inquiry_info dd {display: block; width: 100%; font-size: 15px; text-align: center;} .sub_inquiry .inquiry_info dt {padding: 16px 0 14px;} .sub_inquiry .inquiry_info dd {padding-bottom: 16px;} .sub_inquiry .inquiry_list {margin: 64px 0 54px;} .sub_inquiry .inquiry_list li {width: 50%; min-height: 140px; line-height: 140px;} .sub_inquiry .inquiry_list li:after{height:100%;} .sub_inquiry .inquiry_list li:nth-child(2n):after {display:none;} .sub_inquiry .inquiry_list li:nth-child(1), .sub_inquiry .inquiry_list li:nth-child(2) {border-bottom: 1px solid #ddd;} .sub_inquiry .inquiry_list li .txt {display: inline-block; line-height: initial; vertical-align: middle;} .sub_inquiry .inquiry_list li p br {display: block;} } @media screen and (max-width:980px) { .sub_inquiry .write_inquiry .write_box .inquiry_tit {padding: 24px 30px 20px;} .sub_inquiry .write_inquiry .write_box .inquiry_tit .important {padding-top: 6px;} .sub_inquiry table.bbs_write tbody {padding: 30px;} .sub_inquiry table.bbs_write tbody + tbody {padding-top: 20px;} } @media screen and (max-width:860px) { .sub_inquiry table.bbs_write th {font-size: 14px;} .sub_inquiry table.bbs_write th.w160 {padding-left: 8px;} .sub_inquiry table.bbs_write th.w160.important:before {left: 0;} .sub_inquiry table.bbs_write td label {margin-right: 0;} .sub_inquiry table.bbs_write td > label, .sub_inquiry table.bbs_write tr td .etc{width:100%;} .sub_inquiry table.bbs_write td label + .custom {margin-left: 0;} .sub_inquiry table.bbs_write tr td #captcha_box {display: inline-block; margin-bottom: 0;} .sub_inquiry table.bbs_write .policy_cont > dl dt{padding-left:15px; width:210px; padding-top:10px; padding-bottom:10px;} .sub_inquiry table.bbs_write .policy_cont > dl dd{padding-left:25px; width:calc(100% - 210px);} .sub_inquiry table.bbs_write .policy_cont > dl dd:before{left:16px;} } @media screen and (max-width:740px) { .sub_inquiry table.bbs_write .policy_cont > dl dt{padding-left:15px; width:150px;} .sub_inquiry table.bbs_write .policy_cont > dl dd{padding-left:25px; width:calc(100% - 150px);} } @media screen and (max-width:640px) { .sub_inquiry .inquiry_info dt, .sub_inquiry .inquiry_info dd {font-size: 14px;} .sub_inquiry .inquiry_info dt {padding: 14px 0 12px;} .sub_inquiry .inquiry_info dd {padding-bottom: 14px;} .sub_inquiry .inquiry_info dt img {width: 18px; margin-right: 6px;} .sub_inquiry .inquiry_list li strong {font-size: 18px;} .sub_inquiry .inquiry_list li p {font-size: 14px;} .sub_inquiry .write_inquiry {padding: 22px 15px;} .sub_inquiry .write_inquiry .write_box .inquiry_tit {padding: 20px 20px 16px;} .sub_inquiry .write_inquiry .write_box .inquiry_tit h4 {font-size: 20px;} .sub_inquiry .write_inquiry .write_box .inquiry_tit .important {font-size: 13px;} .sub_inquiry table.bbs_write tbody {padding: 20px;} .sub_inquiry table.bbs_write tbody + tbody {padding-top: 10px;} .sub_inquiry table.bbs_write th, .sub_inquiry table.bbs_write th.w160{font-size:14px; width:175px;} .sub_inquiry table.bbs_write td, .sub_inquiry table.bbs_write th.w160 + td{width:calc(100% - 175px);} .sub_inquiry table.bbs_write th.dis_block + td{padding-top:10px; padding-bottom:20px; line-height:30px;} } @media screen and (max-width:590px) { .sub_inquiry .inquiry_list {margin: 44px 0 34px;} .sub_inquiry .inquiry_list li {height: 168px; line-height: 168px;} .sub_inquiry .inquiry_list li strong {font-size: 16px;} .sub_inquiry .inquiry_list li p br {display: none;} .sub_inquiry table.bbs_write th, .sub_inquiry table.bbs_write th.w160, .sub_inquiry table.bbs_write td, .sub_inquiry table.bbs_write th.w160 + td{width:100%;} .sub_inquiry table.bbs_write th, .sub_inquiry table.bbs_write th.w160{padding-bottom:0;} .sub_inquiry table.bbs_write th.dis_block{padding-left:0;} .sub_inquiry table.bbs_write th.dis_block + td{padding-left:0; padding-right:0; padding-top:5px;} .sub_inquiry table.bbs_write tr td #captcha_box {display: block; margin-bottom: 10px;} .sub_inquiry table.bbs_write tr.dis_block td #captcha_box + input[type="text"].custom{margin-left:0;width: calc(100% - 102px);} .sub_inquiry table.bbs_write tr.dis_block td .etc input[type="text"].custom{width:calc(100% - 85px);} .sub_inquiry table.bbs_write td .policy_cont label {font-size: 13px;} } @media screen and (max-width:480px) { .sub_inquiry .inquiry_list li strong{font-size:15px;} .sub_inquiry .write_inquiry .write_box .inquiry_tit .important {font-size: 12px;} .sub_inquiry table.bbs_write tbody {padding: 15px;} .sub_inquiry table.bbs_write td label {display: block; margin-bottom: 5px;} .sub_inquiry table.bbs_write td input[type="radio"] + label:before, .sub_inquiry table.bbs_write td input[type="radio"] + label::before {margin-left: 0;} .sub_inquiry table.bbs_write tr td .etc label {display: inline-block;} .sub_inquiry table.bbs_write td .policy_cont label {display: inline-block; margin-right: 6px; font-size: 12px;} .sub_inquiry table.bbs_write tr.content th {display: block; width: 100%; padding-bottom: 0;} .sub_inquiry table.bbs_write tr.content td {display: block; width: 100%;} .sub_inquiry table.bbs_write td #refreshCode { padding:0 10px 0 30px !important; background: #fff url(../images/common/icon_btn_reset.gif) no-repeat center 50% !important; font-size:0;} .sub_inquiry table.bbs_write .policy_cont > dl dt, .sub_inquiry table.bbs_write .policy_cont > dl dd li{font-size:13px;} .sub_inquiry table.bbs_write .policy_cont > dl dt{width:115px; padding-left:10px;} .sub_inquiry table.bbs_write .policy_cont > dl dd{width:calc(100% - 115px); padding-left:20px;} } @media screen and (max-width:431px) { .sub_inquiry .write_inquiry .write_box .inquiry_tit h4{font-size:17px;} .sub_inquiry .inquiry_list li strong{font-size:14px;} .sub_inquiry .inquiry_list li p{font-size:13px;} .sub_inquiry .inquiry_info dt, .sub_inquiry .inquiry_info dd{font-size:13px;} .sub_inquiry table.bbs_write th, .sub_inquiry table.bbs_write th.w160{font-size:13px;} .sub_inquiry table.bbs_write td select{font-size:13px; padding:0 15px;} .sub_inquiry table.bbs_write td label{font-size:13px;} .sub_inquiry table.bbs_write tr.dis_block td .etc input[type="text"].custom{left:70px; width:calc(100% - 75px);} .sub_inquiry table.bbs_write .policy_cont > dl dt, .sub_inquiry table.bbs_write .policy_cont > dl dd{display:block; width:100%; box-sizing:border-box; height:auto; padding:10px 10px;} .sub_inquiry table.bbs_write .policy_cont > dl dt{border-right:0;} .sub_inquiry table.bbs_write .policy_cont > dl dd{padding-left:20px;} } @media screen and (max-width:370px) { .sub_inquiry table.bbs_write td > label{font-size:12px; letter-spacing:-0.9px;} } @media screen and (max-width:352px) { .sub_inquiry .inquiry_list li strong{font-size:13px;} .sub_inquiry .inquiry_list li p {font-size: 12px;} .sub_inquiry table.bbs_write th {display: block; width: 100%; padding-bottom: 0;} .sub_inquiry table.bbs_write td, .sub_inquiry table.bbs_write th.w160 + td {display: block; width: 100%;} }