@charset "UTF-8";
#header {position:fixed; top:0; right:0; left:0; z-index:9999; width:100%; height:60px; text-align:right; background:#fff}
#header > .logo {position:absolute; left:0; top:0; width:80px; height:60px; line-height:1; font-size:1px; color:transparent; text-indent:-9999em; vertical-align:top; background:url(../images/logo.png) 50% 50% no-repeat; background-size:50px auto;}
#header > .menu {display:inline-block; margin-right:15px}
#header > .menu ul:after {content:""; display:block; clear:both}
#header > .menu ul li {float:left}
#header > .menu ul li ~ li {margin-left:25px}
#header > .menu ul li a {transition: 0.4s; display:inline-block; position:relative; height:60px; line-height:60px; font-weight:800; font-size: 0.875rem; color:#000; letter-spacing:0}
#header > .menu ul li.prev a {padding-right:24px}
#header > .menu ul li.next {margin-left:40px}
#header > .menu ul li.next a {padding:0 20px 0 0; text-align:right}
#header > .menu ul li.active a {color:#ed3b82}

#footer .wrap {padding:30px 15px 35px; color:#fff; background:#121212}
#footer .wrap ~ .wrap {padding-bottom:50px; color:#000; background:#fff}
#footer .wrap .tit {position:relative; padding-left:37px}
#footer .wrap .tit .tag {display:inline-block; position:absolute; top:25px; left:-23px; font-weight:800; font-size:13px; -webkit-transform:rotate(-90deg); -ms-transform:rotate(-90deg); -moz-transform:rotate(-90deg); transform:rotate(-90deg)}
#footer .wrap .tit strong {font-weight:800; font-size:30px}
#footer .wrap .tit strong > span {display:block; padding-top:11px}
#footer .wrap .list ul {margin:6px 0 0 14px}
#footer .wrap .list ul:after {content:""; display:block; clear:both}
#footer .wrap .list ul li {float:left; width:33.33%; margin-top:26px; text-align:center}
#footer .wrap .list ul li span {display:inline-block; line-height:1; font-size:1px; color:transparent; text-indent:-9999em}
#footer .wrap .list ul li.lg span {width:65px; height:28px; background:url( ../images/logo-lg.png) 50% 50% no-repeat; background-size:65px auto}
#footer .wrap .list ul li.tngt span {width:45px; height:28px; background:url( ../images/logo-tngt.png) 50% 50% no-repeat; background-size:45px auto}
#footer .wrap .list ul li.sy span {width:75px; height:28px; background:url( ../images/logo-sy.png) 50% 50% no-repeat; background-size:75px auto}
#footer .wrap .list ul li.colorat span {width:54px; height:28px; background:url( ../images/logo-colorat.png) 50% 50% no-repeat; background-size:54px auto}
#footer .wrap .list ul li.kto span {width:72px; height:28px; background:url( ../images/logo-kto.png) 50% 50% no-repeat; background-size:72px auto}
#footer .wrap .list ul li.skb span {width:79px; height:28px; background:url( ../images/logo-skb.png) 50% 50% no-repeat; background-size:79px auto}
#footer .wrap .list ul li.yhk span {width:68px; height:28px; background:url( ../images/logo-yhk.png) 50% 50% no-repeat; background-size:68px auto}
#footer .wrap .contact .cont {padding:38px 0 0 37px}
#footer .wrap .contact .cont strong {display:inline-block; padding-bottom:5px; font-weight:800; font-size:10px; border-bottom:1px solid #000}
#footer .wrap .contact .cont p {padding-top:20px; font-size:19px}
#footer .wrap .contact .cont p > span {display:block; padding-top:9px}
#footer .wrap .contact .cont.add {padding-top:33px}
#footer .wrap .contact .cont.add p > span {padding-top:12px; font-size:15px}
#footer .wrap .contact .cont p em {font-style:normal; margin-left:3px}
#footer .wrap .copy {line-height:1.26em; margin-top:24px; padding-left:37px; font-weight:300; font-size:10px}

