@charset "UTF-8";


.motion {
	opacity: 0;
	transition: all .5s ease;
}

.motion.motion-right {
	transform: translate(-100px, 0);
}

.motion.motion-up {
	transform: translate(0, 100px);
}

.motion.motion-down {
	transform: translate(0, -100px);
}

.motion.motion-left {
	transform: translate(100px, 0);
}

.motion.show {
	opacity: 1;
	transform: none;
}

/* 공통 css start */
.wrap {width:100%;}
.gap {width:auto;max-width: 1400px;padding:0 20px;margin:0 auto;;}
.content {width:100%;}
.pubilc_title {width:100%;text-align: center;}
.pubilc_title > h2 {font-size: 37px;font-weight: 700;color:var(--black-color);line-height: 130%;word-break: keep-all;transform: translateX(-50%);opacity: 0;transition: all .3s;}
.pubilc_title > h2.pallClass {transform: translateX(0%);opacity: 1;}
/* 공통 css end */

header {height:80px;z-index: 4;width:100%;position: fixed;top:0px;left:0px;}
header .wrap {height:100%;background-color: var(--main-color);}
header .gap {height:100%;}
header .content {height:100%;display: flex;align-items: center;}
header .content .logo_box {display: inline-block;}
header .content .logo_box > a {font-size: 28px;font-weight: 900;color:var(--black-color);display: inline-block;}
header .content nav > a {margin-left:100px;font-size: 19px;font-weight:700;color:var(--black-color);display: inline-block;transition: all .2s;}
header .content nav > a:first-child {margin-left:120px;}
header .content nav > a:hover {color:var(--white-color)}
header .content .btn_wrap {display: inline-block;margin-left:auto;}
header .content .btn_wrap > a {font-size: 15px;font-weight: 700;color:var(--white-color);}
header .content .btn_wrap > span.devied_ra {width:3px;height:3px;margin:0 5px;border-radius: 50%;background-color: var(--white-color);display: inline-block;}
header .content .mobile_btn {display: none;}
header .content .mobile_btn > span {width:30px;height:3px;background-color: #fff;display: block;transition: all .3s;}
header .content .mobile_btn > span:nth-child(2) {margin: 7px 0;}
header .content .mobile_btn.active > span:nth-child(2) {display: none;}
header .content .mobile_btn.active > span:nth-child(1) {transform: rotate(45deg) translateY(2px);}
header .content .mobile_btn.active > span:nth-child(3) {transform: rotate(-45deg) translateY(-2px);}



/* 퀵메뉴 */
.fixNav { position: fixed; right: 10px; bottom: 300px; z-index: 90; } 
.fixNav .wrapper { position: relative;}
.fixNav .fixNav_wrap.hide { display: none; } 
.fixNav .fixNav_wrap li { width: 100px; margin: 10px 0; text-align: center; } 
.fixNav .fixNav_wrap li a { display: inline-block; width: 100%; padding: 5px 0 7px; font-weight: 500; font-size: 13px; } 
.fixNav .fixNav_wrap li a:hover { font-weight: 600; } 
.fixNav .fixNav_wrap li.list { border: 2px solid var(--main-color); background: #fff; } 
.fixNav .fixNav_wrap li.top_btn { background: var(--main-color); } 
.fixNav .fixNav_wrap li.list a { color: #333; } 
.fixNav .fixNav_wrap li.list a img { width: 15px; height: 15px; object-fit: contain; vertical-align: -3px; } 
.fixNav .fixNav_wrap li.top_btn { display: none; } 
.fixNav .fixNav_wrap li b { font-weight: 500; } 
.fixNav .remote_btn { position: absolute; right:0;}
.fixNav .remote_btn button { display: flex; position: relative; right: 0; width: 40px; height: 40px; background: var(--main-color); border-radius: 50%; align-items: center; justify-content: flex-end; flex-direction: column; box-shadow: 4px 4px 4px rgba(42, 42, 42, 0.3); transition: right 0.3s ease-in-out; } 
.fixNav .remote_btn button:before { position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; content: ''; transform: translate(-50%,-50%); } 
.fixNav .remote_btn button.hide { right: -100px; height: 0; }
.fixNav .remote_btn button.hide:before { height: 0; } 
.fixNav .remote_btn button.close:before {
    background: no-repeat center/contain url("https://callezi.com/assets/img/icon/close.png");
}
.fixNav .remote_btn button.open:before {
    background: no-repeat center/contain url("https://callezi.com/assets/img/icon/arrow.png");
}
.close > span { position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background-color: #fff; } 
.hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; white-space: nowrap; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; } 


main {z-index: 1;width:100%;position: relative;padding-top:80px;}
.section1 {width:100%;height:calc((var(--vh, 1vh) * 100) - 80px);position: relative;z-index: 2;}
.section1 .wrap {background-color: #FED32C;height:100%;width:100%;}
.section1 .content {display: flex;}
.section1 .text_box {z-index: 4;position: absolute;top:50%;transform: translateY(-50%);margin-left:130px;}
.section1 .text_box > img {z-index: 8;top:-35%;left:-15%;position:absolute;z-index: -1;}
.section1 .text_box > h2 {font-size: 50px;font-weight: 900;color:#FBFFFF;line-height: 150%;}
.section1 .text_box > h3 {font-size: 50px;font-weight: 900;color:#FBFFFF;line-height: 150%; color: #000;}
.section1 .text_box > h4 {font-size: 50px;font-weight: 900;color:#FBFFFF;line-height: 150%; color: #F0C425;}
.section1 .text_box > p {font-size: 20px;font-weight: 700;color:#FBFFFF;line-height: 160%;margin-top:10px;}
.section1 .text_box > .btn_box {display: inline-block;}
.section1 .text_box > .btn_box > a {font-size: 19px;font-weight: 700;color:var(--black-color);display: inline-block;background-color: var(--white-color);padding:10px 50px;transition: all .3s;border:3px solid var(--main-color);overflow: hidden;border-radius:50px;box-shadow: 0px 0px 5px var(--white-color);}
.section1 .text_box > .btn_box > a:hover {background-color: var(--main-color);color:var(--white-color);border:3px solid transparent;}
.section1 .btn_box {margin-top:40px;}
.section1 .img_box {z-index: 3;position: absolute;top:50%;right:20%;transform: translateY(-50%);}
.section1 .img_box > img {filter: drop-shadow(15px 30px 15px rgba(0,0,0,.2));transform: scale(1.15);}
.section1 .background_img_container {z-index: 2;position: absolute;top:0px;left:0px;overflow: hidden;width:100%;height:100%;}
.section1 .background_img_container > img {position: absolute;}
.section1 .background_img_container > img:nth-child(1) {z-index: 5;bottom:0%;left:0%;animation: opacityContent .6s;}
.section1 .background_img_container > img:nth-child(2) {z-index: 1;bottom:-10%;left:0%;transform: scale(1.2);animation: opacityContent3 .6s;}
.section1 .background_img_container > img:nth-child(3) {z-index: 1;bottom:15%;right:2%;animation: dropContent1 1s linear;}
.section1 .background_img_container > img:nth-child(4) {z-index: 1;bottom:20%;left:6%;animation: dropContent2 .8s linear;}
.section1 .background_img_container > img:nth-child(5) {z-index: 7;bottom:15%;left:45%;animation: dropContent5 1.5s linear;}
.section1 .background_img_container > img:nth-child(6) {z-index: 1;top:55%;left:50%;animation: dropContent4 1s linear;}
.section1 .background_img_container > img:nth-child(7) {z-index: 6;top:50%;right:7%;animation: opacityContent2 .6s;}


.section2 .text_box > p {font-size: 20px;font-weight: 700;color:#FBFFFF;line-height: 160%;margin-top:10px; color: #000;}

/* section2 */
/* .sec2 {margin-top: 120px;} */
/* .sec2 .container { position: relative; width: 100%; height: 100%; padding: 0 15px; margin: 0 auto; max-width: 1200px; z-index: 16; }  */
.sec2 .container { position: relative; width: 100%; height: 100%; margin: 0 auto; z-index: 16; } 

.sec2 .offers { display: flex; align-items: center; justify-content: space-between;      padding: 100px 0;} 
.sec2 .offers:nth-of-type(4) { margin-bottom: 0; } 
.sec2 .offers.odd > .txt { width: 55%; } 

.sec2 .offers.odd > .img { width: 45%; height: 440px; padding-left: 2%; max-width: 468px; } 

.sec2 .offers.even > .txt { width: 55%; padding-left: 2%; } 

.sec2 .offers.even > .img { width: 45%; height: 440px; max-width: 468px; } 
.sec2 .offers > .img { position: relative; } 
.sec2 .offers > .img:before { position: absolute; top: -100px; width: 200px; height: 100px; content: ''; background-repeat: no-repeat; background-position: center; background-size: contain; } 
.sec2 .offers > .img img { height: 100%; object-fit: cover; } 

.sec2 .offers .img > p { font-weight: 300; font-size: 19px; letter-spacing: 0.1em; margin-top: 5px; } 
.sec2 .offers.odd .img > p { text-align: right; } 
.sec2 .offers.even .img > p { text-align: left; } 
.sec2 .offers .txt .mainT { font-weight: 500; font-size: 45px; line-height: 45px; } 

.sec2 .offers .txt .mainT > b { position: relative; font-weight: 500; z-index: 1;     color: #FED32C;} 

.sec2 .offers .txt .mainT > b:before { position: absolute; top: 60%; left: -10px; width: calc(100% + 20px); height: 30px; content: ''; transform: translateY(-50%); z-index: -1; } 

.sec2 .offers .sentents { margin-top: 3vh; } 
.sec2 .offers .sentents p { font-weight: 400; font-size: 15px; font-stretch: narrower; } 



footer {z-index: 2;position: relative;background-color: var(--white-color);}
footer .content {padding:80px 0;display: flex;align-items: flex-start;justify-content: space-between;}
footer .logo_box {display: inline-block;}
footer .logo_box > h2 {font-size: 28px;font-weight: 900;color:var(--black-color);}
footer .nav_wrap {display: flex;width:700px;justify-content: space-between}
footer .nav_wrap > ul {display: inline-block;}
footer .nav_wrap > ul > li {padding:10px 0;width:100%;}
footer .nav_wrap > ul > li:first-child {padding:5px 0 10px 0;}
footer .nav_wrap > ul > li:first-child > a {font-size: 16px;font-weight: 700;color:var(--black-color);}
footer .nav_wrap > ul > li > a {font-size: 14px;font-weight: 500;color:var(--sub-text-color);transition: color .3s;display: inline-block;width:100%;}
footer .nav_wrap > ul > li > a:hover {color:var(--main-color);}
footer .right_content {display: flex;flex-direction: column;}
footer .right_content > select {-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:'spoca';cursor: pointer;}
footer .right_content > select::-ms-expand{display:none;}
footer .right_content > select {width:300px;font-size: 16px;font-weight: 700;color:var(--black-color);border:0px;outline: 0px;text-indent: 10px;padding-bottom:5px;;padding-right:30px;border-bottom:2px solid var(--main-color);background:url('../img/arrow_btn.png') no-repeat 97% 30%;}
footer .right_content > select option {font-size: 15px;font-weight: 500;color:var(--black-color); text-transform: uppercase;}
footer .right_content > h4 {font-size: 16px;color:var(--sub-text-color);font-weight: 700;margin-top:20px;}
footer .right_content > h3 {font-size: 28px;color:var(--sub-text-color);font-weight: 900;margin:10px 0;}
footer .right_content > a {display: block;text-align: center;padding:15px 0;border:1px solid var(--sub-text-color);margin-top:10px;}
footer .right_content > a > span {display: block;font-size: 14px;font-weight: 700;color:var(--sub-text-color);}

.mobile_menu_modal {z-index: 3;position: fixed;top:80px;left:100%;background-color: var(--sub-color);width:100%;height:calc((var(--vh, 1vh) * 100) - 80px);opacity: 0;transition: all .3s;}
.mobile_menu_modal.active {left:0px;opacity: 1;}
.mobile_menu_modal .menu_wrap {width:100%;display: flex;flex-direction: column;margin-top:3vh;}
.mobile_menu_modal .menu_wrap > a {display: block;width:100%;padding:3vh 0;border-bottom:1px solid var(--black-color);font-size: 18px;font-weight: 700;color:var(--black-color);text-indent: 5px;}
.mobile_menu_modal .btn_wrap {position: absolute;bottom:5vh;width:calc(100% - 40px);font-size: 0;}
.mobile_menu_modal .btn_wrap > a {display: inline-block;width:calc(50% - 10px);padding:20px 0px;border-radius: 10px;background-color: var(--main-color);color:var(--white-color);text-align: center;font-size: 18px;font-weight: 700;}
.mobile_menu_modal .btn_wrap > a:first-child {margin-right:20px;}


/* width가 1200px이하 */
@media (max-width:1200px) { /* section2 */
 .section1 .text_box > .btn_box {display: block;}
 .sec2 .offers .txt .mainT { font-size: 40px; line-height: 40px; } 
 .sec2 .offers > .img:before { top: -70px; width: 153px; height: 70px; } 
 .sec2 .offers:nth-of-type(3) > .img:before { top: -75px; } 
 .sec2 .offers .img > p { font-size: 15px; } 
 }

/* width가 1024px이하 */
@media (max-width:1024px) { /* section1 */
 .mixBg { width: 70%; } 

 .main_slitxt { width: 70%; } 

 .swiper-container-horizontal > .mainBanPag { right: 35%; } 

 }

/* width가 1000px이하 */
@media (max-width:1000px) { } 

/* width가 768px 이하*/
@media (max-width:768px){

 /* section2 */
 .subSec .section_tit { font-size: 35px; margin-bottom: 70px; } 
 .sec2 .offers { flex-wrap: wrap; margin-bottom: 68px; } 
 .sec2 .offers .txt .mainT { font-size: 33px; } 
 .sec2 .offers .txt .mainT > b:before { top: 70%; height: 18px; } 
 .sec2 .offers.even { flex-direction: column-reverse;     text-align: center;} 
 .sec2 .offers.odd { flex-direction: column-reverse;     text-align: center;} 
 .sec2 .offers.even > .img,
 .sec2 .offers.even > .txt,
 .sec2 .offers.odd > .img,
 .sec2 .offers.odd > .txt { width: 100%; } 
 .sec2 .offers.even > .img,
 .sec2 .offers.odd > .img { height: 292px; padding-left: 0; max-width: 768px; margin-bottom: 40px; } 
 .sec2 .offers.even > .txt,
 .sec2 .offers.odd > .txt { margin-bottom: 74px; } 
 .sec2 .offers > .img:before { top: -45px; width: 123px; height: 40px; } 
 .sec2 .offers:nth-of-type(3) > .img:before { top: -49px; } 
 .list_cont .img .plan_img .close { width: 35px; height: 35px; } 
 }

/* width가 500px 이하*/
@media (max-width:500px){

 /* section2 */
 .sec2 .offers.even > .txt,
 .sec2 .offers.odd > .txt { margin-bottom: 50px; } 
 .sec2 .offers .txt .mainT { font-size: 25px; } 
 .sec2 .offers .sentents p { font-size: 13px; } 
 /* section3 */

 }


/* width가 425px이하 */
@media (max-width:426px){
 .sec2 .offers .txt .mainT { font-size: 23px; } 
 }

/* width가 320px 이하 */
@media (max-width:320px) { /* section1 */
 /* section2 */
 .sec2 .offers .sentents p { font-size: 13px; } 
 }