@charset "UTF-8";

@import url("font.css");

/* ccmmon */
body{font-family:'Noto Sans KR',sans-serif;font-weight:400;font-size:17px;color:#333;line-height:1;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;-ms-text-size-adjust:none;}
body.overflow-h{overflow:hidden;}
a{color:#333;}
.hide{display:block;position:absolute;width:0;height:0;text-indent:-9999999px;overflow:hidden;}
.no-js{opacity:0;}
.pc-hide{display:none !important;}
.no-mg{margin:0 !important;}
.no-pd{padding:0 !important;}
.jwxe_mnu_template{position:relative !important;}

/* layout */
.main-visual-wrap{height:100vh;overflow:hidden;}
.sub-container:after{content:'';display:block;clear:both;}
.sub-visual-wrap{position:fixed;top:0;left:0;width:50%;}
.sub-content-wrap{float:right;padding:100px;width:50%;height:100%;box-sizing:border-box;overflow-y:hidden;}
.history .sub-content-wrap{float:left;padding:180px 0 0;width:50%;height:100vh;}

/* header */
.header-box{position:absolute;top:0;left:0;z-index:30;width:100%;}
.header-top-box:after{content:'';display:block;clear:both;}
.header-top-box h1{position:fixed;top:47px;left:60px;z-index:30;}
.header-top-box h1 a img:nth-of-type(2){display:none;}
.history header.sub-header .header-top-box h1 a img:nth-of-type(1){display:none;}
.history header.sub-header .header-top-box h1 a img:nth-of-type(2){display:block;}
.history .header-box.hd-close .header-top-box h1 a img:nth-of-type(1){display:block;}
.history .header-box.hd-close .header-top-box h1 a img:nth-of-type(2){display:none;}
.header-top-box .btn-menu{position:fixed;top:60px;right:60px;z-index:30;width:46px;height:46px;border:1px solid rgba(255,255,255,0.5);padding:11px 0;text-align:center;box-sizing:border-box;}
.header-top-box .btn-menu span{display:inline-block;width:30px;height:23px;background:url(/_res/cg50/img/common/btn-menu.png) no-repeat 0 0/100%;text-indent:-999999px;}
.header-top-box .btn-menu.over span{background-image:url(/_res/cg50/img/common/btn-menu-over.png);}
.header-top-box .btn-menu.hd-close span{width:22px;background-image:url(/_res/cg50/img/common/btn-menu-close.png);}
header.sub-header .header-top-box .btn-menu{border:1px solid #cf264b;}
header.sub-header .header-top-box .btn-menu.hd-close{border-color:#fff;background-color:transparent;}
header.sub-header .header-top-box .btn-menu span{background:url(/_res/cg50/img/common/btn-sub-menu.png) no-repeat 0 0/100%;}
header.sub-header .header-top-box .btn-menu.hd-close span{width:22px;background-image:url(/_res/cg50/img/common/btn-menu-close.png);}
.header-bottom-box{display:none;position:fixed;top:0;left:0;z-index:20;width:100%;height:100vh;background:linear-gradient(46deg, #3e6fbb, #1b2a92);background-size:600% 600%;animation:nav_bg_animation 5s ease infinite;-webkit-animation:nav_bg_animation 5s ease infinite;-moz-animation:nav_bg_animation 5s ease infinite;align-items:center;justify-content:center;}
.header-box.hd-close .header-bottom-box{display:block;}
.header-bottom-box > div{position:absolute;top:115px;left:33.33333%;z-index:30;}
.header-bottom-box > div .gnb .gnb-ul li{padding:0 0 40px 0;}
.header-bottom-box > div .gnb .gnb-ul li a{display:inline-block;position:relative;padding:0 0 12px 0;font-weight:700;font-size:40px;color:#fff;}
.header-bottom-box > div .gnb .gnb-ul li a:hover:after{content:'';position:absolute;bottom:0;left:0;width:100%;height:3px;background-color:#fff;}
.header-bottom-box > div .gnb > a{display:inline-block;margin:0 0 60px 0;position:relative;padding:0 0 12px 0;font-weight:700;font-size:40px;color:#fff;}
.header-bottom-box > div .gnb > a:hover:after{content:'';position:absolute;bottom:0;left:0;width:100%;height:3px;background-color:#fff;}
.header-bottom-box > div .gnb > p{position:relative;padding:65px 0 0 0;}
.header-bottom-box > div .gnb > p:before{content:'';position:absolute;top:0;left:0;width:57px;height:3px;background-color:#fff;}
.header-bottom-box > div .gnb > p > a{display:inline-block;position:relative;font-family:'Noto Sans KR',sans-serif;font-weight:700;font-size:40px;color:#fff;}
.header-bottom-box > div .gnb > p > a:hover:after{content:'';position:absolute;bottom:0;left:0;width:100%;height:3px;background-color:#fff;}
.header-bottom-box > div .copyright{padding:160px 0 0 0;font-family:'Noto Sans KR',sans-serif;font-size:14px;color:rgba(255,255,255,0.5);line-height:24px;}
.header-bottom-box .bar-box{position:absolute;top:0;left:0;z-index:20;width:100%;height:100vh;}
.header-bottom-box .bar-box span{float:left;width:calc(100% / 6);height:100vh;border-right:1px solid rgba(255,255,255,0.2);text-indent:-999999px;}
.header-bottom-box .bar-box span:last-of-type{margin:0 -5px 0 0;border-right:none;}

@keyframes nav_bg_animation {
  0%{background-position:97% 0%}
  50%{background-position:4% 100%}
  100%{background-position:97% 0%}
}
@-webkit-keyframes nav_bg_animation{
  0%{background-position:97% 0%}
  50%{background-position:4% 100%}
  100%{background-position:97% 0%}
}
@-moz-keyframes nav_bg_animation {
  0%{background-position:97% 0%}
  50%{background-position:4% 100%}
  100%{background-position:97% 0%}
}


/* 메인 비주얼 */
.main-visual-box{position:relative;width:100%;height:100vh;}
.main-visual-box > div{height:100vh;}
.main-visual-box .main-visual-con-box .main-visual-content{display:none;position:absolute;top:0;left:0;width:100%;height:100vh;}
.main-visual-box .main-visual-con-box .main-visual-content.active{display:block;}
.main-visual-box .main-visual-con-box .main-visual-content.visual00{background:url(/_res/cg50/img/main/img-main-visual00.gif) no-repeat 0 0/cover;}
.main-visual-box .main-visual-con-box .main-visual-content.visual01{background:url(/_res/cg50/img/main/img-main-visual01.gif) no-repeat 0 0/cover;}
.main-visual-box .main-visual-con-box .main-visual-content.visual02{background:url(/_res/cg50/img/main/img-main-visual02.gif) no-repeat 0 0/cover;}
.main-visual-box .main-visual-con-box .main-visual-content.visual03{background:url(/_res/cg50/img/main/img-main-visual03.gif) no-repeat 0 0/cover;}
.main-visual-box .main-visual-con-box .main-visual-content.visual04{background:url(/_res/cg50/img/main/img-main-visual04.gif) no-repeat 0 0/cover;}
.main-visual-box .main-visual-con-box .main-visual-content.visual05{background:url(/_res/cg50/img/main/img-main-visual05.gif) no-repeat 0 0/cover;}
.main-visual-box .main-visual-con-box .main-visual-content.visual06{background:url(/_res/cg50/img/main/img-main-visual06.gif) no-repeat 0 0/cover;}
.main-visual-box .main-visual-con-box .main-visual-content .main-visual-txt-box{position:absolute;top:50%;left:50%;z-index:10;text-align:center;transform:translate(-50%, -50%);transform:translate(-50%, -50%);}
.main-visual-box .main-visual-con-box .main-visual-content.visual00 .main-visual-txt-box:before{content:'50';position:absolute;top:32%;left:50%;z-index:-10;font-weight:700;font-size:530px;color:rgba(255,255,255,0.05);transform:translate(-50%, -50%);transform:translate(-50%, -50%);}
.main-visual-box .main-visual-con-box .main-visual-content .main-visual-txt-box > p{padding:0 0 50px 0;font-weight:700;font-family:'Roboto',sans-serif;font-size:70px;color:#fff;line-height:75px;}
.main-visual-box .main-visual-con-box .main-visual-content .main-visual-txt-box > p:before{content:'';display:block;margin:0 auto 40px;width:43px;height:45px;}
.main-visual-box .main-visual-con-box .main-visual-content.visual00 .main-visual-txt-box > p:before{display:none;}
.main-visual-box .main-visual-con-box .main-visual-content.visual01 .main-visual-txt-box > p:before{background:url(/_res/cg50/img/main/ico-main-menu01.png) no-repeat 0 0/100%;}
.main-visual-box .main-visual-con-box .main-visual-content.visual02 .main-visual-txt-box > p:before{background:url(/_res/cg50/img/main/ico-main-menu02.png) no-repeat 0 0/100%;}
.main-visual-box .main-visual-con-box .main-visual-content.visual03 .main-visual-txt-box > p:before{background:url(/_res/cg50/img/main/ico-main-menu03.png) no-repeat 0 0/100%;}
.main-visual-box .main-visual-con-box .main-visual-content.visual04 .main-visual-txt-box > p:before{background:url(/_res/cg50/img/main/ico-main-menu04.png) no-repeat 0 0/100%;}
.main-visual-box .main-visual-con-box .main-visual-content.visual05 .main-visual-txt-box > p:before{background:url(/_res/cg50/img/main/ico-main-menu05.png) no-repeat 0 0/100%;}
.main-visual-box .main-visual-con-box .main-visual-content.visual06 .main-visual-txt-box > p:before{background:url(/_res/cg50/img/main/ico-main-menu06.png) no-repeat 0 0/100%;}
.main-visual-box .main-visual-con-box .main-visual-content .main-visual-txt-box > span{display:block;font-size:22px;color:#fff;line-height:32px;}
.main-visual-box .main-visual-con-box .main-visual-content .main-visual-txt-box .view-more{display:inline-block;margin:45px 0 0 0;padding:5px 29px 4px;border:1px solid #fff;font-family:'Roboto',sans-serif;font-weight:700;font-size:45px;line-height:55px;;font-size:16px;color:#fff;line-height:26px;}
.main-visual-box .main-visual-con-box .main-visual-content .main-visual-txt-box .view-more:hover{background-color:#fff;font-weight:500;color:#000;}

.main-visual-box .main-control-box{position:absolute;top:0;left:0;width:100%;height:100vh;}
.main-visual-box .main-control-box ul{width:100%;height:100vh;}
.main-visual-box .main-control-box ul:after{content:'';display:block;clear:both;}
.main-visual-box .main-control-box ul li{position:relative;float:left;width:calc(100% / 6);height:100vh;border-right:1px solid rgba(255,255,255,0.2);border-bottom:8px solid rgba(255,255,255,0.2);text-align:center;box-sizing:border-box;}
.main-visual-box .main-control-box ul li:last-of-type{margin:0 -1px 0 0;border-right:none;}
.main-visual-box .main-control-box ul li.active{border-bottom:8px solid #fff;}
.main-visual-box .main-control-box ul li:after{content:'';position:absolute;bottom:0;left:0;z-index:20;width:calc(100% + 1px);height:0;background:#001732;transition:all 1s ease 0s;}
.main-visual-box .main-control-box ul li.load:after{height:100%;transition:none;}
.main-visual-box .main-control-box ul li a{display:inline-block;position:absolute;bottom:35px;left:50%;z-index:20;transform:translateX(-50%);-ms-transform:translateX(-50%);}
.main-visual-box .main-control-box ul li a span{display:inline-block;position:relative;font-size:20px;color:rgba(255,255,255,0.5);line-height:30px;}
.main-visual-box .main-control-box ul li.active a span{color:#fff;}
.main-visual-box .main-control-box ul li a span:before{content:'';display:block;margin:0 auto 30px;width:86px;height:86px;background-color:rgba(255,255,255,0.2);background-repeat:no-repeat;background-position:50% 50%;background-size:43px 45px;border-radius:50%;}
.main-visual-box .main-control-box ul li.active a span:before{background-color:#000;}
.main-visual-box .main-control-box ul li:nth-of-type(1) a span:before{background-image:url(/_res/cg50/img/main/ico-main-menu01.png);}
.main-visual-box .main-control-box ul li:nth-of-type(2) a span:before{background-image:url(/_res/cg50/img/main/ico-main-menu02.png);}
.main-visual-box .main-control-box ul li:nth-of-type(3) a span:before{background-image:url(/_res/cg50/img/main/ico-main-menu03.png);}
.main-visual-box .main-control-box ul li:nth-of-type(4) a span:before{background-image:url(/_res/cg50/img/main/ico-main-menu04.png);}
.main-visual-box .main-control-box ul li:nth-of-type(5) a span:before{background-image:url(/_res/cg50/img/main/ico-main-menu05.png);}
.main-visual-box .main-control-box ul li:nth-of-type(6) a span:before{background-image:url(/_res/cg50/img/main/ico-main-menu06.png);}

/* 메인 - 50주년 기념식 */
.main-video-box{position:fixed;top:0;left:0;z-index:20;width:100%;height:100%;background-color:rgba(0,0,0,0.8);}
.main-video-box.active{display:block;}
.main-video-box > div{position:absolute;top:50%;left:50%;width:60%;max-width:950px;transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);}
.main-video-box > div .main-video-pop-box{height:500px;}
.main-video-box > div .main-video-pop-box iframe{width:100%;height:100%;border:none;}
.main-video-box > div .btn-pop-close{position:absolute;top:-100px;left:50%;width:46px;height:46px;border:1px solid rgba(255,255,255,0.5);background:url(/_res/cg50/img/common/btn-menu-close.png) no-repeat 50% 50%;box-sizing:border-box;transform:translateX(-50%);-ms-transform:translateX(-50%);}
.main-video-box > div .btn-pop-close span{display:inline-block;text-indent:-9999999px;}

/* 서브비주얼 */
.sub-visual-box{display:table;padding:60px 100px;width:100%;height:100vh;table-layout:fixed;box-sizing:border-box;}
.sub-visual-box > div{display:none;vertical-align:bottom;}
.gallery .sub-visual-box{background:url(/_res/cg50/img/common/bg-sub-gallery-visual.gif) no-repeat 50% 0/cover;}
.gallery .sub-visual-box > div.gallery{display:table-cell;}
.ucc .sub-visual-box{background:url(/_res/cg50/img/common/bg-sub-ucc-visual.gif) no-repeat 50% 0/cover;}
.ucc .sub-visual-box > div.ucc{display:table-cell;}
.print .sub-visual-box{background:url(/_res/cg50/img/common/bg-sub-print-visual.gif) no-repeat 50% 0/cover;}
.print .sub-visual-box > div.print{display:table-cell;}
.sub-visual-box > div .mini-title{padding:0 0 20px 0;font-weight:500;font-size:45px;color:#fff;}
.sub-visual-box > div .mini-caption{font-size:22px;color:#fff;line-height:32px;}

/* 타이틀 */
.page-title h2{padding:0 0 5px 0;font-family:'Roboto',sans-serif;font-weight:700;font-size:45px;line-height:55px;text-transform:uppercase;}
.page-title .caption-p{font-weight:400;font-size:18px;line-height:32px;letter-spacing:-0.5px;}

/* history */
.history .scrollert{height:calc(100vh - 250px);}
.history-box{padding:0 100px;box-sizing:border-box;}
.history-box .history-title-box > p{position:relative;padding:0 0 75px 0;font-size:18px;line-height:32px;}
.history-box .history-title-box > p:after{content:'';position:absolute;top:-30px;right:0;width:calc(100% - 200px);height:3px;background-color:#cf264b;}
.history-box .history-title-box > p span{color:#cf264b;}

.history-box .scrollert .scrollert-scrollbar{display:none;}
.history-box .history-con-box > div > div .year-box > p{padding:0 0 15px 0;font-weight:700;font-size:28px;color:#1652da;line-height:40px;}
.history-box .history-con-box > div > div .year-box > dl{padding:0 0 40px 0;}
.history-box .history-con-box > div > div .year-box > dl > dt{display:inline-block;margin:0 -4px 0 0;min-width:35px;padding:0 30px 0 0;font-size:18px;line-height:32px;vertical-align:top;}
.history-box .history-con-box > div > div .year-box > dl > dd{display:inline-block;width:calc(100% - 67px);vertical-align:top;}
.history-box .history-con-box > div > div .year-box > dl > dd > p{font-size:18px;line-height:32px;vertical-align:top;}
.history-box .history-con-box > div > div .year-box > dl > dd > p span{font-size:14px;color:#767676;}
.history-box .history-con-box > div > div .year-box > dl > dd > ul li{position:relative;padding:0 0 0 10px;font-size:16px;color:#767676;line-height:32px;}
.history-box .history-con-box > div > div .year-box > dl > dd > ul li:before{content:'';position:absolute;top:15px;left:0;width:2px;height:2px;background-color:#767676;}
.history-box .history-con-box .btn-scroll{position:fixed;bottom:0;right:50%;width:74px;height:74px;background-color:#cf264b;}
.history-box .history-con-box .btn-scroll span{display:block;height:100%;background:url(/_res/cg50/img/history/bg-history-scroll-down.png) no-repeat 50% 50%;text-indent:-999999px;}
.history-box .history-con-box .btn-scroll.scroll-up span{background-image:url(/_res/cg50/img/history/bg-history-scroll-up.png);}

.history-box .history-visual-box{position:fixed;top:0;right:0;width:50%;height:100vh;}
.history-box .history-visual-box .history-visual-img-box{width:100%;height:100%;}
.history-box .history-visual-box .history-visual-img-box > div{height:100%;text-indent:-999999px;}
.history-box .history-visual-box .history-visual-img-box > .his-1960{background:url(/_res/cg50/img/history/img-history-1960.gif) no-repeat 0 0/cover;}
.history-box .history-visual-box .history-visual-img-box > .his-1970{background:url(/_res/cg50/img/history/img-history-1970.gif) no-repeat 0 0/cover;}
.history-box .history-visual-box .history-visual-img-box > .his-1980{background:url(/_res/cg50/img/history/img-history-1980.gif) no-repeat 0 0/cover;}
.history-box .history-visual-box .history-visual-img-box > .his-1990{background:url(/_res/cg50/img/history/img-history-1990.gif) no-repeat 0 0/cover;}
.history-box .history-visual-box .history-visual-img-box > .his-2000{background:url(/_res/cg50/img/history/img-history-2000.gif) no-repeat 0 0/cover;}
.history-box .history-visual-box .history-visual-img-box > .his-2010{background:url(/_res/cg50/img/history/img-history-2010.gif) no-repeat 0 0/cover;}
.history-box .history-visual-box .history-visual-img-box img{width:100%;height:100%;object-fit:cover;}
.history-box .history-visual-box > p{position:absolute;top:50%;left:50%;font-weight:700;font-size:200px;color:#fff;transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);}
.history-box .history-visual-box .history-visual-tab-box{position:absolute;bottom:95px;padding:0 95px;width:100%;box-sizing:border-box;}
.history-box .history-visual-box .history-visual-tab-box > ul{width:100%}
.history-box .history-visual-box .history-visual-tab-box > ul:after{content:'';display:block;clear:both;}
.history-box .history-visual-box .history-visual-tab-box > ul li{float:left;width:16.666666%;text-align:center;}
.history-box .history-visual-box .history-visual-tab-box > ul li a{display:block;padding:0 0 15px 0;border-bottom:4px solid #fff;font-size:20px;color:#fff;letter-spacing:-0.25px;}
.history-box .history-visual-box .history-visual-tab-box > ul li.active a{border-color:#ff7912;}