@charset "utf-8";

.ani {position: relative; opacity: 0; transition: 0s;}
.ani-on .ani {opacity: 1; transition: 1s;}
.edit .ani {position: static; opacity: 1;}

@media all and (max-width: 1800px) {
    .ani, .ani-on .ani {position: static; opacity: 1 !important; transition: 0s !important;}
}

.main #_contentBuilder {overflow: hidden;}

/* contents */
.wrap-banner li {border-bottom: 1px solid #bfbfbf;}
.wrap-banner li.ani {right: -100px;}
.ani-on .wrap-banner li.ani {right: 0;}
.ani-on .wrap-banner li.ani1 {transition-delay: 0s;}
.ani-on .wrap-banner li.ani2 {transition-delay: 0.2s;}
.ani-on .wrap-banner li.ani3 {transition-delay: 0.4s;}
.ani-on .wrap-banner li.ani4 {transition-delay: 0.6s;}
.wrap-banner a::after {content:""; display: table; clear: both;}
.wrap-banner a {display: block; width: 100%; height: 100%; padding: 29px 60px;}
.wrap-banner a .desc {float: left;}
.wrap-banner a .desc strong {position: relative; display: inline-block; padding-top: 15px; font-family: 'Dream Medium'; font-size: 22px; color: #383838;}
.wrap-banner a .desc strong::before {content:""; position: absolute; left: 0; top: 0; display: block; width: 100%; height: 3px; background-color: #385eeb;}
.wrap-banner a .desc strong::after {content:""; position: absolute; left: 0; bottom: 0; display: block; width: 0; height: 1px; background-color: #383838; transition: all 1s;}
.wrap-banner a:hover .desc strong::after {width: 100%;}
.wrap-banner a .desc p {font-size: 16px; line-height: 20px; color: #919191; letter-spacing: -0.075em; margin-top: 2px; min-height: 40px;}
.wrap-banner a .icon {position: relative; top: 0; float: right; transition: all 1s;}
.wrap-banner a:hover .icon {top: -10px;}

@media all and (max-width: 1800px) {
    .wrap-banner a {padding: 29px 20px;}
}

@media all and (max-width: 900px) {
    .wrap-banner a {padding: 29px 41px;}
    .wrap-banner a .desc strong::before {width: 45px;}
}

@media all and (max-width: 780px) {
    .wrap-banner a .icon {display: none;}
}

@media all and (max-width: 700px) {
    .wrap-banner a {padding: 30px;}
    .wrap-banner a .icon {display: block;}
}

@media all and (max-width: 500px) {
    .wrap-banner ul {overflow: hidden;}
    .wrap-banner li {float: left; width: 50%;}
    .wrap-banner li:nth-child(odd) {border-right: 1px solid #bfbfbf;}
    .wrap-banner a {padding: 29px 20px; padding-right: 30px;}
    .wrap-banner a .desc p {display: none;}
    .wrap-banner a .desc strong {font-size: 20px;}
}

.wrap-link {padding: 20px 30px 12px; background-color: #f7f7f7;}
.wrap-link ul::after {content:""; display: table; clear: both;}
.wrap-link li {float: left; width: 50%; margin-top: 10px;}
.wrap-link li.ani {right: -100px;}
.ani-on .wrap-link li.ani {right: 0;}
.ani-on .wrap-link li.ani1 {transition-delay: 0.8s;}
.ani-on .wrap-link li.ani2 {transition-delay: 1.0s;}
.ani-on .wrap-link li.ani3 {transition-delay: 1.2s;}
.ani-on .wrap-link li.ani4 {transition-delay: 1.4s;}
.wrap-link li a {width: 100%; height: 100%; display: block;}
.wrap-link li .icon {width: 120px; margin: 0 auto;}
.wrap-link li .title strong {display: block; text-align: center; font-family: 'Dream Regular'; font-size: 16px; line-height: 18px; color: #383838; margin-top: 10px;}
.wrap-link li .title strong span {position: relative; box-shadow: inset 0 -0px 0 #383838; transition: all 1s;}
.wrap-link li a:hover .title strong span {box-shadow: inset 0 -1px 0 #383838;}

@media all and (max-width: 1680px) {
    .wrap-link li {margin-top: 30px;}
    .wrap-link li .icon {width: 100px;}
}

@media all and (max-width: 500px) {
    .wrap-link li .icon {width: 120px;}
}