@charset "UTF-8";
/*-------------------------------------------------
title       : 콘텐츠
Author      : MONI
Create date : 2020-11-09
-------------------------------------------------*/
/*-------------------------------------------------
title       : 메인
Author      : MONI, 이지현
Create date : 2022-04-27
-------------------------------------------------*/
#issue { display: none; }

body.start #header { -webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: -webkit-transform .4s .5s; transition: -webkit-transform .4s .5s; transition: transform .4s .5s; transition: transform .4s .5s, -webkit-transform .4s .5s; }

body.start #visual { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; -webkit-transition: all .6s 0s; transition: all .6s 0s; }

body.start #visual .img_box .visual_ob2 { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); opacity: 1; height: inherit; -webkit-transition: all 1.2s ease-in-out .1s; transition: all 1.2s ease-in-out .1s; }

body.start #visual .use_info { opacity: 1; -webkit-transition: opacity 1s 1.4s; transition: opacity 1s 1.4s; }

body.start #section1 { opacity: 1; -webkit-transform: translateY(0rem); transform: translateY(0rem); -webkit-transition: all .6s 1.2s; transition: all .6s 1.2s; }

#header { position: absolute; height: 9.8rem; -webkit-transform: translate(0, -8.5rem); transform: translate(0, -8.5rem); color: #643939; }

#header::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; opacity: 0; z-index: -1; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; }

#header .search .control.open { display: block; color: #fff; bottom: 3.2rem; font-size: 2.5rem; }

#header .submenu { color: #333; }

#header.fixed { position: fixed; top: 0; left: 0; -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); background-color: #fff; }

#header.fixed #gnb1 > ul > li > a { color: #333; }

#header.fixed #logo a::before { opacity: 0; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; }

#header.fixed #logo img { opacity: 1; }

#header.fixed #hnb li { color: #333; }

#header.fixed #gnb2.active .control::after, #header.fixed #gnb2.active .control::before { background: none; }

#header.fixed #gnb2 .control { border-color: #3b3b3b; }

#header.fixed #gnb2 .control::after, #header.fixed #gnb2 .control::before { background-color: #3b3b3b; }

#header.fixed .search .control.open { color: #3b3b3b; }

#header.active { color: #333; }

#header.active::before { opacity: 1; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; }

#header.active #hnb li { color: #333; }

#header.active #logo a::before { opacity: 0; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; }

#header.active #logo img { opacity: 1; }

#header.active #gnb1 > ul > li > a { color: #333; }

#header.active .search .control.open { color: #3b3b3b; }

#header.active .submenu { color: #333; }

#logo { position: relative; margin-top: 3.2rem; }

#logo a::before { content: ''; position: absolute; top: 0.3rem; width: 100%; height: 100%; background: url("/eng/img/layout/logo_on.svg") no-repeat 0 0; background-size: 100%; opacity: 1; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; }

#logo img { opacity: 0; }

#hnb { top: 4rem; }

#hnb li { color: #fff; }

#gnb1 > ul { margin-top: 4.1rem; }

#gnb1 > ul > li { display: inline-block; }

#gnb1 > ul > li > a { font-size: 1.8rem; color: #fff; }

#gnb2 .control { border-color: #fff; bottom: 3.7rem; }

#gnb2 .control::after, #gnb2 .control::before { background-color: #fff; }

#header.active #gnb2 .control { border-color: #222; }

#header.active #gnb2 .control::after, #header.active #gnb2 .control::before { background-color: #222; }

#section2, #section3, #section4, #section5 .wrap { -webkit-transform: translateY(-20px); transform: translateY(-20px); opacity: 0; -webkit-transition: all 0.1s; transition: all 0.1s; }

#section1 { /* KRIHS NEWS & EVENTS */ }

#section1 .control { position: absolute; bottom: 0; left: 0; width: 50%; max-width: 48.9rem; height: 8rem; padding: 3rem 6rem 0 0; background-color: #fff; z-index: 1; text-align: right; }

#section1 .control > * { display: inline-block; vertical-align: top; }

#section1 .control .btns { position: relative; width: 2rem; height: 2rem; }

#section1 .control .btns button { position: absolute; top: 0; left: 0; display: none; width: 100%; height: 100%; line-height: 2rem; text-align: center; overflow: hidden; color: #3B3B3B; }

