@charset "utf-8";
/* ==================================================================================================== *
 *
 *     WEBIS THEME DESIGN STYLE SHEET - MAIN
 *     COPYRIGHT © WEBIS.KR ALL RIGHTS RESERVED.
 *
 * ==================================================================================================== */

/* ---------------------------------------------------------------------------------------------------- *
 *     WEBIS THEME DESIGN STYLE SHEET - MAIN FRAME
 * ---------------------------------------------------------------------------------------------------- */

/* [MAIN FRAME] - CONTENT */
.ws_main_common_wrap {position:relative;padding:7rem 0}

/* ---------------------------------------------------------------------------------------------------- *
 *     WEBIS THEME DESIGN STYLE SHEET - MAIN/INDEX
 * ---------------------------------------------------------------------------------------------------- */

/* [MAIN] - SECTION01 */
.ws_section01_wrap {position:relative;z-index:1;background-color:#FFF}
.ws_section01_wrap .es_content_area {display:flex;flex-wrap:wrap;gap:2rem}
.ws_section01_wrap .es_content_area .bs_item_box {overflow:hidden;display:flex;align-items:flex-end;position:relative;width:100%;padding:5rem 3rem;border-radius:2rem;background-color:#F8F8F8;background-position:center;background-size:cover;background-repeat:no-repeat;transition:.4s}
.ws_section01_wrap .es_content_area .bs_item_box.bs_item01 {background-image:url('../img/main/section01_img01.png')}
.ws_section01_wrap .es_content_area .bs_item_box.bs_item02 {background-image:url('../img/main/section01_img02.png')}
.ws_section01_wrap .es_content_area .bs_item_box.bs_item03 {background-image:url('../img/main/section01_img03.png')}
.ws_section01_wrap .es_content_area .bs_item_box.bs_item04 {background-image:url('../img/main/section01_img04.png')}
.ws_section01_wrap .es_content_area .bs_item_box::before {content:'';position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;background-color:var(--webis_color);transition:.8s;transition-delay:.4s}
.ws_section01_wrap .es_content_area .bs_item_box::after {content:'';position:absolute;top:0;left:0;z-index:3;width:100%;height:100%;background-color:#FFF;transition:.8s}
.ws_section01_wrap .es_content_area .bs_item_box.active::before {height:0}
.ws_section01_wrap .es_content_area .bs_item_box.active::after {height:0}
.ws_section01_wrap .es_content_area .bs_item_box .is_text_field {color:#FFF}
.ws_section01_wrap .es_content_area .bs_item_box .is_text_field:before {content:'';display:block;position:absolute;bottom:0;left:0;width:100%;height:100%;border-radius:2rem;background:linear-gradient(to top, rgba(0,0,0,.5), transparent)}
.ws_section01_wrap .es_content_area .bs_item_box .is_text_field .ss_title {position:relative;z-index:1;font-size:clamp(2.5rem, 3.5vw, 5rem)}
.ws_section01_wrap .es_content_area .bs_item_box .is_text_field .ss_desc {position:relative;z-index:1;font-size:clamp(1.6rem, 2vw, 2.5rem)}

/* [MAIN] - SECTION02 */
.ws_section02_wrap {width:95%;margin:0 auto;border-radius:2rem;background-image:url('../img/main/section02_bg.png');background-position:center;background-size:cover;background-repeat:no-repeat}
.ws_section02_wrap .es_content_area {display:flex;justify-content:center;align-items:center;min-height:50rem;padding:10rem 0;text-align:center}
.ws_section02_wrap .es_content_area .bs_text_box {color:#FFF}
.ws_section02_wrap .es_content_area .bs_text_box .is_label {font-weight:bold;font-size:clamp(1.6rem, 2vw, 2.5rem)}
.ws_section02_wrap .es_content_area .bs_text_box .is_title {font-size:clamp(2.5rem, 3.5vw, 5rem)}
.ws_section02_wrap .es_content_area .bs_text_box .is_title .ss_point {}
.ws_section02_wrap .es_content_area .bs_text_box .is_desc {font-weight:bold;font-size:clamp(2rem, 2.5vw, 3rem);line-height:1}
.ws_section02_wrap .es_content_area .bs_text_box .is_desc .ss_point {font-size:5em}

/* [MAIN] - SECTION03 */
.ws_section03_wrap {}
.ws_section03_wrap .es_content_area {display:flex;flex-direction:column;justify-content:center;align-items:center}
.ws_section03_wrap .es_content_area .bs_title {color:#022384;font-size:clamp(3rem, 4vw, 7rem);text-align:center}
.ws_section03_wrap .es_content_area .bs_title .is_point {color:var(--webis_color);font-size:1.2em}
.ws_section03_wrap .es_content_area .bs_sub {margin:5rem 0;color:#000;font-weight:bold;font-size:clamp(2.5rem, 3.5vw, 5rem);text-align:center}
.ws_section03_wrap .es_content_area .bs_sub .is_item {display:block}
.ws_section03_wrap .es_content_area .bs_desc {position:relative;padding:6rem 0;font-weight:500;font-size:clamp(2rem, 2vw, 3rem)}
.ws_section03_wrap .es_content_area .bs_desc:before,
.ws_section03_wrap .es_content_area .bs_desc:after {content:'';display:block;position:absolute;width:5rem;height:4.2rem;background-position:center;background-size:contain;background-repeat:no-repeat}
.ws_section03_wrap .es_content_area .bs_desc:before {top:0;left:0;background-image:url('../img/main/quotes_s.png')}
.ws_section03_wrap .es_content_area .bs_desc:after {right:0;bottom:0;background-image:url('../img/main/quotes_e.png')}
.ws_section03_wrap .es_content_area .bs_desc .is_item {padding:2rem 0;border-bottom:1px solid #DDD}
.ws_section03_wrap .es_content_area .bs_desc .is_item:last-child {border-bottom:0}
.ws_section03_wrap .es_content_area .bs_bottom {display:flex;align-items:center;gap:1rem;margin-top:7rem;color:var(--webis_color);font-size:clamp(3rem, 4vw, 6rem);line-height:1.2;font-family:'JoyfulStory'}
.ws_section03_wrap .es_content_area .bs_bottom i {flex-shrink:0;display:inline-block;width:5rem;height:5rem;border-radius:50%;background-color:var(--webis_color);color:#FFF;font-size:0.8em;line-height:5rem;text-align:center}

/* [MAIN] - SECTION04 */
.ws_section04_wrap {background-image:url('../img/main/section04_bg.png');background-position:center;background-size:cover;background-repeat:no-repeat}
.ws_section04_wrap .es_title {margin-bottom:10rem;color:#FFF;font-size:clamp(3rem, 4vw, 7rem);text-align:center}
.ws_section04_wrap .es_title .bs_point {}
.ws_section04_wrap .es_content_area {display:flex;flex-wrap:wrap;gap:4rem}
.ws_section04_wrap .es_content_area .bs_item_box {display:flex;flex-wrap:wrap;align-items:center;gap:3rem;position:relative;width:100%;padding:3rem;border-radius:2rem;box-shadow:0 0.4rem 1.2rem rgba(122,122,122,.12);background-color:rgba(255,255,255,.05)}
.ws_section04_wrap .es_content_area .bs_item_box .is_icon {width:100%;text-align:center}
.ws_section04_wrap .es_content_area .bs_item_box .is_icon img {max-width:15rem;width:100%}
.ws_section04_wrap .es_content_area .bs_item_box .is_text_field {color:#FFF}
.ws_section04_wrap .es_content_area .bs_item_box .is_text_field .ss_title {font-size:clamp(2rem, 2vw, 2.5rem)}
.ws_section04_wrap .es_content_area .bs_item_box .is_text_field .ss_desc {margin-top:1rem;font-size:clamp(1.6rem, 2vw, 2rem)}


/* ---------------------------------------------------------------------------------------------------- *
 *     WEBIS THEME DESIGN STYLE SHEET - DESKTOP BASE BREAKPOINT
 * ---------------------------------------------------------------------------------------------------- */

/* WEBIS MEDIA QUERIES 4XL (2560px) DOWN (MAX) */
@media all and (max-width:2559.98px) {

}

/* WEBIS MEDIA QUERIES 3XL (1920px) DOWN (MAX) */
@media all and (max-width:1919.98px) {

}

/* WEBIS MEDIA QUERIES 2XL (1600px) DOWN (MAX) */
@media all and (max-width:1599.98px) {

}

/* WEBIS MEDIA QUERIES XL (1440px) DOWN (MAX) */
@media all and (max-width:1439.98px) {

}

/* WEBIS MEDIA QUERIES LG (1280px) DOWN (MAX) */
@media all and (max-width:1279.98px) {

}

/* WEBIS MEDIA QUERIES MD (1024px) DOWN (MAX) */
@media all and (max-width:1023.98px) {

}

/* WEBIS MEDIA QUERIES SM (768px) DOWN (MAX) */
@media all and (max-width:767.98px) {

}

/* WEBIS MEDIA QUERIES SS (640px) DOWN (MAX) */
@media all and (max-width:639.98px) {

}

/* WEBIS MEDIA QUERIES 2SS (480px) DOWN (MAX) */
@media all and (max-width:479.98px) {

}

/* WEBIS MEDIA QUERIES 3SS (320px) DOWN (MAX) */
@media all and (max-width:319.98px) {

}

/* WEBIS MEDIA QUERIES 4SS (280px) DOWN (MAX) */
@media all and (max-width:279.98px) {

}

/* ---------------------------------------------------------------------------------------------------- *
 *     WEBIS THEME DESIGN STYLE SHEET - MOBILE BASE BREAKPOINT
 * ---------------------------------------------------------------------------------------------------- */

/* WEBIS MEDIA QUERIES 4SS (280px) UP (MIN) */
@media all and (min-width:280px) {

}

/* WEBIS MEDIA QUERIES 3SS (320px) UP (MIN) */
@media all and (min-width:320px) {

}

/* WEBIS MEDIA QUERIES 2SS (480px) UP (MIN) */
@media all and (min-width:480px) {
	.ws_section04_wrap .es_content_area .bs_item_box .is_icon {width:10rem}
	.ws_section04_wrap .es_content_area .bs_item_box .is_text_field {flex:1}
}

/* WEBIS MEDIA QUERIES SS (640px) UP (MIN) */
@media all and (min-width:640px) {
	.ws_section01_wrap .es_content_area {--gap-size:clamp(2rem, 5vw, 10rem);gap:var(--gap-size)}
	.ws_section01_wrap .es_content_area .bs_item_box {width:calc(100% / 2 - (1 * var(--gap-size) / 2));height:35rem}
	.ws_section01_wrap .es_content_area .bs_item_box:nth-child(even) {margin-top:var(--gap-size)}

	.ws_section04_wrap .es_content_area .bs_item_box .is_icon {width:20rem}
}

/* WEBIS MEDIA QUERIES SM (768px) UP (MIN) */
@media all and (min-width:768px) {
	.ws_main_common_wrap {padding:10rem 0}

	.ws_section01_wrap .es_content_area .bs_item_box {height:40rem}
}

/* WEBIS MEDIA QUERIES MD (1024px) UP (MIN) */
@media all and (min-width:1024px) {
	.ws_section01_wrap .es_content_area .bs_item_box {height:50rem}

	.ws_section03_wrap .es_content_area .bs_sub {margin:10rem 0}
}

/* WEBIS MEDIA QUERIES LG (1280px) UP (MIN) */
@media all and (min-width:1280px) {
	.ws_main_common_wrap {padding:20rem 0}

	.ws_section01_wrap .es_content_area .bs_item_box {height:70rem;padding:7rem 5rem}

	.ws_section04_wrap .es_content_area .bs_item_box {flex-direction:row-reverse;width:calc(100% / 2 - (1 * 4rem / 2))}
}

/* WEBIS MEDIA QUERIES XL (1440px) UP (MIN) */
@media all and (min-width:1440px) {

}

/* WEBIS MEDIA QUERIES 2XL (1600px) UP (MIN) */
@media all and (min-width:1600px) {

}

/* WEBIS MEDIA QUERIES 3XL (1920px) UP (MIN) */
@media all and (min-width:1920px) {

}

/* WEBIS MEDIA QUERIES 4XL (2560px) UP (MIN) */
@media all and (min-width:2560px) {

}