/* TOP버튼 */
.gotop {overflow: hidden; position:fixed; right:15px; bottom:15px; width:48px; height:48px; font-size:14px; z-index:9999; background-color: #282828; color: #fff; border-radius: 0 40px 40px 0; line-height: 48px; text-align: center}
.gotop span {position: relative; z-index: 1}
.gotop::after {content: ""; position: absolute; top: 0; left: 0; height: 490%; width: 140%; background: #ed3b82; transition: all 0.5s ease-in-out; transform: translateX(-163%) translateY(2%) rotate(45deg)}
.gotop:hover::after {transform: translateX(-90%) translateY(-19%) rotate(45deg)}
.gotop:hover {animation: jelly 0.5s linear}
@keyframes jelly {
    25% {transform: scale(0.9, 1.1)}
    50% {transform: scale(1.1, 0.9)}
    75% {transform: scale(0.95, 1.05)}
}

[class*="section-"] .set {padding:0 4px}
[class*="section-"] .set:first-child {padding-top:46px}
[class*="section-"] .set .head {text-align:center}
[class*="section-"] .set .head h2 {font-weight:700; font-size:30px; color:#fff; letter-spacing:0.04em; line-height: 1.1}
[class*="section-"] .set .head h3.double {font-family:"Lato"; font-weight:200; font-size:14px; letter-spacing:0.02em}
[class*="section-"] .set .head h3.double > span {display:block; padding-bottom:9px; font-weight:700; font-size:10px; letter-spacing:0.02em}
[class*="section-"] .set .head .tag {padding-top:8px; font-weight:300; font-size:15px; color:#fff; letter-spacing:0.04em}
[class*="section-"] .set .head .date {display:block; padding-top:14px; font-style:italic; font-weight:700; font-size:10px; color:#fff; letter-spacing:0.07em}
[class*="section-"] .set .head .date + .img {padding-top:15px}
[class*="section-"] .set .img {text-align:center}
[class*="section-"] .set .img img {max-width:100%}
[class*="section-"] .set .desc {line-height:25px; padding:0 11px; font-size:14px; letter-spacing:0.02em; word-break:keep-all}

/* 한국관광공사 */
.section-kto .set1 {padding-bottom:7px; background:#fae400 url(../images/bg-kto-sec1.jpg) 0 0 no-repeat; background-size:100% auto}
.section-kto .set1 .desc {padding-top:50px}
.section-kto .set1 .img img {width:96.3%}
.section-kto .set2 {padding-bottom:54px; background:#fae400}
.section-kto .set3 {padding-top:56px; background:#9eeafa url(../images/bg-kto-sec3.jpg) 0 0 no-repeat; background-size:100% auto}
.section-kto .set3 .img img {width:39.5%}
.section-kto .set4 {padding-top:17px; padding-bottom:105px; background:#9eeafa url(../images/bg-kto-sec4.jpg) 0 100% no-repeat; background-size:100% auto}

/* SK Broadband */
.section-skbroad .set1 {background:#ecebf3 url(../images/bg-skb-sec1.jpg) 0 0 no-repeat; background-size:100% auto}
.section-skbroad .set1 .head {padding-right:13px; text-align:right}
.section-skbroad .set1 .head h2 {color:#000}
.section-skbroad .set1 .head .tag {color:#000}
.section-skbroad .set1 .head .date {color:#000}
.section-skbroad .set1 .img {margin-right:-4px; padding-top:12px; text-align:right}
.section-skbroad .set1 .img img {width:80.9%}
.section-skbroad .set1 .desc {padding-top:40px}
.section-skbroad .set2 {padding-top:20px; padding-bottom:54px; background:#ecebf3}
.section-skbroad .set2 .img ~ .img {padding-top:17px}
.section-skbroad .set3 {padding-bottom:54px; background:#fff}
.section-skbroad .set3 .head {padding-top:33px}
.section-skbroad .set3 .img {padding:46px 21px 0}
.section-skbroad .set4 {padding-top:40px; padding-bottom:139px; background:#ee1d32 url(../images/bg-skb-sec4.jpg) 0 0 no-repeat; background-size:100% auto}
.section-skbroad .set4 .img:first-child {padding-left:-12px}
.section-skbroad .set4 .img:first-child img {width:43.53%}
.section-skbroad .set4 .img ~ .img {padding-top:17px}

/* 솜솜일러스트공모전 */
.section-som {position:relative}
.section-som .set1 {padding-bottom:140px; background:#fdeaed url(../images/bg-som-sec1.jpg) 0 0 no-repeat; background-size:cover}
.section-som .set1 .head .date {padding-top: 19px;}
.section-som .set1 .head .date + .img {padding-top:24px}
.section-som .set1 .desc {padding-top:20px; color:#fff}
.section-som .set1 .img img {width:94.3%}
.section-som .set2:after {content:""; display:inline-block; position:absolute; top:-136.5px; left:0; width:100%; height:686px; background:url(../images/bg-som-sec2.png) 0 0 no-repeat; background-size:100% auto}
.section-som .set2 {position:relative; background:#fdeaed}
.section-som .set2 .img {position:relative; z-index:1}
.section-som .set3 {margin-top:-851px;padding:865px 0 64px; background:#fdeaed}
.section-som .set4 {padding:96px 0 110px; background:#dd9b9d url(../images/bg-som-sec3.jpg) 0 0 no-repeat; background-size:100%}
.section-som .set4 .img img {width:87%}

/* 컬러어떰 */
.section-color .set1 {padding-bottom:35px; background:#660a12 url(../images/bg-color-sec1.jpg) 0 0 no-repeat; background-size:cover}
.section-color .set1 .head .date {color:#db9395; padding-top: 19px;}
.section-color .set1 .head .date + .img {padding-top:20px}
.section-color .set1 .img img {width:86%}
.section-color .set2 {padding:0 4px 0; margin-bottom:-105px; background:#f0c7bf url(../images/bg-color-sec2.jpg) 0 0 no-repeat; background-size:100% auto}
.section-color .set2 .desc {padding-top:24px; color:#d16363}
.section-color .set2 .img {padding-top:25px}
.section-color .set2 .img img {width:93.3%}
.section-color .set3 {padding-top:160px; background:#f0c7bf url(../images/bg-color-sec3.jpg) 0 0 no-repeat; background-size:70% auto}
.section-color .set3 .img img {width:39.5%}
.section-color .set4 {padding-top:17px; padding-bottom:105px; background:#f0c7bf url(../images/bg-color-sec4.jpg) 100% 100% no-repeat; background-size:62% auto}
.section-color .set4 .img img {width:93.3%}

/* U+ */
.section-uplus .set1 {padding-bottom:28px; background:#50b4d6}
.section-uplus .set1 .img img {width:90.3%}
.section-uplus .set1 .head .date {padding-top: 19px;}
.section-uplus .set2 {padding:24px 4px 54px; background:#f4f5f0 url(../images/bg-uplus-sec1.jpg) 0 0 no-repeat; background-size:100% auto}
.section-uplus .set2 .img {padding-top:34px}
.section-uplus .set2 .img img {width:93.3%}
.section-uplus .set3 {padding:36px 0 45px; background: #fff;}
.section-uplus .set3 .img {padding-top:30px}
.section-uplus .set3 .img img {width:95%}
.section-uplus .set4 {padding:52px 0 117px; background:#f5f6f1 url(../images/bg-uplus-sec2.jpg) 0 0 no-repeat; background-size:100% auto}
.section-uplus .set4 .img:first-child img {width:39.5%}
.section-uplus .set4 .img:last-child {padding-top:29px}
.section-uplus .set4 .img:last-child img {width:93.3%}

/* 삼양옵틱스 */
.section-samyang .set1 {padding-bottom:28px; background:#0a1015 url(../images/bg-samyang-sec1.jpg) 0 0 no-repeat; background-size:100%}
.section-samyang .set1 .desc {padding-top:27px; color:#fff}
.section-samyang .set1 .head .date {padding-top: 19px;}
.section-samyang .set1 .head .date + .img {padding-top:24px}
.section-samyang .set1 .img img {width:83%}
.section-samyang .set2 {padding-bottom:54px; background:#0a1015 }
.section-samyang .set2 .img + .img {padding-top:30px}
.section-samyang .set2 .img:first-child img {width:93%}
.section-samyang .set3 {padding:40px 30px; background: #fff}
.section-samyang .set3 .head {padding-bottom:42px}
.section-samyang .set4 {padding-top:63px; padding-bottom:108px; background:#042b4f url(../images/bg-samyang-sec2.jpg) 0 0 no-repeat; background-size:100% auto}
.section-samyang .set4 .img:first-child img {width:42%}
.section-samyang .set4 .img:first-child {padding-bottom:15px;}

/* 르노삼성페이스북 */
.section-renault .set1 {margin-bottom:-69px; background:#00031e }
.section-renault .set1 .head .date {padding-top:15.5px}
.section-renault .set1 .head .date + .img {padding-top:21.5px}
.section-renault .set1 .img img {width:83%}
.section-renault .set2 {padding-top:110px;  margin-bottom:-146px; background:#4469b0 url(../images/bg-renault-sec1.jpg) 0 0 no-repeat; background-size:100% auto}
.section-renault .set2 .desc {padding-bottom:51px; color:#fff}
.section-renault .set3 {padding:148px 0 153px; background:#e9ebee}

/* 도로교통공단 */
.section-koroad .set1 {margin-bottom:-75px; background:#1546a9 url(../images/bg-koroad-sec1.jpg) 0 0 no-repeat; background-size:cover}
.section-koroad .set1 .head .date {padding-top:19px}
.section-koroad .set1 .head .date + .img {padding-top:16.5px}
.section-koroad .set1 .img img {width:88%}
.section-koroad .set2 {padding:101px 0 48.5px; background:#1546a9 url(../images/bg-koroad-sec2.jpg) 0 0; background-size:100% auto}
.section-koroad .set2 .desc {padding-bottom:34px}
.section-koroad .set2 .img + .img {padding-top:11.5px}
.section-koroad .set3 {padding:96.5px 0 116.5px; background:#050c19 url(../images/bg-koroad-sec3.jpg) 0 0 no-repeat; background-size:cover}
.section-koroad .set3 .img img {width:89.5%}

/* 웹케시 */
.section-webcash .set1 {padding-bottom:102.5px; background:#004c88 url(../images/bg-webcash-sec1.jpg) 0 0 no-repeat; background-size:cover}
.section-webcash .set1 .head .date {padding-top: 19px;}
.section-webcash .set1 .head + .img {padding-top:24px}
.section-webcash .set1 .img img {width:88%}
.section-webcash .set1 .desc {margin-top:-7px; color:#fff}
.section-webcash .set2 {padding-bottom:48px; background:#004c88 url(../images/bg-webcash-sec2.jpg) 0 100% no-repeat; background-size:100% auto}
.section-webcash .set2 .img img {width:99%}
.section-webcash .set3 {padding:68px 0 127px; background:#ffc523 url(../images/bg-webcash-sec3.jpg) 0 0 no-repeat; background-size:100% auto}
.section-webcash .set3 .img:first-child img {width:42%}
.section-webcash .set3 .img:last-child img {width:98%}
.section-webcash .set3 .img + .img {padding-top:8px}

/* 드롱기 */
.section-delonghi .set1 {padding-bottom: 20px; background:#14345a url(../images/bg-delonghi-sec1.png) 0 0 no-repeat; background-size:cover}
.section-delonghi .set1 .head .date {padding-top:19px}
.section-delonghi .set1 .head .date + .img {padding-top:16.5px}
.section-delonghi .set1 .img img {width:88%}
.section-delonghi .set2 {padding:60px 0 48.5px; background:#d8dfe6}
.section-delonghi .set2 .desc {padding-bottom:34px}
.section-delonghi .set2 .img + .img {padding-top:11.5px}
.section-delonghi .set3 {padding:68px 0 127px; background:#15345b url(../images/bg-delonghi-sec3.png) 0 0 no-repeat; background-size:100% auto}
.section-delonghi .set3 .img:first-child img {width:42%}
.section-delonghi .set3 .img:last-child img {width:98%}
.section-delonghi .set3 .img + .img {padding-top:8px}

/* 드래곤시티 */
.section-sdc .set1 {padding-bottom: 20px; background:#23222c url(../images/bg-sdc-sec1.png) 0 0 no-repeat; background-size:cover}
.section-sdc .set1 .head .date {padding-top:19px}
.section-sdc .set1 .head .date + .img {padding-top:16.5px}
.section-sdc .set1 .img img {width:88%}
.section-sdc .set2 {padding:40px 0 48.5px; background:#d8dfe6}
.section-sdc .set2 .desc {padding-bottom:34px}
.section-sdc .set2 .img + .img {padding-top:11.5px}
.section-sdc .set3 {padding:68px 0 127px; background:#d4a385 url(../images/bg-sdc-sec3.png) 0 0 no-repeat; background-size:100% auto}
.section-sdc .set3 .img:first-child img {width:42%}
.section-sdc .set3 .img:last-child img {width:98%}
.section-sdc .set3 .img + .img {padding-top:8px}

/* xeen 20191105 */
.section-xeen .set1 {margin-bottom:-75px; background:#23222c url(../images/bg-xeen-sec1.jpg) 0 0 no-repeat; background-size:cover}
.section-xeen .set1 .head + .img {padding-top:24px}
.section-xeen .set1 .head .date {padding-top:19px}
.section-xeen .set1 .head .date + .img {padding-top:16.5px}
.section-xeen .set1 .img img {width:88%}
.section-xeen .set2 {padding:101px 0 48.5px; background:#d8dfe6}
.section-xeen .set2 .desc {padding-bottom:34px}
.section-xeen .set2 .img + .img {padding-top:11.5px}
.section-xeen .set3 {padding:68px 0 127px; background:#25272f url(../images/bg-xeen-sec3.jpg) 0 0 no-repeat; background-size:100% auto}
.section-xeen .set3 .img:first-child img {width:42%}
.section-xeen .set3 .img:last-child img {width:98%}
.section-xeen .set3 .img + .img {padding-top:8px}

/* 국기원 20191105 */
.section-kukkiwon .set1 {margin-bottom:-30px; background:#23222c url(../images/bg-kukkiwon-sec1.jpg) 0 0 no-repeat; background-size:cover}
.section-kukkiwon .set1 .head + .img {padding-top:24px}
.section-kukkiwon .set1 .head .date {padding-top:19px}
.section-kukkiwon .set1 .head .date + .img {padding-top:16.5px}
.section-kukkiwon .set1 .img img {width:88%}
.section-kukkiwon .set1 .desc {margin-top:-7px; color:#000}
.section-kukkiwon .set2 {padding:25px 0 48.5px; background:#f4f5f9 url(../images/bg-kukkiwon-sec2.jpg) 0 100% no-repeat; background-size:100% auto}
.section-kukkiwon .set2 .desc {padding-bottom:25px}
.section-kukkiwon .set2 .img + .img {padding-top:11.5px}

/* 페이레터 20191105 */
.section-payletter .set1 {margin-bottom:-75px; background:#23222c url(../images/bg-payletter-sec1.jpg) 0 0 no-repeat; background-size:cover}
.section-payletter .set1 .head + .img {padding-top:24px}
.section-payletter .set1 .head .date {padding-top:19px}
.section-payletter .set1 .head .date + .img {padding-top:16.5px}
.section-payletter .set1 .img img {width:88%}
.section-payletter .set1 .desc {color:#fff;}
.section-payletter .bg-wrap {
                        background: #22283e;  /* fallback for old browsers */
                        background: -webkit-linear-gradient(to bottom, #22283e, #452279);  /* Chrome 10-25, Safari 5.1-6 */
                        background: linear-gradient(to bottom, #22283e, #452279); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
                           }
.section-payletter .set2 {padding:80px 0 48.5px !important;}
.section-payletter .set2 .desc {padding-bottom:34px}
.section-payletter .set2 .img + .img {padding-top:11.5px}
.section-payletter .set3 {padding:20px 0 127px;}
.section-payletter .set3 .img:first-child img {width:42%}
.section-payletter .set3 .img:last-child img {width:98%}
.section-payletter .set3 .img + .img {padding-top:8px}

/* 하이트진로 20191105 */
.section-hite .set1 {margin-bottom: -25px; background:#2c2c2c url(../images/bg-hite-sec1.jpg) 0 0 no-repeat; background-size:cover}
.section-hite .set1 .head + .img {padding-top:24px}
.section-hite .set1 .head .date {padding-top:19px}
.section-hite .set1 .head .date + .img {padding-top:16.5px}
.section-hite .set1 .img img {width:88%}
.section-hite .set1 .desc {color:#fff;}
.section-hite .set2 {padding:80px 0 48.5px; background:#2c2c2c}
.section-hite .set2 .desc {padding-bottom:34px}
.section-hite .set2 .img + .img {padding-top:11.5px}
.section-hite .set3 {padding:80px 0 127px; background:#31c8b7 url(../images/bg-hite-sec3.jpg) 0 0 no-repeat; background-size:100% auto}
.section-hite .set3 .img:first-child img {width:42%}
.section-hite .set3 .img:last-child img {width:98%}
.section-hite .set3 .img + .img {padding-top:8px}

/* 아이러너 20200701 */
.section-irunner .set1 {margin-bottom: -75px; padding-bottom:28px; background:#191919 url(../images/bg-irunner-sec1.jpg) 0 -20px no-repeat; background-size:100%}
.section-irunner .set1 .desc {color:#fff}
.section-irunner .set1 .head .date {padding-top: 19px;}
.section-irunner .set1 .head .date + .img {padding-top:24px}
.section-irunner .set1 .img img {width:90%}
.section-irunner .set2 {padding:100px 0 54px; background:#191919 }
.section-irunner .set2 .img + .img {padding-top:30px}
.section-irunner .set2 .img:first-child img {width:93%}
.section-irunner .set4 {padding-top:63px; padding-bottom:108px; background:#006abd url(../images/bg-irunner-sec2.jpg) 0 0 no-repeat; background-size:100% auto}
.section-irunner .set4 .img:first-child img {width:36.5%}
.section-irunner .set4 .img:first-child {padding-bottom:15px;}

/* 고치다 20200701 */
.section-gochida .set1 {padding-bottom: 20px; background:#f1f1f1 url(../images/bg-gochida-sec1.jpg) 0 0 no-repeat; background-size:cover}
.section-gochida .set1 .head + .img {padding-top:24px}
.section-gochida .set1 .head .date {padding-top:19px}
.section-gochida .set1 .head .date + .img {padding-top:16.5px}
.section-gochida .set1 .img img {width:95%}
.section-gochida .set2 {padding:60px 0 48.5px; background:#d8dfe6}
.section-gochida .set2 .desc {padding-bottom:34px}
.section-gochida .set2 .img + .img {padding-top:11.5px}
.section-gochida .set3 {padding:68px 0 127px; background:#2e3540 url(../images/bg-gochida-sec3.jpg) 0 0 no-repeat; background-size:100% auto}
.section-gochida .set3 .img:first-child img {width:42%}
.section-gochida .set3 .img:last-child img {width:98%}
.section-gochida .set3 .img + .img {padding-top:8px}

/* 하나금융융합기술원 20210510 */
.section-hanaIOT .set1 {background:#f1f1f1 url(../images/bg-hanaIOT-sec1.jpg) 0 0 no-repeat; background-size:cover}
.section-hanaIOT .set1 .head + .img {padding-top:24px}
.section-hanaIOT .set1 .head .date {padding-top:19px}
.section-hanaIOT .set1 .head .date + .img {padding-top:16.5px}
.section-hanaIOT .set1 .img img {width:88%}
.section-hanaIOT .set2 {padding:101px 0 48.5px; background:#f1f1f1}
.section-hanaIOT .set2 .desc {padding-bottom:34px}
.section-hanaIOT .set2 .img + .img {padding-top:11.5px}
.section-hanaIOT .set3 {padding:68px 0 127px; background:#f3f2f6 url(../images/bg-hanaIOT-sec3.jpg) 0 0 no-repeat; background-size:100% auto}
.section-hanaIOT .set3 .img:first-child img {width:42%}
.section-hanaIOT .set3 .img:last-child img {width:98%}
.section-hanaIOT .set3 .img + .img {padding-top:8px}

/* 하나금융 TI 20210510 */
.section-hanaTI .set1 {padding-bottom: 10px; background:#ffffff}
.section-hanaTI .set1 .head h2, .section-hanaTI .set1 .head .tag {color:#000000}
.section-hanaTI .set1 .head .date {color:#999999; padding-top:19px}
.section-hanaTI .set1 .head + .img {padding-top:24px}
.section-hanaTI .set1 .head .date + .img {padding-top:16.5px}
.section-hanaTI .set1 .img img {width:88%}
.section-hanaTI .set2 {padding:60px 0 48.5px; background:#d8d8e7}
.section-hanaTI .set2 .desc {padding-bottom:34px}
.section-hanaTI .set2 .img + .img {padding-top:11.5px}
.section-hanaTI .set3 {padding:68px 0 0; background:#f3f2f6 url(../images/bg-hanaTI-sec3.jpg) 0 0 no-repeat; background-size:100% auto}
.section-hanaTI .set3 .img:first-child img {width:42%}
.section-hanaTI .set3 .img:last-child img {width:98%}
.section-hanaTI .set3 .img + .img {padding-top:8px}

/* 크래비스 20210510 */
.section-crevis .set1 {background:#f3f2f6 url(../images/bg-crevis-sec1.jpg) 0 0 no-repeat; background-size:cover}
.section-crevis .set1 .head + .img {padding-top:24px}
.section-crevis .set1 .head .date {padding-top:19px}
.section-crevis .set1 .head .date + .img {padding-top:16.5px}
.section-crevis .set2 {padding:80px 0 48.5px; background:#f3f2f6}
.section-crevis .set2 .desc {padding-bottom:34px}
.section-crevis .set2 .img + .img {padding-top:11.5px}
.section-crevis .set3 {padding:68px 0 90px; background:#f3f2f6 url(../images/bg-crevis-sec3.jpg) 0 0 no-repeat; background-size:100% auto}
.section-crevis .set3 .img:first-child img {width:42%}
.section-crevis .set3 .img:last-child img {width:98%}
.section-crevis .set3 .img + .img {padding-top:8px}

/* 하나자산신탁 */
.section-hanaTRU .set1 {margin-bottom:-25px; background:#f1f1f1 url(../images/img-hanaTRU-bg.jpg) 0 0 no-repeat; background-size:cover}
.section-hanaTRU .set1 .head + .img {padding-top:24px}
.section-hanaTRU .set1 .head .date {padding-top:19px}
.section-hanaTRU .set1 .img img {width:88%}
.section-hanaTRU .set2 {padding:80px 0 48.5px; background:#f1f1f1}
.section-hanaTRU .set2 .img img {width: 95%;}
.section-hanaTRU .set3 {padding:68px 0 90px; background:#f3f2f6 url(../images/img-hanaTRU-bg2.jpg) 0 0 no-repeat; background-size:100% auto}
.section-hanaTRU .set3 .img:first-child img {width:42%}
.section-hanaTRU .set3 .img:last-child img {width:98%}
.section-hanaTRU .set3 .img + .img {padding-top:8px}

/* buzzle */
.section-buzzle {background: #ddd;}
.section-buzzle .set1 {background:#f1f1f1 url(../images/img-buzzle-bg.jpg) 0 0 no-repeat; background-size:cover}
.section-buzzle .set1 .img {padding-top:19px}
.section-buzzle .set1 .head .date {padding-top:19px}
.section-buzzle .set1 .img img {width:70%}
.section-buzzle .set2 {background: #fff; padding: 50px 0;}
.section-buzzle .set3 {background: #f9f9f9; padding: 50px 0;}
.section-buzzle .set4 {background: linear-gradient(135deg, #9437c6, #7d5ec9); padding: 50px 0;}

/* 삼성카드 */
.section-samsung {background: #445fe9;}
.section-samsung .set1 {position: relative; height: 520px; background: linear-gradient(0, #39c3f5, #445fe9)}
.section-samsung .set1 .head .date {padding-top: 19px;}
.section-samsung .set1 .img {position: absolute; left: 50%; transform: translate(-50%, 0); z-index: 9;}
.section-samsung .set1::before {content:''; position:absolute; right:0; top:220px; width:120px; height:164px; background: url(../images/img-samsung-card.png) 0 0 no-repeat; background-size: cover;}
.section-samsung .set1::after {content:''; position:absolute; left:0; top:360px; width:121px; height:152px; background: url(../images/img-samsung-illust.png) 0 0 no-repeat; background-size: cover;}
.section-samsung .set2 {background: linear-gradient(0, #39bccf,#827cf5, #39c3f5); padding-top: 30px;}
.section-samsung .set3 {padding: 70px 0; background: linear-gradient(0, #445fe9, #39bccf)}
.section-samsung .set3 .wrap {padding: 0 15px;}
.section-samsung .set3 .wrap .sort {padding-bottom: 50px}
.section-samsung .set3 .wrap .head h3.line {padding-bottom: 20px; font-family:"Lato"; font-weight: 400; color: #fff; letter-spacing:0; text-align: left;}
.section-samsung .set3 .wrap .head h3.line:after {display:none}

/* 드롱기오피스클럽 */
.section-delonghiOffice {background: #eeeeee;}
.section-delonghiOffice .set1 {background:#eeeeee url(../images/img-delonghiOffice-bg.jpg) 0 0 no-repeat; background-size:cover}
.section-delonghiOffice .set1 .head + .img {padding-top:24px}
.section-delonghiOffice .set1 .head .date {padding-top:19px}
.section-delonghiOffice .set1 .head .date + .img {padding-top:16.5px}
.section-delonghiOffice .set1 .img img {width:88%}
.section-delonghiOffice .set2 {padding: 80px 10px;}
.section-delonghiOffice .set3 {position: relative; padding-top: 50px; height: 290px; background:#eeeeee url(../images/img-delonghiOffice-bg2.jpg) 0 0 no-repeat; background-size:cover; }
.section-delonghiOffice .set3 .img {position: absolute; left: 50%; transform: translate(-50%,0);}
.section-delonghiOffice .set4 {padding: 100px 0; background: url(../images/img-delonghiOffice-bg3.jpg) 0 0 no-repeat; background-size: cover;}

/* 2022하이트 */
.section-hitegroup {background: #ddd;}
.section-hitegroup .set1 {padding-bottom: 20px; background: url(../images/img-hitegroup-bg.jpg) 0 0 no-repeat; background-size: cover;}
.section-hitegroup .set1 .head + .img {padding: 24px 5px 0;}
.section-hitegroup .set1 .head .date {padding-top:19px}
.section-hitegroup .set1 .head .date + .img {padding-top:16.5px}
.section-hitegroup .set2 {padding: 70px 0; background: url(../images/img-hitegroup-bg2.jpg) 0 0 no-repeat; background-size: cover;}
.section-hitegroup .set3 {padding: 70px 0; background: url(../images/img-hitegroup-bg3.jpg) 0 0 no-repeat; background-size: cover;}
.section-hitegroup .set3 .wrap {padding: 0 20px;}
.section-hitegroup .set3 .wrap .sort {padding-bottom: 50px}
.section-hitegroup .set3 .wrap .head h3.line {padding-bottom: 20px; font-family:"Lato"; font-weight: 400; color: #fff; letter-spacing:0; text-align: left;}
.section-hitegroup .set3 .wrap .head h3.line:after {display:none}

/* PASS */
.section-pass {background-color: #ddd;}
.section-pass .set1 {padding-bottom: 15px; background: linear-gradient(135deg, #01a4cf, #ab97c5, #db3ebf)}
.section-pass .set1 .head + .img {padding-top:24px}
.section-pass .set1 .head .date {padding-top:19px}
.section-pass .set1 .head .date + .img {padding-top:16.5px}
.section-pass .set1 .img img {width:80%}
.section-pass .set2 {padding: 70px 15px; background: url(../images/img-pass-bg.jpg) 0 0 no-repeat; background-size: cover;}
.section-pass .set3 {background: #363845;}
.section-pass .set3 .wrap {padding: 70px 10px;}
.section-pass .set3 .wrap .sort {padding-bottom: 50px}
.section-pass .set3 .wrap .sort:nth-child(1) {padding-bottom: 25px;}
.section-pass .set3 .wrap .head h3.line {padding-bottom: 25px; padding-left: 6px; font-family:"Lato"; font-weight: 400; color: #fff; letter-spacing:0; text-align: left;}
.section-pass .set3 .wrap .head h3.line:after {display:none}

/* bep */
.section-bep {position: relative; background: #e7f3f8;}
.section-bep .set1 {padding-bottom: 40px; background: url(../images/img-bep-bg.jpg) 0 0 no-repeat; background-size: cover;}
.section-bep .set1 .head + .img {padding-top:24px}
.section-bep .set1 .head .date {padding-top:19px}
.section-bep .set1 .head .date + .img {padding-top:16.5px}
.section-bep .set1 .img img {width:88%}
.section-bep .set1 .head h2,
.section-bep .set1 .head .tag,
.section-bep .set1 .head .date {color: #003253}
.section-bep .set2 {position: relative; height: 1220px;}
.section-bep .set2 .img {position: absolute; top: -50px;}
.section-bep .set3 {position: relative; padding-top: 75px; height: 295px; background:#eeeeee url(../images/img-bep-bg2.jpg) 0 0 no-repeat; background-size:cover; }
.section-bep .set3 .img {position: absolute; left: 50%; transform: translate(-50%,0);}
.section-bep .set4 {background: #eef1ee; padding: 140px 0 100px;}

/* 지헬스 */
.section-ghealth {position: relative; background: #f1f1f1;}
.section-ghealth::after {content: ""; position: absolute; top: 60px; left: 0; width: 100%; height: 450px; background: url(../images/img-ghealth-leaf.png)0 0 no-repeat; background-size: 100% auto}
.section-ghealth .set1 {background: linear-gradient(180deg, #ddf371, transparent); position: relative; height: 450px;}
.section-ghealth .set1 .head h2,.section-ghealth .set1 .head .tag {color: #000}
.section-ghealth .set1 .head .date {padding-top:19px; color:#000}
.section-ghealth .set1 .img {width: 100%; position: absolute; left: 50%; transform: translate(-50%,0); margin-left: 10px; padding-top:24px; z-index: 9;}
.section-ghealth .set2 {padding: 30px 0 80px;}
.section-ghealth .set2 .img {padding: 0 10px;}
.section-ghealth .set3 {position: relative; height: 450px; padding: 80px 0 0; background: #2f2fb0;}
.section-ghealth .set3 .img {position: absolute; left: 50%; transform: translate(-50%,0);}
.section-ghealth .set3::before {content: ""; position: absolute; top: -50px; right: 0; width: 220px; height: 390px; background: url(../images/img-ghealth-heart.png)0 0 no-repeat; background-size: contain;}
.section-ghealth .set4 {background: #2f2fb0; padding-bottom: 100px;}

/* 하이픈 */
.section-hyphen .set1 {padding-bottom: 50px; background: #1a0841 url(../images/img-hyphen-bg.png) 0 0 no-repeat; background-size: 100% auto;}
.section-hyphen .set1 .head .date {padding-top: 19px;}
.section-hyphen .set1 .head .date + .img {padding-top: 24px}
.section-hyphen .set1 .img ~ .img img {width: 95%;}
.section-hyphen .set3 {background: #e8e9eb;}
.section-hyphen .set3 .wrap {padding: 80px 10px;}
.section-hyphen .set3 .wrap h3.double {padding-bottom:25px; border-bottom:1px solid #000; font-family:"Lato"; font-weight:500; font-size:22px; text-align:left}
.section-hyphen .set3 .wrap h3.double > span {display:block; padding-bottom:7px; font-weight:600; font-size:14px; letter-spacing:0.02em}
.section-hyphen .set3 .wrap .sort:nth-of-type(1) {padding:35px 0}
.section-hyphen .set3 .wrap .sort .head {float:left; margin-bottom: 15px;}
.section-hyphen .set3 .wrap .sort .head h4.name {font-weight:400; font-size: 18px;}
.section-hyphen .set3 .wrap .sort .img {text-align:right}
.section-hyphen .set4 {background: #2a2953; padding: 70px 0 100px;}
.section-hyphen .set4 .img:first-child img {width:50%}
.section-hyphen .set4 .img:last-child img {width:96%}

/* 드롱기커피라운지 */
.section-delonghiCoffee .set1 {padding-bottom: 50px; background: url(../images/img-delonghiCoffee-bg.jpg) 0 0 no-repeat; background-size: 100% auto;}
.section-delonghiCoffee .set1 .head .date {padding-top: 19px;}
.section-delonghiCoffee .set1 .head .date + .img {padding-top: 24px}
.section-delonghiCoffee .set1 .img:nth-of-type(1) img {width: 87%;}
.section-delonghiCoffee .set1 .img ~ .img img {margin-top: 50px}
.section-delonghiCoffee .set3 {position: relative; height: 290px; padding-top: 60px; background: url(../images/img-delonghiCoffee-bg2.jpg) 0 0 no-repeat; background-size: cover;}
.section-delonghiCoffee .set3 .img {position: absolute; left: 50%; transform: translate(-50%, 0);}
.section-delonghiCoffee .set4 {padding: 120px 0px; background: url(../images/img-delonghiCoffee-bg3.jpg) 0 0 no-repeat; background-size: cover;} 

/* 임신출산 앱 */
.section-pregnancyapp .set1 {background: url(../images/img-pregnancyapp-bg.jpg) 0 0 no-repeat; background-size: cover;}
.section-pregnancyapp .set1 .head h2,.section-pregnancyapp .set1 .head .tag {color: #000}
.section-pregnancyapp .set1 .head .date {padding-top:19px; color:#000}
.section-pregnancyapp .set1 .head + .img {padding-top: 24px}
.section-pregnancyapp .set2 {padding-bottom: 50px; background: url(../images/img-pregnancyapp-bg2.jpg) 0 0 no-repeat; background-size: cover;}
.section-pregnancyapp .set3 {background: #e4e9f8; padding: 60px 0;}
.section-pregnancyapp .set3 .wrap {padding: 0 20px;}
.section-pregnancyapp .set3 .wrap .sort {padding-bottom: 40px;}
.section-pregnancyapp .set3 .sort:nth-of-type(1) img {width: 50%;}
.section-pregnancyapp .set3 .wrap .sort .img {text-align: left;}
.section-pregnancyapp .set3 .wrap .head h3.line {font-family:"Lato"; font-weight: 600; color: #000; letter-spacing:0; text-align: left; padding-bottom: 30px}
.section-pregnancyapp .set3 .wrap .head h3.line:after {display:none}

/* 뉴트리불렛 */
.section-ntb {background: #96d1b6;}
.section-ntb .set1 {background: url(../images/img-ntb-bg.jpg) 0 0 no-repeat; background-size: cover;}
.section-ntb .set1 .head .date {padding-top: 19px;}
.section-ntb .set1 .head .date + .img {padding-top: 24px;}
.section-ntb .set3 {padding: 0 13px 70px;}
.section-ntb .set4 {background: #0075a7; padding: 70px 7px 100px;}
.section-ntb .set4 .img:nth-of-type(1) img {width: 42%; padding-bottom: 20px;}

/* 레즈메드 */
.section-resmed {background: #ddd;}
.section-resmed .set1 {background: url(../images/img-resmed-bg.jpg) 0 0 no-repeat; background-size: 100% auto;}
.section-resmed .set1 .head .date {padding-top: 19px;}
.section-resmed .set1 .head .date + .img {padding-top: 24px;}
.section-resmed .set1 .head .img img {width: 86%;}
.section-resmed .set2 {background: #1e1e1e; padding: 50px 0 50px 8px;}
.section-resmed .set3 {background: #f5f5f5 url(../images/img-resmed-bg2.jpg) 0 0 no-repeat; background-size: 100% auto; padding-top: 60px;}
.section-resmed .set3 .img img {width: 52%;}
.section-resmed .set4 {background: url(../images/img-resmed-bg3.jpg) 0 0 no-repeat; background-size: cover; padding-bottom: 100px;}

/* 아스텔엔컨 */
.section-astell {background: #ddd;}
.section-astell .set1 {background:#1d1d1d url(../images/img-astell-bg.jpg) 0 0 no-repeat; background-size: 100% auto}
.section-astell .set1 .head .date {padding-top: 19px;}
.section-astell .set1 .head .date + .img {padding-top: 24px;}
.section-astell .set2 {padding: 10px 0 50px; background: url(../images/img-astell-bg2.jpg) 0 0 no-repeat; background-size: 100% auto}
.section-astell .set3 {padding-top: 60px; background:#000 url(../images/img-astell-bg3.jpg) 0 0 no-repeat; background-size: 100% auto;}
.section-astell .set3 .img img {width: 52%;}
.section-astell .set4 {padding-bottom: 110px; background: url(../images/img-astell-bg4.jpg) 0 0 no-repeat; background-size: cover;}

/* 타운카 */
.section-towncar .set1 {position: relative; padding-bottom: 150px; background:#f2f0f5 url(../images/img-towncar-bg.jpg) 0 0 no-repeat; background-size: 100% auto;}
.section-towncar .set1::after {content: ""; position: absolute; bottom: 0; left: 50%; transform: translate(-50%,0); width: 350px; height: 129px; background: url(../images/img-towncar-people.png) 0 0 no-repeat; background-size: contain;}
.section-towncar .set1 .head .date {padding-top: 19px;}
.section-towncar .set1 .head .date + .img {padding-top: 24px;}
.section-towncar .set1 .head .date + .img img {width: 46%;}
.section-towncar .set1 .img ~ .img {padding-top: 30px;}
.section-towncar .set2 {position: relative; background: url(../images/img-towncar-bg2.jpg) 0 0 no-repeat; background-size: cover; padding: 80px 0 350px;}
.section-towncar .set2::after {content: ""; position: absolute; bottom: 100px; right: 0; width: 380px; height: 215px; background: url(../images/img-towncar-bmw.png) 0 0 no-repeat; background-size: contain;}
.section-towncar .set2 .img:first-child img {width:50%}
.section-towncar .set2 .img:last-child img {width:96%}

/* CU */
.section-cu {background: #eeeeee;}
.section-cu .set1 {height: 410px; background:#eeeeee url(../images/img-cu-bg.jpg) 0 0 no-repeat; background-size: 100% auto;}
.section-cu .set1 .head .date {padding-top: 19px;}
.section-cu .set2 {padding: 50px 0 50px 6px;}
.section-cu .set3 {padding: 50px 7px 100px; background:#eeeeee url(../images/img-cu-bg2.jpg) 0 0 no-repeat; background-size: cover;}
.section-cu .set3 .img:first-child img {width:50%}

/* 깨끗한나라 */
.section-kleannara {background: #f5f5f5;}
.section-kleannara .set1 {background: url(../images/img-kleannara-bg.jpg) 0 0 no-repeat; background-size: 100% auto;}
.section-kleannara .set1 .head .date {padding-top: 19px;}
.section-kleannara .set1 .head .date + .img {padding-top: 24px;}
.section-kleannara .set1 .head .date + .img img {width: 87%;}
.section-kleannara .set3 {padding: 50px 0 70px 7px;}
.section-kleannara .set4 {padding: 70px 7px 210px; background: url(../images/img-kleannara-bg2.jpg) 0 0 no-repeat; background-size: 100% auto;}
.section-kleannara .set4 .img:nth-of-type(1) img {width: 42%;}

/************** 2024.12.17 ****************/
/* MDI */
/* .section-mdi {background: url(../images/img-mdi-bg.jpg) 0 60px no-repeat; background-size: cover; padding-bottom: 100px;} */

/* ZEM */
.section-zem {background: #e0eeff url(../images/img-zem-bg.jpg) 0 60px no-repeat; background-size: 100% auto;}
.section-zem .set1 .head h2,.section-zem .set1 .head p.tag,.section-zem .set1 .head span.date {color: #000;}
.section-zem .set1 .img {padding: 20px 0 100px;}
.section-zem .set2 {background: #eff2f4;}
.section-zem .set2 .wrap {padding: 70px 10px 20px;}
.section-zem .set2 .wrap .sort {padding-bottom: 50px}
.section-zem .set2 .wrap .head h3.line {padding-bottom: 25px; padding-left: 6px; font-family:"Lato"; font-weight: bold; color: #000; letter-spacing:0; text-align: left;}
.section-zem .set2 .wrap .head h3.line:after {display:none}
/************** 2024.12.18 ****************/


/* main */
.section-main .sec:not(.sec1) {height:300px}
.section-main .sec {position:relative; padding:48px 15px 0}
.section-main .sec h3 {padding-bottom:8px; font-weight:700; font-size:20px}
.section-main .sec .name {display:block; font-size:12px}
.section-main .sec .name > strong {font-weight:800}
.section-main .sec .more {display:block; position:relative; margin-top:44px; padding-bottom:2px; font-weight:700; font-size:12px; color:#000;z-index: 99}
.section-main .sec .more.second {margin-top:15px;}
.section-main .sec .more:after {content:""; position:absolute; left:8px; bottom:0; width:62px; height:1px; background:#000}
.section-main .sec .awards {position:absolute; right:20px; bottom:20px; z-index:1; padding:15px 36px 4px 0; font-size:7px; letter-spacing:-0.025em; text-align:right;}
.section-main .sec .fin18 {background:url(../images/logo-18fin.png) right bottom no-repeat; background-size:30px auto}
.section-main .sec .win18 {background:url(../images/logo-18win.png) right bottom no-repeat; background-size:30px auto}
.section-main .sec .win19 {background:url(../images/logo-19win.png) right bottom no-repeat; background-size:30px auto}
.section-main .sec .fin19 {background:url(../images/logo-19fin.png) right bottom no-repeat; background-size:30px auto}
.section-main .sec .fin20 {background:url(../images/logo-20fin.png) right bottom no-repeat; background-size:30px auto}
.section-main .sec .awards strong {display:block; padding-top:5px; font-weight:700}
.section-main .sec.black {color:#fff}
.section-main .sec.black .more {color:#fff}
.section-main .sec.black .more:after {background:#fff}
.section-main .sec.black .win {color:#fff}
.section-main .sec1 {position:relative; padding-top:50px; padding-bottom:100px;font-family:'Nanum Sqare'; background:#ffffff url(../images/bg-main-sec1_text.jpg) 105% 90% no-repeat;background-size:587px;}
.section-main .sec1 h2 {position:relative;display:inline;color:#000;font-weight:400; font-size:14px;padding-right:54px;}
.section-main .sec1 h2:after{content:'';position:absolute;width:40px;height:1px;background:#000; right:0;top:50%;}
.section-main .sec1 .desc p {line-height:40px; font-weight:800; font-size:26px;color:#000;padding-bottom:30px; letter-spacing:-0.1em;}
.section-main .sec2 {background:url(../images/bg-main-sec2.jpg) 50% 50% no-repeat; background-size:cover}
.section-main .sec2:after {content:""; position:absolute; right:19%; top:50%; width:118px; height:112px; margin-top:-56px; background:url(../images/img-main-sec2.png) no-repeat; background-size:118px auto}
.section-main .sec3 {background:url(../images/bg-main-sec3.jpg) 50% 50% no-repeat; background-size:cover}
.section-main .sec3:after {content:""; position:absolute; right:6%; top:0; width:232px; height:323px; margin-top:-15px; background:url(../images/img-main-sec3.png) no-repeat; background-size:232px auto}
.section-main .sec4 {background:url(../images/bg-main-sec4.jpg) 50% 50% no-repeat; background-size:cover}
.section-main .sec4:after {content:""; position:absolute; right:50%; top:50%; width:201px; height:90px; margin:-35px -100px 0 0; background:url(../images/img-main-sec4.png) no-repeat; background-size:201px auto}
.section-main .sec5 {background:url(../images/bg-main-sec5.jpg) 50% 50% no-repeat; background-size:cover}
.section-main .sec5:after {content:""; position:absolute; right:17%; top:-7px; width:138px; height:266px; background:url(../images/img-main-sec5.png) no-repeat; background-size:138px auto}
.section-main .sec6 {background:url(../images/bg-main-sec6.jpg) 50% 50% no-repeat; background-size:cover}
.section-main .sec7 {background:url(../images/bg-main-sec7.jpg) 50% 50% no-repeat; background-size:cover}
.section-main .sec8 {background:url(../images/bg-main-sec8.jpg) 50% 50% no-repeat; background-size:cover}
.section-main .sec9 {background:url(../images/bg-main-sec9.jpg) 50% 0 no-repeat; background-size:cover}
.section-main .sec10 {background:url(../images/bg-main-sec10.jpg) 0 50% no-repeat; background-size:cover}
.section-main .sec11 {background:url(../images/bg-main-sec11.jpg) 50% 0 no-repeat; background-size:cover}
.section-main .sec12 {background:url(../images/bg-main-sec12.jpg) 50% 50% no-repeat; background-size:cover}
.section-main .sec12:after {content:""; position:absolute; right:0; bottom:0; width:375px; height:337px; background:url(../images/img-main-sec12.png) no-repeat; background-size:375px auto}
.section-main .sec13 {background:url(../images/bg-main-sec13.jpg) 50% 0 no-repeat; background-size:cover}
.section-main .sec14 {background:url(../images/bg-main-sec14.jpg) 50% 0 no-repeat; background-size:cover}
.section-main .sec15 {background:url(../images/bg-main-sec15.jpg) 50% 0 no-repeat; background-size:cover}
.section-main .sec16 {background:url(../images/bg-main-sec16.jpg) 50% 0 no-repeat; background-size:cover}
.section-main .sec17 {background:#121212;}
.section-main .sec17:after {content:""; position:absolute; right:0; bottom:0; width:223px; height:226px; background:url(../images/img-main-sec17.png) no-repeat; background-size:223px auto}
.section-main .sec17 .time {position: absolute; right: 10px;bottom:100px; text-align: right;}
.section-main .sec17 .time span {font-size:10px;letter-spacing:2px;}
.section-main .sec17 .time p {font-size:56px;font-weight:900;padding-top:10px;}
.section-main .sec18 {background:url(../images/bg-main-sec18.jpg) 50% 50% no-repeat; background-size:cover}
.section-main .sec18:after {content:""; position:absolute; right:30px; bottom:0; width:170px; height:226px; background:url(../images/img-main-sec18.png) no-repeat; background-size:170px auto}
.section-main .sec22 {background:url(../images/bg-main-sec22.jpg) 50% 0 no-repeat; background-size:cover}
.section-main .sec24 {background:url(../images/bg-main-sec24.jpg) 50% 0 no-repeat; background-size:cover}
.section-main .sec25 {background:url(../images/bg-main-sec25.jpg) 50% 0 no-repeat; background-size:cover}

@media screen and (max-width:320px){
    .section-main .sec1 h2 {font-size:41px}
}
@media screen and (max-width:1024px){
    body, html {min-width:inherit}
}
/* body, html {min-width:inherit} */


/* ********************** */
#wrapper #banner {width: 100%; height: calc(100vh - 60px); position: relative; top: 60px; left: 0; z-index: 99}
#wrapper #banner #banner-video {width: 100%; height: 100%; object-fit: cover; position: absolute;}
#wrapper #banner #banner-lottie {width: 100%; padding: 0 20px; position: sticky; top: 50%; left: 0; transform: translate(0, -50%)}
#wrapper #banner #banner-lottie2 {width: 100%; padding: 0 20px; position: sticky; top: 50%; left: 0; transform: translate(0, -50%)}

/* about */
.about-wrap {background: #FFE1E1; margin-top: 60px;}
.about-wrap video {width: 100%; height: 100%; object-fit: cover; position: fixed; top: 0; left: 0;}
/* .about {background: url(../images/visual_2_image.jpg) 50% 50% / cover fixed no-repeat; margin-top: 60px;} */
.about .about-txt {position: sticky; top: 20%; left: 0; text-align: center; padding: 100px 20px; color: #100636}
.about .about-txt h1 {display: block; font-weight: 900; font-size: 3.125rem; margin-bottom: 40px}
.about .about-txt span {display: block; font-size: 1.125rem; line-height: 1.7}
.about .about-txt .about-btn { padding-top: 35px; }
.about .about-txt .about-btn a { display: block; padding: 21px; background: #100636; color: #fff; box-sizing: border-box; }

#wrapper #imagine-lottie {width: 290px; position: absolute; top: 80px; left: 0; z-index: 99}

.container-wrap {background-color: #FFE1E1; padding-top: 150px; position: relative}
#container {transition: background-color 1s ease; padding-top: 60px;}
.section-main {padding: 60px 20px 0}
.section-main .con {/* width:335px; */padding-bottom: 60px; transition: 0.5s; z-index: 111}
.section-main .con .wrap {position: relative}
.section-main .con .wrap .img-wrap {overflow: hidden; height: 200px}
.section-main .con .wrap .img-wrap .movies {width: 100%; height: 100%; object-fit: cover}
.section-main .con .wrap .img-wrap .movies.hyphen-vid {height: 290px;}
.section-main .con .con1-2-img{background: url(../images/abyssrium_bg.jpg) center center no-repeat; background-size:cover; height: 200px}
.section-main .con .con1-2-af {position:absolute; right: 5px; bottom: 280px; width: 210px; height: 223px; background:url(../images/abyssrium_gif.gif) 0 0 no-repeat; background-size:cover; animation: updown 1.3s linear infinite}
.section-main .con .con2-img {background: url(../images/con2.jpg) center center no-repeat; background-size:cover; height: 200px}
.section-main .con .con3-af {position:absolute; right: 35px; bottom: 150px; width: 245px; height: 213px; background:url(../images/con3-af.png) 0 0 no-repeat; background-size:cover; animation: updown 1.3s linear infinite}
@keyframes updown {
    0%,100%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(10px);
    }
}
.section-main .con .con4-img {background: url(../images/con4.jpg) 0 0 no-repeat; background-size:cover; height: 200px}
.section-main .con .con10-img {background: url(../images/con10.jpg) 0 0 no-repeat; background-size:cover; height: 200px}
.section-main .con .con11-img {background: #000; height: 200px}
.section-main .con .con11-af {position:absolute; right: 32px; top:18px; width: 276px; height: 198px; background:url(../images/con11.png) 0 0 no-repeat; background-size: cover}
.section-main .con .con11-img .time {height: 200px; display: flex; flex-direction: column; justify-content: center; align-items: center}
.section-main .con .con11-img .time span {font-size: 0.906rem; letter-spacing: 2px; color: #fff}
.section-main .con .con11-img .time p {font-size: 4.375rem; font-weight: 600; color: #fff}
.section-main .con .con12-img {background: url(../images/con12.jpg) 0 0 no-repeat; background-size:cover; height: 200px}
.section-main .con .con12-af {position: absolute; right: 30px; bottom: 175px; width: 134px; height: 256px; background:url(../images/con12-af.png) no-repeat; background-size: cover}
.section-main .con .con13-img {background: url(../images/con13.jpg) -1px 0 no-repeat; background-size:cover; height: 200px}
.section-main .con .con15-img {background: url(../images/con15.jpg) 0 0 no-repeat; background-size:cover; height: 200px}
.section-main .con .con17-img {background: url(../images/con17.jpg) 0 0 no-repeat; background-size:cover; height: 200px}
.section-main .con .con18-img {background: url(../images/con18.jpg) -1px 0 no-repeat; background-size:cover; height: 200px}
.section-main .con .con18-af {position:absolute; right: 62px; bottom: 145px; width: 190px; height: 227px; background:url(../images/con18-af.png) no-repeat; background-size: cover}
.section-main .con .con19-img {background: url(../images/con19.jpg) 0 0 no-repeat; background-size:cover; height: 200px}
.section-main .con .con19-af {position:absolute; right: 25px; top:54px; width: 283px; height: 162px; background:url(../images/con19-af.png) no-repeat; background-size: contain}
.section-main .con .con20-img {background: url(../images/con20.jpg) 0 0 no-repeat; background-size:cover; height: 200px}
.section-main .con .con21-img {background: url(../images/con21.jpg) center center no-repeat; background-size:cover; height: 200px}
.section-main .con .con21-af {position:absolute; right: 94px; bottom: 204px; width: 155px; height: 169px; background:url(../images/con21-af.png) no-repeat; background-size: contain}
.section-main .con .con22-img {background: url(../images/con22.jpg) center center no-repeat; background-size:cover; height: 200px}
.section-main .con .con24-img {background: url(../images/con24.jpg) center center no-repeat; background-size:cover; height: 200px}
.section-main .con .con26-img {background: url(../images/con26.jpg) -1px center no-repeat; background-size:cover; height: 200px}
.section-main .con .con26-af {position:absolute; right:70px; bottom: 138px; width: 210px; height: 259px; background:url(../images/con26-af.png) no-repeat; background-size: contain}
.section-main .con .con27-img {background: url(../images/con27.jpg) center center no-repeat; background-size:cover; height: 200px}
.section-main .con .con28-img {background: url(../images/con28.jpg) center center no-repeat; background-size:cover; height: 200px}
.section-main .con .con29-img  {background: url(../images/con29.jpg) center center no-repeat; background-size:cover; height: 200px}
.section-main .con .con30-img {background: url(../images/con30.jpg) -1px center no-repeat; background-size:cover; height: 200px}
.section-main .con .con30-af {position:absolute; right: 20px; bottom: 167px; width: 220px; height: 228px; background:url(../images/con30-af.png) no-repeat; background-size: contain}
.section-main .con .con31-img {background: url(../images/con31.jpg) -1px center no-repeat; background-size:cover; height: 200px}
.section-main .con .con32-img {background: url(../images/con32.jpg) center center no-repeat; background-size:cover; height: 200px; transition: 0.5s}

.section-main .con-txt {display: flex; flex-direction: column; margin-top: 20px; transition: 0.3s}
.section-main .con-txt h2 {/* position: relative; */ display: inline-block; font-weight: 400; font-size: 1.5rem; padding: 20px 0; line-height: 1.33}
.section-main .con-txt .bar {position: relative; font-size: 0.875rem}
.section-main .con-txt .bar:after {content: ''; position: absolute; top: 50%; width: 60px; height: 2px; background: #ed3b82}
.section-main .con-txt .w-bar::after {left: 40px}
.section-main .con-txt .m-bar::after {left: 56px}
.section-main .con-txt .wm-bar::after {left: 101px}
.section-main .con-txt p {color: rgba(0, 0, 0, 0.8); transition: 0.3s; line-height: 1.75}

.clients{width: 100%; height: calc(100vh - 60px); object-fit: cover; position: relative; font-size: 0}
.clients .clients-video {width: 100%; height: 100%; object-fit: cover}
.clients #clients-lottie {width: 300px; position: absolute; top: 50px; left: -30px}
.clients ul {width: 300px; position: absolute; top: 210px; left: 50%; transform: translate(-50%,0); display: flex; flex-wrap: wrap}
.clients ul li { float: left; width: 50%; text-align: center}
.clients ul li span {width: 150px; height: 65px; display: block; line-height: 1; font-size: 1px; color: transparent; text-indent: -9999em; transition: 0.3s}
.clients ul li.kle span {background: url(../images/logo-1-on.png) no-repeat; background-size: cover}
.clients ul li.hite span {background: url(../images/logo-2-on.png) no-repeat; background-size: cover}
.clients ul li.lg span {background: url(../images/logo-3-on.png) no-repeat; background-size: cover}
.clients ul li.pass span {background: url(../images/logo-4-on.png) no-repeat; background-size: cover}
.clients ul li.dro span {background: url(../images/logo-5-on.png) no-repeat; background-size: cover}
.clients ul li.sy span {background: url(../images/logo-6-on.png) no-repeat; background-size: cover}
.clients ul li.sk span {background: url(../images/logo-7-on.png) no-repeat; background-size: cover}
.clients ul li.hana span {background: url(../images/logo-8-on.png) no-repeat; background-size: cover}
.clients ul li.ir span {background: url(../images/logo-9-on.png) no-repeat; background-size: cover}
.clients ul li.cre span {background: url(../images/logo-10-on.png) no-repeat; background-size: cover}
.clients ul li.cu span {background: url(../images/logo-11-on.png) no-repeat; background-size: cover}
.clients ul li.amo span {background: url(../images/logo-12-on.png) no-repeat; background-size: cover}

.contact {position: relative; bottom: 0; left: 0; font-size: 0; width: 100%; height: calc(100vh - 60px)}
.contact .contact-video {width: 100%; height: calc(100vh - 60px); object-fit: cover; position: absolute; bottom: 0; left: 0}
.contact .contact-txt {width: 100%; height: calc(100vh - 60px); position: absolute; bottom: 0; left: 0}
.contact .contact-txt #contact-lottie {width: 300px; position: absolute; top: 70px; left: -30px}
.contact .contact-txt .c-r {color: #fff; position: absolute; top: 190px; left: 80px}
.contact .contact-txt .c-r .c-r-t {display: flex; flex-direction: column}
.contact .contact-txt .c-r .c-r-t p {font-size: 1.25rem; margin-bottom: 20px}
.contact .contact-txt .c-r .c-r-t span {font-weight: 100; line-height: 1.5; font-size: 1rem; -webkit-text-fill-color: #fff}
.contact .contact-txt .c-r .c-r-t .c-r-t-r {margin-top: 30px}
.contact .contact-txt .c-r .c-r-b {margin-top: 50px}
.contact .contact-txt .c-r .c-r-b p {font-size: 0.875rem; line-height: 1.5; font-weight: 100}
.contact .contact-txt .c-r .c-r-b p.email {font-size: 1.25rem; font-weight: 400; margin-top: 20px;}
.contact .contact-txt .c-r .c-r-b span {font-weight: 100; line-height: 1.5; font-size: 1rem; color: #fff}
.contact .contact-txt .c-r .c-r-b .logo-box {width: 60px; height: 24px; margin-bottom: 20px; background: url(../images/logo-wh.png) no-repeat; background-size: cover}
@media screen and (max-width:400px) {
    .contact .contact-txt #contact-lottie {top: 55px}
    .contact .contact-txt .c-r {top: 145px}
}

#footerPglink {background-color: rgb(202, 234, 247); position: relative; z-index: 9}