/*-----------------------------------------
           style-peakmonitor
-------------------------------------------*/
.max-wd, .max-nwd {width: 100%; max-width: 800px; margin: 0 auto; padding: 0 20px; box-sizing: border-box;}
.max-nwd {padding: 0;}
.title-st0, .title-st1, .title-st2, .title-st3, .title-st4 {font-weight: 600; word-break: keep-all;}
.title-st0 {font-size: var(--font-title0); line-height: 1;}
.title-st1 {font-size: var(--font-title1); margin: 0 0 1em 0; line-height: 1.2; color: var(--color-black); overflow-wrap: anywhere;}
.title-st2 {font-size: var(--font-title2); margin: 0 0 0.7em 0; line-height: 1.2; color: var(--color-default);}
.title-st3 {font-size: var(--font-title3); margin: 0 0 0.7em 0; line-height: 1.3; color: var(--color-default);}
.desc-st1 {line-height: 1.57; font-weight:300; margin: 0 0 1em 0; color: var(--color-gray);}
.desc-st2 {font-size:var(--font-desc2); line-height: 1.57; font-weight:400; margin: 0 0 1em 0; color: var(--color-txt1);}
.bg-gray2 {background-color: var(--color-bg-gray);}
.bg-primary {background-color: var(--color-bg-second);}
.bg-white {background-color: var(--color-white);}
.bg-default {background-color: var(--color-default);}
.color-primary {color: var(--color-primary);}
.color-second {color: var(--color-second);}
.txt-center {text-align: center;}

.gap-35 {height: var(--gap-35);}
.gap-60 {height: var(--gap-60);}
.type-bold {font-weight: 600;}
.img-Box {text-align: center;}
.img-Box > img {width: 100%; max-width: 700px; margin: 10px auto;}
.gap-withline {position: relative; display: block; height: 1px; width: 100%; border-bottom: 1px solid #ddd;}
.gap-withline::after {content: ''; position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%); display: block; width: 100px; height: 1px; background-color: var(--color-second);}

/* -- main tab menu -- */
.desc-list40 {display: flex; flex-wrap: wrap; gap: 15px; margin: 25px 0 0;}
.desc-list40 > li {display: inline-block; padding: 15px 22px; border-radius: var(--border-radius1); background-color: var(--color-default); color:var(--color-white);}
.desc-list40 > li > a {font-weight: 400;}

@media screen and (max-width:768px) {
    .max-wd, .max-nwd {width: 100%; max-width: 100%;}
    .title-st0 {font-size: 11vw; }
    .title-st1 {font-size: 27px;}
}

/* -- Shapes List -- */
.shapes-list {}
.shapes-list > li {background-color: var(--color-bg-gray); border-radius: var(--border-radius1); display: flex; align-items: center; padding: 25px 30px; box-sizing: border-box; overflow-wrap: anywhere;}
.shapes-list.white-bg > li {background-color: var(--color-white); box-shadow: 1px 2px 10px rgba(0,0,0,7%);}
.shapes-list.primary-bg > li {background-color: var(--color-bg-second);}
.shapes-list > li:not(:first-child) {margin: 25px 0 0 0;}
.shapes-list > li > .imgBx {width: 50px; margin: 0 28px 0 0;}
.shapes-list > li > .imgBx img {width: 100%;}
.shapes-list > li > .desc {flex:1;}
.shapes-list > li > .desc .title-st3 {margin: 0 0 10px 0; color: var(--color-default);}
.shapes-list > li > .desc .desc-st1 {margin: 0;}
.shapes-list > li > .desc > .add-desc1 {font-size: 16px; margin: 0 0 5px 0; color: var(--color-second);}

