@charset "UTF-8";
/*-------------------------------------------------
title       : 콘텐츠
Author      : MONI
Create date : 2020-11-09
-------------------------------------------------*/
/*-------------------------------------------------
title       : 메인
Author      : MONI
Create date : 2021-11-07
-------------------------------------------------*/
body.start #visual .bx-viewport { -webkit-transform: translateY(0rem); transform: translateY(0rem); opacity: 1; -webkit-transition: all .5s 1.2s; transition: all .5s 1.2s; height: 38rem !important; }

body.start #section_en .item { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: all .5s 1.5s; transition: all .5s 1.5s; }

#visual { padding: 9rem 0 8rem; }

#visual .section_wrap { position: relative; }

#visual .bx-viewport { -webkit-transform: translateY(6rem); transform: translateY(6rem); opacity: 0; }

#visual .visual_slide_en li a { width: 100%; display: block; background-color: #fff; border-radius: 1rem; -webkit-box-shadow: 1px 2px 1.5rem rgba(0, 0, 0, 0.05); box-shadow: 1px 2px 1.5rem rgba(0, 0, 0, 0.05); overflow: hidden; }

#visual .visual_slide_en li a::after { content: ''; display: block; clear: both; }

#visual .visual_slide_en li a:hover .img_box img { -webkit-transform: scale(1.1) translateX(-50%); transform: scale(1.1) translateX(-50%); }

#visual .visual_slide_en li a:hover .txt_box::before { color: #20A2AC; }

#visual .img_box { width: 39.84%; height: 38rem; float: left; overflow: hidden; position: relative; }

#visual .img_box img { -webkit-transition: all .3s; transition: all .3s; max-width: 51rem; height: 100%; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: 0; }

#visual .txt_box { width: 60.16%; height: 38rem; float: left; padding: 5.5rem 24.5rem 5.5rem 5rem; }

#visual .txt_box::before { opacity: 1; left: 5rem; bottom: 4.5rem; color: #999; }

#visual .txt_box .divi { color: #20A2AC; font-size: 1.5rem; line-height: 1.8rem; font-weight: 500; margin-bottom: .8rem; }

#visual .txt_box .ti { font-size: 3.2rem; line-height: 3.8rem; font-weight: 700; margin-bottom: 5.2rem; position: relative; }

#visual .txt_box .ti::before { content: ''; width: 5rem; height: 2px; background-color: #20A2AC; position: absolute; left: 0; bottom: -2rem; }

#visual .txt_box .desc { line-height: 2.8rem; }

#visual .bx-wrapper { position: relative; }

#visual .bx-controls-direction a { width: 4rem; height: 4rem; }

#visual .bx-controls-direction a::after { color: #8FA1B9; font-size: 3.2rem; width: 4rem; height: 4rem; line-height: 4rem; }

#visual .bx-controls-direction a.bx-prev { left: inherit; right: 10rem; -webkit-transform: translateY(0); transform: translateY(0); top: 2.5rem; }

#visual .bx-controls-direction a.bx-prev::after { content: ''; }

#visual .bx-controls-direction a.bx-next { left: inherit; right: 10rem; -webkit-transform: translateY(0); transform: translateY(0); top: inherit; bottom: 2rem; }

#visual .bx-controls-direction a.bx-next::after { content: ''; }

#visual .bx-pager { position: absolute; top: 8rem; width: 14rem; right: 5rem; }

#visual .bx-pager .bx-pager-item { display: inline-block; }

#visual .bx-pager .bx-pager-item:nth-child(1) a::before { background-image: url(/publishing/eng/img/main/KCB_like_eng.png); background-size: cover; }

#visual .bx-pager .bx-pager-item:nth-child(2) a::before { background-image: url(/publishing/eng/img/main/main2.png); background-size: cover; }

#visual .bx-pager .bx-pager-item a { width: 14rem; height: 10rem; margin: 0.4rem 0; border-radius: 1rem; text-indent: -9999px; display: block; background-color: #fff; position: relative; -webkit-transition: all .3s; transition: all .3s; }

#visual .bx-pager .bx-pager-item a::before { content: ''; width: 14rem; height: 10rem; border-radius: 1rem; position: absolute; left: 0; top: 0; -webkit-filter: url("/jquery/filters.svg#grayscale"); filter: url("/jquery/filters.svg#grayscale"); filter: gray; -webkit-filter: grayscale(1); opacity: .5; }

#visual .bx-pager .bx-pager-item a::after { content: ''; width: 14rem; height: 10rem; border: .4rem solid #20A2AC; border-radius: 1rem; position: absolute; left: 0; top: 0; opacity: 0; }

#visual .bx-pager .bx-pager-item a.active::before { opacity: 1; filter: none; -webkit-filter: grayscale(0); }

#visual .bx-pager .bx-pager-item a.active::after { opacity: 1; }

#visual .bx-pager .bx-pager-item a:hover::before { opacity: 1; filter: none; -webkit-filter: grayscale(0); }

#section_en { margin: 7rem auto 7.5rem; }

#section_en .section_wrap::after { content: ''; display: block; clear: both; }

#section_en .txt_box { padding: 12.5rem 6rem 4rem 4rem; }

#section_en .item { height: 36rem; float: left; color: #fff; border-radius: 1rem; position: relative; overflow: hidden; }

#section_en .item::before { content: ''; width: 5.5rem; height: 5.5rem; position: absolute; left: 4rem; top: 4rem; }

#section_en .item .ti { font-size: 2.6rem; font-weight: 600; margin-bottom: 2rem; }

#section_en .item .desc { color: rgba(255, 255, 255, 0.7); font-size: 1.7rem; }

#section_en .item a { font-size: 1.7rem; font-weight: 600; position: absolute; left: 4rem; bottom: 4rem; }

#section_en .item a::after { content: ''; font-family: "xeicon"; font-size: 1.5rem; width: 2.5rem; height: 2.5rem; line-height: 2.5rem; text-align: center; color: #fff; vertical-align: top; padding-left: .5rem; }

#section_en .item a:hover { text-decoration: underline; }

#section_en .item1 { width: 40%; margin-right: 3%; background-color: #0C54A2; opacity: 0; -webkit-transform: translateX(-8rem); transform: translateX(-8rem); }

#section_en .item1::before { background-image: url(/publishing/eng/img/main/icon1.png); background-size: contain; }

#section_en .item2 { width: 57%; background-color: #20A2AC; opacity: 0; -webkit-transform: translateX(8rem); transform: translateX(8rem); }

#section_en .item2::before { background-image: url(/publishing/eng/img/main/icon2.png); background-size: contain; }

#section_en .item2::after { content: ''; display: block; clear: both; }

#section_en .item2 .txt_box { width: 50%; float: left; }

#section_en .item2 .img_box { width: 50%; float: left; height: 100%; position: relative; overflow: hidden; }

#section_en .item2 .img_box img { max-width: 365px; height: 100%; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: 0; }