@charset "UTF-8"; body { background: #fff; } body * { letter-spacing: -0.05em; } .w_1920 { max-width: 1920px; margin: 0 auto; position: relative; } .w_1820 { max-width: 1820px; margin: 0 auto; position: relative; } .w_1480 { max-width: 1480px; margin: 0 auto; position: relative; } .w_1300 { max-width: 1300px; margin: 0 auto; position: relative; } .flex { display: -webkit-box; display: -ms-flexbox; display: flex; } header { background: #fff; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; position: fixed; left: 0; top: 0; z-index: 999; border-bottom: 1px solid #ddd; } header .header_wrap { display: flex; align-items: center; justify-content: space-between; padding: 34px 0; } header .header_wrap .logo { display: block; width: 100%; height: 100%; text-indent: -999px; width: 122px; height: 36px; background: url(../image/common/logo.png) no-repeat center; } header .header_wrap .gnb_wrap { text-align: center; display: flex; margin-left: 66px; } header .header_wrap .gnb_wrap li:not(:last-child) { margin-right: 70px; } header .header_wrap .gnb_wrap li > a { display: block; font-size: 18px; font-weight: bold; } header .header_wrap .gnb_wrap li > a:hover { color: #d3461e; } header .gsnb_wrap { position: absolute; left: 0; width: 100%; top: 104px; border-top: 1px solid #ddd; } header .gsnb_wrap .gsnb_ul { width: 100%; height: 70px; text-align: center; background-color: #fff; border-bottom: 1px solid #ddd; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: none; } header .gsnb_wrap .gsnb_ul>li { display: inline-block; } header .gsnb_wrap .gsnb_ul>li a { display: block; width: 100%; height: 100%; font-size: 18px; line-height: 70px; color: #444444; font-weight: normal; padding-right: 40px; } header .gsnb_wrap .gsnb_ul>li a:hover { color: #d3461e; } header .gsnb_wrap .gsnb_p { width: 100%; height: 440px; } header .gsnb_wrap .gsnb_p_inner { width: 1170px; text-align: left; background: #fff; -webkit-box-sizing: border-box; box-sizing: border-box; display: flex; margin: auto; height: 440px; } header .gsnb_wrap .gsnb_p .gsnb_p_menu { width: 300px; padding-top: 55px; display: flex; flex-direction: column; align-items: flex-start; } header .gsnb_wrap .gsnb_p .gsnb_p_menu>a { font-size: 18px; font-weight: bold; height: auto; line-height: 1em; position: relative; } header .gsnb_wrap .gsnb_p .gsnb_p_menu>a::after { content: "▶"; margin-left: 10px; font-size: 12px; line-height: 18px; opacity: 1; position: absolute; top: 1px; } header .gsnb_wrap .gsnb_p .gsnb_p_menu>a:hover { color: #d3461e; } header .gsnb_wrap .gsnb_p .gsnb_p_menu>a:hover::after { opacity: 1; } header .gsnb_wrap .gsnb_p .gsnb_p_menu>a:not(:last-child) { margin-bottom: 74px; } header .gsnb_wrap .gsnb_p .gsnb_p_product { flex: 1; } header .gsnb_wrap .gsnb_p .gsnb_02_ul.isHide { display: none; } header .gsnb_wrap .gsnb_p .gsnb_02_ul { display: flex; flex-wrap: wrap; } header .gsnb_wrap .gsnb_p .gsnb_02_ul li { width: 24.3333%; border: 1px solid #ddd; margin-top: -1px; margin-left: -1px; height: calc(420px / 2); display: flex; align-items: center; justify-content: center; padding: 15px; cursor: pointer; } header .gsnb_wrap .gsnb_p .gsnb_02_ul li:hover{ border-color: #d3461e; z-index: 2; position: relative; } header .gsnb_wrap .gsnb_p .gsnb_02_ul li:hover p { color: #d3461e; } header .gsnb_wrap .gsnb_p .gsnb_02_ul li img { margin: auto; width: 80%; } header .gsnb_wrap .gsnb_p .gsnb_02_ul li p { text-align: center; font-size: 20px; font-weight: 600; margin-top: 15px; } header .header_wrap .search_box { height: 24px; overflow: hidden; display: flex; width: 211px; } header .header_wrap .search_box:hover input { width: 170px; opacity: 1; } header .header_wrap .search_box .search { width: 24px; height: 24px; background: url(../image/common/magnifier.png) no-repeat center/contain; cursor: pointer; display: block; padding: 0; margin-left: auto; } header .header_wrap .search_box input { width: 0; height: 24px; border-bottom: 2px solid; -webkit-transition: all 0.3s; transition: all 0.3s; margin-right: 7px; opacity: 0; } footer { position: relative; z-index: 1; padding-bottom: 45px; } footer.main { background: #fff !important; } footer .f_top { font-size: 15px; padding-top: 45px; padding-bottom: 30px; -webkit-box-sizing: border-box; box-sizing: border-box; border-bottom: 1px solid #ddd; display: flex; justify-content: space-between; align-items: center; } footer .f_top .f_top_L ul{ display: flex; } footer .f_top .f_top_L ul li { color: #666; } footer .f_top .f_top_L ul li a { color: #444; } footer .f_top .f_top_L ul li.v_line { width: 1px; height: 10px; background: #444; margin: 5px 30px; } footer .f_top .f_top_R { color: #888; } footer .f_top .f_top_R ul{ display: flex; } footer .f_top .f_top_R ul li { padding-left: 30px; transition: all 0.3s; } footer .f_top .f_top_R ul li:nth-child(1) { background: url(../image/common/facebook.png) no-repeat left center/contain; } footer .f_top .f_top_R ul li:nth-child(3) { background: url(../image/common/instagram.png) no-repeat left center/contain; } footer .f_top .f_top_R ul li:nth-child(5) { background: url(../image/common/kakao.png) no-repeat left center/contain; } footer .f_top .f_top_R ul li:nth-child(7) { background: url(../image/common/blog.png) no-repeat left center/contain; } /* 호버 */ footer .f_top .f_top_R ul li:nth-child(1):hover { background: url(../image/common/facebook_a.png) no-repeat left center/contain; } footer .f_top .f_top_R ul li:nth-child(1):hover a{ color: #3a5ca9; } footer .f_top .f_top_R ul li:nth-child(3):hover { background: url(../image/common/instagram_a.png) no-repeat left center/contain; } footer .f_top .f_top_R ul li:nth-child(3):hover a{ color: #e24578; } footer .f_top .f_top_R ul li:nth-child(5):hover { background: url(../image/common/kakao_a.png) no-repeat left center/contain; } footer .f_top .f_top_R ul li:nth-child(5):hover a{ color: #3d2622; } footer .f_top .f_top_R ul li:nth-child(7):hover { background: url(../image/common/naver_a.png) no-repeat left center/contain; } footer .f_top .f_top_R ul li:nth-child(7):hover a{ color: #00c300; } footer .f_top .f_top_R ul li.v_line { width: 1px; height: 10px; background: #888; padding: 0; margin: 7px 15px; } footer .f_top .f_top_R ul li a { color: #888; } footer .f_bot { font-size: 15px; color: #666; padding-top: 30px; display: flex; align-items: center; justify-content: space-between } footer .f_bot .f_bot_L{ color: #666; line-height: 1.5em; } footer .f_bot .f_bot_L span{ margin-right: 10px; padding-right: 12px; display: inline-block; position: relative; } footer .f_bot .f_bot_L span::before{ content: ""; width: 1px; height: 12px; position: absolute; top: 5px; right: -1px; background-color: #aaa; } footer .f_bot .f_bot_L .copy { margin-top: 15px; color: #888; } footer .f_bot .f_bot_R { display: flex; align-items: center; } footer .f_bot .f_bot_R img:not(:last-child){ margin-right: 50px; } .quick_wrap { position: fixed; bottom: 248px; right: 50px; } .quick_wrap .q_item { width: 170px; height: 60px; margin-bottom: 10px; text-align: right; overflow: hidden; cursor: pointer; } .quick_wrap .q_item img { display: inline; } .quick_wrap .q_item img:nth-child(2) { opacity: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } .quick_wrap .q_item.on { width: 170px; } .quick_wrap .q_item.on img:nth-child(1) { display: none; } .quick_wrap .q_item.on img:nth-child(2) { opacity: 1; -webkit-transition: all 1s; transition: all 1s; -webkit-transform: translateX(0); transform: translateX(0); } .quick_wrap .q_item a { display: block; width: 100%; height: 100%; } .quick_wrap .q_item:last-child { position: relative; overflow: hidden; } .quick_wrap .q_item:last-child .sns_box { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 0 15px; -webkit-box-sizing: border-box; box-sizing: border-box; opacity: 0; } .quick_wrap .q_item:last-child .sns_box a { display: block; width: 28px; height: 28px; float: left; margin: 18px 3px; } .quick_wrap .q_item:last-child:hover .sns_box { opacity: 1; -webkit-transition: all 1.5s; transition: all 1.5s; } .top_btn { width: 60px; height: 60px; line-height: 60px; text-align: center; background: #888888; position: absolute; top: 0; right: 50px; } .top_btn a { display: block; width: 100%; height: 100%; color: #fff; } #container { padding-top: 104px; } /* quick버튼 모바일 */ .quick_mobile { width: 60px; height: 150px; /* background: red; */ position: fixed; right: 10px; bottom: 10px; } .quick_mobile a{ display: block; width: 60px; height: 60px; background: url(../image/common/q_call_btn.png) no-repeat center / contain; } .quick_mobile a:nth-child(1){ background: url(../image/common/q_call_btn.png) no-repeat center / contain; margin-bottom: 10px; } .quick_mobile a:nth-child(2){ background: url(../image/common/q_online_form.png) no-repeat center / contain; } /* 공통 */ .show-default { display: block !important; } .hide-default { display: none !important; } @media all and (max-width: 1900px) { .top_btn{ display: none; } } @media all and (max-width: 1850px) { .w_1820 { width: auto; margin-left: 25px; margin-right: 25px; } } @media all and (max-width: 1500px) { .w_1480{ width: auto; margin-left: 3.90625%; margin-right: 3.90625%; } } @media all and (max-width: 1400px) { header .header_wrap .gnb_wrap li:not(:last-child) { margin-right: 30px; } } @media all and (max-width: 1200px) { .show-1200 { display: block !important; } .hide-1200 { display: none !important; } .header_dim{ z-index: 998; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, .5); display: none; opacity: 0; } header .gsnb_wrap, header .header_wrap .search_box{ display: none; } header .header_wrap{ padding: 20px 0; } header .header_wrap .gnb_wrap{ height: calc(100vh - 76px); position: fixed; top: 76px; width: 400px; background-color: #fff; right: -400px; border-top: 1px solid #ddd; border-left: 1px solid #ddd; display: flex; flex-direction: column; overflow-y: scroll; z-index: 999; transition: all ease .6s; } header .header_wrap .gnb_wrap.active{ right: 0; } header .header_wrap .gnb_wrap::-webkit-scrollbar { width: 3px; background: none; } header .header_wrap .gnb_wrap::-webkit-scrollbar-thumb { background: #dcdcdc; } header .header_wrap .gnb_wrap::-webkit-scrollbar-track { background: none; } header .header_wrap .gnb_wrap:last-child{ border-bottom: none; } header .header_wrap .gnb_wrap li{ text-align: left; border-bottom: 1px solid #ddd; } header .header_wrap .gnb_wrap li:not(:last-child){ margin-right: 0; } header .header_wrap .gnb_wrap li > a{ font-size: 22px; position: relative; padding: 25px; } header .header_wrap .gnb_wrap li > a:hover{ color: #222; } header .header_wrap .gnb_wrap li > a.no-sub::before{ display: none; } header .header_wrap .gnb_wrap li > a::before{ content: ""; width: 20px; height: 11px; background-image: url(/image/sub/gnb_arrow.png); background-repeat: no-repeat; background-size: cover; position: absolute; top: 29px; right: 25px; transform: rotate(180deg); transition: all ease .3s; } header .header_wrap .gnb_wrap a.selected{ color: #d3461e !important; } header .header_wrap .gnb_wrap a.selected::before{ transform: rotate(0deg); } header .header_wrap .gnb_wrap .gsnb-m{ border-top: 1px solid #ddd; padding: 20px 25px; background-color: #f8f8f8; display: none; } header .header_wrap .gnb_wrap .gsnb-m > a{ font-size: 18px; color: #666; line-height: 1em; display: block; } header .header_wrap .gnb_wrap .gsnb-m > a:not(:last-child){ margin-bottom: 20px; } #container { padding-top: 76px; } .hamburger__btn { width: 30px; cursor: pointer; } .hamburger__btn span { display: block; width: 100%; height: 3px; background: #000; transition: all .3s; position: relative; } .hamburger__btn span+span { margin-top: 6px; } .hamburger__btn.active span:nth-child(1) { animation: ease .7s top forwards; } .hamburger__btn.not-active span:nth-child(1) { animation: ease .7s top-2 forwards; } .hamburger__btn.active span:nth-child(2) { animation: ease .7s scaled forwards; } .hamburger__btn.not-active span:nth-child(2) { animation: ease .7s scaled-2 forwards; } .hamburger__btn.active span:nth-child(3) { animation: ease .7s bottom forwards; } .hamburger__btn.not-active span:nth-child(3) { animation: ease .7s bottom-2 forwards; } @keyframes top { 0% { top: 0; transform: rotate(0); } 50% { top: 9px; transform: rotate(0); } 100% { top: 9px; transform: rotate(45deg); } } @keyframes top-2 { 0% { top: 9px; transform: rotate(45deg); } 50% { top: 9px; transform: rotate(0deg); } 100% { top: 0; transform: rotate(0deg); } } @keyframes bottom { 0% { bottom: 0; transform: rotate(0); } 50% { bottom: 9px; transform: rotate(0); } 100% { bottom: 9px; transform: rotate(135deg); } } @keyframes bottom-2 { 0% { bottom: 9px; transform: rotate(135deg); } 50% { bottom: 9px; transform: rotate(0); } 100% { bottom: 0; transform: rotate(0); } } @keyframes scaled { 50% { transform: scale(0); } 100% { transform: scale(0); } } @keyframes scaled-2 { 0% { transform: scale(0); } 50% { transform: scale(0); } 100% { transform: scale(1); } } footer .f_top .f_top_R ul li a{ font-size: 0; text-indent: -999px; } footer .f_top .f_top_R ul li:not(:last-child){ margin-right: 10px; } footer .f_top .f_top_R ul li.v_line{ display: none; } footer .f_top .f_top_L ul li.v_line{ margin: 5px 15px; } footer .f_bot{ flex-wrap: wrap; } footer .f_bot .f_bot_L, footer .f_bot .f_bot_R{ width: 100%; } footer .f_bot .f_bot_R{ margin-top: 40px; } } @media all and (max-width: 1024px) { .show-1024 { display: block !important; } .hide-1024 { display: none !important; } } @media all and (max-width: 768px) { .show-768 { display: block !important; } .hide-768 { display: none !important; } .quick_wrap{display: none !important;} footer .f_top{ display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding-top: 40px; padding-bottom: 20px; } footer .f_top .f_top_R ul{ margin-top: 18px; } footer .f_bot .f_bot_L .br_m{ display: block; } footer .f_bot .f_bot_L .br_m::before{ display: none; } } @media all and (max-width: 640px) { .show-640 { display: block !important; } .hide-640 { display: none !important; } #container{ padding-top: 66.3px; } .w_1820{ margin-left: 3.9063%; margin-right: 3.9063%; } .hamburger__btn{ width: 25px; } .hamburger__btn span+span{ margin-top: 5px; } .hamburger__btn span{ height: 2px; } header .header_wrap .logo{ background-size: cover; width: 90px; height: 26.3px; } header .header_wrap .gnb_wrap{ height: calc(100vh - 66.3px); top: 66.3px; width: 100%; right: -100%; } header .header_wrap .gnb_wrap li > a{ padding: 17px; font-size: 18px; } header .header_wrap .gnb_wrap li > a::before{ top: 20px; right: 17px; width: 16px; height: 9px; } header .header_wrap .gnb_wrap .gsnb-m{ padding: 15px; } header .header_wrap .gnb_wrap .gsnb-m > a{ font-size: 16px; } header .header_wrap .gnb_wrap .gsnb-m > a:not(:last-child){ margin-bottom: 15px; } @keyframes top { 0% { top: 0; transform: rotate(0); } 50% { top: 7px; transform: rotate(0); } 100% { top: 7px; transform: rotate(45deg); } } @keyframes top-2 { 0% { top: 7px; transform: rotate(45deg); } 50% { top: 7px; transform: rotate(0deg); } 100% { top: 0; transform: rotate(0deg); } } @keyframes bottom { 0% { bottom: 0; transform: rotate(0); } 50% { bottom: 7px; transform: rotate(0); } 100% { bottom: 7px; transform: rotate(135deg); } } @keyframes bottom-2 { 0% { bottom: 7px; transform: rotate(135deg); } 50% { bottom: 7px; transform: rotate(0); } 100% { bottom: 0; transform: rotate(0); } } @keyframes scaled { 50% { transform: scale(0); } 100% { transform: scale(0); } } @keyframes scaled-2 { 0% { transform: scale(0); } 50% { transform: scale(0); } 100% { transform: scale(1); } } footer{padding-bottom: 30px;} footer .f_top{padding-top: 30px;} footer .f_top .f_top_L{width: 100%;} footer .f_top .f_top_L ul{justify-content: space-between; width: 100%;} footer .f_top .f_top_L ul li a{font-size: 13px;} footer .f_top .f_top_L ul li a span{display: none;} footer .f_top .f_top_L ul li.v_line{display: none;} footer .f_top .f_top_R{width: 100%;} footer .f_top .f_top_R ul li:not(:last-child){margin-right: 3px;} footer .f_bot .f_bot_R img{height: 20px;} footer .f_bot .f_bot_R img:not(:last-child){margin-right: 15px;} footer .f_bot{padding-top: 20px;} footer .f_bot .f_bot_L{font-size: 13px;} footer .f_bot .f_bot_L .copy{margin-top: 7px;} footer .f_bot .f_bot_R{margin-top: 20px;} } @media all and (max-width: 400px){ header .header_wrap .gnb_wrap{ width: 100%; } } .animated{ opacity: 0; transform: translateY(50px); transition: all ease .8s; } .animated.on{ transform: translateY(0); opacity: 1; }