#section1 .control .btns button.active { display: block; }

#section1 .control .btns button::before { font-family: "xeicon"; display: block; font-size: 2rem; }

#section1 .control .btns button.play::before { content: ''; }

#section1 .control .btns button.pause::before { content: ''; }

#section1 .control .nav { margin-right: 2.5rem; }

#section1 .control .nav li { position: relative; display: inline-block; vertical-align: top; line-height: 2rem; }

#section1 .control .nav li::before { content: ''; position: absolute; display: none; top: 0.7rem; right: -10rem; width: 7.8rem; height: 5px; background-color: #E6E6E6; }

#section1 .control .nav li::after { content: ''; position: absolute; top: 0.7rem; right: -10rem; display: none; width: 7.8rem; height: 5px; background-color: #000000; -webkit-transform: translateX(-3.9rem) scaleX(0); transform: translateX(-3.9rem) scaleX(0); }

#section1 .control .nav li button { font-size: 1.6rem; font-weight: 600; color: #333; }

#section1 .control .nav li + li { margin-left: 1.5rem; }

#section1 .control .nav li.on { margin-right: 11.5rem; }

#section1 .control .nav li.on::before { display: block; }

#section1 .control .nav li.on::after { display: block; }

#section1 .control .nav.active li.on::after { -webkit-transform: translateX(0) scaleX(100%); transform: translateX(0) scaleX(100%); -webkit-transition: all 7s linear; transition: all 7s linear; }

#section1 .arr_box { position: absolute; bottom: 60%; left: 50%; width: 128rem; max-width: calc(100% - 6rem); height: 0; -webkit-transform: translate(-50%); transform: translate(-50%); z-index: 1; text-align: right; }

#section1 .arr_box button { display: inline-block; width: 7.6rem; height: 7.6rem; border: 1px solid #fff; color: #fff; overflow: hidden; border-radius: 100%; opacity: 0.4; -webkit-transition: all 0.2s; transition: all 0.2s; }

#section1 .arr_box button:hover, #section1 .arr_box button:focus { opacity: 1; }

#section1 .arr_box button::before { font-family: "xeicon"; display: block; font-size: 2.5rem; line-height: 7.6rem; }

#section1 .arr_box button.prev { margin-bottom: 1rem; }

#section1 .arr_box button.prev::before { content: ''; }

#section1 .arr_box button.next::before { content: ''; }

#section1 .notice { position: absolute; right: 0; bottom: 0; width: calc(100% - 48.9rem); height: 8rem; padding: 2.7rem 0 0 4rem; background-color: rgba(0, 0, 0, 0.7); color: #fff; }

#section1 .notice > * { display: inline-block; vertical-align: middle; }

#section1 .notice .btn { display: inline-block; margin-left: 8rem; vertical-align: middle; }

#section1 .notice .btn button { width: 2rem; height: 2rem; line-height: 2rem; text-align: center; overflow: hidden; }

#section1 .notice .btn button::before { content: ''; display: block; font-family: "xeicon"; font-weight: 100; color: rgba(255, 255, 255, 0.7); }

#section1 .notice .btn button.n_prev::before { content: ''; }

#section1 .notice .btn button.n_next::before { content: ''; }

#section1 .notice .title { font-size: 1.8rem; line-height: 2.5rem; margin-right: 3rem; }

#section1 .notice .slick-slider { display: inline-block; vertical-align: middle; width: 60rem; height: 2.5rem; }

#section1 .notice .rs_slide { line-height: 2.5rem; }

#section1 .notice .rs_slide::after { content: ''; display: block; clear: both; }

#section1 .notice .rs_slide strong { font-weight: 300; width: calc(100% - 9rem); float: left; color: rgba(255, 255, 255, 0.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#section1 .notice .rs_slide span { font-weight: 100; width: 8.5rem; float: right; color: rgba(255, 255, 255, 0.5); }

#visual { position: relative; }

#visual .v_slide img { width: 100%; }

#visual .mov::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }

#visual .mov iframe { position: absolute; top: -20%; left: 0; width: 100%; height: 130%; }

#visual .txt { position: absolute; top: 50%; left: 50%; width: 100%; max-width: 128rem; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #fff; z-index: 1; }

