@charset "utf-8";
/* container */
#container { position:relative; width:100%; z-index:0; margin:4.25rem 0 0; }
#container:after { display:block; content:""; clear:both; }

.contBox { position:relative; width:96%; margin:0 auto; overflow:hidden; z-index:1;}
.cntWrap01 { position:relative; z-index:2;padding-bottom:60px}
.cntWrap02 { position:relative}
.cntWrap02:before{content:""; position: absolute; right:50%; bottom:0; width:100%; /*height:130%;*/ background:#e4eff8;}
.cntWrap02 .contBox{padding:6rem 0 6rem;width:100%;margin:0}


/* 메인비주얼 */
.main_visual {position:relative;border-top: 1px solid #ddd;height: 875px;z-index:0;overflow: hidden;}/* 200708 */
/* 슬로건 */
.main_visual .slogan_wrap{ margin-top: 5rem; width: 100%; text-align: center; z-index:2000; text-align: center; position: relative; }
.main_visual .slogan.slick-slider{opacity: 1; }/* 200708 */
.main_visual .slogan .txt .tit{ position:relative; font-weight:700; position:relative; font-family:'GmarketSans'; font-size:2.5rem; letter-spacing:-2px;}
.main_visual .slogan .txt .txt01{ position:relative; margin-top: 20px; font-family:'GmarketSans'; font-size:1.5rem; font-weight: 400;}
.main_visual .slogan .txt.bg01 .tit{color:#3b3b3b;}
.main_visual .slogan .txt.bg02 .tit{color:#3b3b3b;}
.main_visual .slogan .txt.bg03 .tit{color:#723224}
.main_visual .slogan .txt.bg04 .tit{color:#342b60}
.main_visual .slogan .txt .txt01{color: #3b3b3b;}
.main_visual .slogan .txt .tit{line-height: 1.2;}
.main_visual .slogan .txt .link{margin-top: 2.5rem;position: relative;left:30px}
.main_visual .slogan .txt .link a{font-size: 0.8rem;display: inline-block;border-bottom:1px solid #101010}
.main_visual .slogan .txt .link a img{vertical-align: middle;margin-left: 0.1rem;}
.main_visual .slogan .txt.bg05{color:#022049;text-shadow:1px 1px 1px rgba(255,255,255,0.5)}
.main_visual .slogan .txt.bg01:before{background:rgba(0,0,0,0.3);}
.main_visual .slogan .txt.bg02:before{background:rgba(15,98,145,0.5);}
.main_visual .slogan .txt.bg03:before{background:rgba(77,75,156,0.5);}
.main_visual .slogan .txt.bg04:before,
.main_visual .slogan .txt.bg05:before{background:rgba(255,255,255,0.3);}


/*검색*/
.main_visual .search_wrap { width: 100%; max-width: 560px; margin: 2rem auto 0; }
.main_visual .search_wrap fieldset { display: block; width: 100%; height: 50px; position: relative; }
.main_visual .search_wrap fieldset::after { display: block; content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #fff; box-shadow: 0px 1px 5px rgba(0,0,0,0.5); z-index: 5; }
.main_visual .search_wrap input[type="text"] { width: calc(100% - 45px); height: 100%; border: 0; background: transparent; }
.main_visual .search_wrap .vis_search_btn { position: absolute; top: 0; right: 0; }
.main_visual .search_wrap .hashtag { margin-top: 13px; display: flex; flex-wrap: wrap; gap: .5rem; }
.main_visual .search_wrap .hashtag a { display: inline-block; padding: 5px 15px 2px; background: rgba(255, 255, 255, .6); border-radius: 500px; font-family: 'GmarketSans'; font-size: .7rem; font-weight: 700; }


    /* dots */
    .main_visual .slick-dots{position: absolute; left:-7rem; top:-1000%; width:6.5rem; z-index:1000;}
    .main_visual .slick-dots li{position:relative; margin:0.5rem 0; }
    .main_visual .slick-dots li:before{content:""; position: absolute; left:2rem; top:50%; width:0; height:2px; background:#004a80;}
    .main_visual .slick-dots li button{font-size:1rem; color:#777; font-weight: 200;}
    .main_visual .slick-dots li.slick-active button{color:#004a80; font-weight: 400; font-style: italic; font-size:1.2rem;}
    .main_visual .slick-dots li.slick-active:before{width:calc(100% - 2.5rem); }
    .main_visual .slick-dots a, .main_visual .slick-dots :before{transition:all .3s ease; -ms-transition:all .3s ease; -webkit-transition:all .3s ease;}

/* 이미지 */
.main_visual .visual{ position: absolute; width: 100%; height:100%; z-index:0; top:0;}
.main_visual .visual div{ width: 100%; height:100%; background-repeat: no-repeat; background-position: 50% 0; background-size: cover; }


    /* 버튼 */
    .main_visual .control{position:absolute; left:0; bottom:0;}
    .main_visual .control a{display:block; width:12px; height:1.25rem; margin:0 0.25rem; text-indent:-9999%; overflow:hidden; float:left; }
    .main_visual .control a.btn_stop { background:url('/images/web/ncrc_en/main/btn_stop.png') no-repeat center; }
    .main_visual .control a.btn_play { display:none; background:url('/images/web/ncrc_en/main/btn_play.png') no-repeat center; }

 /* 바로가기01 *//* 200813 */
.mLink { position: absolute; left: 50%; transform: translateX(-50%); bottom: 140px; width: 100%; max-width: 775px; padding: .9rem 2.5rem; overflow:hidden; font-family:'GmarketSans'; z-index: 999; background-color: rgba(255,255,255,0.8); border-radius: 20px; box-shadow: -5px 5px 10px rgba(0, 0, 0, .1); }
.mLink h3 { position:absolute; width:1px; height:1px; left:-9999em; top:-9999em; text-indent:-9999em; overflow:hidden; }
.mLink ul{font-size:0; line-height:0; }
/* Main페이지 둥근탭 추가로 width 9%에서 8.3 으로변경*/
.mLink ul li { width:15%; display:inline-block; vertical-align:top; text-align:center; }
.mLink ul li a{display:block;}/*201210 수정*/
.mLink ul li a p { position:relative; width:80px; height:80px; line-height:80px; margin:0 auto; border: 1px solid #afc0ce; border-radius:50%; background:#fff; }
.mLink ul li a p:before { content:""; position:absolute; left:50%; top:50%; width:1px; height:1px; border-radius:50%; opacity:0; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); background:#fff; z-index:0; }
.mLink ul li a p::after { content:""; position:absolute; left:0; top:0; width:100%; height:100%; border-radius:50%; border:2px solid #f4f3f3; box-sizing:border-box; -webkit-box-sizing:border-box; z-index:1; }
.mLink ul li a img { position:relative; }
.mLink ul li a span { display:block; margin:0.75rem 0 0; line-height:1.2; font-size:0.8rem; }
.mLink ul li a:hover { color:#004a96; text-decoration:underline; }
.mLink ul li a:hover p:after { border-color:#14586d; }
.mLink ul li a:hover p:before { width:100%; height:100%; opacity:1; }
.mLink :before, .mLink :after { transition:all .3s ease; -ms-transition:all .3s ease; -webkit-transition:all .3s ease; }
.mLink > a { position: absolute; top: 0; width: 2.5rem; height: 100%; background: #fff; text-indent:-9999em; overflow:hidden; }
.mLink > a::after { content: ""; position: absolute; top: 50%; left: 70%; width: 30px; height: 30px; border-top: 2px solid #aaa; border-right: 2px solid #aaa; transform: translate(-50%,-50%) rotate(45deg); }
.mLink a#mLinkPrev { left: 0; }
.mLink a#mLinkPrev::after { transform: translate(-50%,-50%) rotate(-135deg); }
.mLink a#mLinkNext { right: 0; }
.mLink a#mLinkNext::after { left: 30%; }

    /*Introduction*/
    .mainIntroduction{max-width:1400px;width:96%;margin:6rem auto 0;height:527px;position:relative}
    .mainIntroduction div{display:inline-block;vertical-align:top}
    .mainIntroduction .textArea span{font-size:0.9rem;color:#101010}
    .mainIntroduction .textArea h5{font-size:2.3rem;color:#101010;line-height:2.5rem;font-weight:bold}
    .mainIntroduction .textArea h5 span{color:#1170c5;font-size:2.3rem;}
    .mainIntroduction .textArea p{font-size:0.8rem;color:#767676;font-weight:300;margin-top:2.1rem}
    .mainIntroduction .introMenu{position:absolute;right:0;width:65.75%}
    .mainIntroduction .introMenu li{float:left;width:47.8%;}
    .mainIntroduction .introMenu li dl{background:#fff;text-align:center;border:1px solid #e0e0e0;padding:55px 0;border-radius:7px}
    .mainIntroduction .introMenu li a{display:block}
    .mainIntroduction .introMenu li:first-child{margin-right:4.4%}
    .mainIntroduction .introMenu li p{color:#101010;font-size:1.4rem;line-height:32px;margin-top:23px;font-weight:bold}
    .mainIntroduction .introMenu li span{color:#767676;font-size:0.8rem;margin-top:1.5rem;display:block}
    .mainIntroduction .introMenu li b{margin-top:1.85rem;display:inline-block;padding-right:0.7rem;color:#101010;font-weight:500;font-size:0.8rem;background:url('/images/web/ncrc_en/main/ico_link_arrow_black.png') no-repeat right 0.52rem;border-bottom:1px solid #101010;background-size:4px}
    .mainIntroduction .introMenu li:hover{box-shadow:10px 10px 15px rgba(0,0,0,.06)}
    .mainIntroduction .introMenu li:hover b{color:#1170c5;border-bottom:1px solid #1170c5;background-image:url('/images/web/ncrc_en/main/ico_arrow_on.png')}

    /* 갤러리 */
    .gallery { position:relative; width:100%; float:left}
    .gallery h3{color:#101010;font-size:2.3rem;}
    .gallery h3 span{display:block;font-size:0.9rem;font-weight:bold}
    .gallery h3 strong{display:block;font-weight:bold}
    .gallery h3 strong i{color:#1170c5}
    .gallery .slideWrap{position:relative;width:calc(100% - 22.5rem);height:17.35rem;float:left;padding-right:1.5rem}
    .gallery .slideWrap .control{position:absolute;z-index:1;width:100%;height:100%;top:0}
    .gallery .control{height:auto;}
    .gallery a.ctrlBtn{position: absolute;width:3.3rem;top:50%;transform:translateY(-50%);height:3.3rem;text-indent:-9999em;overflow:hidden; z-index:2;}
    #galleryPrev{left:1%; background:url('/images/web/ncrc_en/main/btn_Prev1.png') no-repeat center;}
    #galleryNext{right:0; margin-left:1px; background:url('/images/web/ncrc_en/main/btn_Next1.png') no-repeat center; z-index:1000;}


    .gallery .cont_wrap{padding-top:2rem}
    .gallery .cont_wrap{position:relative; width:18rem; height:21.35rem; float:right; z-index:1;}
    .gallery div{height:100%;}
    #imgSlide{position:relative;width:100%;height:100%;z-index:1}
    #imgSlide .img{position:relative; width:100%; height:100%;margin-left:2rem;overflow:hidden; background-repeat:no-repeat;background-size:cover;background-position:center;border-radius:7px;}
    #imgSlide .img.slick-active{cursor: pointer}
    #imgSlide img{position:relative; width:auto; height:100%; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%);}
    #contSlide{z-index:0}
    #contSlide .cont{position:relative; height:100%}
    #contSlide .tit{position:relative; height:auto; line-height:2rem; margin-bottom:1rem; color:#000; font-size:1rem; font-weight:600; text-overflow:ellipsis; white-space: nowrap;}
    #contSlide .tit span{font-size:1.8rem; color:#004a80; display:inline-block; vertical-align: bottom; margin-right:0.5rem;}
    #contSlide p{font-size:0.8rem;color:#767676;margin-top:0.8rem}
    #contSlide span.date{display:block;font-size:0.8rem;color:#767676;margin-top:1.25rem}
    #contSlide a.btn_more{color:#101010;background:url('/images/web/ncrc_en/main/ico_link_arrow_black.png')no-repeat right center;display:inline-block;padding-right:0.7rem;margin-top:3rem;font-size:0.8rem;border-bottom:1px solid #101010}
    .gallery a{transition:all .3s ease; -webkit-transition:all .3s ease;}

/* 게시판 */
.notice { position:relative; width:49%; float:right; }
.notice h3 {position:relative; display:inline-block; min-width:7rem; line-height:2rem; text-align:center; color:#fff; background:#004a80;}
.notice h3:before{content:""; position:absolute; bottom:-6px; left:0; width:100%; height:6px; background:url('/images/web/ncrc_en/main/bg_noti.png') no-repeat center bottom;}
.notice .list_box { position:relative; width:100%; margin:1rem 0 0;}
.notice .list_box ul {overflow:hidden;}/*201022 수정*/
.notice .list_box ul li { width:49%; margin-left:2%; margin-bottom:0.5rem; float:left; }
.notice .list_box ul li:first-child,
.notice .list_box ul li:nth-child(3) { margin-left:0; }
.notice .list_box ul li a { display:block; position:relative; border:1px solid #ccc; padding:1.75rem;padding-bottom:3rem;padding-top:3rem;}
.notice .list_box ul li a .tit { line-height:1.2rem; font-size:1rem; color:#000; overflow:hidden; white-space: nowrap; text-overflow:ellipsis;}
.notice .list_box ul li a .cont { line-height:1.2rem; height:2.5rem; font-size:0.8rem; color:#666; margin:0.75rem 0; overflow:hidden; }
.notice .list_box ul li a .date { color:#666; font-size:0.7rem; float:left; padding-left:1rem; background:url('/images/web/ncrc_en/main/ico_clock.png') no-repeat left center; }
.notice .list_box ul li.new a::before { content:"N"; position:absolute; left:0; top:0; width:1.5rem; height:1.5rem; line-height:1.6rem; text-align:center; background:#fe7a18; color:#fff; font-size:0.8rem; font-weight:600; }
.notice .list_box a.btn_more { display:block; position:absolute; right:0; top:-3rem; width:2rem; height:2rem; text-indent:-9999em; border:1px solid #ccc; z-index:1; background:#fff url('/images/web/ncrc_en/main/btn_more02.png') no-repeat center}
.notice .list_box a.btn_more:hover { border-color:#004a80; }
.notice .list_box ul li a:hover { border-color:#004a80; }
.notice .list_box ul li a:hover .tit { color:#004a80; }
.notice .list_box ul li a:hover .cont { text-decoration:underline; }
.notice a, .notice p { transition:all .3s ease; -ms-transition:all .3s ease; -webkit-transition:all .3s ease; }

/* 바로가기02 */
.mLink02 { position:relative; width:49%; float:right; margin:1rem 0 0;}
.mLink02 h3 { position:absolute; width:1px; height:1px; left:-9999em; top:-9999em; text-indent:-9999em; overflow:hidden; }
.mLink02 ul{font-size:0; line-height:0; }
.mLink02 ul li { width:23.5%; display:inline-block; vertical-align:top;}
.mLink02 ul li + li{ margin-left:2%; }
.mLink02 ul li a{position:relative; display:table; width:100%; height:4.5rem; border:1px solid #9db3c5; line-height:1.2; font-size:0.8rem; color:#000;}
.mLink02 ul li a p { position:absolute; left:0.75rem; top:0.85rem; width:2.75rem; height:2.75rem; line-height:2.75rem; text-align:center; border-radius:50%; background:#e3edf6; }
.mLink02 ul li a span { display:table-cell; vertical-align: middle; padding-left:4rem; padding-right:0.25rem; }
.mLink02 ul li a:hover { text-decoration:underline; background:#82a5c2; color:#fff;}
.mLink02 ul li a:hover p{background:#fff;}
.mLink02 ul li a:hover img{transform:rotateY(180deg); -webkit-transform:rotateY(180deg);}
.mLink02 a, .mLink02 img, .mLink02 p{transition:all .3s ease; -ms-transition:all .3s ease; -webkit-transition:all .3s ease;}


@media screen and (max-width:1860px) {

    /* 메인비주얼 */
    .main_visual .slick-dots{left:5%; top:auto; bottom:-6px; margin-left:1.8rem;}
    .main_visual .slick-dots li{float:left; margin:0 0.25rem 0 0;}
    .main_visual .slick-dots li button{width:1.8rem; height:1.8rem; border-radius:50%; background:rgba(255,255,255,0.6); font-size:0.9rem;}
    .main_visual .slick-dots li.slick-active button{background:#fff; font-style: normal; font-size:0.9rem;}

}

@media screen and (max-width:1460px) {

    #container{margin:8.5rem 0 0;}
    /* 바로가기01 */
    /* .mLink{position:relative; right:auto; top:auto; width:100%; height:auto; background:#129ac6; padding:1rem 0;}
    .mLink:before{display:none;}
    .mLink ul{ width:95%; margin:0 auto;}
    .mLink ul li{width:12.5%;} */
}
@media screen and (max-width:1280px) {
    .mLink ul li{text-align:center}
    .mLink ul li::before{border-right:none}
    .mLink ul li a{background:none;padding:25px 0}
    .mLink ul li a p{display:block}
}
@media screen and (max-width:1240px) {

    #container{margin:4.25rem 0 0;}

    .cntWrap02:before{display:none;}
    .cntWrap02 .contBox{width:100%; padding:0 0 1.5rem;}
    /* 갤러리 */
    .gallery{width:100%; padding:3rem 0}
    /* 바로가기02 */
    .mLink02{width:95%; margin:0 auto; float:none; overflow:hidden;}
}

@media screen and (max-width:980px) {
    /*Main Visual*/
    .mainIntroduction .introMenu{width:60%}
    .mainIntroduction .introMenu li i{display:block}
    .mainIntroduction .introMenu li i img{width:55%}
}
@media screen and (max-width:820px) {
    .main_visual{height:33rem}
    #galleryPrev{left:0}
    .gallery .slideWrap{width:calc(100% - 17rem)}
    .gallery .cont_wrap{height:auto;width:15rem}
    .gallery h3{font-size:2rem}
    
    .mLink { bottom: 100px; }
}
@media screen and (max-width:780px) {
    .mainIntroduction{margin-top:4rem;height:23rem}
    .mainIntroduction .introMenu{width:50%}
    .mainIntroduction .introMenu li{padding:1rem 0.5rem;height:19rem}
    .mainIntroduction .introMenu li p{font-size:1.1rem}
    .mainIntroduction .introMenu li span{margin-top:0.7rem}
    .mainIntroduction .introMenu li a{margin-top:0.7rem}
    
}
@media screen and (max-width:740px) {
    
    /* 메인비주얼 */
    .cntWrap01{padding-bottom:0;}
    /*
    .main_visual{height:48.9rem}
    .main_visual .visual img.pc{display:none}
    .main_visual .visual img.mo{display:block}
    .main_visual .slogan_wrap{top:12.4%;width:91%;left:50%;transform:translateX(-50%)}
    .main_visual .slogan .txt span{font-size:1.23rem}
    .main_visual .slogan .txt h3{font-size:3.12rem;margin-bottom:2.2rem}
    .main_visual .slogan .txt p{font-size:1.12rem}
    .main_visual .slogan .txt p br{display:none}
    .mLink{width:92%;height: auto;position: relative;left:inherit;bottom:inherit;top:-2rem;transform:none;margin:0 auto;}
    .mLink ul{height: auto;}
    .mLink ul li{width:50%;}
    .mLink ul li:first-child{border-bottom:1px solid #e0e0e0;}
    .mLink ul li:nth-child(2){border-bottom: 1px solid #e0e0e0;border-right:none;}
    .mLink ul li a p img{width:2.5rem;}
    */
    
    .main_visual .slogan .txt .tit { font-size: 1.8rem; }
    .main_visual .slogan .txt .txt01 { font-size: 1rem; }
    
    .main_visual .slogan_wrap .bg01 { background: rgba(255, 255, 255, .5); }
    
    
    /*introduction*/
    .mainIntroduction{height:auto;margin-top:6.6rem;width:100%;padding:0 4.1%}
    .mainIntroduction .textArea{width:100%}
    .mainIntroduction .textArea > span{text-align:center;display:block;font-size:1.45rem}
    .mainIntroduction .textArea h5{text-align:center;font-size:3.15rem;line-height:1.2;}
    .mainIntroduction .textArea h5 span{font-size:3.15rem}
    .mainIntroduction .textArea h5 br{display:none}
    .mainIntroduction .textArea p{text-align:center;font-size:1rem;margin-top:2.35rem}
    .mainIntroduction .introMenu{width:100%;position:static}
    .mainIntroduction .introMenu ul{display:inline-block;width:100%;margin-top:2rem}
    .mainIntroduction .introMenu li{float:none;display:block;height:auto;width:100%;padding:0}
    .mainIntroduction .introMenu li dl{width:100%;text-align:left;padding:2.23rem 2.23rem 2.23rem 3.65rem}
    .mainIntroduction .introMenu li:first-child{margin-bottom:1.15rem}
    .mainIntroduction .introMenu li dt{display:inline-block;width:28%;vertical-align:middle}
    .mainIntroduction .introMenu li dd{display:inline-block;width:calc(100% - 28.7%);vertical-align:middle;padding-left:9.6%}
    .mainIntroduction .introMenu li i{display:inline-block}
    .mainIntroduction .introMenu li i img{width:100%}
    .mainIntroduction .introMenu li p{line-height:1.3;display:inline-block;font-size:1.89rem;margin-top:0}
    .mainIntroduction .introMenu li span{display:inline-block;font-size:1rem}
    .mainIntroduction .introMenu li b{display:none}
    
    /*gallery*/
    .cntWrap02 .contBox{padding: 0 0 6rem 0!important;}
    #contSlide p{display:none}
    #contSlide span.date{display:none}
    .gallery{position:relative;padding:8.55rem 4.1% 0rem}
    .gallery .slideWrap{width:100%;height:20.75rem}
    .gallery .cont_wrap{position:absolute;top:0;left:0;width:100%;text-align:center;padding-top:2.8;float:none}
    .gallery h3 span{font-size:1.45rem}
    #contSlide a.btn_more{font-size:1.35rem;margin-top:0;background:url('/images/web/ncrc_en/main/ico_link_arrow_black_m.png')no-repeat right 16px;background-size:6px}
}

@media screen and (max-width:580px) {
    /*Main Visual*/
    .main_visual{height:35.9rem}
    .main_visual .visual img.mo{width:100%}
    .main_visual .slogan .txt h3{font-size:2rem}
    /*Introduction*/
    .mainIntroduction{height:auto;margin-top:4rem}
    .mainIntroduction div{width:100%;display:block}
    .mainIntroduction .textArea h5 br{display:none}
    .mainIntroduction .textArea p{margin-top:0.4rem}
    .mainIntroduction .textArea p br{display:none}
    .mainIntroduction .textArea > span{font-size:1.25rem}
    .mainIntroduction .textArea h5{font-size:1.5rem}
    .mainIntroduction .textArea h5 span{font-size:1.5rem}
    .mainIntroduction .introMenu li p{font-size:1rem}
    /*Gallery*/
    .gallery .slideWrap{height:15.75rem}
}
@media screen and (max-width:520px) {
    /*Introduction*/
    .mainIntroduction .introMenu li{text-align:center}
    .mainIntroduction .introMenu li dl{padding:1.6rem;text-align:center}
    .mainIntroduction .introMenu li span{display:block}
    .mainIntroduction .introMenu li dt{width:100%}
    .mainIntroduction .introMenu li dd{width:100%;padding-left:0}
}
@media screen and (max-width:420px) {
    /*Main Visual*/
    .main_visual .slogan .txt p{font-size:1.5rem}
    /*Introduction*/
    .mainIntroduction .textArea p{font-size:1.13rem}
    .mainIntroduction .textArea > span{font-size:1.1rem}
    .mainIntroduction .textArea h5{font-size:2.1rem}
    .mainIntroduction .textArea h5 span{font-size:2.1rem}
    .mainIntroduction .introMenu li span{font-size:1.13rem}
    .mainIntroduction .introMenu li p{font-size:1.4rem;margin-top:0.4rem}
    .mainIntroduction .introMenu li i img{width:80%}
    /*Gallery*/
    .gallery{padding:15.35rem 4.1% 4.7rem}
    .gallery h3{font-size:2.5rem}
    .gallery h3 span{font-size:1.35rem}
    .gallery .slideWrap{height:14.5rem}
    .gallery .cont_wrap{padding-top:3.7rem}
}