@import url('https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/static/pretendard.css');

body,div,h1,h2,h3,h4,h5,th,td,input,p,select,button,ul,li,textarea{font-family: 'Pretendard'}

:root {
    --maincolor : #e00a54;
}

input {border: none;}
input:focus {outline: none;}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Firefox  */
input[type='number'] {
    -moz-appearance: textfield;
}

/* header */
header .logo {height: 70px;line-height: 70px;}
header .inner {margin: 0 auto;width: 1240px;}

.container {position: relative; margin: 0 auto; width: 1080px; min-width: 0px; height: 100%;}

.logo {position: relative; width: 100%; height: 70px; line-height: 70px; background-color: #fff; z-index: 2;}

.sec_title {font-size: 46px; font-weight: 900; text-align: center;}
.font_main {color: #e00a54;}


.main {position: relative; width: 100%; height: auto;}

/* 하단배너 */
.linebanner {position: fixed; bottom: 0; left: 0; width: 100%; height: 100px; z-index: 2;}
.linebanner .l_bg {width: 47.5%; height: 100px; float: left; background-color: #1039c9;}

.linebanner .r_bg {width: 52.5%; height: 100px; float: left; background-color: #06279a;}

.linebanner .container .diagonal_line {position: absolute; top: 0%; left: 42%;}

.linebanner .container .content.l_font {display: flex; float: left; margin-top: -139px; width: 41%; color: #fff; font-size: 28px;}
.linebanner .container .content.l_font p {padding: 55px 0 0 50px; line-height: 34px; color: #fff; z-index: 2;}
.linebanner .container .content.l_font p span {color: #fff661; font-weight: 700;}

.linebanner .content.r_font {display: flex; float: right; margin-top: -80px; width: 59%;}
.linebanner .content.r_font .txt_box {padding-left: 147px;}
.linebanner .content.r_font .txt_box input[type='text'], .linebanner .content.r_font .txt_box input[type='number'] {height: 40px; padding: 0 16px; font-size: 18px; border-radius: 5px; letter-spacing: -0.2px; box-sizing: border-box;}
.linebanner .content.r_font .txt_box .name {margin-right: 7px; width: 109px;}
.linebanner .content.r_font .txt_box .phone {width: 227px;}
.linebanner .content.r_font .txt_box p {padding: 6px 2px 0 0; text-align: right; color: #fff;}
.linebanner .content.r_font .txt_box p a {color: #fff; text-decoration: underline;}
.linebanner .content.r_font .txt_box p a:hover {opacity: 0.8;}

.linebanner .content.r_font button {margin-left: 10px; width: 134px; height: 62px; font-size: 26px; font-weight: 700; background-color: #fff661; color: #06279a; border-radius: 5px;}
.linebanner .content.r_font button:hover {background-color: #ffd861;}


/* 네비게이션 */
.quick_nav {
    overflow: visible;
    white-space: nowrap; opacity: 0; position: fixed;  top: 50%; left: 50%; transform: translate(570px, -50%); width: 220px; /* height: 247px; */ padding: 4px 20px; border: 1px solid #b9b9b9; border-radius: 10px; font-weight: 600; background-color: rgba(255,255,255,0.4); z-index: 3; box-sizing: border-box; transition: all 0.5s ease; }
.fix{opacity: 1;}

.quick_nav li {width: 100%; padding: 17px 0; font-size: 20px; color: #b4b4b4; border-bottom: 1px dashed #b9b9b9; text-align: center; cursor: pointer;}
.quick_nav li:last-child {border: none;}
.quick_nav li.on, .quick_nav li:hover {color: var(--maincolor);}

/* main_visual */
.main_visual {width: 100%; height: 530px; background-color: #f4f4f4; overflow: hidden;}

.main_visual .title {padding-top: 190px;}
.main_visual .cw_logo {position: absolute; top: 30px; right: 0;}
.main_visual .main_img {position: absolute; right: -100px; bottom: -70px;}

.main_visual .item {position: absolute;}
.main_visual .item.one {top: 0; left: -300px; animation: doong1 4s infinite;}
.main_visual .item.two {top: 0; right: -600px;animation: doong2 4s infinite; }
.main_visual .item.three {bottom: -40px; left: -90px; animation: doong3 3s infinite;}

.main_visual .item.card1 {bottom: -26px; right: 290px; background-color: none; animation: card-doong 2s 1;}
.main_visual .item.card2 {bottom: 60px; right: -130px; animation: card-doong2 2s 0.3s ease-in-out 1;}

@keyframes doong1 {
    0%{top: -10px;}
    50%{top: 0; transform: scale(1.07);}
    100%{top: -10px;}
}

@keyframes doong2 {
    0%{top: 0px;}
    50%{top: -20px;}
    100%{top: 0px;}
}

@keyframes doong3 {
    0%{bottom: -50px;}
    50%{bottom: -40px;}
    100%{bottom: -50px;}
}

@keyframes card-doong {
    0%{ transform: scale(0.7) rotate(5deg);}
    100%{ transform: scale(1) rotate(0deg)}
}

@keyframes card-doong2 {
    0%{transform: scale(0.8) rotate(-10deg);}
    100%{transform: scale(1) rotate(0deg);}
}

/* section1 */
.white_box {position: relative; width: 100%; height: 100px; background-color: #fff; z-index: 2;}

.section1 {margin: 60px 0 110px;}
.section1 .title {position: relative; margin: 0 auto -30px; width: 360px; height: 60px; line-height: 60px; font-size: 28px; color: #fff; border-radius: 30px; text-align: center; z-index: 2;}
.section1 .article:nth-child(1) .title {background-color: var(--maincolor);}
.section1 .article:nth-child(2) {margin: 40px 0 70px;}
.section1 .article:nth-child(2) .title {background-color: #1039c9;}
.section1 .article .title span {font-weight: 700;}

.section1 .content {width: 100%; padding: 70px 80px 40px 80px; font-size: 22px; line-height: 30px; background-color: #f9f9f9; border-radius: 10px; box-sizing: border-box;}

.section1 .txt_area {font-size: 22px; font-weight: 600; text-align: center;}
.section1 .txt_area span {font-size: 16px;}
.section1 .txt_highlight {padding-top: 10px; font-size: 40px; color: var(--maincolor); font-weight: 800;}

/* section2 */
.section2 {width: 100%; padding: 110px 0; background-color: #fff7fa;}

.section2 .sec_title {padding-bottom: 50px; text-align: center;}

.section2 .box {border-radius: 10px; background-color: #fff; -webkit-box-shadow: 4px 5px 18px -4px rgba(145,145,145,0.3); box-shadow: 4px 5px 18px -4px rgba(145,145,145,0.3); box-sizing: border-box;}

.section2 .box_wrap {display: flex; justify-content: space-between; padding-bottom: 100px;}
.section2 .box_wrap .box {width: 340px; height: 470px; padding: 20px 20px 0 20px;}
.section2 .box_wrap .box p {padding: 40px 0; font-size: 28px; font-weight: 700; text-align: center;}
.section2 .box_wrap .box:last-child p {padding: 58px 0;}

.section2 .point_box {width: 100%; padding: 90px 74px; }
.section2 .point_box .point_wrap {margin-bottom: 60px; padding-bottom: 40px; border-bottom: 1px solid #d3d3d3;}
.section2 .point_box .point_wrap:last-child {margin: 0; padding: 0; border: none;}
.section2 .point_box .point_wrap .point {margin: 0 auto 20px; width: 140px; height: 42px; line-height: 42px; color: #fff; font-size: 22px; font-weight: 600; text-align: center; border-radius: 21px; background-color: var(--maincolor);}

.section2 .point_box .title {padding-bottom: 50px; font-size: 42px; font-weight: 800; text-align: center;}

.section2 .point_box .caption {padding-top: 8px; font-size: 16px; text-align: right; color: #787878;}

.section2 .point_box .txt {padding-top: 40px; font-size: 30px; text-align: center; font-weight: 500;}
.section2 .point_box .txt span {font-weight: 800;}

.section2 .point_box .content {display: flex;}
.section2 .point_box .content .point_img {margin-right: 30px;}

.section2 .point_box .content table {width: 100%; margin-top: 160px;}
.section2 .point_box .content table tr {border-top: 1px solid #dedede;}
.section2 .point_box .content table tr:last-child {border-bottom: 1px solid #dedede;}
.section2 .point_box .content table th, .section2 .point_box .content table td {padding: 16px 0; font-size: 22px; text-align: center; font-weight: 600; }
.section2 .point_box .content table th {font-weight: 700; background-color: #f9f9f9;}
.section2 .point_box .content table td.font_main {font-weight: 700;}
.section2 .point_box .content table td p {font-size: 14px; color: #686868;}

.section2 .point_box .content .txt {font-size: 24px; line-height: 32px;}

.section3-1 {width: 100%; padding: 100px 0 100px; background: url('/assets/okems_3/landing/tj_unit/img/sec3-1_bg.png') no-repeat right / cover;}
.section3-1 .product_list {display: flex; flex-wrap: wrap; justify-content: space-between; padding-top: 40px;}

.section3-1 .product_box {position: relative; margin-bottom: 20px; width: 340px; height: 440px; border: 2px solid #b0b0b0; background-color: #fff; border-radius: 10px; -webkit-box-shadow: 4px 5px 18px -4px rgba(145,145,145,0.5); box-shadow: 4px 5px 18px -4px rgba(145,145,145,0.5);}
.section3-1 .product_box .title {padding: 24px 10px 0; font-size: 30px; text-align: center; font-weight: 700;}
.section3-1 .product_box .title span {font-size: 24px; font-weight: 500;}

.section3-1 .product_box .product_img {padding: 20px 0 0 14px; text-align: center;}
.section3-1 .product_box:nth-child(1) {margin-top: 70px;}
.section3-1 .product_box:nth-child(3) {margin-top: 40px;}
.section3-1 .product_box:nth-child(3) .product_img {padding: 14px 0 0 14px;}
.section3-1 .product_box:nth-child(4) {margin-top: 4px;}
.section3-1 .product_box:nth-child(4) .product_img {padding: 40px 0 0 4px;}
.section3-1 .product_box:nth-child(5) {margin-top: -106px;}
.section3-1 .product_box:nth-child(6) {margin-top: -28px;}

.section3-1 .product_box.short {height: 400px;}

.section3-1 .product_box.best {border-color: #4161b7; background-color: #f0f8ff;}

.section3-1 .product_box.recommend {border-color: var(--maincolor); background-color: #fff4f9;}
.section3-1 .product_box.best .price, .section3-1 .product_box.recommend .price {background-color: #fff;}

.section3-1 .product_box .badge {position: absolute; top: -6px; left: 40px;}

.section3-1 .product_box .price {position: absolute; bottom: 0; left: 0; width: 100%; height: 64px; line-height: 64px; font-size: 32px; font-weight: 700; background-color: #f4f4f4; text-align: center; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;}

.section3-1 p {padding-top: 10px; font-size: 18px; text-align: right; color: #525252;}


.section3-2 {padding: 130px 0; background: url('/assets/okems_3/landing/tj_unit/img/slide_bg.png') no-repeat center; background-color: var(--maincolor);}
.section3-2 .sec_title {padding-bottom: 40px; color: #fff;}

.section3-2 .swiper-slide {position: relative;}
.swiper-button-prev, .swiper-button-next {width: 60px !important; height: 60px !important; background: url('/assets/okems_3/landing/tj_unit/img/slide_arrow.png') no-repeat top;}
.swiper-button-next {transform: rotate(180deg); !important;}
.swiper-button-prev:hover, .swiper-button-next:hover {background-position: bottom;}
.swiper-button-prev:after, .swiper-button-next:after {display: none;}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal {bottom: 0px !important;}
.swiper-pagination-bullet {width: 14px !important; height: 14px !important; background-color: #fff !important; }
.swiper-pagination-bullet-active {width: 50px !important; border-radius: 7px !important;}

.section3-2 .swiper-slide .slide_content {position: relative; margin: 0 auto 30px; width: 830px;}
.section3-2 .swiper-slide .slide_content img {width: 100%;}
.section3-2 .swiper-slide .name {position: absolute; bottom: 0; left: 0; width: 100%; height: 70px; line-height: 70px; font-size: 30px; font-weight: 700; background-color: rgba(255,255,255,0.7); text-align: center;}

.section4 {padding: 140px 0;}
.section4 .sec_title {padding-bottom: 70px;}

.section4 .data_list {display: flex; flex-wrap: wrap; justify-content: space-between;}
.section4 .data_list .file {position: relative;  width: 525px; height: 100px; padding: 0 40px; margin-bottom: 30px; line-height: 100px; border-radius: 20px; font-size: 26px; font-weight: 500; background-color: #f3f3f3; box-sizing: border-box; cursor: pointer; font-weight: 700;}
.section4 .data_list .file::before {content: ''; display: inline-block; padding-right: 14px;}
.section4 .data_list .file:nth-child(1)::before {width: 33px; height: 24px; background: url('/assets/okems_3/landing/tj_unit/img/data_img1.png') no-repeat; vertical-align: -2px;}
.section4 .data_list .file:nth-child(2)::before {width: 38px; height: 16px; background: url('/assets/okems_3/landing/tj_unit/img/data_img2.png') no-repeat; vertical-align: 1px;}
.section4 .data_list .file:nth-child(3)::before {width: 38px; height: 24px; background: url('/assets/okems_3/landing/tj_unit/img/data_img3.png') no-repeat; vertical-align: -3px;}
.section4 .data_list .file:nth-child(4)::before {width: 36px; height: 27px; background: url('/assets/okems_3/landing/tj_unit/img/data_img4.png') no-repeat; vertical-align: -3px;}
.section4 .data_list .file:after {content: ''; position: absolute; top: 50%; transform: translateY(-50%); right: 40px; width: 25px; height: 15px; background: url('/assets/okems_3/landing/tj_unit/img/sec4_arrow.png') no-repeat;}
.section4 .data_list .file:hover {background-color: #ebebeb;}
.section4 .data_list .file span {font-size: 20px;}

.section5 {width: 100%; padding: 120px 0; color: #fff; background: url('/assets/okems_3/landing/tj_unit/img/sec5_bg.png') no-repeat center / cover; text-align: center; box-sizing: border-box;}
.section5 p {padding-top: 20px; font-size: 50px; color: #fff;}
.section5 p span {font-weight: 700;}