.shapes-list > li > .desc > .tit-line {position: relative; padding: 0 0 12px; border-bottom: 1px solid #ddd;}
.shapes-list > li > .desc > .tit-line::before {content: ''; display: block; position: absolute; height: 1px; width: 110px; left: 0; bottom: -1px; background-color: var(--color-second);}

.shapes-list.primary-bg > li > .desc > .tit-line::before {background-color: var(--color-default);}
.shapes-list.primary-bg > li > .desc > .title-st3 {color: var(--color-primary);}

.shapes-list.cub-list {display: grid; grid-template-columns:repeat(2, 1fr); grid-template-rows: auto; gap: 15px; justify-content: center;}
.shapes-list.cub-list > li {flex-direction: column; border-bottom: 1px solid rgba(0,0,0,0.02);}
.shapes-list.cub-list > li > .desc > .title-st3 {color: var(--color-primary); text-align: center;}
.shapes-list.cub-list > li > .imgBx {width: 100%; margin: 0 0 30px 0; text-align: center;}
.shapes-list.cub-list > li > .imgBx img {width: 100%; max-width: 47px;}
.shapes-list.cub-list > li:not(:first-child) {margin: 0;}

.att-mail {padding: 20px 0 5px; display: flex; align-items: center; justify-content: flex-start;}
.att-mail > .attte-02 {width: auto; height: auto; padding: 7px 17px; border-radius: var(--border-radius1); background-color: var(--color-primary); color: var(--color-white); font-weight: 500; box-sizing: border-box;}
.att-mail > .attte-02::before {content: ''; display:inline-block; width: 23px; height: 23px; background: url('../img/icons/mail-regular-wh.svg') no-repeat center / cover; vertical-align:center; margin: 0 8px 0 0; vertical-align: middle;}

.shapes-list.main-whbg > li {background-color: var(--color-white); border: 1px solid #dedede; box-shadow: 0 1px 4px rgba(0,0,0,0.05);}

@media screen and (max-width:768px) {
    .shapes-list > li {flex-direction: column; padding: 35px 25px 30px;}
    .shapes-list > li > .imgBx {width: 100%; margin: 0 0 30px 0; text-align: center;}
    .shapes-list > li > .imgBx img {width: 100%; max-width: 45px;}
    .att-mail {flex-direction: column; align-items: flex-start;}
    .att-mail > .attte-02 {border-radius:var(--border-radius1); padding: 10px 15px; box-sizing: border-box;}
    .att-mail > .attte-02::before {display: block; margin: 0 0 5px 0;}

    .shapes-list.cub-list {display:flex; flex-direction: column; gap: 25px;}
    .shapes-list.cub-list > li {flex-direction: column;}
    .shapes-list.cub-list > li > .imgBx img {width: 100%; max-width: 45px;}
}
/* -- End Shapes List -- */
/*-----------------------------------------
           style-main
-------------------------------------------*/
.main-top-section {position: relative; background: url('../img/common/bg-obi02.jpg') no-repeat center / cover;  height: 680px; animation: mainbg-scale 7s forwards; overflow: hidden;}
@keyframes mainbg-scale {
    from {background-size: auto 130%;}
    to {background-size: auto 100%;}
}
.main-top-section::after{content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.68); z-index: 3;}
.main-top-section > .inner {position: relative; height: 100%; z-index: 5; overflow: hidden;}
.main-top-section > .inner > .inner-Box {width: 95%; position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); text-align: center; box-sizing: border-box; word-break: break-all; overflow-wrap: anywhere; }
.main-top-section > .inner .title-st0 {color: var(--color-white);}
.main-top-section > .inner .title-st3 {padding: 0 50px; color: var(--color-whitegray); font-weight: 400; box-sizing: border-box;}
.style05-Btn {font-size: 16px; padding: 13px 25px; background-color: var(--color-primary); color: var(--color-white); border-radius: var(--border-radius1);}
.style05-Btn::after {content: ''; display: inline-block; width: 18px; height: 18px; background: url('../img/icons/btn-arrow-white.png') no-repeat center /cover; vertical-align: middle; margin: 0 0 0 10px;}
.content-Box {padding: 80px 0;}
.content-Box p:last-of-type {margin: 0;}
.layer-bbg {position: relative; padding: 150px 0 80px; text-align: center; overflow: hidden; overflow-wrap: anywhere;}
.layer-bbg > .inner > .title-st1 {color: var(--color-white);}
.layer-bbg > .inner > .desc-st1 {color: var(--color-whitegray);}
.layer-bbg::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.45); z-index: 0;}
.layer-bbg > .inner {position: relative; z-index: 2; text-align: center;}
.layer-bbg > .inner .title-st1 {color: var(--color-white);}
.layer-bbg > .inner .title-st3 {color: var(--color-whitegray);}

