@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: 900px) {
    .ani, .ani-on .ani {position: static; opacity: 1 !important; transition: 0s !important;}
}

/*FullPage Box Model*/
.check .multipleContentsDiv > div {height: auto !important;}

.check #_contentBuilder .multipleDiv,
.check #_contentBuilder .fp-tableCell {height: auto !important;}

/* State */
.wrap-state {overflow: hidden; position: relative; height: 100%; background: #002b7a;}
.wrap-state .container {display: table; width: 100%; table-layout: fixed;}
.wrap-state .con {position: relative; display: table-cell; width: 50%; padding-left: 60px; vertical-align: top;}
.wrap-state .con .title {padding-top: 170px;}
.check .wrap-state .con .title {padding-top: 70px;}
.wrap-state .con .title strong {position: relative; display: inline-block;}
.wrap-state .con .title strong::after {content: ''; position: absolute; left: 105%; top: 50%; width: 250px; height: 1px; background: rgba(255,255,255, .5);}
.wrap-state .con .title strong::before {content: ''; position: absolute; left: 105%; top: 48%; width: 50px; height: 3px; background: rgba(255,255,255, 1);}
.wrap-state .con .desc {padding-top: 27px; padding-bottom: 84px;}
.check .wrap-state .con .desc {padding-bottom: 59px;}
.wrap-state .con .desc li {float: left; width: 33.333%; padding: 28px 0; text-align: center;}
.wrap-state .con .ico {margin-bottom: 20px;}
.wrap-state .con .round {display: table; width: 130px; height: 130px; margin: 0 auto; background: #001e55; border-radius: 100%; vertical-align: middle; table-layout: fixed;}
.wrap-state .con .round span {display: table-cell; vertical-align: middle;}
.wrap-state .con .round img {display: inline-block;}
.wrap-state .con .title strong {font-family: 'Arita Medium'; color: #fff;}
.wrap-state .con .title span {padding-right: 2px;}
.wrap-state .con .title br {display: none;}
.wrap-state .con .title .size1 {font-size: 32px;}
.wrap-state .con .title .size2 {font-size: 24px;}
.wrap-state .con .title .size3 {font-family: 'Arita SemiBold'; font-size: 49px;}
.wrap-state .con .subject strong {font-family: 'Arita Medium'; font-size: 24px; line-height: 1; color: #fff;}
.wrap-state .con .subject strong i {line-height: 1.4;}
.wrap-state .con .subject strong em {font-size: 16px;}
.wrap-state .con .subject strong span {font-size: 14px;}
.wrap-state .con .txt p {font-family: 'Arita Medium'; font-size: 18px; color: #96afdc;}
.wrap-state .con .txt p br {opacity: 0;}
.wrap-state .con .control {position: absolute; left: 0; bottom: 40px; width: 100%; font-size: 0; text-align: center;}
.wrap-state .con .paging {display: inline-block; vertical-align: middle; font-size: 0;}
.wrap-state .con .paging button {display: inline-block; width: 8px; height: 8px; background: #83b7ff; border-radius: 100px; vertical-align: middle; text-indent: -99999px;}
.wrap-state .con .paging li {display: inline-block; margin-right: 5px; margin-left: 5px; vertical-align: middle;}
.wrap-state .con .paging .slick-active button {width: 35px; background: #0056cc;}
.wrap-state .img {display: table-cell; vertical-align: middle;}
.wrap-state .img .deco {position: absolute; left: 0; bottom: 0; z-index: 2;}
.wrap-state .img::after {content: ''; position: absolute; left: 0; top: 0; z-index: 1; width: 50%; height: 100%; background: url('../../images/main/bg-main2.jpg') no-repeat right center; background-size: cover;}

.wrap-state .slider .ani {bottom: -100px}
.ani-on .wrap-state .slider .ani {bottom: 0;}
.ani-on .wrap-state .slider .ani1 {transition-delay: 0s;}
.ani-on .wrap-state .slider .ani2 {transition-delay: .2s;}
.ani-on .wrap-state .slider .ani3 {transition-delay: .4s;}
.ani-on .wrap-state .slider .ani4 {transition-delay: .6s;}
.ani-on .wrap-state .slider .ani5 {transition-delay: .8s;}
.ani-on .wrap-state .slider .ani6 {transition-delay: 1s;}

@media all and (max-width: 1800px) {
    .wrap-state .con {width: 65%;}
    .wrap-state .img::after {width: 36%;}
}

@media all and (max-width: 1420px) {
    .wrap-state .con .title .size1 {font-size: 26px;}
    .wrap-state .con .title .size2 {font-size: 20px;}
    .wrap-state .con .title .size3 {font-size: 36px;}
    .wrap-state .con .title strong {padding-left: 30px; line-height: 1.2;}
    .wrap-state .con .title strong::after {width: 120px;}
    .wrap-state .con .title strong::before {top: 49%;}
    .wrap-state .con .subject strong span {display: block; margin-top: -8px;}
}

@media all and (max-width: 950px) {
    .wrap-state .img .deco img {width: 300px;}
}

@media all and (max-width: 900px) {
    .wrap-state .container {padding-right: 0;}
    .wrap-state .con {width: 50%; padding-left: 0;}
    .wrap-state .con .ico {margin-bottom: 12px;}
    .wrap-state .con .round {width: 92px; height: 92px;}
    .wrap-state .con .round img {height: 45px}
    .wrap-state .con .title {padding-top: 136px;}
    .wrap-state .con .title br {display: block;}
    .check .wrap-state .con .desc {padding-top: 17px; padding-bottom: 119px;}
    .wrap-state .con .desc li {padding: 20px 0;}
    .wrap-state .con .subject strong {font-size: 22px;}
    .wrap-state .con .subject strong i {padding-right: 0;}
    .wrap-state .con .subject strong em {padding-right: 0;}
    .wrap-state .con .subject strong span {margin-bottom: 5px;}
    .wrap-state .con .txt p {margin-top: -2px; font-size: 16px; line-height: 1.2;}
    .wrap-state .con .control {display: block; bottom: 68px;}
    .wrap-state .img::after {width: 50%; background-size: cover; background-position: center center;}
    .wrap-state .img .deco img {width: 265px;}
}

@media all and (max-width: 840px) {
    .wrap-state .con {width: 75%;}
    .wrap-state .img::after {width: 26%;}
    .wrap-state .img .deco img {width: 150px;}
}

@media all and (max-width: 600px) {
    .wrap-state .con {width: 100%;}
    .wrap-state .img::after {width: 0%;}
    .wrap-state .img .deco img {width: 0;}
}

@media all and (max-width: 500px) {
    .wrap-state .container {height: auto; padding-right: 20px;}
    .wrap-state .container,
    .wrap-state .con,
    .wrap-state .img {display: block; width: 100%;}
    .wrap-state .con {padding-top: 270px;}
    .check .wrap-state .con .title {padding-top: 48px;}
    .wrap-state .con .title br {display: none;}
    .wrap-state .con .title span {padding-right: 0;}
    .wrap-state .con .title .size1 {font-size: 22px;}
    .wrap-state .con .title .size2 {font-size: 17px;}
    .wrap-state .con .title .size3 {font-size: 30px;}
    .wrap-state .con .title strong {padding-left: 0; letter-spacing: -0.8px;}
    .wrap-state .con .title strong::after {width: 85px;}
    .check .wrap-state .con .desc {padding-top: 24px; padding-bottom: 70px;}
    .wrap-state .con .subject strong {font-size: 18px;}
    .wrap-state .con .txt {margin-top: -1px;}
    .wrap-state .con .txt p {font-size: 14px;}
    .wrap-state .con .control {bottom: 42px;}
    .wrap-state .img::after {width: 100%; height: 270px;}
    .wrap-state .img .deco {left: auto; right: 0; top: 95px;}
    .wrap-state .img .deco img {width: 170px;}
}

@media all and (min-width: 2000px) {
  .wrap-state {max-width: 1920px; margin: 0 auto;}
}

/* Community */
#multipleDiv_suhyup_41 {background: url('../../images/main/bg-main4.jpg') no-repeat center top; background-size: cover;}
#multipleDiv_suhyup_41 .title {padding-top: 230px; font-family: 'Arita Bold'; font-size: 60px; text-align: center; line-height: 1; color: #fff;}
.check #multipleDiv_suhyup_41 .title {padding-top: 65px;}
#multipleDiv_suhyup_41 .box-commu {display: table; width: 100%; max-width: 1800px; margin: 0 auto; padding-top: 55px; padding-bottom: 60px; table-layout: fixed;}
#multipleDiv_suhyup_41 .box-commu > div {display: table-cell; vertical-align: top;}
#multipleDiv_suhyup_41 .box-commu > div:nth-child(1) {position: relative; width: 53.3%}

@media all and (max-width: 1800px) {
    #multipleDiv_suhyup_41 > div {padding: 0 20px;}
}

@media all and (max-width: 1200px) {
    #multipleDiv_suhyup_41 .box-commu > div:nth-child(1) {width: 36.3%;}
}

@media all and (max-width: 900px) {
    #multipleDiv_suhyup_41 {height: auto; background-size: cover;}
    #multipleDiv_suhyup_41 .box-commu {padding-top: 33px; padding-bottom: 71px;}
    #multipleDiv_suhyup_41 .box-commu,
    #multipleDiv_suhyup_41 .box-commu > div:nth-child(1) {display: block; width: 100%;}
    #multipleDiv_suhyup_41 .box-commu > div:nth-child(2) {display: block; width: 100%; padding-left: 0;}
    .check #multipleDiv_suhyup_41 .title {padding-top: 69px; font-size: 38px;}
}

@media all and (max-width: 500px) {
    #multipleDiv_suhyup_41 .box-commu {padding-top: 39px; padding-bottom: 50px;}
    .check #multipleDiv_suhyup_41 .title {padding-top: 48px; font-size: 32px;}
}

/* Full Page Nav */
.wrap-pager {position: fixed; right: 0px; top: 50%; font-size: 0; text-align: right; transform: translate(0, -50%);}
.wrap-pager .btn-pager {display: inline-block; width: 15px; height: 6px; margin-bottom: 20px; background: rgba(255,255,255,.3); text-indent: -999999px; transition: 1s;}
.wrap-pager .btn-pager:hover,
.wrap-pager .btn-pager.on {width: 30px; background: rgba(255,255,255,1);}
.wrap-pager.color .btn-pager {background: rgba(0,0,0,.3);}
.wrap-pager.color .btn-pager.on {background: rgba(0,0,0,1);}

@media all and (max-width: 1400px) {
    .wrap-pager {display: none;}
}

@media all and (max-height: 850px) {
    .wrap-pager {display: none;}
}

@media all and (min-height: 1200px) {
    .wrap-pager {display: none;}
}

/* Full Page Acc */
.next-move {position: relative;}
.next-move button {display:block; position: absolute; left: -99999px; bottom: 0; z-index: 200; width:100%; padding: 25px 0; background:rgba(0,105,181,.7); border: 0 none; text-align: center; color:#fff;}
.next-move button:focus,
.next-move button:hover,
.next-move button:active {left: 0; font-size: 15px; font-weight:bold; line-height:1.5;}

/* Top Banner */
.top-banner {display: none; background: url('../../images/main/bg-60th.jpg') no-repeat center top; background-size: cover; text-align: center;}
.top-banner.is {display: block;}

@media all and (max-width: 500px) {
    .top-banner,
    .top-banner.is {display: none;}
}