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

	Variables (공통 변수 지정)

**************************************************/
:root {

	/* layout */
	--website-layout-width : 1280px; /* 웹사이트 레이아웃 width 값 */

    --gra : linear-gradient(130deg, #68e0cf, #209cff);
    --color: #209cff;
    --color-sky: #f7f9fb;
    --color-gray: #f3f7fa;

}

/**************************************************

	Common

**************************************************/
body,td,form,select,input,button,textarea,div,option,pre,p,span,blockquote,li,dt,dd,legend,label,h1,h2,h3,h4,h5,h6{
    font-family: 'pre', 'noto', sans-serif;
    font-size: 14px;color: #555;letter-spacing: -0.025em;line-height: 1.6;
    word-break:keep-all !important; -ms-word-break: break-all; word-break: break-all; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;
}

/**************************************************

	Public

**************************************************/
#landing_wrap {overflow: hidden;}

#header {position: fixed;background: none;box-shadow: none;transition: none;box-sizing: border-box;}
#header .logo {top: 0;left: 55px;display: flex;align-items: center;height: 120px;}
#header .logo img {display: block;max-height: 90px;}

#tnb {top: 0;right: 55px;display: flex;flex-wrap: wrap;gap: 10px;height: 120px;align-items: center;}
#tnb > li {margin: 0;}
#tnb > li > a {display: block;padding: 0 14px;height: 36px;border-radius: 5px;text-align: center;align-content: center;color: #222;font-weight: 700;}
#tnb > li > a.blue {background: var(--color);color: #fff;}

#mainBottom {height: auto !important;}
#footer {padding-bottom: 100px;}




/**************************************************

	Landing
	
**************************************************/
#landing {min-height: 100vh;}

.title {display: flex;justify-content: center;align-items: center;flex-direction: column;margin-bottom: 70px;}
.title > * {display: block;text-align: center;}
.title > h2 {font-size: 52px;color: #222;font-weight: 700;line-height: 1.4;}
.title > h3 {font-size: 38px;color: #222;font-weight: 700;line-height: 1.4;}
.title > p {margin-top: 15px;font-size: 20px;font-weight: 500;}


.land1 {padding: 250px 0 0;background: url('../images/landing/land1-bg1.jpg') no-repeat left top, url('../images/landing/land1-bg2.jpg') no-repeat right 610px;}
.land1 .slogan {margin-bottom: 95px;display: flex;justify-content: center;align-items: center;flex-direction: column;}
.land1 .slogan > * {text-align: center;display: block;}
.land1 .slogan > h2 {font-size: 60px;color: #222;font-weight: 700;line-height: 76px;}
.land1 .slogan > p {margin-top: 30px;font-size: 20px;line-height: 32px;}
.land1 .slogan > a {padding-left: 16px;margin-top: 45px;background: var(--gra);width: 250px;height: 68px;border-radius: 10px;text-align: center;align-content: center;font-size: 20px;color: #fff;font-weight: 700;text-decoration: none !important;box-sizing: border-box;}
.land1 .slogan > a i {margin-left: 12px;font-size: 20px;display: inline-block;vertical-align: -1px;}
.land1 .slogan > a i:before {display: block;}

.land1 .counting {display: flex;justify-content: space-between;margin: 0 auto 60px;width: var(--website-layout-width);}
.land1 .counting > li + li {border-left: 1px solid #eee;}
.land1 .counting > li {flex: 1;text-align: center;padding: 18px 10px 10px;}
.land1 .counting > li > .num {display: flex;justify-content: center;align-items: center;}
.land1 .counting > li > .num > * {color: var(--color);line-height: 1em;}
.land1 .counting > li > .num strong {font-size: 52px;font-weight: 700;letter-spacing: -0.03em;}
.land1 .counting > li > .num i {font-size: 14px;margin-left: 5px;}
.land1 .counting > li > p {margin-top: 15px;font-size: 20px;color: #222;font-weight: 500;}

.land1 .banner {padding: 20px 0 0;margin: 0 70px;background: url('../images/landing/land1-bg3.png') no-repeat left bottom;background-size: contain;position: relative;}
.land1 .banner .imgc img {transform: translateY(16px);}
.land1 .banner .btn {width: 646px;margin-left: -323px;position: fixed;z-index: 55;bottom: 25px;left: 50%;background: #fff;border-radius: 10px;padding: 14px;box-sizing: border-box;box-shadow: 5px 5px 30px rgba(0,0,0,0.1);display: flex;justify-content: space-between;align-items: center;}
.land1 .banner .btn p {margin-left: 18px;font-size: 18px;color: #222;font-weight: 700;line-height: 1.2;}
.land1 .banner .btn a {width: 170px;height: 50px;background: var(--gra);border-radius: 10px;text-align: center;align-content: center;font-size: 18px;color: #fff;font-weight: 700;text-decoration: none !important;}
.land1 .banner .btn:hover {z-index: 0;}
.land1 .banner .btn:hover:after {display: block;content: '';position: absolute;z-index: -1;inset: 0;border: 1px solid var(--color);border-radius: 10px;}
.land1 .banner .btn:hover p {color: var(--color);}


.land2 {max-width: var(--website-layout-width);margin: 150px auto;}
.land2 ._tabWrap {display: flex;justify-content: space-between;border: 1px solid #ddd;border-radius: 20px;flex-direction: inherit;align-items: inherit;overflow: hidden;margin: 0;}
.land2 ._tabWrap .tab-tab {width: 530px;display: inline-flex;flex-direction: column;margin: 0;border-radius: 0;background: #fff;padding: 0 55px;}
.land2 ._tabWrap .tab-tab > li + li {border-top: 1px solid #ddd;}
.land2 ._tabWrap .tab-tab > li {flex: 1;width: 100%;}
.land2 ._tabWrap .tab-tab > li button {padding: 45px 70px 45px 65px;background: none;border: none;position: relative;}
.land2 ._tabWrap .tab-tab > li button:after,
.land2 ._tabWrap .tab-tab > li button:before {display: block;content: '';background: #95959b;width: 18px;height: 2px;position: absolute;top: 45px;right: 0;}
.land2 ._tabWrap .tab-tab > li button:after {margin-top: 15px;}
.land2 ._tabWrap .tab-tab > li button:before {margin-right: 8px;margin-top: 7px;width: 2px;height: 18px;}
.land2 ._tabWrap .tab-tab > li button img {position: absolute;top: 45px;left: 0;}
.land2 ._tabWrap .tab-tab > li button strong {display: block;line-height: 44px;text-align: left;font-size: 26px;color: #111;}
.land2 ._tabWrap .tab-tab > li button p {text-align: left;margin-top: 10px;font-size: 19px;letter-spacing: -0.04em;display: none;}
.land2 ._tabWrap .tab-tab > li.active button p {display: block;}
.land2 ._tabWrap .tab-tab > li.active button:before {display: none;}
.land2 ._tabWrap .tab-tab > li:not(.active) button strong {color: #555;}
.land2 ._tabWrap .tab-article {flex: 1;background: var(--color-gray);border-left: 1px solid #ddd;}
.land2 ._tabWrap .tab-article article {display: flex;justify-content: end;align-items: end;flex-wrap: wrap;}
.land2 ._tabWrap .tab-article article img {max-width: 100%;}


.land3 {max-width: var(--website-layout-width);margin: 150px auto;}
.land3 .txt_boxs > li {display: flex;flex-direction: column;justify-content: end;}
.land3 .txt_boxs > li > *:not(.img) {text-align: center;}
.land3 .txt_boxs > li.gra {background: var(--gra);}
.land3 .txt_boxs > li.gra > *:not(.img) {color: #fff;}
.land3 .txt_boxs > li.gra > p {margin-top: 0;font-size: 32px;}
.land3 .txt_boxs > li.gra > strong {margin-top: 10px;font-size: 44px;line-height: 1.4;}
.land3 .txt_boxs > li.gra > strong .col {font-family: inherit;font-size: inherit;color: #d7ffd6 !important;font-weight: inherit;letter-spacing: inherit;line-height: inherit;}
.land3 .txt_boxs > li.gra > .img {margin-top: 20px;}



.land4 {padding: 150px 0;margin: 150px 0;background: var(--color-sky);}
.land4 .inner {max-width: var(--website-layout-width);margin: 0 auto;}
.zigzag > li + li {margin-top: 100px;}
.zigzag > li {display: flex;justify-content: space-between;align-items: center;gap: 120px;}
.zigzag > li:nth-child(even) {flex-direction: row-reverse;}
.zigzag > li > * {flex: 1;}
.zigzag > li .img {background: #e9eef4;border-radius: 20px;overflow: hidden;box-shadow: 5px 5px 30px rgba(0,0,0,0.05);}
.zigzag > li .img img {display: block;width: 100%;}
.zigzag > li .inf {display: flex;flex-direction: column;align-items: start;}
.zigzag > li .inf > .cate {padding: 0 20px;height: 38px;border: 1px solid var(--color);border-radius: 19px;text-align: center;align-content: center;font-size: 16px;color: var(--color);font-weight: 700;box-sizing: border-box;}
.zigzag > li .inf > .ul_txt {margin-top: -5px;}
.zigzag > li .inf > strong {display: block;margin-top: 30px;font-size: 28px;color: #222;font-weight: 700;}
.zigzag > li .inf > p {margin-top: 10px;font-size: 20px;line-height: 34px;}
.zigzag > li .inf > p.fwb {font-size: 22px;font-weight: 700;color: #222;}
.zigzag > li .inf > a {margin-top: 35px;width: 185px;height: 55px;background: var(--gra);border-radius: 10px;text-align: center;align-content: center;font-size: 18px;color: #fff;font-weight: 700;text-decoration: none !important;}
.ul_txt > li + li {border-top: 1px solid #ddd;}
.ul_txt > li {padding: 35px 0;}
.ul_txt > li > strong {display: block;font-size: 28px;color: #222;font-weight: 700;}
.ul_txt > li > p {margin-top: 10px;font-size: 20px;line-height: 34px;}



.land5 {max-width: var(--website-layout-width);margin: 150px auto;}
.land5 .zigzag > li .img {box-shadow: none;}



.land6 {max-width: var(--website-layout-width);margin: 150px auto;}
.land6 .slide_wrap {margin-bottom: 30px;background: linear-gradient(130deg, #209cff, #68e0cf);padding: 70px 0 80px;overflow: hidden;border-radius: 20px;position: relative;}
.land6 .slide_wrap:before {display: block;content: '';position: absolute;z-index: 2;inset: 0 0 0 auto;width: 20%;background: linear-gradient(to right, #68e0d000, #68e0d0);}
.land6 .slide_wrap:after {display: block;content: '';position: absolute;z-index: 2;inset: 0 auto 0 0;width: 20%;background: linear-gradient(to left, #209bff00, #209cff);}
.land6 .slide_wrap .title {margin-bottom: 50px;}
.land6 .slide_wrap .title > * {color: #fff;}
.land6 .slide_wrap .item {height: 146px;margin: 10px;background: #fff;border-radius: 10px;align-content: center;}
.land6 .slide_wrap .item .ico {height: 75px;display: flex;justify-content: center;align-items: center;}
.land6 .slide_wrap .item .ico img {max-width: 100%;max-height: 100%;}
.land6 .slide_wrap .item > p {text-align: center;margin-top: 5px;font-size: 17px;font-weight: 500;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.txt_boxs {display: flex;justify-content: space-between;gap: 30px;}
.txt_boxs > li {flex: 1;padding-top: 60px;border-radius: 20px;background: var(--color-gray);}
.txt_boxs > li > strong {display: block;font-size: 34px;color: #222;font-weight: 700;}
.txt_boxs > li > p {margin-top: 10px;font-size: 20px;line-height: 34px;font-weight: 500;}
.txt_boxs > li > *:not(.img) {padding: 0 60px;}
.txt_boxs > li > .img {display: flex;justify-content: center;align-items: end;}





.land7 {padding: 150px 0;margin: 150px 0 0;background: url('../images/landing/land7-bg1.jpg') no-repeat left bottom, url('../images/landing/land7-bg2.jpg') no-repeat right bottom;background-size: contain, contain;}
.land7 .inner {max-width: var(--website-layout-width);margin: 0 auto;}
.land7 .btns {display: flex;justify-content: center;align-items: center;flex-wrap: wrap;gap: 12px;}
.land7 .btns > * {width: 250px;height: 68px;line-height: 66px;border: 1px solid var(--color);text-align: center;align-content: center;border-radius: 5px;font-size: 20px;font-weight: 700;color: var(--color);text-decoration: none !important;}
.land7 .btns > *.gra {background: var(--gra);color: #fff;border: none;line-height: 68px;}
.land7 .btns > *:hover {box-shadow: 3px 3px 10px rgba(0,0,0,0.12);}