:root { --header-height: 60px; --header-height-inner: 60px; --header-height-minus: 0px; --header-height-padding: 0px; --header-height-gnb: 35px; --max-width: 1300px; --basic-radius: 1rem; --min-width: 1024px; } /* @media (min-width: 980px){ */ @media (min-width: 1024px){ :root { --header-height: 120px; --header-height-inner: 85px; --header-height-minus: 0px; --header-height-padding: 0px; --basic-radius: 1.7rem; } } @media (min-width: 1400px){ :root { --header-height: 130px; --header-height-inner: 95px; --header-height-minus: 0px; --header-height-padding: 0px; } } html { color: #333; } body { background-color: #fff; } article { padding-left: 2.5rem; padding-right: 2.5rem; } @media (min-width: 768px){ article { padding-left: 3rem; padding-right: 3rem; } } @media (min-width: 980px){ article { padding-left: 4rem; padding-right: 4rem; } } header.header-wrap, header.header-wrap .headerInner { background-color: #fff; } .scrollOn header.header-wrap .headerInner { background-color: #fff; } #gnbBar { background-color: #2d4798; } #gnbBar ul.gnbRight li a{ background-color: #dde3e6; color: #2e3c61; } #gnbBar ul.gnbRight li a i { color: #2e3c61; } .header-wrap .headerInner .logo { width: 22rem; max-width: 40%; } .header-wrap .headerInner .logo img { max-height: 3.4rem; } .header-wrap .headerInner nav > ul > li > a { padding-left: 2.2rem; padding-right: 2.2rem; } header.singleShow #headerNav { text-align: right; } header.singleShow #headerNav > ul > li > a > span { font-family: var(--special-font); font-size: 1.6rem; display: block; line-height: calc(var(--header-height-inner) + 0.3rem); } header.singleShow #headerNav .multiNav > .multiNav-inner { min-width: 20rem; } header.singleShow #headerNav .multiNav > .multiNav-inner ul a span { text-align: left; font-size: 1.5rem; } header.singleShow #headerNav > ul > li > a.current > span { color: var(--basic-color); font-weight: 900; } header.singleShow nav .multiNav > .multiNav-inner ul { padding: 0; border: 0; overflow: hidden; } header.singleShow nav .multiNav > .multiNav-inner ul a { padding: 1.2rem 2rem 1rem; } header.singleShow nav .multiNav > .multiNav-inner ul a:hover { background-color: var(--basic-color); color: #fff; text-decoration: none; } .burgerBtn-wrap { padding-left: 2rem; } .burgerBtn { padding-left: 1rem; width: 3rem; } .burgerBtn span { background-color: #666667; position: relative; height: 2px; margin-left: auto; } .burgerBtn span:nth-child(2) { width: 80%; } .burgerBtn span:nth-child(3) { width: 60%; } .burgerBtn:hover span { background-color: var(--yellow-color); } @media (min-width: 980px){ .header-wrap .headerInner .logo img { max-height: 4rem; } } @media (min-width: 1200px){ /* @media (min-width: 1024px){ */ header.singleShow #headerNav .multiNav > .multiNav-inner ul a span { font-size: 1.6rem; } header.singleShow #headerNav > ul > li > a > span { font-size: 1.8rem; } .header-wrap .headerInner nav > ul > li > a { padding-left: 2.5rem; padding-right: 2.5rem; } } @media (min-width: 1360px){ .header-wrap .headerInner .logo img { max-height: 5rem; } .header-wrap .headerInner nav > ul > li > a { padding-left: 3rem; padding-right: 3rem; } .burgerBtn-wrap { padding-left: 3.5rem; } } #sideBar-wrap .loginUser, #sideBar-wrap .gnb ul, #sideBar-wrap .gnb ul li { border-color: var(--basic-color-deep) !important; } /* .mainTop-wrap:before, .subTop-wrap:before { content:''; display: block; background-image: url("/style_www/img/common/header/shadow.png"); position: absolute; top: 0; right: 0; left: 0; height: 150px; background-repeat: repeat-x; background-size: auto 100%; z-index: 10; opacity: 0.5; } */ #wrap footer { background-color: #323841; border-top: 1px solid #cfd6db; /* padding-top: 0.8rem; */ } #wrap footer .footerNav-wrap { background-color: #292e35; padding: 0 3rem; } #wrap footer .footerNav-wrap ul li { display: inline-block; vertical-align: middle; } #wrap footer .footerNav-wrap ul li + li { margin-left: 3rem; } #wrap footer .footerNav-wrap ul li a { display: block; color: #d4d4d4; font-size: 1.5rem; padding: 1.8rem 0; } #wrap footer .footer-wrap { background-color: #323841; /* border-top: 1px solid #cfd6db; */ padding: 3rem 3rem; } #wrap footer .footer-wrap .footer-logo { width: 14rem; margin-bottom: 1rem; } #wrap footer .footer-wrap .footer-text ul { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; } #wrap footer .footer-wrap .footer-text ul li { color: #d4d4d4; } #wrap footer .footer-wrap .footer-text ul li:first-child { font-weight: 600; } #wrap footer .footer-wrap .footer-text ul li span { color: #666; font-weight: 600; margin-right: 1rem; } #wrap footer .footer-wrap .footer-text .copyText { font-size: 1.4rem; line-height: 1.5; color: #666; } #wrap footer .footer-wrap .footerLink { margin: 1rem 0 2rem; } #wrap footer .footer-wrap .footerLink .customSelect { border-color: #cdcdcd; display: inline-block; } #wrap footer .footer-wrap .footerLink button { border: 1px solid #cdcdcd; display: inline-block; padding: 1rem 1.5rem; border-radius: 0.3rem; color: #555; } .footerSlider-wrap { background-color: #fff; padding: 2rem 3rem; font-size: 0; position: relative; } .footerSlider-wrap > .inner { display: flex; overflow: hidden; align-items: center; } .footerSlider-wrap > .inner:after { content: ''; display: block; width: 4rem; height: 100%; position: absolute; right: 0; top:0; background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); } .footerSlider-title { display: none; font-family: var(--special-font); color: #555; font-size: 2rem; line-height: 2.5rem; height: 2.5rem; } .footerSlider-wrap .sliderControl-wrap { display: none; font-size: 0; position: relative; padding: 0; } .footerSlider-wrap .sliderControl-wrap > .inner { width: 8rem; text-align: center; } .footerSlider-wrap .sliderControl-wrap > .inner > * { display: inline-block; vertical-align: top; width: 1.8rem; } .footerSlider-wrap .sliderControl-wrap *:before { font-size: 1.8rem; display: block; position: relative; top: 0; line-height: 2.5rem; height: 2.5rem; color: #555a54; } .footerSlider-content { flex: 1; } .footerSlider a { display: block; color: #d4d4d4; font-size: 1.4rem; padding: 0rem; width: 20rem; max-width: 30vw; } .footerSlider a:hover { text-decoration: underline; } .footerSlider a .imgContainer-fit { padding-bottom: 30%; } @media (min-width: 768px){ #wrap footer .footer-wrap .footer-text ul { flex-direction: row; gap: 4.5rem; } } @media (min-width: 1024px){ #wrap footer .footer-wrap { padding-top: 4rem; padding-bottom: 4rem; } #wrap footer .footer-wrap .footer-logo, #wrap footer .footer-wrap .footer-text { display: inline-block; vertical-align: top; } #wrap footer .footer-wrap .footer-logo { width: 16rem; } #wrap footer .footer-wrap .footer-text { width: calc(100% - 17rem); } #wrap footer .footer-wrap .footerLink { position: absolute; right: 0; top: 0; margin: 0; } .footerSlider-title, .footerSlider-wrap .sliderControl-wrap { display: block; } } /** mainBasic **/ .mainContent-wrap { padding-top: 5rem; padding-bottom: 5rem; } .mainContent-wrap section { position: relative; } .mainContent-title { font-size: 3rem; margin-bottom: 2rem; padding-left: 0.3rem; position: relative; text-align: center; } .mainContent-title > * { display: block; vertical-align: middle; } .mainContent-title h3 { font-size: 1em; } .mainContent-title h3 * { font-family: var(--special-font); } .mainContent-title h3 strong { font-weight: 900; color: var(--basic-color); line-height: 1.2; } .mainContent-title h3 span { font-size: 0.95em; margin-right: 0.3em; font-weight: normal; } .mainContent-title p { text-align: center; font-size: 0.6em; padding: 0 2rem; margin-top: 2rem; line-height: 1.5; } @media (min-width: 768px){ .mainContent-title { font-size: 3.2rem; } .mainContent-title p { font-size: 0.55em; } } @media (min-width: 1024px){ .mainContent-wrap { padding-top: 8rem; padding-bottom: 8rem; } .mainContent-title { font-size: 3.4rem; margin-bottom: 4rem; } } @media (min-width: 1360px){ .mainContent-wrap { padding-top: 10rem; padding-bottom: 10rem; } .mainContent-title { font-size: 3.6rem; } } .mainContent-title .sliderControl-custom { position: absolute; right: 3rem; top: 50%; transform: translateY(-50%); } .sliderControl-custom, .sliderControl-custom * { font-size: 0; } .sliderControl-custom > * { display: inline-block; vertical-align: middle; } .sliderControl-custom .prev { margin-left: 1rem; } .sliderControl-custom .prev i:before, .sliderControl-custom .next i:before { display: block; line-height: 1.8rem; height: 1.8rem; font-size: 1.8rem; font-weight: 900; } .sliderControl-custom .prev i:before, .sliderControl-custom .next i:before, .sliderControl-wrap .play i:before, .sliderControl-wrap .pause i:before { color: #a1b1c2; } .slick-dots-wrap { display: none !important; } .slick-dots li button { border-color: #a1b1c2; } .slick-dots li.slick-active button { background-color: #a1b1c2; } .sliderControl-custom img { height: 1.8rem; } .sliderControl-custom .prev { margin-right: 0.3rem; } .sliderControl-custom .next { margin-left: 0.3rem; } .sliderControl-custom .play, .sliderControl-custom .pause { padding: 0; width: 2rem; } .sliderControl-custom .slick-arrow.slick-hidden { display: inline-block !important; opacity: 0.2; } .mainMore { position: absolute; top: 0.6rem; right: 0; display: block; font-size: 0; } .mainMore * { display: inline-block; vertical-align: bottom; } .mainMore span { font-size: 1.5rem; transform: translateY(0.18em); margin-right: 0.5rem; font-family: var(--special-font); } .mainMore i { font-size: 0; position: relative; top: 0; right: 0; transition: all 0.3s ease; width: 1.8rem; height: 1.8rem; } .mainMore i:before, .mainMore i:after { content: ''; display: block; position: absolute; background-color: var(--gray-color-deep); } .mainMore i:before { width: 100%; height: 0.2rem; left: 0; top: 50%; margin-top: -0.1rem; } .mainMore i:after { width: 0.2rem; height: 100%; left: 50%; margin-left: -0.1rem; top: 0; } .mainMore:hover i {transform: rotate(-180deg); -webkit-transform: rotate(-180deg);} @media (min-width: 768px){ .mainMore { top: 0.6rem; } } @media (min-width: 1024px){ .mainMore { top: 0.6rem; } } @media (min-width: 1360px){ .slick-dots-wrap { display: inline-block !important; } .mainMore { top: 0.6rem; } } /** mainTop **/ .mainTop-wrap { padding-left: 0; padding-right: 0; position: relative; background-color: #ebfafa; } @media (min-width: 1360px){ .mainTop-wrap { background-size: auto 100%; } .mainTop-wrap > .maxWidth { display: flex; padding-top: 6rem; padding-bottom: 9rem;} } .mainSlider { font-size: 0; } .mainSlider-content { position: relative; } .mainSlider-bg { animation: mainBg_out 2s 3s ease-out normal 1 forwards; background-size: cover; background-position: center; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: scale(1.1); } .mainSlider-bg:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.2); } .mainSlider .slick-active .mainSlider-bg { animation: mainBg 6s 0s ease-out normal 1 forwards; } @keyframes mainBg { from { transform: scale(1); } to { transform: scale(1.1); } } @keyframes mainBg_out { from { transform: scale(1.1); } to { transform: scale(1); } } .mainSlider .mainSlider-text { padding: 14.5rem 4rem 16.5rem; } .mainSlider .mainSlider-text > .inner { position: relative; z-index: 100; width: 100%; font-size: 8vw; } .mainSlider .mainSlider-text > .inner * { font-family: var(--special-font); color: #fff; text-shadow: 2rem 2rem 5rem rgba(0,0,0,0.4); } .mainSlider .mainSlider-text > .inner > * { text-align: left; opacity: 0; display: block; } .mainSlider .mainSlider-text > .inner em { font-size: 0.35em; color: var(--special-color); font-weight: 500; } .mainSlider .mainSlider-text > .inner em { display: flex; align-items: center; } .mainSlider .mainSlider-text > .inner em span { font-size: 1em; color: var(--special-color); font-weight: 500; padding-right: 1rem; } .mainSlider .mainSlider-text > .inner em img { height: 5rem; } .mainSlider .mainSlider-text > .inner .mainSlider-title { font-size: 1em; margin-top: 0.1em; margin-left: -0.05em; font-weight: 900; } .mainSlider .mainSlider-text > .inner .mainSlider-title span { display: block; font-weight: 900; } .mainSlider .mainSlider-text > .inner .mainSlider-title span font { color: var(--special-color); } .mainSlider .slick-active .mainSlider-text > .inner > * { animation: mainText 1.5s 0s ease-out normal 1 forwards; opacity: 1; } @keyframes mainText { from { transform: translate(0px, 15px); opacity: 0; } to { transform: translate(0px, 0px); opacity: 1; } } .mainSlider-wrap .sliderControl-wrap { position: absolute; left: 50%; bottom: 3rem; transform: translateX(-50%); width: 100%; padding: 0 3rem; } .mainSlider-wrap .sliderControl-wrap { display: flex; } .mainSlider-wrap .sliderControl-wrap button { font-size: 0; } .mainSlider-wrap .sliderControl-wrap i:before { font-size: 2rem; color: #fff; text-shadow: 0rem 0rem 1rem rgba(0,0,0,0.4); } .mainSlider-wrap .sliderNav .tns-controls button i { transition: transform 0.3s; } .mainSlider-wrap .sliderNav .tns-controls button:hover i { transform: scale(1.5); } .mainSlider-wrap .sliderControl-wrap > .inner { display: flex; flex-wrap: wrap; align-items: center; flex: 1; padding-left: 1rem; } .mainSlider-wrap .sliderControl-wrap > .inner .mainSlider-dot { flex: 1; } .mainSlider-wrap .sliderControl-wrap .slick-dots { margin-left:-0.5rem; display: table; width: 100%; } .mainSlider-wrap .sliderControl-wrap .slick-dots li { padding-left: 0.5rem; display: table-cell; } .mainSlider-wrap .sliderControl-wrap .slick-dots li button { border-color: #fff; background-color: #fff; width: 100% !important; height: 0.6rem; border-radius: 0; width: 100%; opacity: 0.5; box-shadow: 0rem 0rem 1rem rgba(0,0,0,0.2); } .mainSlider-wrap .sliderControl-wrap .slick-dots li:first-child button { border-radius: 1rem 0 0 1rem; } .mainSlider-wrap .sliderControl-wrap .slick-dots li:last-child button { border-radius: 0 1rem 1rem 0; } .mainSlider-wrap .sliderControl-wrap .slick-dots li.slick-active button { opacity: 1; } .mainSlider-wrap .sliderControl-wrap > .inner .mainSlider-prev, .mainSlider-wrap .sliderControl-wrap > .inner .mainSlider-next { display: none !important; } /* .mainSlider-wrap .sliderControl-wrap > .inner .play i:before, .mainSlider-wrap .sliderControl-wrap > .inner .pause i:before { font-size: 2rem; } */ @media (min-width: 640px){ .mainSlider .mainSlider-text > .inner { font-size: 4.6rem; } } @media (min-width: 768px){ .mainSlider .mainSlider-text { padding: 16.5rem 6rem 18.5rem; } .mainSlider-wrap .sliderControl-wrap { padding-left: 6rem; } .mainSlider-wrap .sliderControl-wrap > .inner { padding-left: 0; max-width: 30rem; } .mainSlider-wrap .sliderControl-wrap > .inner .slick-dots { padding-right: 0.5rem; } .mainSlider-wrap .sliderControl-wrap > .inner .mainSlider-prev, .mainSlider-wrap .sliderControl-wrap > .inner .mainSlider-next { display: block !important; } .sliderControl-mobile { display: none !important; } } @media (min-width: 1024px){ .mainSlider .mainSlider-text { padding: 18rem 7rem 19.5rem; } .mainSlider-wrap .sliderControl-wrap { bottom: 5rem; padding-left: 7rem; } } @media (min-width: 1360px){ .mainSlider .mainSlider-text { padding: 20rem 0 21.5rem; } .mainSlider .mainSlider-text > .inner { font-size: 6rem; padding: 0 5rem; } .mainSlider-wrap .sliderControl-wrap { padding-left: 5rem; } } .mainSlider-emblem { position: absolute; top: 2.5rem; right: 2rem; width: 40rem; max-width: 42%; } .mainSlider-emblem ul { display: flex; flex-wrap: wrap; justify-content: flex-end; margin-top: -1rem; margin-left: -1rem; } .mainSlider-emblem ul li { width: 33.5%; padding-top: 1rem; padding-left: 1rem; } @media (min-width: 1024px){ .mainSlider-emblem { top: 3.5rem; right: 3.5rem; } .mainSlider-emblem ul { margin-top: -1.5rem; margin-left: -1.5rem; } .mainSlider-emblem ul li { padding-top: 1.5rem; padding-left: 1.5rem; } } .grayBg-wrap { background-color: var(--gray-color-bright); } /** mainQuick-wrap **/ .mainContent-quick { padding-top: 3rem; padding-bottom: 3rem; } .mainQuick-title { display: block; margin-bottom: 1.5rem; padding-left: 0.5rem; } .mainQuick-title h3 { display: inline-block; position: relative; color: var(--basic-color); padding: 0 0.5rem; } .mainQuick-title h3:before { content: ''; display: block; width: 100%; height: 1.4rem; background-color: var(--special-color); transform: skew(-25deg); position: absolute; left: 0; bottom: 0; z-index: 0; } .mainQuick-title h3 strong { display: block; z-index: 1; position: relative; font-size: 2.2rem; } .mainQuick-icon { margin-top: -1rem; margin-left: -1rem; } .mainQuick-icon:after { content: ''; display: block; clear: both; } .mainQuick-icon > li { float: left; width: 33.3333333%; padding-left: 1rem; padding-top: 1rem; } .mainQuick-icon > li a { background-color: #fff; display: block; border-radius: 1rem; padding: 0.5rem 0.5rem 1.2rem; box-shadow: 0 0 1rem rgba(0,0,0,0.03); } .mainQuick-icon > li a i { display: block; width: 6rem; max-width: 50%; font-size: 0; margin: auto; } .mainQuick-icon > li a strong { display: block; text-align: center; font-weight: normal; padding-top: 0.4rem; font-size: 1.55rem; } @media (min-width: 768px){ .mainQuick-icon > li { width: 16.6666666%; } } @media (min-width: 1360px){ .mainQuick-wrap { display: flex; } .mainQuick-title { padding-right: 3rem; padding-top: 1.5rem; } .mainQuick-icon > li a { background-color: initial; box-shadow: none; } .mainQuick { flex: 1; } } /** mainQuick-end **/ /** mainInfo-wrap **/ .mainContent-info { position: relative; padding-right: 0; padding-bottom: 0rem; } .mainContent-info:after { content: ''; display: block; height: 35rem; width: 100%; margin-top: -8rem; background-image: url("/style_www/img/main/main_info_bg.png"); background-repeat: no-repeat; background-position: calc(100% + 5rem) bottom; background-size: contain; } .mainInfo-text { margin-bottom: 2rem; padding: 0 0.5rem; } .mainInfo-text dl { margin-bottom: 3rem; } .mainInfo-text dl dt { display: block; } .mainInfo-text dl dt * { display: block; font-family: var(--special-font); } .mainInfo-text dl dt strong { font-size: 3.2rem; margin-left: -0.04em; color: #dadbdb; font-weight: 900; margin-bottom: 0.7rem; } .mainInfo-text dl dt span { font-size: 3vw; color: var(--basic-color); } /* .mainInfo-text dl dd { display: none; } */ .mainInfo-text dl dd p { font-size: 1.7rem; margin-top: 1.8rem; line-height: 1.5; color: #252525; } .mainInfo-text dl dd p span { display: inline-block; } .mainMore-info { margin-top: 0; position: relative; padding: 0.8rem 0 0; width: 12rem; color: var(--special-color); } .mainMore-info i { width: 1.6rem; height: 1.6rem; } .mainMore-info i:before, .mainMore-info i:after { background-color: var(--special-color); } .mainVideo-list { display: flex; margin-left: -1.5rem; align-items: flex-end; } .mainVideo-list li { padding-left: 1.5rem; width: 35%; } .mainVideo-list li:first-child { width: 30%} .mainVideo-list li > .inner { background-image: url("/style_www/img/main/video/bg.jpg"); background-size: cover; background-repeat: no-repeat; overflow: hidden; } .mainVideo-list li:nth-child(1) > .inner { padding: 6rem 0 7rem; } .mainVideo-list li:nth-child(2) > .inner { padding: 4.5rem 0 5rem; } .mainVideo-list li:nth-child(3) > .inner { padding: 6rem 0; } .mainVideo-btn { position: relative; display: block; box-shadow: 0 0 3rem rgba(0,0,0,0.6); padding-bottom: 1.7rem; background-color: var(--basic-color); } .mainVideo-btn:before { content: ''; display: block; position: absolute; left: 0; top:0; right: 0; bottom: 0; background-color: rgba(255,255,255,0.05); z-index: 90; background-image: url("/style_www/img/common/icon/video_play_c.png"); background-repeat: no-repeat; background-position: calc(100% - 1rem) calc(100% - 2.7rem); background-size: 22%; } .mainVideo-btn em { font-size: 1.4rem; height: 2.7rem; line-height: 3rem; color: #fff; display: block; overflow: hidden; text-align: center; font-family: var(--special-font); } .mainVideo-btn span { display: block; padding-bottom: 56.25%; } @media (min-width: 550px){ .mainInfo-text dl dt span { font-size: 1.6rem; } } @media (min-width: 768px){ .mainContent-info { padding-right: 3rem; } .mainContent-info:after { background-position: right bottom; } .mainInfo-text dl dt strong { font-size: 4.5rem; } } @media (min-width: 1024px){ .mainContent-info { padding-bottom: 10rem; padding-right: 4rem; } .mainContent-info:after { height: 50rem; width: 90rem; max-width: 100%; margin-top: 0; position: absolute; left: 50%; bottom: 0; background-position: left bottom; } .mainInfo-text dl dt strong { font-size: 5rem; } .mainInfo-text dl dd { display: block; max-width: 57%; margin-top: 4rem; } .mainInfo { width: 70%; margin-left: auto; margin-top: -8rem; } } @media (min-width: 1360px){ .mainInfo-text dl dt strong { font-size: 5.5rem; } .mainInfo { margin-top: -20rem; } .mainVideo-list li:nth-child(1) > .inner { padding: 8rem 0 9rem; } .mainVideo-list li:nth-child(2) > .inner { padding: 6.5rem 0 7rem; } .mainVideo-list li:nth-child(3) > .inner { padding: 8rem 0; } } /** mainInfo-end **/ /** mainBoard-wrap **/ .mainBoard-wrap { padding-top: 0.8rem; } .mainBoard { font-size: 0; } .mainBoard .slick-list { margin: 0 -1rem; } .mainBoard .slick-list:before, .mainBoard .slick-list:after { content: ''; display: block; width: 1rem; height: 100%; position: absolute; top: 0; z-index: 10; } .mainBoard .slick-list:before { left: 0; background: linear-gradient(to left, rgba(242,245,246,0) 0%,rgba(242,245,246,1) 100%); } .mainBoard .slick-list:after { right: 0; background: linear-gradient(to right, rgba(242,245,246,0) 0%,rgba(242,245,246,1) 100%); } .mainBoard .slick-slide { margin: 0 1rem; padding: 1rem 0; } .mainBoard-box { position: relative; background-color: #fff; transition: all 1000ms linear 1s; padding: 3rem 3rem 2.8rem; border-radius: var(--basic-radius); box-shadow: 0px 0px 20px 0 rgb(0 0 0 / 0%); overflow: hidden; } .mainBoard-box > i { color: var(--basic-color); font-size: 1.4rem; transition: all 1000ms linear 1s; font-family: var(--special-font); padding: 1rem 1.5rem 0.7rem; border-radius: 2rem; background-color: #fff; color: #333; } .mainBoard-box dl { padding-bottom: 2rem; position: relative; } .mainBoard-box dt { margin: 1.5rem 0 2.5rem; font-size: 2rem; line-height: 1.5; min-height: 15rem; color: #fff; font-weight: 600; } .mainBoard-box dd { opacity: 0.7; position: absolute; left: 0; bottom: 0; } .mainBoard-box dd > * { display: inline-block; vertical-align: middle; margin-right: 0.5rem; font-size: 1.5rem; color: #fff; } .mainBoard-box a, .mainBoard-box:after { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .mainBoard-box:after { content: ""; background-color: rgba(26, 102, 58, 0.4); z-index: -1; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);} .mainBoard .slick-active .mainBoard-box { box-shadow: 0px 0px 8px 0 rgb(0 0 0 / 10%); } .mainBoard .slick-track { display: flex; } .mainBoard .slick-track .slick-slide { float: none; height: initial; } .mainBoard .slick-track .slick-slide > div, .mainBoard .slick-track .slick-slide > div li, .mainBoard .slick-track .slick-slide > div li .mainBoard-box { height: 100%; } .mainBoard .slick-track .slick-slide .mainBoard-box { background-color: var(--basic-color); } .mainBoard .slick-track .slick-slide:nth-child(2n) .mainBoard-box { background-color: var(--special-color); } .mainBoard .slick-track .slick-slide:nth-child(2n) .mainBoard-box dt, .mainBoard .slick-track .slick-slide:nth-child(2n) .mainBoard-box dd > * { color: #333; } .mainBoard .slick-track .slick-slide:nth-child(3n) .mainBoard-box { background-color: #252525; } .mainBoard .slick-track .slick-slide:nth-child(3n) .mainBoard-box dt, .mainBoard .slick-track .slick-slide:nth-child(3n) .mainBoard-box dd > * { color: #fff; } .mainBoard-control { text-align: center; margin-top: 2rem; } .mainBoard-control > .inner { display: inline-block; border: 1px solid var(--special-color); font-size: 0; padding: 0.4rem 0.4rem 0.4rem 1.5rem; border-radius: 2rem; height: 4rem; } .mainBoard-control > .inner > * { display: inline-block; vertical-align: middle; } .mainBoard-control > .inner .mainBoard-dot { margin-right: 0.3rem; padding-left: 0.5rem; } .mainBoard-control > .inner #mainBoard-prev { margin-left: 0; } .mainBoard-control > .inner .mainMore { margin-left: 1rem; position: static; padding: 0.8rem; border-radius: 2rem; background-color: var(--special-color); } .mainBoard-control > .inner .mainMore i { width: 1.4rem; height: 1.4rem; } .mainBoard-control > .inner .mainMore i:before, .mainBoard-control > .inner .mainMore i:after { background-color: #fff; } @media (min-width: 768px){ } @media (min-width: 1024px){ .mainBoard .slick-slide { margin: 0 1.5rem; } .mainBoard-control { margin-top: 3rem; } } @media (min-width: 1360px){ .mainBoard-box { padding: 3.5rem 3.5rem 3.3rem; } .mainBoard-box dt { min-height: 17rem; } .mainBoard .slick-slide { margin: 0 2rem; } .mainBoard-control { margin-top: 4rem; } } /** mainBoard-end **/ /** mainCustomer-wrap **/ .mainContent-customer { background-color: var(--basic-color); } .mainCustomer-wrap .mainContent-title > * { color: #fff; } .mainCustomer-wrap .mainContent-title h3 > * { color: #fff; } .mainCustomer { padding-top: 1rem; max-width: 50rem; margin: auto; } .mainCustomer ul { margin-left: -2rem; margin-top: -2rem; } .mainCustomer ul li { padding-top: 2rem; padding-left: 2rem; } .mainCustomer ul li a { display: block; background-color: #fff; border-radius: 1rem; position: static; padding: 2rem 15rem 2rem 2.5rem; background-image: url("/style_www/img/main/customer/inquiry.png"); background-repeat: no-repeat; background-position: calc(100% - 2rem) calc(100% - 2rem); background-size: 9rem auto; } .mainCustomer ul li a > * { display: block; } .mainCustomer ul li a strong { font-family: var(--special-font); color: var(--basic-color); font-size: 2.4rem; } .mainCustomer ul li a span { color: var(--gray-color-deep); margin-top: 0.5rem; } .mainCustomer ul li a i { margin-top: 2.5rem; } .mainCustomer ul li a i:before, .mainCustomer ul li a i:after { background-color: var(--special-color); } .mainCustomer ul li + li a { background-color: #252525; background-image: url("/style_www/img/main/customer/partnership.png"); } .mainCustomer ul li + li a strong { color: var(--special-color); } @media (min-width: 1024px){ .mainCustomer { max-width: 100rem; padding-bottom: 2rem; } .mainCustomer ul { margin-left: -3rem; margin-top: -3rem; } .mainCustomer ul:after { content: ''; display: block; clear: both; } .mainCustomer ul li { padding-top: 3rem; padding-left: 3rem; float: left; } .mainCustomer ul li a { padding: 3rem 15rem 3rem 3.5rem; } } /** mainCustomer-end **/ /** mainPartner-wrap **/ /* .mainPartner-list { display: flex; flex-wrap: wrap; } .mainPartner-list li { width: 50%; padding: 2rem 2rem; } .mainPartner-list li a { padding: 0 2rem; transition: border .2s ease-in-out; border: 1px solid rgba(255,255,255,0); display: block; border-radius: 0.3rem; overflow: hidden; } .mainPartner-list li a:hover { border-color: #ccc; } .mainPartner-list li a .imgContainer-fit { padding-bottom: 40%; } */ .mainContent-partner.eng { background-color: var(--basic-color); } .mainContent-partner.eng .mainContent-title h3 strong { color: #fff; } .mainContent-partner.eng .mainContent-title p { color: var(--special-color); } .mainContent-partner.eng .mainPartner { background-color: #fff; padding: 1rem; border-radius: var(--basic-radius); } .mainPartner-list li { padding: 1rem; } .mainPartner-list a { display: block; color: #d4d4d4; font-size: 1.4rem; padding: 0rem; } .mainPartner-list a:hover { text-decoration: underline; } .mainPartner-list a .imgContainer-fit { padding-bottom: 30%; } .mainPartner-list .slick-list:before, .mainPartner-list .slick-list:after { content: ''; display: block; width: 1rem; height: 100%; position: absolute; top: 0; z-index: 10; } .mainPartner-list .slick-list:before { left: 0; background: linear-gradient(to left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); } .mainPartner-list .slick-list:after { right: 0; background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); } @media (min-width: 640px){ } @media (min-width: 1024px){ } .mainPartner-control { text-align: center; margin-top: 2.5rem; } .mainPartner-control > .inner { display: inline-block; border: 1px solid var(--special-color); font-size: 0; padding: 1rem 1.5rem; border-radius: 2rem; } .mainPartner-control > .inner > * { display: inline-block; vertical-align: middle; } .mainPartner-control > .inner .mainPartner-dot { margin-right: 0.3rem; padding-left: 0.5rem; } .mainPartner-control > .inner #mainPartner-prev { margin-left: 0; } /** mainPartner-end **/ /** ************************************************** **/ /** subPage-wrap **/ .subHero-wrap { background-color: transparent; margin-top: var(--header-height-minus); position: relative; padding-top: 4rem; padding-bottom: 4rem; background-size: cover; background-position: center; } .subHero-content { position: relative; padding-top: var(--header-height-padding); overflow: hidden;} .subHero-bg { background-color: var(--basic-color-deep); position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background-size: cover; background-position: center center; animation-duration: 70s; animation-name: bounceAni; animation-iteration-count: infinite; } .subHero-text { font-size: 2.6rem; padding: 2rem; } .subHero-text * { font-family: var(--special-font); color: #fff; display: block; } .subHero-text span { font-size: 0.45em; font-weight: 400; opacity: 0.8; margin-top: 0.5em; } @media (min-width: 1024px){ .subHero-wrap { padding-top: 6rem; padding-bottom: 6rem; } .subHero-text { padding: 2rem 4rem; font-size: 3.2rem; } .subHero-text span { font-size: 0.5em } } @media (min-width: 1360px){ .subPage-wrap article { padding-left: 0; padding-right: 0; } } .subPage { margin-left: auto; margin-right: auto; position: relative; padding-top: 1rem; padding-bottom: 6rem; } .subPage-topNav #subNav-list li a { padding-bottom: 2.2rem; } .pageTitle-wrap { padding-top: 4rem; margin-bottom: 0; } /* .pageTitle-wrap:after { content: ''; display: block; width: 100%; height: 5px; background-image: url("/style_www/img/common/pattern/diagonal.gif"); background-color: #bcbec3; } */ .pageTitle { padding-top: 0rem; padding-bottom: 1.5rem; display: flex; align-items: center; border-bottom: 1px solid #dedede; } .pageTitle h2 { margin-bottom: 0.2rem; font-size: 3rem; display: block; position: relative; } .pageTitle h2:before { content: ''; display: block; width: 100%; height: 1.4rem; background-color: var(--special-color); transform: skew(-25deg); position: absolute; left: 0; bottom: 0; z-index: 0; } .pageTitle h2 strong { font-family: var(--special-font); color: var(--basic-color); position: relative; z-index: 1; } .pageTitle-right { display: none; text-align: right; flex: 1; } .location-wrap { margin-right: 2rem; } .location-wrap, .pageBtn-wrap { display: inline-block; vertical-align: middle; } .pageBtn-wrap ul li + li { margin-left: 0.8rem; } .pageBtn-wrap ul li > * { background-color: #ebeded; border-radius: 1.5rem; color: #7f8893; width: 40px; height: 40px; text-align: center; display: block; font-size: 0; } .pageBtn-wrap ul li > *:hover { background-color: var(--special-color); color: #fff; } .pageBtn-wrap ul li > * i:before { font-size: 1.6rem; line-height: 40px; } .searchContainer-wrap { padding-top: 2rem; padding-bottom: 2rem; } .searchContainer > .inner { border-radius: 0.5rem; } @media (min-width: 768px){ } @media (min-width: 1024px){ /* .subNav-wrap { display: block; } */ .subPage { padding-top: 2rem; padding-bottom: 8rem; } .pageTitle-wrap { display: block; padding-top: 6rem; } .pageTitle-right { display: inline-block; margin-left: auto; } .searchContainer-wrap { padding-top: 2rem; padding-bottom: 4rem; } } @media (min-width: 1360px){ .subPage { padding-bottom: 10rem; } .sumery-wrap { visibility: hidden; height: 0; overflow: hidden; } .pageTitle { padding-bottom: 2rem; } .pageTitle h2 { font-size: 3.2rem; } } .subContent { font-size: 1.6rem; margin-top: 1.5rem; } .subContent-wrap { margin-top: 3rem; } .subContent-wrap ~ .subContent-wrap { margin-top: 4rem; } .subContent-wrap > section { max-width: var(--max-width); margin-left: auto; margin-right: auto; } @media (min-width: 1024px){ .subContent-wrap { margin-top: 2rem; } .subContent-wrap ~ .subContent-wrap { margin-top: 5rem; } } @media (min-width: 1360px){ .subContent-wrap ~ .subContent-wrap { margin-top: 6rem; } } .subContent-title { font-size: 2.3rem; position: relative; } .subContent-title h3 { display: block; padding-left: 3.4rem; position: relative; font-size: 1em; padding-bottom: 1.7rem; } .subContent-title h3 * { font-family: var(--special-font); display: inline-block; vertical-align: middle; } .subContent-title h3 span { font-weight: normal; padding-right: 0.5em; display: none; } .subContent-title h3 strong { font-weight: 600; color: #252525; font-weight: 700; } .subContent-title h3:before { content: ''; display: block; width: 2.2rem; height: 2.2rem; position: absolute; left: 0; top: 0.2em; background: url("/style_www/img/common/icon/title_dot.png") no-repeat center; background-size: contain; } .subContent-title h3 strong span { font-weight: normal; font-size: 0.8em; } .subContent-title h4 { font-size: 0.85em; display: block; padding-left: 3.4rem; position: relative; padding-bottom: 1.3rem; } .subContent-title h4 * { font-family: var(--special-font); display: inline-block; vertical-align: middle; font-weight: normal; } .subContent-title h4:before { content: ''; display: block; width: 1.4rem; height: 1.4rem; position: absolute; top: 0.37em; left: 0.5rem; border-radius: 0.3rem; border: 0.2rem solid var(--special-color); } .subContent-title ~ .subContent-title ~ .subContent-title { margin-top: 3rem; } .subContent-title .initialBtn { font-size: 1.6rem; width: 8rem; position: absolute; right: 0; bottom: 2rem; padding: 0.7rem 0.8rem; } .subContent-title.btn { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; } .subContent-title.btn h3 { padding-bottom: 0; } .subContent-title.btn .youtubeBtn { font-size: 1.4rem; font-weight: 600; padding: 0.5rem 1rem; border: 1.5px solid #ddd; border-radius: 0.6rem; box-shadow:1px 1px 3px rgba(0,0,0,0.1); cursor: pointer; } .subContent-title.btn .youtubeBtn i { color: red; font-size: 1.6em; vertical-align: sub; } .mark { display: flex; gap: 1rem; align-items: center; } .mark h3, .mark h4 { padding-bottom: 0; } .mark .markImg { width: 12%; max-width: 4.5rem; } @media (min-width: 768px){ .subContent-title h3 { padding-bottom: 2rem; } } .subContent-text { font-size: 1.8rem; } .subContent-text > p { line-height: 1.5; } .subContent-text > p ~ p { margin-top: 2rem; } .subContent-color { color: var(--basic-color); } .colorBg-wrap { background-color: var(--gray-color-bright); } .colorBg-box { background-color: var(--gray-color-bright); padding: 2rem 3rem; border-radius: 1.5rem; display: flex; align-items: center; } .colorBg-box img { width: 7rem; } .colorBg-box dl { flex: 1; font-size: 2rem; padding-left: 1.5rem; } .colorBg-box dl dt { font-weight: 900; text-transform: uppercase; } .colorBg-box dl dd { color: #555; font-size: 0.7em; margin-top: 0.7em; line-height: 1.5; } @media (min-width: 1024px){ .colorBg-box { padding: 2.5rem 3rem; } .colorBg-box img { width: 12rem; } .colorBg-box dl { font-size: 2.4rem; padding-left: 3rem; padding-top: 1rem; padding-bottom: 1rem; } .colorBg-box dl dd { font-size: 0.65em; } } @media (max-width: 640px){ .colorBg-box img { display: none; } .colorBg-box dl { padding-left: 0.5rem; } } .simpleText-box { background-color: var(--gray-color-bright); padding: 3rem 3rem; border-radius: 1.5rem; } .simpleText-box dl { font-size: 2rem; } .simpleText-box dl dt { font-weight: 900; text-transform: uppercase; } .simpleText-box dl dt span { display: none; } .simpleText-box dl dd { color: #555; font-size: 0.8em; margin-top: 0.7em; line-height: 1.5; } .simpleText-box dl dd > * { line-height: 1.6; } @media (min-width: 1024px){ .simpleText-box dl { display: table; font-size: 2.4rem; } .simpleText-box dl > * { display: table-cell; vertical-align: top; } .simpleText-box dl dt { min-width: 160px; } .simpleText-box dl dt span { display: inline; } .simpleText-box dl dd { font-size: 0.65em; margin-top: 0; } } .borderTop-box { margin-bottom: 1.5rem; padding: 2rem; border: 1px solid #cecece; border-top: 0.3rem solid var(--basic-color); line-height: 1.7; border-radius: 3px; } @media (min-width: 768px){ .borderTop-box { padding: 3rem; } } .customCheckbox label span { font-size: 1.5rem; } .borderTop-box-agree { font-size: 1.5rem; line-height: 1.5; } .borderTop-box-agree .thinTable { table-layout: fixed; width: 100%; margin: 1rem 0;} .borderTop-box-agree .thinTable th, .thinTable td { border: 1px solid #dedede; padding: 0.5rem 0.2rem; text-align: center; } .borderTop-box-agree .thinTable th { border-top-color: #252525; } .basicTable-wrap table.alignCenter-all *, .basicTable-wrap table.alignCenter-all tbody td:nth-child(2) { text-align: center; } .basicTable-wrap table.alignCenter-all tbody td.alignLeft { padding-left: 1.5rem; } .subImg-iconList { position: relative; } .subImg-iconList ul { display: grid; gap: 2rem; grid-template-columns: repeat(2, 1fr); } .subImg-iconList ul > li { border: 1px solid #ddd; border-radius: 0.6rem; padding: 1.5rem 1.5rem 2rem 1.5rem; } .subImg-iconList ul > li > div { text-align: center; } .subImg-iconList ul > li img { width: 100%; max-width: 13rem; } .subImg-iconList ul > li p { font-size: 1.5rem; color: #9f9f9f; } .subImg-iconList ul > li p > strong { color: #333; } .subImg-subText { position: absolute; top: -3.5rem; right: 0; font-size: 1.4rem; color: #9f9f9f; } .checkPoint::before { content: '* '; color: var(--special-color); } .subImg-box { border: 1px solid #ddd; background: #fff; padding: 1rem 1rem; border-radius: 0.6rem; } .subImg-box-double { display: flex; flex-wrap: wrap; border: 1px solid #ddd; background: #fff; padding: 1rem 1rem; border-radius: 0.6rem; } .subImg-box-double > * { padding: 1rem; } .subImg-box img { margin: auto; } .subImg-double { border: 1px solid #ddd; border-radius: 0.6rem; overflow: hidden; } .subImg-double::after { content: ''; display: block; clear: both; } .subImg-double img { display: block; width: 50%; float: left; } .subImg-double2 { display: flex; gap: 1rem; } .subImg-double2 img { width: 100%; border: 1px solid #ddd; border-radius: 0.6rem; overflow: hidden; } .subImg-double2.pd img { padding: 2rem; } .subImg-triple { display: flex; flex-wrap: wrap; font-size: 0; border-radius: 0.6rem; overflow: hidden; border: 1px solid #ddd; } .subImg-triple > div:nth-child(1) { width: 50%; } .subImg-triple > div:nth-child(2) { width: 50%; } .subImg-triple > div:nth-child(3) { width: 100%; } .subImg-triple > div .imgContainer-fit { padding: 0; height: 20rem; } .subImg-triple2 { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); } .subImg-triple2 > div:nth-child(3) { grid-column: 1 / 3; } .subImg-triple2 img { width: 100%; height: 100%; object-fit: cover; } .subImg-triple2 .subImg-triple-video { display: flex; } .subImg-hover { position: relative; } .subImg-hover .hoverImg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; opacity: 0; transition: 0.2s; } .subImg-hover:hover .hoverImg { opacity: 1; } .subVideo-box { border-radius: 0.6rem; overflow: hidden; border: 1px solid #ddd; background-color: var(--gray-color-bright); font-size: 0; } .subVideo-box .inner { max-width: 80rem; margin: auto; } .pcImg { display: none; } @media (min-width: 720px){ .subImg-box { padding: 2rem; } .mobileImg { display: none; } .pcImg { display: block; } .subImg-double2 { gap: 1.5rem; } .subImg-iconList ul { grid-template-columns: repeat(3, 1fr); } .subImg-triple > div:nth-child(1) { width: 25%; } .subImg-triple > div:nth-child(2) { width: 25%; } .subImg-triple > div:nth-child(3) { width: 50%; } .subImg-triple > div .imgContainer-fit { height: 100%; } .subImg-box-double > * { width: 50%; padding: 2rem; } } @media (min-width: 850px){ .subImg-wrap { position: relative; width: 100%; height: 0; padding-bottom: 46%; } .subImg-triple2 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; grid-template-columns: 6fr 4fr; grid-template-rows: repeat(2, 1fr); } .subImg-triple2 > div:nth-child(1) { grid-row: 1 / 3; } .subImg-triple2 > div:nth-child(3) { grid-column: 2 / 3; } } @media (min-width: 950px){ .subImg-box { padding: 5rem 8rem; } } @media (min-width: 1024px){ .subImg-double2 { gap: 2rem; } .subImg-iconList ul { gap: 1rem; grid-template-columns: repeat(6, 1fr); } } .subContent-lineBox { background-image: url("/style_www/img/common/pattern/diagonal.gif"); padding: 2rem; border: 1px solid #ddd; border-radius: 0.5rem; font-size: 1.7rem; } .subContent-lineBox > * { display: block; line-height: 1.5; } .subContent-lineBox strong { font-size: 1.1em; } .subContent-lineBox p { margin-top: 1rem; } .subContent-lineBox .dotList li { font-size: 1.7rem } .subContent-lineBox .dotList li:before { top: 0.6em; } @media (min-width: 950px){ .subContent-lineBox { padding: 3rem; } } /**-- subContent-wrap custom --**/ .fileDown-list a { color: #555; } .fileDown-list a * { display: inline-block; vertical-align: middle; } .fileDown-list a i { background-color: #4179c6; color: #fff; font-size: 0; padding: 0.2rem 1rem; border-radius: 2rem; margin-left: 0.2rem; } .fileDown-list a i:before { font-size: 1.3rem; } .fileDown-list a:hover span { text-decoration: underline; } .fileDown-list a:hover i { background-color: #013e6c; } .dotList-s li + li { margin-top: 0.8rem; } .dotList-s li:before { top: 0.65em; } .dotList strong { display: block; } .dotList .dotList-s { margin-top: 1rem; } .dotList .dotList-s li { font-size: 0.9em; } .dotList .dotList-s li + li { margin-top: 0.5rem; } .dotList sub { transform: translateY(-25%); display: inline-block; color: #555; } .dotList-num > li + li { margin-top: 0.9em; } /**-- subContent-wrap custom end --**/ /** subContent-wrap end **/ /** pageTab-wrap **/ .pageTab-wrap { padding: 1rem 0 3rem; } .pageTab { border-bottom: 2px solid var(--special-color); } .pageTab.maxWidth { padding: 0; } .pageTab > ul:after { content: ''; display: block; clear: both; } .pageTab > ul { margin-left: 0; transform: translateY(2px); } .pageTab > ul > li { float: left; padding-left: 0; } .pageTab > ul > li a { display: block; font-size: 3.2vw; padding: 1.5rem 1.5rem; text-align: center; position: relative; background-color: #fff; color: #aaa; font-weight: 500; border-radius: 0.2rem; } .pageTab > ul > li a:before { position: absolute; top: 0; left: 0; content: ""; display: block; width: 0; height: 100%; background-color: rgba(0,0,0, 0); transition: all 0.2s ease-in-out; } .pageTab > ul > li a:hover:before { width: 100%; background-color: rgba(0,0,0, 0.1); } .pageTab > ul > li.active a { border: 2px solid var(--special-color); border-bottom: 0; color: #333; border-radius: 0.5rem 0.5rem 0 0; } .pageTab > ul > li a span { font-size: 0.95em; } .pageTab > ul > li.active a span { font-size: 1em; } .pageTab_2 > ul > li { width: 50%; } .pageTab_3 > ul > li { width: 33.333333%; } @media (min-width: 600px){ .pageTab > ul > li a { font-size: 1.7rem; } } @media (min-width: 750px){ .pageTab > ul > li { width: inherit; } .pageTab > ul > li a { font-size: 1.8rem; padding: 1.7rem 2.5rem; } .pageTab-wrap { padding: 1rem 0 5rem; } } @media (max-width: 749.9px){ .pageTab_4 { border-bottom: 0; } .pageTab_4 > ul { margin-left: -0.3rem; margin-top: -0.5rem; display: flex; flex-wrap: wrap; } .pageTab_4 > ul > li { width: 50%; padding-left: 0.3rem; padding-top: 0.5rem; } .pageTab_4 > ul > li a { border: 2px solid var(--gray-color); border-radius: 0.5rem; } .pageTab_4 > ul > li.active a { border-bottom: 2px solid var(--special-color); border-radius: 0.5rem; } .pageTab_5 { border-bottom: 0; } .pageTab_5 > ul { margin-left: -0.3rem; margin-top: -0.5rem; display: flex; flex-wrap: wrap; } .pageTab_5 > ul > li { width: 50%; padding-left: 0.3rem; padding-top: 0.5rem; } .pageTab_5 > ul > li:nth-child(n + 3) { width: 33.33333333333%; } .pageTab_5 > ul > li a { border: 2px solid var(--gray-color); border-radius: 0.5rem; } .pageTab_5 > ul > li.active a { border-bottom: 2px solid var(--special-color); border-radius: 0.5rem; } } /** pageTab-wrap end **/ /** boxTitle **/ .boxTitle { position: relative; font-family: var(--special-font); text-align: center; font-size: 2rem; padding: 4rem 2rem; border: 0.7rem solid #ededed; word-break: keep-all; } .boxTitle:before { content: ''; position: absolute; top: -0.7rem; left: -0.7rem; width: 3rem; height: 3rem; border-top: 0.7rem solid var(--special-color); border-left: 0.7rem solid var(--special-color); } .boxTitle:after { content: ''; position: absolute; bottom: -0.7rem; right: -0.7rem; width: 3rem; height: 3rem; border-bottom: 0.7rem solid var(--basic-color); border-right: 0.7rem solid var(--basic-color); } .boxTitle strong { font-family: var(--special-font); } /** boxTitle end **/ /** taskTab-wrap **/ .taskTab { margin-bottom: 1.5rem; } .taskTab ul { font-size: 0; } .taskTab ul > li { display: inline-block; vertical-align: middle; width: 50%; position: relative; border: 1px solid #dedede; border-top: 0; } .taskTab ul > li:first-child { border-top: 1px solid #dedede; border-radius: 1rem 0 0 0; overflow: hidden; } .taskTab ul > li:nth-child(2) { border-top: 1px solid #dedede; border-radius: 0 1rem 0 0; } .taskTab ul > li:last-child { border-radius: 0 0 1rem 0; } .taskTab ul > li:nth-last-child(2) { border-radius: 0 0 0 1rem; } .taskTab ul > li:nth-child(2n) { border-left: 0; } .taskTab ul > li > .inner { display: block; position: relative; width: 100%; padding: 1.3rem 1.5rem; text-align: left; color: #555; } .taskTab ul > li > .inner > * { display: inline-block; vertical-align: middle; letter-spacing: -0.05px; word-spacing: -0.1px; } .taskTab ul > li > .inner > em { font-size: 3vw; } .taskTab ul > li > .inner > span { font-size: 1.4rem; color: #01306c; } .taskTab ul > li.active { border-color: var(--special-color) !important; } .taskTab ul > li.active > .inner *, .taskTab ul > li > .inner:hover * { color: var(--special-color); font-weight: 500; } .taskTab ul > li.active:before { content: ''; display: block; position: absolute; left: 0; top: 0; width: 0; height: 0; border-bottom: 0.8rem solid transparent; border-top: 0.8rem solid var(--special-color); border-left: 0.8rem solid var(--special-color); border-right: 0.8rem solid transparent; } .taskTab ul > li + li.active:after { content: ''; display: block; width: calc(100% + 2px); height: calc(100% + 2px); position: absolute; left: -1px; top: -1px; border: 1px solid var(--special-color); border-width: 1px 0 0 1px; } .taskTab ul > li:nth-child(2).active:after { border-top: 0; } .taskTab ul > li:nth-last-child(2).active:after { border-radius: 0 0 0 1rem; } @media (min-width: 500px){ .taskTab ul > li > .inner > em { font-size: 1.5rem; } } @media (min-width: 950px){ .taskTab { display: table; table-layout: fixed; width: 100%; margin-bottom: 3rem; } .taskTab ul { display: table-row; margin: 0; } .taskTab ul > li { display: table-cell; vertical-align: middle; border: 1px solid #dedede; border-left: 0; } .taskTab ul > li:first-child { border-left: 1px solid #dedede; border-radius: 1rem 0 0 1rem; } .taskTab ul > li:nth-child(2) { border-radius: 0; } .taskTab ul > li:last-child { border-radius: 0 1rem 1rem 0; } .taskTab ul > li:nth-last-child(2) { border-radius: 0; } .taskTab ul > li > .inner { font-size: 1.4rem; border-radius: 0; padding: 1.2rem 1.5rem; } .taskTab ul > li > .inner > * { display: block; } .taskTab ul > li > .inner > em { font-size: 1.5rem; } .taskTab ul > li > .inner > span { padding-top: 0.5rem; } .taskTab ul > li:last-child.active:after { border-top: 0; } } @media (min-width: 1024px){ .taskTab ul > li > .inner { font-size: 1.5rem; } } @media (min-width: 1360px){ .taskTab ul > li > .inner > * { display: inline-block; } .taskTab ul > li > .inner > span { padding-top: 0; } } .task-wrap .boardSearch { padding: 2rem 0 1rem; } .task-wrap .filter-wrap { margin-bottom: 1rem; } .task-wrap .filter-wrap:after { content: ''; display: block; clear: both; } .task-wrap .filter { float: right; } .task-wrap .filter i, .task-wrap .filter .customSelect { display: inline-block; vertical-align: middle; } .task-wrap .filter i { color: #cecece; } .task-wrap .filter .customSelect { width: 10rem; border: 0; } /** taskTab-wrap end **/ .reactiveList dl ~ dl { margin-top: 1.3rem; } .reactiveList dl dt { background-color: #f3f6fa; padding: 0.8rem; font-weight: 500; border-radius: 0.5rem; color: var(--basic-color-deep); } .reactiveList dl dd { padding: 0.8rem 0.8rem 0; } @media print, (min-width: 768px){ .reactiveList { display: table; table-layout: fixed; width: 100%; border-top: 2px solid #555; } .reactiveList dl { display: table-row; } .reactiveList dl > * { display: table-cell; padding: 1.5rem 2rem !important; } .reactiveList dl dt { border-radius: 0; width: 25rem; border: 1px solid #dedede; border-left: 0; border-top: 0; } .reactiveList dl dd { border-bottom: 1px solid #dedede; } } .reactiveTable { table-layout: fixed; width: 100%; border-top: 2px solid #555; } .reactiveTable th { background-color: #f3f6fa; font-weight: 500; color: var(--basic-color-deep); } .reactiveTable tr > * { border-bottom: 1px solid #dedede; padding: 1.5rem 2rem; } .reactiveTable tr > * + * { border-left: 1px solid #dedede; } @media print, (max-width: 768px){ .reactiveTable { border-top: 0; } .reactiveTable colspan { display: none; } .reactiveTable, .reactiveTable tbody, .reactiveTable tr, .reactiveTable th, .reactiveTable td { display: block; border-radius: 0.5rem; } .reactiveTable tr > * { border-bottom: 0; } .reactiveTable tr > * + * { border-left: 0; } .reactiveTable tr > th { border: 1px solid var(--basic-color-bright); padding: 0.8rem; } .reactiveTable tr > td { padding: 0.8rem 0.8rem 1.3rem; } .reactiveTable tr:last-child > *:last-child { padding-bottom: 0; } } .introduceTitle-img { width: 70rem; max-width: 70%; display: block; margin-bottom: 1rem; } .introduceTitle p { font-family: var(--special-font); font-size: 2rem; line-height: 1.6; font-weight: 600; } .introduceText { padding: 2rem; border: 1px solid #ededed; border-radius: 1rem; } .introduceText p { line-height: 1.7; font-size: 1.7rem; } .introduceText p ~ p { margin-top: 1.5rem; } .introduce-wrap { padding-bottom: 0; } .introduce-wrap .colorBg-wrap { padding-top: 4rem; padding-bottom: 6rem; } .introduce-wrap .subImg-box-double { padding: 0; overflow: hidden; } .introduce-wrap .subImg-box-double > * { padding: 3rem 2rem; width: 100%; } .introduce-wrap .subImg-box-double > * ~ * { background-color: var(--special-color-bright);} .introduce-wrap .subImg-box-double > * img { max-width: 60rem; margin: auto; } @media (min-width: 1024px){ .introduce-wrap .colorBg-wrap { padding-bottom: 8rem; } .introduce-wrap .subImg-box-double > * { padding: 3rem; width: 58%; } .introduce-wrap .subImg-box-double > * ~ * { width: 42%; padding: 6rem; display: flex; align-items: center; } .introduce-wrap .subImg-box-double > * img { max-width: 65rem; margin: auto; } } @media (min-width: 1360px){ .introduce-wrap .colorBg-wrap { padding-bottom: 10rem; } } .history-wrap { padding: 2rem 1.5rem; border: 1px solid #cdcdcd; border-radius: 1rem; overflow: hidden; } /** service **/ .serviceVideo-wrap { margin-top: 2rem; } .serviceVideo-list li { margin-top: 2rem; } .serviceVideo-list a { display: block; position: relative; border-radius: 0.6rem; overflow: hidden; } .serviceVideo-list a em { width: 20rem; text-align: center; font-family:var(--special-font); font-size: 1.6rem; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: var(--basic-color); color: #fff; z-index: 100; padding: 1.3rem 1rem 1rem; border-radius: 10rem; } .serviceVideo-list a:before { opacity: 1; background-color: rgba(0,0,0,0.3); display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; content: ""; z-index: 10; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); transition: opacity 0.2s ease; } .serviceVideo-list a span { display: block; padding-bottom: 56.25%; } .subImg-sw { /* background-color: var(--gray-color-bright); */ } .subImg-sw img { max-width: 80rem; margin: auto; } .subImg-box-line { border-width: 0.2rem; border: 2px solid var(--special-color); padding: 1rem; border-radius: 0.6rem; overflow: hidden; } .subImg-box-line .imgContainer-fit { padding-bottom: 45%; } .subImg-slider-wrap { position: relative; } .subImg-slider-wrap .subImg-box-line { padding-left: 2rem; padding-right: 2rem; } .subImg-slide-nav { text-align: center; } .subImg-slide-nav > * { display: inline-block; vertical-align: middle; } .subImg-slider-prev, .subImg-slider-next { position: absolute; top: 50%; transform: translateY(-50%); font-size: 2.5rem; opacity: 0.3; } .subImg-slider-prev:hover, .subImg-slider-nex:hover { opacity: 1; } .subImg-slider-prev { left: 1rem; } .subImg-slider-next { right: 1rem; } @media print, (min-width: 768px){ .serviceVideo-list { display: flex; margin-left: -2rem; } .serviceVideo-list li { padding-left: 2rem; flex: 1; } } @media (min-width: 1024px){ .subImg-slider-prev, .subImg-slider-next { font-size: 4rem; } } /** service end **/ /** toolTip-wrap **/ .toolTip-wrap { position: relative; } .toolTip-wrap .toolTip-img { width: 100%; } .toolTip-wrap ul { position: absolute; top: 100%; left: 0; width: 100%; border: 1px solid #ddd; border-radius: 0.6rem; margin: 1.5rem 0 2rem 0; padding: 2rem 1.5rem; counter-reset: number 0; } .toolTip-list:not(:last-child) { margin-bottom: 1rem; } .toolTip-list .toolTip-point { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; width: 5%; height: 0; padding-bottom: 5%; } .toolTip-list .toolTip-point::before { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center; width: 1.5em; height: 1.5em; font-size: 1.3rem; color: #fff; border: 1.5px solid #fff; border-radius: 50%; background-color: rgba(var(--basic-color-rgb)); counter-increment: number 1; content: counter(number); } .toolTip-list:nth-child(1) .toolTip-point, .toolTip-list:nth-child(1) .toolTip-content { top: 21%; left: 48%; } .toolTip-list:nth-child(2) .toolTip-point, .toolTip-list:nth-child(2) .toolTip-content { top: 22%; left: 81%; } .toolTip-list:nth-child(3) .toolTip-point, .toolTip-list:nth-child(3) .toolTip-content { top: 53%; left: 30%; } .toolTip-list:nth-child(4) .toolTip-point, .toolTip-list:nth-child(4) .toolTip-content { top: 55%; left: 37%; } .toolTip-list:nth-child(5) .toolTip-point, .toolTip-list:nth-child(5) .toolTip-content { top: 16%; left: 61%; } .toolTip-list:nth-child(6) .toolTip-point, .toolTip-list:nth-child(6) .toolTip-content { top: 24%; left: 9%; } .toolTip-list:nth-child(7) .toolTip-point, .toolTip-list:nth-child(7) .toolTip-content { top: 24%; left: 90%; } .toolTip-list .toolTip-content { display: flex; align-items: flex-start; font-weight: 500; } .toolTip-list .toolTip-content strong { color: var(--basic-color); } .toolTip-list .toolTip-content .listNum { display: flex; justify-content: center; align-items: center; flex-shrink: 0; width: 1.1em; height: 1.1em; margin: 0.1em 0.8rem 0 0; color: #fff; border-radius: 50%; background-color: var(--basic-color); } @media (min-width: 980px) { .toolTip-wrap ul, .toolTip-wrap .toolTip-list { margin: 0; } .toolTip-wrap .toolTip-img { margin-bottom: 0; } .toolTip-wrap ul { position: static; border: 0; padding: 0; margin: 0; } .toolTip-list .toolTip-content, .toolTip-list .toolTip-point::before { font-size: 1.5rem; } .toolTip-list .toolTip-content { position: absolute; transform: translate(-50%, calc(-100% - 2.5rem)); width: max-content; border-radius: 1rem; background-color: rgba(255, 255, 255, 0.9); text-align: center; padding: 1rem; opacity: 0; pointer-events: none; z-index: 1; } .toolTip-list .toolTip-content .listNum { display: none; } .toolTip-list .toolTip-content::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translate(-50%, -55%) rotate(-45deg); width: 0; height: 0; border-left: 0.7rem solid rgba(255, 255, 255, 0.9); border-bottom: 0.7rem solid rgba(255, 255, 255, 0.9); border-top: 0.7rem solid transparent; border-right: 0.7rem solid transparent; } .toolTip-list .toolTip-point { cursor: pointer; } .toolTip-list .toolTip-point::before { width: 1em; height: 1em; color: transparent; } .toolTip-list .toolTip-point:hover::before { background-color: rgba(var(--basic-color-rgb), 0.3); } .toolTip-list .toolTip-point:hover ~ .toolTip-content { opacity: 1; } /* .toolTip-list:nth-child(5) .toolTip-content { transform: translate(-50%, calc(100% - 0.5rem)); } */ /* .toolTip-list:nth-child(5) .toolTip-content::after { top: 0.5rem; transform: translate(-50%, calc(100% - 2.5rem)) rotate(-225deg); } */ .toolTip-list:nth-child(6) .toolTip-content { transform: translate(-20%, calc(-100% - 2.5rem)); } .toolTip-list:nth-child(6) .toolTip-content::after { left: 20%; } /* .toolTip-list:nth-child(7) .toolTip-content { transform: translate(-70%, calc(100% - 0.5rem)); } */ /* .toolTip-list:nth-child(7) .toolTip-content::after { top: 0.5rem; left: auto; right: 25.7%; transform: translate(-50%, calc(100% - 2.5rem)) rotate(-225deg); } */ .toolTip-list:nth-child(7) .toolTip-content { transform: translate(-75%, calc(-100% - 2.5rem)); } .toolTip-list:nth-child(7) .toolTip-content::after { left: 75%; } } /** toolTip-wrap end **/ /** partnership-wrap **/ .partnership-wrap ul { margin-top: -2rem; margin-left: -2rem; font-size: 0; } .partnership-wrap ul li { display: inline-block; vertical-align: top; width: 50%; padding-left: 2rem; margin-top: 2rem; } .partnership-wrap ul li a { display: block; text-align: center; } .institutionImg { border: 1px solid #dedede; border-radius: 0.5rem; display: block; overflow: hidden; margin-bottom: 0.5rem; background-color: #fff; } .institutionImg .imgContainer-fit { padding-bottom: 30%; } .partnership-wrap ul li a em { line-height: 1.5; font-size: 1.6rem; } @media (min-width: 720px){ .partnership-wrap ul li { width: 33.333333%; } } @media (min-width: 950px){ .partnership-wrap ul li { width: 25%; } } /** partnership-wrap end **/ /** yearTree-wrap **/ .yearTree-wrap { position:relative; } .yearTree-wrap:after { content: ''; display: block; background: var(--basic-color); display: block; height: 100%; left: 29px; margin-left: -1px; position: absolute; top: 0; width: 2px; z-index: 0; } .yearTree-wrap dl { position: relative; padding-left: 80px; min-height: 100px; padding-bottom: 6rem; z-index: 1; display: flex; align-items: center;} .yearTree-wrap dl:last-child::after { bottom: 0; } .yearTree-wrap dl dt { position: absolute; top: 0; width: 50%; left: 0; z-index: 10; } .yearTree-wrap dl dt strong { background: #fff; border: 2px solid var(--basic-color); border-radius: 50%; color: var(--basic-color); display: block; font-weight: 500; font-size: 16px; width: 63px; height: 63px; line-height: 60px; position: relative; text-align: center; } .yearTree-wrap dl dd { font-size: 1.6rem; padding-left: 1rem; padding-top: 2.4rem; } .yearTree-wrap dl dd .historyItem p i { display: none; } .yearTree-wrap dl dd .historyItem ~ .historyItem { margin-top: 1rem; } @media (min-width: 1024px){ .yearTree-wrap { position:relative; padding-top: 6rem; } .yearTree-wrap:before, .yearTree-wrap dl:last-child::after { content: ""; background: var(--basic-color); border-radius: 50%; height: 20px; left: 50%; margin-left: -10px; position: absolute; width: 20px; z-index: 5; } .yearTree-wrap:before { top: 0; } .yearTree-wrap:after { left: 50%; } .yearTree-wrap dl { position: relative; padding-left: 50%; min-height: 200px; padding-bottom: 6rem; } .yearTree-wrap dl:nth-child(even) { padding-right: 50%; padding-left: 0; } .yearTree-wrap dl:nth-child(odd) dt { left: 0; padding-right: 47px; } .yearTree-wrap dl:nth-child(even) dt { right: 0; left: inherit; padding-left: 47px; } .yearTree-wrap dl:nth-child(odd) dt strong { float: right; } .yearTree-wrap dl:nth-child(even) dt strong { float: left; } .yearTree-wrap dl dt strong { font-size: 38px; width: 140px; height: 140px; line-height: 132px; } .yearTree-wrap dl dt strong:before { background: var(--basic-color); border-radius: 50%; content: ""; height: 10px; margin-top: -5px; position: absolute; top: 50%; width: 10px; z-index: 5; } .yearTree-wrap dl dt strong:after { background: var(--basic-color); content: ""; height: 2px; margin-top: -1px; position: absolute; top: 50%; width: 47px; } .yearTree-wrap dl:nth-child(even) dt strong:before { left: -54px; } .yearTree-wrap dl:nth-child(even) dt strong:after { left: -49px; } .yearTree-wrap dl:nth-child(odd) dt strong:before { right: -54px; } .yearTree-wrap dl:nth-child(odd) dt strong:after { right: -49px; } .yearTree-wrap dl dd { padding-left: 3rem; padding-top: 0; flex: 1; } .yearTree-wrap dl:nth-child(even) dd { padding-right: 3rem; padding-left: 0; text-align: right; } } /** yearTree-wrap end **/ /** contact-wrap **/ .mapContent { position: relative; padding-bottom: 35%; border: 1px solid #ededed; border-radius: 0 0 0.5rem 0.5rem; overflow: hidden; box-shadow: 0 0.3rem 0.6rem 0 rgb(0 0 0 / 16%); } #map, #map2, #map3 { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } .contactTop-wrap { font-size: 0; /* padding: 0 2rem; */ } .contactTitle-wrap { margin-bottom: 2rem; } .contactTitle-wrap h3 { font-size: 2.5rem; line-height: 1.4;} .contactTitle-wrap h3 > * { display: inline-block; vertical-align: middle; } .contactTitle-wrap h3 > span { font-weight: normal; font-size: 0.9em; } .contactTitle-wrap .divisionBar-s { background: var(--basic-color); height: 0.3rem; width: 6rem; margin: 2rem 0; border-radius: 0.6rem; } .contactTitle-wrap ul li + li { margin-top: 0.2rem; } .contactTitle-wrap ul li > * { display: inline-block; vertical-align: top; font-size: 1.6rem; padding: 0.2rem 0; line-height: 1.5; } .contactTitle-wrap ul li > em { font-weight: 700; width: 7rem; } .contactTitle-wrap ul li > span { width: calc(100% - 5rem); } .contactTitle-wrap ul li > span > * { display: inline-block; } .contactTable.basicTable-wrap table >*:nth-child(2) tr:first-child > * { border-top: 2px solid #555; } .contactTable colgroup col:nth-child(1) { width: 12rem; } .contactTable th i { color: #4179c6; font-size: 2.5rem; } .contactTable th > * { display: inline-block; vertical-align: middle; } .contactTable td p { padding: 0.5rem 0; margin: 0; line-height: 1.4; } .contactTable td p em { color: #4179c6; font-weight: 500; } .contactTable td p a:hover { text-decoration: underline; } .contactTitle-wrap ul li.mapBtn a { display: inline-block; max-width: 48%; padding: 1rem 1rem; border-radius: 0.5rem; margin-top: 0.8rem; margin-right: 1%; } .contactTitle-wrap ul li.mapBtn a > * { display: inline-block; vertical-align: middle; } .contactTitle-wrap ul li.mapBtn a span { font-weight: 400; margin-left: 0.5rem; } .contactTitle-wrap ul li.mapBtn .kakaoMap { background-color: #fbe300; } .contactTitle-wrap ul li.mapBtn .kakaoMap i { color: #017cff; } .contactTitle-wrap ul li.mapBtn .kakaoMap span { color: #333; } .contactTitle-wrap ul li.mapBtn .naverMap { background-color: #2DB400; } .contactTitle-wrap ul li.mapBtn .naverMap i { color: #fff; } .contactTitle-wrap ul li.mapBtn .naverMap span { color: #fff; } .contactAddress { font-size: 1.6rem; padding: 2rem; border: 1px solid #ededed; background-color: var(--gray-color-bright); border-bottom: 0; border-radius: 0.5rem 0.5rem 0 0; } /* @media (min-width: 950px){ .contactTop-wrap { padding: 0 2rem; } .contactTitle-wrap, .mapContent { display: inline-block; vertical-align: top; } .contactTitle-wrap { width: 30rem; padding: 0rem 0 2rem; } .mapContent { width: calc(100% - 30rem); } .contactTitle-wrap .divisionBar-s { margin: 3rem 0; } .contactTitle-wrap ul li > * { display: block; } .contactTitle-wrap ul li + li { margin-top: 1.5rem; } .contactTitle-wrap ul li > em { font-size: 1.7rem; } .contactTitle-wrap ul li.mapBtn a { display: block; max-width: 17rem; } .contactTable colgroup col:nth-child(1) { width: 25rem; } } @media (min-width: 1024px){ .contactTitle-wrap { width: 32rem; } .mapContent { width: calc(100% - 32rem); } } */ /** contact-wrap **/ /** management-text **/ .management-text { color: #888; line-height: 1.5; } .management-text strong { color: #555; } /** management-text end **/ /** edu **/ .eduStep-wrap { padding: 0 2rem; border: 1px solid #dedede; border-radius: var(--basic-radius); } .eduStep-wrap ul li { text-align: center; position: relative; padding: 4rem 0; } .eduStep-wrap ul li + li { border-top: 1px solid #dedede; } .eduStep-wrap ul li + li:before { content: "\E941"; font-family: xeicon; display: block; position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); background-color: #fff; box-shadow: 0px 0px 15px 0 rgb(0 0 0 / 10%); font-size: 2.4rem; width: 4rem; line-height: 3.5rem; border-radius: 3rem; padding-top: 0.5rem; } .eduStep-wrap ul li i { display: block; padding: 0 2rem; width: 60%; max-width: 10rem; margin: 0 auto 2rem; } .eduStep-wrap ul li p { background-color: var(--basic-color-bright); padding: 0.8rem; font-weight: 500; border-radius: 0.5rem; color: var(--basic-color-deep); } @media print, (min-width: 768px){ .eduStep-wrap { padding: 2rem 0; } .eduStep-wrap ul { display: flex; width: 100%; } .eduStep-wrap ul li { width: 33.333333333333%; padding: 2rem 2rem; } .eduStep-wrap ul li + li { border-top: 0; border-left: 1px solid #dedede; } .eduStep-wrap ul li + li:before { content: "\E93E"; left: 0; top: 50%; padding-top: 0; line-height: 4rem; padding-left: 0.5rem; } .eduStep-wrap ul li i { margin-bottom: 4rem; } } @media (min-width: 950px){ .eduStep-wrap ul li { padding: 2rem 3rem; } } .subImg-list ul { display: flex; flex-wrap: wrap; margin-left: -1rem; margin-top: -1rem; } .subImg-list ul li { padding-left: 1rem; padding-top: 1rem; } .subImg-list ul li a, .subImg-list ul li div { display: block; border-radius: 0.5rem; overflow: hidden; width: 25rem; } .subImg-list-wrap .mfp-content > * { padding: 0; background: none; } .subImg-list2 ul { display: grid; gap: 1.5rem; grid-template-columns: 1fr; grid-auto-rows: 1fr; } .subImg-list2 .subImg-popup { display: block; width: 100%; padding: 1rem; border: 1px solid #ddd; } .subImg-list2 .subImg-popup span { position: relative; display: block; width: 100%; height: 0; padding-bottom: 75%; } .subImg-list2 .subImg-popup img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } #gallery_img .slick-list:before, #gallery_img .slick-list:after { content: ''; display: block; width: 1rem; height: 100%; position: absolute; top: 0; z-index: 10; } #gallery_img .slick-list:before { left: 0; background: linear-gradient(to left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); } #gallery_img .slick-list:after { right: 0; background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); } @media (min-width: 720px){ /* .subImg-list ul li { width: 33.33333333%; } */ .subImg-list2 ul { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; } } @media (min-width: 950px){ /* .subImg-list ul li { width: 20%; } */ .subImg-list2 ul { grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: 1fr; } } @media (min-width: 1024px){ .subImg-list2 ul { gap: 2rem; } .subImg-list2 .subImg-popup { padding: 1.5rem; } } /** edu end **/ /** board **/ .photoGallery-wrap { margin-top: 0.6rem; } .photoGallery-wrap .maxWidth { padding: 0; } .photoGallery-wrap .gridWrap > ul { margin-top: -1.5rem; margin-left: -1.5rem; } .photoGallery-wrap .gridWrap > ul > li { padding-left: 1.5rem; padding-top: 1.5rem; } .photoGallery-wrap .gridWrap > ul > li > .inner { border-radius: 1.5rem; overflow: hidden; border: 1px solid #dedede; } .basicBoard th { padding: 1.8rem 1rem; } .basicBoard td { padding: 1.8rem 1rem; } .basicBoard td a strong { font-size: 1.6rem; } .basicTable-wrap.xScroll-wrap .initialBtn { font-size: 1.5rem; } @media (max-width: 800px) { .viewContainer { padding: 1rem 0 !important; } } .viewContainer .viewBtn-warp { margin-bottom: 0; } .gallerySlider-wrap .sliderControl-wrap { height: 4rem; } .gallerySlider-wrap .slick-arrow { position: absolute; top: 0; z-index: 100; width: 80px; height: calc(100% - 4rem); background-color: rgba(0,0,0,0.8); margin: 0; font-size: 2rem; } .gallerySlider-wrap .slick-arrow.prev { left: 0; border-radius: 1rem 0 0 1rem; } .gallerySlider-wrap .slick-arrow.next { right: 0; border-radius: 0 1rem 1rem 0; } .gallerySlider-wrap .sliderControl-wrap .slick-arrow i:before { font-size: 4rem; } .gallerySlider-wrap .sliderControl-wrap .slick-arrow:hover i:before { color: #fff; } @media (max-width: 600px) { .gallerySlider-wrap .slick-arrow { width: 40px; } .gallerySlider-wrap .sliderControl-wrap .slick-arrow i:before { font-size: 2.5rem; } } @media (max-width: 500px) { .gallerySlider-wrap .slick-arrow { width: 30px; } } /** board end **/ .organization li { position: relative; } .organization li:before, .organization li:after, .organization-depth2:before, .organization-depth2:after, .organization .depth-double ul:before { content: ''; display: block; position: absolute; background-color: var(--gray-color-deep); } .organization-item > * { display: block; line-height: 2rem; border: 1px solid #ccc; border-radius: 4px; font-weight: 500; background-color: #fff; color: var(--basic-color); font-size: 1.6rem; } .organization-item.depth_1 > * { background-color: var(--basic-color); color: #fff; border-color: var(--basic-color-deep); font-size: 1.8rem; } .organization-multi .organization-item > * { background-color: var(--gray-color-bright); color: #303030; } .organization-color > * { background-color: var(--basic-color-bright); } .organization-multi dd { border: 1px solid #ccc; border-bottom: 0; padding: 1rem; line-height: 1.5; } .organization-multi dd:nth-child(2) { border-top-left-radius: 4px; border-top-right-radius: 4px; margin-top: 1rem; } .organization-multi dd:last-child { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-bottom: 1px solid #ccc; } @media (max-width: 768px){ .organization li { padding-left: 1.5rem; } .organization > li.depth-double { padding-left: 0; } .organization li + li { padding-top: 1.5rem; } .organization li:before { width: 1.5rem; height: 1px; left: 0; top: 3.6rem; } .organization li:after { width: 1px; height: 100%; left: 0; top: 0; } .organization li:first-child::before { top: 2.1rem; } .organization li:first-child::after { top: 2.1rem; height: calc(100% - 2.1rem); } .organization-item.depth_1 > h4 { font-size: 1.8rem; padding-top: 1.5rem; padding-bottom: 1.5rem; } .organization-depth2 { position: relative; padding-left: 3rem; } .organization-item ~ .organization-depth2 { padding-top: 1.5rem; } .organization-depth2 ~ .organization-depth2 { padding-top: 1.5rem; } .organization-depth2:before { width: 3rem; height: 1px; left: 0; top: 2.1rem; } .organization-depth2:after { width: 1px; height: calc(100% - 2.1rem); left: 1.5rem; top: 2.1rem; } .organization-item ~ .organization-depth2:before { width: 1.5rem; left: 1.5rem; top: 3.6rem; } .organization-depth2 ~ .organization-depth2:before { width: 1.5rem; left: 1.5rem; top: 3.6rem; } .organization-item ~ .organization-depth2:after { height: 100%; top: 0; } .organization-depth2 ~ .organization-depth2:after { top: 0; } .organization-depth2:last-child::after { height: calc(100% - 2.1rem); } .organization li.depth-row { padding-left: 0; } .organization li.depth-row ul li:last-child::after { height: 3.6rem; } .organization li.depth-row ul li { padding-left: 3rem; } .organization li.depth-row ul li:before { width: 3rem; } .organization li.depth-row:after { height: 3.6rem; left: 0; } .organization-item > * { padding: 1.3rem 1rem; display: block; } } @media (min-width: 768.1px){ .organization { text-align: center; } .organization li + li { padding-top: 2.5rem; } .organization li:before { width: 1px; height: 2.5rem; left: 50%; top: 0; margin-left: -0.5px; } .organization > li:first-child::before { display: none; } .depth-multi { max-width: 75rem; margin: auto; } .organization-depth2 { position: absolute; right: 0; bottom: 0; width: 20rem; } .organization-right { right: 0; } .organization-left { left: 0; } .organization-right:before { width: 5rem; height: 1px; left: -5rem; top: 50%; } .organization-left:before { width: 5rem; height: 1px; right: -5rem; top: 50%; } .depth-row ul { display: flex; } .depth-row ul li { flex: 1; padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 2.5rem; } .depth-row ul li:after { width: 100%; height: 1px; top: 0; left: 0; } .depth-row ul li:first-child::after { width: 50%; left: 50%; } .depth-row ul li:last-child::after { width: 50%; } .organization-item > * { margin: auto; max-width: 25rem; padding: 1.8rem 1rem; } .organization-item > .organization-view { position: relative; line-height: 1.4; padding: 0rem; } .organization-item > .organization-view > * { display: inline-block; vertical-align: middle; } .organization-item > .organization-view i { width: 3.2rem; text-align: center; background-color: var(--special-color-deep); color: #fff; padding: 1rem 0; } .organization-item > .organization-view i:before { line-height: 2.8; } .organization-item > .organization-view span { width: calc(100% - 3.2rem); padding: 0 0.5rem; } .organization-item.depth_1 > h4 { font-size: 2rem; border-radius: 10rem; width: 16rem; height: 16rem; display: flex; align-items: center; justify-content: center; } .organization-item.depth_1 > * span { display: block; } .depth-double ul { font-size: 0; text-align: center; position: relative; } .depth-double ul:before { width: 1px; height: 50%; left: 50%; top: 50%; margin-left: -0.5px; margin-top: 1px; } .depth-double ~ .depth-double ul:before { top: 0%; } .depth-double ul > * { display: inline-block; padding-top: 0 !important; } .depth-double ul > *:before { width: 2.5rem; height: 1px; top: 50%; margin-left: 0; margin-top: 0.5px; } .depth-double ul .depth-double-left { padding-right: 2.5rem; } .depth-double ul .depth-double-right { padding-left: 2.5rem; } .depth-double ul .depth-double-left:before { left: initial; right: 0; } .depth-double ul .depth-double-right:before { left: 0; } .depth-double ul > * .organization-item { width: 25rem; } } } .organization a:hover { text-decoration: underline; } .organization-item i { color: var(--special-color-deep); } .organization-info { background-color: var(--basic-color-bright); padding: 1.5rem; border-radius: 1rem; margin-bottom: 1.5rem; } .organization-info > * { display: inline-block; vertical-align: middle; margin-left: 1rem; font-size: 1.6rem; } .organization-info dt { font-weight: 600; } .business-item { border-radius: 1.5rem; overflow: hidden; border: 1px solid #ededed; } .business-item .imgContainer-fit { padding-bottom: 50%; } .businessSlider-nav { position: relative; padding-left: 20rem; border-radius: 1.5rem; padding: 1.8rem 1.8rem 1.5rem; margin-top: 2rem; background: #307331; /* Old browsers */ background: -moz-linear-gradient(left, #307331 0%, #34845a 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #307331 0%,#34845a 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #307331 0%,#34845a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#307331', endColorstr='#34845a',GradientType=1 ); /* IE6-9 */ } .businessSlider-nav .slider-nav-wrap { border-radius: 1.5rem; overflow: hidden; font-size: 0; } .business-thum { padding: 0 0.8rem; } .business-thum .imgContainer-fit { border-radius: 1.5rem; overflow: hidden; } /* .businessSlider-nav .business-thum .imgContainer-fit { border: 8px solid rgba(255, 255, 255, 0); } */ .businessSlider-nav .slick-center .business-thum .imgContainer-fit:before { content:''; display: block; position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; border-radius: 1.5rem; border: 6px solid var(--special-color); } .businessSlider-nav .sliderControl-wrap { text-align: center; margin-top: 1.5rem; } .businessSlider-nav .sliderControl-wrap #businessSlider-dot { margin-right: 1rem; } @media (min-width: 980px){ .businessSlider-nav > * { display: inline-block; vertical-align: middle; } .slider-nav-wrap { width: 100%; max-width: 50rem; } .businessSlider-nav .sliderControl-wrap { padding-left: 2rem; } .businessSlider-nav .sliderControl-wrap #businessSlider-dot { display: block; margin-bottom: 1.5rem; } .businessSlider-nav .sliderControl-wrap #businessSlider-dot .slick-dots { text-align: left; } .businessSlider-nav .sliderControl-wrap .inner > a { width: 4rem; border: 1px solid var(--special-color); margin-right: 0.5rem; border-radius: 1rem; } .businessSlider-nav .sliderControl-wrap .inner > a i:before { line-height: 4rem !important; height: 4rem !important; } } .dotList-business > li + li { margin-top: 1rem; } /*-- halfContent --*/ .halfContent-img .imgContainer-fit { padding-bottom: 50%; border-radius: 1.5rem; overflow: hidden; } .halfContent-text { padding-top: 2rem; padding-bottom: 3rem; } .halfContent-text dl { font-size: 2.4rem; line-height: 1.5; } .halfContent-text dl dt { font-weight: 700; margin-bottom: 1rem; } .halfContent-text dl dd { font-size: 0.65em; } .halfContent-text dl dd p { line-height: 1.6; } @media (min-width: 1024px){ .halfContent-warp { display: flex; flex-wrap: wrap; } .halfContent-warp > * { width: 50%; } .halfContent-text { padding-top: 4rem; padding-bottom: 4rem; padding-left: 5rem; } .halfContent-text dl { font-size: 2.6rem; } .halfContent-text dl dt { margin-bottom: 1.5rem; } .halfContent-img .imgContainer-fit { padding-bottom: 0; height: 100%; min-height: 26rem; } .halfContent-reverse { flex-direction: row-reverse } .halfContent-reverse .halfContent-text { padding-left: 0; padding-right: 5rem; } .halfContent-warp ~ .halfContent-warp { margin-top: 4rem; } } /*-- halfContent end --*/ /*-- basicCal --*/ .basicCal-table { width: 100%; table-layout: fixed; height: 1px; } .basicCal-table .calMonth { padding: 0 1rem; position: relative; margin-bottom: 2rem; } .basicCal-table .calMonth > * { display: inline-block; vertical-align: middle; } .basicCal-table .calMonth strong { font-size: 2.8rem; padding: 0 2rem; font-family: var(--special-font); } .basicCal-table .calMonth .calMonth-move { font-size: 0; } .basicCal-table .calMonth .calMonth-move i:before { font-size: 2rem; } .basicCal-table .calMonth .calToday { position: absolute; right: 0; top: 50%; font-weight: 500; padding: 0.7rem 1.2rem; border-radius: 0.5rem; transform: translateY(-50%); } .basicCal-table .weekLine th { padding: 1rem 0; border: 1px solid #dedede; } .basicCal-table td { border: 1px solid #dedede; vertical-align: top; position: relative; } .basicCal-table td > .inner { height: 100%; min-height: 85px; display: block; position: relative; padding: 1rem; } .basicCal-table td > .inner em { display: block; position: relative; z-index: 1; font-weight: 500; margin-bottom: 1rem; } .basicCal-table td > .inner .popCal-btn { display: block; padding: 0.2rem 1rem; background-color: var(--basic-color); color: #fff; border-radius: 0.3rem; font-size: 1.4rem; } .basicCal-table td > .inner .popCal-btn:hover { background-color: var(--basic-color-deep); } .basicCal-table td > .inner .popCal-btn ~ .popCal-btn { margin-top: 0.5rem } .basicCal-table td > .inner .selectCal-btn { display: block; position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; font-size: 0; text-indent: -9999px; } .basicCal-table td.today .inner { background-color: #e0eff4; } .basicCal-table td.select .inner { background-color: #fffaca; } .w_sat span, .w_sat em { color: #5088d1; } .w_sun span, .w_sun em { color: #d43151; } .popCal-wrap .white-popup-block > h3 { font-size: 2.4rem; } .popCal-wrap .white-popup-block > p { color: var(--basic-color); padding: 1rem 0 2rem; border-bottom: 1px solid #dedede; margin-bottom: 2rem; } /*-- basicCal end --*/