/*============= scss 분리 완료 - css 파일에만 작업 해주세요 !!  =============*/

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

.visual { position: relative; z-index: -1; /*padding: 0rem 0 7rem;*/ color: #fff; position: relative; }
.visual .container { position: relative; z-index: 2; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.visual .visual-txt { text-align: center; }
.visual .visual-txt .major-txt { display: block; text-transform: uppercase; margin-bottom: 1rem; font-family: "Roboto", sans-serif; font-size: 3rem; font-weight: 700; letter-spacing: -2px; }
.visual .visual-txt .sub-txt { font-family: "Nanum Square"; font-size: 1.1rem; }
.visual .bg { background: no-repeat 50% 50%/cover; width: 100%; height: 100%; /*-webkit-transform: scale(1.1); transform: scale(1.1); -webkit-transition: all 5s; transition: all 5s; */ position: absolute; left: 0; top: 0; }
.visual .list01 .bg { background-image: url("/webroot2/images/korean/main/visual_01.jpg"); }
.visual .list02 .bg { background-image: url("/webroot2/images/korean/main/visual_02.jpg"); }
.visual .list03 .bg { background-image: url("/webroot2/images/korean/main/visual_03.jpg"); }
.visual .list04 .bg { background-image: url("/webroot2/images/korean/main/visual_04.jpg"); }
.visual .slide-list > li { height: 30rem; }
/*.visual .slide-list > li.active .bg { -webkit-transform: scale(1); transform: scale(1); }*/

/* -----------------
content
-------------------- */
#content { position: relative; }
#content::before { content: ""; display: table; }

.section-title { font-size: 2rem; text-transform: uppercase; color: #333; text-align: center; font-family: "Roboto", sans-serif;  font-weight: 800; }

/* announce */
.announce { position: absolute; bottom: 90%; padding: 0 3rem; width: 100%; -webkit-transition: all .3s ease; transition: all .3s ease; }
.announce .bg { background: #7063b3; background: -webkit-gradient(linear, right top, left top, from(#7063b3), to(#005ead)); background: linear-gradient(to left, #7063b3, #005ead); color: #fff; padding: 1.5rem 0 4rem; -webkit-transition: all .3s ease; transition: all .3s ease; }
.announce .tab { position: relative; height: 15rem; width: 100%; z-index: 1; }
.announce .tab .tab-nav-wrap { display: inline-block; margin-bottom: 1rem; }
.announce .tab .tab-nav-wrap .tab-nav { display: block; text-align: center; font-size: 1.2rem; color: #0eb4cb; position: relative; padding-left: 2.5rem; margin-bottom: 1rem; font-family: "Nanum Square"; }
.announce .tab .tab-nav-wrap .tab-nav::after, .announce .tab .tab-nav-wrap .tab-nav::before { content: ''; width: 5rem; height: 3.5rem; display: block; position: absolute; left: .75rem; top: -1rem; border: 5px solid #0eb4cb; -webkit-transition: all .2s; transition: all .2s; }
.announce .tab .tab-nav-wrap .tab-nav::after { border-right: 0; }
.announce .tab .tab-nav-wrap .tab-nav::before { -o-border-image: linear-gradient(to bottom, #0eb4cb 20%, transparent 20%, transparent 80%, #0eb4cb 80%) 0 1 0 0; border-image: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #0eb4cb), color-stop(20%, transparent), color-stop(80%, transparent), color-stop(80%, #0eb4cb)) 0 1 0 0; border-image: linear-gradient(to bottom, #0eb4cb 20%, transparent 20%, transparent 80%, #0eb4cb 80%) 0 1 0 0; }
.announce .tab .tab-nav-wrap.active .tab-nav { font-size: 1.5rem; color: #fff; }
.announce .tab .tab-nav-wrap.active .tab-nav::after, .announce .tab .tab-nav-wrap.active .tab-nav::before { width: 8rem; height: 6.5rem; top: -3rem; border-color: #fff; }
.announce .tab .tab-nav-wrap.active .tab-nav::before { -o-border-image: linear-gradient(to bottom, #fff 40%, transparent 40%, transparent 90%, #fff 90%) 0 1 0 0; border-image: -webkit-gradient(linear, left top, left bottom, color-stop(40%, #fff), color-stop(40%, transparent), color-stop(90%, transparent), color-stop(90%, #fff)) 0 1 0 0; border-image: linear-gradient(to bottom, #fff 40%, transparent 40%, transparent 90%, #fff 90%) 0 1 0 0; }
.announce .tab-con { float: left; width: 100%; max-height: 0; opacity: 0; visibility: hidden; }
.announce .tab-con li { min-height: 11rem; }
.announce .tab-con li > a { display: block; padding: 1rem .5rem; -webkit-transition: all .25s; transition: all .25s; }
.announce .tab-con li > a:hover { background-color: #33363a; }
.announce .tab-con li .num { display: none; }
.announce .tab-con li .xi-new { color: #f8a561; vertical-align: middle; margin-left: 10px; }
.announce .tab-con li .title { display: block; font-size: 1rem; font-weight: 400; font-family: "Nanum Square"; }
.announce .tab-con li .txt { display: block; font-size: .75rem; font-family: "Nanum Square"; margin-top: 1rem; opacity: .5; height: 1.8rem; overflow: hidden; }
.announce .tab-con li .date { display: block; font-size: .7rem; margin-top: 1rem; opacity: .7; }
.announce #rnd-1st .current { background-color: #33363a; padding: 2rem 3.5rem; position: relative; margin-bottom: 2.5rem; }
.announce #rnd-1st .current span { display: block; margin-bottom: 1rem; }
.announce #rnd-1st .current span > b { background-color: #dd0373; border-radius: .75rem; padding: 0 .5rem .2rem; }
.announce #rnd-1st .current .title { display: block; font-size: 1.5rem; margin-bottom: 1rem; }
.announce #rnd-1st .current .deco-txt { position: absolute; right: 3rem; top: 1.5rem; }
.announce #rnd-1st .current .deco-txt .txt { margin: 1rem 0 0 1.5rem; }
.announce #rnd-1st .current .btn-group a { display: inline-block; padding: 1rem; }
.announce #rnd-1st .current .btn-group a:first-child { background-color: #cc086d; }
.announce #rnd-1st .current .btn-group a:last-child { background: #096fc6; background: -webkit-gradient(linear, right top, left top, from(#096fc6), to(#695fa7)); background: linear-gradient(to left, #096fc6, #695fa7); margin-left: .5rem; }
.announce #rnd-1st .list .list-item .title { display: block; margin-bottom: 1.8rem; min-height: 2.8rem; }
.announce #rnd-1st .list .list-item .sns::after { content: ""; display: block; clear: both; }
.announce #rnd-1st .list .list-item .sns .img { display: inline-block; margin-right: .5rem; margin-bottom: 1rem; }
.announce #rnd-1st .list .list-item .sns .btn-group { float: right; }
.announce #rnd-1st .list .list-item .sns .btn-group a { display: inline-block; margin-left: .5rem; }
.announce #rnd-1st .list .list-item .sns .btn-group a i { opacity: .4; display: inline-block; vertical-align: middle; }
.announce #rnd-1st .list .list-item .sns .btn-group a span { font-size: .7rem; font-family: "Roboto", sans-serif; font-weight: 600; color: #cc086d; margin-left: .3rem; }
.announce #rnd-1st .rnd1st-btn { display: block; padding: 1rem 4rem; border-radius: 2rem; border: 1px solid #fff; margin: 2.5rem auto; width: 20rem; font-size: 1.25rem; font-family: "Nanum Square"; -webkit-transition: all .2s; transition: all .2s; }
.announce #rnd-1st .rnd1st-btn:hover { background-color: #004178; }
.announce .tab-nav-wrap.active + .tab-con { opacity: 1; visibility: visible; max-height: 100rem; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
.announce .bx-wrapper { position: relative; }
.announce .bx-controls { position: absolute; top: 50%; width: 100%; }
.announce .bx-controls .bx-controls-direction > a { position: absolute; font-size: 0; display: block; width: 3rem; height: 3rem; border: 1px solid #fff; border-radius: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); text-align: center; opacity: .5; -webkit-transition: all .2s; transition: all .2s; }
.announce .bx-controls .bx-controls-direction > a::before { display: block; font-family: "xeicon"; font-size: 1.4rem; line-height: 2; -webkit-transition: all .2s; transition: all .2s; }
.announce .bx-controls .bx-controls-direction > a:hover { background-color: rgba(255, 255, 255, 0.2); }
.announce .bx-controls .bx-prev { left: -6rem; }
.announce .bx-controls .bx-prev::before { content: "\e906"; }
.announce .bx-controls .bx-prev:hover::before { -webkit-transform: translateX(-10%); transform: translateX(-10%); }
.announce .bx-controls .bx-next { right: -6rem; }
.announce .bx-controls .bx-next::before { content: "\e907"; }
.announce .bx-controls .bx-next:hover::before { -webkit-transform: translateX(10%); transform: translateX(10%); }
.announce .more-btn { position: absolute; right: 0; top: 0; display: none; background-color: #fff; border-radius: 1rem; color: #5c5ca5; font-family: "Roboto", sans-serif; font-size: .9rem; font-weight: 700; text-transform: uppercase; }
.announce .more-btn a { display: block; padding: .5rem 1rem .5rem .5rem; }
.announce .more-btn a::before { content: "\e915"; font-family: "xeicon"; background-color: #0eb4cb; border-radius: 50%; color: #fff; padding: .2rem; margin-right: .5em; }
.announce .more-btn.close a { padding: .5rem .5rem .5rem 1rem; }
.announce .more-btn.close a::before { display: none; }
.announce .more-btn.close a::after { content: "\e905"; font-family: "xeicon"; background-color: #0eb4cb; border-radius: 50%; color: #fff; padding: .2rem; margin-left: .5em; }
.announce .more-btn.active { display: block; }
.announce .all-list-btn a { display: block; width: 10rem; margin: 0 auto; border: 1px solid #318bbf; border-radius: 1.2rem; text-align: center; padding: .5rem 0 .7rem; }
.announce .all-list-btn a:hover { background: #318bbf; -webkit-transition: all .2s; transition: all .2s; }
.announce .all-list-btn a .xi-plus { display: inline-block; vertical-align: middle; color: #fff; border-radius: 50%; background: #0eb4cb; margin-right: .5rem; padding: .1rem; }
.announce .all-list-btn a span { display: inline-block; vertical-align: middle; }

/* card */
.card { margin-top: 4rem; }
.card .card-item { display: block; color: #fff; text-align: center; height: 12.5rem; overflow: hidden; position: relative; }
.card .card-item .title { display: block; font-size: 1.7rem; margin-bottom: 1rem; position: absolute; top: 5rem; width: 100%; text-align: center; z-index: 1; }
.card .card-item .txt { font-size: .7rem; position: absolute; top: 7rem; width: 100%; text-align: center; z-index: 1; }
.card .card-item .bg { height: 100%; background: url("/webroot2/images/korean/main/card1_bg.jpg") 50% 0/cover no-repeat; -webkit-transition: all .2s ease; transition: all .2s ease; }
.card .card-item:hover .bg { -webkit-transform: scale(1.1); transform: scale(1.1); }
.card .card2 .bg { background-image: url("/webroot2/images/korean/main/card2_bg.jpg"); }

/* news */
.news { padding: 3rem 0 .5rem; }
.news .tab { position: relative; height: 30rem; width: 100%; text-align: right; }
.news .tab > li { display: inline-block; margin-left: .7rem; }
.news .tab > li > a { text-align: center; color: #767676; font-size: 1rem; font-family: "Nanum Square"; }
.news .tab > li.active a { color: #333; font-weight: 600; }
.news .tab-con { position: absolute; left: 0; top: 2.5rem; width: 100%; opacity: 0; visibility: hidden; border-top: 2px solid #343434; text-align: left; }
.news .tab-con li { overflow: hidden; padding: .8rem 1.0rem; border-bottom: 1px solid #dedede; position: relative; }
.news .tab-con li .xi-new { color: #005EAE; vertical-align: middle; margin-left: .5rem; }
.news .tab-con li .date { text-align: center; }
.news .tab-con li .date .day { display: block; font-size: 2.1rem; font-family: "Roboto", sans-serif; font-weight: 800; color: #333; line-height:1;}
.news .tab-con li .txt { padding-top: .5rem; }
.news .tab-con li .title { display: block; font-weight: 700; font-size: 1.1rem; color: #343434; margin-bottom: .5rem; font-family: "Nanum Square"; }
.news .tab-con li .con { font-weight: 200; font-size: .7rem; color: #656565; }
.news .tab-con li .xi-angle-right-thin { position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 1.5rem; }
.news li.active .tab-con { opacity: 1; visibility: visible; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }

/* tipa-story */
.story { display: none; padding: 3rem 0 0; background-color: #efeff0; }
.story .txt-area { position: absolute; left: 0; top: 2rem; z-index: 1; }
.story .txt-area .category { display: block; font-size: 1.5rem; color: #005ead; position: relative; font-family: "Nanum Square"; }
.story .txt-area .category::before { content: ''; display: inline-block; vertical-align: middle; width: 14rem; height: 3px; background-color: #005ead; margin-right: 1rem; }
.story .txt-area .title { display: block; font-size: 2rem; color: #333; margin-top: 2.5rem; font-family: "Nanum Square"; }
.story .txt-area small { display: block; font-size: 1rem; color: #999; margin-top: 1rem; font-family: "Nanum Square"; }
.story .img { float: right; position: relative; }
.story .img::after { content: ''; display: block; width: 50%; height: 100%; position: absolute; left: 0; top: 0; background-color: rgba(255, 255, 255, 0.9); }
.story .bx-wrapper { -webkit-transform: translateY(3rem); transform: translateY(3rem); }
.story .bx-controls { position: absolute; width: 1280px; left: 50%; bottom: 0; z-index: 55; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
.story .bx-controls .bx-pager { position: absolute; bottom: 5rem; left: 0; }
.story .bx-controls .bx-pager-item { display: inline-block; margin: 0 .3rem; }
.story .bx-controls .bx-pager-item a { display: block; width: .55rem; height: .55rem; background-color: #091c31; border-radius: 50%; font-size: 0; color: transparent; -webkit-transition: all .3s ease; transition: all .3s ease; }
.story .bx-controls .bx-pager-item a.active { background-color: #f35f2c; }
.story .bx-controls .bx-controls-direction { position: absolute; left: 34.9%; bottom: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
.story .bx-controls .bx-controls-direction a { display: block; float: left; width: 3rem; height: 3rem; background-color: rgba(0, 0, 0, 0.2); font-size: 0; text-align: center; color: rgba(255, 255, 255, 0.6); padding-top: .6rem; }
.story .bx-controls .bx-controls-direction a.bx-next { background-color: #005ead; }
.story .bx-controls .bx-controls-direction a::before { content: ""; font-family: "xeicon"; font-size: 1.35rem; }
.story .bx-controls .bx-controls-direction a.bx-prev::before { content: "\e93b"; }
.story .bx-controls .bx-controls-direction a.bx-next::before { content: "\e93e"; }

/* panel */
.panel { padding: 0rem 0 4rem; }
.panel .panel-item { text-align: center; position: relative; }
.panel .panel-item .title { display: block; font-size: 1.1rem; font-family: "Nanum Square"; color: #333; padding: 1.5rem 0; }
.panel .panel-item .txt { font-size: .75rem; }
.panel .panel-item a::after { content: ''; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 80%; height: 136%; border-style: solid; -o-border-image: linear-gradient(to top, #6f63b3 0%, #0168be 100%); border-image: -webkit-gradient(linear, left bottom, left top, from(#6f63b3), to(#0168be)); border-image: linear-gradient(to top, #6f63b3 0%, #0168be 100%); border-image-slice: 1; border-image-width: 6px; opacity: 0; visibility: hidden; -webkit-transition: all .2s; transition: all .2s; }
.panel .panel-item a:hover::after { opacity: 1; visibility: visible; }

/* customer */
.customer { background: url("/webroot2/images/korean/main/customer_bg.jpg") 0 0/cover no-repeat; padding: 2rem 0 0; }
.customer .section-title { color: #fff; margin-bottom: 2rem; }
.customer .excellent-case { color: #fff; position: relative; z-index: 1; }
.customer .excellent-case a {display:block;}
.customer .excellent-case::before { content: ''; display: block; background-color: rgba(98, 100, 180, 0.9); width: 200%; height: 100%; position: absolute; left: -100%; top: 0; z-index: -1; }
.customer .excellent-case .title { display: block; font-size: 1.5rem; margin: 1rem 0; padding-left: 2rem; font-family: "Nanum Square"; }
.customer .excellent-case .title::after, .customer .excellent-case .title::before { content: ''; width: 8rem; height: 6.5rem; display: block; position: absolute; left: .75rem; top: -2rem; border: 5px solid #fff; }
.customer .excellent-case .title::after { border-right: 0; }
.customer .excellent-case .title::before { -o-border-image: linear-gradient(to bottom, #fff 40%, transparent 40%, transparent 90%, #fff 90%) 0 1 0 0; border-image: -webkit-gradient(linear, left top, left bottom, color-stop(40%, #fff), color-stop(40%, transparent), color-stop(90%, transparent), color-stop(90%, #fff)) 0 1 0 0; border-image: linear-gradient(to bottom, #fff 40%, transparent 40%, transparent 90%, #fff 90%) 0 1 0 0; }
.customer .excellent-case .txt { font-size: .85rem; margin-top: 4rem; }
.customer .excellent-case .img { position: absolute; right: 2rem; top: -2rem; }
.customer .excellent-case .arrow { display: block; margin: 2rem 0 3rem; }
.customer .customer-list { text-align: center; color: #fff; }
.customer .customer-list::after { content: ""; display: block; clear: both; }
.customer .customer-list li { display: block; float: left; width: 33.33%; text-align: center; margin-top: 2rem; }
.customer .customer-list li a { display: block; }
.customer .customer-list li img { width: 2rem; height: 2rem; }
.customer .customer-list li span { display: block; margin-top: 1rem; }

@media screen and (max-width: 1600px) { .announce { padding: 0; }
  .announce .bx-wrapper { padding-right: 4rem; }
  .announce .bx-controls .bx-prev { left: -1.5rem; }
  .announce .bx-controls .bx-next { right: -1.5rem; }
  .announce .bx-viewport { padding-left: 2rem; } }

@media screen and (max-width: 1200px) { .container { width: 100%; }
  .announce .bx-controls .bx-prev { left: 0; }
  .announce .bx-controls .bx-next { right: 0; } }

@media screen and (max-width: 767px) { .row { margin-left: 0; margin-right: 0; }
  [class*="col-"] { padding: 0 .05rem; }
  .visual { height: 25rem; padding: 0; }
  .visual .slide-list > li { height: 30rem; }
  .visual .visual-txt { word-break: keep-all; }
  .announce { position: static; padding: 0; }
  .announce .bg { padding-bottom: 0; }
  .announce .more-btn.active { display: none; }
  .announce .all-list-btn { margin-bottom: 1rem; }
  .announce #rnd-1st .current { padding: 1rem; }
  .announce #rnd-1st .current .title { font-size: 1rem; }
  .announce #rnd-1st .current .deco-txt { display: none; }
  .card { margin-top: 0; }
  .card .card-item { height: 11rem; }
  .news { padding: 1rem 0rem 0; }
  .news .tab { text-align: center; height: 46rem; }
  .news .tab-con li { padding: .5rem; min-height: 6rem; }
  .news .tab-con li strong{width:100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
  .news .tab-con li p{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
  .news .tab-con li .date { display: block; padding: 0; text-align: left; }
  .news .tab-con li .date .day { display: inline-block; font-size: inherit; font-weight: normal; font-family: inherit; color: inherit; }
  .news .tab-con li .date .day::before { content: "."; }
  .news .tab-con li .xi-angle-right-thin { display: none; }
  .panel { padding: 0; }
  .panel .panel-item { margin-top: 1rem; }
  .panel .panel-item a::after { height: 120%; }
  .customer { padding-top: 2rem; margin-top: 3rem; }
  .customer .excellent-case { padding: .5rem; }
  .customer .excellent-case::before { width: 100%; left: 0; }
  .customer .excellent-case .title { padding: 0; }
  .customer .excellent-case .title::before, .customer .excellent-case .title::after { display: none; }
  .customer .excellent-case .img { right: -2rem; }
  .customer .excellent-case .arrow { margin: 2rem 0; }
  .customer-list { padding-bottom: 2rem; } }

.visual .visual-txt{padding 0 2rem;}
.card .card-item .title { padding:0 2rem; }


@media (max-width:1200px){
  .container{padding:0 1.5rem;}
}

@media (max-width:767px){
  .container{padding:0 .5rem;}
  .visual .visual-txt .major-txt { font-size: 2rem; }
  .card .card-item .title { font-size:1.4rem; }
}