@charset "utf-8"; /*─────────────────────────────────────────────────────────── header, footer, main 관련 작성 css 파일입니다. ** 이와 서브페이지 관련 css는 /css/sub.css 에 있습니다. ───────────────────────────────────────────────────────────*/ /*─────────────────────────────────────────────────────────── layout common ───────────────────────────────────────────────────────────*/ /** PC 일반 **/ #wrap {position:relative;height:100%;width:100%;margin:0;padding:0;} /* #header 와 #container, #footer 전체 감싸는 영역 */ #wrap #header {width:100%;margin:0;overflow: visible;} #wrap #container {width:100%;margin:0;padding:0;overflow:hidden;} #wrap #footer {width:100%;} /* #container 안의 레이아웃 */ #contents_wrap {width:1200px;margin:0 auto;padding:0;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 180px 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:1280px;padding:0;text-align:left;margin:0 auto;box-sizing:border-box;} @media only screen and (max-width:1320px) { .w_custom {width:100%;padding-left:20px !important;padding-right:20px !important;} } @media only screen and (max-width:1217px) { body.on {height:100%;overflow:hidden;} #contents_wrap {width:100%;padding-left:15px !important;padding-right:15px !important;} } @media only screen and (max-width:1200px) { } @media only screen and (max-width:1024px) { #contents_wrap #side_box {padding: 85px 0 0 0;} #contents_wrap #contents_box {padding:4.8% 0 13.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 16.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) { .w_custom{width:100%;padding-left:15px !important;padding-right:15px !important;} #contents_wrap {width:100%;padding-left:15px !important;padding-right:15px !important;} #contents_wrap #contents_box {padding:4.2% 0 18.4% 0;} } @media only screen and (max-width:479px) { #contents_wrap #contents_box {padding:4.2% 0 25% 0;} } @media only screen and (max-width:320px) { .w_custom {padding-left:10px !important;padding-right:10px !important;} } /*─────────────────────────────────────────────────────────── 메인 상품 진열 ───────────────────────────────────────────────────────────*/ /* PC 일반 */ /* 메인상품진열 - 공통 */ .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 ───────────────────────────────────────────────────────────*/ /* PC 일반 */ /*** 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 ───────────────────────────────────────────────────────────*/ /** PC 일반 **/ .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 {left:0;top:0;height:100px;border:0;text-align:center;position:sticky;z-index:10;width:100%;box-sizing:border-box;font-size:0;border-bottom:0;background:#fff;padding: 30px 0;display: flex;align-items: center;justify-content: center;border-bottom:1px solid #ddd;} #header.on {box-shadow:0 0 32px rgba(0,0,0,0.1);border-bottom:0;} #header .hd_logo {left:60px;top: 50%;position:absolute;z-index:15;width:215px;height:42px;transform: translateY(-50%);} #header .hd_logo a {background: url('../images/skin/hd-logo.png') no-repeat left;font-size: 0;display: block;height: 100%;background-size: 100% auto;} #header .hd_lnb {line-height:33px;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;} #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;} #header .hd_lnb > li {padding: 0 24px;position:relative;line-height: 100px;} #header .hd_lnb > li > a {padding:0 9px;position:relative;z-index:1;} #header .hd_lnb > li:first-of-type > a {font-weight:700;color:#bf9973;} #header .hd_lnb > li:first-of-type > a:after{content:"";display:block;clear:both;transition:0.5s;width:4px;height:4px;background:#bf9973;position:absolute;right:0;top:5px;margin-top:0;content:"";display:inline-block;border-radius:100%;} #header .hd_lnb > li:hover > a, #header .hd_lnb > li.on > a{font-weight:700;color:#bf9973;} #header .hd_lnb > li .hd_lnb_dep2_wrap {z-index: 55;display: none;position:absolute;left:0;top: 74%;width: 130%;left: 50%;transform: translateX(-50%);padding-top: 7px;visibility:hidden;transform-origin: top center;opacity: 0;transition:all 0.4s;animation: menuAni 0.5s;} #header .hd_lnb > li .hd_lnb_dep2_wrap.on {display:block;visibility:visible;opacity: 1;} #header .hd_lnb > li .hd_lnb_dep2_wrap:before {content:'';display:block;position:absolute;width:100%;height:8px;background:url('../images/skin/hd-layer-bg.png') no-repeat center;background-size:auto 100%;top: 0;left:0;z-index: 20;} #header .hd_lnb > li .hd_lnb_dep2 {width:100%;padding:14px 0px;border-radius:4px;box-shadow: 13px 13px 32px rgba(0,0,0,0.17);background:#fff;border: 1px solid #ddd;box-sizing: border-box;/* z-index: 10; */position: relative;} #header .hd_lnb > li .hd_lnb_dep2:after {content:'';display:block;position:absolute;width:80%;height: 13px;background: #fff;top: 0;left:50%;transform:translateX(-50%);z-index: 51;} #header .hd_lnb > li .hd_lnb_dep2 li {text-align:center;width: auto;line-height: 36px;} #header .hd_lnb > li .hd_lnb_dep2 li a {font-size:16px;font-weight:400;color:#555;position:relative;display:inline-block;} #header .hd_lnb > li .hd_lnb_dep2 li:hover a {color:#333;font-weight:400;} #header .hd_lnb > li .hd_lnb_dep2 li a:after {content:'';display:block;position:absolute;width:0;height:1px;background:#333;left:0;bottom:6px;transition: all .2s;} #header .hd_lnb > li .hd_lnb_dep2 li:hover a:after {width:100%;} #header .hd_right {top:50%;right:60px;height:40px;line-height:40px;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;transform:translateY(-50%);} .hd_right .btn_cs {display:inline-block;vertical-align:middle;} .hd_right .btn_cs a {display:flex;align-items:center;padding:0 20px;border-radius:20px;background:#191d22;font-size:18px;line-height:40px;font-weight:700;color:#fff;} .hd_right .btn_cs a:before {content:'';display:inline-block;width:23px;height:17px;background:url('../images/skin/hd-cs-icon.png') no-repeat center;background-size:100%;margin-right:9px;vertical-align:middle;} .hd_right .menu-trigger {position:relative;padding:0;width:28px;height:23px;box-sizing: border-box;margin-left: 30px;display:inline-block;vertical-align:middle;} .hd_right .menu-trigger span {transition:0.3s;position:absolute;width: 100%;height:3px;background-color: #000;left: 0;} .hd_right .menu-trigger span:nth-of-type(1) {top: 0;} .hd_right .menu-trigger span:nth-of-type(2) {top: 50%;margin-top: -1.5px;} .hd_right .menu-trigger span:nth-of-type(3) {bottom: 0;} @keyframes menuAni { 0% { opacity: 0; } 100% { opacity: 1; } } /* main header */ @media only screen and (max-width:1320px) { #header .hd_logo {left:20px;} #header .hd_right {right:20px;} } @media only screen and (max-width:1217px) { #header .hd_lnb li {padding:0 20px;position:relative;} } @media only screen and (max-width:1024px) { #header {height:75px;padding:0;} #header .hd_lnb, #header .hd_right .hd_gnb {display:none;} } @media only screen and (max-width:980px) { } @media only screen and (max-width:860px) { } @media only screen and (max-width:767px) { #header {height:70px;} } @media only screen and (max-width:640px) { #header {height:60px;} #header .hd_logo {left:15px;width:170px;height:50px;} #header .hd_right {right:15px;} .hd_right .menu-trigger {width:25px;height:23px;margin-left:15px;} .hd_right .btn_cs a {font-size:15px;line-height:30px;border-radius:30px;padding:0 6px;} .hd_right .btn_cs a:before {width:17px;height:12px;margin-right:7px;} } @media only screen and (max-width:479px) { } @media only screen and (max-width:320px) { #header .hd_logo {left:10px;} #header .hd_right {right:10px;} } /*─────────────────────────────────────────────────────────── ASIDE | outline/header.html, outline/nav.html ───────────────────────────────────────────────────────────*/ /* PC 일반 */ /* aside */ #aside {overflow:hidden;top: 0;/* right:0; */width:100%;transition:0.5s;height:100%;box-sizing:border-box;box-sizing:border-box;position:fixed;background:url('../images/skin/category-bg.jpg') no-repeat center;background-size:cover;z-index:99;visibility: hidden;transform-origin: top center;opacity: 0;} #aside:before{content:'';font-size:100px;line-height:1;letter-spacing:0.15em;color:rgba(170,170,170,0.2);position:absolute;bottom:-15px;left:0;width:100%;text-align:center;font-weight:600} #aside:after {content:'';display:block;position:absolute;width:100%;height:130px;background:url('../images/skin/category-bg-logo.png') no-repeat center;background-size:auto 100%;bottom:0;left:50%;transform:translateX(-50%);} #aside.on {/* top:0%; */visibility: visible;opacity: 1;} #aside .aside_box{overflow:hidden;} .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 .round_bg_con:before{opacity:0.6;right:-210px;top:-100px;} #aside .round_bg_con:after{opacity:0.6;left: -155px;bottom: -25px;} #aside .aside_top{display:flex;height: 100px;align-items:center;padding: 0 60px;justify-content:space-between;} #aside .hd_logo {width: 178px;height: 40px;position:relative;z-index:15;} #aside .hd_logo a {background: url('../images/skin/hd_logo_on.png') no-repeat left;font-size: 0;display: block;height: 100%;background-size: auto 100%;display:none} #aside .aside_box .btn_aside_close {top:0;right:0;width: 27px;height: 27px;cursor:pointer;margin-left: 29px;box-sizing: border-box;position:relative;display: inline-block;vertical-align: middle;} #aside .aside_box .btn_aside_close div{width: 37px;height: 37px;position:absolute;top: -7px;right: -5px;} #aside .aside_box .btn_aside_close .menu-trigger2.active-1 {width:100%;height:100%;position: absolute;top: 0;left: 0;} #aside .aside_box .btn_aside_close .menu-trigger2.active-1 span {transition:0.3s;position:absolute;width:100%;height:2px;background-color:#333;left:0;top: 50%;transform: translateY(-50%);} #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 .w_custom{max-width:1380px;padding-left: 20px !important;padding-right: 20px !important;} #aside .aside_box .aside_logo {text-align:center;margin-bottom:58px;margin-top:40px;} #aside .aside_box .aside_logo a {display:inline-block;vertical-align:top;} #aside .aside_box {width:100%;height:100%;margin:0;padding: 0;overflow-y:auto;position:relative;z-index:1;box-sizing:border-box;display:block;} #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:#ffffff;} #aside .aside_box .aside_search {margin:40px 0 28px;height:40px;background:#fff;position:relative;display:block;} #aside .aside_box .aside_search .search_input {width:100%;padding:0 10px;box-sizing:border-box;color:#333;font-size:13px;border:none;line-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 {box-sizing:border-box;padding: 70px 0;display:flex;flex-wrap:wrap;width:100%;} #aside ul.slidemenu.m_menu{display:none;} #aside ul.slidemenu li.on > .icons {background:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),transparent;background-position:center;background-size:100% 1px,0 100%;background-repeat:no-repeat;} #aside ul.slidemenu .depth1_li {padding: 0 40px;text-align: left;display:block;vertical-align:top;font-size:16px;position:relative;width: 25%;box-sizing:border-box;border-left: 1px solid #ccc;} #aside ul.slidemenu .depth1_li:hover .depth1_a {color:#bf9973;} #aside ul.slidemenu .depth1_li + .depth1_li {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 .depth1_a {transition:0.2s;padding:0;line-height: 1;font-size: 32px;color: #222;font-weight: 500;position:relative;padding-bottom: 29px;} #aside ul.slidemenu .depth1_li .depth {padding:0;border:0;border-bottom:1px solid rgba(255,255,255,0.2);} #aside ul.slidemenu .depth1_li .depth li {padding-left:0;position:relative;} #aside ul.slidemenu .depth1_li .depth li a {font-size: 18px;line-height: 1;color:#333;position:relative;padding: 11px 0;word-break:keep-all;} #aside ul.slidemenu .depth1_li .depth li:hover a {font-weight:500;color:#bf9973;} #aside ul.slidemenu .depth1_li .icons {display:none;width:20px;height:20px;background:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),transparent;background-position:center;background-size:100% 1px,1px 100%;background-repeat:no-repeat;} #aside ul.slidemenu .depth1_li .depth1_a.on .icons {} @media only screen and (max-width:1320px) { #aside .aside_top {padding:0 20px;} } @media only screen and (max-width:1217px) { #aside .hd_right .btn_aside_close{} } @media only screen and (max-width: 1100px) { #aside:after {height:100px;} } @media only screen and (max-width: 1024px) { #aside .aside_top{height:75px;padding:0 20px;} #aside .hd_logo{width:150px;height:33px;} #aside:before{bottom:-10px;} #aside .aside_box .aside_logo{margin-bottom:20px;} #aside ul.slidemenu{padding: 80px 0;} #aside ul.slidemenu .depth1_li{padding: 0 20px;} #aside ul.slidemenu .depth1_li:hover {color:#222;} #aside ul.slidemenu .depth1_li:nth-child(-n+3){margin-top:0;} #aside ul.slidemenu .depth1_li:first-child{/* padding-left:10px; */} #aside ul.slidemenu .depth1_li:last-child{padding-right:10px;} #aside ul.slidemenu .depth1_li .depth1_a{font-size:28px;padding-bottom: 19px;} #aside ul.slidemenu .depth1_li .depth li a{font-size: 16px;padding:10px 0;} #aside ul.slidemenu .depth1_li .depth li:hover a {color:#666;font-weight:400;} } @media only screen and (max-width: 980px) { #aside:after {height:90px;} } @media only screen and (max-width:860px) { #aside:after {height:80px;} } @media only screen and (max-width:768px) { #aside {background-position:53%;} #aside:after {content:'';display:block;position:absolute;width:calc(100% - 36px);height:41px;} #aside .aside_top{height:70px;} #aside .aside_box .aside_logo{width:120px;margin:0 auto;} #aside .aside_box .hd_right .btn_cs {display:none;} #aside .aside_box .btn_aside_close div {width:30px;height:30px;top: -3px;right: -3px;} #aside ul.slidemenu.pc_menu{display:none;} #aside ul.slidemenu.m_menu{display:block;} #aside ul.slidemenu{padding: 38px 0 125px;} #aside ul.slidemenu .depth1_li{width:100%;padding:0;margin-top:0;border: 0 !important;text-align: center;} #aside ul.slidemenu .depth1_li:first-child{padding-left:0;} #aside ul.slidemenu .depth1_li:last-child{padding-right:0;} #aside ul.slidemenu .depth1_li:hover .depth1_a {color:#222;} #aside ul.slidemenu .depth1_li .depth1_a:after{display:none;} #aside ul.slidemenu .depth1_li .icons{display:block;} #aside ul.slidemenu .depth1_li .depth1_a{font-size:20px;letter-spacing:-0.03em;font-weight:500;padding: 22px 0;margin-bottom:0;border-bottom:1px solid #ddd;width:100%;} #aside ul.slidemenu .depth1_li .depth1_a .icons{position:absolute;top:50%;right:10px;margin-top:-9px;width:9px;height:9px;border-bottom:1px solid #888;border-right:1px solid #888;transform:rotate(45deg)} #aside ul.slidemenu .depth1_li .depth1_a.on{color:#bf9973} #aside ul.slidemenu .depth1_li .depth1_a.on .icons{border-bottom:1px solid #bf9973;border-right:1px solid #bf9973;transform:rotate(-135deg);margin-top:-3px;} #aside ul.slidemenu .depth1_li .depth{padding:15px 0;display:none;} #aside ul.slidemenu .depth1_li .depth li a{font-size:17px;letter-spacing:-0.04em;color:#666;padding: 12px 0;line-height: 1.4;width: 100%;} } @media only screen and (max-width:640px) { #aside:before{display:none;} #aside .aside_box{padding:0;} #aside .aside_top{height:60px;padding:0 15px;} #aside .hd_logo{width:120px;height:29px;} #aside .hd_logo a {display:block;} #aside .aside_box .btn_aside_close div {width:24px;height:24px;top:2px;right:5px;} #aside .hd_right .btn_aside_close{margin-left:0;width:35px;} #aside .aside_box .aside_logo{/* display:none; */} } @media only screen and (max-width:320px) { #aside .hd_logo{width:100px;height:22.5px;} } /*─────────────────────────────────────────────────────────── FOOTER | outline/footer.html ───────────────────────────────────────────────────────────*/ /* PC 일반 */ #footer {background:#f5f5f5;} #footer .footer_cont {padding-top:80px;padding-bottom:100px;} #footer .ft_lnb {font-size:0;display:flex;} #footer .ft_lnb > li {display:inline-block;width:25%;border-left:1px solid #ddd;box-sizing:border-box;padding:0 30px;} #footer .ft_lnb > li:last-of-type {border-right:1px solid #ddd;} #footer .ft_lnb > li > a {font-size:18px;line-height:1;font-weight:500;color:#222;} #footer .ft_lnb > li > ul {padding-top:25px;} #footer .ft_lnb > li > ul > li {} #footer .ft_lnb > li > ul > li + li {margin-top:18px;} #footer .ft_lnb > li > ul > li a {font-size:16px;line-height:1;font-weight:400;color:#444;} #footer .ft_lnb > li > ul > li:hover a {color:#bf9973;} #footer .ft_contact {padding-top:100px;} #footer .ft_contact strong {display:block;font-size:16px;line-height:1;font-weight:600;color:#222;} #footer .ft_contact address {font-size:16px;font-weight:400;color:#666;padding:15px 0;} #footer .ft_contact address span {margin:0 16px;} #footer .ft_contact address a {font-size:inherit;font-weight:inherit;color:inherit;} #footer .ft_contact .copy {font-size:16px;font-weight:300;color:#888;letter-spacing:0;} #footer .ft_contact .copy a {font-size:inherit;font-weight:inherit;color:inherit;} .btn_quick {position:fixed;bottom:20px;right:20px;display: flex;flex-direction: column;align-items: flex-end;z-index:10;} .btn_quick li {border-radius:55px;box-shadow:0 0 30px rgba(0,0,0,0.08);} .btn_quick li + li {margin-top:10px;} .btn_quick li .btn_sns, .btn_quick li .scroll_top {width:55px;height:55px;border-radius:55px;display:block;display:flex;overflow:hidden;cursor:pointer;box-shadow:0 0 30px rgba(0,0,0,0.08);} .btn_quick li .btn_sns {display: inline-flex; align-items: center;transition: all 0.3s;} .btn_quick li .btn_sns img {} .btn_quick li .btn_sns:hover {width:auto;} .btn_quick li .btn_sns.kakao {background:#fbe902 url('../images/skin/quick-kakao.png') no-repeat center right;background-size:55px;} .btn_quick li .btn_sns.kakao span {color:#3c1e1e;} .btn_quick li .btn_sns.plus {background:#3c1e1e url('../images/skin/quick-plus.png') no-repeat center right;background-size:55px;} .btn_quick li .btn_sns.brochure {background:#2a3890 url('../images/skin/quick-brochure.png') no-repeat center right;background-size:55px;} .btn_quick li .btn_sns span {font-size:16px;display:inline-block;font-weight:400;color:#fff;opacity:0;display:flex;align-items: center;padding-left:20px;padding-right:55px;} .btn_quick li .btn_sns:hover span {opacity: 1;} .btn_quick li .scroll_top {background:#191d22 url('../images/skin/quick-top.png') no-repeat center right;font-size:0;background-size:100%;} .quick_contact {position:fixed;right:-279px;top:47.5%;top:160px;z-index:10;font-size:0;transition:all 0.3s;} .quick_contact.on {right:0;} .quick_contact .btn_consulting {display:inline-block;width:70px;height:193px;padding:30px 0 40px;background:#bf9973;border-radius:20px 0 0 20px;box-sizing:border-box;display: inline-flex;justify-content: center;align-items: center;vertical-align: top;position:relative;cursor:pointer;position: absolute;left: -70px;} .quick_contact.on .btn_consulting:after {transform:translateX(-50%) scale(1);} .quick_contact .btn_consulting:after {content:'';display:block;position:absolute;width:20px;height:20px;border-radius:100%;background:#000 url('../images/skin/quick-arrow.png') no-repeat center;bottom:-10px;left:50%;transform:translateX(-50%) scale(-1);} .quick_contact .btn_consulting span {font-size:18px;line-height:22px;font-weight:400;color:#fff;position:relative;text-align:center;} .quick_contact .btn_consulting span:before {content:'';display:block;width:30px;height:22px;background:url('../images/skin/icon-cs.png') no-repeat center;background-size:100%;margin-bottom:15px;} .quick_contact .consulting_box {display:inline-block;} .quick_contact .consult_cont {padding:30px;border-radius:0 0 0 20px;border:1px solid #bf9973;border-right:0;background:#fff;width:279px;box-sizing:border-box;} .quick_contact .consult_cont h4 {font-size:18px;line-height:1;font-weight:400;color:#333;padding-bottom:15px;} .quick_contact .consult_cont p {font-size:15px;line-height:1.47;font-weight:400;color:#666;} .quick_contact .consult_cont .board_main_write {margin-top:10px;} .quick_contact .consult_cont .board_main_write input[type="text"], .quick_contact .consult_cont .board_main_write select {border:1px solid #ddd;border-radius:4px;width:100%;height:40px;padding:0 15px;font-size:15px;line-height:38px;font-weight:400;color:#999;} .quick_contact .consult_cont .board_main_write input[type="text"]:focus {border-color:#000;} .quick_contact .consult_cont .board_main_write select {border-color:#aaa;color:#666;background-size:8px auto;} .quick_contact .consult_cont .board_main_write td {padding:5px 0;} .quick_contact .consult_cont .board_main_write .policy_cont {display:flex;align-items: center;justify-content: space-between;} .quick_contact .consult_cont .board_main_write .policy_cont .input_box {line-height:22px;padding:0;} .quick_contact .consult_cont .board_main_write .policy_cont .input_box label {font-size:14px;line-height:22px;font-weight:400;color:#666;} .quick_contact .consult_cont .board_main_write .policy_cont .input_box input[type="checkbox"] + label:before {width:22px;height:22px;background:url('../images/skin/icon_check.png') no-repeat center;background-size:100%;margin-right:6px;} .quick_contact .consult_cont .board_main_write .policy_cont .input_box input[type="checkbox"]:checked + label:before {background:url('../images/skin/icon_check_on.png') no-repeat center;background-size:100%;} .quick_contact .consult_cont .board_main_write .policy_cont a {font-size:12px;line-height:1;font-weight:400;color:#999;} .quick_contact .consult_cont .btn_wrap {padding-top:20px;} .quick_contact .consult_cont .btn_wrap li + li {margin-top:10px;} .quick_contact .consult_cont .btn_wrap li button, .quick_contact .consult_cont .btn_wrap li a {width:100%;height:50px;border-radius:25px;font-size:18px;line-height:48px;font-weight:400;color:#fff;border:1px solid #191d22;background:#191d22;box-sizing:border-box;text-align:center;display:block;font-family:'Lato','Noto Sans KR';} .quick_contact .consult_cont .btn_wrap li .call {color:#191d22;background:#fff;position:relative;} .quick_contact .consult_cont .btn_wrap li .call:before {content:'';display:inline-block;width:26px;height:20px;background:url('../images/skin/icon-cs-balck.png') no-repeat center;background-size:100%;margin-right:9px;vertical-align:sub;} @media only screen and (max-width:1320px) { #footer {} #footer .footer_cont {padding-top:6%;padding-bottom:7.5%;} #footer .ft_contact {padding-top:7.5%;} .btn_quick li {border-radius:50px;} .btn_quick li .btn_sns, .btn_quick li .scroll_top {width:50px;height:50px;border-radius:50px;} } @media only screen and (max-width:1200px) { } @media only screen and (max-width:1024px) { #footer .ft_lnb > li > a {font-size:17px;} #footer .ft_lnb > li > ul {padding-top:23px;} #footer .ft_lnb > li > ul > li a {font-size:15px;} .quick_contact {top:14%;transform:inherit;} } @media only screen and (max-width:1100px) { .quick_contact {display:none;} } @media only screen and (max-width:860px) { #footer .ft_lnb > li > a {font-size:16px;} #footer .ft_lnb > li > ul {padding-top:20px;} #footer .ft_lnb > li > ul > li a {font-size:14px;} } @media only screen and (max-width:767px) { .btn_quick li {border-radius:40px;box-shadow:0 0 24px rgba(0,0,0,0.08);} .btn_quick li + li {margin-top:7px;} .btn_quick li .btn_sns, .btn_quick li .btn_sns:hover, .btn_quick li .scroll_top, .btn_quick li .scroll_top:hover {width:40px;height:40px;border-radius:40px;background-size:40px !important;box-shadow:0 0 12px rgba(0,0,0,0.17);} .btn_quick li .btn_sns span {display:none;} } @media only screen and (max-width:640px) { #footer .ft_lnb {display:none;} #footer .ft_contact {padding:0;} #footer .ft_contact strong {font-size:15px;} #footer .ft_contact address {font-size:15px;line-height:1.64;} .btn_quick {right:15px;} } @media only screen and (max-width:520px) { #footer .ft_contact address {padding-right:40px;} } @media only screen and (max-width:425px) { #footer {} #footer .footer_cont {padding:30px 0 60px;} #footer .ft_contact strong {font-size:14px;} #footer .ft_contact address {font-size:14px;} #footer .ft_contact address span {margin:0 10px;} #footer .ft_contact .copy {font-size:13px;line-height:1.62;} } /*─────────────────────────────────────────────────────────── SIDE_BOX | outline/left_bbs.html｜outline/left_goods.html｜outline/left_member.html｜outline/left_service.html ───────────────────────────────────────────────────────────*/ /* PC 일반 */ #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:1024px) { } @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 ───────────────────────────────────────────────────────────*/ /** PC 일반 **/ .main_index #container {padding-top:0 !important;overflow:hidden;} .main {width:100%;overflow:hidden;position:relative;} .main_title {text-align:center;padding-bottom:60px;} .main_title h2 {font-size:46px;line-height:1.39;font-weight:700;color:#222;} .main_tab {text-align:center;padding-top:26px;font-size:0;display: flex;justify-content: center !important;} .main_tab li {display:inline-block;font-size:18px;line-height:48px;font-weight:400;color:#333;width:auto;height:50px;border-radius:25px;padding:0 20px;border:1px solid #191d22;box-sizing:border-box;cursor:pointer;} .main_tab li + li {margin-left:10px;} .main_tab li.on {background:#191d22;color:#fff;} .main_tab_con {padding: 0 60px;box-sizing: content-box;overflow: hidden;} .main_tab_con .swiper-container {overflow:visible;} .main_tab_con .swiper-container:before, .main_tab_con .swiper-container:after {content:'';display:block;position:absolute;width:40px;height:calc(100% + 40px);background:#fff;top:50%;transform:translateY(-50%);z-index:2;} .main_tab_con .swiper-container:before {left:-60px;} .main_tab_con .swiper-container:after {right:-60px;} .main_tab_con .tab_con {display:none;} .main_tab_con .tab_con.on {display:block;} .main_cont {padding-top:104px;padding-bottom:120px;} .main .btn_more {font-size:20px;line-height:70px;font-weight:500;color:#fff;background:#bf9973;border-radius:35px;display:inline-block;margin:80px auto 0;text-align:center;padding:0 35px;box-sizing:border-box;} #wrap .main .swiper-arrow {width:15px;height:28px;position:absolute;top:50%;transform:translateY(-50%);background:none !important;} #wrap .main .swiper-arrow:after {content:'';position:absolute;width:17px;height:17px;border:1px solid #333;border-width:2px 2px 0 0;transform: translate(-44%,-50%) rotate(45deg);font-size:0;position:absolute;top: 50%;left: 0;transition:all 0.4s;font-size:0;} #wrap .main .swiper-arrow.swiper-button-prev:after {border-width:0 0 2px 2px;left:5px;transform:translate(0,-50%) rotate(45deg);} #wrap .main .swiper-arrow.swiper-button-prev {left:-55px;} #wrap .main .swiper-arrow.swiper-button-next {right:-55px;} @media only screen and (max-width:1378px) { .left_quick {display:none;} #wrap .main swiper-arrow.swiper-button-prev:after {left:15px;} #wrap .main swiper-arrow.swiper-button-next {right:-30px;} } @media only screen and (max-width:1358px) { .main_tab_con {padding:0;box-sizing:border-box;} .main_tab_con .swiper-container {overflow:hidden;} #wrap .main .swiper-arrow {display:none;} } @media only screen and (max-width:1320px) { .main .main_cont {padding-top:7.8%;padding-bottom:9%;} } @media only screen and (max-width:1217px) { .main_title {padding-bottom:55px;} .main_tab li {font-size:18px;} } @media only screen and (max-width:1024px) { .main_title {padding-bottom:50px;} .main_title h2 {font-size:41px;} .main .btn_more {font-size:18px;line-height:55px;border-radius:55px;padding:0 24px;margin-top:5.5%;} .main_tab li {font-size:17px;line-height:45px;height:45px;} } @media only screen and (max-width:860px) { .main_title {padding-bottom:46px;} .main_title h2 {font-size:31px;} } @media only screen and (max-width:768px) { .main_title {padding-bottom:42px;} .main_title h2 {font-size:29px;} .main .btn_more {font-size:17px;line-height:50px;border-radius:50px;padding:0 22px;margin-top:6%;} .main_tab li {font-size:16px;} } @media only screen and (max-width:640px) { .main_title {padding-bottom:38px;} .main .btn_more {font-size:15px;line-height:45px;border-radius:45px;padding:0 20px;margin-top:6.5%;} .main_tab li {font-size:15px;line-height:40px;height:40px;} } @media only screen and (max-width:425px) { .main .main_cont {padding-top:15%;padding-bottom:15%;} .main_title {padding-bottom:33px;} .main_title h2 {font-size:27px;} .main .btn_more {font-size:14px;line-height:40px;border-radius:40px;padding:0 18px;margin-top:7%;} .main_tab {padding-top:20px;} .main_tab li {font-size:14px;line-height:36px;padding:0 10px;height:36px;} .main_tab li + li {margin-left:6px;} } @media only screen and (max-width:320px) { } /* 메인스크롤 퀵메뉴 */ .left_quick {position:absolute;left:67px;top:323px;z-index:10;} .left_quick.on {position:fixed;top:50%;transform:translateY(-50%);} .left_quick ul {padding-left:19px;position:relative;} .left_quick ul:before {content:'';display:block;position:absolute;width:1px;height:calc(100% - 10px);background:#ddd;left:0;top:50%;transform:translateY(-50%);} .left_quick ul li {position:relative;cursor:pointer;} .left_quick ul li + li {margin-top:26px;} .left_quick ul li:before {content:'';display:block;position:absolute;width:7px;height:7px;border-radius:100%;background:#ccc;top:50%;left:-22.5px;transform:translateY(-50%);z-index: 2;transition:all 0.2s;} .left_quick ul li.on:before {width:5px;height:5px;background:#fff;} .left_quick ul li:after {content:'';display:block;position:absolute;width:15px;height:15px;background:#bf9973;top:50%;left:-27px;transform:translateY(-50%);border-radius:100%;z-index:1;transition:all 0.2s;opacity:0;} .left_quick ul li.on:after {opacity:1;} .left_quick ul li span {font-size:14px;line-height:1;font-weight:400;color:#888;transition:all 0.2s;} .left_quick ul li:hover span, .left_quick ul li.on span {font-weight:500;color:#333;} @media only screen and (max-width:1700px) { .left_quick {display:none;} } @media only screen and (max-width:1400px) { .left_quick {display:none;} } /* visual */ #wrap .main_visual {position:relative;width:100%;margin:0;height:880px;max-height:880px;} #wrap .main_visual .slick-slide {overflow:hidden;position:relative;text-align:center;height:880px;max-height:880px;border:none;min-height:100% !important;} .main_visual .slick-slide .img_box {display:inline-block;height:100%;width:100%;margin:0 auto;text-align:Center;position:absolute;left:0;top:0;outline:0;background-position:center;background-size:cover !important;/*transition:transform 2s ease-in-out, opacity 2s ease-in-out;transform:scale(1.2) rotate(0.003deg);*/} .main_visual .slick-slide .img_box img {display:inline-block;height:auto;width:100%;} .main_visual .txt_box {text-align:center;transform:translate(-50%, -50%);position:absolute;left:50%;top:50%;font-size:0;} .main_visual .txt_box strong, .main_visual .txt_box p, .main_visual .txt_box a {display:block;text-align:left;opacity:0;transform:translateY(100px);transition:all 0.5s;} .main_visual .txt_box strong {font-size:64px;line-height:1.31;font-weight:700;color:#222;letter-spacing:-0.05em;} .main_visual .txt_box p {font-size:22px;line-height:1.64;font-weight:400;color:#222;padding-top:20px;} .main_visual .txt_box a {font-size:20px;line-height:70px;font-weight:500;color:#fff;text-align:center;width:260px;height:70px;border-radius:35px;background:#bf9973;margin-top:50px;} /* control */ .main_visual .slick-arrow {width:15px;height:28px;position:absolute;top:50%;transform:translateY(-50%);font-size:0;z-index:10;} .main_visual .slick-arrow:before {content:'';position:absolute;width:17px;height:17px;border:1px solid #555;border-width:2px 2px 0 0;transform: translate(-44%,-50%) rotate(45deg);font-size:0;position:absolute;top: 50%;left: 0;transition:all 0.4s;font-size:0;} .main_visual .slick-prev {left:60px;} .main_visual .slick-next {right:60px;} .main_visual .slick-prev:before {border-width:0 0 2px 2px;left:5px;transform:translate(0,-50%) rotate(45deg);} .main_visual .btn_scroll {font-size:16px;line-height:1;font-weight:400;color:rgba(85,85,85,0.8);display:inline-block;position:absolute;padding-bottom:27px;bottom:40px;left:50%;transform:translateX(-50%);cursor:pointer;} .main_visual .btn_scroll:after {content:'';position:absolute;width: 18px;height: 18px;border: 1px solid #555;border-width:2px 2px 0 0;transform: translateX(-50%) rotate(135deg);font-size:0;position:absolute;bottom: 4px;left: 50%;transition:all 0.4s;font-size:0;opacity: 0.4;transition:all 0.3s;animation:scroll_down 0.8s ease-in Infinite alternate;} @-webkit-keyframes scroll_down { 0% {bottom:-4px;} 100% {bottom:4px;} } /*active*/ .main_visual .active .txt_box strong, .main_visual .active .txt_box p, .main_visual .active .txt_box a {opacity:1;transform:translateY(0);transition:all 0.5s;} .main_visual .active .txt_box p {transition-delay:0.3s;} .main_visual .active .txt_box a {transition-delay:0.6s;} @media only screen and (max-width:1470px) { .main_visual .slick-prev {left:30px;} .main_visual .slick-next {right:30px;} } @media only screen and (max-width:1400px) { .main_visual .slick-prev {left:15px;} .main_visual .slick-next {right:15px;} } @media only screen and (max-width:1360px) { .main_visual .slick-arrow {display:none !important;} } @media only screen and (max-width:1320px) { } @media only screen and (max-width:1217px) { #wrap .main_visual, #wrap .main_visual .slick-slide {height:800px;} .main_visual .txt_box strong {font-size:55px;} .main_visual .txt_box p {font-size:20px;} .main_visual .txt_box a {font-size:19px;} } @media only screen and (max-width:1024px) { #wrap .main_visual, #wrap .main_visual .slick-slide {height:760px;} .main_visual .txt_box strong {font-size:50px;} .main_visual .txt_box p {font-size:18px;} .main_visual .txt_box a {width:230px;font-size:17px;height:60px;line-height:60px;border-radius:30px;} } @media only screen and (max-width:900px) { .main_visual .txt_box {top:40%;} } @media only screen and (max-width:860px) { #wrap .main_visual, #wrap .main_visual .slick-slide {height:700px;} .main_visual .txt_box strong {font-size:45px;} .main_visual .txt_box p {font-size:17px;padding-top:12px;} .main_visual .txt_box a {font-size:16px;} } @media only screen and (max-width:768px) { #wrap .main_visual, #wrap .main_visual .slick-slide {height:600px;} .main_visual .txt_box {top:50px;transform:translateX(-50%);} .main_visual .txt_box strong {font-size:40px;} .main_visual .txt_box p {font-size:16px;padding-top:10px;} .main_visual .txt_box a {width:200px;font-size:15px;height:50px;line-height:50px;border-radius:25px;} } @media only screen and (max-width:640px) { #wrap .main_visual, #wrap .main_visual .slick-slide {height:500px;} .main_visual .txt_box strong {font-size:35px;} .main_visual .txt_box p {font-size:15px;padding-top:6px;} .main_visual .txt_box a {font-size:14px;margin-top:23px;} .main_visual .btn_scroll {display:none;} } @media only screen and (max-width:425px) { #wrap .main_visual, #wrap .main_visual .slick-slide {height:450px;} .main_visual .txt_box strong {font-size:29px;} .main_visual .txt_box p {font-size:14px;} .main_visual .txt_box a {width:160px;font-size:13px;height:40px;line-height:40px;border-radius:20px;} } @media only screen and (max-width:320px) { } /* 성공사례 */ .main_success {padding-top:204px;margin-top:-100px;} .main_success .success_cont {padding:30px 60px;margin-top:-30px;position:relative;} .main_success .success_cont .board_ul.no_data {display:block;text-align:center;} .main_success .success_cont .board_ul.no_data li {display:block;margin:0 auto !important;font-size:16px;} .main_success .success_cont .board_ul > li {position:relative;z-index:1;border-radius:10px;} .main_success .success_cont .board_ul > li:hover {box-shadow:0 0 30px rgba(0,0,0,0.1);} .main_success .success_cont .board_ul > li > a {position:absolute;width:100%;height:100%;top:0;left:0;z-index:2;} .main_success .success_cont .board_ul > li .thumb {width:100%;height:290px;border-radius:10px 10px 0 0;overflow:hidden;position:relative;} .main_success .success_cont .board_ul > li .thumb img {display:block;position:absolute;width:100%;height:100%;object-fit:cover;} .main_success .success_cont .board_ul > li .txt {padding:20px 30px 25px;border:1px solid #ddd;border-top:0;border-radius:0 0 10px 10px;box-sizing:border-box; letter-spacing: 0.6px;} .main_success .success_cont .board_ul > li:hover .txt {border-color:#000;} .main_success .success_cont .board_ul > li .txt strong {display:block;font-size:22px;font-weight:700;color:#111;letter-spacing:-0.6px;} .main_success .success_cont .board_ul > li .txt ul {margin-top:9px;min-height:120px;} .main_success .success_cont .board_ul > li .txt ul li {font-size:16px;font-weight:400;color:#666;padding-left:6px;position:relative;} .main_success .success_cont .board_ul > li .txt ul li + li {margin-top:5px;} .main_success .success_cont .board_ul > li .txt ul li:before {content:'·';display:block;position:absolute;font-size:inherit;font-weight:inherit;color:inherit;top:0;left:0;} @media only screen and (max-width:1400px) { .main_success {padding-top:104px;margin-top:0;} } @media only screen and (max-width:1320px) { .main_success .success_cont .board_ul > li .thumb {height:0;padding-bottom:65.7%;} } @media only screen and (max-width:1217px) { } @media only screen and (max-width:1024px) { .main_success .success_cont .board_ul > li .txt strong {font-size:20px;} } @media only screen and (max-width:860px) { } @media only screen and (max-width:768px) { .main_success .success_cont .board_ul > li .txt {padding:20px;} .main_success .success_cont .board_ul > li .txt strong {font-size:19px;} .main_success .success_cont .board_ul > li .txt ul {min-height:123px;} .main_success .success_cont .board_ul > li .txt ul li {font-size:15px;} .main_success .success_cont .swiper-pagination-progressbar {width:100%;height:2px;background:#ddd;position:relative;margin-top:30px;} .main_success .success_cont .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background:#333;} } @media only screen and (max-width:640px) { .main_success .main_tab {justify-content: flex-start !important;} .main_success .tab_wrap, .main_success .main_tab_con .swiper-container {width: calc(100% + 30px);margin-left: -15px;box-sizing: border-box;padding: 0 15px;} .main_success .success_cont .board_ul > li .thumb {height:0;padding-bottom:100%;} .main_success .success_cont .board_ul > li .txt {padding:15px;} .main_success .success_cont .board_ul > li .txt strong {font-size:17px;} .main_success .success_cont .board_ul > li .txt ul li {font-size:14px;} } @media only screen and (max-width:425px) { .main_success .success_cont .board_ul > li .txt strong {font-size:16px;} .main_success .success_cont .board_ul > li .txt ul {min-height:123px;} .main_success .success_cont .board_ul > li .txt ul li {font-size:13px;} } @media only screen and (max-width:320px) { } /* 원스탑 시스텝 */ .main_onestop {padding-top:100px;margin-top:-100px;} .main_onestop .main_cont {position:relative;background:#fbf8f4;} .main_onestop .main_cont {} .main_onestop .w_custom {position:relative;} .main_onestop .w_custom:before {content:'';display:block;position:absolute;width:48px;height:180px;background:url('../images/skin/main-onestop-object.png') no-repeat center;background-size:100%;top:-152px;left:63px;} .main_onestop .onestop_cont {text-align:center;} .main_onestop .onestop_cont ul {display:flex;position:relative;} .main_onestop .onestop_cont ul:before {content:'';display:block;position:absolute;width:80%;height:1px;background:#aaa;opacity:0.2;left:50%;top:65px;transform:translateX(-50%);} .main_onestop .onestop_cont ul li {display:inline-block;width:16.666%;text-align:center;position:relative;} .main_onestop .onestop_cont ul li + li {} .main_onestop .onestop_cont ul li + li:after {content:'';display:block;position:absolute;width:7px;height:13px;background:url('../images/skin/main-onestop-arw.png') no-repeat center;background-size:auto 100%;top: 59px;left: -3.5px;} .main_onestop .onestop_cont ul li .icon {width:130px;height:130px;border-radius:100%;background:#fff;margin:0 auto;position:relative;z-index:2;display:flex;justify-content: center;align-items: center;} .main_onestop .onestop_cont ul li .icon:before {content:'';display:block;position:absolute;width:calc(100% - 30px);height:calc(100% - 30px);top:50%;left:50%;transform:translate(-50%,-50%);box-shadow: 0 0 38px 0 rgba(0, 0, 0, 0.08);border-radius:100%;} .main_onestop .onestop_cont ul li .icon img {} .main_onestop .onestop_cont ul li .txt_box {padding-top:20px;} .main_onestop .onestop_cont ul li .txt_box span {font-size:16px;line-height:1;font-weight:400;color:#333;letter-spacing:0;display:block;} .main_onestop .onestop_cont ul li .txt_box strong {font-size:22px;line-height:1;font-weight:400;color:#222;padding-top:20px;display:block;} .main_onestop .onestop_cont .btn_more {padding:0 55px;} @media only screen and (max-width:1400px) { .main_onestop {padding:0;margin:0;} } @media only screen and (max-width:1320px) { .main_onestop .onestop_cont .btn_more {padding:0 4.16%;} } @media only screen and (max-width:1217px) { } @media only screen and (max-width:1024px) { .main_onestop .w_custom:before {width:38px;height:160px;} .main_onestop .onestop_cont ul {width:calc(100% + 30px);margin-left:-15px;} .main_onestop .onestop_cont ul:before {top:55px;} .main_onestop .onestop_cont ul li + li:after {top:49px;} .main_onestop .onestop_cont ul li .icon {width:110px;height:110px;} .main_onestop .onestop_cont ul li .icon:before {width:calc(100% - 15px);height:calc(100% - 15px);} .main_onestop .onestop_cont ul li .icon img {transform:scale(0.8);} .main_onestop .onestop_cont ul li .txt_box span {font-size:15px;} .main_onestop .onestop_cont ul li .txt_box strong {font-size:18px;padding-top:15px;} .main_onestop .onestop_cont .btn_more {padding:0 5%;} } @media only screen and (max-width:860px) { .main_onestop .w_custom:before {width:28px;height:140px;} .main_onestop .onestop_cont ul:before {top:45px;} .main_onestop .onestop_cont ul li + li:after {top:39px;} .main_onestop .onestop_cont ul li .icon {width:90px;height:90px;} } @media only screen and (max-width:768px) { .main_onestop .w_custom:before {display:none;} .main_onestop .onestop_cont ul {display:flex;flex-wrap: wrap;width:80%;margin:0 auto;} .main_onestop .onestop_cont ul:before {display:none;} .main_onestop .onestop_cont ul li {width:33.333%;} .main_onestop .onestop_cont ul li + li:after {top:49px;} .main_onestop .onestop_cont ul li:nth-of-type(3n+1):after {display:none;} .main_onestop .onestop_cont ul li:nth-of-type(n+4) {margin-top:30px;} .main_onestop .onestop_cont ul li .icon {width:110px;height:110px;} .main_onestop .onestop_cont ul li .icon:before {width:calc(100% - 20px);height:calc(100% - 20px);} .main_onestop .onestop_cont ul li .txt_box span {font-size:14px;} .main_onestop .onestop_cont .btn_more {padding:0 6%;} } @media only screen and (max-width:640px) { .main_onestop .onestop_cont ul {width:100%;} .main_onestop .onestop_cont ul li .txt_box span {font-size:13px;} .main_onestop .onestop_cont ul li .txt_box strong {font-size:16px;} .main_onestop .onestop_cont .btn_more {padding:0 6.5%;} } @media only screen and (max-width:425px) { .main_onestop .onestop_cont ul {width:calc(100% + 50px);margin-left:-25px;} .main_onestop .onestop_cont ul li .icon {width:80px;height:80px;} .main_onestop .onestop_cont ul li + li:after {top:33px;} .main_onestop .onestop_cont ul li .icon:before {width:calc(100% - 18px);height:calc(100% - 18px);} .main_onestop .onestop_cont ul li .icon img {transform:scale(0.7);} .main_onestop .onestop_cont ul li .txt_box span {font-size:12px;} .main_onestop .onestop_cont ul li .txt_box strong {font-size:15px;} .main_onestop .onestop_cont .btn_more {padding:0 7.7%;} } @media only screen and (max-width:375px) { .main_onestop .onestop_cont ul {width:calc(100% + 30px);margin-left:-15px;} .main_onestop .onestop_cont .btn_more {padding:0 9%;} } @media only screen and (max-width:320px) { .main_onestop .onestop_cont ul {width:calc(100% + 10px);margin-left:-5px;} } /* 서비스 이용안내 */ .main_service {padding-bottom:0 !important;padding-top: 204px;margin-top: -100px;} .main_service .service_cont {margin-top:20px;padding-bottom:40px;position:relative;} .main_service .service_cont:before {content:'';display:block;position:absolute;width:81px;height:170px;background:url('../images/skin/main-service-object.png') no-repeat center;background-size:100%;bottom:0;right:100px;z-index:3;} .main_service .service_cont ul {} .main_service .service_cont ul li {display:flex;width:100%;position:relative;} .main_service .service_cont ul li a {position:absolute;width:100%;height:100%;top:0;left:0;} .main_service .service_cont ul li .txt_box {border:1px solid #ddd;border-right:0;border-radius:20px 0 0 20px;box-sizing:border-box;width:50%;padding:0 80px;display: flex;align-items: flex-start;flex-direction: column;justify-content: center;} .main_service .service_cont ul li .txt_box em {font-size:20px;line-height:1;font-weight:400;color:#bf9973;display:block;} .main_service .service_cont ul li .txt_box strong {font-size:48px;line-height:1.29;font-weight:500;color:#111;display:block;margin-top:20px;} .main_service .service_cont ul li .txt_box span {font-size:16px;line-height:1;font-weight:400;color:#444;padding-right:16px;display:inline-block;position:relative;margin-top:52px;} .main_service .service_cont ul li .txt_box span:after {content:'';position:absolute;width:6px;height:6px;border:1px solid #666;border-width:2px 2px 0 0;transform: translate(-44%,-50%) rotate(45deg);font-size:0;position:absolute;top: 50%;right: 0;transition:all 0.4s;font-size:0;} .main_service .service_cont ul li .img_box {border-radius:0 20px 20px 0;overflow:hidden;width:50%;} .main_service .service_cont ul li .img_box img {width:100%;height:100%;object-fit:cover;} #wrap .main_service .service_cont .swiper-arrow {top:55%;} @media only screen and (max-width:1400px) { .main_service {margin:0;padding-top:104px;} } @media only screen and (max-width:1320px) { .main_service .service_cont ul li .txt_box {padding:6.3% 6%;} } @media only screen and (max-width:1217px) { } @media only screen and (max-width:1024px) { .main_service .service_cont {padding-bottom:45px;} .main_service .service_cont:before {width:50px;height:145px;right: 60px;} .main_service .service_cont ul li .txt_box {padding:6.3% 5%;} .main_service .service_cont ul li .txt_box em {font-size:18px;} .main_service .service_cont ul li .txt_box strong {font-size:42px;} } @media only screen and (max-width:860px) { .main_service .service_cont {margin:0;} } @media only screen and (max-width:768px) { .main_service .service_cont {padding-bottom:33px;} .main_service .service_cont:before {width:40px;height:115px;right: 37px;} .main_service .service_cont ul li {display:block} .main_service .service_cont ul li .txt_box, .main_service .service_cont ul li .img_box {width:100%;} .main_service .service_cont ul li .txt_box {border-radius:10px 10px 0 0;border:1px solid #ddd;border-bottom:0;} .main_service .service_cont ul li .img_box {border-radius:0 0 10px 10px;} .main_service .service_cont ul li .txt_box em {font-size:17px;} .main_service .service_cont ul li .txt_box strong {font-size:38px;} .main_service .service_cont ul li .txt_box span {font-size:15px;margin-top:23px;} } @media only screen and (max-width:640px) { .main_service .service_cont ul li .txt_box {padding:30px;} .main_service .service_cont ul li .txt_box em {font-size:16px;} .main_service .service_cont ul li .txt_box strong {font-size:30px;} } @media only screen and (max-width:425px) { .main_service {padding-bottom:9%;} .main_service .service_cont:before {width:40px;height:85px;} .main_service .service_cont ul li .txt_box em {font-size:15px;} .main_service .service_cont ul li .txt_box strong {font-size:26px;} .main_service .service_cont ul li .txt_box span {font-size:14px;} } @media only screen and (max-width:320px) { } /* 가치 */ .main_value {padding:160px 0 150px;} .main_value .value_cont {} .main_value .value_cont .value_list {font-size:0;} .main_value .value_cont .value_list li {display:inline-block;width:33.333%;text-align:center;} .main_value .value_cont .value_list li .icon {display:block;width:100px;height:100px;border:1px solid rgba(0,0,0,0.08);border-radius:100%;display:flex;align-items: center;justify-content: center;margin:0 auto;} .main_value .value_cont .value_list li .icon img {} .main_value .value_cont .value_list li dl {padding-top:22px;} .main_value .value_cont .value_list li dl dt {font-size:20px;font-weight:500;color:#333;} .main_value .value_cont .value_list li dl dd {} .main_value .value_cont .value_list li dl dd .number {padding:18px 0 11px;} .main_value .value_cont .value_list li dl dd .number strong {display:inline-block;font-size:64px;font-weight:700;color:#000;} .main_value .value_cont .value_list li dl dd .number span {display:inline-block;font-size:24px;font-weight:700;color:#000;} .main_value .value_cont .value_list li dl dd p {display:inline-block;font-size:15px;line-height:1;font-weight:400;color:#888;} @media only screen and (max-width:1320px) { .main_value {padding:12% 0 11%;} } @media only screen and (max-width:1217px) { .main_value .value_cont .value_list li dl dt {font-size:18px;} .main_value .value_cont .value_list li dl dd .number strong {font-size:50px;} .main_value .value_cont .value_list li dl dd .number span {font-size:22px;} } @media only screen and (max-width:1024px) { .main_value .value_cont .value_list li dl dt {font-size:17px;} .main_value .value_cont .value_list li dl dd .number strong {font-size:42px;} .main_value .value_cont .value_list li dl dd .number span {font-size:20px;} .main_value .value_cont .value_list li dl dd p {font-size:14px;} } @media only screen and (max-width:860px) { .main_value .value_cont .value_list li dl dt {font-size:16px;} .main_value .value_cont .value_list li dl dd .number strong {font-size:37px;} .main_value .value_cont .value_list li dl dd .number span {font-size:16px;} .main_value .value_cont .value_list li dl dd p {font-size:14px;} } @media only screen and (max-width:768px) { } @media only screen and (max-width:540px) { .main_value .value_cont .value_list {padding:0 25px;} .main_value .value_cont .value_list li {width:100%;display:flex;} .main_value .value_cont .value_list li + li {margin-top:32px;} .main_value .value_cont .value_list li .icon {width:90px;height:90px;} .main_value .value_cont .value_list li .icon img {transform:scale(0.9);} .main_value .value_cont .value_list li dl {text-align:left;width:calc(100% - 90px);padding-top:0;padding-left:20px;box-sizing:border-box;} .main_value .value_cont .value_list li dl dd .number {padding:5px 0 13px;} } @media only screen and (max-width:425px) { .main_value {padding:17% 0 16%;} .main_value .value_cont .value_list li .icon {width:80px;height:80px;} .main_value .value_cont .value_list li .icon img {transform:scale(0.875);} .main_value .value_cont .value_list li dl dt {font-size:15px;line-height:1;} .main_value .value_cont .value_list li dl dd .number strong {font-size:32px;} .main_value .value_cont .value_list li dl dd .number span {font-size:12px;} .main_value .value_cont .value_list li dl dd p {font-size:12px;} } @media only screen and (max-width:320px) { .main_value .value_cont .value_list {padding:0;} } /* 무료상담배너 */ .main_contact {position:relative;} .main_contact:after {content:'';display:block;position:absolute;width:50%;height:100%;background:#191d22;right:0;top:0;z-index: -1;} .main_contact .contact_bnr {height:250px;background:#191d22;border-radius:20px 0 0 20px;padding:0 100px;box-sizing:border-box;display:flex;justify-content: space-between;align-items: center;} .main_contact .contact_bnr .txt_box {} .main_contact .contact_bnr .txt_box span {display:block;font-size:22px;line-height:1;font-weight:400;color:#fff;} .main_contact .contact_bnr .txt_box strong {display:block;font-size:40px;font-weight:700;color:#fff;padding-top:17px;} .main_contact .contact_bnr .btn_more {margin:0;} @media only screen and (max-width:1320px) { .main_contact:after {display:none;} .main_contact .w_custom {padding:0 !important;} .main_contact .contact_bnr {width:100%;height:auto;padding:5.3% 7.5%;border-radius:0;} } @media only screen and (max-width:1217px) { .main_contact .contact_bnr {padding:5.3% 5%;} } @media only screen and (max-width:1024px) { .main_contact .contact_bnr .txt_box span {font-size:20px;} .main_contact .contact_bnr .txt_box strong {font-size:35px;} } @media only screen and (max-width:860px) { .main_contact .contact_bnr .txt_box span {font-size:19px;} .main_contact .contact_bnr .txt_box strong {font-size:30px;} } @media only screen and (max-width:768px) { .main_contact .contact_bnr {padding:7% 5%;} } @media only screen and (max-width:640px) { .main_contact .contact_bnr {padding:30px 0;} .main_contact .contact_bnr {display:block;text-align:center;} .main_contact .contact_bnr .txt_box span {font-size:17px;} .main_contact .contact_bnr .txt_box strong {font-size:26px;padding-top:13px;} .main_contact .contact_bnr .btn_more {margin-top:20px;} } @media only screen and (max-width:425px) { .main_contact .contact_bnr .txt_box span {font-size:15px;} .main_contact .contact_bnr .txt_box strong {font-size:20px;} .main_contact .contact_bnr .btn_more {margin-top:15px;} } @media only screen and (max-width:320px) { .main_contact .contact_bnr .txt_box strong {font-size:18px;} } /* partner */ .main_partner {padding-top:150px;padding-bottom:0;} .main_partner .main_title {padding-bottom:15px;} .main_partner .main_title h2 {font-size:60px;} .main_partner .partner_cont {} .main_partner .partner_cont .swiper-container {overflow:visible;} .main_partner .partner_cont .pc_sld {display:flex;} .main_partner .partner_cont .mobile_sld {display:none;} .main_partner .partner_cont ul {font-size:0;padding:30px 0;transition-timing-function: linear;} .main_partner .partner_cont ul li {width:235px;height:80px;vertical-align:middle;background:#fff;box-shadow: 0 0 32px rgba(0,0,0,0.1);border-radius:10px;display:inline-flex;justify-content: center;align-items: center;} .main_partner .partner_cont ul li img {} @media only screen and (max-width:1320px) { .main_partner {padding-top:12.5%;} } @media only screen and (max-width:1217px) { .main_partner .partner_cont ul li {width:210px;height:70px;} .main_partner .partner_cont ul li img {transform:scale(0.75);} } @media only screen and (max-width:1024px) { .main_partner .main_title h2 {font-size:41px;} .main_partner .partner_cont ul li {width:190px;height:65px;} .main_partner .partner_cont ul li img {transform:scale(0.70);} } @media only screen and (max-width:860px) { .main_partner .main_title h2 {font-size:31px;} .main_partner .partner_cont ul li {width:160px;height:60px;} .main_partner .partner_cont ul li img {transform:scale(0.65);} } @media only screen and (max-width:768px) { .main_partner .main_title h2 {font-size:29px;} } @media only screen and (max-width:640px) { .main_partner .main_title {padding-bottom:25px;} .main_partner .partner_cont .pc_sld {display:none;} .main_partner .partner_cont .mobile_sld {display:block;} .main_partner .partner_cont ul {padding:7.5px 0;} .main_partner .partner_cont ul li {width:130px;height:45px;box-shadow:0 0 15px rgba(0,0,0,0.1);border-radius:5px;} .main_partner .partner_cont ul li img {transform:scale(0.55);} } @media only screen and (max-width:425px) { .main_partner {padding-top:16.5%;} .main_partner .main_title h2 {font-size:30px;} .main_partner .partner_cont ul li {width:117px;height:40px;} .main_partner .partner_cont ul li img {transform:scale(0.5);} } @media only screen and (max-width:320px) { } /* 동영상 */ .main_video {padding-top:180px;} .main_video .w_custom {display:flex;flex-direction: row-reverse;align-items: center;} .main_video .video_right {width:calc(100% - 600px);padding-left:100px;box-sizing:border-box;} .main_video .video_right .main_title {text-align:left;padding-bottom:46px;} .main_video .video_right .main_title h2 {font-size:60px;} .main_video .video_right .main_title h2 span {font-size:54px;} .main_video .video_right .thumb_slide {position:relative;padding-top:56px;} .main_video .video_right .thumb_slide .slick-list {width:calc(100% + 20px);margin-left:-10px;} .main_video .video_right .thumb_slide li {cursor:pointer;padding:0 10px;width:33.333%;} .main_video .video_right .thumb_slide li .thumb {position:relative;width:100%;height:0;padding-bottom:56%;border-radius:10px;overflow:hidden;background:#000;} .main_video .video_right .thumb_slide li .thumb img {position:absolute;width:100%;height:100%;object-fit:cover;top:50%;left:50%;transform:translate(-50%,-50%);} .main_video .video_right .thumb_slide li.slick-current .thumb:before {content:'';display:block;position:absolute;width:100%;height:100%;border-radius:10px;box-sizing:border-box;border:1px solid #2b2e83;} .main_video .video_right .thumb_slide li.slick-current .thumb img {opacity:0.5;} .main_video .video_right .thumb_slide li p {font-size:16px;line-height:1;font-weight:400;color:#333;display:block;text-align:center;padding-top:10px;} .main_video .video_right .thumb_slide .slick-arrow {width:9px;height:16px;position:absolute;font-size:0;top:0;} .main_video .video_right .thumb_slide .slick-arrow:before {content:'';position:absolute;width:8px;height:8px;border:1px solid #aaa;border-width:2px 2px 0 0;transform: translate(-44%,-50%) rotate(45deg);font-size:0;position:absolute;top: 50%;left: 1px;transition:all 0.4s;font-size:0;} .main_video .video_right .thumb_slide .slick-arrow:hover:before {border-color:#000;} .main_video .video_right .thumb_slide .slick-prev:before {border-width: 0 0 2px 2px;left: 5px;transform: translate(0,-50%) rotate(45deg);} .main_video .video_right .thumb_slide .slick-next {left:29px;} .main_video .video_left {width:600px;height:340px;position:relative;} .main_video .video_left:before {content:'';display:block;position:absolute;width:51px;height:190px;background:url('../images/skin/main-video-object.png') no-repeat center;background-size:100%;top:-100px;left:30px;z-index:3;} .main_video .video_left .video_slide {width:100%;height:100%;border-radius:20px;overflow:hidden;} .main_video .video_left .video_slide li {background:#000;} .main_video .video_left .video_slide li > div {height:0;padding:56.25% 0 0 0;position:relative;} .main_video .video_left .video_slide li > div iframe {position:absolute;top:auto !important;bottom:0 !important;left:0;width:100%;height:100%;} @media only screen and (max-width:1320px) { .main_video {padding-top:13.6%;} .main_video .video_right {padding-left:80px;} } @media only screen and (max-width:1217px) { .main_video .video_left {width:550px;height: 100%;} .main_video .video_right {width:calc(100% - 550px);} } @media only screen and (max-width:1100px) { .main_video .video_left {width:500px;} .main_video .video_right {width:calc(100% - 500px);padding-left:60px;} } @media only screen and (max-width:1024px) { .main_video .video_right .main_title {padding-bottom:35px;} .main_video .video_right .main_title h2 {font-size:45px;} .main_video .video_right .main_title h2 span {font-size:41px;} .main_video .video_left {width:450px;} .main_video .video_left:before {width:40px;height:160px;top:-80px;left:20px;} .main_video .video_right {width:calc(100% - 450px);padding-left:40px;} } @media only screen and (max-width:860px) { .main_video .w_custom {display:block;} .main_video .video_right .main_title h2 {font-size:35px;text-align:center;} .main_video .video_right .main_title h2 span {font-size:31px;} .main_video .video_left, .main_video .video_right {width:100%;display:block;padding:0;} .main_video .video_right .thumb_slide {display:none;} .main_video .video_left:before {width:30px;height:110px;top:-60px;left:20px;} } @media only screen and (max-width:768px) { .main_video .video_right .main_title h2 {font-size:32px;} .main_video .video_right .main_title h2 span {font-size:29px;} } @media only screen and (max-width:640px) { } @media only screen and (max-width:425px) { .main_video {padding-top:17.6%;} .main_video .video_left:before {width:25px;height:80px;top:-50px;left:15px;} .main_video .video_left .video_slide {border-radius:10px;} .main_video .video_right .main_title {padding-bottom:22px;} .main_video .video_right .main_title h2 {font-size:30px;} .main_video .video_right .main_title h2 span {font-size:27px;} } @media only screen and (max-width:320px) { } /* text */ .main_float_txt {padding:120px 0;height:85px;overflow:hidden;} .main_float_txt .move_txt .txt_box span {position:absolute;font-size:100px;line-height:0.8;font-weight:900;color:#fff;text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;white-space: nowrap;will-change: transform;animation: marquee 60s linear infinite; font-family:'Noto Sans KR';opacity:0.2;} /* 애니메이션 */ @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media only screen and (max-width:1320px) { .main_float_txt {padding:9% 0;} } @media only screen and (max-width:1217px) { .main_float_txt {height:90px;} .main_float_txt .move_txt .txt_box span {font-size:90px;} } @media only screen and (max-width:1024px) { .main_float_txt {height:80px;} .main_float_txt .move_txt .txt_box span {font-size:80px;} } @media only screen and (max-width:860px) { } @media only screen and (max-width:768px) { .main_float_txt {height:70px;} .main_float_txt .move_txt .txt_box span {font-size:70px;} } @media only screen and (max-width:640px) { .main_float_txt {height:60px;padding:11% 0;} .main_float_txt .move_txt .txt_box span {font-size:60px;} } @media only screen and (max-width:425px) { .main_float_txt {padding:70px 0;height:50px;} .main_float_txt .move_txt .txt_box span {font-size:50px;} } @media only screen and (max-width:375px) { .main_float_txt {padding:18% 0;} } @media only screen and (max-width:320px) { } /*─────────────────────────────────────────────────────────── common ───────────────────────────────────────────────────────────*/ /* pc 일반 */ input[type="checkbox"] { display:none; } input[type="checkbox"] + label {cursor:pointer;} input[type="checkbox"] + label:before, input[type="checkbox"] + label::before { display:inline-block; content:""; width:25px; height:25px; margin:-2px 5px 0 0; vertical-align:middle; background:url("../images/sub/icon_check.png") no-repeat 0 50%; cursor:pointer; background-size:100% auto;} input[type="checkbox"]:checked + label:before, input[type="checkbox"]:checked + label::before { background:url("../images/sub/icon_check_on.png") no-repeat 0 50%; background-size:100% auto;} @media only screen and (max-width:768px) { input[type="checkbox"] + label:before, input[type="checkbox"] + label::before {width:20px;height:20px;} } /*─────────────────────────────────────────────────────────── Board | 게시판 ───────────────────────────────────────────────────────────*/ /* faq */ .board_faq {border-top:2px solid #000;width:100%;} .board_faq dl {border-bottom:1px solid #ddd;} .board_faq dl dt, .board_faq dl dd {padding:0 55px;position:relative;} .board_faq dl dt {font-size:18px;font-weight:500;color:#333;padding:19px 55px;cursor:pointer;} .board_faq dl dt:after {width:10px;height:10px;content:"";border:1px solid #000;border-width:2px 2px 0 0;transform:rotate(135deg);position: absolute;top:40%;right:33px;} .board_faq dl dt.on:after {border-color: #bf9973;transform: rotate(-45deg);top:45%;} .board_faq dl dt > div, .board_faq dl dd > div {display: flex !important;align-items: center;align-items: flex-start;} .board_faq dl dd .board_cont {font-size:16px;line-height:1.88;font-weight:400;color:#666;} .board_faq dl dd .board_cont:before {} .board_faq dl dt h3, .board_faq dl dt strong {font-size:inherit;font-weight:inherit;display:block;width:80%;} .board_faq dl dt .board_tit:before, .board_faq dl dd .board_cont:before {content:'Q';display:inline-block;width:40px;height:40px;border-radius:100%;background:#bf9973;font-size:16px;line-height:40px;font-weight:700;color:#fff;text-align:center;} .board_faq dl dd .board_cont:before {content:'A';background:#191d22;color:#bf9973;} .board_faq dl dd {background:#f5f5f5;border-top:1px solid #000;padding:25px 33px 25px 55px;display:none;} .board_faq dl dt h3, .board_faq dl dd .cont {width:calc(100% - 40px);padding-left:20px;box-sizing:border-box;padding-top:5px;} @media only screen and (max-width:1024px) { .board_faq dl dt, .board_faq dl dd {padding-left:44px;padding-right:44px;} .board_faq dl dt:after {right:28px;} } @media only screen and (max-width:860px) { .board_faq dl dt, .board_faq dl dd {padding-left:30px;padding-right:30px;} .board_faq dl dt {font-size:17px;} .board_faq dl dd .board_cont {font-size:15px;} .board_faq dl dt:after {right:23px;} } @media only screen and (max-width:768px) { .board_faq dl dt, .board_faq dl dd {padding-left:20px;padding-right:20px;} .board_faq dl dt .board_tit:before, .board_faq dl dd .board_cont:before {width:35px;height:35px;font-size:15px;line-height:35px;} .board_faq dl dt h3, .board_faq dl dd .cont {width:calc(100% - 35px);padding-left:15px;box-sizing:border-box;} .board_faq dl dt:after {right:18px;width:8px;height:8px;} } @media only screen and (max-width:640px) { .board_faq dl dt, .board_faq dl dd {padding-left:15px;padding-right:15px;} .board_faq dl dt {font-size:16px;} .board_faq dl dt:after {right:15px;} .board_faq dl dd .board_cont {font-size:14px;} .board_faq dl dt .board_tit:before, .board_faq dl dd .board_cont:before {width:30px;height:30px;font-size:14px;line-height:30px;} .board_faq dl dt h3, .board_faq dl dd .cont {width:calc(100% - 30px);padding-top:0;} } /* 게시판쓰기 */ table.bbs_write td .edit-box iframe + iframe {display:none;} .bbs_write_wrap {} .bbs_write_wrap > .txt {font-size:18px;font-weight:400;color:#222;padding:20px 0 30px;} /*** TABLE write ( board/_form_board_write ｜ board/_form_board_answer_write ｜ member/join ｜ member/mypage ｜ member/withdrawal ｜ member/change_pw ｜ member/periodic_change_pw ) ***/ table.bbs_write {table-layout:fixed;width:100%;text-align:left;box-sizing:border-box;} table.bbs_write.bbs_title{border-top: 2px solid #000;border-bottom:1px solid #ddd;} table.bbs_write th, table.bbs_write td {font-size: 18px;padding-top: 12.5px;padding-bottom: 12.5px;padding-left:0;padding-right: 40px;line-height:30px;border-bottom: 0;font-weight:300;color:#888;text-align:left;vertical-align:middle;box-sizing:border-box;} table.bbs_write th {padding-left: 50px;padding-right:25px;font-size: 18px;font-weight: 500;color: #333;background-color: #fff;line-height: 55px;} table.bbs_write td {} table.bbs_write th, table.bbs_write td, table.bbs_write tr span, table.bbs_write tr input, table.bbs_write tr select {vertical-align:top;} table.bbs_write tr span, table.bbs_write tr input, table.bbs_write tr select, table.bbs_write tr textarea, table.bbs_write tr label {color:#666;font-size:inherit;font-weight:400;} table.bbs_write tr input[name="is_secret"] + label {margin-bottom:5px;display:block;} table.bbs_write tr select {background:#fff;} table.bbs_write tr label.ex_radio {width:100%;display:block;} table.bbs_write tr input[type="radio"] + label.ex_radio:before, table.bbs_write tr input[type="radio"] + label.ex_radio::before {margin:-2px 5px 0 0;} table.bbs_write tr td #captcha_box {display:inline-block;width:auto;vertical-align:middle;margin-right:1px;} table.bbs_write tr td input[name="captcha"], table.bbs_write tr td .btn_reset, table.bbs_write tr td #refreshCode {vertical-align:middle !important;} table.bbs_write tr:first-of-type th, table.bbs_write tr:first-of-type td {padding-top:50px;} table.bbs_write tr:last-of-type th, table.bbs_write tr:last-of-type td {padding-bottom:42px;} table.bbs_write th .require_dot, table.bbs_write th .require_dot:before {line-height:inherit;height:inherit;color:#444;font-weight:400;display:inline-block;} table.bbs_write th .require_dot {padding-left:4px;} table.bbs_write th .require_dot:before {content:' *';font-size:inherit;vertical-align:middle;} table.bbs_write td p {line-height:20px;padding:5px 0 0;font-size:inherit;display:inline-block;margin:0;vertical-align:top;} table.bbs_write td div.view_cont {padding:8px 10px 50px 10px; line-height:26px; min-height:150px;} table.bbs_write td select, table.bbs_write td input[type="text"], table.bbs_write td input[type="password"], table.bbs_write td input[type="number"], table.bbs_write td input[type="date"] {min-width:29.2%;height:55px;line-height:55px;} table.bbs_write td input[type="text"]:focus, table.bbs_write td input[type="password"]:focus, table.bbs_write td input[type="number"]:focus, table.bbs_write td input[type="date"]:focus {border-color:#000;color:#333;} table.bbs_write td input[name="mobile"], table.bbs_write td input[name="email"] {min-width:65%;} table.bbs_write td input[name="title"] {width:100%;} table.bbs_write td input[name="zip"] {width:80px;min-width:70px;} table.bbs_write td input[name="address"], table.bbs_write td input[name="address2"] {width:55%;min-width:450px;} table.bbs_write td input.tel {min-width:50px;} table.bbs_write td textarea {min-width:100%;height:200px;} table.bbs_write td select.mail_select {margin-left:0px;margin-right:5px;} table.bbs_write td input[name="email_id"] {width:16%;min-width:120px;} table.bbs_write td input[name="email_domain"], table.bbs_write td select.mail_select {width:20%;min-width:140px;} table.bbs_write td input[name="email_domain"] {display:inline-block !important;} table.bbs_write .type_list {font-size:0;line-height:100%;} table.bbs_write .type_list li {display:inline-block;} table.bbs_write .type_list li + li {margin-left:10px;} table.bbs_write .type_list li input[type="radio"] + label {font-size:18px;font-weight:400;color:#666;width:auto;height:55px;line-height:55px;background:#f5f5f5;text-align:center;padding:0 24px;display:block;border-radius:10px;} table.bbs_write .type_list li input[type="radio"]:checked + label {background:#191d22;color:#fff;} table.bbs_write .type_list li input[type="radio"] + label:before {display:none;} table.bbs_write .input_file {} table.bbs_write .input_file td, table.bbs_write .input_file td input {vertical-align:middle;} table.bbs_write td .file_name {display: inline-block;vertical-align: top;} table.bbs_write td .file_name a {display:inline-block;vertical-align:middle;line-height:23px;} table.bbs_write td .file_name .file_no {margin-left:5px;} table.bbs_write td .at {display:inline-block;vertical-align:middle;margin:0 0 0 3px;} table.bbs_write .input_email input {display:inline-block !important;} /* 캡챠 */ table.bbs_write.captcha {} table.bbs_write.captcha th {text-align:center;} table.bbs_write.captcha th #captcha_box {} table.bbs_write.captcha th #captcha_box img {width:100% !important;height:auto !important;} table.bbs_write.captcha td {line-height:40px;vertical-align:middle;} table.bbs_write.captcha td input, table.bbs_write.captcha td span, table.bbs_write.captcha td button {vertical-align:middle !important;} /* 게시판 개인정보취급 */ .policy_cont {} .policy_cont > div {padding:60px 0 0;text-align:center;line-height:25px;} .policy_cont > div input[type=checkbox] {} .policy_cont > div label {margin-right:18px;font-size:18px;color:#333;font-weight:400;cursor:pointer;vertical-align: middle;} .policy_cont > div label:before {margin-right:16px;} .policy_cont > div label strong {color:#bf9973;} .policy_cont > div .btn_info {font-size:15px;font-weight:400;color:#666 !important;padding:0;border:0 !important;padding-right:15px;position:relative;line-height:1;height:auto;vertical-align:middle !important;} .policy_cont > div .btn_info:after {content:'';display:block;position:absolute;width:6px;height:11px;background:url('../images/sub/policy_all_arw.png') no-repeat center;background-size:100%;top:50%;right:0;transform:translateY(-50%);} #wrap .policy_layer_popup {width:500px;height:auto;border-radius:10px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;box-shadow:0 13px 43px rgba(0,0,0,0.21);padding:20px 20px 30px;box-sizing:border-box;border:1px solid #333;z-index:10;} #wrap .policy_layer_popup .layer_top {display:flex;align-items: center;justify-content: space-between;padding-bottom:20px;} #wrap .policy_layer_popup .layer_top strong {font-size:22px;line-height:1;font-weight:500;color:#333;} #wrap .policy_layer_popup .layer_top .btn_layer_close {width:19px;height:19px;background:url('../images/sub/layer_popup_x.png') no-repeat center;background-size:100%;font-size:0;} #wrap .policy_layer_popup .layer_cont { text-align: center; } #wrap .policy_layer_popup .layer_cont .agree_txt_box {padding:10px;background:#f5f5f5;border:0;border-radius:10px;overflow:hidden;text-align: left;} #wrap .policy_layer_popup .layer_cont .agree_txt_box textarea{font-size:15px;line-height:1.73;font-weight:400;color:#888;width:100%;border:0; border-radius:10px; background:#f5f5f5; padding:15px 20px; resize:none;height:230px;} #wrap .policy_layer_popup .layer_cont .agree_txt_box textarea::-webkit-scrollbar { width: 4px;} #wrap .policy_layer_popup .layer_cont .agree_txt_box textarea::-webkit-scrollbar-thumb {background: #888; border-radius: 4px;} #wrap .policy_layer_popup .layer_cont .agree_txt_box textarea::-webkit-scrollbar-track {border-radius: 5px;background:#ccc;} #wrap .policy_layer_popup .layer_cont .btn_wrap {padding-top:20px;text-align: center;} #wrap .policy_layer_popup .layer_cont .btn_wrap .btn_close {display:block;font-size:18px;line-height:50px;font-weight:500;color:#fff;background:#181c21;width:120px;height:50px;border-radius:25px;} /* 게시판 버튼 */ .sub_board .btn_wrap {} .sub_board .btn_wrap .btn {font-size:20px;line-height:70px;font-weight:500;color:#fff;width:200px;height:70px;border-radius:35px;letter-spacing:-0.03em;} .sub_board .btn_wrap .btn.btn_point {background:#bf9973 !important;border-color:#bf9973 !important;} @media only screen and (max-width:1024px) { .bbs_write_wrap > .txt {font-size:17px;padding:15px 0 25px;} table.bbs_write tr:first-of-type th, table.bbs_write tr:first-of-type td {padding-top:40px;} table.bbs_write tr:last-of-type th, table.bbs_write tr:last-of-type td {padding-bottom:40px;} table.bbs_write th, table.bbs_write td {font-size:17px;} table.bbs_write th {padding-left:30px;} table.bbs_write .type_list li input[type="radio"] + label {font-size:17px;padding: 0 22px;} table.bbs_write tr input[name="is_secret"] + label {font-size:15px;line-height:100%;} .policy_cont > div {padding-top:55px;} .policy_cont > div label {font-size:17px;} .policy_cont > div .btn_info {font-size:14px;} .sub_board .btn_wrap {padding-top:50px;} .sub_board .btn_wrap .btn {font-size:19px;line-height:65px;width:190px;height:65px;} #wrap .policy_layer_popup .layer_top strong {font-size:19px;} #wrap .policy_layer_popup .layer_cont .btn_wrap .btn_close {font-size:17px;} } @media only screen and (max-width:768px) { .bbs_write_wrap > .txt {font-size:16px;padding:10px 0 20px;} table.bbs_write tr:first-of-type th, table.bbs_write tr:first-of-type td {padding-top:30px;} table.bbs_write tr:last-of-type th, table.bbs_write tr:last-of-type td {padding-bottom:30px;} table.bbs_write th, table.bbs_write td {font-size:16px;line-height:50px;padding:8px 0;} table.bbs_write th {padding-left:20px;padding-right:20px;} table.bbs_write .type_list li input[type="radio"] + label {height:50px;line-height:50px;font-size:16px;padding: 0 20px;} table.bbs_write td select, table.bbs_write td input[type="text"], table.bbs_write td input[type="password"], table.bbs_write td input[type="number"], table.bbs_write td input[type="date"] {height:50px;line-height:50px;} table.bbs_write tr input[name="is_secret"] + label {font-size:14px;} .policy_cont > div {padding-top:50px;} .policy_cont > div label {font-size:16px;} .policy_cont > div label:before {margin-right:10px;} .sub_board .btn_wrap {padding-top:45px;} .sub_board .btn_wrap .btn {font-size:18px;line-height:60px;width:170px;height:60px;} #wrap .policy_layer_popup .layer_top {padding-bottom:15px;} #wrap .policy_layer_popup .layer_top strong {font-size:17px;} #wrap .policy_layer_popup .layer_cont .btn_wrap .btn_close {font-size:16px;} #wrap .policy_layer_popup .layer_cont .agree_txt_box textarea {font-size:14px;} #wrap .policy_layer_popup .layer_cont .btn_wrap .btn_close {height:45px;line-height:45px;font-size:16px;} } @media only screen and (max-width:640px) { .bbs_write_wrap > .txt {font-size:15px;} table.bbs_write tr:first-of-type th, table.bbs_write tr:first-of-type td {padding-top:25px;} table.bbs_write tr:last-of-type th, table.bbs_write tr:last-of-type td {padding-bottom:25px;} table.bbs_write th, table.bbs_write td {font-size:15px;line-height:45px;} table.bbs_write th {padding-left:15px;padding-right:15px;} table.bbs_write .type_list li + li {margin-left:5px;} table.bbs_write .type_list li input[type="radio"] + label {height:45px;line-height:45px;font-size:15px;padding: 0 15px;border-radius:5px;} table.bbs_write td select, table.bbs_write td input[type="text"], table.bbs_write td input[type="password"], table.bbs_write td input[type="number"], table.bbs_write td input[type="date"] {height:45px;line-height:45px;} table.bbs_write tr input[name="is_secret"] + label {font-size:13px;} .policy_cont > div {padding-top:40px;} .policy_cont > div label {font-size:15px;} .policy_cont > div .btn_info {font-size:13px;padding-right:13px;} .policy_cont > div .btn_info:after {width:5px;height:10px;} .sub_board .btn_wrap {padding-top:40px;} .sub_board .btn_wrap .btn {font-size:16px;line-height:53px;width:150px;height:55px;} #wrap .policy_layer_popup {width:calc(100% - 100px);} #wrap .policy_layer_popup .layer_top strong {font-size:16px;} #wrap .policy_layer_popup .layer_top .btn_layer_close {width:15px;height:15px;} #wrap .policy_layer_popup .layer_cont .agree_txt_box textarea {font-size:13px;padding:10px 15px;height:199px;} #wrap .policy_layer_popup .layer_cont .btn_wrap .btn_close {height:40px;line-height:40px;font-size:15px;} } @media only screen and (max-width:479px) { table.bbs_write colgroup col:first-of-type {min-width:auto;} } @media only screen and (max-width:425px) { .bbs_write_wrap > .txt {font-size:14px;} table.bbs_write tr:first-of-type th, table.bbs_write tr:first-of-type td {padding-top:20px;} table.bbs_write tr:last-of-type th, table.bbs_write tr:last-of-type td {padding-bottom:20px;} table.bbs_write th, table.bbs_write td {font-size:14px;line-height:40px;} table.bbs_write th {padding-left:0;padding-right:0;} table.bbs_write .type_list li input[type="radio"] + label {height:40px;line-height:40px;font-size:13px;padding: 0 10px;} table.bbs_write td select, table.bbs_write td input[type="text"], table.bbs_write td input[type="password"], table.bbs_write td input[type="number"], table.bbs_write td input[type="date"] {height:40px;line-height:40px;} table.bbs_write colgroup col:first-of-type {/*min-width:100px;*/width:24%;} .policy_cont > div {padding-top:35px;} .policy_cont > div label {font-size:14px;} .sub_board .btn_wrap .btn {font-size:15px;line-height:48px;width:150px;height:50px;} #wrap .policy_layer_popup {width:calc(100% - 30px);} #wrap .policy_layer_popup .layer_top strong {font-size:15px;} #wrap .policy_layer_popup .layer_cont .btn_wrap .btn_close {height:35px;line-height:35px;font-size:14px;width:90px;} } @media only screen and (max-width:320px) { table.bbs_write .type_list li input[type="radio"] + label {font-size:12px;padding:0 7px;} }