#visual .txt .tit { font-size: 6.5rem; font-weight: 600; line-height: 8.4rem; }

#visual .txt .s_word { line-height: 20rem; opacity: 0.2; font-size: 13rem; font-weight: 900; }

#visual .txt .bul { margin-top: 3.5rem; }

#visual .txt .bul li { position: relative; padding-left: 1.2rem; font-size: 1.8rem; color: rgba(255, 255, 255, 0.7); font-weight: 100; }

#visual .txt .bul li::before { content: ''; position: absolute; top: 1.2rem; left: 0; width: 0.5rem; height: 0.5rem; background-color: #7b7b7b; border-radius: 1px; }

#visual .txt .bul li + li { margin-top: 1.5rem; }

#visual .txt .bul li strong { display: inline-block; margin-right: 1.1rem; color: rgba(255, 255, 255, 0.8); font-weight: 500; }

#visual .txt .btn { display: inline-block; min-width: 15.6rem; padding: 0 2rem; margin-top: 5rem; line-height: 5.1rem; border: 1px solid rgba(255, 255, 255, 0.23); color: rgba(255, 255, 255, 0.5); -webkit-transition: all 0.2s; transition: all 0.2s; }

#visual .txt .btn i { float: right; line-height: 5.1rem; }

#visual .txt .btn:hover, #visual .txt .btn:focus { border-color: white; color: white; -webkit-transition: all 0.2s; transition: all 0.2s; }

#visual .txt .form { max-width: 45rem; margin-top: 6rem; line-height: 6rem; border: 2px solid #fff; border-radius: 5rem; padding: 0 3rem; }

#visual .txt .form .form_select { position: relative; width: 10rem; display: inline-block; margin-right: 2rem; }

#visual .txt .form .form_select::before { content: '\ea4d'; position: absolute; right: 0; top: 0; font-family: 'remixicon'; }

#visual .txt .form .form_select select { background: none; color: #fff; font-size: 1.7rem; border: 0 none; }

#visual .txt .form input[type="text"] { width: calc(100% - 3rem); background: none; color: #fff; border: 0 none; }

#visual .txt .form input[type="text"]::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.5); }

#visual .txt .form input[type="text"]:-ms-input-placeholder { color: rgba(255, 255, 255, 0.5); }

#visual .txt .form input[type="text"]::-ms-input-placeholder { color: rgba(255, 255, 255, 0.5); }

#visual .txt .form input[type="text"]::placeholder { color: rgba(255, 255, 255, 0.5); }

#visual .txt .form button { display: inline-block; width: 3rem; height: 3rem; color: #fff; vertical-align: middle; overflow: hidden; }

#visual .txt .form button i { display: block; line-height: 3rem; font-size: 2.1rem; }

#visual .slick-slide { max-height: 951px; }

#section2 { width: 1280px; max-width: calc(100% - 4rem); margin: 0 auto; position: relative; margin-bottom: 8.6rem; margin-top: 8.9rem; }

#section2 .publication { display: -webkit-box; display: -ms-flexbox; display: flex; width: calc(100% + 5rem); }

#section2 .publication h3 { font-size: 2.8rem; font-weight: 800; margin-bottom: 2.3rem; color: #222; }

#section2 .publication > div { width: calc(33.33% - 5rem); -webkit-box-flex: 1; -ms-flex: 1 1 calc(33.33% - 5rem); flex: 1 1 calc(33.33% - 5rem); max-width: calc(33.33% - 5rem); margin-right: 5rem; position: relative; }

#section2 .publication .more { position: absolute; right: 0; top: 0; width: 4.3rem; height: 4.3rem; line-height: 4.3rem; border-radius: 50%; text-align: center; background-color: #F4F4F4; }

#section2 .publication .more:hover i, #section2 .publication .more:focus i { -webkit-transform: scale(1.1) rotate(90deg); transform: scale(1.1) rotate(90deg); }

#section2 .publication .more i { font-size: 1.8rem; display: block; line-height: 4.3rem; -webkit-transition: all .3s; transition: all .3s; }

#section2 .link_wrap { display: -webkit-box; display: -ms-flexbox; display: flex; width: calc(100% + 2.3rem); }

