.side-button {width:200px; position: fixed; top:20%; right:-150px; z-index: 100; transition: all 0.4s cubic-bezier(.23,1,.32,1); } .side-button>a {width:100%; font-size: 1.6rem; color:#fff; position: relative; transition: all 0.4s; overflow: hidden; z-index: 3; background-color:#006cd1; padding:10px;box-shadow:0 5px 14px 0 rgba(61,82,96,0.15); } .side-button>a:hover {right:0;} .side-button>a::after {content:''; position: absolute; top:0; right:-200%; width:100%; height:100%; border-radius: 50%; background-color:#6FBA2C; transform: scale(2); transition: all 0.4s; z-index: -1;} /* 수출지원기반활용사업 버튼*/ .side-button>a:first-child>div>img {max-width: 100%; height: auto !important;} .side-button>a:first-child>div>h4 {font-size:1.3rem; color:#767578; font-weight: 300; line-height: 1;} .side-button>a:first-child>div:first-child {margin-right:5px;} .side-button>a:first-child>div>h3 {font-size:1.6rem; } /* 중소기업혁신바우처 버튼*/ .side-button>a:nth-child(2) {background-color:#1e4894;} .side-button>a:nth-child(2)>div>img {max-width: 100%; height: auto !important; z-index: 1;} .side-button>a:nth-child(2)>div>h4 {font-size:1.3rem; color:#767578; font-weight: 300; line-height: 1; z-index: 1;} .side-button>a:nth-child(2)>div:first-child {margin-right:5px; z-index: 1;} .side-button>a:nth-child(2)>div>h3 {font-size:1.6rem; z-index: 1; } .side-button>.support-btn {background-color:#FFC000; transition: all 0.4s cubic-bezier(.23,1,.32,1);} .side-button>.support-btn>div {z-index: 1; position: relative;} .side-button>.support-btn>div:first-child {margin-right:5px;} .side-button>.support-btn>div:first-child img {max-width: 100%; width: 37px; height: auto!important; } .side-button>.support-btn>div:last-child h4 {font-size:1.3rem; color:#767578; font-weight: 300; line-height: 1; z-index: 1;} .side-button>.support-btn>div:last-child h3 {font-size:1.6rem; z-index: 1; } .side-button>a:hover::after {right:0;} .is-animated {opacity: 0;} .no-results{width:100%; text-align: center; background-color:#fafafa; margin-top:50px; padding: 50px 0; display: none; margin-bottom:50px;} .no-results>h3 {font-size:2.4rem; font-weight:bold; width:100%; } .no-results .return-btn { padding:10px; color:#fff; background-color: #0c2340; width:100%; max-width: 200px; margin: 20px auto; cursor: pointer;} .no-results .return-btn:hover {opacity: 0.7;} /* header */ header {width:100%; height:8rem; max-width:100%; background:rgba(0,0,0,0.0); padding-left:1rem; padding-right: 1rem; display:flex; justify-content: center; align-items: center; flex-wrap: wrap; position: fixed; top:0; left:0; z-index: 999; margin: 0 auto; box-sizing: border-box;} header::before {content:''; position: absolute; bottom:0; left:0; width:100%; height:1px; background-color:rgba(255,255,255,0.1);} header .header-bg-container {position:absolute; top:80px; width:100%; height:280px; background-color:#fafafa; z-index: -1; left:0; display: none; box-shadow:0 5px 14px 0 rgba(61,82,96,0.0);} header .menu-container{ width:100%; display:flex; justify-content: space-between; align-items: stretch; flex-wrap: nowrap; height:100%; max-width: 1800px; } /* 헤더 로고영역 */ header .menu-container .logo {width:100%; flex-basis: 27rem; max-width: 27rem; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;} header .menu-container .logo a {transition: all 0.4s cubic-bezier(.23,1,.32,1); margin:0 auto;} header .menu-container .logo a img {width:100%; max-width:100%;} header .menu-container .logo a img:last-child {display: none;} header .menu-container .logo a:hover {opacity: 0.7;} /* 헤더 메뉴영역 */ header .menu-container .menu {width:100%; max-width:100%; flex-basis:100%; height:100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: nowrap;} header .menu-container .menu>ul { width:100%; height:100%; display:flex; justify-content: flex-start; align-items: center; flex-wrap: nowrap; } header .menu-container .menu>ul>li { font-size:1.6rem; color:#fff; height:100%;} header .menu-container .menu>ul>li>.sub-menu {display: none; justify-content: center; align-items: center; flex-wrap: wrap; position: absolute; width:100%; text-align: left; opacity: 1; color:#fff; transition: all 0.4s; background-color:#fff; top:7.9rem; left:0; z-index: 99; background-color: #080A10; padding-bottom: 2rem;} header .menu-container .menu>ul>li>.sub-menu>.sub-menu-wrap {display: flex; justify-content: flex-start; align-items: stretch; width:100%; max-width: 1600px; padding:2rem; color:#fff;} header .menu-container .menu>ul>li>.sub-menu>.sub-menu-wrap>.sub-menu-share {flex-basis: 30%; max-width: 30%; padding:0px 2rem; border-right:1px solid rgba(255,255,255,0.1);} header .menu-container .menu>ul>li>.sub-menu>.sub-menu-wrap>.sub-menu-share:first-child {flex-basis: 27rem; max-width: 27rem;} header .menu-container .menu>ul>li>.sub-menu>.sub-menu-wrap>.sub-menu-share:last-child {border-right:none;} header .menu-container .menu>ul>li>.sub-menu>.sub-menu-wrap>.sub-menu-share:hover {background-color: rgba(0,0,0,0.03);} header .menu-container .menu>ul>li>.sub-menu>.sub-menu-wrap>.sub-menu-share>h3 {font-size:2rem; color:rgba(255,255,255,0.25); margin-bottom:10px; margin-top:0;} header .menu-container .menu>ul>li>.sub-menu>.sub-menu-wrap>.sub-menu-share>div {width:100%; position: relative; transition: all 0.4s;} header .menu-container .menu>ul>li>.sub-menu>.sub-menu-wrap>.sub-menu-share>div::before {content:''; position: absolute; bottom:0; left:0; width:0%; height:1px; transition: all 0.4s;} header .menu-container .menu>ul>li>.sub-menu>.sub-menu-wrap>.sub-menu-share>div:hover>a>img {transform: translate(5px);} header .menu-container .menu>ul>li>.sub-menu>.sub-menu-wrap>.sub-menu-share>div>a{padding:0.5rem; width:100%; display: flex; justify-content: space-between; align-items: center; color:rgba(255,255,255,0.8);;;} header .menu-container .menu>ul>li>.sub-menu>.sub-menu-wrap>.sub-menu-share>div>a.active {color:#FFC000;} header .menu-container .menu>ul>li>.sub-menu>.sub-menu-wrap>.sub-menu-share>div>a.active-green {color:#00AAAD;} header .menu-container .menu>ul>li>.sub-menu>.sub-menu-wrap>.sub-menu-share>div>a.active-blue {color:#2EA7E0;} header .menu-container .menu>ul>li>.sub-menu>.sub-menu-wrap>.sub-menu-share>div>a:hover:not(.active) {color:#fff; } header .menu-container .menu>ul>li>.sub-menu>.sub-menu-wrap>.sub-menu-share>div>a>img {max-width: 20px; position: relative; transition: all 0.4s; display: none;} header .menu-container .menu>ul>li>.sub-menu>.sub-menu-wrap>.sub-menu-share:first-child {color:#fff; padding:0;} header .menu-container .menu>ul>li>.sub-menu>.sub-menu-wrap>.sub-menu-share:first-child>div:first-child {flex-basis: 100%; max-width: 100%; border-bottom:0;} header .menu-container .menu>ul>li>.sub-menu>.sub-menu-wrap>.sub-menu-share:first-child>div:last-child {padding:20px; flex-basis: 100%; max-width: 100%; display: block; border-bottom:0;} header .menu-container .menu>ul>li>.sub-menu>.sub-menu-wrap>.sub-menu-share:first-child>div img {width:100%; max-width: 100% !important; vertical-align: middle;} header .menu-container .menu>ul>li>.sub-menu>.sub-menu-wrap>.sub-menu-share:first-child>div:last-child h2 {font-size:2.6rem; width:100%;} header .menu-container .menu>ul>li>.sub-menu>.sub-menu-wrap>.sub-menu-share:first-child>div:last-child h4 {font-size:1.4rem; font-weight: 400; width:100%;} /* header .menu-container .menu>ul>li>.sub-menu#portfolio-sub-menu {display: none; justify-content: center; align-items: center; flex-wrap: wrap; position: absolute; width:100%; text-align: left; opacity: 1; color:#fff; transition: all 0.4s; background-color:#fff; box-shadow:3px 5px 30px 2px rgba(31,75,143,0.2); top:7.9rem; left:0; background-color:#080A10; z-index: 99;} header .menu-container .menu>ul>li>.sub-menu#portfolio-sub-menu>li>a {color:#fff; font-weight: 300; opacity: 1;} header .menu-container .menu>ul>li>.sub-menu#portfolio-sub-menu>.sub-menu-wrap {display: flex; justify-content: space-between; align-items: stretch; width:100%; padding:20px;} header .menu-container .menu>ul>li>.sub-menu#portfolio-sub-menu>.sub-menu-wrap>.sub-menu-share {flex-basis: 23%; max-width: 23%; padding:0px 20px;} header .menu-container .menu>ul>li>.sub-menu#portfolio-sub-menu>.sub-menu-wrap>.sub-menu-share:hover {background-color: rgba(255,255,255,0.03);} header .menu-container .menu>ul>li>.sub-menu#portfolio-sub-menu>.sub-menu-wrap>.sub-menu-share>h3 {font-size:2rem; color:#fff; margin-bottom:10px; margin-top:30px;} header .menu-container .menu>ul>li>.sub-menu#portfolio-sub-menu>.sub-menu-wrap>.sub-menu-share>div {width:100%; position: relative; transition: all 0.4s;} header .menu-container .menu>ul>li>.sub-menu#portfolio-sub-menu>.sub-menu-wrap>.sub-menu-share>div::before {content:''; position: absolute; bottom:0; left:0; width:0%; height:1px; transition: all 0.4s;} header .menu-container .menu>ul>li>.sub-menu#portfolio-sub-menu>.sub-menu-wrap>.sub-menu-share:nth-child(2)>div:hover::before { width:100%; background-color:#febd1a;} header .menu-container .menu>ul>li>.sub-menu#portfolio-sub-menu>.sub-menu-wrap>.sub-menu-share:nth-child(2):hover>h3 {color:#febd1a;} header .menu-container .menu>ul>li>.sub-menu#portfolio-sub-menu>.sub-menu-wrap>.sub-menu-share:nth-child(2)>div:hover a {color:#febd1a; font-weight: bold;} header .menu-container .menu>ul>li>.sub-menu#portfolio-sub-menu>.sub-menu-wrap>.sub-menu-share:nth-child(2)>div.active>a {color:#febd1a; font-weight: bold;} header .menu-container .menu>ul>li>.sub-menu#portfolio-sub-menu>.sub-menu-wrap>.sub-menu-share:nth-child(2)>div.active::before { width:100%; background-color:#febd1a;} */ /* header .menu-container .menu>ul>li>.sub-menu#portfolio-sub-menu>.sub-menu-wrap>.sub-menu-share:nth-child(3)>div:hover::before {width:100%; background-color:#6FBA2C;} header .menu-container .menu>ul>li>.sub-menu#portfolio-sub-menu>.sub-menu-wrap>.sub-menu-share:nth-child(3):hover>h3 {color:#6FBA2C;} header .menu-container .menu>ul>li>.sub-menu#portfolio-sub-menu>.sub-menu-wrap>.sub-menu-share:nth-child(3)>div:hover a {color:#6FBA2C; font-weight: bold;} header .menu-container .menu>ul>li>.sub-menu#portfolio-sub-menu>.sub-menu-wrap>.sub-menu-share:nth-child(3)>div.active>a {color:#6FBA2C; font-weight: bold;} header .menu-container .menu>ul>li>.sub-menu#portfolio-sub-menu>.sub-menu-wrap>.sub-menu-share:nth-child(3)>div.active::before { width:100%; background-color:#6FBA2C;} header .menu-container .menu>ul>li>.sub-menu#portfolio-sub-menu>.sub-menu-wrap>.sub-menu-share:nth-child(4)>div:hover::before {width:100%; background-color:#006cd1;} header .menu-container .menu>ul>li>.sub-menu#portfolio-sub-menu>.sub-menu-wrap>.sub-menu-share:nth-child(4):hover>h3 {color:#006cd1;} header .menu-container .menu>ul>li>.sub-menu#portfolio-sub-menu>.sub-menu-wrap>.sub-menu-share:nth-child(4)>div:hover a {color:#006cd1; font-weight: bold;} header .menu-container .menu>ul>li>.sub-menu#portfolio-sub-menu>.sub-menu-wrap>.sub-menu-share:nth-child(4)>div.active>a {color:#006cd1; font-weight: bold;} header .menu-container .menu>ul>li>.sub-menu#portfolio-sub-menu>.sub-menu-wrap>.sub-menu-share:nth-child(4)>div.active::before { width:100%; background-color:#006cd1;} header .menu-container .menu>ul>li>.sub-menu#portfolio-sub-menu>.sub-menu-wrap>.sub-menu-share>div:hover>a>img {transform: translate(5px);} header .menu-container .menu>ul>li>.sub-menu#portfolio-sub-menu>.sub-menu-wrap>.sub-menu-share>div>a{padding:10px; width:100%; display: flex; justify-content: space-between; align-items: center; color:rgba(255,255,255,0.8);;;} header .menu-container .menu>ul>li>.sub-menu#portfolio-sub-menu>.sub-menu-wrap>.sub-menu-share>div>a>img {max-width: 20px; position: relative; transition: all 0.4s;} header .menu-container .menu>ul>li>.sub-menu#portfolio-sub-menu>.sub-menu-wrap>.sub-menu-share:first-child {background-color:#fff; color:#333333; padding:0;} header .menu-container .menu>ul>li>.sub-menu#portfolio-sub-menu>.sub-menu-wrap>.sub-menu-share:first-child>div:first-child {flex-basis: 100%; max-width: 100%; border-bottom:0;} header .menu-container .menu>ul>li>.sub-menu#portfolio-sub-menu>.sub-menu-wrap>.sub-menu-share:first-child>div:last-child {padding:20px; flex-basis: 100%; max-width: 100%; display: block; border-bottom:0; color:#fff; background-color:#14346e;} header .menu-container .menu>ul>li>.sub-menu#portfolio-sub-menu>.sub-menu-wrap>.sub-menu-share:first-child>div img {width:100%; max-width: 100% !important; vertical-align: middle;} header .menu-container .menu>ul>li>.sub-menu#portfolio-sub-menu>.sub-menu-wrap>.sub-menu-share:first-child>div:last-child h2 {font-size:2.6rem; width:100%;} header .menu-container .menu>ul>li>.sub-menu#portfolio-sub-menu>.sub-menu-wrap>.sub-menu-share:first-child>div:last-child h4 {font-size:1.4rem; font-weight: 400; width:100%;} */ /* header .menu-container .menu>ul>li>.sub-menu#booth-sub-menu {display: none; justify-content: center; align-items: center; flex-wrap: wrap; position: absolute; width:100%; text-align: left; opacity: 1; color:#fff; transition: all 0.4s; background-color:#fff; box-shadow:none; top:7.9rem; left:0; background-color:black; z-index: 99;} header .menu-container .menu>ul>li>.sub-menu#booth-sub-menu>li>a {color:#fff; font-weight: 300; opacity: 1;} header .menu-container .menu>ul>li>.sub-menu#booth-sub-menu>.sub-menu-wrap {display: flex; justify-content: space-between; align-items: stretch; width:100%; padding:20px;} header .menu-container .menu>ul>li>.sub-menu#booth-sub-menu>.sub-menu-wrap>.sub-menu-share {flex-basis: 23%; max-width: 23%; padding:0px 20px;} header .menu-container .menu>ul>li>.sub-menu#booth-sub-menu>.sub-menu-wrap>.sub-menu-share:hover {background-color: rgba(255,255,255,0.03);} header .menu-container .menu>ul>li>.sub-menu#booth-sub-menu>.sub-menu-wrap>.sub-menu-share>h3 {font-size:2rem; color:#fff; margin-bottom:10px; margin-top:30px;} header .menu-container .menu>ul>li>.sub-menu#booth-sub-menu>.sub-menu-wrap>.sub-menu-share>div {width:100%; border-bottom:1px solid rgba(255,255,255,0.3); position: relative; transition: all 0.4s;} header .menu-container .menu>ul>li>.sub-menu#booth-sub-menu>.sub-menu-wrap>.sub-menu-share>div::before {content:''; position: absolute; bottom:-1px; left:0; width:0%; height:1px; transition: all 0.4s;} header .menu-container .menu>ul>li>.sub-menu#booth-sub-menu>.sub-menu-wrap>.sub-menu-share:nth-child(2)>div:hover::before { width:100%; background-color:#FFC000;} header .menu-container .menu>ul>li>.sub-menu#booth-sub-menu>.sub-menu-wrap>.sub-menu-share:nth-child(2):hover>h3 {color:#FFC000;} header .menu-container .menu>ul>li>.sub-menu#booth-sub-menu>.sub-menu-wrap>.sub-menu-share:nth-child(2)>div:hover a {color:#FFC000;} header .menu-container .menu>ul>li>.sub-menu#booth-sub-menu>.sub-menu-wrap>.sub-menu-share:nth-child(2)>div.active>a {color:#FFC000;} header .menu-container .menu>ul>li>.sub-menu#booth-sub-menu>.sub-menu-wrap>.sub-menu-share:nth-child(2)>div.active::before { width:100%; background-color:#FFC000;} header .menu-container .menu>ul>li>.sub-menu#booth-sub-menu>.sub-menu-wrap>.sub-menu-share:nth-child(3)>div:hover::before {width:100%; background-color:#00AAAD;} header .menu-container .menu>ul>li>.sub-menu#booth-sub-menu>.sub-menu-wrap>.sub-menu-share:nth-child(3):hover>h3 {color:#00AAAD;} header .menu-container .menu>ul>li>.sub-menu#booth-sub-menu>.sub-menu-wrap>.sub-menu-share:nth-child(3)>div:hover a {color:#00AAAD;} header .menu-container .menu>ul>li>.sub-menu#booth-sub-menu>.sub-menu-wrap>.sub-menu-share:nth-child(3)>div.active>a {color:#00AAAD;} header .menu-container .menu>ul>li>.sub-menu#booth-sub-menu>.sub-menu-wrap>.sub-menu-share:nth-child(3)>div.active::before { width:100%; background-color:#00AAAD;} header .menu-container .menu>ul>li>.sub-menu#booth-sub-menu>.sub-menu-wrap>.sub-menu-share:nth-child(4)>div:hover::before {width:100%; background-color:#2EA7E0;} header .menu-container .menu>ul>li>.sub-menu#booth-sub-menu>.sub-menu-wrap>.sub-menu-share:nth-child(4):hover>h3 {color:#2EA7E0;} header .menu-container .menu>ul>li>.sub-menu#booth-sub-menu>.sub-menu-wrap>.sub-menu-share:nth-child(4)>div:hover a {color:#2EA7E0;} header .menu-container .menu>ul>li>.sub-menu#booth-sub-menu>.sub-menu-wrap>.sub-menu-share:nth-child(4)>div.active>a {color:#2EA7E0;} header .menu-container .menu>ul>li>.sub-menu#booth-sub-menu>.sub-menu-wrap>.sub-menu-share:nth-child(4)>div.active::before { width:100%; background-color:#2EA7E0;} header .menu-container .menu>ul>li>.sub-menu#booth-sub-menu>.sub-menu-wrap>.sub-menu-share>div:hover>a>img {transform: translate(5px);} header .menu-container .menu>ul>li>.sub-menu#booth-sub-menu>.sub-menu-wrap>.sub-menu-share>div>a{padding:10px; width:100%; display: flex; justify-content: space-between; align-items: center; color:#d2d2d2;} header .menu-container .menu>ul>li>.sub-menu#booth-sub-menu>.sub-menu-wrap>.sub-menu-share>div>a>img {max-width: 20px; position: relative; transition: all 0.4s;} header .menu-container .menu>ul>li>.sub-menu#booth-sub-menu>.sub-menu-wrap>.sub-menu-share:first-child {background-color:#fff; color:#333333; padding:0;} header .menu-container .menu>ul>li>.sub-menu#booth-sub-menu>.sub-menu-wrap>.sub-menu-share:first-child>div:first-child {flex-basis: 100%; max-width: 100%; border-bottom:0;} header .menu-container .menu>ul>li>.sub-menu#booth-sub-menu>.sub-menu-wrap>.sub-menu-share:first-child>div:last-child {padding:20px; flex-basis: 100%; max-width: 100%; display: block; border-bottom:0; color:#fff; background-color:#111111;} header .menu-container .menu>ul>li>.sub-menu#booth-sub-menu>.sub-menu-wrap>.sub-menu-share:first-child>div img {width:100%; max-width: 100% !important; vertical-align: middle;} header .menu-container .menu>ul>li>.sub-menu#booth-sub-menu>.sub-menu-wrap>.sub-menu-share:first-child>div:last-child h2 {font-size:2.6rem; width:100%;} header .menu-container .menu>ul>li>.sub-menu#booth-sub-menu>.sub-menu-wrap>.sub-menu-share:first-child>div:last-child h4 {font-size:1.4rem; font-weight: 400; width:100%;} */ /*MES*/ header .menu-container .menu>ul>li>.sub-menu#mes-sub-menu {display: none; justify-content: center; align-items: center; flex-wrap: wrap; position: absolute; width:100%; text-align: left; opacity: 1; color:#fff; transition: all 0.4s; background-color:#fff; box-shadow:none; top:7.9rem; left:0; background-color:#efefef; z-index: 99;} header .menu-container .menu>ul>li>.sub-menu#mes-sub-menu>li>a {color:#333333; font-weight: 300; opacity: 1;} header .menu-container .menu>ul>li>.sub-menu#mes-sub-menu>.sub-menu-wrap {display: flex; justify-content: center; align-items: stretch; width:100%; gap:2%; padding:20px;} header .menu-container .menu>ul>li>.sub-menu#mes-sub-menu>.sub-menu-wrap>.sub-menu-share {flex-basis: 23%; max-width: 23%; padding:0px 20px; } header .menu-container .menu>ul>li>.sub-menu#mes-sub-menu>.sub-menu-wrap>.sub-menu-share:hover {background-color: rgba(255,255,255,0.03);} header .menu-container .menu>ul>li>.sub-menu#mes-sub-menu>.sub-menu-wrap>.sub-menu-share>h3 {font-size:2rem; color:#333333; margin-bottom:10px; margin-top:30px;} header .menu-container .menu>ul>li>.sub-menu#mes-sub-menu>.sub-menu-wrap>.sub-menu-share>div {width:100%; border-bottom:1px solid #ddd; position: relative; transition: all 0.4s;} header .menu-container .menu>ul>li>.sub-menu#mes-sub-menu>.sub-menu-wrap>.sub-menu-share>div::before {content:''; position: absolute; bottom:-1px; left:0; width:0%; height:1px; transition: all 0.4s;} header .menu-container .menu>ul>li>.sub-menu#mes-sub-menu>.sub-menu-wrap>.sub-menu-share:nth-child(2)>div:hover::before { width:100%; background-color:#FFC000;} header .menu-container .menu>ul>li>.sub-menu#mes-sub-menu>.sub-menu-wrap>.sub-menu-share:nth-child(2):hover>h3 {color:#FFC000;} header .menu-container .menu>ul>li>.sub-menu#mes-sub-menu>.sub-menu-wrap>.sub-menu-share:nth-child(2)>div:hover a {color:#FFC000;} header .menu-container .menu>ul>li>.sub-menu#mes-sub-menu>.sub-menu-wrap>.sub-menu-share:nth-child(2)>div.active>a {color:#FFC000;} header .menu-container .menu>ul>li>.sub-menu#mes-sub-menu>.sub-menu-wrap>.sub-menu-share:nth-child(2)>div.active::before { width:100%; background-color:#FFC000;} /* header .menu-container .menu>ul>li>.sub-menu#mes-sub-menu>.sub-menu-wrap>.sub-menu-share:nth-child(3)>div:hover::before {width:100%; background-color:#00AAAD;} header .menu-container .menu>ul>li>.sub-menu#mes-sub-menu>.sub-menu-wrap>.sub-menu-share:nth-child(3):hover>h3 {color:#00AAAD;} header .menu-container .menu>ul>li>.sub-menu#mes-sub-menu>.sub-menu-wrap>.sub-menu-share:nth-child(3)>div:hover a {color:#00AAAD;} header .menu-container .menu>ul>li>.sub-menu#mes-sub-menu>.sub-menu-wrap>.sub-menu-share:nth-child(3)>div.active>a {color:#00AAAD;} header .menu-container .menu>ul>li>.sub-menu#mes-sub-menu>.sub-menu-wrap>.sub-menu-share:nth-child(3)>div.active::before { width:100%; background-color:#00AAAD;} header .menu-container .menu>ul>li>.sub-menu#mes-sub-menu>.sub-menu-wrap>.sub-menu-share:nth-child(4)>div:hover::before {width:100%; background-color:#2EA7E0;} header .menu-container .menu>ul>li>.sub-menu#mes-sub-menu>.sub-menu-wrap>.sub-menu-share:nth-child(4):hover>h3 {color:#2EA7E0;} header .menu-container .menu>ul>li>.sub-menu#mes-sub-menu>.sub-menu-wrap>.sub-menu-share:nth-child(4)>div:hover a {color:#2EA7E0;} header .menu-container .menu>ul>li>.sub-menu#mes-sub-menu>.sub-menu-wrap>.sub-menu-share:nth-child(4)>div.active>a {color:#2EA7E0;} header .menu-container .menu>ul>li>.sub-menu#mes-sub-menu>.sub-menu-wrap>.sub-menu-share:nth-child(4)>div.active::before { width:100%; background-color:#2EA7E0;} */ header .menu-container .menu>ul>li>.sub-menu#mes-sub-menu>.sub-menu-wrap>.sub-menu-share>div:hover>a>img {transform: translate(5px);} header .menu-container .menu>ul>li>.sub-menu#mes-sub-menu>.sub-menu-wrap>.sub-menu-share>div>a{padding:10px; width:100%; display: flex; justify-content: space-between; align-items: center; color:#333333;} header .menu-container .menu>ul>li>.sub-menu#mes-sub-menu>.sub-menu-wrap>.sub-menu-share>div>a>img {max-width: 20px; position: relative; transition: all 0.4s;} header .menu-container .menu>ul>li>.sub-menu#mes-sub-menu>.sub-menu-wrap>.sub-menu-share:first-child {background-color:#fff; color:#333333; padding:0;} header .menu-container .menu>ul>li>.sub-menu#mes-sub-menu>.sub-menu-wrap>.sub-menu-share:first-child>div:first-child {flex-basis: 100%; max-width: 100%; border-bottom:0;} header .menu-container .menu>ul>li>.sub-menu#mes-sub-menu>.sub-menu-wrap>.sub-menu-share:first-child>div:last-child {padding:20px; flex-basis: 100%; max-width: 100%; display: block; border-bottom:0; color:#333333; background-color:#fff;} header .menu-container .menu>ul>li>.sub-menu#mes-sub-menu>.sub-menu-wrap>.sub-menu-share:first-child>div img {width:100%; max-width: 100% !important; vertical-align: middle;} header .menu-container .menu>ul>li>.sub-menu#mes-sub-menu>.sub-menu-wrap>.sub-menu-share:first-child>div:last-child h2 {font-size:2.6rem; width:100%;} header .menu-container .menu>ul>li>.sub-menu#mes-sub-menu>.sub-menu-wrap>.sub-menu-share:first-child>div:last-child h4 {font-size:1.4rem; font-weight: 400; width:100%;} header .menu-container .menu>ul>li>.sub-menu>li>a {padding:12px 20px; font-weight: 400; font-size:1.5rem; opacity: 0.7; transition: all 0.4s cubic-bezier(.23,1,.32,1); border-bottom:1px solid rgba(0,0,0,0.1);} header .menu-container .menu>ul>li>.sub-menu>li>a:hover {opacity: 1; text-decoration: underline; color:#FFC000; font-weight: 400;} header .menu-container .menu>ul>li>.menu-a {color:#fff; height:100%; display: flex; justify-content: center; align-items: center; position: relative; font-size:1.55rem; padding-left:2rem; padding-right: 2rem; white-space: nowrap;} header .menu-container .menu>ul>li>.menu-a.active {color:#FFC000;} header .menu-container .menu>ul>li>.menu-a>span{position: relative; transition: all 0.4s; flex-shrink: 0;} header .menu-container .menu>ul>li>.menu-a>span>img:last-child {display: none;} header .menu-container .menu>ul>li>.menu-a>span>img:first-child {display: block;} header .menu-container .menu>ul>li>.menu-a.border-active::after {width:50%;} header .menu-container .menu>ul>li>.menu-a.border-active::before {width:50%;} /* header .menu-container .menu>ul>li>a::after {content:''; position: absolute; left:50%; bottom:0; width:0; height:6px; background-color:#FFC000;transition: all 0.4s cubic-bezier(.23,1,.32,1); } */ /* header .menu-container .menu>ul>li>a::before {content:''; position: absolute; right:50%; bottom:0; width:0; height:6px; background-color:#FFC000;transition: all 0.4s cubic-bezier(.23,1,.32,1); } */ header .menu-container .menu>ul>li:hover>.menu-a {color:#FFC000 !important;} /* header .menu-container .menu>ul>li:hover .sub-menu {background-color:rgba(0,0,0,0.025);} */ /* 헤더 기타메뉴 */ header .menu-container .etc-menu {color:#fff; font-family: "Play","NotoSansKR","sans-serif"; display: flex; justify-content: center; align-content: center; flex-wrap: wrap;} header .menu-container .etc-menu .search-container {display: flex; justify-content: center; align-items: center; flex-wrap: wrap;} header .menu-container .etc-menu .search-container li {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } header .menu-container .etc-menu .search-container li img {transition: all 0.4s cubic-bezier(.23,1,.32,1); cursor: pointer;} header .menu-container .etc-menu .search-container li img:last-child {display: none;} header .menu-container .etc-menu .search-container li img:hover {opacity: 0.7;} /* 헤더 언어선택 영역 */ header.activated {background:#080A10; transition: all 0.4s cubic-bezier(.23,1,.32,1); box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;} header.activated .menu-container .menu>ul>li:hover>a {color:#FFC000;} /* header.activated .menu-container .menu>ul>li>a>span>img {max-width: 100%; width:24px; height: auto !important; } */ header.activated .menu>ul>li>a>span>img:first-child {display: none;} header.activated .menu>ul>li>a>span>img:last-child {display: block;} header.activated .border-active {color:#FFC000 !important;} /* 마우스 내렸을때 로고 변경 */ header.activated .menu-container .logo a img:first-child {display: none;} header.activated .menu-container .logo a img:last-child {display: block;} header.activated.black {background-color:#080A10; color:#fff;} header.activated.black .menu-container .menu>ul>li>a {color:#fff;} header.activated.black .menu-container .menu>ul>li>a>span>img {filter: brightness(10000);} header.black .menu-container .menu>ul>li>a::after {background-color:#FFC000;} header.black .menu-container .menu>ul>li>a::before {background-color:#FFC000;} header.activated.black .menu-container .menu>ul>li:hover>a {color:#FFC000 !important;} header.activated.black .border-active {color:#FFC000 !important;} .side-bar {display: flex; justify-content: center; align-items: center; cursor: pointer;} .side-bar>div {width:2.6rem; height:2.6rem; position: relative; z-index: 99; display: flex; flex-direction: column;} .side-bar ul {width: 100%; flex-basis: 100%; max-width: 100%; display: flex; align-items: center; justify-content: space-between; width: 100%; } .side-bar ul li {width:0.5rem; height: 0.5rem; background-color: rgba(255,255,255,0.3); transition: all 0.4s cubic-bezier(.23,1,.32,1); } .side-bar ul li.white {width:0.5rem; height: 0.5rem; background-color: #fff; } .side-bar ul:first-child {align-items: flex-start;} .side-bar ul:last-child {align-items: flex-end;} .side-bar:hover ul li.white { background-color: #FFC000;} .side-bar:hover ul li { background-color: #fff;} /* 사이드 메뉴 버튼 */ /* .side-menu-container {width:100%; max-width:100%; height:100%; background-color:rgba(0,0,0,0.7); z-index: 1001; position: fixed; top:0; right:0;} .side-menu-container .side-menu {position: fixed; top:0; right:-100%; width:100%; max-width:300px; height:100%; background-color:#fff; display: flex; flex-direction: column; padding:10px; } .side-menu-container .side-menu .top-menu {width:100%; height:60px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; border-bottom:1px solid #ddd;} .side-menu-container .side-menu .top-menu li:last-child .sub {display: flex; justify-content: center; align-items: center; flex-wrap: wrap;} .side-menu-container .side-menu .top-menu li:last-child .sub>li:first-child img {width:30px; height:auto; cursor: pointer; transition: all 0.4s; margin:5px;} .side-menu-container .side-menu .top-menu li:last-child .sub>li:first-child:hover img {opacity: 0.7;} .side-menu-container .side-menu .top-menu li:last-child .sub>li:last-child img {width:30px; height:auto; cursor: pointer; transition: all 0.4s; margin:5px;} .side-menu-container .side-menu .top-menu li:last-child .sub>li:last-child:hover img {opacity: 0.7;} .side-menu-container .side-menu .top-menu li:first-child img {width:100px; margin:5px; transition: all 0.4s;} .side-menu-container .side-menu .top-menu li:first-child:hover img {opacity: 0.7;} .side-menu-container .side-menu .lang-menu {display: none; justify-content: center; align-items: center; flex-wrap: wrap; height:40px; border-bottom:1px solid #ddd;} .side-menu-container .side-menu .lang-menu li {font-family: "Play"; text-align: center; flex-basis: 50%; max-width:50%; height:100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; cursor: pointer;} .side-menu-container .side-menu .lang-menu li:first-child {border-right:1px solid #ddd;} .side-menu-container .side-menu .lang-menu li.active-lang {font-weight: bold; color:#FFC000;} .side-menu-container .side-menu .menu {width:100%; overflow-y: auto;} .side-menu-container .side-menu .menu>li {padding:0; border-bottom:1px solid #ddd; position: relative; transition: all 0.4s;} .side-menu-container .side-menu .menu>li>p {padding:15px; font-size:1.4rem; font-weight: 400;} .side-menu-container .side-menu .menu>li>.sub-menu {background-color:rgba(0,0,0,0.05); display: none;} .side-menu-container .side-menu .menu>li>.sub-menu li a {font-size:1.4rem; border-bottom:1px solid #ddd; padding:10px;} .side-menu-container .side-menu .menu>li>.sub-menu li:last-child a {border-bottom:0;} */ /* 사이드 메뉴 연락처 */ .side-menu-container {width:100%; max-width:100%; height:100%; background-color:rgba(0,0,0,0.7); z-index: 1001; position: fixed; top:0; z-index: -1; opacity: 0; } .side-menu-container.on {visibility: visible; opacity: 1; display: block; z-index: 999;} .side-menu-container #side-contact {position: fixed; top:0; right:-100%; width:100%; max-width:50%; height:calc(100vh); border-radius: 1.5rem 0 0 1.5rem; background-color:#080A10; padding: 2.8rem 6rem; transition: all 0.4s cubic-bezier(.23,1,.32,1); display: flex; flex-direction: column; justify-content: flex-start; transition: all 0.4s cubic-bezier(.23,1,.32,1);} .side-menu-container #side-contact.on {right:0%;} .side-menu-container #side-contact .close-wrap {display: flex; justify-content: flex-end; align-items: center;} .side-menu-container #side-contact .close-wrap>div {cursor: pointer;} .side-menu-container #side-contact .close-wrap>div:hover {opacity: 0.7;} .side-menu-container #side-contact .top-menu {width:100%; height:80px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding-left:1rem; padding-right:1rem; } .side-menu-container #side-contact .top-menu li:last-child .sub {display: flex; justify-content: center; align-items: center; flex-wrap: wrap;} .side-menu-container #side-contact .top-menu li:last-child .sub>li:first-child img {width:30px; height:auto; cursor: pointer; transition: all 0.4s;} .side-menu-container #side-contact .top-menu li:last-child .sub>li:first-child:hover img {opacity: 0.7;} .side-menu-container #side-contact .top-menu li:last-child .sub>li:last-child img {width:30px; height:auto; cursor: pointer; transition: all 0.4s;} .side-menu-container #side-contact .top-menu li:last-child .sub>li:last-child:hover img {opacity: 0.7;} .side-menu-container #side-contact .top-menu li:first-child img {width:25rem; transition: all 0.4s;} .side-menu-container #side-contact .top-menu li:first-child:hover img {opacity: 0.7;} .side-menu-container #side-contact .lang-menu {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; height:40px; border-bottom:1px solid rgba(255,255,255,0.1);} .side-menu-container #side-contact .lang-menu li {font-family: "Play"; text-align: center; flex-basis: 50%; max-width:50%; height:100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; cursor: pointer;} .side-menu-container #side-contact .lang-menu li:first-child {border-right:1px solid #ddd;} .side-menu-container #side-contact .lang-menu li.active-lang {font-weight: bold; color:#FFC000;} .side-menu-container #side-contact .menu {width:100%; overflow-y: auto; margin-top:2rem; overflow-x: hidden;} .side-menu-container #side-contact .menu>li {padding:0; position: relative; cursor: pointer; transition: all 0.4s;} .side-menu-container #side-contact .menu>li>p {padding:1.5rem; font-size:3rem; font-weight: 200; position: relative; transition: all 0.4s cubic-bezier(.23,1,.32,1);} .side-menu-container #side-contact .menu>li>p>a {color:#fff;} .side-menu-container #side-contact .menu>li>p:hover:not(.on) {opacity: 0.7;} .side-menu-container #side-contact .menu>li>.flex_start {background-color:#006cd1; color:#fff;} .side-menu-container #side-contact .menu>li>.flex_start.darkblue { color:#fff;} .side-menu-container #side-contact .menu>li>.flex_start:hover {opacity: 0.7;} .side-menu-container #side-contact .menu>li>.flex_start>a {color:#fff; line-height: 1.2; font-weight: bold;} .side-menu-container #side-contact .menu>li>.flex_start>a>span {font-size:1.3rem; color:rgba(255,255,255,0.76); font-weight: 300;} .side-menu-container #side-contact .menu>li>.flex_start>img {margin-right:5px;} .side-menu-container #side-contact .menu>li>p.on {color:#FFC000;} .side-menu-container #side-contact .menu>li>p.on::after {transform: translateY(-50%) rotate(180deg) !important;} .side-menu-container #side-contact .menu>li.down p::after {content:''; position: absolute; top:50%; transform: translateY(-50%); width:4rem; height:4rem; background-image: url(/ITDA2025/image/keyboard_arrow_down_white_24dp.svg); background-repeat: no-repeat; background-size:cover; transition: all 0.4s; opacity: 0.4;} /* .side-menu-container #side-contact .menu>li>.sub-menu.portfolio-sub-menu-m {background-color:rgba(255,255,255,0.05); color:#fff;} .side-menu-container #side-contact .menu>li>.sub-menu.portfolio-sub-menu-m a {color:#fff;} .side-menu-container #side-contact .menu>li>.sub-menu.booth-sub-menu-m {background-color:#17181F; color:#fff;} .side-menu-container #side-contact .menu>li>.sub-menu.booth-sub-menu-m a {color:#fff;} */ .side-menu-container #side-contact .menu>li>.sub-menu { display: none; background-color: rgba(255,255,255,0.05); border-radius: 1.5rem;} .side-menu-container #side-contact .menu>li>.sub-menu span {border-right:1px solid rgba(255,255,255,0.3); padding-right:8px; margin-right:8px;} .side-menu-container #side-contact .menu>li>.sub-menu .title {font-size:1.3rem; color:#fff; border-bottom:1px solid rgba(255,255,255,0.1);} .side-menu-container #side-contact .menu>li>.sub-menu .title p {padding:5px; margin-left:5px;} .side-menu-container #side-contact .menu>li>.sub-menu li a {font-size:1.8rem; padding:1rem 2rem; color:rgba(255,255,255,0.8);;; } .side-menu-container #side-contact .menu>li>.sub-menu li a.active {color:#FFC000;} .side-menu-container #side-contact .menu>li>.sub-menu li a:hover {color:#fff;} .side-menu-container #side-contact .menu>li>.sub-menu li a>span>img {max-width:18px; display:inline-block; vertical-align: middle;} .side-menu-container #side-contact .menu>li>.sub-menu li:last-child a {border-bottom:0;} .side-menu-container .side-menu .menu>li.on::after {transform: rotate(90deg);} .side-menu-container #side-contact .menu>li:last-child {display: flex; justify-content: center; align-items: center; margin-top:3rem;} .side-menu-container #side-contact .menu>li:last-child div { padding:1rem 2rem; border-radius: 0.5rem; background-color: #006cd1; } .side-menu-container #side-contact .menu>li:last-child div:last-child {background-color:#1e4894;} .side-menu-container #side-contact .menu>li:last-child div>a {display: flex; justify-items: center; align-items: center;} .side-menu-container #side-contact .menu>li:last-child>div>a>span {font-size:1.8rem; font-weight: bold; color:#fff; padding:1rem;} /* css */ .navBtn5 { position: relative; display: flex; flex-direction: column; justify-content: center; width: 3rem; /* height: 32px; */ text-align: center; } .navBtn5 .bar { display: block; /* position: absolute; */ width: inherit; height: 3px; background: #fff; transition: transform .3s ease-out .1s; -webkit-transition: transform .3s ease-out .1s; -moz-transition: transform .3s ease-out .1s; } .navBtn5 .bar:nth-child(1) { margin-bottom: 5px; transform-origin: left; -webkit-transform-origin: left; -moz-transform-origin: left; } .navBtn5 .bar:nth-child(2) { margin-bottom: 5px; } .navBtn5 .bar:nth-child(3) { /* margin-bottom: 5px; */ } .navBtn5.is-open .bar:nth-child(1) { transform: scaleX(0); -webkit-transform: scaleX(0); -moz-transform: scaleX(0); } .navBtn5.is-open .bar:nth-child(2) { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); } .navBtn5.is-open .bar:nth-child(3) { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); } .actionBtn5 { overflow:hidden; position:relative; display:block; width:100%; height:40px; margin:auto; border:1px solid rgba(0,170,203,0.5); text-align:center; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; line-height:40px; color:#fff; font-size:1.4rem; text-decoration:none; text-transform:uppercase; margin-top:5px; margin-bottom:5px; } .actionBtn5 span { display:block; } .actionBtn5 .hover:after { position:absolute; top:0; left:50%; opacity:0; display:block; content:""; width:0%; height:40px; background-color:#FFC000; border:1px solid #FFC000; transform:skewX(-40deg); -webkit-transform:skewX(-40deg); -moz-transform:skewX(-40deg); transform-origin:center center; -webkit-transform-origin:center center; -ms-transform-origin:center center; -moz-transform-origin:center center; transition:all .35s, opacity .4s; -webkit-transition:all .35s, opacity .4s; -moz-transition:all .35s, opacity .4s; } .actionBtn5 .hover .txt { z-index:10; position:relative; color:#FFC000; transition:color .35s; -webkit-transition:color .35s; -moz-transition:color .35s; } .actionBtn5:hover .hover .txt { color:#fff; } .actionBtn5 .hover:hover:after { opacity:1; left:3%; width:95%; transform:skewX(-40deg); -webkit-transform:skewX(-40deg); -moz-transform:skewX(-40deg); } .actionBtn15 { display: inline-block; position: relative; margin: auto; text-transform: uppercase; text-decoration: none; margin-top:10px; } .actionBtn15 .lb-box { display: block; padding: 11px 15px; } .actionBtn15 .lb-box:after { content: ''; display: block; clear: both; } .actionBtn15 .lb { display: block; position: relative; z-index: 1; float: left; color:#222; font-size: 14px; font-weight: bold; font-family: 'S-Core', sans-serif; } .actionBtn15 .cir-lt, .actionBtn15 .cir-rt { display: block; position: absolute; left: 0; top: 50%; width: 40px; height: 40px; margin-left: 0; background: #ffe1e2; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); } .actionBtn15 .cir-lt { width: 40px; opacity: 1; transition: width .3s ease .3s, opacity 0s ease .3s; -webkit-transition: width .3s ease .3s, opacity 0s ease .3s; -moz-transition: width .3s ease .3s, opacity 0s ease .3s; } .actionBtn15 .cir-rt { width: 100%; opacity: 0; transition: width .3s ease 0s, opacity 0s ease .3s, left .3s ease 0s, margin-left .3s ease; -webkit-transition: width .3s ease 0s, opacity 0s ease .3s, left .3s ease 0s, margin-left .3s ease; -moz-transition: width .3s ease 0s, opacity 0s ease .3s, left .3s ease 0s, margin-left .3s ease; } .actionBtn15:hover .cir-lt { width: 100%; opacity: 0; transition: width .3s ease 0s, opacity 0s ease .3s; -webkit-transition: width .3s ease 0s, opacity 0s ease .3s; -moz-transition: width .3s ease 0s, opacity 0s ease .3s; } .actionBtn15:hover .cir-rt { left: 100%; margin-left: -40px; width: 40px; opacity: 1; transition: width .3s ease .3s, opacity 0s ease .3s, left .3s ease .3s, margin-left .3s ease .3s; -webkit-transition: width .3s ease .3s, opacity 0s ease .3s, left .3s ease .3s, margin-left .3s ease .3s; -moz-transition: width .3s ease .3s, opacity 0s ease .3s, left .3s ease .3s, margin-left .3s ease .3s; } .actionBtn15 .ico-plus { display: block; position: relative; z-index: 1; float: right; width: 9px; height: 9px; margin: 6px 0 0 25px; background: url('/SEANET/image/ico_cross_1.png') no-repeat; transition: transform .3s ease .15s; -webkit-transition: transform .3s ease .15s; -moz-transition: transform .3s ease .15s; } .actionBtn15:hover .ico-plus { transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); } .title-wrpas {font-size:1.6rem; color:#333333; margin-top:40px;} .tab-btn-wraps .cont_1200 {width:100%; max-width:1200px; margin:0 auto; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; box-shadow:0 5px 14px 0 rgba(61,82,96,0.15);} .tab-btn-wraps .cont_1200 .content {flex-basis: 50%; max-width:50%;} .tab-btn-wraps .cont_1200 .content a{ padding:20px; background-color:#fafafa; font-family: "Play"; transition: all 0.4s;} .tab-btn-wraps .cont_1200 .content a:hover {opacity: 0.8;} .tab-btn-wraps .cont_1200 .content.active a{color:#fff; font-weight: bold; background-color:#FFC000;} .wrap{width:100%; height:100%; margin:0 auto; } .wrap .banner-wrap {width:100%; height:937px; color:#fff; display:flex; justify-content: flex-start; align-items: center; flex-wrap:wrap; position: relative; overflow: hidden;} .wrap .banner-wrap video {z-index: 0; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); width: 100%; height: 100%; min-width: 100%; min-height: 100%; object-fit: cover;} .wrap .banner-wrap .banner-wrap-image {position: absolute; top:50%; left:50%; width:100%; height:100%; transition: 6s ease-out; display: block; animation: banner-scale 5s both; margin: auto; transform: translate(-50%,-50%) scale(1.0);} .wrap .banner-wrap .cont-1366 .award-p {font-size:1.6rem; color:#fff;} .wrap .banner-wrap .cont-1366>ul {width:100%;} .wrap .banner-wrap .cont-1366>ul>li {width:100%;} .wrap .banner-wrap .cont-1366>ul>li .page-navi {width:100%; margin-top: 2rem;} .wrap .banner-wrap .cont-1366>ul>li .page-navi>li {font-size: 1.6rem; margin-right:5px; position: relative; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;} .wrap .banner-wrap .cont-1366>ul>li .page-navi>li>a {color:rgba(255,255,255,1); transition: all 0.4s;} .wrap .banner-wrap .cont-1366>ul>li .page-navi>li>a:hover {opacity: 0.6;} .wrap .banner-wrap .cont-1366>ul>li .page-navi>li:first-child::after {display: none;} .wrap .banner-wrap .cont-1366>ul>li>h2 {font-size:8rem; font-weight: bold;} .wrap .banner-wrap .cont-1366>ul>li:last-child>p {font-size:2rem; font-weight: 300; margin-top:2rem; color:#dadada;} @-webkit-keyframes banner-scale { 0% {transform: translate(-50%,-50%) scale(1.2);} 100% {transform: translate(-50%,-50%) scale(1.0);} } @keyframes banner-scale { 0% {transform: translate(-50%,-50%) scale(1.2);} 100% {transform: translate(-50%,-50%) scale(1.0);} } @-moz-keyframes banner-scale { 0% {transform: translate(-50%,-50%) scale(1.2);} 100% {transform: translate(-50%,-50%) scale(1.0);} } /* 서비스 영역 */ #service-wrap .content.visual-design.active>ul>.text-wrap {background-color:#febd1a; color:#fff;} #service-wrap .content.digital-design.active>ul>.text-wrap {background-color:#6FBA2C; color:#fff;} #service-wrap .content.marketing-design.active>ul>.text-wrap {background-color:#006cd1; color:#fff;} #service-wrap .content.active>ul>.text-wrap>p {color:#767578;} #service-wrap .content.active>ul>.text-wrap>h4 {color:#fff;} /* 서비스 타이틀 */ .sub-title {width:100%; margin-top:3rem; display:flex; justify-content: space-between; align-items: center; flex-wrap: wrap; position: relative; } .sub-title .bread-crumb {display: flex; justify-content: flex-start; align-items: stretch; gap:1.5rem; position: relative; z-index: 1;} .sub-title .bread-crumb>a {position: relative; color:rgba(255,255,255,0.8);;; font-size:1.6rem; cursor: pointer;} .sub-title .bread-crumb>a:hover {color:rgba(255,255,255,1);} .sub-title .bread-crumb>a::before {content:'/'; position: absolute; top:50%; right:-1rem; transform: translate(0%,-50%); opacity: 0.5;} .sub-title .bread-crumb>a:last-child::before {display: none;} /* .sub-title .name-wrap { justify-content: flex-start; align-items: flex-end; flex-basis: 100%; max-width: 100%;} */ /* .sub-title .name-wrap h2 {font-size:6rem; font-weight: 900; width:100%; line-height: 1.2; text-align: center;} */ /* .sub-title .name-wrap p {position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); color:#fff;} */ .sub-title .tag-wrap { display:flex; justify-content: flex-start; align-items: center; flex-basis: 100%; max-width: 100%;} .sub-title .tag-wrap .tag {display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap:2rem; margin-bottom: 2rem;} .sub-title .tag-wrap .tag>li>p{padding:1rem 3rem; color:#fff; font-size:1.6rem; font-weight: bold; border-radius: 5rem; transition: all 0.8s cubic-bezier(.23,1,.32,1); background-color:rgba(255,255,255,0.03); position: relative; overflow: hidden;} .sub-title .tag-wrap .tag>li>p::before {content: ""; position: absolute; inset: 0; padding: 1px; /* 테두리 두께 */ background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.01)); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; -webkit-mask-composite: destination-out; pointer-events: none; } /* .sub-title .tag-wrap .tag.visual-tag>li>p{padding:10px 30px; color:#fff; background-color:#febd1a; font-size:2.4rem; font-weight: bold; border-radius: 80px;} */ /* .sub-title .tag-wrap .tag.digital-tag>li>p{padding:10px 30px; color:#fff; background-color:#6FBA2C; font-size:2.4rem; font-weight: bold; border-radius: 80px;} */ /* .sub-title .tag-wrap .tag.marketing-tag>li>p{padding:10px 30px; color:#fff; background-color:#006cd1; font-size:2.4rem; font-weight: bold; border-radius: 80px;} */ .sub-title .text-area {width:100%; margin-bottom:1rem; margin-top:2rem; flex-basis: 100%; max-width: 100%; margin-bottom:5rem;} .sub-title .text-area>p {font-size:1.8rem; color:rgba(255,255,255,0.8);;; text-align: left; width: 100%; max-width: 120rem; } .sub-title .text-area>h3 {font-size:3rem; color:#fff; text-align: left; margin-bottom: 2rem;} .sub-title .bg-title {text-align: left; font-weight: 900; width:100%; height: auto; line-height: 1; color:rgba(255,255,255,0.05); text-transform: uppercase; white-space: nowrap; position: relative;} .sub-title .bg-title>h2 {line-height: 1; position: relative; text-align: left; font-size:20rem; overflow: hidden; } .sub-title .bg-title>h2::before { pointer-events: none; content:''; position: absolute; width:100%; height:50%; bottom: 0; left:50%; transform: translateX(-50%); background: linear-gradient(to top, #080A10 50%, transparent 100%);} .sub-title .bg-title>p {position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); width: 100%; color:#FFC000; font-size:7rem; text-align: left; } .process-wrap-re {width:100%; display: none; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; margin-top:20px;} .process-wrap-re>ul {flex-basis: 32.333%; max-width: 32.333%; background-color:#fff; color:#333333; text-align: center; margin:0.5%; position: relative; background-position: center center; background-repeat: no-repeat;} .process-wrap-re>ul .process-right img {max-width: 50px; height: auto!important;} .process-wrap-re>ul .process-right img {max-width: 50px; height: auto!important;} .process-wrap-re>ul:nth-child(3) .process-right {bottom:0%; left:50%; transform: translate(-50%,110%);} .process-wrap-re>ul:nth-child(3) .process-right img {transform: rotate(90deg);} .process-wrap-re>ul:nth-child(4) .process-right img {transform: rotate(180deg);} .process-wrap-re>ul:nth-child(5) .process-right img {transform: rotate(180deg);} .process-wrap-re>ul:nth-child(6) .process-right img {display: none;} .process-wrap-re>ul .process-right {position: absolute; width:50px; height:50px; padding:0; z-index: 1; top:50%; right:0; transform: translate(55%,-50%); display: none;} .process-wrap-re.visual-design ul:hover {background-color:#febd1a; color:#fff;} .process-wrap-re.digital-design ul:hover {background-color:#6FBA2C; color:#fff;} .process-wrap-re>ul:hover {background-color:#006cd1; color:#fff;} .process-wrap-re>ul:hover li>h2 {color:rgba(255,255,255,0.55);} .process-wrap-re>ul>li {padding:25px 20px;} .process-wrap-re>ul>li>h2 {font-size:6rem; width:100%; line-height: 1.2; color:rgba(0,0,0,0.55);} .process-wrap-re>ul>li>h3 {font-size:1.8rem; width:100%; font-weight: 600;} .sub-title #promotion {font-size:8vw;} .sub-title #environmental {font-size:7.5vw;} /* 줌 확대 애니메이션 */ @keyframes zoom_banner { 0% { background-size: 100% auto; } /* 50% { background-size: 140% auto; } */ 100% { background-size: 100% auto; } } @-webkit-keyframes zoom_banner { 0% { background-size: 100% auto; } /* 50% { background-size: 140% auto; } */ 100% { background-size: 100% auto; } } #service-wrap {max-width: 100%;} .service-image-wrap {width:100%;} .service-image-wrap>li>img {width:100%; vertical-align: middle; transition: all 1.6s cubic-bezier(.23,1,.32,1);} .service-image-wrap>li:first-child {overflow: hidden;} .service-image-wrap>li:first-child:hover img {transform: scale(1.05);} .service-image-wrap .btn-wrap {width:100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; width:100%; margin-top:10px;} .service-image-wrap .btn-wrap a {color:#fff; font-size:1.8rem; font-weight: bold; background-color:#FFC000; text-align: center; padding:10px; max-width: 250px; width:100%; transition: all 1.6s cubic-bezier(.23,1,.32,1);} .service-image-wrap .yellow-btn-wrap a {color:#fff; font-size:1.8rem; font-weight: bold; background-color:#febd1a; text-align: center; padding:15px 20px; max-width: 250px; width:100%; transition: all 1.6s cubic-bezier(.23,1,.32,1);} .service-image-wrap .green-btn-wrap a {color:#fff; font-size:1.8rem; font-weight: bold; background-color:#6FBA2C; text-align: center; padding:15px 20px; max-width: 250px; width:100%; transition: all 1.6s cubic-bezier(.23,1,.32,1);} .service-image-wrap .yellow-btn-wrap a {color:#fff; font-size:1.8rem; font-weight: bold; background-color:#006cd1; text-align: center; padding:15px 20px; max-width: 250px; width:100%; transition: all 1.6s cubic-bezier(.23,1,.32,1);} .service-image-wrap .btn-wrap a:hover {max-width: 100%; } .service-procees-wrap {position: relative;} .service-procees-wrap::before {content:''; position: absolute; top:0; left:-100%; width:100%; height:100%; background-color: #f8f8f8; z-index: 10;} .service-procees-wrap .title {width:100%;} .service-procees-wrap .title>ul {width:100%;} .service-procees-wrap .title>ul>li>h3 {font-size:5.4rem;} .service-procees-wrap .title>ul>li>p {font-size:1.8rem; color:rgba(0,0,0,0.5);} .service-procees-wrap .swiper-container {background-color:rgba(248,248,248,1); width:100%; height:100%; position: relative; } .service-procees-wrap .swiper-container .swiper-wrapper {width:100%; padding-bottom:40px; margin-top:40px; display: flex; justify-content: flex-start; align-items: stretch ; flex-wrap: wrap;} .service-procees-wrap .swiper-container .swiper-wrapper .swiper-slide {color:rgba(0,173,203,1); width:20%; height: 200px; margin:2.5%; transition: all 1.6s cubic-bezier(.23,1,.32,1); position: relative; border:1px solid rgba(0,173,203,0.5); padding:3rem; display: flex; justify-content: center; align-items: stretch;} .service-procees-wrap .swiper-container .swiper-wrapper .swiper-slide:last-child::after {display: none;} .service-procees-wrap .swiper-container.visual-design .swiper-wrapper .swiper-slide:hover {background-color:#febd1a;} .service-procees-wrap .swiper-container.digital-design .swiper-wrapper .swiper-slide:hover {background-color:#6FBA2C;} .service-procees-wrap .swiper-container.marketing-design .swiper-wrapper .swiper-slide:hover {background-color:#006cd1;} /* .service-procees-wrap .swiper-container.visual-design .swiper-wrapper .swiper-slide.on {background-color:#febd1a;} */ /* .service-procees-wrap .swiper-container.digital-design .swiper-wrapper .swiper-slide.on {background-color:#6FBA2C;} */ /* .service-procees-wrap .swiper-container.marketing-design .swiper-wrapper .swiper-slide.on {background-color:#006cd1;} */ /* .service-procees-wrap .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active {border-radius: 50%; background-color:#6FBA2C;} */ .service-procees-wrap .swiper-container .swiper-wrapper .swiper-slide:hover {background-color:rgba(0,173,203,1);} .service-procees-wrap .swiper-container .swiper-wrapper .swiper-slide:hover>ul>li>h3 {color:#fff; margin-top:1rem; margin-bottom: 1rem;} .service-procees-wrap .swiper-container .swiper-wrapper .swiper-slide:hover>ul>li.play {color:#fff;} .service-procees-wrap .swiper-container#marketing-design .swiper-wrapper .swiper-slide:hover {background-color:#006cd1; border:1px solid #006cd1;} .service-procees-wrap .swiper-container .swiper-wrapper .swiper-slide>ul {width:100%; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;} .service-procees-wrap .swiper-container .swiper-wrapper .swiper-slide>ul>li.play {font-size:4rem; color:rgba(0,173,203,0.3); text-align: center; font-weight: bold; line-height: 1;} .service-procees-wrap .swiper-container .swiper-wrapper .swiper-slide>ul>li>h3{font-size:1.6rem; text-align: center; font-weight: 300;} .service-procees-wrap .swiper-scrollbar-drag {background-color:rgba(0,0,0,0.2);} .service-procees-wrap .mouse-drag {text-align: center; font-size: 1.6rem; line-height: 1.6; color:rgba(0,0,0,0.4);} .swiper-container-horizontal > .swiper-scrollbar {z-index: 0; width:100%; left:0; height:8px; bottom:22px; z-index: 2;} .contact-layout {width:100%; display: flex; justify-content: center; align-items: center; background-image: url(/ITDA2025/image/contact-banner.jpg); height: 97rem; background-position: center; background-size: cover;} .contact-layout .cont-1366 h2 {font-size: 6rem; font-weight: 900;} .contact-layout .cont-1366 h3 {font-size: 6rem; } .contact-layout .cont-1366 h3 .pret {font-weight: 300;} .contact-layout .cont-1366 .flex_3ea {flex-basis: 100rem; max-width: 100rem; margin: 0 auto; margin-top:3rem; align-items: stretch;} .contact-layout .cont-1366 .flex_3ea .content { font-size:1.8rem; text-align: center; padding:2rem; border-radius: 1.5rem; display: flex; justify-content: center; align-items: center; border:1px solid rgba(255,255,255,0.1); } .contact-layout .cont-1366 .flex_3ea .content a {color:#fff; font-weight: 200; font-size:2.4rem; transition: all 0.4s cubic-bezier(.23,1,.32,1); } .contact-layout .cont-1366 .flex_3ea .content h4 {font-size:1.8rem;} .contact-layout .cont-1366 .flex_3ea .content .time {font-size:2.4rem; font-weight: 200;} .contact-layout .cont-1366 .flex_3ea .content .notice {font-size:1.6rem; font-weight: 200;} .contact-layout .cont-1366 .flex_3ea .content:hover a{color:#febd1a; text-decoration: underline; } .contact-layout .inquiry-title {text-align: center; } .contact-layout .inquiry-title p {font-size:1.8rem;} .contact-layout.sub {height: auto; padding-top:10rem; padding-bottom: 10rem;} /* 포트폴리오 검색 영역 */ .search-title {width:100%; text-align: center; max-width: 854px; margin: auto;} .search-title>li {width:100%;} .search-title>li:first-child {font-size: 4rem;} .search-title>li:nth-child(2) {width:100%;} .search-title>li:nth-child(2)>p {font-size: 2rem; font-weight: 300; color:rgba(255,255,255,0.8);;; margin-top:5px;} .search-title>li.search-layout {width:100%; border-bottom:1px solid #333333; justify-content: space-between; margin-bottom:100px; margin-top:20px;} .search-title>li.search-layout div:first-child {flex-basis: 80%; max-width: 80%;} .search-title>li.search-layout div:last-child {flex-basis: 20%; max-width: 20%;} .search-title>li.search-layout input[type=text] {border:none; width:100%; padding:10px; background-color:transparent; } .search-title>li.search-layout .search-btn {width:50px; height:50px;} .search-title>li.search-layout .search-btn img {width:50px; cursor:pointer;} .search-title>li.search-layout .search-btn img:hover {opacity: 0.5;} /* 포트폴리오 검색 영역 */ .port-list {width:100%; display:flex ;justify-content: flex-start; align-items: stretch; flex-wrap: wrap; margin-top:5rem; gap:2rem;} .port-list>.content {width:calc(33.333% - 2rem); border-radius: 1.5rem; background-color: rgba(255,255,255,0.05); max-width: calc(33.333% - 2rem); flex-basis: calc(33.333% - 2rem); border-right:1px solid rgba(0,0,0,0.1); text-align: center; padding:3rem;} .port-list>.content:last-child {border-right:none;} .port-list>.content>ul>li>h2 {font-size: 3rem; color:rgba(255,255,255,0.1); line-height: 1; margin-bottom: 2rem; margin-top:2rem;} .port-list>.content>ul>li>p {font-size:2rem; padding:1.5rem 2rem; width:100%; cursor: pointer; transition: all 0.4s cubic-bezier(.23,1,.32,1); } .port-list>.content>ul>li>p:hover:not(.active) {opacity: 0.5;} .port-list>.content>ul>li>p.active {background-color:#FFC000; color:#fff; border-radius: 5rem; box-shadow:0 5px 14px 0 rgba(61,82,96,0.15);} /* .port-list>.content>ul>li>p.yellow-btn.active {background-color:#febd1a; color:#fff; border-radius: 1000px; box-shadow:0 5px 14px 0 rgba(61,82,96,0.15);} */ /* .port-list>.content>ul>li>p.green-btn.active {background-color:#6FBA2C; color:#fff; border-radius: 1000px; box-shadow:0 5px 14px 0 rgba(61,82,96,0.15);} */ /* .port-list>.content>ul>li>p.yellow-btn.active {background-color:#006cd1; color:#fff; border-radius: 1000px; box-shadow:0 5px 14px 0 rgba(61,82,96,0.15);} */ .portfolio-layout {display: flex; justify-content: space-between; gap:2rem; align-items: flex-start; max-width: 1600px; margin: 0 auto; width: 100%; flex-wrap: wrap;} .portfolio-layout .side-menu-wrap {width:100%; position: relative; height: 100%; border-radius: 5rem; background-color: #15161C; padding:0.5rem 5rem; position: sticky; top:10rem; left:0; width: 100%; z-index: 2; overflow: hidden; } .portfolio-layout .side-menu-wrap .swiper-scrollbar-drag {background-color: #767578;} .portfolio-layout .side-menu-wrap .menu-wrap { width: 100%; } .portfolio-layout .side-menu-wrap .menu-wrap li {width: auto; display: inline-block; flex-shrink: 0;} .portfolio-layout .side-menu-wrap .menu-wrap li a {color:rgba(255,255,255,0.8);;; font-size:1.6rem; padding:0.8rem 2.5rem; font-weight: 600; transition: all 0.4s cubic-bezier(.23,1,.32,1); border:1px solid transparent; text-align: center; cursor: pointer; white-space: nowrap; width: 100%; } .portfolio-layout .side-menu-wrap .menu-wrap li:hover a {color:#fff;} .portfolio-layout .side-menu-wrap .menu-wrap li.active {background-color: rgba(255,255,255,0.05); border-radius: 5rem;} .portfolio-layout .side-menu-wrap .menu-wrap li.active>a {color:#FFC000; background-color: rgba(255,255,255,0.05); border:1px solid #FFC000; border-radius: 5rem;} .portfolio-layout .tab-content {flex-basis: 100%; max-width: 100%; flex-shrink: 0; margin:0 auto; } .portfolio-layout .tab-content .cont-1366 {max-width: 1366px;} .side-menu-wrap::before, .side-menu-wrap::after { content: ''; position: absolute; top: 0; width: 5rem; height: 100%; z-index: 2; pointer-events: none; } .side-menu-wrap::before { left: 0; background: linear-gradient(to right, #15161C 0%, transparent 100%); } .side-menu-wrap::after { /* */ right: 0; background: linear-gradient(to left, #15161C 0%, transparent 100%); } .side-menu-wrap .swiper-button {width:4rem; height: 4rem; cursor: pointer; border:1px solid rgba(255,255,255,0.1); border-radius: 50%; position: absolute; z-index: 3; background-color: #15161C;} .side-menu-wrap .swiper-button:hover {background-color: #FFC000;} .side-menu-wrap .swiper-button.prev {top:50%; left:0.5rem; transform: translate(0%,-50%);} .side-menu-wrap .swiper-button.next {top:50%; right:0.5rem; transform: translate(0%,-50%);} .portfolio-layout .portfolio-list {width:100%; max-width: 100%; margin:0 auto; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap:wrap; gap:2rem;} .portfolio-layout .portfolio-list .content { width: calc((100% - 4rem) / 3); box-sizing: border-box; position: relative; overflow: hidden; border-radius: 1.5rem;} .portfolio-layout .portfolio-list .content:hover .image-wrap img {opacity: 0.6; } /* .portfolio-layout .portfolio-list .content:hover .image-wrap::after {content:''; position: absolute; top:0; left:0; width:100%; height:100%; cursor: pointer; background-image:url(/ITDA2025/image/);} */ .portfolio-layout .portfolio-list .content .image-wrap {width:100%;} .portfolio-layout .portfolio-list .content .image-wrap a {width: 100%;} .portfolio-layout .portfolio-list .content .image-wrap a .c-img {width: 100%;} .portfolio-layout .portfolio-list .content .image-wrap img { image-rendering: -webkit-optimize-contrast; transition: all 0.4s cubic-bezier(.23,1,.32,1); width: 100%;} .portfolio-layout .portfolio-list .content .image-wrap.homepage-image {width:100%; height:100%;} .portfolio-layout .portfolio-list .content .image-wrap.homepage-image a {width:100%; height:100%;} .portfolio-layout .portfolio-list .content .image-wrap.homepage-image a>div {width:100%; height:100%;} .portfolio-layout .portfolio-list .content .image-wrap.homepage-image a>div>img {max-width:100%; height:auto !important; width: 100%;} .portfolio-layout .portfolio-list .content .image-wrap>img {max-width: 100%; height: auto!important;} .portfolio-layout .portfolio-list .content .name {width:100%; position: absolute; bottom:20px; left:20px;} .portfolio-layout .portfolio-list .content .name>div>h3 {font-weight: 300; font-size:1.6rem; color:rgba(0,0,0,0.5); display: none;} .portfolio-layout .portfolio-list .content .name>div>p {font-weight: bold; font-size:2rem; display: none;} .portfolio-list.marketing-list .content {width:100%; flex-basis: 100%; max-width: 100%;} .portfolio-list.marketing-list .content img {max-width: 100%; height: auto!important;} .portfolio-list iframe {width:100%; height:100%;} .inquiry-layout {width:100%; margin-top: 5rem;} .inquiry-layout>li>h3 {font-size:2.4rem; font-weight: 300;} .inquiry-layout .checkbox-wrap {width:100%; margin-top: 2rem; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; } /* .inquiry-layout .checkbox-wrap .item {flex-basis: 16.66666%; max-width: 16.666666%;} */ /* 문의 */ .check-container { display: block; position: relative; padding-left: 35px; cursor: pointer; font-size: 1.8rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .check-container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /* Create a custom checkbox */ .checkmark { position: absolute; top: 1px; left: 0; height: 25px; width: 25px; background-color: rgba(255,255,255,0.05); border-radius: 3px; border:1px solid rgba(255,255,255,0.1); } /* On mouse-over, add a grey background color */ .check-container:hover input ~ .checkmark { background-color: #ccc; } /* When the checkbox is checked, add a blue background */ .check-container input:checked ~ .checkmark { background-color: #FFC000; } /* Create the checkmark/indicator (hidden when not checked) */ .checkmark:after { content: ""; position: absolute; display: none; } /* Show the checkmark when checked */ .check-container input:checked ~ .checkmark:after { display: block; } /* Style the checkmark/indicator */ .check-container .checkmark:after { left: 9px; top: 7px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .inquiry-inuput {width:100%; margin-top:30px;} .inquiry-inuput>ul{width:100%;} .inquiry-inuput>ul>li{width:100%; margin-bottom:20px; } .inquiry-inuput>ul>li>span {font-size:1.6rem;} .inquiry-inuput>ul>li>input {width:100%; background-color: rgba(255,255,255,0.05); font-size: 1.8rem; padding: 16px; font-family: "Pretendard"; border-radius: 0.5rem; color:#fff; border:1px solid rgba(255,255,255,0.1);} .inquiry-inuput>ul>li>input::placeholder { color:#767578;} .inquiry-inuput>ul>li>textarea {width:100%; border: 1px solid rgba(255,255,255,0.05); color:#fff; border-radius: 0.5rem; background-color: rgba(255,255,255,0.05); font-size: 1.8rem; padding: 16px; resize: none;} .inquiry-inuput>ul>li>input:focus {border:1px solid rgb(255, 192, 0); transition:all 0.5s ease;} .inquiry-inuput>ul>li>textarea::placeholder {font-size:1.8rem; color:#767578;} .inquiry-inuput>ul>li>textarea:focus {border:1px solid #FFC000; box-shadow:rgba(0,170,203,0.1) 0px 0px 16px; transition:all 0.5s ease;} .submit-wrap .submit {width:100%; background-color:rgba(255,255,255,0.05); border:1px solid #FFC000; border-radius: 0.5rem; color:#FFC000; text-align: center; font-size:2rem; padding:10px; transition: all 1.6s cubic-bezier(.23,1,.32,1); cursor: pointer; margin: auto;} .submit-wrap .submit:hover {background-color:#FFC000; max-width: 100%; border:1px solid #FFC000; color:#fff;} .popup-wrap {width:100%; height:100%; position: fixed; top:0; left:0; background-color:rgba(0,0,0,0.6); z-index: 999; display:flex; justify-content: center; align-items: flex-end; box-shadow:0 5px 14px 0 rgba(61,82,96,0.15);} .popup-wrap .popup-content {width:100%; max-width: 1200px; height:90%; background-color: #fff; border-radius: 20px 20px 0 0; position: relative; overflow: hidden; } .popup-wrap .popup-content .popup-main-banner {width:100%; height:400px; background-color:rgba(0,0,0,0.05); position: relative;} .popup-wrap .popup-content .main-contents { width:100%; padding:16px;} .popup-wrap .popup-content .main-contents .title { width:100%; margin-top:30px; border-bottom:1px solid #ddd;} .popup-wrap .popup-content .main-contents .title h3 {font-size: 2rem; font-weight: 300;} .popup-wrap .popup-content .main-contents .title h2 {font-size: 3rem; font-weight: 900;} .popup-wrap .popup-content .main-contents .title p {font-size: 1.6rem; font-weight: 300; margin-bottom:16px;} .popup-wrap .popup-content .main-contents .contents {margin-top:30px;} .popup-wrap .popup-content .main-contents .contents h3 {font-size: 2rem; font-weight: 300;} .popup-wrap .popup-content .close-btn {width:50px; height:50px; position: absolute; top:5px; right:5px; z-index: 1;} .popup-wrap .popup-content .close-btn img {width:100%;} /* 잇다커뮤니케이션 회사소개 */ /*개요*/ #overview-wrap {width:100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; background-position: center right; background-repeat: no-repeat; } #overview-wrap .content {width:100%;} #overview-wrap .content h2 {font-size:6rem; margin-bottom:2rem; text-align: center;} #overview-wrap .content h3 {font-size:4rem; font-weight: 300; margin-bottom:30px; text-align: center; line-height: 1.3;} #overview-wrap .content h4 {font-size:1.8rem; font-weight: 300; text-align: center; color:rgba(255,255,255,0.8);;; line-height: 1.6;} /*비즈니스*/ #business-wrap {width:100%; } #business-wrap .container-wrap {display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap;} #business-wrap .container-wrap .rodun-wrap {position: relative; flex-basis: 60%; max-width: 60%;} #business-wrap .container-wrap .rodun-wrap .round {width:50%; height:0; padding-bottom:50%; border-radius: 50%; background-color:rgba(255,255,255,0.05); color:#fff; text-align: center; font-size:2.4rem; transition: all 0.4s; position: relative;} #business-wrap .container-wrap .rodun-wrap .round:last-child {background-color:rgba(255,255,255,0.05); position: relative; left:-50px; } #business-wrap .container-wrap .rodun-wrap .round>h3 {font-weight: 300; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%);} #business-wrap .container-wrap .text-wrap {text-align: right; flex-basis: 40%; max-width: 40%;} #business-wrap .container-wrap .text-wrap h2 {font-size: 4rem; line-height: 1.2; margin-bottom: 2rem;} #business-wrap .container-wrap .text-wrap h4 {font-weight: 300; font-size: 2.4rem;} #business-wrap .business-line {width:100%; display: flex; justify-content: flex-end; align-items: flex-start; margin-top:5rem;} #business-wrap .business-line .content {font-size:1.8rem; margin-right:80px; color:rgba(255,255,255,0.8);;;} /*개요*/ #history-wrap {width:100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; } #history-wrap .content {width:100%; margin-bottom:100px;} #history-wrap .content h3 {font-size:4rem; font-weight: 300; margin-bottom:30px;} #history-wrap .his-content {display:flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; width:100%; position: relative; background-repeat: no-repeat; background-size: auto; background-image: url(/ITDA2025/image/history-bg.png); background-position: center center;} #history-wrap .his-content>.item {display:flex; justify-content: flex-start; align-items: center; width:100%; margin-bottom:100px;} #history-wrap .his-content>.item:nth-child(2n) {justify-content: flex-end;} #history-wrap .his-content>.item>div {display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;} #history-wrap .his-content>.item>div>.year {display:flex; justify-content: flex-start; align-items: flex-start;} #history-wrap .his-content>.item>div>.year>h2 {font-size:7rem;} #history-wrap .his-content>.item>div>.detail {width:100%;} #history-wrap .his-content>.item>div>.detail tr th {font-size:2.4rem; font-weight: bold; font-family: "Play"; padding:0 3px;} #history-wrap .his-content>.item>div>.detail tr td {font-size:2.4rem; padding:0 3px; font-weight: 300;} #process-wrap {width:100%; background-color:#f8f8f8;} #process-wrap .pad-100 {padding-bottom:0;} #process-wrap .pad-200 {padding-top:100px;} #process-wrap .pad-100>h2 {font-size:6rem; font-weight: 300;} #process-wrap .cont-1366>ul {width:100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;} #process-wrap .cont-1366>ul>li {flex-basis: 50%; margin:0; max-width: 50%;} #process-wrap .cont-1366>ul>li.image-wrap {position: relative;} #process-wrap .cont-1366>ul>li.image-wrap img{position: relative;} #process-wrap .cont-1366>ul>li.image-wrap .box-grey {width:100%; height:100%; background-color:#f8f8f8; position: absolute; top:0; left:0; z-index: 1;} #process-wrap .cont-1366>ul>li.text-wrap {padding:3rem;} #process-wrap .cont-1366>ul>li.text-wrap>ul {width:100%; position:relative; bottom:20px;} #process-wrap .cont-1366>ul>li.text-wrap>ul h3 {font-size:6rem; color:rgba(0,0,0,0.1); position: relative; line-height: 1.2;} /* #process-wrap .cont-1366>ul>li.text-wrap>ul h1::before {content:''; position: absolute; top:50%; left:-40px; width:40px; height:1px; background-color:#FFC000;} */ #process-wrap .cont-1366>ul>li.text-wrap>ul p {font-size:2rem;} #process-wrap .cont-1366>ul:nth-child(2n) {text-align: right;} #process-wrap .cont-1366>ul:nth-child(2n)>li.text-wrap>ul h1 {position: relative;} /* #process-wrap .cont-1366>ul:nth-child(2n)>li.text-wrap>ul h1::before {display: none;} #process-wrap .cont-1366>ul:nth-child(2n)>li.text-wrap>ul h1::after {content:''; position: absolute; top:50%; right:40px !important; left:0; width:40px; height:1px; background-color:#FFC000;} */ #award-wrap {background-color:#00001a; color:#fff; } #award-wrap .cont-1366 {background-image:url(/ITDA2025/image/certi-bg.png); background-repeat: no-repeat; background-position: right 80px;} #award-wrap .content {width:100%; margin-bottom:50px; } #award-wrap .content h2 {font-size:6rem; margin-bottom:20px;} #award-wrap .content h3 {font-size:4rem; font-weight: 300; margin-bottom:30px; border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom:20px;} #award-wrap .award-list {display:flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;} #award-wrap .award-list>li {flex-basis: 25%; max-width: 25%; margin-bottom:30px;} #award-wrap .award-list>li>img {max-width: 100%; height: auto!important; display: block; margin: auto;} #award-wrap .award-list-4ea {width:100%; display:flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; margin-bottom:50px; margin-top:30px;} #award-wrap .award-list-4ea>li {flex-basis: 24%; max-width: 24%;} #award-wrap .award-list-4ea>li>p {font-size:2rem; text-align: center; font-weight: 300; color:rgba(255,255,255,0.8);;;} #award-wrap .award-list-4ea {width:100%; display:flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;} #award-wrap .award-list-4ea>li {flex-basis: 24%; max-width: 24%; margin:0.5%; margin-bottom:50px;} #award-wrap .award-list-4ea>li>img {margin: 0 auto; max-width: 100%; height: auto!important;} .en-map {display: none;} /*푸터*/ .footer-section { width:100%; height:100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;} footer {width:100%; max-width: 100%; height:100%; padding-top:50px; padding-bottom:50px; font-weight: 300; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; border-top:1px solid rgba(255,255,255,0.1);} footer>ul>.award-wrap {margin-bottom: 7rem; width:100%; align-items: stretch; display: flex; justify-content: flex-end; gap: 2rem; flex-wrap: wrap;} footer>ul>.award-wrap>.content {display: flex; justify-content: center; align-items: center; } footer>ul>.award-wrap>.content>img {margin: 0 auto; opacity: 0.6; padding:1rem; height: 100%; max-height: 5rem;} footer>ul {flex-basis: 100%; max-width: 1800px; padding-left:1rem; padding-right: 1rem;} footer>ul .logo-wraps {border-bottom: 1px solid rgba(0,0,0,0.1); padding-left:1rem; max-width: 100%; display:flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-top:30px; } footer>ul .logo-wraps .logo {max-width:27rem; width:100%; margin-bottom:10px; transition: all 0.4s;} footer>ul .logo-wraps a img {width:100%; height:100%;} footer>ul .logo-wraps .tel {font-size: 4rem; font-weight: bold; width:auto; color:#FFC000;} footer>ul .logo-wraps:hover img {opacity: 0.7;} footer>ul .menu-wraps {border-bottom: 1px solid rgba(0,0,0,0.1); width:100%; } footer>ul .menu-wraps>.menu-list {display:flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; width:auto;} footer>ul .menu-wraps>.menu-list li {padding:15px 10px; font-size:1.6rem;} footer>ul .menu-wraps>.menu-list li p {transition: all 0.4s; cursor: pointer; color:#767578; font-weight: 400;} footer>ul .menu-wraps>.menu-list li p:hover {opacity: 0.5;} footer>ul .menu-wraps>.menu-list li a {color:rgba(255,255,255,0.8);;; transition: all 0.4s; cursor: pointer; font-weight: 400;} footer>ul .menu-wraps>.menu-list li a:hover {opacity: 0.5;} footer>ul .menu-wraps> .sns-wraps {width:auto; max-width: 100%;} footer>ul .menu-wraps> .sns-wraps>li {display: flex; justify-content: center; align-items: center; flex-wrap: wrap;} footer>ul .menu-wraps> .sns-wraps>li>a {max-width:40px; transition: all 0.4s; width:100%; margin-left:15px;} footer>ul .menu-wraps> .sns-wraps>li>a img {max-width:100%; transition: all 0.4s; width:100%; vertical-align: middle;} footer>ul .menu-wraps> .sns-wraps>li>a:hover img {opacity: 0.8} footer>ul .contact-wraps {border-bottom:1px solid rgba(0,0,0,0.1);} footer>ul .contact-wraps>ul:first-child {padding-top:20px; padding-bottom:20px; padding-left:10px;} footer>ul .contact-wraps>ul:first-child>li {font-size:1.4rem; color:rgba(255,255,255,0.8);;; line-height: 1.8em; font-weight: 400; display: flex; justify-content: flex-start;} footer ul .contact-wraps ul:first-child>li .sub-p { border-right:1px solid rgba(0,0,0,0.3); padding-right:10px; margin-right:5px; font-weight: 400;} footer>ul .contact-wraps>ul:nth-child(2) {width:100px;border:1px solid rgba(255,255,255,0.3);} footer>ul .contact-wraps>ul:nth-child(2)>li>a {width:100%; height:100%; padding:10px; line-height: 1.3em; background-color:#FFC000; border:1px solid #FFC000;} footer>ul .contact-wraps>ul:nth-child(2)>li>a:hover {background-color:#ab1615; color:#fff; border:1px solid #ab1615;} footer>ul .contact-wraps>ul:nth-child(2)>li>a>ul>li:last-child {text-align: center; color:rgba(255,255,255,1); font-size:12px; font-weight: 300; font-family: "Play";} footer> ul .copyright-wraps ul li {font-size:1.4rem; padding:10px; color:#767578;} footer> ul .copyright-wraps ul>li:last-child {background-color: #dddddd; padding:3px; display: none;} footer> ul .copyright-wraps ul>li:last-child:hover {opacity: 0.7;} /*****탑버튼*****/ .topbtn {position: fixed; display: flex; justify-content: center; align-items: center; right:2rem; display: none; z-index: 99; width:5rem; height:5rem; background:#FFC000; cursor:pointer; text-align: center; border:1px solid rgba(255,255,255,0.3); border-radius: .5rem; } .topbtn p { font-size:1.4rem; font-weight:400; color:#ffffff; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); } /* .sstop {position: absolute; bottom: 438px;} */ /* .contact-wrap .flex_2ea .content {} */ .sub-footer {width:100%;} .sub-footer .flex_2ea .content {flex-basis: 50%; max-width: 50%; margin:0; position: relative; overflow: hidden; } .sub-footer .flex_2ea .content>div {text-align: center; color:#fff; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%);} .sub-footer .flex_2ea .content img {width:100%; height:100%; transition: all 0.4s cubic-bezier(.23,1,.32,1); vertical-align: middle;} .sub-footer .flex_2ea .content:hover img {transform: scale(1.07);} .sub-footer .flex_2ea .content div h3 {font-size:3.4rem; text-shadow: 4px 4px 13px rgba(0, 0, 0, 0.5);} .sub-footer .flex_2ea .content div p {font-size:1.6rem; text-shadow: 4px 4px 13px rgba(0, 0, 0, 0.5); } .with-mobile img:last-child{display: none;} .num-box {background-color: rgba(255,255,255,0.05); color:#FFC000; border-radius: 1.5rem; width:5rem; height: 5rem; font-size:2rem; font-weight: bold;} .smart-factory-bg {color:#fff;} /* .smart-factory-bg .title {text-align: center;} */ .smart-factory-bg .title {display: flex; justify-content: flex-start; align-items: center; gap:3rem;} .smart-factory-bg .title .img-wrap {max-width: 30rem; flex-basis: 30rem; flex-shrink: 0;} .smart-factory-bg .title .t-box { color:#fff; font-size:2rem; font-weight: bold; text-align: left;} .smart-factory-bg .title h3 {color:#fff; font-size:3.6rem; margin-top: 1rem; margin-bottom: 1rem;} .smart-factory-bg .title p {font-size:1.8rem; color:rgba(255,255,255,0.8);;; font-weight: 300;} .smart-factory-bg .flex_5ea {align-items: stretch; margin-top: 3rem; justify-content: flex-start;} .smart-factory-bg .flex_5ea .content {border-radius: 1.5rem; background-color: rgba(255,255,255,0.05); padding: 3rem; } .smart-factory-bg .flex_5ea .content .img-wrap img {opacity: 0.25;} .smart-factory-bg .flex_5ea .content h5 {font-size:1.8rem; color:#fff; text-align: left; margin-top:2rem; margin-bottom: 0.5rem;} .smart-factory-bg .flex_5ea .content p {font-size:1.6rem; color:rgba(255,255,255,0.8);;; text-align: left; font-weight: 200;} .smart-factory-bg .flex_4ea {align-items: stretch; margin-top: 3rem; justify-content: flex-start;} .smart-factory-bg .flex_4ea .content {border-radius: 1.5rem; background-color: rgba(255,255,255,0.05); padding: 3rem; } .smart-factory-bg .flex_4ea .content.example {padding:0; border-radius: 1.5rem; overflow: hidden;} .smart-factory-bg .flex_4ea .content:not(.example) .img-wrap img {opacity: 0.25;} .smart-factory-bg .flex_4ea .content h5 {font-size:1.8rem; color:#fff; text-align: left; margin-top:2rem; margin-bottom: 0.5rem;} .smart-factory-bg .flex_4ea .content p {font-size:1.6rem; color:rgba(255,255,255,0.8);;; text-align: left; font-weight: 200;} .smart-factory-bg .flex_4ea .content .rec {font-size:1.4rem; color:#FFC000; margin-top:3rem; padding:2rem; border-radius: 1.5rem; background-color: rgba(255,255,255,0.02);} .smart-factory-bg .flex_3ea {align-items: stretch; margin-top: 3rem; justify-content: flex-start;} .smart-factory-bg .flex_3ea .content {border-radius: 1.5rem; background-color: rgba(255,255,255,0.05); padding: 3rem; } .smart-factory-bg .flex_3ea .content .img-wrap img {opacity: 0.25;} .smart-factory-bg .flex_3ea .content h5 {font-size:1.8rem; color:#fff; text-align: left; margin-top:2rem; margin-bottom: 0.5rem;} .smart-factory-bg .flex_3ea .content p {font-size:1.6rem; color:rgba(255,255,255,0.8);;; text-align: left; font-weight: 200;} .smart-factory-bg .flex_2ea {align-items: stretch; margin-top: 3rem; justify-content: flex-start;} .smart-factory-bg .flex_2ea .content {border-radius: 1.5rem; background-color: rgba(255,255,255,0.05); padding: 3rem; display: flex; justify-content: flex-start; align-items: center; } /* .smart-factory-bg .flex_2ea .content .text-wrap {} */ .smart-factory-bg .flex_2ea .content.example {padding:0; border-radius: 1.5rem; overflow: hidden;} .smart-factory-bg .flex_2ea .content h5 {font-size:2.2rem; color:#fff; text-align: left; margin-bottom: 0.5rem; } .smart-factory-bg .flex_2ea .content h6 {font-size:1.8rem; color:#fff; text-align: left; font-weight: 300; } .smart-factory-bg .flex_2ea .content p {font-size:1.6rem; color:rgba(255,255,255,0.8);;; text-align: left; font-weight: 200; margin-top: 2rem;} .smart-factory-bg .flex_2ea .content .rec {font-size:1.4rem; color:#FFC000; margin-top:3rem; padding:2rem; border-radius: 1.5rem; background-color: rgba(255,255,255,0.02);} .smart-factory-bg .flex_2ea .content .img-wrap {flex-shrink: 0; flex-basis: 40rem;} .smart-factory-bg .sub {margin-top:3rem; background-color: rgba(255,255,255,0.05); padding:3rem; border-radius: 1.5rem; } .smart-factory-bg .sub>li>h4 {font-size:2rem; margin-bottom: 1rem;} .smart-factory-bg .sub>li>p {font-size:1.6rem; } .smart-factory-bg .mini-banner {width:100%; text-align: left; margin-top:10rem; border-radius: 1.5rem;} .smart-factory-bg .mini-banner h3 {font-size:2.8rem;} .smart-factory-bg .mini-banner p {font-size:1.8rem; color:rgba(255,255,255,0.8);;; font-weight: 300;} .smart-factory-bg .mini-banner ul {width: 100%; display: flex; } .smart-factory-bg .mini-banner ul li { text-align: center; font-size:1.6rem; } .marketing-page .flex_3ea {width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; gap:2rem;} .marketing-page .flex_3ea .title { margin:0; position: relative; overflow: hidden; border-radius: 1.5rem; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; background-color: rgba(255,255,255,0.05); padding:1.5rem; margin-bottom: 3rem; gap:2rem; } .marketing-page .flex_3ea .title .img-wrap { overflow: hidden; flex-basis: 100%; max-width: 100%; border-radius: 1.5rem; position: relative; order:1;} .marketing-page .flex_3ea .title .img-wrap img {width: 100%; transition: all 0.8s cubic-bezier(.23,1,.32,1);} .marketing-page .flex_3ea .title .text-wrap {flex-basis: 100%; max-width: 100%; padding:2rem; order:0; min-height: 30rem; } .marketing-page .flex_3ea .title .text-wrap h3 {font-size: 2.4rem; margin-bottom: 1rem;} .marketing-page .flex_3ea .title .text-wrap p {font-size: 1.8rem; color:rgba(255,255,255,0.8);;; font-weight: 300; margin-bottom: 2rem;} .marketing-page .flex_3ea .title .text-wrap .sub {display: flex; justify-content: flex-start; align-items: stretch; margin-top: 1rem; gap: 1rem; flex-wrap: wrap;} .marketing-page .flex_3ea .title .text-wrap .sub>li {padding:0.5rem 1rem; background-color: rgba(255,255,255,0.05); font-size:1.3rem; border-radius: 3rem; color:rgba(255,255,255,0.8);;;} #online-marketing .content {gap:2rem;} #online-marketing .content .img-wrap {background-color: rgba(255,255,255,0.05); border-radius: 1.5rem; padding:3rem; flex-basis: 20rem; height:20rem; display: flex; justify-content: center; align-items: center;} #online-marketing .content .img-wrap img {max-width: 10rem;} #online-marketing .content .text-wrap p {font-size:1.8rem;} .swiper-button-lock {display: flex;}