@charset "utf-8";

/*.video-js {position:relative; width:100% !important; height:100% !important; padding-bottom:56.25% !important;}
.video-js video {position:absolute; top:0; left:0; width:100%; height:100%;}

.sub-top-heading {height:400px;}
.sub-top-heading .inner {position:relative;}
.sub-top-heading .inner {position:fixed; top:0; left:0; width:100%; height:400px; z-index:-1;}
.sub-top-heading .slider {position:relative;}
.sub-top-heading .slider:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; background:#254699; opacity:.85; z-index:5;}
.sub-top-heading .swiper-slide {position:relative; height:400px; overflow:hidden;}
.sub-top-heading .swiper-slide img  {position:absolute; top:50%; left:0; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}
.sub-top-heading .cover {position:absolute; top:0; left:0; right:0; bottom:0; background:#254699; opacity:0; z-index:9;}
.sub-top-heading .text-wrap {position:absolute; top:50%; left:0; width:100%; padding:50px; color:#fff; text-align:center; transform:translateY(-34%); z-index:10;}
.sub-top-heading .text-wrap h2 {font-family:'Roboto', sans-serif; font-size:50px; line-height:1.3em; letter-spacing:0; margin-bottom:5px;}
.sub-top-heading .text-wrap p {font-size:20px; font-weight:200; line-height:1.4em; letter-spacing:-.03em;}
.sub-top-heading .scroll {position:absolute; left:50%; bottom:50px; width:100px; margin-left:-50px; font-family:'Play', sans-serif; text-align:center; color:#fff; font-size:14px; line-height:1.3em; letter-spacing:0; animation:scroll3 1.2s linear alternate infinite; z-index:50;}
.sub-top-heading .scroll:after {content:""; display:block; margin:10px auto 0; width:20px; height:27px; background:url("../images/sub/scroll_down.png") 50% 50% no-repeat; }

.sub-top-heading.ty2 {height: 540px;}
.sub-top-heading.ty2 .slider:after {display: none;}
.sub-top-heading.ty2 .swiper-slide {height: 540px;}

.sub-title {text-align:center; margin-bottom:30px;}
.sub-title.left {text-align: left;}
.sub-title h3 {color:#242424; font-size:30px; font-weight:600; line-height:1.3em; letter-spacing:-.04em;}
.sub-title h3 span strong {color:#314eaa;}
.sub-title h3 .marker {position:relative;}
.sub-title h3 .marker:before {content:""; position:absolute; bottom:2px; left:0; right:0; height:36%; background:#d1e7fd;}
.sub-title h3 .marker strong {position:relative;}
.sub-title p {color:#686868; line-height:1.5em; letter-spacing:-.03em; margin-top:10px;}

// 포트폴리오 목록
.portfolio-main {position:relative; margin-bottom:20px;}
.portfolio-main .image {position:relative; height:100vh; overflow:hidden;}
.portfolio-main .image img {position:absolute; top:50%; left:0; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}
.portfolio-main .icon {position:absolute; top:190px; left:100px; color:#fff; font-size:16px; font-weight:300; line-height:1.6em; letter-spacing:-.03em;}
.portfolio-main .icon strong {font-weight:500; font-size:1.25em;}
.portfolio-main .icon .bar {margin:23px 0 15px; width:30px; height:1px; background:#fff;}
.portfolio-main .text-wrap {position:absolute; top:50%; left:0; width:100%; padding:50px; color:#fff; text-align:center; transform:translateY(-57%); z-index:10;}
.portfolio-main .text-wrap .tit {font-size:40px; font-weight:700; line-height:1.4em; letter-spacing:-.03em;}
.portfolio-main .text-wrap .bar {width:120px; height:2px; background:#fff; margin:45px auto;}
.portfolio-main .text-wrap .txt {font-size:25px; line-height:1.4em; letter-spacing:-.03em;}
.portfolio-main .text-wrap .cate {font-size:18px; line-height:1.4em; letter-spacing:-.03em; margin-top:7px;}
.portfolio-main .text-wrap .btn {display:inline-block; margin:85px 4px 0; padding:0 25px; font-size:16px; font-weight:500; line-height:48px; letter-spacing:-.03em; border:1px solid rgba(255,255,255,.5); border-radius:30px;}
.portfolio-main .text-wrap .btn:after {content:""; display:inline-block; vertical-align:middle; margin:-.3em -7px 0 25px; width:9px; height:15px; background:url("../images/sub/btn_arrow.png") 50% 50% no-repeat; transition:.2s;}
.portfolio-main .text-wrap .btn:hover {background:#254699; border-color:#254699;}
.portfolio-main .text-wrap .btn:hover::after {transform:translateX(3px)}
.portfolio-main .slide-btn {position:absolute; top:50%; margin-top:-30px; width:60px; height:60px; background-position:50% 50%; background-repeat:no-repeat; z-index:50;}
.portfolio-main .slide-btn.prev {left:30px; background-image:url("../images/sub/port_top_slide_prev.png");}
.portfolio-main .slide-btn.next {right:30px; background-image:url("../images/sub/port_top_slide_next.png");}
.portfolio-main .pager {position:absolute; bottom:20%; width:100%; text-align:center; display:flex; align-items:center; justify-content:center; line-height:0; z-index:50;}
.portfolio-main .swiper-pagination-bullet {width:12px; height:12px; margin:0 7px !important; background:#fff; opacity:.6;}
.portfolio-main .swiper-pagination-bullet-active {width:16px; height:16px; border:2px solid #fff; background:none; opacity:1;}
.portfolio-main .swiper-slide-active .image {animation:imgZoonIn 5s forwards;}
.portfolio-main .scroll {position:absolute; left:50%; bottom:50px; width:100px; margin-left:-50px; font-family:'Play', sans-serif; text-align:center; color:#fff; font-size:14px; line-height:1.3em; letter-spacing:0; animation:scroll3 1.2s linear alternate infinite; z-index:50;}
.portfolio-main .scroll:after {content:""; display:block; margin:10px auto 0; width:20px; height:27px; background:url("../images/sub/scroll_down.png") 50% 50% no-repeat; }

@keyframes scroll3{
    0%{transform:translateY(0);}
    100%{transform:translateY(20px);}
}

@keyframes imgZoonIn{
    0%{transform:scale(1.05)}
    100%{transform:scale(1)}
}

.portfolio-categorys {position:relative; text-align:center; margin-bottom:40px; z-index:10;}
.portfolio-categorys .list {position:relative; display:inline-flex; z-index:2;}
.portfolio-categorys .list li {padding:0 5px;}
.portfolio-categorys .list li a {display:block; width:135px; color:#454545; font-size:18px; font-weight:500; line-height:43px; letter-spacing:-.03em; background:#fff; border:1px solid #ddd; border-radius:30px;}
.portfolio-categorys .list li a svg {vertical-align:middle; margin:-.1em 6px 0 0;}
.portfolio-categorys .list li a:hover,
.portfolio-categorys .list li a.active {background:#254699; border-color:#254699; color:#fff !important;}
.portfolio-categorys .list li a:hover svg *,
.portfolio-categorys .list li a.active svg * {fill:#ffffff}
.portfolio-categorys .type {display:none; margin-top:-23px;}
.portfolio-categorys .type .inner {position:relative; width:100%; margin:0 auto;}
.portfolio-categorys .type ul {display:flex; flex-wrap:wrap; justify-content:center; margin:-5px;}
.portfolio-categorys .type ul li {padding:5px;}
.portfolio-categorys .type ul li a {position:relative; display:block; padding:0 14px; color:#454545; font-size:17px; font-weight:400; line-height:34px; letter-spacing:-.03em; white-space:nowrap; background:#fff; border:1px solid #ddd; border-radius:30px;}
.portfolio-categorys .type ul li a:hover {color:#fff; background:#1a9adb; border-color:#1a9adb;}
.portfolio-categorys .type ul li a.active{color:#fff; font-weight:500; background:#1a9adb; border-color:#1a9adb;}
.portfolio-categorys .type ul li .num {position:absolute; top:-6px; right:-5px; min-width:20px; padding:0 6px; color:#fff; text-align:center; font-family:"Roboto",sans-serif; font-size:13px; line-height:20px; letter-spacing:0; background:#fc3a31; border-radius:30px;}
.portfolio-categorys .type .close {display:none; position:absolute; top:-15px; right:0; width:30px; height:30px; background:#fff; border:0; border-radius:100%; box-shadow:0 5px 10px rgba(118,116,122,.25);}
.portfolio-categorys .type .close:before,
.portfolio-categorys .type .close:after {content:""; position:absolute; left:50%; top:50%; margin:-1px 0 0 -6px; width:12px; height:2px; background:#000; border-radius:2px;}
.portfolio-categorys .type .close:before {transform:rotate(45deg)}
.portfolio-categorys .type .close:after {transform:rotate(-45deg)}
*/
.portfolio-list ul {display:flex; flex-wrap:wrap;}
.portfolio-list ul li {position:relative; width:25%; transition:.2s; color:#fff;}
.portfolio-list ul li .img {position:relative;}
.portfolio-list ul li .img > img {width:100%;}
.portfolio-list ul li .icon {position:absolute; top:30px; left:30px; color:#fff; font-size:16px; font-weight:300; line-height:1.6em; letter-spacing:-.03em;}
.portfolio-list ul li .icon strong {font-weight:500; font-size:1.25em;}
.portfolio-list ul li .icon .bar {margin:23px 0 15px; width:30px; height:1px; background:#fff;}
.portfolio-list ul li .txt-off {position:absolute; bottom:0; left:0; width:100%; padding:27px 30px; font-size:24px; font-weight:500;text-align: center; line-height:1.3em; letter-spacing:-.03em; transition:.3s;}
.portfolio-list ul li .txt-on {position:absolute; top:0; left:0; width:100%; height:100%; padding:5%; text-align:center; display:flex; align-items:center; background:rgba(22,136,224,.9); transition:.3s; opacity:0;}
.portfolio-list ul li .txt-on .in {width:100%; margin-bottom:25%;}
.portfolio-list ul li .txt-on .in * {transition:.3s; opacity:0;}
.portfolio-list ul li .txt-on p {transform:translateY(10px); font-size:18px; font-weight:300; line-height:1.7em;}
.portfolio-list ul li .txt-on .tit {font-size:24px; font-weight:500; line-height:1.33em;}
.portfolio-list ul li .txt-on .bar {display:block; width:0; height:2px; background:#fff; margin:25px auto 30px;}
.portfolio-list ul li .txt-on .txt1 {transition-delay:.2s;}
.portfolio-list ul li .txt-on .txt2 {transition-delay:.25s;}
.portfolio-list ul li .btns {position:absolute; bottom:5%; left:0; width:100%; display:flex; justify-content:center;}
.portfolio-list ul li .btns a {width:55px; height:55px; background-position:50% 50%; background-repeat:no-repeat; border:1px solid #fff; border-radius:100%; margin-left:15px; transition:.2s;}
.portfolio-list ul li .btns a:first-child {margin-left:0;}
.portfolio-list ul li .btns a:hover {background-color:#314eaa; border-color:#314eaa;}
.portfolio-list ul li .btns .type1 {background-image:url("../img/main/port_more.png") !important;}
.portfolio-list ul li .btns .type2 {background-image:url("../img/main/port_home.png") !important;}
.portfolio-list ul li:hover .txt-off {opacity:0;}
.portfolio-list ul li:hover .txt-on,
.portfolio-list ul li:hover .txt-on .in * {opacity:1;}
.portfolio-list ul li:hover .txt-on p {transform:translateY(0);}
.portfolio-list ul li:hover .txt-on .bar {width:40px;}
.portfolio-list + .paginate {margin-top:100px;}

@media (max-width: 1280px) {
    .portfolio-list ul li .txt-on .tit {font-size: 16px;}
    .portfolio-list ul li .txt-on p {font-size: 14px;}
    .portfolio-list ul li .txt-on .bar {margin: 15px auto 5px;}
}
@media (max-width: 1024px) {
    .portfolio-list ul li .txt-off {font-size:22px;}
}
@media screen and (max-width: 960px) {
    .portfolio-list ul li .txt-off {font-size:16px;}
    .portfolio-list ul li .txt-on .tit {font-size: 16px;}
}

@media screen and (max-width:768px){
    .portfolio-list ul li .txt-off {font-size: 16px;}
    .portfolio-list ul li .txt-on .tit {font-size: 20px;}
    .portfolio-list ul li .txt-on p {font-size: 14px;}
}

@media (max-width: 575px) {
    .portfolio-list ul li {width: 50%;padding-bottom: 0px;}
    .portfolio-list ul li .txt-off {font-size: 16px;}
    .portfolio-list ul li .txt-on .tit {font-size: 16px;}
    .portfolio-list ul li .txt-on p {font-size: 14px;}
    .portfolio-list ul li .txt-on .bar {margin: 16px auto 5px;}
    .portfolio-list ul li .btns {bottom: -5px;}
    .portfolio-list ul li .btns a {width: 40px;height: 40px;}
}

.portfolio-list .items {margin:-20px; position:relative;}
.portfolio-list .items:after {content:""; display:block; clear:both;}
.portfolio-list .item-sizer {width:8.33333333%}
.portfolio-list .item {float:left; width:25%; padding:20px;}
.portfolio-list .card {position:relative; border-radius:10px; color:#fff; box-shadow:0 0 5px rgba(0,0,0,.15);}
.portfolio-list .card .img {border-radius:10px; overflow:hidden;}
.portfolio-list .card .hover {position:absolute; top:0; left:0; width:100%; height:100%; padding:5%; text-align:center; display:flex; align-items:center; border-radius:10px; background:rgba(22,136,224,.9); transition:.3s; opacity:0;}
.portfolio-list .card .in {width:100%;}
.portfolio-list .card .in * {transition:.3s; opacity:0;}
.portfolio-list .card p {transform:translateY(10px); font-size:16px; font-weight:300; line-height:1.75em;}
.portfolio-list .card .tit {font-size:22px; font-weight:500; line-height:1.33em;}
.portfolio-list .card .bar {display:block; width:0; height:2px; background:#fff; margin:25px auto 30px;}
.portfolio-list .card .txt1 {transition-delay:.2s;}
.portfolio-list .card .txt2 {transition-delay:.25s;}
.portfolio-list .card .btn {display:block; margin:30px auto 0; width:55px; height:55px; background:url("../images/main/port_home.png") 50% 50% no-repeat; border:1px solid #fff; border-radius:100%; transition:.2s;}
.portfolio-list .card .btn:hover {background-color:#314eaa; border-color:#314eaa;}
.portfolio-list .card:hover .hover,
.portfolio-list .card:hover .hover .in * {opacity:1;}
.portfolio-list .card:hover .hover p {transform:translateY(0);}
.portfolio-list .card:hover .hover .bar {width:40px;}

.view-more-btn {text-align:center; margin-top:50px; color:#454545; font-size:20px; font-weight:500; line-height:1.3em; letter-spacing:-.03em;}
.view-more-btn a {display:inline-block;}
.view-more-btn .circle {display:block; position:relative; width:60px; height:60px; border:1px solid #ddd; border-radius:100%; margin:0 auto 10px; overflow:hidden;}
.view-more-btn .circle i {position:absolute; width:20px; height:20px; top:50%; left:50%; margin:-10px 0 0 -10px; transition:.4s;}
.view-more-btn .circle i:before {content:""; position:absolute; top:0; left:50%; margin-left:-1px; width:2px; height:100%; background:#686868;}
.view-more-btn .circle i:after {content:""; position:absolute; top:50%; left:0; margin-top:-1px; width:100%; height:2px; background:#686868;}
.view-more-btn a:hover .circle {background-color:#314eaa; border-color:#314eaa;}
.view-more-btn a:hover .circle i {transform:rotate(180deg);}
.view-more-btn a:hover .circle i:before,
.view-more-btn a:hover .circle i:after {background:#fff;}

.portfolio-scroll {font-family:"Play",sans-serif; color:#686868; font-size:15px; line-height:1.3em; font-weight:700; letter-spacing:0; text-align:center; margin-top:80px; animation:scroll3 1.2s linear alternate infinite;}
.portfolio-scroll .circle {display:block; position:relative; width:50px; height:50px; border:1px solid #ddd; border-radius:100%; margin:0 auto 8px; background:url("../images/sub/scroll_down2.png") 50% 50% no-repeat; overflow:hidden;}

/* 혜택 */
.benefits {position:relative;}

.benefit-list > ul {display:flex; flex-wrap:wrap; margin:-10px;}
.benefit-list > ul > li {width:25%; padding:10px;}
.benefit-list > ul > li.wide {width:50%;}
.benefit-list > ul > li.md {width:33.33333333%;}
.benefit-list .box {position:relative; height:100%; padding:29px; border:1px solid #ddd; border-radius:10px; cursor:pointer; transition:.2s;}
.benefit-list .tit-wrap {display:flex; align-items:center; margin-bottom:17px;}
.benefit-list .tit-wrap .ico {width:70px; height:70px; background:#f4f4f4; border-radius:100%; overflow:hidden; margin-right:20px;}
.benefit-list .tit-wrap .tit {flex:1 1 auto; min-width:0; width:1%; color:#242424; font-size:20px; font-weight:700; line-height:1.35em; letter-spacing:-.03em;}
.benefit-list .tit-wrap .tit strong {color:#254699;}
.benefit-list .txt-wrap {color:#686868; line-height:1.563em; letter-spacing:-.03em; margin-left:10px; margin-bottom:40px;}
.benefit-list .txt-wrap .tt {color:#454545; font-size:18px; font-weight:600; line-height:1.45em; letter-spacing:-.03em; margin-bottom:6px;}
.benefit-list .txt-wrap ul li {position:relative; padding-left:10px; margin-bottom:2px;}
.benefit-list .txt-wrap ul li:last-child {margin-bottom:0;}
.benefit-list .txt-wrap ul li:before {content:"•"; position:absolute; top:0; left:-2px;}
.benefit-list .cost {position:absolute; top:-11px; right:-11px; min-width:95px; padding:0 10px; text-align:center; color:#fff; font-size:15px; font-weight:500; line-height:28px; letter-spacing:-.02em; background:#42ade2; border-radius:30px;}
.benefit-list .more {position:absolute; bottom:26px; left:39px; color:#a2a2a2; font-size:15px; line-height:1.3em; letter-spacing:-.03em;}
.benefit-list .more:after {content:""; margin-left:6px; display:inline-block; vertical-align:middle; width:9px; height:9px; border-right:1px solid #a2a2a2; border-top:1px solid #a2a2a2; transform:rotate(45deg);}
.benefit-list .wide .cost {background:#002060}
.benefit-list .box:hover {background:#254699; border-color:#254699;}
.benefit-list .box:hover .tit-wrap .ico {background:#fff;}
.benefit-list .box:hover .tit-wrap *,
.benefit-list .box:hover .txt-wrap,
.benefit-list .box:hover .txt-wrap * {color:#fff;}
.benefit-list .box:hover .cost {animation:up_down .5s linear alternate infinite;}
.benefit-list .box:hover .more {color:#fff;}
.benefit-list .box:hover .more:after {border-color:#fff;}
.benefit-list .wide .cost {top:29px; right:29px;}
.benefit-list .wide .box:hover .cost {background:#fff; color:#254699;}
.benefit-list .GI_TW_Current .box {background:#254699; border-color:#254699;}
.benefit-list .GI_TW_Current .box .tit-wrap .ico {background:#fff;}
.benefit-list .GI_TW_Current .box .tit-wrap *,
.benefit-list .GI_TW_Current .box .txt-wrap,
.benefit-list .GI_TW_Current .box .txt-wrap * {color:#fff;}
.benefit-list .GI_TW_Current .box .cost {animation:up_down .5s linear alternate infinite;}
.benefit-list .GI_TW_Current .box .more {color:#fff;}
.benefit-list .GI_TW_Current .box .more:after {border-color:#fff;}
.benefit-list .GI_TW_Current.wide .box .cost {background:#fff; color:#254699;}

@keyframes up_down{
    0%{transform:translateY(0);}
    100%{transform:translateY(-3px);}
}

.GI_TW_Selected_Row {
    -webkit-transition: margin-bottom 0.3s ease-in;
    -moz-transition: margin-bottom 0.3s ease-in;
    -o-transition: margin-bottom 0.3s ease-in;
    transition: margin-bottom 0.3s ease-in;
}
.GI_TW_expander {position:absolute; z-index:1; top:0; left:0; width:100%; height:0; margin-top:20px; overflow:hidden; transition:height 0.3s ease-in;}
.GI_TW_expander.animating {overflow: hidden !important;}
.GI_TW_expander.opened {overflow: visible;}
.GI_TW_expander .GI_TW_expander-inner {
    padding:0 0 20px 0;
    width: 100%;
    height: 200px;
    margin: 0 auto;
    overflow: hidden;
}
.GI_TW_expander .close {position:absolute; top:17px; right:29px; width:20px; height:20px; background:url("../images/sub/layer_close.png") 50% 50% no-repeat; cursor:pointer; z-index:10;}

.benefit-content .title {position:relative; padding:13px 29px; color:#fff; background:#254699; border:1px solid #254699; border-radius:10px 10px 0 0;}
.benefit-content .title h4 {font-size:20px; font-weight:600; line-height:1.3em; letter-spacing:-.03em;}
.benefit-content .title .close {position:absolute; top:50%; right:29px; margin-top:-10px; width:20px; height:20px; background:url("../images/sub/layer_close.png") 50% 50% no-repeat;}
.benefit-content .content {padding:29px; color:#686868; line-height:1.688em; letter-spacing:-.03em; background:#fff; border:2px solid #254699; border-top:0; border-radius:0 0 10px 10px;}
.benefit-content .top-txt {margin-bottom:20px;}
.benefit-content .summary {display:flex; padding:20px; background:#f1f6f8; border-radius:10px;}
.benefit-content .summary .ico {width:70px; height:70px; background:#fff; border-radius:100%; overflow:hidden; margin-right:20px;}
.benefit-content .summary .txt {flex:1 1 auto; min-width:0; width:1%; padding-top:5px;}
.benefit-content .summary .txt dt {color:#242424; font-size:20px; font-weight:600; line-height:1.45em; letter-spacing:-.03em; margin-bottom:4px;}
.benefit-content .summary .txt dd strong {font-weight:600;}
.benefit-content .summary .img {margin-top:30px;}
.benefit-content .info {margin-top:29px;}
.benefit-content .info .row {display:flex; flex-wrap:wrap; margin:-10px;}
.benefit-content .info .col {width:calc(50% - 20px); margin:10px; padding:24px 29px; border:1px solid #ddd; border-radius:10px;}
.benefit-content .info dt {display:flex; align-items:center; justify-content:space-between; color:#254699; font-size:18px; font-weight:600; line-height:1.4em; letter-spacing:-.03em; margin-bottom:5px;}
.benefit-content .info dd {max-width:450px; line-height:1.563em;}
.benefit-content .compare {margin-top:29px; text-align:center;}
.benefit-content .compare .row {display:flex; flex-wrap:wrap; margin:-10px;}
.benefit-content .compare .col {width:calc(50% - 20px); margin:10px; padding:24px 29px; border:1px solid #ddd; border-radius:10px;}
.benefit-content .compare .txt1 {padding:13px; color:#fff; border-radius:10px; margin-bottom:10px; font-size:18px; font-weight:500; line-height:1.3em; letter-spacing:-.03em;}
.benefit-content .compare .txt2 {display:flex; justify-content:space-between; color:#fff; font-weight:500;}
.benefit-content .compare .txt2 > div {width:100%; border-radius:10px; padding:18px;}
.benefit-content .compare .txt2 big {font-size:20px;}
.benefit-content .compare .txt2 .half {width:calc(50% - 5px);}
.benefit-content .compare .txt3 {padding:10px 0;}
.benefit-content .compare .txt4 {padding:13px; color:#fff; border-radius:10px; font-size:18px; font-weight:500; line-height:1.3em; letter-spacing:-.03em;}
.benefit-content .image {margin-top:20px;}
.benefit-content .image img {border-radius:10px;}
.benefit-content .badge {display:inline-block; padding:0 12px; color:#fff; font-size:15px; font-weight:500; line-height:28px; border-radius:20px;}
.benefit-content .badge.type1 {background:#6dcde5}
.benefit-content .badge.type2 {background:#662599}
.benefit-content .badge.type3 {background:#254699}
.benefit-content .bottom-txt {margin-top:20px;}
.benefit-content .bottom-txt strong {font-weight:500;}
.benefit-content .bottom-txt a:hover {text-decoration:underline;}

/* 제작과정 */
.process {position:relative; padding-top:10px;}
.process .cnt1 .img {position:relative;}
.process .cnt1 .img .txt {position:absolute; top:50%; right:10%; width:330px; transform:translateY(-50%); color:#fff; font-size:25px; line-height:1.520em; letter-spacing:-.03em;}
.process .cnt2 {padding:150px 0; text-align:center;}
.process .cnt2 .lg-tit {font-size:40px; font-weight:500; line-height:1.33em; letter-spacing:-.03em; margin-bottom:55px;}
.process .cnt2 .lg-tit strong {color:#254699;}
.process .cnt2 .heading {text-align:center; margin-bottom:28px;}
.process .cnt2 .heading p {display:inline-block; color:#fff; padding:16px 35px; background:#454545; border-radius:50px; font-size:28px; font-weight:400; line-height:1.33em; letter-spacing:-.03em;}
.process .cnt2 .tit {font-size:25px; line-height:1.33em; letter-spacing:-.03em;}
.process .cnt2 .tit em {font-style:normal; color:#254699;}
.process .cnt2 .between {margin:67px 0 80px; display:flex;}
.process .cnt2 .between dl {width:50%; padding:0 20px 20px; border-right:1px solid #ddd;}
.process .cnt2 .between dt {display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; line-height:1.3em; width:60px; height:60px; background:#ff0000; border-radius:100%; margin:0 auto;}
.process .cnt2 .between dd {margin-top:10px; font-size:18px; line-height:1.667em; font-weight:500; letter-spacing:-.03em;}
.process .cnt2 .between .marker {position:relative;}
.process .cnt2 .between .marker:before {content:""; position:absolute; bottom:4px; left:0; right:0; height:36%; background:#b4cbf6;}
.process .cnt2 .between .marker span {position:relative;}
.process .cnt2 .between dl:first-child {border-left:1px solid #ddd;}
.process .cnt2 .between dl:first-child dt {background:#254699;}
.process .cnt2 .between dl:first-child .marker:before {background:#ccccff;}
.process .cnt2 .step ol {display:flex; margin:55px -9px 0;}
.process .cnt2 .step ol li {position:relative; flex:1; margin:0 9px; padding:50px 10px 24px; background:#f4f4f4; border-radius:15px; color:#454545; font-size:17px; line-height:1.529em; letter-spacing:-.03em;}
.process .cnt2 .step ol li:before {content:""; position:absolute; top:0; left:50%; margin:-22px 0 0 -22px; width:44px; height:44px; background:#c3c3c3 url("../images/sub/process_check.png") 50% 50% no-repeat; border-radius:100%;}
.process .cnt2 .step ol li img {display:block; margin:0 auto 20px;}
.process .cnt2 .step ol li strong {display:inline-block; color:#242424; font-size:20px; line-height:1.33em; margin-bottom:6px;}
.process .cnt2 .step ol li:nth-child(n+6)::before {background-color:#769be3}

.process .cnt3 {position:relative; padding:0 0 85px; text-align:center; overflow:hidden;}
/* .process .cnt3 .lg-tit {font-size:40px; font-weight:400; line-height:1.5em; letter-spacing:-.03em; margin-bottom:130px;}
.process .cnt3 .wrap {display:flex; align-items:center; margin-bottom:25px;}
.process .cnt3 .wrap .img {width:50%; text-align:right;}
.process .cnt3 .wrap .cnt {width:40%; max-width:640px; margin-left:40px;}
.process .cnt3 .heading {text-align:center; margin-bottom:28px;}
.process .cnt3 .heading p {display:inline-block; color:#fff; padding:16px 35px; background:#002060; border-radius:50px; font-size:28px; font-weight:400; line-height:1.33em; letter-spacing:-.03em;}
.process .cnt3 .tit {font-size:22px; line-height:1.33em; letter-spacing:-.03em;}
.process .cnt3 .tit em {font-style:normal; color:#3766c4;}
.process .cnt3 .between {margin-top:57px;}
.process .cnt3 .between dt {display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; line-height:1.3em; width:60px; height:60px; background:#787878; border-radius:100%; margin:0 auto;}
.process .cnt3 .between dd {margin-top:10px; font-size:18px; line-height:1.667em; font-weight:500; letter-spacing:-.03em;}
.process .cnt3 .between dl:first-child {margin-bottom:40px;}
.process .cnt3 .between dl:first-child dt {background:#254699;}
.process .cnt3 .between dl:first-child .marker:before {background:#ccccff;}
.process .cnt3 .step ol {display:flex; margin:55px -9px 0;}
.process .cnt3 .step ol li {position:relative; flex:1; margin:0 9px; padding:50px 10px 24px; background:#ffffff; border-width:1px; border-color:#c3c3c3; border-style:dotted; border-radius:15px; color:#454545; font-size:17px; line-height:1.529em; letter-spacing:-.03em;}
.process .cnt3 .step ol li:before {content:""; position:absolute; top:0; left:50%; margin:-22px 0 0 -22px; width:44px; height:44px; background:#3766c4 url("../images/sub/process_check.png") 50% 50% no-repeat; border-radius:100%;}
.process .cnt3 .step ol li img {display:block; margin:0 auto 20px;}
.process .cnt3 .step ol li strong {display:inline-block; color:#242424; font-size:20px; line-height:1.33em; margin-bottom:6px;}
.process .cnt3 .step .li-bgwhite {background:#ffffff!important;}
.process .cnt3 .step .li-bgblue {background:#EEEEFE!important;} */

.process .cnt4 .contain {max-width:1260px;}
.process .cnt4 .heading {position:relative; padding:87px 0 213px; color:#fff; background:#254699; border-radius:0 0 0 260px;}
.process .cnt4 .heading .tit {font-size:30px; font-weight:400; line-height:1.375em; letter-spacing:-.03em; margin-bottom:36px;}
.process .cnt4 .heading .txt {font-size:22px; font-weight:400; line-height:1.375em; letter-spacing:-.03em;}
.process .cnt4 .heading .img {position:absolute; left:50%; bottom:-110px; margin-left:27px;}
.process .cnt4 .heading .img img {opacity:0.3;}
.process .cnt4 .heading:after {content:""; position:absolute; bottom:0; left:50%; margin:0 0 -25px -25px; width:50px; height:50px; background:#e7e7e7 url("../images/sub/process_arrow_down.png") 50% 50% no-repeat; border-radius:100%;}
.process .cnt4 .group {position:relative; padding:85px 0;}
.process .cnt4 .group:last-child {padding-bottom:0;}
.process .cnt4 .group .contain {display:flex; justify-content:space-between;}
.process .cnt4 .group .left {flex:1 1 auto; min-width:0; width:1%; margin-right:60px;}
.process .cnt4 .group .left .num {position:relative; color:#3766c4; font-family:'Play', sans-serif; font-size:30px; font-weight:700; line-height:1.1em; letter-spacing:0;}
.process .cnt4 .group .left .num:before {content:""; position:absolute; top:-1px; left:-18px; width:36px; height:36px; background:#eae9e8; border-radius:100%;}
.process .cnt4 .group .left .num span {position:relative;}
.process .cnt4 .group .left h4 {color:#3766c4; font-size:30px; line-height:1.3em; letter-spacing:-.03em; margin-bottom:12px;}
.process .cnt4 .group .left p {font-size:17px; font-weight:400; line-height:1.556em; letter-spacing:-.03em;}
.process .cnt4 .group .left .marker {position:relative; display:inline-block;}
.process .cnt4 .group .left .marker:before {content:""; position:absolute; bottom:4px; left:0; right:0; height:36%; background:#bedcf8;}
.process .cnt4 .group .left .marker span {position:relative;}
.process .cnt4 .group .left .btn {display:inline-block; margin-top:120px; color:#fff; text-align:center; padding:14px 24px; font-size:17px; font-weight:500; line-height:1.3em; letter-spacing:-.03em; background:#002060; border-radius:30px;}
.process .cnt4 .group .left .btn:before {content:""; display:inline-block; width:22px; height:22px; vertical-align:middle; margin:-.2em 10px 0 0; background:url("../images/sub/icon_submit2.png") 50% 50% no-repeat;}
.process .cnt4 .group .left .btn.st2 {margin-top:160px;}
.process .cnt4 .group .right {width:670px; margin-top:36px;}
.process .cnt4 .group .right .box-wrap {display:flex; justify-content:space-between; align-items:flex-start;}
.process .cnt4 .group .right .box {width:48%; max-width:310px; padding:30px; min-height:320px; background:#fff; border-radius:15px; box-shadow:0 0 15px rgba(0,0,0,.20);}
.process .cnt4 .group .right .box.mgt {margin-top:80px;}
.process .cnt4 .group .right .box.h430 {min-height:430px;}
.process .cnt4 .group .right .name-wrap {display:flex; align-items:center; margin-bottom:35px;}
.process .cnt4 .group .right .name-wrap .user {width:80px;}
.process .cnt4 .group .right .name-wrap .name {flex:1 1 auto; min-width:0; width:1%; margin-left:20px; color:#12b1fb; font-size:16px; font-weight:700; line-height:1.333em; letter-spacing:-.03em;}
.process .cnt4 .group .right dt {font-size:16px; font-weight:700; line-height:1.556em; letter-spacing:-.03em; margin-bottom:18px;}
.process .cnt4 .group .right dd {color:#454545; font-size:16px; font-weight:300; line-height:1.647em; letter-spacing:-.03em;}
.process .cnt4 .group .right .box.st2 {background:#3766c4}
.process .cnt4 .group .right .box.st2 * {color:#fff;}
.process .cnt4 .group.round {border-radius:0 260px 0 260px;}
.process .cnt4 .group.bg {background:#f4f4f4;}
.process .cnt4 .group.bg .left .num:before {background:#fff;}
.process .cnt4 .group.bg2 {background:#42ade2;}
.process .cnt4 .group.bg2 .left .num:before {background:#3766c4;}
.process .cnt4 .group.bg2 .left * {color:#fff;}
.process .cnt4 .group .obj {position:absolute; top:-220px; left:6%;}

/* 제작기술 */
.tech-menu-wrap {margin-bottom:40px;}

.tech-menu-1 {position:relative; text-align:center;}
.tech-menu-1 ul {display:inline-flex; flex-wrap:wrap; justify-content:center;}
.tech-menu-1 ul li {padding:0 5px;}
.tech-menu-1 ul li a {display:block; width:150px; color:#454545; font-size:18px; font-weight:500; line-height:43px; letter-spacing:-.03em; background:#fff; border:1px solid #ddd; border-radius:30px;}
.tech-menu-1 ul li a:hover,
.tech-menu-1 ul li.active a {background:#002060; border-color:#002060; color:#fff !important;}

.tech-menu-2 {text-align:center; background:#f7f8f9; border-radius:15px; margin-top:-25px; padding:48px 20px 30px;}
.tech-menu-2 ul {display:inline-flex; flex-wrap:wrap; justify-content:center;}
.tech-menu-2 ul li {padding:8px 16px;}
.tech-menu-2 ul li a {display:block; position:relative; color:#454545; font-size:16px; line-height:1.3em; letter-spacing:-.03em;}
.tech-menu-2 ul li a:before {content:""; position:absolute; bottom:0; left:0; width:0; height:1px; background:#254699; transition:.2s;}
.tech-menu-2 ul li a:hover {color:#254699;}
.tech-menu-2 ul li.active a {color:#254699; font-weight:600;}
.tech-menu-2 ul li a:hover::before,
.tech-menu-2 ul li.active a:before {width:100%;}

.tech-heading {text-align:center; margin-bottom:40px;}
.tech-heading h3 {color:#242424; font-size:22px; line-height:1.3em; letter-spacing:-.03em;}
.tech-heading p {color:#686868; line-height:1.563em; letter-spacing:-.03em; margin-top:6px;}

.tech-sms {text-align:center; margin-bottom:65px; color:#686868; line-height:1.563em; letter-spacing:-.03em;}
.tech-sms ul {display:flex; justify-content:center; margin:0 -15px;}
.tech-sms ul li {padding:0 15px; width:33.33333333%; max-width:325px;}
.tech-sms .round {display:flex; align-items:center; justify-content:center; width:100px; height:100px; background:#254699; color:#fff; font-weight:700; border-radius:100%; margin:0 auto 12px;}

.tech-cnt-box {position:relative; padding:50px 29px; margin-bottom:40px; text-align:center; border-radius:10px; border:1px solid #ddd; color:#686868; line-height:1.563em; letter-spacing:-.03em;}
.tech-cnt-box:last-child {margin-bottom:0 !important;}
.tech-cnt-box .title {margin-bottom:40px; margin-top:-4px;}
.tech-cnt-box .title.has-logo {position:relative; padding-bottom:80px;}
.tech-cnt-box .title .logo {position:absolute; bottom:0; left:0;}
.tech-cnt-box h4 {color:#242424; font-size:21px; font-weight:600; line-height:1.3em; letter-spacing:-.03em; margin-bottom:10px;}
.tech-cnt-box ol li {padding-left:1em; text-indent:-1em;}
.tech-cnt-box .images {display:flex; margin:0 -10px;}
.tech-cnt-box .images > div {width:50%; padding:0 10px;}
.tech-cnt-box .tt {color:#254699;}
.tech-cnt-box .info-box {padding:18px; margin:30px 0 20px; text-align:center; background:#f7f8f9; border-radius:6px; color:#454545; font-weight:500;}
.tech-cnt-box .info-box.type2 {background:#254699; color:#fff;}
.tech-cnt-box .info-box.sm {padding:12px; margin-bottom:15px;}
.tech-cnt-box .btn-player {position:absolute; top:29px; right:29px; color:#fff; font-weight:500; padding:6px 25px; background:#002060; border-radius:30px;}
.tech-cnt-box .marker {display:inline-block; position:relative;}
.tech-cnt-box .marker span {position:relative;}
.tech-cnt-box .marker:before {content:""; position:absolute; bottom:2px; left:0; right:0; height:36%;}
.tech-cnt-box .marker.marker-b:before {background:#b4cbf6;}
.tech-cnt-box .marker.marker-v:before {background:#ccccff;}
.tech-cnt-box.between {text-align:left; padding:29px; margin-bottom:30px; display:flex; justify-content:space-between;}
.tech-cnt-box.between .title {width:400px; margin-right:20px; margin-bottom:0;}
.tech-cnt-box.mgt {margin-top:60px;}
.tech-cnt-box.left {text-align:left; padding:29px;}
.tech-cnt-box.left h4 {color:#254699}

/* 유지보수 */
.maintenance .group {padding:80px 0;}
.maintenance .group:first-child {padding-top:0;}
.maintenance .group.bg {background:#f2f4f5;}
.maintenance .sub-title {margin-bottom:40px;}
.maintenance .sub-title h4 {color:#666666; font-size:20px; font-weight:500; line-height:1.33em; letter-spacing:-.03em; margin-top:10px; margin-bottom:10px;}
.maintenance .panel {border-radius:20px; box-shadow:0 0 25px rgba(0,0,0,.12);}
.maintenance .panel-heading {padding:16px; text-align:center; color:#fff; background:#002060; border-radius:20px 20px 0 0;}
.maintenance .panel-heading h4 {font-size:20px; font-weight:600; line-height:1.33em; letter-spacing:-.03em;}
.maintenance .panel-heading + .panel-body {border-radius:0 0 20px 20px;}
.maintenance .panel-body {padding:45px; border-radius:20px; color:#686868; line-height:1.6em; letter-spacing:-.03em; background:#fff;}
.maintenance .panel-body h4 {color:#002060; font-size:22px; font-weight:600; line-height:1.33em; letter-spacing:-.03em; margin-bottom:10px;}
.maintenance .panel-body .row {display:flex; align-items:center; margin:0 -30px;}
.maintenance .panel-body .col {width:50%; padding:0 30px;}
.maintenance .panel-body strong {color:#454545; font-weight:600;}
.maintenance .panel-bottom-txt {line-height:1.6em; color:#454545; letter-spacing:-.03em; margin-top:20px;}
.maintenance .apexcharts-title-text {font-size:18px !important; font-family:inherit !important; font-weight:600;}

.maintenance-mana {text-align:center;}
.maintenance-mana .row {display:flex; margin:0 -10px;}
.maintenance-mana .col {width:33.3333333%; padding:0 10px;}
.maintenance-mana .box {display:block; height:100%; padding:40px; border-radius:10px; background:#f2f4f5;}
.maintenance-mana .ico {width:140px; height:140px; display:flex; align-items:center; justify-content:center; border-radius:100%; margin:0 auto 17px; background-position:50% 50%; background-repeat:no-repeat;}
.maintenance-mana .ico img {display:none;}
.maintenance-mana .ico.type1 {background-color:#002060}
.maintenance-mana .ico.type2 {background-color:#254699}
.maintenance-mana .tit {color:#242424; font-size:20px; font-weight:600; line-height:1.35em; letter-spacing:-.03em; margin-bottom:10px;}
.maintenance-mana .txt {color:#686868; line-height:1.563em; letter-spacing:-.03em;}
.maintenance-mana .more {margin-top:20px;}
.maintenance-mana .more {color:#a2a2a2; font-size:15px; line-height:1.3em; letter-spacing:-.03em;}
.maintenance-mana .more:after {content:""; display:block; margin:3px auto 0; width:9px; height:9px; border-right:1px solid #a2a2a2; border-bottom:1px solid #a2a2a2; transform:rotate(45deg);}

.maintenance-mana .col:nth-child(1) .ico {background-image:url("../images/sub/maintenance_icon2.png");}
.maintenance-mana .col:nth-child(2) .ico {background-image:url("../images/sub/maintenance_icon3.png");}
.maintenance-mana .col:nth-child(3) .ico {background-image:url("../images/sub/maintenance_icon1.png");}
.maintenance-mana .box:hover {background:#002060;}
.maintenance-mana .col:nth-child(even) .box:hover {background:#254699}
.maintenance-mana .box:hover * {color:#fff;}
.maintenance-mana .box:hover .ico {background-color:#fff;}
.maintenance-mana .box:hover .more:after {border-color:#fff;}
.maintenance-mana .col:nth-child(1):hover .ico {background-image:url("../images/sub/maintenance_icon2_on.png");}
.maintenance-mana .col:nth-child(2):hover .ico {background-image:url("../images/sub/maintenance_icon3_on.png");}
.maintenance-mana .col:nth-child(3):hover .ico {background-image:url("../images/sub/maintenance_icon1_on.png");}

.as-sub-slider {text-align:center; border-radius:20px; box-shadow:0 0 25px rgba(0,0,0,.12); margin-top:-10px;}
.as-sub-slider .head {display:table; width:100%; height:60px; table-layout:fixed; color:#fff; font-size:1.05em; font-weight:600; letter-spacing:-.03em; line-height:1.5em; background:#254699; border-radius:20px 20px 0 0;}
.as-sub-slider .head div {display:table-cell; vertical-align:middle; border-left:1px solid rgba(255,255,255,.3);}
.as-sub-slider .head div:nth-child(1) {width:130px; border-left:0;}
.as-sub-slider .head div:nth-child(2) {width:auto}
.as-sub-slider .head div:nth-child(3) {width:18%}
.as-sub-slider .head div:nth-child(4) {width:15%}
.as-sub-slider .head div:nth-child(5) {width:18%}
.as-sub-slider .body {background:#fff; border-radius:0 0 20px 20px; overflow:hidden;}
.as-sub-slider .body .item {display:table !important; width:100%; height:50px; table-layout:fixed; color:#454545; letter-spacing:-.03em; line-height:1.5em;}
.as-sub-slider .body .item > div {display:table-cell; vertical-align:middle; border-left:1px solid #ddd; border-top:1px solid #ddd;}
.as-sub-slider .body .item > div:nth-child(1) {width:130px; border-left:0;}
.as-sub-slider .body .item > div:nth-child(2) {width:auto}
.as-sub-slider .body .item > div:nth-child(3) {width:18%}
.as-sub-slider .body .item > div:nth-child(4) {width:15%; font-weight:500;}
.as-sub-slider .body .item > div:nth-child(5) {width:18%}
.as-sub-slider .body .c1 {color:#314eaa;}
.as-sub-slider .body .c2 {color:#1aa8b4;}
.as-sub-slider .slick-vertical .slick-slide {border:0;}

.cost-table .row {display:flex; margin:0 -10px;}
.cost-table .col {width:50%; padding:0 10px;}
.cost-table .shadow {border-radius:20px; box-shadow:0 0 25px rgba(0,0,0,.12);}
.cost-table .shadow .in {border-radius:20px; overflow:hidden;}
.cost-table table {width:100%; border-collapse:collapse; border-spacing:0px;}
.cost-table table th {height:60px; color:#fff; font-size:1.05em; font-weight:600; letter-spacing:-.03em; line-height:1.5em; background:#254699; border-left:1px solid rgba(255,255,255,.3);}
.cost-table table td {padding:13px; color:#454545; line-height:1.5em; letter-spacing:-.03em; text-align:center; background:#fff; border:1px solid #ddd; border-bottom:0;}
.cost-table tr th:first-child,
.cost-table tr td:first-child {border-left:0;}
.cost-table tr th:last-child,
.cost-table tr td:last-child {border-right:0;}
.cost-table tr:first-child td {border-top:0;}
.cost-table .step {color:#686868;}
.cost-table .step_ing {background:#04a3ed; color:#ffffff;}
.cost-table .step_done {background:#360CD5; color:#ffffff;}

/* WHY WEBSITE.CO.KR */
.webiste .group {padding:80px 0;}
.webiste .group:first-child {padding-top:0;}
.webiste .group.bg {background:#f2f4f5;}
.webiste .sub-title {margin-bottom:40px;}
.webiste .sub-title .tit-dot {position:relative;}
.webiste .sub-title .tit-dot:before {content:""; position:absolute; top:-12px; left:50%; margin-left:-4px; width:8px; height:8px; border-radius:100%; animation:move_dot 2.5s ease-in 2s infinite ;}
.webiste .sub-title .dot-1:before {background:#6dcde5; animation-delay: .2s;}
.webiste .sub-title .dot-2:before {background:#42ade2; animation-delay: .3s;}
.webiste .sub-title .dot-3:before {background:#314eaa; animation-delay: .4s;}
.webiste .sub-title .dot-4:before {background:#002060; animation-delay: .5s;;}
.webiste .main-clients {padding:0;}
.webiste .num-circle {display:inline-block; width:40px; height:40px; background:#314eaa; border-radius:100%; color:#fff; font-weight:500; line-height:40px; font-style:normal; margin-right:3px;}
.webiste .background-1 {background:url("../images/sub/why_cnt2_bg.jpg") 50% 50% no-repeat; background-size:cover;}
.webiste .background-2 {position:relative;}
.webiste .background-2:before {content:""; position:absolute; top:55%; left:0; right:0; bottom:0; background:url("../images/main/merit_bg.jpg") 50% 25% no-repeat; background-size:cover;}
.webiste .background-2 .contain {position:relative;}
.webiste .background-3 {background:url("../images/sub/why_cnt7_bg.jpg") 50% 50% no-repeat; background-size:cover;}
.webiste .background-3 .num-circle {background:#fff; color:#314eaa;}
.webiste .background-3 .sub-title h3 {color:#fff; font-weight:500;}
.webiste .background-4 {background:url("../images/sub/why_cnt7_bg2.jpg") 50% 50% no-repeat; background-size:cover;}
.webiste .background-4 .num-circle {background:#fff; color:#314eaa;}
.webiste .background-4 .sub-title h3 {color:#fff; font-weight:500;}

.why-cnt-1 .row {display:flex; flex-wrap:wrap; margin:-4px;}
.why-cnt-1 .col {width:16.6666666%; padding:4px; transition:none;}
.why-cnt-1 .tit {display:flex; align-items:center; padding:0 10px; margin-bottom:10px; height:70px; text-align:center; border-radius:6px; background:#002060; color:#fff; font-size:20px; font-weight:500; line-height:1.3em; letter-spacing:-.03em;}
.why-cnt-1 .tit p {width:100%;}
.why-cnt-1 .tit i {display:inline-block; width:30px; height:30px; background:#fff; border-radius:100%; color:#002060; font-weight:700; line-height:30px; font-style:normal; margin-right:3px;}
.why-cnt-1 .cnt {position:relative; min-height:265px; padding:18px; line-height:1.375em; letter-spacing:-.03em; color:#454545; border:1px solid #c5e2f1; border-radius:6px; background-position:right 20px bottom 15px; background-repeat:no-repeat;}
.why-cnt-1 .cnt ul li {position:relative; padding-left:10px; margin-bottom:8px;}
.why-cnt-1 .cnt ul li:before {content:"•"; position:absolute; top:0; left:-2px; font-weight:600;}
.why-cnt-1 .cnt .more {position:absolute; bottom:16px; left:16px; color:#a2a2a2; font-size:15px; line-height:1.3em; letter-spacing:-.03em;}
.why-cnt-1 .cnt .more:after {content:""; margin-left:6px; display:inline-block; vertical-align:middle; width:9px; height:9px; border-right:1px solid #a2a2a2; border-top:1px solid #a2a2a2; transform:rotate(45deg);}
.why-cnt-1 .col:nth-child(even) .tit {background:#254699;}
.why-cnt-1 .col:nth-child(even) .tit i {color:#254699;}
.why-cnt-1 .col:nth-child(even) .cnt {border-color:#c7d4f4;}
.why-cnt-1 .col:nth-child(1) .cnt {background-image:url("../images/sub/why_cnt1_icon1.png");}
.why-cnt-1 .col:nth-child(2) .cnt {background-image:url("../images/sub/why_cnt1_icon2.png");}
.why-cnt-1 .col:nth-child(3) .cnt {background-image:url("../images/sub/why_cnt1_icon3.png");}
.why-cnt-1 .col:nth-child(4) .cnt {background-image:url("../images/sub/why_cnt1_icon4.png");}
.why-cnt-1 .col:nth-child(5) .cnt {background-image:url("../images/sub/why_cnt1_icon5.png");}
.why-cnt-1 .col:nth-child(6) .cnt {background-image:url("../images/sub/why_cnt1_icon6.png");}
.why-cnt-1 .col:hover .cnt {background-color:#002060; border-color:#002060; color:#fff;}
.why-cnt-1 .col:hover .cnt .more {color:#fff;}
.why-cnt-1 .col:hover .cnt .more:after {border-color:#fff;}
.why-cnt-1 .col:nth-child(even):hover .cnt {background-color:#254699; border-color:#254699;}
.why-cnt-1 .col:nth-child(1):hover .cnt {background-image:url("../images/sub/why_cnt1_icon1_on.png");}
.why-cnt-1 .col:nth-child(2):hover .cnt {background-image:url("../images/sub/why_cnt1_icon2_on.png");}
.why-cnt-1 .col:nth-child(3):hover .cnt {background-image:url("../images/sub/why_cnt1_icon3_on.png");}
.why-cnt-1 .col:nth-child(4):hover .cnt {background-image:url("../images/sub/why_cnt1_icon4_on.png");}
.why-cnt-1 .col:nth-child(5):hover .cnt {background-image:url("../images/sub/why_cnt1_icon5_on.png");}
.why-cnt-1 .col:nth-child(6):hover .cnt {background-image:url("../images/sub/why_cnt1_icon6_on.png");}

.why-cnt-2 {text-align:center; color:#454545; line-height:1.563em; letter-spacing:-.03em;}
.why-cnt-2 .tt {font-size:18px; line-height:1.5em;}
.why-cnt-2 .tt strong {font-weight:600;}
.why-cnt-2 .row {margin-top:50px; display:flex; justify-content:space-between;}
.why-cnt-2 .box {padding:10px; background:rgba(0,32,96,.2); border-radius:100%; color:#fff;}
.why-cnt-2 .box .in {width:240px; height:240px; background:rgba(0,32,96); border-radius:100%; padding-top:34px;}
.why-cnt-2 .box dt {font-size:18px; font-weight:500; line-height:1.4em; margin:18px 0 10px;}
.why-cnt-2 .box dd {font-family:"Roboto",sans-serif; font-size:42px; font-weight:700; line-height:1em;}
.why-cnt-2 .col:nth-child(even) .box {background:rgba(37,70,153,.2);}
.why-cnt-2 .col:nth-child(even) .box .in {background:rgba(37,70,153);}

.why-cnt-3 ul {display:flex; flex-wrap:wrap; border-top:1px solid #ddd; border-left:1px solid #ddd; text-align:center;}
.why-cnt-3 ul li {width:20%; padding:4px 0; border-right:1px solid #ddd; border-bottom:1px solid #ddd; overflow:hidden; background:#fff;}
.why-cnt-3 ul li a {display:block;}
.why-cnt-3 ul li div {margin:0 -5px;}
.why-cnt-3 ul li .on {display:none;}
.why-cnt-3 ul li:hover .off {display:none;}
.why-cnt-3 ul li:hover .on {display:block;}
.why-cnt-3 ul li:hover div {animation:subZoonIn .5s forwards;}

.autotransition {animation:subZoonIn .5s forwards;}
@keyframes subZoonIn{
    0%{transform:scale(1)}
    100%{transform:scale(1.1)}
}

.why-cnt-4 .tt {text-align:center; font-size:18px; line-height:1.5em; margin-bottom:40px;}
.why-cnt-4 .tt strong {font-weight:600;}
.why-cnt-4 .tit {text-align:center; color:#454545; font-size:22px; line-height:1.4em; letter-spacing:-.03em; margin-bottom:40px;}
.why-cnt-4 .wrap {position:relative;}
.why-cnt-4 .list ul {display:flex; margin:0 -9px;}
.why-cnt-4 .list ul li {flex:1; padding:0 9px;}
.why-cnt-4 .list .box {position:relative; height:100%; padding:50px 10px 24px; background:#fff; border:1px solid #ddd; border-radius:10px; text-align:center; cursor:pointer;}
.why-cnt-4 .list .box .num {position:absolute; width:46px; height:46px; top:-23px; left:50%; margin-left:-23px; color:#fff; font-family:"Roboto",sans-serif; font-size:20px; font-weight:500; line-height:46px; border-radius:100%; background:#002060;}
.why-cnt-4 .list .box .ico {width:71px; height:71px; background-position:50% 50%; background-repeat:no-repeat; margin:0 auto 20px;}
.why-cnt-4 .list .box .ico-1 {background-image:url("../images/sub/process_custom_icon2.png");}
.why-cnt-4 .list .box .ico-2 {background-image:url("../images/sub/process_custom_icon4.png");}
.why-cnt-4 .list .box .ico-3 {background-image:url("../images/sub/process_custom_icon1.png");}
.why-cnt-4 .list .box .ico-4 {background-image:url("../images/sub/process_custom_icon3.png");}
.why-cnt-4 .list .box .ico-5 {background-image:url("../images/sub/process_custom_icon5.png");}
.why-cnt-4 .list .box .ico-6 {background-image:url("../images/sub/process_custom_icon7.png");}
.why-cnt-4 .list .box .txt {color:#454545; font-size:17px; line-height:1.5em;}
.why-cnt-4 .list .box .txt strong {display:inline-block; color:#242424; font-size:20px; line-height:1.33em; margin-bottom:6px;}
.why-cnt-4 .list .box .more {margin-top:27px; color:#a2a2a2; font-size:15px; line-height:1.3em;}
.why-cnt-4 .list .box .more:after {content:""; display:block; margin:0 auto; width:11px; height:11px; border-right:1px solid #a2a2a2; border-bottom:1px solid #a2a2a2; transform:rotate(45deg);}
.why-cnt-4 .list .box:hover {background:#254699; border-color:#254699;}
.why-cnt-4 .list .box:hover .num {background:#42ade2;}
.why-cnt-4 .list .box:hover .ico-1 {background-image:url("../images/sub/process_custom_icon2_on.png");}
.why-cnt-4 .list .box:hover .ico-2 {background-image:url("../images/sub/process_custom_icon4_on.png");}
.why-cnt-4 .list .box:hover .ico-3 {background-image:url("../images/sub/process_custom_icon1_on.png");}
.why-cnt-4 .list .box:hover .ico-4 {background-image:url("../images/sub/process_custom_icon3_on.png");}
.why-cnt-4 .list .box:hover .ico-5 {background-image:url("../images/sub/process_custom_icon5_on.png");}
.why-cnt-4 .list .box:hover .ico-6 {background-image:url("../images/sub/process_custom_icon7_on.png");}
.why-cnt-4 .list .box:hover .txt {color:#fff;}
.why-cnt-4 .list .box:hover .txt strong {color:#fff;}
.why-cnt-4 .list .box:hover .more {color:#fff;}
.why-cnt-4 .list .box:hover .more:after {border-color:#fff;}
.why-cnt-4 .GI_TW_Current .box {background:#254699; border-color:#254699;}
.why-cnt-4 .GI_TW_Current .box .num {background:#42ade2;}
.why-cnt-4 .GI_TW_Current .box .ico-1 {background-image:url("../images/sub/process_custom_icon2_on.png");}
.why-cnt-4 .GI_TW_Current .box .ico-2 {background-image:url("../images/sub/process_custom_icon4_on.png");}
.why-cnt-4 .GI_TW_Current .box .ico-3 {background-image:url("../images/sub/process_custom_icon1_on.png");}
.why-cnt-4 .GI_TW_Current .box .ico-4 {background-image:url("../images/sub/process_custom_icon3_on.png");}
.why-cnt-4 .GI_TW_Current .box .ico-5 {background-image:url("../images/sub/process_custom_icon5_on.png");}
.why-cnt-4 .GI_TW_Current .box .ico-6 {background-image:url("../images/sub/process_custom_icon7_on.png");}
.why-cnt-4 .GI_TW_Current .box .txt {color:#fff;}
.why-cnt-4 .GI_TW_Current .box .txt strong {color:#fff;}
.why-cnt-4 .GI_TW_Current .box .more {color:#fff;}
.why-cnt-4 .GI_TW_Current .box .more:after {border-color:#fff;}

.why-cnt-5 .tt {text-align:center; font-size:18px; line-height:1.5em; margin-bottom:40px;}
.why-cnt-5 .tt strong {font-weight:600;}
.why-cnt-5 .wrap {display:flex; margin:0 -16px; text-align:center;}
.why-cnt-5 .box {width:calc(33.33333333% - 32px); margin:0 16px; padding:44px 30px; background:#fff; border-radius:20px; box-shadow:0 0 15px rgba(0,0,0,.25); transition:.2s;}
.why-cnt-5 .box .ico {width:100px; height:100px; margin:0 auto; background-position:50% 50%; background-repeat:no-repeat;}
.why-cnt-5 .box .ico-1 {background-image:url("../images/main/merit_icon1.png");}
.why-cnt-5 .box .ico-2 {background-image:url("../images/main/merit_icon2.png");}
.why-cnt-5 .box .ico-3 {background-image:url("../images/main/merit_icon3.png");}
.why-cnt-5 .box .ico-4 {background-image:url("../images/main/merit_icon4.png");}
.why-cnt-5 .box dl {margin-top:40px;}
.why-cnt-5 .box dt {color:#242424; font-size:22px; font-weight:700; line-height:1.33em; letter-spacing:-.03em;}
.why-cnt-5 .box dt:after {content:""; display:block; width:40px; height:1px; background:#b8d8f8; margin:15px auto 18px;}
.why-cnt-5 .box dd {text-align:left; padding-left:10px; font-weight:300; line-height:1.688em; letter-spacing:-.03em;}
.why-cnt-5 .box:hover {background:#42ade2;}
.why-cnt-5 .box:hover * {color:#fff;}
.why-cnt-5 .box:hover .ico-1 {background-image:url("../images/main/merit_icon1_on.png");}
.why-cnt-5 .box:hover .ico-2 {background-image:url("../images/main/merit_icon2_on.png");}
.why-cnt-5 .box:hover .ico-3 {background-image:url("../images/main/merit_icon3_on.png");}
.why-cnt-5 .box:hover .ico-4 {background-image:url("../images/main/merit_icon4_on.png");}
.why-cnt-5 .box:hover dt:after {background:#fff;}

.why-cnt-6 {text-align:center; color:#454545; line-height:1.563em; letter-spacing:-.03em; margin-top:-15px;}
.why-cnt-6 .image {margin-top:55px;}
.why-cnt-6 .tt {text-align:center; font-size:18px; line-height:1.5em;}
.why-cnt-6 .tt strong {font-weight:600;}

.why-cnt-7 {position:relative; margin-top:55px;}
.why-cnt-7 .swiper {padding:10px; margin:-10px;}
.why-cnt-7 .box {position:relative; min-height:311px; background:#fff; text-align:center; border-radius:10px; padding:30px 10px; box-shadow:0 0 10px rgba(0,0,0,.35);}
.why-cnt-7 .balloon {position:absolute; top:20px; right:20px; width:50px; height:58px; font-size:18px; font-weight:500; line-height:50px; color:#fff; background:url("../images/sub/balloon.png") 0 0 no-repeat;}
.why-cnt-7 .ico {margin-bottom:13px;}
.why-cnt-7 .tit {color:#242424; font-size:22px; font-weight:700; line-height:1.3em; letter-spacing:-.03em;}
.why-cnt-7 .bar {width:25px; height:1px; background:#454545; margin:17px auto;}
.why-cnt-7 .txt1 {color:#314eaa; font-size:1.063em; font-weight:500; line-height:1.375em; letter-spacing:-.03em; margin-bottom:3px;}
.why-cnt-7 .txt2 {color:#686868; line-height:1.375em; letter-spacing:-.03em;}
.why-cnt-7 .badge {display:inline-block; color:#fff; font-size:15px; font-weight:500; line-height:29px; letter-spacing:-.03em; padding:0 12px; margin-top:13px; border-radius:20px;}
.why-cnt-7 .badge.type1 {background:#7591d6;}
.why-cnt-7 .badge.type2 {background:#254699;}
.why-cnt-7 .slide-btn {position:absolute; top:50%; margin-top:-30px; width:60px; height:60px; background-color:#fff; background-position:50% 50%; background-repeat:no-repeat; border-radius:100%; z-index:50;}
.why-cnt-7 .slide-btn.prev {left:-10%; background-image:url("../images/sub/slide_prev.png");}
.why-cnt-7 .slide-btn.next {right:-10%; background-image:url("../images/sub/slide_next.png");}
.why-cnt-7 .slide-btn:hover {background-color:#6dcde5;}
.why-cnt-7 .slide-btn.prev:hover {background-image:url("../images/sub/slide_prev_on.png");}
.why-cnt-7 .slide-btn.next:hover {background-image:url("../images/sub/slide_next_on.png");}

.why-cnt-7-ver2 {margin-top:55px;}
.why-cnt-7-ver2 .row {display:flex; flex-wrap:wrap; margin:-15px -16px;}
.why-cnt-7-ver2 .box {position:relative; width:calc(33.33333333% - 32px); margin:15px 16px; background:#fff; text-align:center; border-radius:10px; padding:30px 10px; box-shadow:0 0 10px rgba(0,0,0,.35); transition:.2s;}
.why-cnt-7-ver2 .balloon {position:absolute; top:20px; right:20px; width:50px; height:58px; font-size:18px; font-weight:500; line-height:50px; color:#fff; background:url("../images/sub/balloon.png") 0 0 no-repeat;}
.why-cnt-7-ver2 .ico {height:62px; background-position:50% 50%; background-repeat:no-repeat; margin-bottom:13px;}
.why-cnt-7-ver2 .ico-1 {background-image:url("../images/sub/why_cnt7_icon1.png");}
.why-cnt-7-ver2 .ico-2 {background-image:url("../images/sub/why_cnt7_icon2.png");}
.why-cnt-7-ver2 .ico-3 {background-image:url("../images/sub/why_cnt7_icon3.png");}
.why-cnt-7-ver2 .ico-4 {background-image:url("../images/sub/why_cnt7_icon4.png");}
.why-cnt-7-ver2 .ico-5 {background-image:url("../images/sub/why_cnt7_icon5.png");}
.why-cnt-7-ver2 .ico-6 {background-image:url("../images/sub/why_cnt7_icon6.png");}
.why-cnt-7-ver2 .tit {color:#242424; font-size:22px; font-weight:700; line-height:1.3em; letter-spacing:-.03em;}
.why-cnt-7-ver2 .bar {width:25px; height:1px; background:#454545; margin:17px auto;}
.why-cnt-7-ver2 .txt1 {color:#314eaa; font-size:1.063em; font-weight:500; line-height:1.375em; letter-spacing:-.03em; margin-bottom:3px;}
.why-cnt-7-ver2 .txt2 {color:#686868; line-height:1.375em; letter-spacing:-.03em;}
.why-cnt-7-ver2 .badge {display:inline-block; color:#fff; font-size:15px; font-weight:500; line-height:29px; letter-spacing:-.03em; padding:0 12px; margin-top:8px; border-radius:20px;}
.why-cnt-7-ver2 .badge.type1 {background:#7591d6;}
.why-cnt-7-ver2 .badge.type2 {background:#254699;}
.why-cnt-7-ver2 .box.active * {color:#fff;}
.why-cnt-7-ver2 .box.active .ico-1 {background-image:url("../images/sub/why_cnt7_icon1_on.png");}
.why-cnt-7-ver2 .box.active .ico-2 {background-image:url("../images/sub/why_cnt7_icon2_on.png");}
.why-cnt-7-ver2 .box.active .ico-3 {background-image:url("../images/sub/why_cnt7_icon3_on.png");}
.why-cnt-7-ver2 .box.active .ico-4 {background-image:url("../images/sub/why_cnt7_icon4_on.png");}
.why-cnt-7-ver2 .box.active .ico-5 {background-image:url("../images/sub/why_cnt7_icon5_on.png");}
.why-cnt-7-ver2 .box.active .ico-6 {background-image:url("../images/sub/why_cnt7_icon6_on.png");}
.why-cnt-7-ver2 .box.active .bar {background:#fff;}
.why-cnt-7-ver2 .box.st1.active {background:#dd2c2c}
.why-cnt-7-ver2 .box.st2.active {background:#f37021}
.why-cnt-7-ver2 .box.st3.active {background:#fdb913}
.why-cnt-7-ver2 .box.st4.active {background:#5fa73c}
.why-cnt-7-ver2 .box.st5.active {background:#3a9afd}
.why-cnt-7-ver2 .box.st6.active {background:#8626f2}
.why-cnt-7-ver2 .box.st1.active .balloon {background-image:url("../images/sub/balloon2.png");}
.why-cnt-7-ver2 .box.st2.active .balloon {background-image:url("../images/sub/balloon2.png");}
.why-cnt-7-ver2 .box.st3.active .balloon {background-image:url("../images/sub/balloon3.png");}
.why-cnt-7-ver2 .box.st1.active .badge {background:#ffb118;}
.why-cnt-7-ver2 .box.st2.active .badge {background:#ffb118;}
.why-cnt-7-ver2 .box.st3.active .badge {background:#e66e25;}
.why-cnt-7-ver2 .box.st4.active .badge {background:#188b23;}
.why-cnt-7-ver2 .box.st5.active .badge {background:#254699;}

.why-cnt-8 {background:#fff; text-align:center; border-radius:15px; box-shadow:0 0 25px rgba(0,0,0,.1); margin-top:50px;}
.why-cnt-8 ul {display:flex; flex-wrap:wrap; overflow:hidden;}
.why-cnt-8 ul li {position:relative; width:20%; padding:30px 15px;}
.why-cnt-8 ul li:before {content:""; position:absolute; top:30px; left:-1px; bottom:30px; border-left:1px dashed #e5e5e5;}
.why-cnt-8 ul li:after {content:""; position:absolute; bottom:-1px; left:30px; right:30px; border-bottom:1px dashed #e5e5e5;}
.why-cnt-8 ul li .ico {width:80px; border-radius:100%; margin:0 auto 20px;}
.why-cnt-8 ul li .ico.type1 {background:#42ade2}
.why-cnt-8 ul li .ico.type2 {background:#254699}
.why-cnt-8 ul li .tit {color:#242424; font-size:18px; font-weight:600; line-height:1.35em; letter-spacing:-.03em; margin-bottom:7px;}
.why-cnt-8 ul li .txt {min-height:4.689em; color:#686868; line-height:1.563em; letter-spacing:-.03em;}
.why-cnt-8 ul li .badge {display:inline-block; color:#fff; font-size:15px; font-weight:500; line-height:29px; letter-spacing:-.03em; padding:0 12px; margin-top:20px; background:#7591d6; border-radius:20px;}

.why-cnt-8-ver2 {background:#fff; text-align:center; border-radius:15px; box-shadow:0 0 25px rgba(0,0,0,.1); margin-top:50px;}
.why-cnt-8-ver2 ul {display:flex; flex-wrap:wrap; overflow:hidden;}
.why-cnt-8-ver2 ul li {position:relative; width:33.33333333%; min-height:139px; display:flex; flex-direction:column; justify-content:center; padding:15px 25px 15px 40px;}
.why-cnt-8-ver2 ul li:before {content:""; position:absolute; top:10px; left:-1px; bottom:10px; border-left:1px dashed #e5e5e5;}
.why-cnt-8-ver2 ul li:after {content:""; position:absolute; bottom:-1px; left:10px; right:10px; border-bottom:1px dashed #e5e5e5;}
.why-cnt-8-ver2 ul li .wrap {display:flex; align-items:center;}
.why-cnt-8-ver2 ul li .ico {width:80px; border-radius:100%;}
.why-cnt-8-ver2 ul li .ico.type1 {background:#42ade2}
.why-cnt-8-ver2 ul li .ico.type2 {background:#254699}
.why-cnt-8-ver2 ul li .cnt {flex:1 1 auto; min-width:0; width:1%; margin-left:12px; text-align:left;}
.why-cnt-8-ver2 ul li .tit {color:#242424; font-size:18px; font-weight:600; line-height:1.35em; letter-spacing:-.03em; margin-bottom:4px;}
.why-cnt-8-ver2 ul li .txt {color:#686868; line-height:1.563em; letter-spacing:-.03em;}
.why-cnt-8-ver2 ul li .badge-wrap {text-align:right;}
.why-cnt-8-ver2 ul li .badge {display:inline-block; color:#fff; font-size:15px; font-weight:500; line-height:29px; letter-spacing:-.03em; padding:0 12px; background:#7591d6; border-radius:20px;}

.why-cnt-9 .tt {text-align:center; font-size:18px; line-height:1.5em; margin-bottom:40px;}
.why-cnt-9 .tt strong {font-weight:600;}
.why-cnt-9 .row {display:flex; margin:0 -10px;}
.why-cnt-9 .col {padding:0 10px;}
.why-cnt-9 .col-1 {width:26%;}
.why-cnt-9 .col-2 {width:48%;}
.why-cnt-9 .box {height:100%; padding:27px 20px 15px; background:#fff; text-align:center; border-radius:15px; box-shadow:0 0 25px rgba(0,0,0,.1);}
.why-cnt-9 .tit {min-height:50px; font-size:18px; font-weight:600; line-height:1.4em; letter-spacing:-.03em; margin-bottom:13px;}
.why-cnt-9 .date {color:#686868; font-size:.8em; font-weight:400; line-height:1.4em; margin-top:2px;}

.why-cnt-10 {text-align:center;}
.why-cnt-10 .btn {display:inline-block; padding:15px 30px; color:#fff; font-size:20px; font-weight:500; line-height:1.3em; letter-spacing:-.03em; background:#002060; text-align:center; border:0; border-radius:35px;}
.why-cnt-10 .btn:before {content:""; display:inline-block; width:31px; height:31px; vertical-align:middle; margin:-.2em 12px 0 0; background:url("../images/sub/icon_submit.png") 50% 50% no-repeat;}

/* 회사소개 */
.about .group {padding:80px 0;}
.about .group:first-child {padding-top:0;}
.about .group.bg {background:#f4f4f4;}
.about .sub-title {margin-bottom:40px;}

.about-cnt-1 {display:flex;}
.about-cnt-1 .txt {flex:1 1 auto; min-width:0; width:1%; color:#686868; line-height:1.563em; letter-spacing:-.03em; margin-right:40px;}
.about-cnt-1 .txt h3 {color:#242424; font-size:30px; line-height:1.2em; letter-spacing:-.03em; margin-bottom:20px;}
.about-cnt-1 .txt .tt {color:#242424; font-size:22px; font-weight:700; line-height:1.4em; letter-spacing:-.03em; margin:45px 0 12px;}
.about-cnt-1 .txt .tt em {font-style:normal; color:#3766c4;}
.about-cnt-1 .img {width:50%; position:relative; overflow:hidden;}
.about-cnt-1 .img img {position:absolute; top:50%; left:0; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}

.about-cnt-2 h3 {font-size:25px; font-weight:400; line-height:1.3em; letter-spacing:-.03em; margin-bottom:30px;}
.about-cnt-2 h3 .marker {position:relative;}
.about-cnt-2 h3 .marker:before {content:""; position:absolute; bottom:6px; left:0; right:0; height:36%; background:#96bfdf;}
.about-cnt-2 h3 .marker strong {position:relative;}
.about-cnt-2 .row {display:flex; margin:0 -13px;}
.about-cnt-2 .col {width:33.33333333%; padding:0 13px;}
.about-cnt-2 .img {margin-bottom:17px;}
.about-cnt-2 dt {font-size:20px; font-weight:700; line-height:1.364em; letter-spacing:-.03em; margin-bottom:8px;}
.about-cnt-2 dt em {font-style:normal; color:#3766c4;}
.about-cnt-2 dd {color:#454545; line-height:1.563em; letter-spacing:-.04em;}
.about-cnt-2 dd strong {font-weight:600;}

.about-cnt-3 {display:flex; height:500px; text-align:center; color:#fff; background:url("../images/sub/about_count_bg.jpg") 50% 50% no-repeat; background-size:cover;}
.about-cnt-3 .col {width:25%; display:flex; align-items:center; padding:30px; border-left:1px solid rgba(255,255,255,.3);}
.about-cnt-3 .col:first-child {border-left:0;}
.about-cnt-3 .in {width:100%;}
.about-cnt-3 .ico {margin-bottom:27px;}
.about-cnt-3 dt {font-size:18px; font-weight:500; line-height:1.3em; letter-spacing:-.03em; margin-bottom:8px;}
.about-cnt-3 dd {font-size:42px; font-weight:700; line-height:1.3em; letter-spacing:0;}

.about-cnt-4 .list {margin-bottom:80px;}
.about-cnt-4 .list:last-child {margin-bottom:0;}
.about-cnt-4 .list p {text-align:center; font-size:20px; font-weight:700; line-height:1.33em; letter-spacing:-.04em; margin-bottom:15px;}
.about-cnt-4 .list ul {display:flex; flex-wrap:wrap; border-top:1px solid #ddd; border-left:1px solid #ddd; text-align:center;}
.about-cnt-4 .list ul li {width:20%; padding:4px 0; border-right:1px solid #ddd; border-bottom:1px solid #ddd; overflow:hidden;}
.about-cnt-4 .list ul li a {display:block;}
.about-cnt-4 .list ul li div {}
.about-cnt-4 .list ul li .on {display:none;}
.about-cnt-4 .list ul li:hover .off {display:none;}
.about-cnt-4 .list ul li:hover .on {display:block;}
.about-cnt-4 .list ul li:hover div {animation:zoonIn .5s forwards;}

@keyframes zoonIn{
    0%{transform:scale(1)}
    100%{transform:scale(1.1)}
}

.about-cnt-5 {display:flex; justify-content:space-between;}
.about-cnt-5 .cnt {width:35%; margin-right:3%;}
.about-cnt-5 .cnt h3 {font-family:'Montserrat', sans-serif; font-size:30px; font-weight:600; line-height:1em; letter-spacing:-.03em; margin-bottom:12px;}
.about-cnt-5 .cnt dl {font-size:18px; line-height:1.667em; letter-spacing:-.03em; margin-bottom:30px;}
.about-cnt-5 .cnt dt {font-weight:700;}
.about-cnt-5 .cnt dd {font-weight:500;}
.about-cnt-5 .cnt ul {color:#686868; letter-spacing:-.03em;}
.about-cnt-5 .cnt ul li {padding-left:1.1em; text-indent:-1.1em;}
.about-cnt-5 .map-area {width:66%; max-width:900px;}

.root_daum_roughmap {width:100% !important;}
.roughmap_lebel_text {font-size:0 !important; line-height:0 !important;}
.roughmap_lebel_text:after {content:"웹사이트"; font-size:12px; line-height:15px; text-indent:0;}

/* 견적문의 */
.contact-top {display:flex; align-items:center; height:480px; color:#fff; background:url("../images/sub/contact.jpg") 50% 50% no-repeat; margin-bottom:80px;}
.contact-top .inner {padding:70px;}
.contact-top h3 {font-size:40px; line-height:1.3em; letter-spacing:-.03em; margin-bottom:12px;}
.contact-top p {font-size:20px; font-weight:500; line-height:1.5em; letter-spacing:-.03em;}

.contact-form {color:#454545; font-size:17px; line-height:1.647em; letter-spacing:-.03em;}
.contact-form .form-group {margin-bottom:40px;}
.contact-form .title {display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
.contact-form .title h3 {color:#242424; font-size:20px; line-height:1.3em; letter-spacing:-.03em;}
.contact-form .title p {color:#686868; font-size:16px; line-height:1.3em; letter-spacing:-.03em;}
.contact-form .content {padding:20px 0 0 20px; border-top:1px solid #414141;}
.contact-form .content.type2 {padding-left:0;}
.contact-form .radiobox {font-weight:500;}
.contact-form .radiobox label:before {width:24px; height:24px; background:#b7b7b7 url("../images/sub/checkbox.png") 50% 50% no-repeat; border:0;}
.contact-form .radiobox input:checked + label:before {background:#002060 url("../images/sub/checkbox.png") 50% 50% no-repeat;}
.contact-form .input {display:block; width:100%; height:50px; padding:7px 19px; font-size:17px; letter-spacing:-.03em; border-radius:10px;}
.contact-form textarea.input {height:180px;}
.contact-form .input[readonly] {font-weight:500;}
.contact-form .check-wrap {display:flex; flex-wrap:wrap; margin-left:-54px; margin-top:-13px;}
.contact-form .check-wrap .radiobox {margin-left:54px; margin-top:13px;}
.contact-form .input-wrap {display:flex; flex-wrap:wrap; margin:-7px -15px;}
.contact-form .input-wrap .col {padding:7px 15px;}
.contact-form .input-wrap .col-1 {width:50%;}
.contact-form .input-wrap .col-2 {width:100%;}
.contact-form .agree-box {padding:15px 19px; border:1px solid #ddd; border-radius:10px; color:#686868; font-weight:300;}
.contact-form .agree-check {margin-top:17px;}
.contact-form .submit-area {text-align:center; margin-top:50px;}
.contact-form .submit {display:inline-block; width:250px; height:70px; color:#fff; font-size:22px; font-weight:400; line-height:1.3em; letter-spacing:-.03em; background:#002060; text-align:center; border:0; border-radius:35px;}
.contact-form .submit:before {content:""; display:inline-block; width:31px; height:31px; vertical-align:middle; margin:-.2em 12px 0 0; background:url("../images/sub/icon_submit.png") 50% 50% no-repeat;}

/* 개인결제 */
.pay-list  {margin-bottom:70px;}
.pay-list ul {display:flex; flex-wrap:wrap; margin:-20px;}
.pay-list ul li {width:25%; padding:20px; text-align:center;}
.pay-list .box {background:#fff; box-shadow:0 0 20px rgba(0,0,0,.15); border-radius:20px;}
.pay-list .box-in {overflow:hidden; border-radius:20px;}
.pay-list .thumb {display:flex; align-items:center; justify-content:center; padding:0 40px; height:210px; background:#f2f4f6;}
.pay-list .thumb img {opacity:.5;}
.pay-list .cnt {padding:40px;}
.pay-list .tit {color:#454545; font-size:17px; line-height:1.5em; letter-spacing:-.03em; margin-top:-5px; margin-bottom:2px;}
.pay-list .price {color:#242424; font-size:20px; font-weight:700; line-height:1.4em; letter-spacing:-.03em; margin-bottom:22px;}
.pay-list .btn {display:inline-block; width:90%; max-width:160px; color:#fff; font-size:18px; font-weight:500; line-height:45px; letter-spacing:-.03em; background:#254699; border-radius:30px;}

.pay-list .pay-result .box {padding:40px 35px; background:#f2f4f5;}
.pay-list .pay-result h3 {text-align:center; color:#002060; font-size:35px; font-weight:400; line-height:1.3em; letter-spacing:-.03em; margin-bottom:27px;}
.pay-list .pay-result .col {width:100%; padding:0 10px;}
.pay-list .pay-result table {width:100%; border-collapse:collapse; border-spacing:0px;}
.pay-list .pay-result table th {height:70px; padding:4px 10px; color:#fff; font-size:18px; font-weight:500; line-height:1.5em; letter-spacing:-.03em; background:#002060; border:1px solid #ddd; border-top:0;}
.pay-list .pay-result table td {height:70px; padding:4px 10px; color:#454545; font-size:17px; font-weight:300; line-height:1.5em; letter-spacing:-.03em; text-align:left; background:#fff; border:1px solid #ddd; border-top:0;}
.pay-list .pay-result tr th:first-child,
.pay-list .pay-result tr td:first-child {border-left:0;}
.pay-list .pay-result tr th:last-child,
.pay-list .pay-result tr td:last-child {border-right:0;}
.pay-list .pay-result .memo {line-height:1.5em; color:#454545; font-weight:300; letter-spacing:-.03em; margin-top:17px;}


/* 형광펜 */
.txt-highlight-r {display: inline-block;	line-height: inherit;	font-weight: inherit;	vertical-align: top;	position: relative;	z-index: 0;	padding: 0 3px;	overflow: hidden;}
.txt-highlight-r::after {	content: '';	display: block;	width: 0;	z-index: -1;	border-bottom: 0.4em solid #ffcbf6;	position: absolute;	left: 0;	bottom: 0;}
.txt-highlight-b {display: inline-block;	line-height: inherit;	font-weight: inherit;	vertical-align: top;	position: relative;	z-index: 0;	padding: 0 3px;	overflow: hidden;}
.txt-highlight-b::after {	content: '';	display: block;	width: 0;	z-index: -1;	border-bottom: 0.4em solid #b4cbf6;	position: absolute;	left: 0;	bottom: 0;}
.txt-highlight-v {display: inline-block;	line-height: inherit;	font-weight: inherit;	vertical-align: top;	position: relative;	z-index: 0;	padding: 0 3px;	overflow: hidden;}
.txt-highlight-v::after {	content: '';	display: block;	width: 0;	z-index: -1;	border-bottom: 0.4em solid #ccccff;	position: absolute;	left: 0;	bottom: 0;}
.txt-highlight-y {display: inline-block;	line-height: inherit;	font-weight: inherit;	vertical-align: top;	position: relative;	z-index: 0;	padding: 0 3px;	overflow: hidden;}
.txt-highlight-y::after {	content: '';	display: block;	width: 0;	z-index: -1;	border-bottom: 0.4em solid #FFFF00;	position: absolute;	left: 0;	bottom: 0;}
.txt-highlight-sb {display: inline-block;	line-height: inherit;	font-weight: inherit;	vertical-align: top;	position: relative;	z-index: 0;	padding: 0 3px;	overflow: hidden;}
.txt-highlight-sb::after {	content: '';	display: block;	width: 0;	z-index: -1;	border-bottom: 0.4em solid #b8e6fd;	position: absolute;	left: 0;	bottom: 0;}


.move-highlight::after {	animation: highlight 700ms linear;	animation-fill-mode: both;	animation-delay: 700ms;}
@keyframes highlight {	0% { width: 0; }	100% { width: 100%; } }
.move-highlight2::after {	animation: highlight2 700ms linear;	animation-fill-mode: both;	animation-delay: 1400ms;}
@keyframes highlight2 {	0% { width: 0; }	100% { width: 100%; } }
.move-highlight3::after {	animation: highlight3 700ms linear;	animation-fill-mode: both;	animation-delay: 2100ms;}
@keyframes highlight3 {	0% { width: 0; }	100% { width: 100%; } }
.move-highlight4::after {	animation: highlight4 700ms linear;	animation-fill-mode: both;	animation-delay: 2800ms;}
@keyframes highlight4 {	0% { width: 0; }	100% { width: 100%; } }

/* 기획형 홈페이지 */
.planned .sub-title h4 {font-size: 20px; font-weight: 500; line-height: 1.5; letter-spacing: -.03em; margin: 10px 0;}
.planned .sub-title .tip {position: relative; display: inline-block; color: #2481c2; font-size: 22px; font-weight: 700; padding-left: 37px;}
.planned .sub-title .tip .ico {position: absolute; top: -1px; left: 0; width: 30px; height: 30px; background: no-repeat url("../images/planned/ico_tip.png") center center / contain;}

.planned .title {text-align:center; margin-bottom:30px;}
.planned .title.left {text-align: left;}
.planned .title h3 {color:#242424; font-size:32px; line-height:1.3em; letter-spacing:-.04em;}
.planned .title h3 span strong {color:#314eaa;}
.planned .title p {color:#686868; line-height:1.5em; letter-spacing:-.03em; margin-top:10px;}


.planned-intro {padding: 70px 0; background: no-repeat url("../images/planned/bg_planned_intro.jpg") center center / cover;}
.planned-intro .head {display: flex;align-items: center;justify-content: space-between; margin-bottom: 60px; font-size: 22px; color: #fff; line-height: 1.545; text-align: center;}
.planned-intro .head .center {order: 2; width: 300px; margin: 0 15px;}
.planned-intro .head .center .one {position: relative; padding-bottom: 100%; background: linear-gradient(90deg, #3972b3 0%, #54a145 100%); border-radius:100%; overflow:hidden;}
.planned-intro .head .center .one .inner {position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); width: 100%;}
.planned-intro .head .center .one h3 {font-size: 30px; font-weight: 600; line-height: 1.333; letter-spacing: -.05em; margin-top: 12px;}
.planned-intro .head .left {text-align: center;}
.planned-intro .head .right {order: 3;}
.planned-intro .head .tt {display: block; font-size: 60px; font-weight: 600; line-height: 1.2; margin-bottom: 12px;}
.planned-intro .head .point-txt {position: relative; font-weight: 600; padding: 0 2px; z-index: 10;}
.planned-intro .head .point-txt:before {content:''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;}
.planned-intro .head .point-txt.c1:before {background: #2481c2;}
.planned-intro .head .point-txt.c2:before {background: #4e9751;}
.planned-intro .body {color: #454545; font-size: 18px; line-height: 1.667; letter-spacing: -.03em;}
.planned-intro .body .box {background: #fff; border-radius: 20px; padding: 30px 0;}
.planned-intro .body .row {display: flex;flex-wrap:wrap;}
.planned-intro .body .row .col {width: 25%; padding: 0 30px 80px 30px; border-right: 1px solid #ddd; background-position:right 30px bottom 0; background-repeat:no-repeat; background-size:76px;}
.planned-intro .body .row .col:nth-child(1) {background-image:url("../images/planned/icon_planned_body1.png");}
.planned-intro .body .row .col:nth-child(2) {background-image:url("../images/planned/icon_planned_body2.png");}
.planned-intro .body .row .col:nth-child(3) {background-image:url("../images/planned/icon_planned_body3.png");}
.planned-intro .body .row .col:nth-child(4) {border-right: 0; background-image:url("../images/planned/icon_planned_body4.png");}
.planned-intro .body .row .col strong {font-weight: 700;}

.planned-case {padding: 150px 0; background: #f1f1f1; overflow:hidden;}
.planned-case .contain {position: relative;}
.planned-case .slider {position: relative; margin-right: -100%;}

.planned-case-list {position: relative;}
.planned-case-list .items {margin: -15px -12.5px;}
.planned-case-list .item {padding: 15px 12.5px;}
.planned-case-list .item a {position: relative; display: block; border-radius:29px; overflow:hidden;}
.planned-case-list .thumb {position:relative; padding-bottom:67%; overflow:hidden;}
.planned-case-list .thumb img {position:absolute; top:50%; left:0; transition:.4s ease-in-out; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}
.planned-case-list .thumb:before {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, #3972b3 0%, #54a145 100%); opacity: .95; border-radius:inherit; z-index: 1;}
.planned-case-list .txt {visibility: hidden; position: absolute; left: 40px; bottom: 40px; color: #fff; font-size: 17px; line-height: 1.471; letter-spacing: -.02em; z-index: 10;}
.planned-case-list .txt .tit {font-size: 1.412em; font-weight: 600; line-height: 1.4; letter-spacing: -.05em; margin-bottom: 9px;}
.planned-case-list .txt .desc {line-height: 1.471em;}
.planned-case-list .txt .cate {line-height: 1.471em;}

.planned-case-list .item a:hover {transform:translateY(-40px); box-shadow: 0 0 15px rgb(0 0 0 / 15%);}
.planned-case-list .item a:hover .thumb:before {content:'';}
.planned-case-list .item a:hover .txt {visibility: visible;}

.planned-case-list .slick-list {padding: 40px 0 0;}
.planned-case-list .slick-list .slick-slide {width: 450px;}

.planned-case .roll-btn {position:absolute; top:7px; right: 30px;}
.planned-case .slick-arrow {width:60px; height:60px; z-index:50; background-size: 25px; background-color:#fff; background-position:50% 50%; background-repeat:no-repeat; border:1px solid #ddd; border-radius:100%; overflow:hidden; text-indent:-9999em;}
.planned-case .slick-arrow:hover {background-color:#2481c2; border-color:#2481c2; box-shadow: 0 0 15px rgb(0 0 0 / 15%);}
.planned-case .slick-prev {background-image:url("../images/planned/slide_prev.png"); margin-right: 10px;}
.planned-case .slick-prev:hover {background-image:url("../images/planned/slide_prev_on.png");}
.planned-case .slick-next {background-image:url("../images/planned/slide_next.png");}
.planned-case .slick-next:hover {background-image:url("../images/planned/slide_next_on.png");}

.planned-process {margin: 150px 0;}
.planned-process .list {position: relative; text-align: center; padding: 100px 0 30px;}
.planned-process .list ol {display: flex;flex-wrap:wrap; margin: 0 -30px;}
.planned-process .list ol li {position: relative; width: 16.6666666%; padding: 0 30px;}
.planned-process .list ol li:after {content:''; position: absolute; top: 72px; right: -18px; width: 36px; height: 36px; background: no-repeat url("../images/planned/arrow.png") center center / contain;}
.planned-process .list ol li:last-child:after {display: none;}
.planned-process .list ol li .tit {display: flex;justify-content: center;align-items: center;flex-direction: column; width: 180px; height: 180px; border-radius:100%; background: #fff; box-shadow: 0 0 15px rgb(0 0 0 / 10%); margin: 0 auto 16px;}
.planned-process .list ol li .tit .inner {}
.planned-process .list ol li .tit .icon {}
.planned-process .list ol li .tit strong {display: block; font-size: 20px; color: #454545; line-height: 1.5; letter-spacing: -.03em; margin-top: 8px;}
.planned-process .list ol li .txt {color: #454545;}

.planned-process .list .tripleSection {position: absolute; left: 28%; right: 11%; top: 0; bottom: 0; padding: 38px 0 0; background: #fafafa; border: 1px dashed #ddd; border-radius:300px; z-index: -1;}
.planned-process .list .tripleSection strong {font-size: 30px; line-height: 1.3; letter-spacing: -.03em; background: linear-gradient(90deg, #2762a5 0%, #45a033 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}

.planned-process .list-detail .group {position: relative; margin-bottom: 100px;}
.planned-process .list-detail .group:last-child {margin-bottom: 0;}

.planned-process .list-detail .group .background {position: absolute; width: 100%; background-repeat:no-repeat;  z-index: -1;}
.planned-process .list-detail .group:nth-child(odd) .background {right: 0; top: -43%; padding-bottom: 76%; background-image:url("../images/planned/bg_planned_process_right.png"); background-size: 57% auto; background-position:right top;}
.planned-process .list-detail .group:nth-child(even) .background {left: 0; top: -13%; padding-bottom: 44%; background-image:url("../images/planned/bg_planned_process_left.png"); background-size: 100% auto; background-position:left top;}

.planned-process .list-detail .flex-div {display: flex;justify-content: space-between;}
.planned-process .list-detail .flex-div > div {}
.planned-process .list-detail .left {width: 42.5%; margin-right: 80px;}
.planned-process .list-detail .left .tit {font-size: 30px; font-weight: 700; line-height: 1.4; letter-spacing: -.03em; border-bottom: 1px solid #ddd; padding-bottom: 10px; margin-bottom: 40px;}
.planned-process .list-detail .left .tit .en {display: block; color: #2481c2; font-size: 17px; letter-spacing: 0;}
.planned-process .list-detail .left .txt {color: #454545; font-size: 18px; font-weight: 500; line-height: 1.667; letter-spacing: -.03em; padding-left: 170px; background-position:left 24px center; background-repeat:no-repeat; background-size:101px;}
.planned-process .list-detail .left .txt ul {}
.planned-process .list-detail .left .txt ul li {position: relative; padding-left: 23px; margin: 1em 0;}
.planned-process .list-detail .left .txt ul li:before {content:''; position: absolute; top: 7px; left: 0; width: 13px; height: 13px; background-position:50% 50%; background-repeat:no-repeat; background-size:contain;}

.planned-process .list-detail .group:nth-child(1) .left .txt {background-image:url("../images/planned/icon_planned_process_big1.png");}
.planned-process .list-detail .group:nth-child(2) .left .txt {background-image:url("../images/planned/icon_planned_process_big2.png");}
.planned-process .list-detail .group:nth-child(3) .left .txt {background-image:url("../images/planned/icon_planned_process_big3.png");}
.planned-process .list-detail .group:nth-child(4) .left .txt {background-image:url("../images/planned/icon_planned_process_big4.png");}
.planned-process .list-detail .group:nth-child(5) .left .txt {background-image:url("../images/planned/icon_planned_process_big5.png");}
.planned-process .list-detail .group:nth-child(6) .left .txt {background-image:url("../images/planned/icon_planned_process_big6.png");}

.planned-process .list-detail .group:nth-child(odd) .left .txt ul li:before {background-image:url("../images/planned/check1.png");}
.planned-process .list-detail .group:nth-child(even) .left .txt ul li:before {background-image:url("../images/planned/check2.png");}

.planned-process .list-detail .right {flex: 1 1 auto; min-width: 0; width: 1%;}
.planned-process .list-detail .right .box-wrap {display: flex;justify-content: space-between; padding-top: 50px;}
.planned-process .list-detail .right .box {position: relative; width: calc(50% - 15px); padding: 78px 40px 30px; border-radius:29px; background: #fff; box-shadow: 0 0 15px rgb(0 0 0 / 10%); color: #454545; font-size: 18px; line-height: 1.667; letter-spacing: -.03em;}
.planned-process .list-detail .right .box .tt {position: absolute; top: -50px; display: block; width: 100px; height: 100px; color: #fff; font-size: 24px; font-weight: 600; line-height: 100px; text-align: center; border-radius:20px;}
.planned-process .list-detail .right .box .tt.bg1 {background: #2481c2;}
.planned-process .list-detail .right .box .tt.bg2 {background: #254699;}
.planned-process .list-detail .right .box ul {}
.planned-process .list-detail .right .box .ul-col2 ul {float: left; width: 50%;}
.planned-process .list-detail .right .box ul li {position: relative; padding-left: 10px;}
.planned-process .list-detail .right .box ul li:before {content:'•'; position: absolute; top: 0; left: 0;}

.planned-process .list-detail .summary {font-size: 20px; font-weight: 600; line-height: 1.5; letter-spacing: -.03em; margin-top: 50px;}
.planned-process .list-detail .summary ol {display: flex;flex-wrap:wrap;justify-content: center;align-items: center;align-content: center; min-height: 70px; background: #e0e7ed; border-radius:50px; padding: 5px 10px;}
.planned-process .list-detail .summary ol li {position: relative; padding: 0 30px;}
.planned-process .list-detail .summary ol li:after {content:'→';position: absolute; right: 0; transform: translateX(50%); color: #2481c2;}
.planned-process .list-detail .summary ol li:last-child:after {display: none;}