#section2 .link_wrap a { display: inline-block; width: calc(50% - 2.3rem); -webkit-box-flex: 1; flex: 1 1 calc(50% - 2.3rem); -ms-flex: 0 1 auto; max-width: calc(50% - 2.3rem); margin-right: 2.3rem; text-align: center; }

#section2 .link_wrap a:hover .thumb img, #section2 .link_wrap a:focus .thumb img { -webkit-transform: scale(1.1); transform: scale(1.1); }

#section2 .link_wrap a:hover .ti, #section2 .link_wrap a:focus .ti { text-decoration: underline; }

#section2 .link_wrap .thumb { height: 26rem; -webkit-box-shadow: .4rem .4rem 1.2rem #00000015; box-shadow: .4rem .4rem 1.2rem #00000015; display: block; margin-bottom: 2.2rem; width: 100%; overflow: hidden; background-color: #fff; }

#section2 .link_wrap .thumb img { width: auto; min-width: 100%; height: 100%; -webkit-transition: all .3s; transition: all .3s; }

#section2 .link_wrap .divi { font-weight: 300; }

#section2 .link_wrap .ti { display: block; height: 4rem; max-height: 4rem; text-align: left; font-size: 1.6rem; font-weight: 600; white-space: normal; color: #333333; line-height: 2rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

#section3 { position: relative; background: -webkit-gradient(linear, left top, right top, from(#E6E6F9), to(#EAF3E6)) 0% 0% no-repeat padding-box; background: linear-gradient(90deg, #E6E6F9 0%, #EAF3E6 100%) 0% 0% no-repeat padding-box; }

#section3::before { content: ''; position: absolute; bottom: 0; left: 50%; width: 56.6rem; height: 45.9rem; -webkit-transform: translateX(-84rem); transform: translateX(-84rem); background: url("/eng/img/main/bg_img2.png") no-repeat bottom 0 left 30%; background-size: 100%; }

#section3 .section_wrap { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; max-width: 128rem; margin: 0 auto; padding: 7.2rem 0 8.5rem 0; }

#section3 .section_wrap h3 { width: 19rem; max-width: 19rem; -webkit-box-flex: 1; -ms-flex: 1 1 19rem; flex: 1 1 19rem; word-break: keep-all; font-size: 3.3rem; line-height: 4rem; color: #022222; font-weight: 900; }

#section3 .section_wrap .more { width: 4.3rem; height: 4.3rem; line-height: 4.3rem; border-radius: 50%; text-align: center; background-color: #F4F4F4; }

#section3 .section_wrap .more:hover i, #section3 .section_wrap .more:focus i { -webkit-transform: scale(1.1) rotate(90deg); transform: scale(1.1) rotate(90deg); }

#section3 .section_wrap .more i { font-size: 1.8rem; display: block; line-height: 4.3rem; -webkit-transition: all .3s; transition: all .3s; color: #777; }

#section3 .section_wrap .slide { width: calc(100% - 19rem); max-width: calc(100% - 19rem); -webkit-box-flex: 1; -ms-flex: 1 1 calc(100% - 19rem); flex: 1 1 calc(100% - 19rem); padding-left: 8.4rem; overflow: hidden; }

#section3 .section_wrap .slide .slick-slide { width: 31.3rem; margin-right: 2.7rem; padding-top: 1.3rem; padding-left: 1.3rem; }

#section3 .section_wrap .slide .s_box .label { position: relative; z-index: 2; display: inline-block; margin-left: 3rem; background-color: #45A022; width: 10.2rem; text-align: center; line-height: 4rem; color: #fff; font-size: 1.6rem; }

#section3 .section_wrap .slide a { position: relative; }

#section3 .section_wrap .slide a > * { -webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: all 0.2s; transition: all 0.2s; }

#section3 .section_wrap .slide a:hover > * { -webkit-transform: translate(-1.3rem, -1.3rem); transform: translate(-1.3rem, -1.3rem); -webkit-transition: all 0.3s; transition: all 0.3s; }

#section3 .section_wrap .slide a::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 30rem; background-color: #45A022; z-index: 0; }

#section3 .section_wrap .slide .cont { position: relative; height: 30rem; background-color: #fff; margin-top: -2rem; padding: 5.7rem 3rem 2rem 3rem; z-index: 1; }

#section3 .section_wrap .slide .cont .title { display: block; height: 8.1rem; max-height: 8.1rem; font-size: 1.9rem; color: #333; font-weight: 700; line-height: 2.7rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

