@charset "euc-kr";

/* 공통 */
html,body { font-family: 'SUIT', sans-serif; }
ul { margin: 0; padding: 0; }
li { list-style: none; }
a { text-decoration: none; color: inherit; display: block; }
table { width: 100%; }
body { background-color: var(--darkblue); color: #fff; }
.mt20 { margin-top: 20px; }
.t_red { color: #f16b6b; }
.t_blue { color: #6ba7f1; }

:root { 
   --darkblue: #152332;
   --darkblue02: #192c42;
   --skyblue: #4b94fa;
   --blue: #1257b9;
   --blue02: #6688ad;
   --lightblue: #2f4156;
   --gray: #c5c5c5;
}

@media screen and (max-width: 520px) {

.header { width: 100%; padding: 0 20px; height: 50px; display: flex; align-items: center; justify-content: space-between; position: relative; }
.header .nt_btn.turn { animation-name: turn; animation-duration: 0.3s; animation-timing-function: ease-in-out; animation-iteration-count: 1; animation-direction: alternate; }
@keyframes turn { 50% { transform: rotateY(90deg); } 100% { transform: rotateY(0); } }

.container .visual { padding: 20px 40px 0px 40px; }
.container .visual h1 { display: block; }
.container .visual i { display: inline-block; font-size: 36px; line-height: 1.3em; letter-spacing: -0.09em; margin-top: 20px; }
.container .visual i span { display: inline-block; font-weight: 800; }
.container .visual i span.wave { animation-name: wave; animation-duration: 1s; animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1); animation-iteration-count: 1; animation-direction: alternate; }
.container .visual i span.wave:nth-child(1) { animation-delay: 0s; }
.container .visual i span.wave:nth-child(2) { animation-delay: 0.1s; }
.container .visual i span.wave:nth-child(3) { animation-delay: 0.2s; }
.container .visual i span.wave:nth-child(4) { animation-delay: 0.3s; }
.container .visual i span.wave:nth-child(5) { animation-delay: 0.4s; }
.container .visual i span.wave:nth-child(6) { animation-delay: 0.5s; }
.container .visual i span.wave:nth-child(7) { animation-delay: 0.6s; }
.container .visual i span.wave:nth-child(9) { animation-delay: 1.5s; }
.container .visual i span.wave:nth-child(10) { animation-delay: 1.6s; }
.container .visual i span.wave:nth-child(11) { animation-delay: 1.7s; }
.container .visual i span.wave:nth-child(12) { animation-delay: 1.8s; }
.container .visual i span.wave:nth-child(13) { animation-delay: 1.9s; }
.container .visual i span.wave:nth-child(14) { animation-delay: 2s; }
.container .visual i span.wave:nth-child(15) { animation-delay: 2.1s; }
.container .visual i span.wave:nth-child(16) { animation-delay: 2.2s; }
.container .visual i span:nth-child(9) { color: var(--blue02); }
.container .visual i span:nth-child(10) { color: var(--blue02); }
.container .visual i span:nth-child(11) { color: var(--blue02); }
.container .visual i span:nth-child(12) { color: var(--blue02); }
.container .visual i span:nth-child(13) { color: var(--blue02); }
.container .visual i span:nth-child(14) { color: var(--blue02); }
.container .visual i span:nth-child(15) { color: var(--blue02); }
.container .visual i span:nth-child(16) { color: var(--blue02); }
@keyframes wave { 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } }
.container .swiper { padding: 50px 50px 50px 40px; }
.container .swiper .swiper-wrapper .swiper-slide { border-radius: 20px; box-sizing: border-box; overflow: hidden; box-shadow: 6px 6px 20px 10px rgba(0,0,0,0.3); }
.container .swiper .swiper-wrapper .swiper-slide a { height: 0; padding-top: 100%; position: relative; }
.container .swiper .swiper-wrapper .swiper-slide:nth-child(1) { background-color: #08a38a; }
.container .swiper .swiper-wrapper .swiper-slide:nth-child(2) { background-color: #00afc9; }
.container .swiper .swiper-wrapper .swiper-slide:nth-child(3) { background-color: #2473e9; }
.container .swiper .swiper-wrapper .swiper-slide:nth-child(4) { background-color: #f87757; }
/* .container .swiper .swiper-wrapper .swiper-slide:nth-child(5) { background-color: #ff9f4f; } */
.container .swiper .swiper-wrapper .swiper-slide .slide_box { position: absolute; left:0; top:0; width: 100%; height: 100%; padding: 30px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; }
.container .swiper .swiper-wrapper .swiper-slide .slide_box i { position: relative; z-index: 1; }
.container .swiper .swiper-wrapper .swiper-slide .slide_box i h1 { display: flex; gap: 5px; align-items: center; font-size: 7vw; margin-bottom: 20px; font-weight: 600; }
.container .swiper .swiper-wrapper .swiper-slide .slide_box i h1 img { width: 16%; }
.container .swiper .swiper-wrapper .swiper-slide .slide_box i span { font-size: 4vw; line-height: 1.6em; }
.container .swiper .swiper-wrapper .swiper-slide .slide_box p { display: flex; justify-content: flex-end; }
.container .swiper .swiper-wrapper .swiper-slide .slide_box p span { display: inline-block; font-size: 3.4vw; padding: 10px 20px; border-radius: 100px; background-color: rgba(255,255,255,0.3); backdrop-filter: blur(20px); }
.container .swiper .swiper-wrapper .swiper-slide .slide_box .slide_bg { position: absolute; width: 100%; height: 100%; top: -40%; left: -40%; }
.container .swiper .swiper-wrapper .swiper-slide .slide_box .slide_bg span { width: 90%; height: 90%; border-radius: 100%; content: ''; display: block; position: absolute; }
.container .swiper .swiper-wrapper .swiper-slide .slide_box .slide_bg span:nth-child(1) { background-color: rgba(255,255,255,0.1); }
.container .swiper .swiper-wrapper .swiper-slide .slide_box .slide_bg span:nth-child(2) { background-color: rgba(255,255,255,0.11); transform: scale(0.8); }
.container .swiper .swiper-wrapper .swiper-slide .slide_box .slide_bg span:nth-child(3) { background-color: rgba(255,255,255,0.12); transform: scale(0.6); }
.container .swiper .swiper-wrapper .swiper-slide .slide_box .slide_bg span:nth-child(4) { background-color: rgba(255, 255, 255, 0.13); transform: scale(0.4); }
.container .info { padding: 0 40px; margin-bottom: 60px; }
.container .info > h1 { margin-bottom: 20px; }
.container .info > h2 { font-size: 32px; line-height: 1.3em; font-weight: 800; }
.container .info > h2.center { text-align: center; }
.container .info > h3 { text-align: center; line-height: 1.6em; font-size: 15px; margin-top: 10px; color: var(--blue02); text-decoration: underline; }
.container .info > a { display: inline-block; width: 100%; text-align: center; padding: 20px 0; border-radius: 100px; background-color: var(--blue); margin-top: 30px; }
.container .info i p { display: flex; align-items: center; gap: 10px; margin-top: 30px; font-size: 20px; }
.container .info i span { display: block; background-color: var(--lightblue); margin-top: 20px; padding: 20px; border-radius: 10px; line-height: 1.6em; font-size: 14px; letter-spacing: -0.04em; }
.container .info ul { display: flex; flex-wrap: wrap; gap: 40px 20px; margin-top: 30px; }
.container .info ul li { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; width: calc(50% - 10px); }
.container .info ul li h1 { line-height: 1.3em; letter-spacing: -0.04em; }
.container .info ul li span { font-size: 12px; line-height: 1.6em; letter-spacing: -0.04em; }

.container .notice { padding: 0 40px; margin-bottom: 60px; }
.container .notice h2 { font-size: 28px; font-weight: 600; margin-top: 20px; letter-spacing: -0.02em; }
.container .notice ul { margin-top: 30px; }
.container .notice ul li { font-size: 13px; line-height: 1.6em; border-bottom: 1px dashed var(--lightblue); padding: 10px 0; }
.container .notice ul li a { display: flex; flex-direction: column; gap: 10px; }

.wrap { padding: 0 40px; margin-top: 40px; }
.wrap .title h1 { font-size: 32px; line-height: 1.3em; font-weight: 800; text-align: center; }
.wrap .title h2 { text-align: center; line-height: 1.6em; font-size: 15px; margin-top: 10px; color: var(--blue02); text-decoration: underline; }
.wrap .product { width: 100%; margin-top: 40px; padding-bottom: 40px; margin-bottom: 60px; overflow: hidden; }
.wrap .product .swiper-wrapper .swiper-slide { max-width: 310px; background-color: var(--darkblue02); border: 2px solid var(--gray); padding: 30px; border-radius: 20px; overflow: hidden; box-shadow: 0px 1px 4px rgba(0,0,0,0.3); }
.wrap .product .swiper-wrapper .swiper-slide span { display: block; margin-bottom: 10px; line-height: 1.6em; letter-spacing: -0.02em; }
.wrap .product .swiper-wrapper .swiper-slide h1 { font-size: 30px; font-weight: 600; color: var(--skyblue); line-height: 1.3em; }
.wrap .product .swiper-wrapper .swiper-slide h2 { display: flex; align-items: flex-end; gap: 5px; font-size: 32px; font-weight: 800; margin-top: 10px; margin-bottom: 10px; }
.wrap .product .swiper-wrapper .swiper-slide h2 b { font-size: 14px; color: var(--gray); font-weight: 400; padding-bottom: 3px; }
.wrap .product .swiper-wrapper .swiper-slide h3 { display: flex; justify-content: center; }
.wrap .product .swiper-wrapper .swiper-slide dl { display: flex; flex-direction: column; gap: 15px; margin-top: 30px; }
.wrap .product .swiper-wrapper .swiper-slide dl dd { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.wrap .product .swiper-wrapper .swiper-slide dl dd::before { width: 4px; height: 4px; border-radius: 100%; background-color: var(--gray); content: ''; }
.wrap .product .swiper-wrapper .swiper-slide dl p { display: flex; flex-wrap: wrap; gap: 10px; }
.wrap .product .swiper-wrapper .swiper-slide dl p span { display: flex; align-items: center; font-size: 14px; gap: 2px; }

.wrap .support { margin-bottom: 60px; }
.wrap .support ul { display: flex; flex-wrap: wrap; gap: 40px 20px; margin-top: 30px; }
.wrap .support ul li { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; width: calc(50% - 10px); }
.wrap .support ul li h1 { line-height: 1.3em; letter-spacing: -0.04em; }
.wrap .support ul li span { font-size: 12px; line-height: 1.6em; letter-spacing: -0.04em; }

.wrap .notice_view { margin-bottom: 60px; }
.wrap .notice_view .nt_tit span { display: block; color: var(--blue02); font-size: 14px; margin-bottom: 10px; }
.wrap .notice_view .nt_tit h1 { line-height: 1.3em; }
.wrap .notice_view .nt_tit { border-bottom: 1px solid #ccc; padding-bottom: 10px; }
.wrap .notice_view .nt_txt { line-height: 1.6em; border-bottom: 1px solid #ccc; padding: 20px 0; font-size: 14px; }

.wrap .domain { margin-top: 40px; margin-bottom: 60px; }
.wrap .domain > span { display: block; }
.wrap .domain .domain_box { display: flex; align-items: center; background-color: #fff; margin-top: 10px; height: 40px; }
.wrap .domain .domain_box span { color: #111; font-weight: 20px; font-weight: 700; padding-left: 10px; }
.wrap .domain .domain_box input[type='text'] { background: none; border: none; width: 100%; height: 40px; font-size: 16px; box-sizing: border-box; outline: none; }
.wrap .domain .domain_box button { width: 70px; height: 40px; background-color: var(--skyblue); color: #fff; border: none; font-size: 14px; }
.wrap .domain .domain_list { margin-top: 40px; }
.wrap .domain .domain_list th { height: 40px; font-size: 15px; font-weight: 600; border-bottom: 1px solid var(--lightblue); }
.wrap .domain .domain_list td { text-align: center; font-size: 14px; height: 40px; border-bottom: 1px dashed var(--lightblue); }

.inquiry { background-color: var(--skyblue); padding: 30px; display: flex; align-items: center; justify-content: space-between; }
.inquiry h2 { font-size: 30px; font-weight: bold; margin: 15px 0 10px 0; }
.inquiry span a { display: flex; align-items: center; justify-content: center; padding: 10px; border-radius: 100%; background-color: #fff; }

.info_bottom { text-align: center; font-size: 12px; color: var(--blue02); display: flex; flex-direction: column; align-items: center; gap: 20px; padding-bottom: 40px; }
.info_bottom a { display: flex; align-items: center; justify-content: center; gap: 5px;  width: 120px; height: 40px; border-radius: 50px; background-color: #0f1924; color: #fff; }

.footer { padding: 30px; background-color: var(--darkblue02); }
.footer .ci { font-size: 12px; color: var(--gray); display: flex; flex-wrap: wrap; gap: 10px; }
.footer .ci .copy { font-size: 10px; margin-top: 10px; }
.footer a { display: inline-block; }

}