@charset "utf-8";
/* CSS Document */

/*bootstrap styles*/
@import url("bootstrap.css");
/*bootstrap select*/
@import url("bootstrap-select5.css");
/*bootstrap slider*/
@import url("bootstrap-slider.min.css");
/*Reset*/
/* @import url("reset.css"); */
/*AOS*/
@import url("aos.css");
/*Swiper*/
@import url("swiper.css");


@font-face {
	font-family: 'Pretendard';
	font-weight: 900;
	font-display: swap;
	src: local('Pretendard Black'), url('../fonts/pretendard/woff2/Pretendard-Black.woff2') format('woff2'), url('../fonts/pretendard/woff/Pretendard-Black.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 800;
	font-display: swap;
	src: local('Pretendard ExtraBold'), url('../fonts/pretendard/woff2/Pretendard-ExtraBold.woff2') format('woff2'), url('../fonts/pretendard/woff/Pretendard-ExtraBold.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 700;
	font-display: swap;
	src: local('Pretendard Bold'), url('../fonts/pretendard/woff2/Pretendard-Bold.woff2') format('woff2'), url('../fonts/pretendard/woff/Pretendard-Bold.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 600;
	font-display: swap;
	src: local('Pretendard SemiBold'), url('../fonts/pretendard/woff2/Pretendard-SemiBold.woff2') format('woff2'), url('../fonts/pretendard/woff/Pretendard-SemiBold.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	font-display: swap;
	src: local('Pretendard Medium'), url('../fonts/pretendard/woff2/Pretendard-Medium.woff2') format('woff2'), url('../fonts/pretendard/woff/Pretendard-Medium.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	font-display: swap;
	src: local('Pretendard Regular'), url('../fonts/pretendard/woff2/Pretendard-Regular.woff2') format('woff2'), url('../fonts/pretendard/woff/Pretendard-Regular.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 300;
	font-display: swap;
	src: local('Pretendard Light'), url('../fonts/pretendard/woff2/Pretendard-Light.woff2') format('woff2'), url('../fonts/pretendard/woff/Pretendard-Light.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 200;
	font-display: swap;
	src: local('Pretendard ExtraLight'), url('../fonts/pretendard/woff2/Pretendard-ExtraLight.woff2') format('woff2'), url('../fonts/pretendard/woff/Pretendard-ExtraLight.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 100;
	font-display: swap;
	src: local('Pretendard Thin'), url('../fonts/pretendard/woff2/Pretendard-Thin.woff2') format('woff2'), url('../fonts/pretendard/woff/Pretendard-Thin.woff') format('woff');
}

@font-face {
    font-family: 'jalnan';
    src: url('../fonts/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


:root{
	--main-color: #3250F6;
	--main-title: #2f3d8d;
    --btn-ani-2-color: #68686a;
    --bs-blue2: #0f7cff;
    --bs-blue3: #4070b3;
    --bs-blue4: #4e8fff;
    --bs-blue5: #b0d2fd;
    --bs-blue6: #6f84f9;
    --sec-color1: #f7f9fe;
    --sec-color2: #353538;
	--area-wide-width: 1740px;
	--area-box-width: 1630px;
	--area-width: 1520px;
	--full-height: 100vh;
	--transition-custom: all 0.4s ease-in-out;
	--transition-custom2: all 0.8s ease-in-out;
}

body,
header{
    min-width: 375px;
}

body{
    height: 100%;
    color: var(--bs-gray-800);
    line-height: 1.4;
    letter-spacing: -0.5px;
    word-break: keep-all;
}

*{
    font-family: 'Pretendard', Arial, '돋움', Dotum, sans-serif;
}

a{
    color: var(--bs-gray-800);
    text-decoration: none;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
form,
fieldset,
p,
button { 
	margin:0;
	padding:0
}

p, ul, ol, li, dl, dt, dd, form {
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	border:0px;
	margin:0px;
	padding:0px;
}

ul, ol{
	list-style-type:none;
	margin:0;
	padding:0;	
}

label, th img, td img {
	vertical-align:middle;
}

em{
    font-style: normal;
}

img {
    max-width: 100%;
    vertical-align: middle;
    object-fit: cover;
	border:0;
	margin:0;
	padding:0;
	vertical-align:middle;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

button{
    box-shadow: none !important;
    outline: none !important;
}

.btn{
    position: relative;
}

.btn-ani-1{
    width: 360px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: var(--main-color);
    line-height: 70px;
}
.btn-ani-1 span{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 0 30px;
    font-size: 24px;
    font-weight: 600;
    color: var(--bs-white);
}
.btn-ani-1 span em{
    width: 24px;
    height: 24px;
    position: relative;
    overflow: hidden;
}
.btn-ani-1 span em img{
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.3s ease;
}
.btn-ani-1:before,
.btn-ani-1:after{
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    background: var(--bs-blue2);
    transition: all 0.3s ease;
}
.btn-ani-1:before{
    height: 0%;
    width: 2px;
}
.btn-ani-1:after{
    width: 0%;
    height: 2px;
}
.btn-ani-1:hover,
.btn-ani-1:active{
    background: var(--bs-white) !important;
    box-shadow: none;
}
.btn-ani-1:hover:before{
    height: 100%;
}
.btn-ani-1:hover:after{
    width: 100%;
}
.btn-ani-1 span:hover{
    color: var(--main-title);
}
.btn-ani-1 span:before,
.btn-ani-1 span:after{
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    background: var(--bs-blue2);
    transition: all 0.3s ease;
}
.btn-ani-1 span:before{
    width: 2px;
    height: 0%;
}
.btn-ani-1 span:after{
    width: 0%;
    height: 2px;
}
.btn-ani-1 span:hover:before{
    height: 100%;
}
.btn-ani-1 span:hover:after{
    width: 100%;
}
.btn-ani-1:hover img{
    top: -24px;
}

.btn-ani-2{
    width: 360px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: var(--btn-ani-2-color);
    line-height: 70px;
}
.btn-ani-2 span{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0 30px;
    font-size: 24px;
    font-weight: 600;
    color: var(--bs-white);
    transition: all 0.25s ease;
}
.btn-ani-2 span em{
    width: 24px;
    height: 24px;
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translate(0, -50%);
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
}
.btn-ani-2 span em img{
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.3s ease;
}
.btn-ani-2:before,
.btn-ani-2:after{
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    background: var(--bs-blue4);
    transition: all 0.3s ease;
}
.btn-ani-2:before{
    height: 0%;
    width: 2px;
}
.btn-ani-2:after{
    width: 0%;
    height: 2px;
}
.btn-ani-2:hover,
.btn-ani-2:active{
    background: var(--bs-white) !important;
    box-shadow: none;
}
.btn-ani-2:hover:before{
    height: 100%;
}
.btn-ani-2:hover:after{
    width: 100%;
}
.btn-ani-2 span:hover{
    color: var(--main-title);
}
.btn-ani-2 span:before,
.btn-ani-2 span:after{
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    background: var(--bs-blue4);
    transition: all 0.3s ease;
}
.btn-ani-2 span:before{
    width: 2px;
    height: 0%;
}
.btn-ani-2 span:after{
    width: 0%;
    height: 2px;
}
.btn-ani-2 span:hover:before{
    height: 100%;
}
.btn-ani-2 span:hover:after{
    width: 100%;
}
/* .btn-ani-2:hover span{
    justify-content: start;
} */
.btn-ani-2:hover span em{
    margin-left: auto;
    visibility: visible;
    opacity: 1;
}
.btn-ani-2:hover img{
    top: -24px;
}

.btn-ani-3{
    width: 360px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: var(--bs-white);
    line-height: 70px;
}
.btn-ani-3 span{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 0 30px;
    font-size: 24px;
    font-weight: 600;
    color: var(--main-title);
}
.btn-ani-3 span em{
    width: 24px;
    height: 24px;
    position: relative;
    overflow: hidden;
}
.btn-ani-3 span em img{
    position: absolute;
    top: -24px;
    left: 0;
    transition: all 0.3s ease;
}
.btn-ani-3:before,
.btn-ani-3:after{
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    background: var(--bs-blue5);
    transition: all 0.3s ease;
}
.btn-ani-3:before{
    height: 0%;
    width: 2px;
}
.btn-ani-3:after{
    width: 0%;
    height: 2px;
}
.btn-ani-3:hover,
.btn-ani-3:active{
    background: var(--bs-blue6) !important;
    box-shadow: none;
}
.btn-ani-3:hover:before{
    height: 100%;
}
.btn-ani-3:hover:after{
    width: 100%;
}
.btn-ani-3 span:hover{
    color: var(--bs-white);
}
.btn-ani-3 span:before,
.btn-ani-3 span:after{
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    background: var(--bs-blue5);
    transition: all 0.3s ease;
}
.btn-ani-3 span:before{
    width: 2px;
    height: 0%;
}
.btn-ani-3 span:after{
    width: 0%;
    height: 2px;
}
.btn-ani-3 span:hover:before{
    height: 100%;
}
.btn-ani-3 span:hover:after{
    width: 100%;
}
.btn-ani-3:hover img{
    top: 0;
}





/* Radiobox */
.radio{
	margin: 0;
	padding: 7px 5px;
}
.radio,
.radio label{
    cursor: pointer;
}
.radio label{
	display: inline-block;
	position: relative;
	padding-left: 5px;
}
.radio label:before{
	content: "";
	display: inline-block;
	position: absolute;
	width: 17px;
	height: 17px;
	left: 0;
	margin-left: -20px;
	border: 2px solid #ddd;
	border-radius: 50%;
	background-color: #ededed;
	-webkit-transition: border 0.15s ease-in-out;
	-o-transition: border 0.15s ease-in-out;
	transition: border 0.15s ease-in-out;
}
.radio label:after{
	display: inline-block;
	position: absolute;
	content: " ";
	width: 9px;
	height: 9px;
	left: 4px;
	top: 4px;
	margin-left: -20px;
	border-radius: 50%;
	background: var(--main-color);
	-webkit-transform: scale(0, 0);
	-ms-transform: scale(0, 0);
	-o-transform: scale(0, 0);
	transform: scale(0, 0);
	-webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
	-moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
	-o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
	transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
}
.radio input[type="radio"]{
    opacity: 0;
}
.radio input[type="radio"]:checked + label:after{
	-webkit-transform: scale(1, 1);
	-ms-transform: scale(1, 1);
	-o-transform: scale(1, 1);
	transform: scale(1, 1);
}
.radio input[type="radio"]:disabled + label{
	opacity: 0.65;
}
.radio input[type="radio"]:disabled + label:before{
	cursor: not-allowed;
}
.radio.radio-inline{
    margin-top: 0;
}
.radio-primary input[type="radio"] + label:after,
.radio-primary input[type="radio"]:checked + label:after{
	background: var(--main-color);
}
.radio-primary input[type="radio"]:checked + label:before{
	border-color: var(--main-color);
}





.wrapper{
    width: 100%;
    min-width: 320px;
    position: relative;
}



.wrapper header{
    position: relative;
    z-index: 999;
}

.tooltip.show{
    opacity: 1;
}

.tooltip-inner{
    background: #1c96d5;
}

.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before{
    border-left-color: #1c96d5;
}


.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn){
    width: 210px;
}

.bootstrap-select > .dropdown-toggle{
    padding: 6px 12px;
	background: #fff;
    border: 1px solid #d9d9d9;
    outline: none !important;
    border-radius: 0;
    font-size: 14px;
    color: var(--bs-gray-600);
}

.bootstrap-select .dropdown-toggle .filter-option{
    width: calc(100% - 8px);
}

.bootstrap-select .dropdown-toggle .filter-option,
.bootstrap-select .dropdown-menu li a,
.dropdown-menu li a{
    /* height: 20px; */
	position: relative;
    font-size: 14px;
	font-weight: 500;
    color: var(--bs-gray-600);
}

.bootstrap-select .dropdown-toggle:after{
    width: 10px;
    height: 10px;
    margin: 0;
    background: url('../images/dropdown_arrow.png') no-repeat 0 0 / 10px;
    -webkit-transition: all 0.2s ease;
            transition: all 0.2s ease;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    border: none;
}

.bootstrap-select .dropdown-toggle.show:after{
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
}

footer .bootstrap-select .dropdown-toggle:after{
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
}

footer .bootstrap-select .dropdown-toggle.show:after{
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

.bootstrap-select .dropdown-toggle.show{
    border: 1px solid #22a3db !important;
}

.bootstrap-select.open .dropdown-toggle .caret{
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
    background-position-y: -7px;
}

.bootstrap-select .dropdown-toggle .filter-option-inner-inner{
    position: relative;
}

.dropdown-item.active,
.dropdown-item:active{
    background: var(--bs-gray-200);
}

.thumb-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

caption {
    width: 0;
    height:0;
    font-size:0;
    text-indent: -9000px;
    caption-side: top;
    text-align: center;
    overflow: hidden;
}



/* HEADER */
header{
    background: var(--bs-white);
}

.navbar-brand{
    height: 42px;
    padding: 0;
}

.navbar-brand img{
    max-width: 100%;
    max-height: 100%;
}

.navbar-brand .logo-dark{
    display: none;
}

.navbar-collapse{
    justify-content: end;
}

.navbar-nav{
    gap: 20px;
}

.navbar-nav .nav-link{
    font-size: 20px;
    font-weight: 500;
    color: var(--bs-gray-900);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:active{
    color: var(--main-color);
}


#topBtn{
    width: 50px;
    height: 50px;
    visibility: hidden;
    position: fixed;
    right: 5px;
    bottom: 5px;
    font-size: 12px;
    color: var(--bs-white);
    background: var(--bs-blue);
    border: none;
    opacity: 0;
    transition: all 0.25s ease;
    z-index: 99;
}
#topBtn:before{
    content: '';
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url("../images/btn_top_arrow.png") no-repeat 0 0 / 20px;
}

#topBtn.fixed{
    bottom: 200px;
}


.sec{
    padding: 80px 0;
}

.s-tit{
    margin: 0 0 50px;
    text-align: center;
}

.s-tit h2{
    margin: 0 0 15px;
    font-size: 48px;
    font-weight: 800;
    color: var(--main-title);
}

.s-tit p{
    font-size: 24px;
    color: var(--bs-gray-900);
}

.s-tit.fw h2,
.s-tit.fw p{
    color: var(--bs-white);
}

.btnbutton-group{
    gap: 30px;
}

/* SECTION -1 */
.sec-1{
    background: #eee url("../images/mImg_bg.jpg") no-repeat 0 0 / cover;
    overflow: hidden;
}

.sec-1 .container{
    position: relative;
}

.sec-1 .visual-wrap{
    min-height: 500px;
    display: flex;
    justify-content: space-between;
    margin: 0 0 80px;
}

.sec-1 .visual-back{
    position: absolute;
    top: -80px;
    animation-duration: 3s;
}

.sec-1 .visual-txt{
    display: flex;
    margin: auto 0 0;
}

.sec-1 .visual-txt .title-area .mImg-logo{
    width: 404px;
    height: auto;
}

.sec-1 .visual-txt .title-area .txt{
    margin: 46px 0 0;
    font-size: 36px;
    font-weight: 300;
}

.sec-1 .visual-txt .title-area .txt span{
    color: var(--main-color);
}

.sec-1 .visual-img{
    width: 51%;
    position: relative;
}

.sec-1 .visual-img p{
    position: absolute;
    opacity: 0;
}

.sec-1 .visual-img .obj-2{
    /* width: 226px; */
    width: 31%;
    height: auto;
    right: -9%;
    bottom: 20%;
    z-index: 3;
}
.sec-1 .visual-img .obj-3{
    /* width: 214px; */
    width: 29%;
    height: auto;
    right: 15%;
    bottom: -20%;
    z-index: 2;
}
.sec-1 .visual-img .obj-4{
    /* width: 178px; */
    width: 24%;
    height: auto;
    right: -20%;
    bottom: 4%;
    z-index: 1;
}





/* SECTION -2 */
.sec-2{
    padding: 80px 0 60px;
    background: var(--main-color);
}

.sec-2 .container {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
}

.sec-2 .left-section{
    width: 53%;
    /* max-width: 630px; */
    position: relative;
    margin: 0;
}

.sec-2 .left-section .swiper-slide {
    max-width: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: fit-content;
    transition: transform 0.3s ease;
    opacity: 0;
}
.sec-2 .left-section .swiper-slide.swiper-slide-active{
    opacity: 1;
    z-index: 1;
}
.sec-2 .left-section .swiper-slide img{
    width: 100%;
}
.sec-2 .left-section .swiper-slide .active,
.sec-2 .left-section .swiper-slide.fc-1.swiper-slide-active .default,
.sec-2 .left-section .swiper-slide.fc-2.swiper-slide-active .default,
.sec-2 .left-section .swiper-slide.fc-3.swiper-slide-active .default{
    display: none;
}
.sec-2 .left-section .swiper-slide.fc-1.swiper-slide-active .active,
.sec-2 .left-section .swiper-slide.fc-2.swiper-slide-active .active,
.sec-2 .left-section .swiper-slide.fc-3.swiper-slide-active .active{
    display: block;
}
.sec-2 .left-section .dummy {
    pointer-events: none; 
}
.sec-2 .left-section .swiper-slide-prev,
.sec-2 .left-section .swiper-slide-next {
    transform: scale(0.75);
    opacity: 0.5;
}
.sec-2 .left-section .swiper-slide-active {
    transform: scale(1);
    opacity: 1;
}

.sec-2 .right-section{
    width: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sec-2 .right-section .right-swiper .swiper-wrapper{
    width: 100%;
    margin: 0;
    padding: 0;
}
.sec-2 .right-section .right-swiper .swiper-slide{
    display: flex;
    gap: 5%;
    justify-content: center;
}
.sec-2 .right-section .right-swiper .swiper-slide .icon-box{
    padding: 50px;
    background: var(--bs-white);
    border-radius: 50%;
}
.sec-2 .right-section .right-swiper .swiper-slide .icon-box img{
    width: 80px;
    height: auto;
}
.sec-2 .right-section .right-swiper .swiper-slide .txt-box{
    margin: 20px 0 0;
    color: var(--bs-white);
    text-align: center;
}
.sec-2 .right-section .right-swiper .swiper-slide .sub-txt{
    font-size: 18px;
}
.sec-2 .right-section .right-swiper .swiper-slide .title-txt{
    font-size: 20px;
    font-weight: 600;
}

.sec-2 .right-section .title{
    font-size: 48px;
    font-weight: 700;
    color: var(--bs-white);
    text-align: center;
}


/* 커스텀 페이지네이션 */
.sec-2 .right-section .custom-pagination{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1px;
    margin-top: 40px;
}

.sec-2 .right-section .custom-pagination button{
    width: calc((100% - 2px) / 3);
    padding: 16px;
    border: none;
    background: var(--bs-blue6);
    font-size: 18px;
    font-weight: 600;
    color: var(--bs-white);
    transition: background-color 0.3s ease;
}
.sec-2 .right-section .custom-pagination button:first-child{
    border-radius: 10px 0 0 10px;
}
.sec-2 .right-section .custom-pagination button:last-child{
    border-radius: 0 10px 10px 0;
}

.sec-2 .right-section .custom-pagination button.active{
    background: var(--bs-white);
    color: var(--main-title);
}
.sec-2 .right-section .custom-pagination button br{
    display: none;
}

.sec-2 .right-section .swiper{
    width: 100%;
    margin: 40px 0 0;
}

.sec-2 .btnbutton-group{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 100px 0 0;
}

.sec-2 .btnbutton-group .btn-ani-1{
    background-color: var(--bs-blue6);
}
.sec-2 .btnbutton-group .btn-ani-1 span{
    color:var(--bs-white);
}
.sec-2 .btnbutton-group .btn-ani-1:hover span,
.sec-2 .btnbutton-group .btn-ani-1:active span{
    color: var(--main-title);
}
.sec-2 .btnbutton-group .btn-ani-1:before, .sec-2 .btnbutton-group .btn-ani-1:after,
.sec-2 .btnbutton-group .btn-ani-1 span:before, .sec-2 .btnbutton-group .btn-ani-1 span:after{
    background: var(--main-title);
}
.sec-2 .btnbutton-group .btn-ani-1:hover img{
    top: -24px;
}




/* SECTION -3 */
.sec-3{
    position: relative;
    background: var(--sec-color1) url("../images/sec3_bg.png") no-repeat 0 0 / cover;
}

.sec-3 .bg-wrap{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

.sec-3 .button-group{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.sec-3 .pd-wrap{
    display: flex;
    justify-content: center;
    gap: 100px;
}

.sec-3 .pd-wrap li{
    width: calc((100% - 100px) / 3);
    padding: 40px;
    background: var(--bs-white);
    border-radius: 10px;
    box-shadow: 5px 5px 26px 2px rgba(0, 0, 0, 0.03);
}

.sec-3 .pd-wrap .pd{
    text-align: center;
}

.sec-3 .pd-wrap .pd .pd-img{
    width: 160px;
    height: auto;
    margin: 0 auto 40px;
}

.sec-3 .pd-wrap .pd .pd-info .pd-title{
    margin: 0 0 20px;
    font-size: 30px;
    font-weight: 600;
}

.sec-3 .pd-wrap .pd .pd-info .pd-text{
    font-size: 18px;
    font-weight: 500;
}

.sec-3 .btnbutton-group{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin: 100px 0 0;
}



/* SECTION -4 */
.sec-4{
    position: relative;
    background: var(--sec-color2);
}

.sec-4 .bg-wrap{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

.sec-4 .bg-wrap > div{
    position: absolute;
}

.sec-4 .bg-wrap .geomShapes-1{
    width: 220px;
    top: 5%;
    left: 5%;
}
.sec-4 .bg-wrap .geomShapes-2{
    width: 200px;
    bottom: 0;
    left: 15%;
}
.sec-4 .bg-wrap .geomShapes-3{
    width: 250px;
    top: 0;
    right: 15%;
}
.sec-4 .bg-wrap .geomShapes-4{
    width: 150px;
    bottom: 5%;
    right: 5%;
}

.sec-4 .btnbutton-group{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}





/* Customer */
.sec-customer .customerForm-wrap{
    max-width: 1200px;
    margin: 0 auto;
}

.sec-customer .customerForm-wrap .customer-form{
    padding: 30px;
    border: 1px solid var(--bs-gray-200);
    border-radius: 20px;
    background: var(--bs-white);
}

.sec-customer .customerForm-wrap .customer-form + .customer-form{
    margin: 50px 0 0;
}

.sec-customer .customerForm-wrap .customer-form .cf-tit{
    margin: 0 0 25px;
    font-size: 26px;
    font-weight: 600;
}

.sec-customer .customerForm-wrap .customer-form .agreement{
    height: 200px;
    padding: 30px;
    background: var(--bs-gray-100);
    overflow-y: auto;
}

.sec-customer .customerForm-wrap .radio-group{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin: 40px 0 0;
}

.sec-customer .customerForm-wrap .radio-group .radio label{
    padding: 0 0 0 20px;
    font-size: 18px;
    font-weight: 600;
    line-height: 32px;
}

.sec-customer .customerForm-wrap .radio-group .radio label:before{
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bs-gray-300);
}

.sec-customer .customerForm-wrap .radio-group .radio label:after{
    width: 22px;
    height: 22px;
    position: absolute;
    top: 5px;
    left: 5px;
    transform: scale(1, 1);
    background: url("../images/ico_check.png") no-repeat 0 0 / 22px;
}

.sec-customer .customerForm-wrap .radio-group .radio input[type="radio"]:checked + label:before{
    background: var(--main-color);
}


.sec-customer .customerForm-wrap .form-list > li{
    display: flex;
    align-items: center;
    gap: 20px;
}

.sec-customer .customerForm-wrap .form-list > li:not(:first-child){
    margin: 10px 0 0;
}

.sec-customer .customerForm-wrap .form-list .subject{
    width: 200px;
    text-align: center;
    font-weight: 600;
}

.sec-customer .customerForm-wrap .form-list .subject i{
    color: var(--bs-red);
}

.sec-customer .customerForm-wrap .form-list .form-control{
    width: 400px;
    border-radius: 0;
    box-shadow: none;
}

.sec-customer .customerForm-wrap .form-list .email .form-control,
.sec-customer .customerForm-wrap .form-list .textarea .form-control{
    width: calc(100% - 220px);
}

.sec-customer .customerForm-wrap .form-list .contact .contactForm-group{
    display: flex;
    align-items: center;
    gap: 10px;
}

.sec-customer .customerForm-wrap .form-list .contact .contactForm-group .form-control{
    width: 120px;
}

.sec-customer .customerForm-wrap .form-list .form-control,
.sec-customer .customerForm-wrap .form-list .bootstrap-select .dropdown-toggle{
    height: 42px;
}

.sec-customer .customerForm-wrap .form-list .bootstrap-select .dropdown-toggle .filter-option-inner-inner,
.sec-customer .customerForm-wrap .form-list .bootstrap-select .dropdown-menu li a{
    font-size: 16px;
    color: var(--bs-gray-800);
    line-height: 29px;
}

.sec-customer .customerForm-wrap .form-list .textarea .form-control{
    height: 254px;
    resize: none;
}

.sec-customer .customerForm-wrap .btnbutton-group{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 50px 0 0;
}





/* 약관/개인정보처리방침 */
.sec-service .tabGroup{
    width: 440px;
    display: flex;
    align-items: center;
    margin: 0 auto;
    border: 1px solid var(--bs-gray-200);
    border-radius: 20px;
    background: var(--bs-white);
}

.sec-service .tabGroup li{
    width: 50%;
    position: relative;
    text-align: center;
}

.sec-service .tabGroup li + li:before{
    content: '';
    width: 1px;
    height: 22px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    background: var(--bs-gray-300);
}

.sec-service .tabGroup li a{
    display: block;
    padding: 15px;
    font-size: 18px;
    font-weight: 600;
    color: var(--bs-gray-400);
}

.sec-service .tabGroup li.tab-on a{
    color: var(--bs-gray-800);
    pointer-events: none;
}









.rules-cont{
    margin: 100px 0 0;
}

.rules-cont .tt{
	margin: 50px 0 10px;
	font-size: 32px;
	font-weight: 700;
}

.rules-cont .numList{
	padding: 0 0 0 25px;
}

.rules-cont .numList .txtNum{
	position: absolute;
	left: -25px;
	margin: 0;
	padding: 0;
}

.rules-cont .numList .txtNum:before,
.rules-cont .numList span.noPoint:before{
	content: none;
}

.rules-cont dl{
	margin: 0 0 30px;
}

.rules-cont dl dt{
	margin: 0 0 5px;
    font-size: 20px;
    font-weight: 600;
}

.rules-cont dl.boxRow{
	display: flex;
	flex-wrap: wrap;
	gap: 5px 20px;
	padding: 0 0 30px;
	border-bottom: 1px solid var(--bs-gray-300);
}

.rules-cont dl.boxRow dt{
    font-size: 16px;
    font-weight: 500;
}

.rules-cont dl.m1.boxRow dt{
	width: calc((100% - 40px) / 3);
}

.rules-cont dl.m2.boxRow dt{
	width: calc((100% - 20px) / 2);
}

.rules-cont dl dd,
.rules-cont dl dd p,
.rules-cont dl ul li,
.rules-cont dl ul li span,
.rules-cont dl ul li span em,
.rules-cont .numList .txtNum{
	font-weight: 400;
	color: var(--bs-gray-700);
	line-height: 22px;
}

.rules-cont dl dd{
	position: relative;
	padding: 5px 0;
}

.rules-cont.service dl dd ul{
	padding: 0 0 0 25px;
}

.rules-cont.policy dl dd ul:not(:first-child){
	padding: 0 0 0 20px;
}

.rules-cont dl ul li{
	position: relative;
	padding: 3px 0;
}

.rules-cont dl ul li span{
	position: relative;
	display: block;
	margin: 0;
	padding: 0 0 0 12px;
}

.rules-cont dl ul li span:before{
	content: '';
	width: 3px;
	height: 3px;
	position: absolute;
	top: 9px;
	left: 0;
	background: var(--bs-gray-600);
	border-radius: 50%;
}

.rules-cont dl ul li span em{
	display: block;
}

.rules-cont .list_labeling{
	margin: 0 0 50px;
}

.rules-cont .list_labeling ul{
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
}

.rules-cont .list_labeling li{
	width: calc((100% - 50px) / 6);
	min-width: 220px;
	display: flex;
	flex-direction: column;
    align-items: center;
	flex: 1 1 auto;
	padding: 20px;
	background: #f6f6f6;
	border-radius: 10px;
}

.rules-cont .list_labeling li a{
	width: 100%;
	height: 100%;
}

.rules-cont .list_labeling li .thumb{
	width: 90px;
	height: 90px;
	position: relative;
	margin: 0 auto;
}

.rules-cont .list_labeling li .thumb:before{
	content: '';
	width: 90px;
	height: 90px;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0);
	background: url('../images/ico_rules.svg') no-repeat 0 0 / 1090px;
}

.rules-cont .list_labeling li.p2 .thumb:before{
	background-position-x: -100px;
}
.rules-cont .list_labeling li.p3 .thumb:before{
	background-position-x: -200px;
}
.rules-cont .list_labeling li.p4 .thumb:before{
	background-position-x: -300px;
}
.rules-cont .list_labeling li.p5 .thumb:before{
	background-position-x: -400px;
}
.rules-cont .list_labeling li.p6 .thumb:before{
	background-position-x: -500px;
}
.rules-cont .list_labeling li.p7 .thumb:before{
	background-position-x: -600px;
}
.rules-cont .list_labeling li.p8 .thumb:before{
	background-position-x: -700px;
}
.rules-cont .list_labeling li.p9 .thumb:before{
	background-position-x: -800px;
}
.rules-cont .list_labeling li.p10 .thumb:before{
	background-position-x: -900px;
}
.rules-cont .list_labeling li.p11 .thumb:before{
	background-position-x: -1000px;
}

.rules-cont .list_labeling li .title{
	margin: 15px 0 5px;
	font-size: 18px;
	text-align: center;
	line-height: 1.2;
}

.rules-cont .list_labeling li .txt{
	font-size: 14px;
	text-align: center;
}

.rules-cont .table tr th{
	text-align: center;
	background: #f6f6f6;
}

.rules-cont .table tr td{
	font-weight: 400;
	color: #666;
	text-align: center;
    vertical-align: middle;
}

.rules-cont .table tr td:only-child{
	text-align: center !important;
}

.rules-cont .table tr td:last-child,
.rules-cont #m2con2 .table tr td:nth-child(2),
.rules-cont #m2con9 .table tr td{
	text-align: left !important;
}

.rules-cont .table-warp{
	overflow-x: auto;
}

.rules-cont .table-warp .table{
	min-width: 800px;
	margin: 0 0 10px;
}

.rules-cont #m2con5 td,
.rules-cont #m2con9 li:last-child td{
	text-align: center;
}

.rules-cont #m2con9 li:last-child td a{
	display: block;
}

.rules-cont #m2con5 .table-1 .col-1,
.rules-cont #m2con9 li:last-child .col-1,
.rules-cont #m2con5 .table-1 .col-2,
.rules-cont #m2con9 li:last-child .col-2,
.rules-cont #m2con5 .table-1 .col-3,
.rules-cont #m2con9 li:last-child .col-3{
	width: 25%;
}

.rules-cont #m2con5 .table-1 .col-4,
.rules-cont #m2con9 li:last-child .col-4{
	width: auto;
}

.rules-cont #m2con5 .table-2 .col-1,
.rules-cont #m2con5 .table-2 .col-2,
.rules-cont #m2con5 .table-2 .col-3{
	width: calc(100% / 3);
}

.rules-cont #m2con2 .table-2 .col-1{
    width: 20%;
}

.rules-cont #m2con2 .table-2 .col-2,
.rules-cont #m2con2 .table-2 .col-3{
    width: 40%;
}
















.footer{
    padding: 20px 0;
    border-top: 1px solid var(--bs-gray-200);
}

.footer .footerTop{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer .footerMenu{
	display: flex;
	gap: 0 40px;
	flex-wrap: wrap;
    align-items: center;
}

.footer .footerMenu li{
	position: relative;
}

.footer .footerMenu li a{
    font-weight: 600;
}

.footer .footerMenu li:not(:first-child):before{
	content: '';
	width: 1px;
	height: 12px;
	position: absolute;
	top: 50%;
	left: -20px;
	transform: translate(0, -50%);
	background: rgba(69,74,101,0.5);
}

.footer .familySite{
    width: 200px;
}

.footer address{
    max-width: 800px;
	margin: 20px 0 0;
	overflow: hidden;
}

.footer address .company{
	width: 128px;
	height: 25px;
	position: relative;
	margin: 0 0 15px;
	font-size: 0;
}

.footer address .company:before{
	content: '';
	width: 128px;
	height: 25px;
	position: absolute;
	top: 0;
	left: 0;
	background: url('../images/footer_logo.png') no-repeat 0 0 / 128px;
}

.footer address ul{
	display: flex;
	gap: 0 20px;
	flex-wrap: wrap;
	align-items: center;
}

.footer address ul li{
	position: relative;
	font-size: 14px;
	color: var(--bs-gray-600);
}

.footer address ul li:not(:first-child):before{
	content: '';
	width: 1px;
	height: 10px;
	position: absolute;
	top: 50%;
	left: -10px;
	transform: translate(0, -50%);
	background: rgba(69,74,101,0.5);
}

.footer .footer-copyright{
    margin: 10px 0 0;
	font-size: 13px;
	font-weight: 200;
	color: var(--bs-gray-600);
}



.offcanvas-header{
    padding: 24px 30px;
    background: #eee;
}

.offcanvas-header .btn-close{
    width: 26px;
    height: 26px;
    position: relative;
    margin-left: auto;
    padding: 0;
    background: none;
    font-size: 0;
    opacity: 1;
}

.offcanvas-header .btn-close .ham:before,
.offcanvas-header .btn-close .ham:after{
    width: 100%;
    height: 1px;
    background: var(--bs-black);
}

.offcanvas-header .btn-close .ham:before,
.offcanvas-header .btn-close .ham:after{
    content: "";
    width:100%;;
    position:absolute;
    top:50%;
    left: 0;
}

.offcanvas-header .btn-close .ham:before{
    transform:rotate(45deg);
}
.offcanvas-header .btn-close .ham:after{
    transform:rotate(-45deg);
}

.offcanvas-body .navbar-nav-m li{
    border-bottom: 1px solid var(--bs-gray-200);
}

.offcanvas-body .navbar-nav-m li a{
    padding: 10px;
}


.navbar-toggler{
    width: 26px;
    height: 18px;
    position: relative;
    margin-left: auto;
    padding: 0;
    border: none;
    font-size: 0;
    box-shadow: none !important;
}
.navbar-toggler .ham,
.navbar-toggler .ham:before,
.navbar-toggler .ham:after{
    width: 100%;
    height: 1px;
    background: var(--bs-black);
}

.navbar-toggler .ham:before,
.navbar-toggler .ham:after {
    content: "";
    position:absolute;
    left:0;
}
.navbar-toggler .ham:before{
    top:calc(50% - 1px);
}

.navbar-toggler .ham:after {
    top:calc(100% - 2px);
}







/* animation */
.bounce-in-fwd{
	animation: bounce-in-fwd 0.9s forwards;
}

@keyframes bounce-in-fwd{
    0% {
        transform: scale(0);
        animation-timing-function: ease-in;
        opacity: 0;
    }
    38% {
        transform: scale(1.4);
        animation-timing-function: ease-out;
        opacity: 1;
    }
    55% {
        transform: scale(0.8);
        animation-timing-function: ease-in;
        opacity: 1;
    }
    72% {
        transform: scale(1.2);
        animation-timing-function: ease-out;
        opacity: 1;
    }
    81% {
        transform: scale(0.9);
        animation-timing-function: ease-in;
        opacity: 1;
    }
    89% {
        transform: scale(1.1);
        animation-timing-function: ease-out;
        opacity: 1;
    }
    95% {
        transform: scale(0.95);
        animation-timing-function: ease-in;
        opacity: 1;
    }
    100% {
        transform: scale(1);
        animation-timing-function: ease-out;
        opacity: 1;
    }
}

.fade-in-top{
	animation: fade-in-top 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@keyframes fade-in-top{
    0% {
        -webkit-transform: translateY(-50px);
                transform: translateY(-50px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
        opacity: 1;
    }
}

.fade-in-bottom{
	animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@keyframes fade-in-bottom{
    0% {
        -webkit-transform: translateY(50px);
                transform: translateY(50px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
        opacity: 1;
    }
}

.levitate{
    animation: levitate 6s infinite ease-in-out both;
}

@keyframes levitate{
    from {
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
    }

    50% {
        -webkit-transform: translate(0, 10px);
                transform: translate(0, 10px);
    }

    to {
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
    }
}

.slider-thumb::before {
    position: absolute;
    content: "";
    background: var(--bs-blue5);
    border-radius: 62% 47% 82% 35% / 45% 45% 80% 66%;
    will-change: border-radius, transform, opacity;
    animation: sliderShape 5s linear infinite;
    display: block;
    -webkit-animation: sliderShape 5s linear infinite;
}
.slider-thumb.s380:before{
    width: 380px;
    height: 380px;
    top: -7%;
    left: -7%;
    opacity: 0.9;
}
.slider-thumb.s370:before{
    width: 370px;
    height: 370px;
    bottom: 10%;
    right: -8%;
    opacity: 0.5;
}
.slider-thumb.s210:before{
    width: 210px;
    height: 210px;
    bottom: 5%;
    left: 5%;
}
@keyframes sliderShape{
    0%,100%{
        border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
            transform: translate3d(0,0,0) rotateZ(0.01deg);
    }
    34%{
        border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;
        transform:  translate3d(0,5px,0) rotateZ(0.01deg);
    }
    50%{
        transform: translate3d(0,0,0) rotateZ(0.01deg);
    }
    67%{
        border-radius: 100% 60% 60% 100% / 100% 100% 60% 60% ;
        transform: translate3d(0,-3px,0) rotateZ(0.01deg);
    }
}

.slide-in-tr{
	animation: slide-in-tr 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes slide-in-tr{
    0% {
        transform: translateY(-1000px) translateX(1000px);
        opacity: 0;
    }
    100% {
        transform: translateY(0) translateX(0);
        opacity: 1;
    }
}


.delay-01s{
    animation-delay: 0.1s;
}
.delay-015s{
    animation-delay: 0.15s;
}
.delay-02s{
    animation-delay: 0.2s;
}
.delay-025s{
    animation-delay: 0.25s;
}
.delay-03s{
    animation-delay: 0.3s;
}
.delay-04s{
    animation-delay: 0.4s;
}
.delay-05s{
    animation-delay: 0.5s;
}
.delay-1s{
    animation-delay: 1s;
}
.delay-15s{
    animation-delay: 1.5s;
}
.delay-2s{
    animation-delay: 2s;
}
.delay-25s{
    animation-delay: 2.5s;
}
.delay-21s{
    animation-delay: 2.1s;
}
.delay-3s{
    animation-delay: 3s;
}
.delay-35s{
    animation-delay: 3.5s;
}
.delay-4s{
    animation-delay: 4s;
}




























/*------------------------------------ ONLY PC ------------------------------------*/
@media(hover: hover) and (pointer: fine) {
    a:active,
    a:hover {
        color: var(--main-color);
    }

    #topBtn:hover{
        background-color: #444;
    }

    .sec-service .tabGroup li a:hover{
        color: var(--main-color);
    }

	.rules-cont.policy .list_labeling li:hover{
		background: #eee;
	}
}

/*------------------------------------ ONLY Tablet --------------------------------*/
@media (hover: none) and (pointer: coarse) {

}

/* ----------------------------------- Only Phone ---------------------------------*/
@media(max-width: 991px) and (hover: none) and (pointer: coarse) {

}

@media(max-width: 1690px){
    .sec-1 .visual-wrap{
        min-height: 480px;
        margin: 0;
        padding: 0 30px;
    }

    .sec-1 .visual-img p{
        width: 90%;
    }
    .sec-1 .visual-img .obj-2{
        width: 28%;
        right: 2%;
        bottom: 28%;
    }
    .sec-1 .visual-img .obj-3{
        width: 26%;
        right: 27%;
        bottom: -6%;
    }
    .sec-1 .visual-img .obj-4{
        width: 21%;
        right: -4%;
        bottom: 12%;
    }

    .sec-1 .visual-txt{
        margin: auto 0 40px;
    }
}

@media (min-width: 1400px) {
    .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container{
        max-width: 1460px;
    }
}

@media(max-width: 1399px){
    .sec-1 .visual-wrap{
        min-height: 380px;
    }

    .sec-1 .visual-txt{
        margin: auto 0 15px;
    }

    .sec-1 .visual-txt .title-area .mImg-logo{
        width: 360px;
    }

    .sec-1 .visual-txt .title-area .txt{
        font-size: 32px;
    }

    .sec-2 .left-section{
        width: 48%;
    }

    .sec-2 .right-section{
        width: 50%;
    }

    .sec-2 .left-section .swiper-slide-prev,
    .sec-2 .left-section .swiper-slide-next{
        transform: scale(0.6);
    }

    .sec-2 .left-section .swiper-slide img{
        width: 90%;
    }

    .sec-3 .pd-wrap li{
        width: calc(100% / 2.6);
    }
}

@media(max-width: 1199px){
    .sec-1 .visual-wrap{
        min-height: 300px;
    }

    .sec-1 .visual-txt{
        margin: auto 0 20px;
    }

    .sec-1 .visual-txt .title-area .mImg-logo{
        width: 280px;
    }
    .sec-1 .visual-txt .title-area .txt{
        font-size: 24px;
    }

    .sec-2 .right-section .custom-pagination button{
        letter-spacing: -1.5px;
    }

    .sec-2 .right-section .right-swiper .swiper-slide .icon-box{
        padding: 30px;
    }

    .sec-3 .pd-wrap{
        gap: 50px;
    }

    .sec-3 .pd-wrap li{
        width: calc(100% / 2);
    }

    .sec-4 .bg-wrap .geomShapes-2{
        left: 8%;
    }
    .sec-4 .bg-wrap .geomShapes-3{
        right: 0;
    }
}

@media(max-width: 991px){
    .navbar-brand{
        height: 36px;
    }

    .navbar-nav .nav-link{
        font-size: 18px;
    }

    .sec-1 .visual-wrap{
        min-height: 220px;
    }

    .sec-1 .visual-txt{
        margin: auto 0 15px;
    }

    .sec-1 .visual-txt .title-area .mImg-logo{
        width: 220px;
    }
    .sec-1 .visual-txt .title-area .txt{
        font-size: 20px;
    }

    .sec-2 .container{
        flex-direction: column;
    }

    .sec-2 .left-section,
    .sec-2 .right-section{
        width: 100%;
    }

    .sec-2 .right-section{
        margin: 60px 0 0;
    }

    .sec-2 .right-section .title,
    .s-tit h2{
        font-size: 42px;
    }

    .sec-2 .right-section .right-swiper .swiper-slide{
        gap: 10%;
    }

    .btn-ani-1,
    .btn-ani-2,
    .btn-ani-3{
        width: 320px;
        line-height: 60px;
    }

    .btn-ani-1 span,
    .btn-ani-2 span,
    .btn-ani-3 span,
    .s-tit p{
        font-size: 22px;
    }

    .sec-2 .right-section .custom-pagination button{
        letter-spacing: 0;
    }

    .sec-3 .pd-wrap{
        gap: 30px;
    }

    .sec-3 .pd-wrap .pd .pd-info .pd-title{
        font-size: 27px;
    }

    .slider-thumb.s380:before{
        width: 304px;
        height: 304px;
    }

    .slider-thumb.s210:before{
        width: 168px;
        height: 168px;
    }

    .slider-thumb.s370:before{
        width: 296px;
        height: 296px;
    }

    .sec-4 .bg-wrap .geomShapes-1{
        width: 176px;
        left: 0;
    }
    .sec-4 .bg-wrap .geomShapes-2{
        width: 160px;
        left: 5%;
    }
    .sec-4 .bg-wrap .geomShapes-3{
        width: 200px;
    }
    .sec-4 .bg-wrap .geomShapes-4{
        width: 120px;
    }

    .sec-customer .customerForm-wrap .form-list > li{
        gap: 10px;
    }

    .sec-customer .customerForm-wrap .form-list .subject{
        width: 150px;
    }

    .sec-customer .customerForm-wrap .form-list .email .form-control,
    .sec-customer .customerForm-wrap .form-list .textarea .form-control{
        width: calc(100% - 160px);
    }
}

@media(max-width: 767px){
    .container{
        max-width: 100%;
    }

    .navbar-nav{
        display: none;
    }
    .navbar-expand-sm .navbar-toggler{
        display: flex;
    }

    .sec{
        padding: 50px 0;
    }

    .sec-1 .visual-wrap{
        min-height: auto;
        flex-direction: column;
    }

    .sec-1 .visual-back{
        top: -5%;
    }

    .sec-1 .visual-txt{
        margin: 0;
        text-align: center;
    }

    .sec-1 .visual-txt .title-area{
        width: 100%;
    }

    .sec-1 .visual-txt .title-area .mImg-logo{
        margin: 0 auto;
    }

    .sec-1 .visual-img{
        width: 80%;
        height: auto;
        aspect-ratio: 16 / 11;
        margin: 0 auto;
    }

    .sec-2 .left-section .swiper-slide img,
    .sec-3 .pd-wrap li{
        width: 80%;
    }

    .sec-2 .right-section .right-swiper .swiper-slide{
        gap: 5%;
    }

    .sec-2 .right-section .title,
    .s-tit h2{
        font-size: 34px;
    }

    .sec-2 .right-section .right-swiper .swiper-slide .icon-box{
        padding: 26px;
    }

    .sec-2 .right-section .custom-pagination button,
    .sec-3 .pd-wrap .pd .pd-info .pd-text{
        font-size: 16px;
    }

    .sec-2 .right-section .right-swiper .swiper-slide .sub-txt{
        font-size: 14px;
    }

    .sec-2 .right-section .right-swiper .swiper-slide .title-txt,
    .btn-ani-1 span,
    .btn-ani-2 span,
    .btn-ani-3 span,
    .s-tit p{
        font-size: 18px;
    }

    .sec-2 .btnbutton-group,
    .sec-3 .btnbutton-group{
        margin: 60px 0 0;
    }

    .sec-3 .pd-wrap{
        flex-wrap: wrap;
    }

    .sec-3 .pd-wrap .pd .pd-img{
        width: 140px;
    }

    .sec-3 .pd-wrap .pd .pd-info .pd-title{
        font-size: 22px;
    }

    .slider-thumb.s380:before{
        width: 243px;
        height: 243px;
    }

    .slider-thumb.s210:before{
        width: 134px;
        height: 134px;
    }

    .slider-thumb.s370:before{
        width: 237px;
        height: 237px;
        bottom: -3%;
    }

    .sec-4 .bg-wrap > div{
        filter: brightness(0.5) opacity(0.7);
    }

    .sec-customer .customerForm-wrap .customer-form .cf-tit{
        font-size: 22px;
    }

    .sec-customer .customerForm-wrap .form-list > li{
        flex-direction: column;
        align-items: start;
        gap: 5px;
    }

    .sec-customer .customerForm-wrap .form-list .subject{
        text-align: left;
    }

    .sec-customer .customerForm-wrap .form-list > li:not(:first-child){
        margin: 25px 0 0;
    }

    .sec-customer .customerForm-wrap .form-list .form-control,
    .sec-customer .customerForm-wrap .form-list .email .form-control,
    .sec-customer .customerForm-wrap .form-list .textarea .form-control{
        width: 100%;
    }

    .sec-customer .customerForm-wrap .radio-group{
        margin: 20px 0 0;
    }

    .sec-customer .customerForm-wrap .customer-form .agreement{
        padding: 20px;
    }

    #topBtn{
        width: 30px;
        height: 30px;
    }

    #topBtn:before{
        width: 16px;
        height: 16px;
        background-size: 16px;
    }
}

@media(max-width: 575px){
    .sec-2 .right-section .right-swiper .swiper-slide{
        gap: 3%;
    }

    .sec-2 .right-section .custom-pagination button{
        height: 72px;
    }

    .sec-2 .right-section .custom-pagination button br{
        display: block;
    }

    .sec-3 .pd-wrap li{
        width: 100%;
    }

    .btn-ani-1,
    .btn-ani-2,
    .btn-ani-3{
        width: 90%;
    }

    .sec-3 .btnbutton-group{
        flex-wrap: wrap;
        gap: 10px;
    }

    .sec-customer .customerForm-wrap .radio-group{
        flex-direction: column;
        align-items: start;
        gap: 10px;
    }

    .sec-customer .customerForm-wrap .form-list .contact .contactForm-group .form-control{
        width: calc((100% - 60px) / 3);
    }

    .sec-customer .customerForm-wrap .radio-group{
        padding: 0 0 0 10px;
    }
}

@media(max-width: 480px){
    .sec-3 .pd-wrap .pd .pd-info .pd-text br{
        display: none;
    }

    .slider-thumb.s210:before{
        bottom: 8%;
        left: -2%;
    }

    .slider-thumb.s370:before{
        bottom: -6%;
    }

    .footer .footerTop{
        flex-direction: column;
        gap: 10px;
    }

    .footer address{
        margin: 50px 0 0;
    }

    .footer address .company{
        margin: 0 auto 15px;
    }

    .footer address ul{
        justify-content: center;
    }

    .footer .footer-copyright{
        text-align: center;
    }
}



/*------------------------------------ DARK MODE ------------------------------------*/
:root {
	color-scheme: dark light;
}

@media (prefers-color-scheme: dark){
    html, body,
    .sec-1{
        background: var(--bs-gray-900);
    }

    header,
    .sec-customer .customerForm-wrap .customer-form .agreement,
    .form-control,
    .bootstrap-select > .dropdown-toggle,
    .dropdown-menu,
    .sec-2{
        background: var(--bs-gray-800);
    }

    .navbar-brand .logo-light,
    .sec-1 .visual-back{
        display: none;
    }
    .navbar-brand .logo-dark{
        display: block;
    }

    .footer address .company:before{
        background: url(../images/footer_logo_dark.png) no-repeat 0 0 / 128px;
    }

    .navbar-nav .nav-link,
    .s-tit p,
    .sec-customer .customerForm-wrap .customer-form .cf-tit,
    .sec-customer .customerForm-wrap .customer-form .agreement,
    .sec-customer .customerForm-wrap .radio-group .radio label,
    .sec-customer .customerForm-wrap .form-list .subject,
    .sec-customer .customerForm-wrap .form-list .bootstrap-select .dropdown-toggle .filter-option-inner-inner,
    .sec-customer .customerForm-wrap .form-list .bootstrap-select .dropdown-menu li a,
    .footer .footerMenu li a,
    .bootstrap-select .dropdown-toggle .filter-option,
    .bootstrap-select .dropdown-menu li a, .dropdown-menu li a,
    .form-control,
    .sec-3 .pd-wrap .pd .pd-info .pd-title,
    .sec-3 .pd-wrap .pd .pd-info .pd-text,
    .sec-1 .visual-txt .title-area .txt,
    .rules-cont .boxRow dt a,
    .rules-cont .tt,
    .rules-cont dl dt,
    .rules-cont dl dd,
    .rules-cont dl dd p,
    .rules-cont dl ul li,
    .rules-cont dl ul li span,
    .rules-cont dl ul li span em,
    .rules-cont .numList .txtNum,
    .sec-service .tabGroup li.tab-on a,
    .rules-cont .list_labeling li .title,
    .rules-cont .list_labeling li .txt,
    .rules-cont .table tr th,
    .rules-cont .table tr td,
    .rules-cont .table tr td a{
        color: var(--bs-gray-100);
    }

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link:active,
    .sec-service .tabGroup li a:hover,
    .rules-cont .list_labeling li a:hover .title,
    .rules-cont .list_labeling li a:hover .txt,
    .rules-cont .table tr td a:hover{
        color: var(--bs-blue4);
    }

    .s-tit h2{
        color: var(--bs-blue5);
    }

    .sec-customer .customerForm-wrap .customer-form{
        background: var(--bs-gray-900);
    }

    .sec-customer .customerForm-wrap .customer-form,
    .form-control,
    .bootstrap-select > .dropdown-toggle,
    .footer,
    .rules-cont dl.boxRow,
    .sec-service .tabGroup{
        border-color: var(--bs-gray-800);
    }

    .rules-cont .table tr,
    .rules-cont .table tr th,
    .rules-cont .table tr td{
        border-color: var(--bs-gray-600);
    }

    .sec-customer .customerForm-wrap .radio-group .radio input[type="radio"]:checked + label:before{
        background: var(--bs-blue4);
    }

    .bootstrap-select .dropdown-toggle:after{
        filter: contrast(0.1);
    }

    .rules-cont .table tr th{
        background: var(--bs-gray-800);
    }

    .dropdown-item.active,
    .dropdown-item:active,
    .btn-ani-1,
    .sec-customer .customerForm-wrap .radio-group .radio label:before,
    .footer .footerMenu li:not(:first-child):before,
    .sec-2 .right-section .custom-pagination button,
    .sec-3 .pd-wrap li,
    .sec-service .tabGroup,
    .rules-cont .list_labeling li,
    .rules-cont .table tr td{
        background: var(--bs-gray-700);
    }

    .footer address ul li,
    .footer .footer-copyright,
    .sec-service .tabGroup li a{
        color: var(--bs-gray-500);
    }

    .navbar-toggler .ham,
    .navbar-toggler .ham:before,
    .navbar-toggler .ham:after{
        background: var(--bs-white);
    }

    .sec-3 .bg-wrap{
        backdrop-filter: brightness(0.2);
    }

    .sec-1 .visual-txt .title-area .mImg-logo{
        filter: contrast(0.5) drop-shadow(2px 2px 9px rgba(0, 0, 0, 0.5));
    }

    .rules-cont .list_labeling li .thumb:before{
        backdrop-filter: contrast(0.2);
    }
}

[data-darkreader-scheme="dark"] .navbar-brand .logo-light,
[data-darkreader-scheme="dark"] .sec-1 .visual-back{
        display: none;
    }

[data-darkreader-scheme="dark"] .navbar-brand .logo-dark{
    display: block;
}