#section3 .section_wrap .slide .cont .txt { display: block; height: 4.4rem; max-height: 4.4rem; margin-top: 2rem; color: #555; line-height: 2.2rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

#section3 .section_wrap .slide .cont .date { position: absolute; width: calc(100% - 6rem); bottom: 2rem; font-weight: 600; color: #555; left: 0; margin: 0 3rem; border-top: 1px solid #ECECEC; padding-top: 1.8rem; }

#section3 .control { position: absolute; left: 0; bottom: 8.5rem; }

#section3 .control > * { display: inline-block; vertical-align: middle; }

#section3 .control .prev, #section3 .control .next { font-size: 1.9rem; color: #333; }

#section3 .control .cnt { margin: 0 1rem; color: #707070; font-size: 1.3rem; line-height: 1.9rem; }

#section3 .control .cnt span { margin: 0.7rem; color: #333; font-size: 1.7rem; }

#section3 .control .cnt .now { font-weight: 600; }

#section3 .control .more { margin-left: 1.6rem; }

#section4 { width: 1280px; max-width: calc(100% - 4rem); margin: 7rem auto 11rem; }

#section4 .section_wrap { display: -webkit-box; display: -ms-flexbox; display: flex; width: calc(100% + 5rem); }

#section4 .section_wrap h3 { font-size: 2.8rem; font-weight: 800; margin-bottom: 2.3rem; color: #222; }

#section4 .section_wrap > div { position: relative; }

#section4 .group1, #section4 .group2 { -webkit-box-flex: 1; -ms-flex: 1 1 26.4rem; flex: 1 1 26.4rem; margin-right: 5rem; }

#section4 .group1 .link, #section4 .group2 .link { display: inline-block; position: relative; }

#section4 .group1 .link .down, #section4 .group2 .link .down { width: 13.2rem; height: 4.2rem; border: 1px solid #fff; border-radius: 2rem; text-align: center; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); bottom: 2.4rem; color: #fff; line-height: 4rem; font-weight: 500; -webkit-transition: all .3s; transition: all .3s; }

#section4 .group1 .link:hover .down, #section4 .group1 .link:focus .down, #section4 .group2 .link:hover .down, #section4 .group2 .link:focus .down { background-color: #fff; color: #000; }

#section4 .group3 { -webkit-box-flex: 1; -ms-flex: 1 1 65.2rem; flex: 1 1 65.2rem; margin-right: 5rem; }

#section4 .group3 .link { display: inline-block; position: relative; }

#section4 .group3 .link .desc { color: #fff; font-size: 2rem; font-weight: 500; position: absolute; left: 4rem; top: 6rem; max-width: 34.8rem; }

#section4 .group3 .link .down { width: 10rem; height: 3.5rem; border: 1px solid #ffffff40; padding: 0 2rem; position: absolute; left: 4rem; bottom: 6rem; color: #fff; line-height: 3.3rem; font-weight: 300; -webkit-transition: all .3s; transition: all .3s; }

#section4 .group3 .link .down::before { content: ''; font-family: "xeicon"; width: 2rem; height: 3.3rem; text-align: center; position: absolute; right: 1rem; top: 0; font-size: 1.5rem; }

#section4 .group3 .link:hover .down, #section4 .group3 .link:focus .down { background-color: #fff; color: #000; }

#section4 .link_wrap { display: -webkit-box; display: -ms-flexbox; display: flex; width: calc(100% + 2.3rem); }

#section4 .link_wrap a { display: inline-block; -webkit-box-flex: 1; -ms-flex: 1 1 calc(50% - 2.3rem); flex: 1 1 calc(50% - 2.3rem); margin-right: 2.3rem; text-align: center; }

#section4 .link_wrap .thumb { height: 25.2rem; -webkit-box-shadow: .4rem .4rem 1.2rem #00000015; box-shadow: .4rem .4rem 1.2rem #00000015; display: block; }

@-webkit-keyframes opacity_M { 0% { opacity: 0.5; }
  50% { opacity: 1; }
  100% { opacity: 0.5; } }

@keyframes opacity_M { 0% { opacity: 0.5; }
  50% { opacity: 1; }
  100% { opacity: 0.5; } }