/* content01 *************************************************************************************************************************************************/ #content01 {width:100%; background-color:#fff; padding:6rem 0;} #content01 > .inner {width:1400px; margin:0 auto; display:flex;} #content01 .inner .textArea {flex:0 0 auto; width:45%; padding-right:5%;} #content01 .inner .textArea .title {font-size:3.25rem; line-height:1.4; font-weight:bold; letter-spacing:-1px; margin-bottom:1.5rem; padding-top:2.5em;} #content01 .inner .textArea .title .color {color:#ff674e;} #content01 .inner .textArea p {font-size:1.5rem; margin-bottom:3.5rem; line-height:1.6;} #content01 .inner .textArea .btn a {width:170px; display:inline-block; padding:10px 20px; border-radius:25px; border:1px solid #ff674e; font-size:1.5rem; color:#ff674e; text-align:left;display:flex; justify-content:space-between; background-color:#fff; transition:all ease 0.5s;} #content01 .inner .textArea .btn a:hover {background-color:#ff674e; color:#fff;} #content01 .inner .textArea .btn a span.plus {display:inline-block; transition:transform ease 0.5s;} #content01 .inner .textArea .btn a:hover span.plus {transform:rotate(90deg);} #content01 .inner .textArea .btn a span {} #content01 .inner .imgArea {flex:0 0 auto; width:50%;overflow:hidden;} #content01 .inner .imgArea div {width:100%; overflow:hidden;} #content01 .inner .imgArea div img {width:100%; height:auto; position:relative; } .gg-math-plus, .gg-math-plus::after {display: block; box-sizing: border-box; background: currentColor; border-radius: 10px } .gg-math-plus {margin-top: 11px; position: relative; transform: scale(var(--ggs,1)); width:16px; height: 2px } .gg-math-plus::after {content: ""; position: absolute; width:2px; height:16px; top:-7px; left: 7px } /* content02 *************************************************************************************************************************************************/ #content02 {width:100%; margin:0 auto; background-color:#f9f9f9; padding:6rem 0;} #content02 > .inner {width:1400px; margin:0 auto;} #content02 .inner .textArea {margin-bottom:3rem;} #content02 .inner .textArea h2.title {font-size:3.25rem; line-height:1.4; font-weight:bold; letter-spacing:-1px; } #content02 .inner .textArea .subtitle {font-size:1.25rem; color:#aaa; line-height:1.2; letter-spacing:10px;} #content02 .inner .textArea .desc {font-size:1.6rem; color:#333; line-height:1.4; letter-spacing:-1px;} #content02 .inner .textArea {display:flex; justify-content:space-between; align-items:center;} #content02 .inner .imgArea {} #content02 .inner .imgArea ul.inner {width:100%; display:flex; flex-wrap:wrap; justify-content:space-between; align-content:space-between; gap:1.2em;} #content02 .inner .imgArea ul.inner li {border:1px solid #eaeaea; border-radius:10px; flex:0 0 24%; background-color:#fff; position:relative; /*transition:all ease .3s;*/} #content02 .inner .imgArea ul.inner li:hover {-webkit-box-shadow: 0px 2px 12px 1px rgba(50,50,50,0.2); box-shadow: 0px 2px 12px 1px rgba(50,50,50,0.2);} #content02 .inner .imgArea ul.inner li a.btnArea .more {width:25px; height:25px; position:absolute; right:25px; top:25px; background-color:rgba(0,0,0,0.25); border-radius:100%; padding:10px; transition:all ease .3s;} #content02 .inner .imgArea ul.inner li a.btnArea .more img {width:100%;} #content02 .inner .imgArea ul.inner li a.btnArea .more img {transition:all ease .5s;} #content02 .inner .imgArea ul.inner li a.btnArea:hover .more {background-color:rgba(0,0,0,0.5)} #content02 .inner .imgArea ul.inner li a.btnArea:hover .more img {transform:rotate(90deg);} #content02 .inner .imgArea ul.inner li a.btnArea .titleArea {padding:25px 25px 20px 25px;} #content02 .inner .imgArea ul.inner li a.btnArea .titleArea .title {font-size:1.9em; font-weight:bold; color:#333;} #content02 .inner .imgArea ul.inner li a.btnArea .titleArea .subtitle {color:#aeaeae; font-size:1.3em;} #content02 .inner .imgArea ul.inner li a.btnArea:hover .imgArea img {opacity:0.7;} #content02 .inner .imgArea ul.inner li a.btnArea .imgArea {height:180px; text-align:center;} #content02 .inner .imgArea ul.inner li a.btnArea .imgArea img {height:100%; width:80%; object-fit:contain; object-position:50% 50% ; /*transition:all ease .3s;*/} /* content03 *************************************************************************************************************************************************/ #content03 {width:100%; margin:0 auto; background-color:#fff; padding:6rem 0;} #content03 > .inner {width:1400px; margin:0 auto;} #content03 .inner .textCol {margin-bottom:3rem;} #content03 .inner .textCol h2.title {font-size:3.25rem; line-height:1.4; font-weight:bold; letter-spacing:-1px; margin-bottom:1.5rem;} #content03 .inner .textCol .subtitle {font-size:1.25rem; color:#aaa; line-height:1.2; letter-spacing:10px;} #content03 .inner .textCol .desc {font-size:1.6rem; color:#333; line-height:1.4; letter-spacing:-1px;} #content03 .inner .textCol {display:flex; justify-content:space-between; align-items:center;} #content03 .inner .textCol .btn a {width:170px; display:inline-block; padding:10px 20px; border-radius:25px; border:1px solid #ff674e; font-size:1.5rem; color:#ff674e; text-align:left;display:flex; justify-content:space-between; background-color:#fff; transition:all ease 0.5s;} #content03 .inner .textCol .btn a:hover {background-color:#ff674e; color:#fff;} #content03 .inner .textCol .btn a span.plus {display:inline-block; transition:transform ease 0.5s;} #content03 .inner .textCol .btn a:hover span.plus {transform:rotate(90deg);} #content03 .inner .imgCol {} #content03 .inner .imgCol ul.items::-webkit-scrollbar {display:none;} #content03 .inner .imgCol ul.items {/*scroll-behavior: smooth;*/ display:flex; flex-wrap:nowrap; overflow-x:auto; gap:3.75em; -ms-overflow-style: none;*scrollbar-width: none; scroll-snap-type:x mandatory; padding-left:1em; } #content03 .inner .imgCol ul li {scroll-snap-align:strat; scroll-margin:0; } #content03 .inner .imgCol ul li a {width:270px; display:inline-block; font-size:1.35rem; text-align:center; font-weight:normal; color:#aaa;-webkit-user-drag: none;} #content03 .inner .imgCol ul li a .imgArea img {width:100%; transition:all ease .3s; opacity:0.8;} #content03 .inner .imgCol ul li a .textArea {padding:0.5em 0;} #content03 .inner .imgCol ul li a:hover {color:#000;font-weight:bold; } #content03 .inner .imgCol ul li a:hover img {-webkit-box-shadow: 0px 2px 12px 1px rgba(50,50,50,0.2); box-shadow: 0px 2px 12px 1px rgba(50,50,50,0.2);opacity:1;-webkit-user-drag: none;} #content03 .inner .imgCol ul li a .imgArea {height:340px; overflow:hidden;} /* content04 *************************************************************************************************************************************************/ #content04 {width:100%; background:url(https://www.ewoojung.com/bizdemo34534/img/content04_bg.jpg) no-repeat center / cover; padding:150px 0; overflow:hidden; position:relative;;} #content04 > .inner {width:1400px; margin:0 auto;} #content04:hover:before {background-color:rgba(0,0,0,0.6);} #content04:before {content:""; display:block; width:100%; height:100%; background-color:rgba(0,0,0,0.4); position:absolute; z-index;1; top:0; left:0; transition:all ease .3s} #content04 .textArea {text-align:center;position:relative; z-index:2;} #content04 .textArea .title {font-size:3.25rem; line-height:1.4; font-weight:bold; letter-spacing:-1px; margin-bottom:1.5rem; color:#fff;} #content04 .textArea p {font-size:1.5rem; margin-bottom:3.5rem; line-height:1.6; color:#fff;} #content04 .textArea .btn {} #content04 .textArea .btn a {margin:0 auto; width:170px; display:inline-block; padding:10px 20px; border-radius:25px; border:1px solid #ff674e; font-size:1.5rem; color:#fff; text-align:left; background-color:rgba(0,0,0,0,0); transition:all ease 0.5s; text-align:center;} #content04 .textArea .btn a:hover {background-color:#ff674e; color:#fff;} /* content05 *************************************************************************************************************************************************/ #content05 {width:100%; margin:0 auto; background-color:#fff; padding:6rem 0;} #content05 > .inner {width:1400px; margin:0 auto;} #content05 .inner .textCol {margin-bottom:3rem;} #content05 .inner .textCol h2.title {font-size:3.25rem; line-height:1.4; font-weight:bold; letter-spacing:-1px; margin-bottom:1.5rem;} #content05 .inner .textCol .subtitle {font-size:1.25rem; color:#aaa; line-height:1.2; letter-spacing:10px;} #content05 .inner .textCol .desc {font-size:1.6rem; color:#333; line-height:1.4; letter-spacing:-1px;} #content05 .inner .textCol {display:flex; justify-content:space-between; align-items:center;} #content05 .inner .textCol .btn a {width:170px; display:inline-block; padding:10px 20px; border-radius:25px; border:1px solid #ff674e; font-size:1.5rem; color:#ff674e; text-align:left;display:flex; justify-content:space-between; background-color:#fff; transition:all ease 0.5s;} #content05 .inner .textCol .btn a:hover {background-color:#ff674e; color:#fff;} #content05 .inner .textCol .btn a span.plus {display:inline-block; transition:transform ease 0.5s;} #content05 .inner .textCol .btn a:hover span.plus {transform:rotate(90deg);} #content05 .inner .imgCol ul {display:flex; justify-content:space-between; flex-wrap:wrap;} #content05 .inner .imgCol ul li {width:230px; height:200px;opacity:0.6; transition:all ease .3s;} #content05 .inner .imgCol ul li:hover {opacity:1;} #content05 .inner .imgCol ul li img {width:100%;} @media screen and (max-width:1440px){ #content01 > .inner {max-width:90%; } #content02 > .inner {max-width:90%; } #content03 > .inner {max-width:90%; } #content04 > .inner {max-width:90%; } #content05 > .inner {max-width:90%; } } @media screen and (max-width:1280px){ #content01 .inner .textArea {width:45%; margin-right:5%;} #content01 .inner .textArea .title {font-size:3.2rem; padding-top:1em;} #content01 .inner .textArea p {font-size:1.5rem; margin-bottom:3.5rem; line-height:1.6;} #content02 { padding:6rem 0;} #content02 .inner .textArea {margin-bottom:3rem;} #content02 .inner .textArea h2.title {font-size:3.2rem; line-height:1.4; } #content02 .inner .textArea .subtitle {font-size:1.25rem; line-height:1.2; } #content02 .inner .textArea .desc {font-size:1.6rem; line-height:1.4;} #content02 .inner .textArea {display:flex; justify-content:space-between; align-items:center;} #content02 .inner .imgArea {} #content02 .inner .imgArea ul.inner {gap:2em;} #content02 .inner .imgArea ul.inner li {flex:0 0 31%; } } @media screen and (max-width:1024px){ #content01 > .inner {width:100%; margin:0 auto; display:flex; flex-direction: column;} #content01 .inner .textArea {flex:0 0 auto; width:100%; margin-right: 0% ; margin-bottom:6.5em;} #content01 .inner .textArea .title {font-size:3.2rem; padding-top:1em; line-height:1.4; margin-bottom:1.5rem; padding-top:0;} #content01 .inner .textArea p {font-size:1.5rem; margin-bottom:3.5rem; line-height:1.6;} #content01 .inner .imgArea {flex:0 0 auto; width:100%;overflow:hidden;} #content01 .inner .imgArea div {width:100%; } #content01 .inner .imgArea div img {width:100%; height:auto; position:relative; } } @media screen and (max-width:992px){ #content02 { padding:6rem 0;} #content02 .inner .textArea {display:flex; flex-direction: column; justify-content:space-between; align-items:flex-start;margin-bottom:3rem; } #content02 .inner .textArea h2.title {font-size:3.2rem; line-height:1.4; margin-bottom: 1.2rem;} #content02 .inner .textArea .subtitle {font-size:1.25rem; line-height:1.2; } #content02 .inner .textArea .desc {font-size:1.6rem; line-height:1.4;} #content02 .inner .imgArea {} #content02 .inner .imgArea ul.inner {gap:1em;} #content02 .inner .imgArea ul.inner li {flex:1 0 40%; } #content03 {width:100%; margin:0 auto; background-color:#fff; padding:6rem 0;} #content03 > .inner {width:90%; margin:0 auto;} #content03 .inner .textCol {margin-bottom:5.5rem;} #content03 .inner .textCol h2.title {font-size:3.25rem; line-height:1.4; margin-bottom:1.5rem;} #content03 .inner .textCol .subtitle {font-size:1.25rem; } #content03 .inner .textCol .desc {font-size:1.6rem; margin-bottom:3rem;} #content03 .inner .textCol {display:flex; justify-content:space-between; align-items:flex-start; flex-direction: column; text-align: left;} #content03 .inner .imgCol ul.items {gap:3em; -ms-overflow-style: none;} #content03 .inner .imgCol ul li a {width:200px; display:inline-block; font-size:1.35rem; text-align:center;} #content03 .inner .imgCol ul li a .textArea {padding:0.5em 0;} #content03 .inner .imgCol ul li a .imgArea img {width:100%; transition:all ease .3s; opacity:0.8;} #content03 .inner .imgCol ul li a .imgArea {height:auto; } #content05 > .inner {width:100%; margin:0 auto;} #content05 .inner .textCol {margin-bottom:3rem;} #content05 .inner .textCol h2.title {font-size:3.25rem; line-height:1.4; margin-bottom:1.5rem;} #content05 .inner .textCol .subtitle {font-size:1.25rem; line-height:1.2; } #content05 .inner .textCol .desc {font-size:1.6rem; line-height:1.4; ; margin-bottom:3rem;} #content05 .inner .textCol {display:flex; justify-content:space-between; align-items:flex-start; flex-direction: column;} #content05 .inner .textCol .btn a {width:170px; display:inline-block; padding:10px 20px; border-radius:25px; border:1px solid #ff674e; font-size:1.5rem; color:#ff674e; text-align:left;display:flex; justify-content:space-between; background-color:#fff; transition:all ease 0.5s;} #content05 .inner .textCol .btn a:hover {background-color:#ff674e; color:#fff;} #content05 .inner .textCol .btn a span.plus {display:inline-block; transition:transform ease 0.5s;} #content05 .inner .imgCol ul {display:flex; justify-content:space-between; flex-wrap:wrap;} #content05 .inner .imgCol ul li {width:230px; height:200px;opacity:0.6; transition:all ease .3s; flex:1 0 30%;} #content05 .inner .imgCol ul li:hover {opacity:1;} #content05 .inner .imgCol ul li img {width:100%;} } @media screen and (max-width:768px){ } @media screen and (max-width:480px){ #content01 > .inner {width:100%; margin:0 auto; display:flex; flex-direction: column;} #content01 .inner .textArea {flex:0 0 auto; width:100%; margin-right: 0% ; margin-bottom:3.5em;} #content01 .inner .textArea .title {font-size:2.2rem; padding-top:1em; line-height:1.4; margin-bottom:1.5rem; padding-top:0;} #content01 .inner .textArea p {font-size:1.3rem; margin-bottom:3rem; line-height:1.6;} #content01 .inner .imgArea {flex:0 0 auto; width:100%;overflow:hidden;} #content01 .inner .imgArea div {width:100%; } #content01 .inner .imgArea div img {width:100%; height:auto; position:relative; } #content01 .inner .textArea .btn a {width:130px; padding:10px 20px; border-radius:25px; border:1px solid #ff674e; font-size:1.2rem; text-align:left; display:flex; justify-content:space-between; background-color:#fff; } #content02 { padding:6rem 0;} #content02 .inner .textArea {display:flex; flex-direction: column; justify-content:space-between; align-items:flex-start;margin-bottom:3rem; } #content02 .inner .textArea h2.title {font-size:2.2rem; line-height:1.4; margin-bottom: 1.2rem;} #content02 .inner .textArea .subtitle {font-size:1rem; line-height:1.2; } #content02 .inner .textArea .desc {font-size:1.3rem; line-height:1.4;} #content02 .inner .imgArea {} #content02 .inner .imgArea ul.inner {gap:1em;} #content02 .inner .imgArea ul.inner li {flex:1 0 100%; } #content03 {width:100%; margin:0 auto; background-color:#fff; padding:6rem 0;} #content03 > .inner {width:90%; margin:0 auto;} #content03 .inner .textCol {margin-bottom:5.5rem;} #content03 .inner .textCol h2.title {font-size:2.2rem; line-height:1.4; margin-bottom:1.2rem;} #content03 .inner .textCol .subtitle {font-size:1rem; } #content03 .inner .textCol .desc {font-size:1.3rem; margin-bottom:3rem;} #content03 .inner .textCol {display:flex; justify-content:space-between; align-items:flex-start; flex-direction: column; text-align: left;} #content03 .inner .imgCol ul.items {gap:3em; -ms-overflow-style: none;} #content03 .inner .imgCol ul li a {width:150px; display:inline-block; font-size:1.35rem; text-align:center;} #content03 .inner .imgCol ul li a .textArea {padding:0.5em 0;} #content03 .inner .imgCol ul li a .imgArea img {width:100%; transition:all ease .3s; opacity:0.8;} #content03 .inner .imgCol ul li a .imgArea {height:auto; } #content03 .inner .textCol .btn a {width:130px; padding:10px 20px; border-radius:25px; border:1px solid #ff674e; font-size:1.2rem; text-align:left; display:flex; justify-content:space-between; background-color:#fff; } #content04 {width:100%; background:url(https://www.ewoojung.com/bizdemo34534/img/content04_bg.jpg) no-repeat center / cover; padding:150px 0; overflow:hidden; position:relative;;} #content04 > .inner {width:1400px; margin:0 auto;} #content04:before {content:""; display:block; width:100%; height:100%; background-color:rgba(0,0,0,0.6); position:absolute; z-index;1; top:0; left:0; transition:all ease .3s} #content04 .textArea {text-align:center;position:relative; z-index:2;} #content04 .textArea .title {font-size:2.2rem; line-height:1.4; font-weight:bold; letter-spacing:-1px; margin-bottom:1.5rem; color:#fff;} #content04 .textArea p {font-size:1.3rem; margin-bottom:3.5rem; line-height:1.6; color:#fff;} #content04 .textArea .btn {} #content04 .textArea .btn a {margin:0 auto; width:130px; display:inline-block; padding:10px 20px; border-radius:25px; border:1px solid #ff674e; font-size:1.3rem; color:#fff; text-align:left; background-color:#ff674e; color:#fff; transition:all ease 0.5s; text-align:center;} #content05 > .inner {width:100%; margin:0 auto;} #content05 .inner .textCol {margin-bottom:3rem;} #content05 .inner .textCol h2.title {font-size:2.22rem; line-height:1.4; margin-bottom:1.5rem;} #content05 .inner .textCol .subtitle {font-size:1rem; line-height:1.2; } #content05 .inner .textCol .desc {font-size:1.3rem; line-height:1.4; ; margin-bottom:3rem;} #content05 .inner .textCol {display:flex; justify-content:space-between; align-items:flex-start; flex-direction: column;} #content05 .inner .textCol .btn a {width:130px; display:inline-block; padding:10px 20px; border-radius:25px; border:1px solid #ff674e; font-size:1.3rem; color:#ff674e; text-align:left;display:flex; justify-content:space-between; background-color:#fff; transition:all ease 0.5s;} #content05 .inner .textCol .btn a:hover {background-color:#ff674e; color:#fff;} #content05 .inner .textCol .btn a span.plus {display:inline-block; transition:transform ease 0.5s;} #content05 .inner .imgCol ul {display:flex; justify-content:space-between; flex-wrap:wrap;} #content05 .inner .imgCol ul li {width:230px; height:200px;opacity:0.6; transition:all ease .3s; flex:1 0 40%;} #content05 .inner .imgCol ul li:hover {opacity:1;} #content05 .inner .imgCol ul li img {width:100%;} } @media screen and (max-width:320px){ } /* 전체 Wraper *************************************************************************************************************************************************/ #wraper {position:relative; width:100%; margin:0; min-width:320px;} #wraper #container {width:100%;} #wraper #container .content {overflow:hidden; width:100%; margin:0} button {display:inline-block; padding:0; border:0; background:transparent; text-align:center; vertical-align:middle; cursor:pointer; white-space:nowrap} button.dis, button.dis span {cursor:default} button.dis:hover span {background-position:0 0} button.dis:hover span span {background-position:right 0} .btn_base {display:inline-block; min-width:70px; font-size:0; line-height:0; vertical-align:middle} .btn_txt {display:inline-block; padding:0 10px; font-size:14px; line-height:34px; color:#fff !important; background:#c1c1c1; vertical-align:middle} .btn_down {position:relative; padding-right:26px; font-size:16px; line-height:24px} /* 상단 메뉴 *****************************************************************************************************************************************************/ #wraper #header.fixed nav {} #wraper #header.fixed nav h1 a {height:75px;} #wraper #header.fixed nav .menu_wrap > ul > li > a {line-height:75px;} #wraper #header {position:fixed; z-index:10000; top:0; width:100%; /* height:90px; */ /*background:#ffffff;*/ opacity: 1 ; filter: alpha(opacity=100); margin:0; /*box-shadow:rgba(113, 113, 113, 0.3) 3px 3px 6px;*/-webkit-transition: all .5s ease-out 0s; -moz-transition: all .5s ease-out 0s; -o-transition: all .5s ease-out 0s; -ms-transition: all .5s ease-out 0s;}/*메뉴바탕색상변경*/ #wraper #header.header_scroll{background-color:rgb(255,255,255,0.9); border-bottom:1px solid #eee; -webkit-transition: all .5s ease-out 0s; -moz-transition: all .5s ease-out 0s; -o-transition: all .5s ease-out 0s; -ms-transition: all .5s ease-out 0s;} #wraper #header nav {background-color:rgb(255,255,255,0.0); position:relative; width:100%; max-width:1400px; margin:0 auto;} #wraper #header nav #top{} #wraper #header nav #top ul{} #wraper #header nav #top ul li{display:inline-block;list-style:none;} #wraper #header nav #top ul li a{font-family:Noto Sans KR; font-size:12px; color:#fff; text-align:center; padding:5px 4px 5px 4px; display:block;text-decoration:none;} #wraper #header nav #top ul li a:link{ font-family:Noto Sans KR; font-size:12px; color:#fff;} #wraper #header nav #top ul li a:hover{font-family:Noto Sans KR; font-size:12px; color:#fff;} #wraper #header nav #top ul li a:visited{font-family:Noto Sans KR; font-size:12px; color:#fff;} #wraper #header nav #top ul li a:active{font-family:Noto Sans KR; font-size:12px; color:#fff;} #wraper #header nav h1 {position:absolute; top:7%; left: 0; background:url("https://www.ewoojung.com/default/img/logo_w.png")no-repeat center / cover;} #wraper #header.header_scroll h1 {background:url("https://www.ewoojung.com/default/img/logo_c.png")no-repeat center / cover;} #wraper #header nav #logo a {display:block; position:relative; width:200px; height:85px; } #wraper #header nav #logo a img { width:100%;} #wraper #header nav .btn_nav {display:none; } #wraper #header nav .menu_wrap { }/*메뉴 위여백*/ #wraper #header nav .menu_wrap:after {content:""; ,.display:block; clear:both} #wraper #header nav .menu_wrap ul {display:flex; justify-content: flex-end; } #wraper #header nav .menu_wrap ul li.menus {flex:0 0 10%; padding:10px 0; position: relative; } #wraper #header nav .menu_wrap ul li.menus:before { content: ""; width:0; height:2px; position: absolute; visibility: hidden; background:#ff674e; bottom:2em; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); transition: width 0.3s; } #wraper #header nav .menu_wrap ul li.menus:hover:before { content: ""; width:20px; height:2px; position: absolute; visibility: visible; display: block; background:#ff674e; bottom:2em; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); transition: width 0.3s; } #wraper #header nav .menu_wrap ul li.menus a {padding:5px 0; display:block; position:relative; color:#ffffff; text-align:center; font-size:17px; font-weight:500;line-height:75px;} #wraper #header nav .menu_wrap ul li.menus > ul {position:absolute; visibility: hidden; opacity: 0; transition:opacity 0.2s; display: flex; flex-wrap: wrap; padding:20px 0; transition: all ease-in 0.3s; background-color:#000;} #wraper #header nav .menu_wrap ul li.menus ul li {width:100%; display: flex; justify-content: center;} #wraper #header nav .menu_wrap ul li.menus ul li a {width:100%; min-width:120px; font-size:15px; line-height: 1.5em; padding: 12px 0; color:#ababab; } #wraper #header nav .menu_wrap ul li.m01 {} #wraper #header nav .menu_wrap ul li.m02 {} #wraper #header nav .menu_wrap ul li.m03 {} #wraper #header nav .menu_wrap ul li.m04 {} #wraper #header nav .menu_wrap ul li.m05 {} #wraper #header nav .menu_wrap ul li.m06 {margin-left: 5.5em;} #wraper #header nav .menu_wrap ul li.m06 ul li {text-transform:uppercase; margin:0;} #wraper #header nav .menu_wrap ul li.m06 > a { color:#ff674e !important;} #wraper #header nav .menu_wrap ul li a {} #wraper #header nav .menu_wrap ul li a:hover {color:#ffffff; text-decoration:none}/*대메뉴 over 색상변경*/ #wraper #header nav .menu_wrap ul li ul {} #wraper #header nav .menu_wrap ul > li:hover ul.inner {visibility: visible; transition:opacity 0.2s; opacity:1;} #wraper #header nav .menu_wrap ul li ul li {float:none;} #wraper #header nav .menu_wrap ul li ul li a {display:block; font-family:Noto Sans KR, Dotum; font-size:12px; color:#fff; line-height:40px; background:#000000; /*text-transform:uppercase*/}/* 서브메뉴 배경색상변경*/ #wraper #header nav .menu_wrap ul > li > ul > li > a:hover {color:#fff; } #wraper #header nav .mx {display:none} #wraper #header.header_scroll nav .menu_wrap ul li.menus ul li a:hover {color:#fff;} #wraper #header.header_scroll nav .menu_wrap ul li a {color:#000;} #wraper #header.header_scroll nav .menu_wrap ul li a:hover {color:#000;} @media screen and (max-width:1440px){ #wraper #header nav {background-color:width:100%; max-width:90%; } .test {background-color:#aaa;} } @media screen and (max-width:1280px){ #wraper #header nav {background-color:width:100%; max-width:90%; } #wraper #header nav .menu_wrap ul li.menus ul li a {min-width:100px;font-size:13px; } .test {background-color:pink;} } @media screen and (max-width:1024px){ #wraper #header nav {background-color:width:100%; max-width:90%; } #wraper #header nav .menu_wrap ul li.menus ul li a {min-width:90px;font-size:13px; } .test {background-color:skyblue;} } @media screen and (max-width:992px){ } @media screen and (max-width:768px){ #wraper #header nav {background-color:width:100%; max-width:90%; } .test {background-color:darkblue;} } @media screen and (max-width:480px){ #wraper #header nav {background-color:width:100%; max-width:90%; } .test {background-color:rgb(160, 62, 83);} } @media screen and (max-width:320px){ #wraper #header nav {background-color:width:100%; max-width:90%; } .test {background-color:rgb(161, 196, 98);} } @media screen and (max-width:992px){ #wraper #header nav .menu_wrap ul li.menus:before { display: :none; } #wraper #header nav .menu_wrap ul li.menus:hover:before { display: none; } #wraper {overflow-x:hidden !important;} #wraper #header.fixed nav h1 a {height:65px;} #wraper #header.fixed nav .util_wrap > ul > li > a {line-height:40px} #wraper #header { opacity: 1 !important; filter: alpha(opacity=100) !important; height:105px;} #wraper #header nav {height: 105px; position:relative;} #wraper #header nav #logo a {} #wraper #header nav #logo a img {} #wraper #header nav .btn_nav {display:block; opacity: 1 !important; filter: alpha(opacity=100) !important;} #wraper #header nav .btn_nav.open {position:absolute; top:20%; right:0; width:45px; height:45px; margin-top:10px; margin-right:10px; background:url('https://www.ewoojung.com/bizdemo34534/img/btn_nav_open.png') no-repeat 0 0;} #wraper #header nav .btn_nav.closed {position:absolute; top:1.5em; right:1em; width:45px; height:45px;margin-top:10px; margin-right:20px; background:url('https://www.ewoojung.com/bizdemo34534/img/btn_nav_closed.png') no-repeat 0 0} #wraper #header nav .menu_wrap {overflow-y:scroll; position:fixed; z-index:100; top:0; right:-240%; bottom:0; left:auto; width:100%; background:#fff; border:0px solid #f00}/*모바일메뉴 바탕색상변경*/ #wraper #header nav .menu_wrap ul {padding-top:100px; display: block; width:100%;} #wraper #header nav .menu_wrap ul li {display:block; margin:0 !important; } /*모바일메뉴 라인색상변경*/ #wraper #header nav .menu_wrap ul li a {padding:5px 40px 0 20px; font-size:15px; color:#555555; text-align:left; line-height:40px!important;}/*대메뉴 색상변경*/ #wraper #header nav .menu_wrap ul li a:hover {color:#777777; text-decoration:none}/*대메뉴 over 색상변경*/ #wraper #header nav .menu_wrap ul li.menus a {color:#555; text-align: left; padding-left:50px; font-size:2.6rem; } #wraper #header nav .menu_wrap ul li.menus > ul {background-color:#fff;} #wraper #header nav .menu_wrap ul > li.on ul.inner { visibility: visible; transition:opacity 0.2s; opacity:1; position: relative; display: flex; flex-direction: column; margin-top:10px !important; } #wraper #header nav .menu_wrap ul > li.on ul.inner li {width:100% !important; display: block; background-color:#fff;} #wraper #header nav .menu_wrap ul > li.on ul.inner li a {width:100%; display: block; font-size:1.5em;} #wraper #header nav .menu_wrap ul li a:after {content:""; display:block !important; position:absolute; top:20px; right:50px; width:17px; height:9px; background:url('https://www.ewoojung.com/bizdemo34534/img/bg_gnb_arr.png') no-repeat 0 -9px} #wraper #header nav .menu_wrap ul li:hover a:after {content:""; display:block !important; position:absolute; top:20px; right:50px; left:auto; width:17px; height:9px; background:url('https://www.ewoojung.com/bizdemo34534/img/bg_gnb_arr.png') no-repeat 0 -9px} #wraper #header nav .menu_wrap ul li.on a:after {top:19px; background-position:0 0} #wraper #header nav .menu_wrap ul li.on ul li a:after {display:none !important;} #wraper #header nav .menu_wrap ul li.on:hover a:after ul li a:after {display:none} #wraper #header nav .menu_wrap ul li ul li a:after {display:none !important} #wraper #header nav .menu_wrap ul li:hover ul li a:after {display:none !important} #wraper #header nav .menu_wrap ul li ul {display:block; margin:0 !important; padding:20px 0 !important; border:0; box-shadow:none}/*모바일메뉴 서브메뉴 바탕색상변경*/ #wraper #header nav .menu_wrap ul li ul li {display:block; border:none;} #wraper #header nav .menu_wrap ul li ul li{float:none; width:auto !important; margin:0 !important; } /*모바일메뉴 라인색상변경*/ #wraper #header nav .menu_wrap ul li ul li a {margin:0 !important; padding-left:50px !important; color:#777 !important; font-size:1.6rem !important; line-height:1.4 !important; background:#fff !important; text-transform:none}/*모바일 서브메뉴 배경색변경*/ #wraper #header nav .menu_wrap ul li ul li a:hover { }/*모바일 서브메뉴 over 색상변경*/ #wraper #header nav .menu_wrap ul li ul li:first-child a:hover {box-shadow:none} #wraper #header nav .menu_wrap ul li ul li ul {padding:0 !important; } #wraper #header nav .menu_wrap ul li.m_prod {display:none} #wraper #header nav .mx {display:block; position:fixed; z-index:99; top:0; right:-100%; bottom:0; left:100%; background:#000; opacity:0.0; -moz-transition: opacity 0.5s ease-out; -ms-transition: opacity 0.5s ease-out; -o-transition: opacity 0.5s ease-out; transition: all 0.3s ease-out;} #wraper #header nav .menu_wrap {} #wraper #header nav.on .menu_wrap {right:0} #wraper #header nav .menu_wrap ul li ul {overflow:hidden; max-height:0; padding:0 0 !important; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;} #wraper #header nav .menu_wrap ul li.on ul {max-height:1000px !important; padding:0px 0 !important; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition:all 0.5s ease;}/*모바일 메뉴 서브메뉴 패딩 지정 부드럽게 닫히고 열리는 효과*/ #wraper #header nav .menu_wrap ul li ul {visibility: visible;} #wraper #header nav .menu_wrap ul li.on ul li ul {padding:0 !important} #wraper #header nav .menu_wrap ul li:hover ul {max-height:0; border-bottom:0} #wraper #header nav .menu_wrap ul li.m01:hover ul, #wraper #header nav .menu_wrap ul li.m02:hover ul, #wraper #header nav .menu_wrap ul li.m03:hover ul, #wraper #header nav .menu_wrap ul li.m04:hover ul, #wraper #header nav .menu_wrap ul li.m05:hover ul, #wraper #header nav .menu_wrap ul li.m06:hover ul {max-height:0px;} #wraper #header nav .menu_wrap ul li.m01 {transition-delay: 0.035s;} #wraper #header nav .menu_wrap ul li.m02 {transition-delay: 0.07s;} #wraper #header nav .menu_wrap ul li.m03 {transition-delay: 0.105s;} #wraper #header nav .menu_wrap ul li.m04 {transition-delay: 0.14s;} #wraper #header nav .menu_wrap ul li.m05 {transition-delay: 0.175s;} #wraper #header nav .menu_wrap ul li.m06 {transition-delay: 0.21s;} #wraper #header nav.on .mx {display:block; right:0; left:-2000%; opacity:0.8; -moz-transition: opacity 0.3s ease-out; -ms-transition: opacity 0.3s ease-out; -o-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out;} } /*#wraper #header nav .menu_wrap >ul > li {-webkit-transform: translate3d(250px, 0, 0); -moz-transform: translate3d(250px, 0, 0); -o-transform: translate3d(250px, 0, 0); transform: translate3d(250px, 0, 0); -webkit-transition: all 0.4s cubic-bezier(0.215, 0.610, 0.355, 1.000); -moz-transition: all 0.4s cubic-bezier(0.215, 0.610, 0.355, 1.000); -o-transition: all 0.4s cubic-bezier(0.215, 0.610, 0.355, 1.000); transition: all 0.4s cubic-bezier(0.215, 0.610, 0.355, 1.000); } #wraper #header nav.on .menu_wrap >ul > li {-webkit-transform: translate3d(0px, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}*/ /* 하단 *****************************************************************************************************************************************************/ #wraper #footer {position:relative; width:100%; padding:6rem 0;; background:#111;} #wraper #footer .footerinner_top {width:1400px; margin:0 auto; } #wraper #footer .footerinner_top::after {content:""; display:block; clear:both; line-height: 0;} #wraper #footer .footerinner_top div.inner {float: left;} #wraper #footer .footerinner_top .foot_info {height:530px; display:flex; flex-wrap: wrap; flex-direction: column; justify-content: space-between; align-content: space-between; width:35%; padding-right:5%;} #wraper #footer .footerinner_top .foot_info .logo {width:250px; margin-bottom: 2.5em;} #wraper #footer .footerinner_top .foot_info .logo img {width:100%;} #wraper #footer .footerinner_top .foot_info .detail {color:#ababab; letter-spacing: -0.5px; line-height: 2.5em;} #wraper #footer .footerinner_top .foot_info .detail li {display: inline-block; font-size: 1.3em; margin-right: 12px;} #wraper #footer .footerinner_top .foot_info .detail li span {display: inline-block; font-size:1.3rem; color:#eee; font-weight: bold; margin-right:8px;} #wraper #footer .footerinner_top .foot_info .detail2 a {display: inline-block; width:30px; height:30px; margin-right: 20px; border-radius: 5px; overflow: hidden;} #wraper #footer .footerinner_top .foot_info .detail2 a img {width:100%; } #wraper #footer .footerinner_top .foot_info .copy::before {content:""; display:block; border-top: 1px solid #eee; margin: 25px 0; } #wraper #footer .footerinner_top .foot_info .copy {font-size:1.3em; color: #ababab; letter-spacing: 0.5px;} #wraper #footer .footerinner_top .foot_menu {width:60%; text-align: center;} #wraper #footer .footerinner_top .foot_menu > ul {display: flex; justify-content: space-between; } #wraper #footer .footerinner_top .foot_menu ul li.menus {flex-basis:30%; ;} #wraper #footer .footerinner_top .foot_menu ul li ul.inner{display:block; margin-top: 2.2em; } #wraper #footer .footerinner_top .foot_menu ul > li > a {display:inline-block; font-size: 2em; font-weight: bold; color:#fff; line-height: 1.3em; } #wraper #footer .footerinner_top .foot_menu ul li ul.inner li a {display: block; font-size: 1.3em; font-weight: normal;line-height: 2.5em; color:#ababab} #wraper #footer .footerinner_top .foot_menu ul li ul.inner li a:hover {color:#fff;} #wraper #footer .foottop ul {overflow:hidden;text-align:center;} #wraper #footer .foottop li{display:inline-block;list-style:none;} #wraper #footer .foottop li a{font-family:Noto Sans KR; font-size:13px; color:#cccccc; text-align:center; padding:0px 3px 0px 8px; display:block;text-decoration:none;} #wraper #footer .foottop li a:link{font-size:13px; color:#cccccc;} #wraper #footer .foottop li a:hover{font-size:13px; color:#cccccc;} #wraper #footer .foottop li a:visited{font-size:13px; color:#cccccc;} #wraper #footer .foottop li a:active{font-size:13px; color:#cccccc;} @media screen and (max-width:1400px){ #wraper #footer .footerinner_top {width:1200px;} } @media screen and (max-width:1280px){ #wraper #footer .footerinner_top {width:1000px;} } @media screen and (max-width:1050px){ #wraper #footer .footerinner_top {width:900px;} #wraper #footer .footerinner_top .foot_info .detail {width:100%;} #wraper #footer .footerinner_top .foot_info .detail li { font-size: 1.2em;line-height: 2em;} #wraper #footer .footerinner_top .foot_info .detail li span {font-size:1.1rem; } #wraper #footer .footerinner_top .foot_info .detail2 .copy {font-size:1em;} #wraper #footer .footerinner_top .foot_menu ul > li > a { font-size: 1.8em; line-height: 1em; } #wraper #footer .footerinner_top .foot_menu ul li ul.inner li a {font-size: 1.2em; line-height: 2em; } } @media screen and (max-width:992px){ #wraper #footer .footerinner_top {width:100%;} #wraper #footer .footerinner_top .foot_info {width:100%; text-align: center; max-height:430px;} #wraper #footer .footerinner_top .foot_info .logo {display: inline-block; width:250px; margin-bottom: 2.5em; text-align: center;;} #wraper #footer .footerinner_top div.inner {float: none;} #wraper #footer .footerinner_top .foot_menu {display:none;} #wraper #footer .footerinner_top .foot_info .detail li { font-size: 1.3em; line-height: 1.7em;} #wraper #footer .footerinner_top .foot_info .detail li span {font-size:1.3rem; } #wraper #footer .footerinner_top .foot_info .detail2 .copy {font-size:1.3em;} } @media screen and (max-width:460px){ #wraper #footer .footerinner_top .foot_info .detail li { font-size: 1.2em; line-height: 1.4em;} #wraper #footer .footerinner_top .foot_info .detail li span {font-size:1.2rem; } #wraper #footer .footerinner_top .foot_info .detail2 .copy {font-size:1.2em;} } @media screen and (max-width:320px){ }