/* -- main top content -- */
.mainTop-cont {padding: 80px 0 30px; position: relative;}
.mainTop-cont::before, .mainTop-cont::after {content: ''; display: block; position: absolute; left: 50%; transform: translateX(-50%);}
.mainTop-cont::before {width: 25%; height: 1px; background-color: #ededed; z-index: -1; bottom: -28px;}
.mainTop-cont::after {width: 60px; height: 5px; border-radius: 15px; background-color: var(--color-primary); bottom: -30px;}

/* -- mian middle backline -- */
.main-bg20 {position: relative; background: url('../img/common/bg-img35.png') no-repeat center /cover; }

@media screen and (max-width:768px) {
    .main-top-section {height: 100vh;}
    .layer-bbg {position: relative; padding: 120px 0 80px; text-align: center;}
    .main-top-section > .inner {}
    .main-top-section > .inner > .inner-Box { width: 88%; position: absolute; top: 53%; text-align: left;}    
    .main-top-section > .inner .title-st3 {padding: 0;}
    .main-top-section > .inner > .inner-Box .gap-35 {height: 25px;}
    .mainTop-cont::before {width: 80%; background-color: #dfdfdf;}
    .layer-bbg > .inner .desc-st1 {text-align: left;}
}

/*-----------------------------------------
           style-sub
-------------------------------------------*/
.main-bg40 {position: relative; background: url('../img/common/bg-img37.jpg') no-repeat center /cover; color: var(--color-white);}
.main-bg50 {position: relative; background: url('../img/common/bg-img41.jpg') no-repeat center /cover; color: var(--color-white);}
.main-bg60 {position: relative; background: url('../img/common/bg-img46.jpg') no-repeat center /cover; color: var(--color-white);}
.main-bg70 {position: relative; background: url('../img/common/bg-img39.jpg') no-repeat center /cover; color: var(--color-white);}
.main-bg70 .title-st1 {margin: 0 auto;}
.main-bg80 {position: relative; background: url('../img/common/bg-img38.jpg') no-repeat center /cover; color: var(--color-white);}
.main-bg90 {position: relative; background: url('../img/common/bg-img47.jpg') no-repeat center /cover; color: var(--color-white);}
.main-bg120 {position: relative; background: url('../img/common/bg-obi01.jpg') no-repeat center /cover; }
.main-bg120.layer-bbg::before {background-color: rgba(0,0,0,0.6);}
.main-bg120.layer-bbg {padding: 100px 0; }
.main-bg130 {position: relative; background: url('../img/common/bg-fo2.jpg') no-repeat center / cover;}
.main-bg130.layer-bbg::before {background-color: rgba(0,0,0,0.6);}
.main-bg130 > .inner, .main-bg140 > .inner  {text-align: left;}
.main-bg140 {position: relative; background: url('../img/common/bg-fo3.jpg') no-repeat center / cover;}
.main-bg140.layer-bbg::before {background-color: rgba(0,0,0,0.7);}
.main-bg140 > .inner > .desc-st2 {color: var(--color-whitegray);}

/* -- sub menu -- */
.sub-gnb-container {}
.sub-gnb-container .sub-gnb-Box {display: flex; justify-content: center; gap: 18px;  padding: 20px 5px 19px; margin: 0 0 -10px; box-sizing: border-box; overflow-x: auto; -ms-overflow-style: none;}
.sub-gnb-container .sub-gnb-Box::-webkit-scrollbar {display:none;}
.sub-gnb-container .sub-gnb-Box > a {display: block; white-space:nowrap; padding: 10px 23px; border-radius: 25px; background-color: #efefef; color: var(--color-gray); font-weight: 400;}
.sub-gnb-container .sub-gnb-Box > a.on {background-color: var(--color-primary); color: var(--color-white); position: relative; }
.sub-gnb-container .sub-gnb-Box > a.on::before {content: ''; position: absolute; bottom:-51%; left: 50%; transform: translateX(-50%); border-width: 10px; border-style: solid; border-color: var(--color-primary) transparent transparent transparent;}

@media screen and (max-width:768px) {
    .sub-gnb-container .sub-gnb-Box {justify-content: flex-start; gap: 13px; margin: 0 0 -35px;}
    .main-bg60 {background: url('../img/common/bg-img46.jpg') no-repeat 30% center /cover;}
    .main-bg90 {background: url('../img/common/bg-img47.jpg') no-repeat right center /cover;}
}

/*-----------------------------------------
           Ai topic
-------------------------------------------*/
.add-exp1 {margin: -15px 0 40px; line-height: 1.45; font-weight: 400;}
.ext-desc1 {background-color: var(--color-white); color: var(--color-black); border-radius: 20px; padding: 25px; border-bottom: 2px solid #ccc; box-sizing: border-box;}
.ext-desc1 > .sub-tit {color: var(--color-second); font-size: var(--font-title3); font-weight: 500; margin: 0 0 10px;}

/* -- bottom line -- */
.bom-line {position: relative; padding: 0 0 12px; border-bottom: 1px solid #ddd;}
.bom-line::before {content: ''; display: block; position: absolute; height: 1px; width: 110px; left: 0; bottom: -1px; background-color: var(--color-second);}

.list-tit-st7 > li {background-color: var(--color-default);}
.list-tit-st7 > li > .desc > .title-st2 {color: var(--color-white);}
.desc-st5 {padding: 20px; border-radius: 15px; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; box-sizing: border-box;}
.list-tit-st7 > li > .desc > .desc-st5 > .title-st3 {}
.desc-st5 > .desc-s5 {line-height: 1.5; font-weight: 300; color: var(--color-gray);}
.desc-st5:not(:first-of-type) {margin: 25px 0 0;}