@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;overflow: visible;} #wrap #container {width:100%;margin:0;padding:0;} #wrap #footer {width:100%;margin:0;} /* #container 안의 레이아웃 */ #contents_wrap {width:1300px;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 213px 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 {position:relative; width:1200px;text-align:left;margin:0 auto;padding:0;box-sizing:border-box;} @media only screen and (max-width:1317px) { #contents_wrap {width:100%;padding-left:15px !important;padding-right:15px !important;} } @media only screen and (max-width:1217px) { body.on {height:100%;overflow:hidden;} .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 #contents_box{padding-bottom:150px;} } @media only screen and (max-width:860px) { } @media only screen and (max-width:767px) { #contents_wrap #side_box {display:none;} .sub_goods #contents_wrap #side_box {display:block;padding:0;} } @media only screen and (max-width:640px) { #contents_wrap #contents_box{padding-bottom:90px;} } @media only screen and (max-width:479px) { } @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;} } /*─────────────────────────────────────────────────────────── 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 {left:0;top:0;border:0;text-align:center;position:fixed;z-index:10;width:100%;box-sizing:border-box;font-size:0;border-bottom:1px solid #cccccc;background:#fff; transition:all 0.4s;} #header .w_set {width:100%;box-sizing:border-box;max-width:1180px;padding:0;margin:0 auto;} #header .w_set2 {position:relative;} #header .header_cont{position:relative;width: 1720px;margin:0 auto;display: flex;align-items: center;} #header .hd_logo {width: 178px;height: 54px;padding: 40px 0;margin-right: 121px; transition:all 0.4s;} #header .hd_logo a {background: url('../images/skin/hd_logo.png') no-repeat left;font-size: 0;display: block;height: 100%;background-size: auto 100%;font-size: 0;} #header .hd_lnb {margin:0;padding:0;font-size:0;vertical-align:top;text-align: left;display: flex;box-sizing:border-box;z-index:10;} #header .hd_lnb li, #header .hd_lnb li a {padding:0;font-size: 18px;font-weight: 600;color: #999;vertical-align: middle;text-align:center;display:inline-block;box-sizing:border-box;transition: all .2s;} #header .hd_lnb li {position:relative;} #header .hd_lnb li + li{margin-left: 65px;} #header .hd_lnb li a {padding:0;position:relative;z-index:1;} #header .hd_lnb li > a{padding: 19px 0;} #header .hd_lnb > li.on > a, #header .hd_lnb li > a:hover{color:#222;} #header .hd_lnb > li > a:after{position:absolute;content:'';width:0;height:0;border-radius:100%;background:#f39200;left:50%;bottom: 7px;transform:translateX(-50%);opacity:0;transition:all 0.4s;} #header .hd_lnb > li.on > a:after, #header .hd_lnb li a:hover:after{width:6px; height:6px; opacity:1;} #header .hd_lnb li .hd_lnb_dep2 {z-index: 55;display:none !important;position:absolute;left: 50%;transform: translateX(-50%);top:100%;background: #fff; border:1px solid #ddd; padding: 15px 0; border-radius:10px; overflow:hidden;} #header .hd_lnb li .hd_lnb_dep2 li{} #header .hd_lnb li .hd_lnb_dep2 li a{font-size: 16px; font-weight: 500; padding: 0 30px; width:max-content;} #header .hd_right {top:50%;right:30px; transform:translateY(-50%); 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;} #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 {display:none; position:relative;padding:0;width: 30px;height: 25px;box-sizing: border-box;margin-left: 30px;} #header .hd_right .menu-trigger span {transition:0.4s;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 .btn_scroll_top{position:fixed;right: -55px;bottom: 58px;font-size: 16px;font-weight:400;color:#fff;letter-spacing: 0;line-height: 1; cursor:pointer; opacity:0; transition:all 0.4s;} #header.down .btn_scroll_top{opacity:1; right: 55px;} #header.end .btn_scroll_top{opacity:0 !important; right: -55px !important;} #header .btn_scroll_top:before{display:block;content:'';width: 10px;height: 10px;border-top: 2px solid #fff;border-right:2px solid #fff;margin: 0 auto 1px;transform: rotate(-45deg);} #header .btn_scroll_top:after{position:absolute;content:'';width: 57px;height: 74px;background:#f39200;left: -13px;bottom: -18px;border-radius:100%;transform: rotate(20deg);z-index: -1;} /* main header */ .main_index #header{background:#fff0; border-bottom:0;} .main_index #header .hd_lnb li, .main_index #header .hd_lnb li a{color:#fff;} /* on */ #wrap #header.on .hd_logo{padding:30px 0;} #wrap #header.on, #wrap #header.over{background:#fff; border-bottom:1px solid #ddd;} #wrap #header.on .hd_lnb li, #wrap #header.on .hd_lnb li a, #wrap #header.over .hd_lnb li, #wrap #header.over .hd_lnb li a{color:#999;} #wrap #header.on .hd_lnb li a.on, #wrap #header.on .hd_lnb li a:hover, #wrap #header.over .hd_lnb li a.on, #wrap #header.over .hd_lnb li a:hover{color:#222;} /* 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: 3px;background-color: #000;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: 25px 37px 25px 38px;overflow-y:auto;position:relative;z-index:1;box-sizing:border-box;display:block;} #aside .aside_box .btn_aside_close {right: 20px;top: 25px;width: 21px;height: 22px;} #aside .aside_box .aside_logo {text-align:left;margin-bottom: 51px;} #aside .aside_box .aside_logo a {display:block;background:url('../images/skin/hd_logo.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:#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 {padding:0 0 50px 0;} #aside ul.slidemenu .depth1_li {text-align:left;display:block;vertical-align:top;font-size:0;position:relative;} #aside ul.slidemenu .depth1_li + .depth1_li {margin-top:0;margin-left:0;} #aside ul.slidemenu .depth1_li a{display:inline-block;vertical-align:middle;} #aside ul.slidemenu .depth1_li .icons {position:absolute; top:0; right:0; width:30px; height:60px;} #aside ul.slidemenu .depth1_li a {width:100%;} #aside ul.slidemenu .depth1_li .depth1_a {transition:0.2s;padding: 0 0;line-height: 3;font-size:20px;font-weight: 600;color: #222;padding-right: 30px;box-sizing: border-box;} #aside ul.slidemenu .depth1_li .depth1_a:before{/*position:absolute;content:'';top:50%;right: 2px;width: 7px;height: 7px;border-top: 2px solid #aaa;border-right: 2px solid #aaa;transform: rotate(45deg) translateY(-50%);*/} #aside ul.slidemenu .depth1_li .icons:before {/*position:absolute;content:'';top: 26px;right: 3px;width: 7px;height: 7px;border-top: 2px solid #aaa;border-right: 2px solid #aaa;transform: rotate(45deg);transition: all 0.4s;*/} #aside ul.slidemenu li.on > .icons:before {/*transform: rotate(135deg);border-color: #f39200;*/} #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: 10px 15px 20px;display:none;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 + li {margin-top:26px;} #aside ul.slidemenu .depth1_li .depth li a {font-size:16px;line-height:16px;color: #666;position:relative;padding-left: 14px;} #aside ul.slidemenu .depth1_li .depth li:before {content:"";display:block;width:2px;height:2px;position:absolute;left:0;top:8px;background: #666;} @media only screen and (max-width:1737px) { #header .header_cont{width: calc(100% - 40px);} } @media only screen and (max-width:1217px) { } @media only screen and (max-width:1023px) { #header .hd_logo{height:40px; padding:30px 0;} #header .hd_lnb{display:none;} /* on */ #wrap #header.over{background:#fff0; border-bottom:0;} #wrap #header.over .hd_lnb li a.on, #wrap #header.over .hd_lnb li a:hover{color:#fff;} #wrap #header.over .hd_lnb li, #wrap #header.over .hd_lnb li a{color:#fff;} #wrap #header.on{background:#fff; border-bottom:1px solid #ddd;} #wrap #header.on .hd_logo{padding:20px 0;} #wrap #header.on .hd_lnb li, #wrap #header.on .hd_lnb li a{color:#999;} #wrap #header.on .hd_lnb li a.on, #wrap #header.on .hd_lnb li a:hover{color:#222;} #header .hd_right{height:auto; right:0;} #header .hd_right .menu-trigger{display:inline-block; width:40px; height:30px;} #header .hd_right .menu-trigger span{width:100%; height:3px; background:#000;} .main_index #header .hd_right .menu-trigger span{background:#fff;} #wrap #header.on .hd_right .menu-trigger span{background:#000;} #header .hd_right .menu-trigger span:nth-of-type(2){top:auto; bottom:0; margin-top:0;} #header .btn_scroll_top{font-size:15px;font-weight: 500;letter-spacing: 0.2px;} } @media only screen and (max-width:860px) { #header .btn_scroll_top{} #header.down .btn_scroll_top{right: 46px;bottom: 50px;} #header .btn_scroll_top:before{width: 9px;height: 9px;} #header .btn_scroll_top:after{width: 57px;height: 75px;left: -13px;bottom: -21px;} } @media only screen and (max-width:767px) { } @media only screen and (max-width:640px) { #header .hd_logo{height:30px; padding:25px 0;} #wrap #header.on .hd_logo{padding:17px 0;} #header .hd_right .menu-trigger{width:20px; height:16px;} } @media only screen and (max-width:479px) { #aside {right: -87%;width: 87%;} #header .btn_scroll_top{} #header.down .btn_scroll_top{/* right:30px; */} #header .btn_scroll_top:after{} } /*─────────────────────────────────────────────────────────── FOOTER | outline/footer.html ───────────────────────────────────────────────────────────*/ #footer{background:#fff; border-top:1px solid #ddd;} #footer .cont{position:relative;width: 1720px;margin:0 auto;display:flex;align-items: flex-end;padding: 50px 0 52px;} #footer .cont .ftr_logo{font-size:0;} #footer .cont .ftr_logo .main{display:none;} #footer .cont .ftr_logo .sub{display:block;} #footer .cont .ftr_gnb{display:flex;margin-left:60px;} #footer .cont .ftr_gnb li{} #footer .cont .ftr_gnb li + li{margin-left:40px;} #footer .cont .ftr_gnb li a{font-size:18px; font-weight:500; color:#666; letter-spacing:-0.5px;} #footer .cont .copyright{position:absolute;top: 56%;right:0;transform:translateY(-50%);font-size:16px;font-weight: 400;color:#666;letter-spacing: -0.6px; line-height:150%;} @media only screen and (max-width:1740px) { #footer .cont{width:calc(100% - 40px);} } @media only screen and (max-width:1217px) { #footer .cont .ftr_gnb li a{font-size:17px;} #footer .cont .copyright{font-size:15px;} } @media only screen and (max-width:1023px) { #footer .cont{padding:40px 0;} #footer .cont .ftr_gnb{margin-left:40px;} #footer .cont .ftr_gnb li + li{margin-left:30px;} #footer .cont .ftr_gnb li a{font-size:16px;} #footer .cont .copyright{font-size:14px;} } @media only screen and (max-width:860px) { #footer .cont{display:block; text-align:center;} #footer .cont .ftr_gnb{justify-content:center; margin:30px 0;} #footer .cont .copyright{position:relative; top:auto; transform:none; width:100%;} } @media only screen and (max-width:479px) { #footer .cont .ftr_logo{width:78px; margin:0 auto;} #footer .cont .ftr_gnb li a{font-size:14px;} #footer .cont .copyright{font-size:12px;} } /*─────────────────────────────────────────────────────────── 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_content{} .main_thumb{position:relative;width:1720px;margin:13px auto 150px; background:url('../images/skin/main_thumb_img01.jpg') no-repeat center; background-size:100%; height:793px;} .main_tittle{text-align:center;margin-bottom: 185px;} .main_tittle h2{font-size:111px;font-weight:600;color:#f39200;font-family:'SCoreDream', 'Malgun Gothic', '맑은 고딕', dotum, sans-serif;letter-spacing: 4.5px;} .main_tittle h4{font-size:57px;font-weight:300;color:#fff;font-family:'SCoreDream', 'Malgun Gothic', '맑은 고딕', dotum, sans-serif;letter-spacing: 33px;} .main_works{} .main_works .board_ul{display:flex;} .main_works .board_li{position:relative; width:calc(100% / 3 - 30.67px);} .main_works .board_li + .board_li{margin-left:46px;} .main_works .board_li > a{position:absolute;top:0;left:0;width:100%;height:100%;z-index: 4;} .main_works .board_li .thumb{position:relative;border-radius:10px;overflow:hidden;box-shadow:0 5px 15px rgba(0,0,0,0.15);margin-bottom: 27px;} .main_works .board_li .thumb:before{position:absolute;content:'';width: 41px;height:53px;background:#f39200;top:50%;left:50%;transform: translate(-50%, -50%) rotate(25deg);border-radius: 100%;z-index: 2; transition:all 0.4s; opacity:0;} .main_works .board_li:hover .thumb:before{opacity:1;} .main_works .board_li .thumb:after{position:absolute;content:'';width: 41px;height:53px;background:url('../images/skin/main_more_arrow.png') no-repeat center;top:50%;left:50%;transform: translate(calc(-50% - 0.5px), calc(-50% - 0.5px));z-index: 3; transition:all 0.4s; opacity:0;} .main_works .board_li:hover .thumb:after{opacity:1;} .main_works .board_li .thumb img{width:100%; height:100%; object-fit:cover;} .main_works .board_li .thumb span{} .main_works .board_li .thumb span:before{position:absolute;content:'';width:100%;height:100%;background:rgba(0,0,0,0.3);top: 0;left: 0;z-index: 1;opacity: 0; transition:all 0.4s; border-radius:10px;} .main_works .board_li:hover .thumb span:before{opacity:1;} .main_works .board_li .txt{} .main_works .board_li .txt strong{display:block; font-size:28px; font-weight:600; color:#fff; letter-spacing:-0.5px; transition:all 0.4s; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .main_works .board_li:hover .txt strong{color:#f39200;} .main_works .btn_box{text-align: center;margin-top: 100px;} .main_works .btn_box .board_more{display:inline-flex;align-items: center;font-size:20px;font-weight:500;color:#fff;padding: 0 30px;border-radius:30px;background:#333;height: 60px;} .main_works .btn_box .board_more:after{display:inline-flex;content:'';width: 8px;height: 8px;border-top: 1px solid #fff;border-right: 1px solid #fff;transform: rotate(45deg);margin-left: 16px;} .main_location{padding: 0 100px;box-sizing:border-box;margin-top:150px;} .main_location .map_wrap{width:100%; height:400px; border-radius:10px; overflow:hidden;} .main_location .map_info{margin-top: 39px;} .main_location .map_info dl{display:flex;} .main_location .map_info dl + dl{margin-top: 9px;} .main_location .map_info dl dt, .main_location .map_info dl dd{font-size:18px;font-weight:400;color:#fff;letter-spacing: 0;} .main_location .map_info dl dt + dd{padding-left:4px;} .main_location .map_info dl dt a, .main_location .map_info dl dd a{font-size:inherit; font-weight:inherit; color:inherit;} .main_location .map_info dl dd{} @media only screen and (max-width:1737px) { .main_thumb{width:100%; width:calc(100% - 40px); height:45.7vw;} } @media only screen and (max-width:1217px) { .main_thumb{margin-bottom:12.2vw;} .main_tittle{margin-bottom:15.2vw;} .main_tittle h2{font-size:9vw;} .main_tittle h4{font-size:4.7vw; letter-spacing:0.55em;} .main_works .board_li .txt strong{font-size:26px;} .main_works .btn_box{margin-top:8.2vw;} .main_works .btn_box .board_more{font-size:19px;} .main_location{padding:0 8vw; margin-top:12.3vw;} } @media only screen and (max-width:1023px) { .main_works .board_li {width:calc(100% / 3 - 10px);} .main_works .board_li + .board_li{margin-left:15px;} .main_works .board_li .thumb{margin-bottom: 18px;} .main_works .board_li .txt strong{font-size:22px;font-weight: 500;} .main_works .board_li .thumb:before, .main_works .board_li .thumb:after, .main_works .board_li .thumb span:before{display:none;} .main_works .board_li:hover .thumb img{opacity:1;} .main_works .board_li:hover .txt strong{color:#fff;} .main_works .btn_box .board_more{font-size:18px;} } @media only screen and (max-width:860px) { .main_works .board_li .txt strong{font-size:20px;} .main_works .btn_box .board_more{font-size:17px; height:55px;} .main_location{margin-top:100px;} .main_location .map_info{margin-top:28px;} .main_location .map_info dl dt, .main_location .map_info dl dd{font-size:17px;} } @media only screen and (max-width:767px) { .main_works .board_li .txt strong{font-size:18px;} .main_works .btn_box .board_more{font-size:17px; height:50px;} } @media only screen and (max-width:640px) { .for_pct{display:none;} .main_thumb{width:100%;background:url('../images/skin/m_main_thumb_img01.jpg') no-repeat center;background-size:100%;min-height:587px;height:157vw;margin-top:0;margin-bottom: 58px;} .main_works .board_ul{display:block;} .main_works .board_li{width:48%; margin:0 auto;} .main_works .board_li + .board_li{margin:30px auto 0;} .main_works .board_li .thumb{border-radius:5px;} .main_works .board_li .thumb img{ min-height:200px;} .main_works .btn_box .board_more{font-size:16px;height:45px;font-weight: 400;} .main_works .btn_box .board_more:after{margin-left: 10px;width:6px;height:6px;} .main_location{padding:0;} .main_location .map_wrap{border-radius:5px;height: 46.5vw;min-height:175px;} .main_location .map_info dl dt, .main_location .map_info dl dd{font-size:16px;font-weight: 300;} } @media only screen and (max-width:479px) { .main_works .board_li .txt strong{font-size:16px;} .main_works .btn_box{margin-top:50px;} .main_works .btn_box .board_more{font-size:15px; height:40px; padding:0 18px;} .main_location .map_info dl dt, .main_location .map_info dl dd{font-size:14px;} }