/* common */

:root {
    --main_color: #1DC800;
}

.container {width: 100%; max-width: 1400px; margin: 0 auto; box-sizing: border-box;}
.wrap {width: 100%; padding: 100px 0px 0px;}
.kboard-default-poweredby,
.kboard-wonderful-product-poweredby {display: none !important;}
.mo {display: none;}


/* header */

#header {background: #fff; border-bottom: 1px solid #d0d0d0;}
#header .inner {max-width: 1600px; width: 100%; height: 100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;}
#header .gnb ul {display: flex; align-items: center; gap: 60px;}
#header .gnb ul li a {font-size: 17px;}
#header .gnb ul li:hover a {color: var(--main_color); text-decoration: underline; font-weight: 700;}


/* main */

.main_visual {background: url(/web/img/mv_bg.jpg) no-repeat center / cover; width: 100%; position: relative; margin-bottom: 160px;}
.main_visual .container {display: flex; height: 485px; align-items: center;}
.main_visual h2 {font-size: 68px; font-weight: 800; color: #fff;}
.main_visual .img_box {width: 100%; max-width: 1000px; position: absolute; left: 50%; bottom: -35px; transform: translateX(-50%);}
.main_visual .img_box img {width: 100%;}

.mc_1 {margin-bottom: 150px;}
.mc_1 .title {margin-bottom: 110px; text-align: center;}
.mc_1 .title h3 {font-size: 54px; font-weight: 700;}
.mc_1 .item_box {display: flex; align-items: center; gap: 60px;}
.mc_1 .item_box .img_box {width: 50%;}
.mc_1 .item_box .img_box img {width: 100%;}
.mc_1 .item_box .text_box {width: 50%;}
.mc_1 .item_box .text_box h4 {font-size: 30px; font-weight: 800; margin-bottom: 35px;}
.mc_1 .item_box .text_box ul li {margin-bottom: 15px; font-size: 18px;}
.mc_1 .item_box .text_box ul li:last-child {margin-bottom: 0;}


/* footer */

#footer {background: #151515; padding: 50px 0px;}
#footer .container {text-align: center;}
#footer p {font-size: 15px; color: #555; margin-bottom: 15px;}
#footer a {font-size: 15px; color: #555; margin-bottom: 15px; display: block;}
#footer .sns {display: flex; gap: 10px; justify-content: center; margin-bottom: 15px;}
#footer .sns img {height: 36px; filter: invert(0.5); transition: all 0.3s;}
#footer .sns img:hover {filter: invert(1);}
#footer article {font-size: 13px; color: #777; margin-bottom: 15px;}
#footer span {font-size: 13px; color: #333;}

.slogan {width: 100%; background: url(/web/img/slogan_bg.jpg) no-repeat center / cover; background-attachment: fixed;c}
.slogan .container {padding: 180px 0px;}
.slogan .text_box {text-align: center;}
.slogan .text_box p {font-size: 20px; color: #fff; margin-bottom: 20px;}
.slogan .text_box h3 {font-size: 36px; font-weight: 700; margin-bottom: 24px; color: #fff;}
.slogan .text_box span {display: block; font-size: 24px; color: #fff; font-weight: 500; margin-bottom: 84px;}
.slogan .text_box a {font-size: 24px; font-weight: 700; color: #fff; padding: 20px 100px; border-radius: 100px; background: var(--main_color); box-sizing: border-box; display: inline-block;}

.float {position: fixed; overflow: hidden; right: 15px; top: 50%; transform: translateY(-50%); border-radius: 15px; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; text-align: center; background: #fff; width: 150px; box-sizing: border-box;}
.float p {width: 100%; background: var(--main_color); color: #fff; font-size: 18px; font-weight: bold; padding: 8px 0px;}
.float ul li {border-bottom: 1px solid #d0d0d0;}
.float ul li a {padding: 20px 0px; display: flex; flex-direction: column; align-items: center;}
.float ul li img {height: 60px; margin-bottom: 10px;}
.float ul li span {font-size: 14px; color: #000; display: block; font-weight: 500;}
.float ul li i {font-size: 14px; color: #28A9EA; display: block; margin-top: 3px;}



/* sub */

.sub_banner {width: 100%; height: 560px; display: none;}
.sub_1 .sub_banner {background: url(/web/img/sub_1_banner_bg.jpg) no-repeat center / cover;}
.sub_2 .sub_banner {background: url(/web/img/sub_2_banner_bg.jpg) no-repeat center / cover;}
.sub_3 .sub_banner {background: url(/web/img/sub_3_banner_bg.jpg) no-repeat center / cover;}

.sub_title {text-align: center; padding: 100px 0px 0px;}
.sub_title h3 {font-size: 52px; font-weight: 800;}


/* sub_1 */

.sub_1 .sc_1 {padding: 150px 0px;}
.sub_1 .sc_1 ul li {display: flex; align-items: center; gap: 60px; margin-bottom: 100px;}
.sub_1 .sc_1 ul li:last-child {margin-bottom: 0;}
.sub_1 .sc_1 ul li .video_box {width: 50%;}
.sub_1 .sc_1 ul li .video_box img {width: 100%;}
.sub_1 .sc_1 ul li .text_box {width: 50%;}
.sub_1 .sc_1 ul li .text_box p {font-size: 36px; font-weight: 700; margin-bottom: 14px;}
.sub_1 .sc_1 ul li .text_box article {font-size: 20px; font-weight: 300; max-width: 500px;}

.sub_1 .sc_2 {padding: 150px 0px; background: #f8f8f8;}
.sub_1 .sc_2 .title {margin-bottom: 110px; text-align: center;}
.sub_1 .sc_2 .title h3 {font-size: 54px; font-weight: 700;}
.sub_1 .sc_2 ul {display: flex; flex-wrap: wrap; gap: 30px;} 
.sub_1 .sc_2 ul li {width: calc(25% - 23px); padding: 20px; border-radius: 20px; background: #fff; box-sizing: border-box;}
.sub_1 .sc_2 ul li .img_box {width: 100%; margin-bottom: 17px;}
.sub_1 .sc_2 ul li .img_box img {width: 100%;}
.sub_1 .sc_2 ul li article {font-size: 15px; font-weight: 500;}


/* sub_2 */

.sub_2 .sc_1 {padding: 150px 0px;}


/* sub_3 */

.sub_3 .sc_1 {padding: 150px 0px;}


/* responsive */

@media (max-width: 1400px) {

    #header .inner,
    .container {padding: 0px 50px; max-width: 100%; box-sizing: border-box;}

}

@media (max-width: 1280px) {

    .main_visual h2 {font-size: 52px;}

    .sub_title h3,
    .sub_1 .sc_2 .title h3,
    .mc_1 .title h3 {font-size: 40px}
    .mc_1 .item_box .text_box h4 {font-size: 20px;}
    .mc_1 .item_box .text_box ul li {font-size: 16px;}

    .slogan .container {padding: 100px 0px;}
}

@media (max-width: 1024px) {

    #header .inner {height: 60px;}
    #header .inner .logo img {height: 36px;}
    #header .gnb ul {gap: 20px;}
    #header .gnb ul li a {font-size: 14px;}

    #header .inner,
    .container {padding: 0px 20px;}    

    .mc_1 .item_box {flex-direction: column;}
    .mc_1 .item_box .img_box,
    .mc_1 .item_box .text_box {width: 100%;}

    .slogan .text_box a {font-size: 18px;}

    .sub_1 .sc_1,
    .sub_2 .sc_1,
    .sub_3 .sc_1 {padding: 80px 0px;}
    
    .sub_1 .sc_1 ul li {gap: 30px}
    .sub_1 .sc_1 ul li .text_box p {font-size: 26px;}
    .sub_1 .sc_1 ul li .text_box article {font-size: 16px;}

    .sub_1 .sc_2 ul li {width: calc(50% - 15px);}

    .float {display: none;}
}


@media (max-width: 768px) {
    
    .mo {display: block;}
    .pc {display: none;}

    #header .inner {flex-direction: column; justify-content: center; gap: 7px; height: 80px;}

    .sub_title h3,
    .sub_1 .sc_2 .title h3,
    .mc_1 .title h3 {font-size: 28px}

    .main_visual .container {justify-content: center;}
    .main_visual h2 {text-align: center; font-size: 43px;}
    .main_visual .img_box {bottom: -70px;}

    .main_visual {margin-bottom: 100px;}

    .slogan .text_box p {font-size: 16px;}
    .slogan .text_box h3 {font-size: 28px;}
    .slogan .text_box span {font-size: 14px; margin-bottom: 50px;}
    .slogan .text_box a {font-size: 16px; }

    .sub_1 .sc_1 ul li {flex-direction: column;}
    .sub_1 .sc_1 ul li:nth-child(2n) {flex-direction: column-reverse;}
    .sub_1 .sc_1 ul li .video_box {width: 100%;}
    .sub_1 .sc_1 ul li .text_box {width: 100%;}
    .sub_1 .sc_2 ul li {width: 100%;}

}