@charset "utf-8";

/* #body_layout,footer,header{ position:relative;width:100%;margin:0 auto;overflow:hidden } */
#header{ position: relative; width:1280px; margin:0 auto;}
.gnb{ position: absolute; top:0; z-index:9; width:1280px; height: 110px; background-color: transparent; background:url(../images/header.png) no-repeat; background-size:contain; }
.gnb2{ opacity: 0; position: fixed; top:0; z-index:11; width:1280px; height: 110px; background-image:url(../images/header_on.png); background-repeat:no-repeat; background-size:contain; background-color:#234d62;}
.gnb2:before{ position:absolute; top:0; left:-1000px; content:""; display: inline-block; width:1000px; height: 110px; background-color:#234d62;}
.gnb2:after{ position:absolute; top:0; right:-1000px; content:""; display: inline-block; width:1000px; height: 110px; background-color:#234d62;}
#radioWrap{ position:fixed; z-index:10; top: 50%; margin-top:-65px; right:0; text-align: right;}
#radioWrap.cont2 li a:after,
#radioWrap.cont5 li a:after{background-color:#727272}
#radioWrap li{ position: relative; margin-bottom:15px; overflow: hidden;}
#radioWrap li a{ display: block; height:25px; padding-right: 65px; font-size: 0.8rem; line-height:1; color:#f2a66a;}
#radioWrap li a span{ opacity:0; display: block; margin-right:-10px; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s;}
#radioWrap li.on a span{ opacity:1; margin-right:-0;}
#radioWrap li a:after{ position:absolute; top:12px; right:32px; content:""; display: inline-block; width: 18px; height:1px; background-color:#fff; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s;}
#radioWrap li.on a:after{ right:0; width:50px; background-color:#f2a66a;}


.layout{ position: relative; width:1280px; margin:0 auto; }
.op-section{ position: relative; overflow: hidden; display:table; width:100%;}
.op-section .cont-tit{ display: block; text-align: center;}
#cont1{ background:url(../images/cont1_bg.jpg) 50% 50% no-repeat; background-size:cover;}
#cont2{ background:url(../images/cont2_bg.jpg) 50% 50% no-repeat; background-size:cover;}
#cont3{ background:url(../images/cont3_bg.jpg) 50% 50% no-repeat; background-size:cover;}
#cont4{ background:url(../images/cont4_bg.jpg) 50% 50% no-repeat; background-size:cover;}
#cont5{ background:url(../images/cont5_bg.jpg) 50% 50% no-repeat; background-size:cover;}

#cont1 .mo{ display: none;}
#cont1 .anniv{ display: inline-block; width:589px; height: 370px; background:url(../images/cont1_img.png) no-repeat; font-size:0; text-indent:-9999px;}
#cont1 .layout{ display: table; height:100%;padding-bottom:250px;}
#cont1 .layout .center{ display:table-cell; vertical-align: middle;}
#cont1 ul{ position:absolute; top:50%; margin-top:-200px; right:0; width:490px;}
#cont1 ul li{ float: left; width:142px; height: 142px; text-align: center; margin-left: 30px; margin-bottom:30px;}
#cont1 ul li:first-child{ margin-left:0;}
#cont1 ul li a{ display:table; width:100%; height:100%; border-radius:50%; background-color:transparent; border:1px solid #aca5a5; background-color:#fff;transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s;}
#cont1 ul li a:hover span,
#cont1 ul li a:focus span{color:#ff7800; font-weight: 500;}
#cont1 ul li a span{ display: table-cell; vertical-align: middle; line-height: 1.3; color:#000; font-weight: 400;}
#cont1 .more{ position: absolute; left: 50%; margin-left: -150px; bottom: 50%; margin-bottom: -300px;display: block; width:313px; height:65px; line-height: 65px; background:url(../images/btn_gradient.png) repeat-y; border-radius: 65px; color:#fff; font-size: 0.75rem; letter-spacing: 0; text-align: center;}

#cont2 .table-cell{ display: table-cell;vertical-align: middle;}
#cont2 .table-cell:after{ position:absolute; top:110px; right:0; content:""; display: inline-block; width:350px; height:100%; background:url(../images/cont3_bg_after.png) no-repeat; background-size: cover;}
#cont2 .cont-tit{ position:absolute; top: 0; left:0; display:block; width:100%;}
#cont2 .history{ position:relative; width: 100%; padding-top:150px;}
#cont2 .history:before{ position: absolute; top:326px; left:0; content:""; display: inline-block; width:2000px; height: 48px; background:url(../images/history_bar.png) no-repeat;background-size: cover;}
#cont2 .history .history_slide{ position:relative; width:100%;}
#cont2 .history .history_slide .grap{ position:relative; width:200%; height:430px; overflow: hidden}
#cont2 .history .history_slide .grap .obj{ position:relative; width:100%; height:100%;}
#cont2 .history .history_slide .item{ position:relative; float:left; width:50%; height:100%; }
#cont2 .history .history_slide .item ul li{ position: absolute; padding-left: 18px;}
#cont2 .history .history_slide .item ul li.year1{ top:49px; left:0;}
#cont2 .history .history_slide .item ul li.year2{ top:177px; left:180px; padding-top:122px;}
#cont2 .history .history_slide .item ul li.year3{ top:49px; left:374px;}
#cont2 .history .history_slide .item ul li.year4{ top:177px; left:584px; padding-top:122px;}
#cont2 .history .history_slide .item ul li.year5{ top:49px; left:905px;}
#cont2 .history .history_slide .item ul li.year6{ top:177px; left:1036px; padding-top:122px;}
#cont2 .history .history_slide .item ul li:before{ position:absolute; top: 0; left:0; content:""; display: inline-block; width:1px; height: 175px; background-color:#b0bcbe;}
#cont2 .history .history_slide .item ul li:after{ content:"1988"; position:absolute; top: 6px; left:15px; font-family: 'ttl'; font-size: 1rem; color:#aabac0;}
#cont2 .history .history_slide .item ul li.year1:after{ top:134px;}
#cont2 .history .history_slide .item ul li.year3:after{ top:134px;}
#cont2 .history .history_slide .item ul li.year5:after{ top:134px;}
#cont2 .history .history_slide .item.item1 ul li.year2:after{ content:"1989";}
#cont2 .history .history_slide .item.item1 ul li.year3:after{ content:"1990";}
#cont2 .history .history_slide .item.item1 ul li.year4:after{ content:"1991";}
#cont2 .history .history_slide .item.item1 ul li.year5:after{ content:"1998";}
#cont2 .history .history_slide .item.item1 ul li.year6:after{ content:"1999";}
#cont2 .history .history_slide .item.item2 ul li.year1:after{ content:"2003";}
#cont2 .history .history_slide .item.item2 ul li.year2:after{ content:"2004";}
#cont2 .history .history_slide .item.item2 ul li.year3:after{ content:"2005";}
#cont2 .history .history_slide .item.item2 ul li.year4:after{ content:"2009";}
#cont2 .history .history_slide .item.item2 ul li.year5:after{ content:"2010";}
#cont2 .history .history_slide .item.item2 ul li.year6:after{ content:"2011";}
#cont2 .history .history_slide .item.item3 ul li.year1:after{ content:"2012";}
#cont2 .history .history_slide .item.item3 ul li.year2:after{ content:"2013";}
#cont2 .history .history_slide .item.item3 ul li.year3:after{ content:"2014";}
#cont2 .history .history_slide .item.item3 ul li.year4:after{ content:"2015";}
#cont2 .history .history_slide .item.item3 ul li.year5:after{ content:"2016";}
#cont2 .history .history_slide .item.item3 ul li.year6:after{ content:"2017";}
#cont2 .history .history_slide .item.item4 ul li.year1:after{ content:"2018";}
#cont2 .history .history_slide .item ul li p{ position: relative; padding-left: 57px;margin-bottom:10px; font-size:0.8rem; letter-spacing: -1px; font-weight: 400; color:#555; line-height: 1.5;}
#cont2 .history .history_slide .item ul li p b{ position:absolute; top:-3px; left:0; display: inline-block; font-size: 1rem; color:#224c60; font-family: 'ttl'}
#cont2 .history .control{ position: absolute; top:-145px; right:0; z-index:10;}
#cont2 .history .control button{ display: inline-block; width:45px; height: 46px; background:url(../images/btn_type1.png) no-repeat; vertical-align: middle; margin-left: 5px; font-size: 0;}
#cont2 .history .control button.btn_next{ background-position: -51px 0;}
#cont3 .cont-tit{ margin-bottom: 50px;}
#cont3 .table-cell{ display: table-cell;vertical-align: middle;}
#cont3 #touchSlider2{ position: relative; width:100%; padding-top:140px;}
/* paging 기능 추가시
#cont3 #touchSlider2:before{position:relative; top:-60px; left:0; content:""; display:block; width:100%; height:1px; background-color:#3a535f;} 
#cont3 .sliderBox,
#cont3 .sliderBox > ul,
#cont3 .sliderBox > ul > li{ width:100%; height:100%; padding:0; margin:0; display:inline-block;}
#cont3 .sliderBox{ overflow:hidden;}
#cont3 .sliderBox > ul{ position:relative;}
#cont3 .sliderBox > ul > li{ position:absolute; top:0; left:0; height:440px; display:inline-block;}
#cont3 .sliderBox > ul > li .imgwrap{ height: 100%;}
#cont3 .sliderBox > ul > li .imgwrap .thumb{ display: block; width: 200%; height:100%; margin-left: -50%; text-align: center;}
#cont3 .sliderBox > ul > li .imgwrap .thumb img{ width:auto; height: 100%; max-width: none;}
#cont3 .sliderBox > ul > li .imgwrap .leftbox{ float: left; width:60%; height: 100%; margin-right: 2%; overflow: hidden;}
#cont3 .sliderBox > ul > li .imgwrap .rightbox{ float: left; display:block; width: 38%; height: 100%;}
#cont3 .sliderBox > ul > li .imgwrap .rightbox li{ display: block; width:100%; height: 210px; overflow: hidden;}
#cont3 .sliderBox > ul > li .imgwrap .rightbox li:first-child{ margin-bottom:20px;}
#cont3 .sliderBox > ul > li .imgwrap img{ width:100%;}
#cont3 .sliderBox > ul > li .imgwrap .rightbox li img{ margin-top:-10%;}
#cont3 .sliderBox > ul > li .ptit{display: none;}
#cont3 .btn_area .paging{ position: absolute; top:0; left:0; width:108%; margin-left:-4%; display:none;}
#cont3 .btn_area .paging button{ position:relative; float:left; width:16.66%; display: block; vertical-align: middle; text-align:center; background-color:transparent; padding-bottom:30px; color:#dadddf; font-size: 0.8rem; letter-spacing: -1px; font-weight: bold;}
#cont3 .btn_area .paging button:after{ opacity:0; display: inline-block; position:absolute; bottom:0; left:50%; margin-left:-60px; content:""; width:125px; height:3px; background-color:#fff; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s;}
#cont3 .btn_area .paging button.on{ color:#fff;}
#cont3 .btn_area .paging button.on:after{ opacity:1;}
#cont3 .btn_area .paging button span{ display: block; font-family: 'ttl'; font-size:0.85; color:#529faa; margin-bottom: 10px; letter-spacing: 0; font-weight: normal;}
#cont3 .btn_area > button{ position: absolute; top:50%; width:85px; height: 88px; background:url(../images/btn_type2.png) no-repeat; vertical-align: middle; font-size: 0;}
#cont3 .btn_area > button.btn_prev{ left:-110px;}
#cont3 .btn_area > button.btn_next{ right:-110px; background-position: -98px 0;}
paging 기능 추가시 */

/* paging 기능 없을때 */
#cont3 .grap{ position:relative; width:100%; height: 440px; overflow:hidden; }
#cont3 .grap > ul{ width:200%; height: 100%;;}
#cont3 .grap > ul > li{ width:50%; height:100%; display:inline-block;}
#cont3 .grap > ul{ position:relative;}
#cont3 .grap > ul > li{ float: left;}
#cont3 .grap > ul > li .imgwrap{ height: 100%;}
#cont3 .grap > ul > li .imgwrap .thumb{ display: block; width: 200%; height:100%; margin-left: -50%; text-align: center;}
#cont3 .grap > ul > li .imgwrap .thumb img{ width:auto; height: 100%; max-width: none;}
#cont3 .grap > ul > li .imgwrap .leftbox{ float: left; width:60%; height: 100%; margin-right: 2%; overflow: hidden;}
#cont3 .grap > ul > li .imgwrap .rightbox{ float: left; display:block; width: 38%; height: 100%;}
#cont3 .grap > ul > li .imgwrap .rightbox li{ display: block; width:100%; height: 210px; overflow: hidden;}
#cont3 .grap > ul > li .imgwrap .rightbox li:first-child{ margin-bottom:20px;}
#cont3 .grap > ul > li .imgwrap img{ width:100%;}
#cont3 .grap > ul > li .imgwrap .rightbox li img{ margin-top:-10%;}
#cont3 .grap > ul > li .ptit{display: none;}
#cont3 .control > button{ position: absolute; top:50%; width:85px; height: 88px; background:url(../images/btn_type2.png) no-repeat; vertical-align: middle; font-size: 0;}
#cont3 .control > button.btn_prev{ left:-110px;}
#cont3 .control > button.btn_next{ right:-110px; background-position: -98px 0;}

#cont4 .table-cell{ display: table-cell;vertical-align: middle;}
#cont4 .grap{ position: relative; width:100%; height:515px; display:inline-block; box-sizing:content-box; overflow: hidden; padding-top:55px;}
#cont4 .grap .obj{ position: relative; width:200%; height:100%; display:inline-block; box-sizing:content-box; overflow: hidden;}
#cont4 .grap .obj .item{ float: left; width:16%; margin-left:1%; height:100%;}
#cont4 .grap .obj .item:first-child{ margin-left:0;}
#cont4 .control > button{ position: absolute; top:50%; width:85px; height: 88px; background:url(../images/btn_type3.png) no-repeat; vertical-align: middle; font-size: 0;}
#cont4 .control > button.btn_prev{ left:-110px;}
#cont4 .control > button.btn_next{ right:-110px; background-position: -109px 0;}

#cont5 .cont-tit{ margin-bottom: 70px;}
#cont5 .table-cell{ display: table-cell;vertical-align: middle;}
#cont5 .layout{ text-align: center;}
#cont5 .layout .grap{ position: relative; width: 100%; height: 385px; overflow: hidden;}
#cont5 .layout .grap > ul{ position: relative; width: 100%; display: inline-block; height: 100%;}

/*  1개 이상일때  */
#cont5 .layout .grap > ul > li{ position:relative; float: left; width:305px; height:385px; margin-left:20px; overflow: hidden; margin-bottom: 20px; border:1px solid #ccc; }
#cont5 .layout .grap > ul > li:first-child{ margin-left: 0}   
/* 1개 이상일때   */

/* 1개 일때 */
/* 
#cont5 .layout .grap > ul > li{ position: relative; width:305px; height:385px;}
#cont5 .layout .grap > ul > li:first-child{ margin: 0 auto;}  
*/
/* 1개 일때 */

#cont5 .layout .grap > ul > li img{ width: 100%;}
#cont5 .layout .grap > ul > li .ov_txt{ opacity:0; display:block; position: absolute; top:0; left:0; width:100%; height:100%; background-color:transparent; text-align: center; color:#fff; word-break:keep-all;padding-top:80px; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s;}
#cont5 .layout .grap > ul > li .ov_txt b{ display: block; font-size:1rem; margin-bottom: 30px; font-weight:normal;}
#cont5 .layout .grap > ul > li .inner{ display:inline-block; margin:0 auto;}
#cont5 .layout .grap > ul > li .inner li{ display:block; width:135px; height:40px; border:1px solid rgba(255,255,255,0.7); border-radius: 40px; margin-bottom: 20px; overflow: hidden}
#cont5 .layout .grap > ul > li .inner li a{display: block; width:100%; height: 100%; line-height: 40px; text-align: center; font-size:0.75rem; color:#fff; letter-spacing: -1px; font-weight: normal; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s;}
#cont5 .layout .grap > ul > li .inner li a:hover{ background-color:rgba(255,255,255,0.7);}
#cont5 .layout .grap > ul > li:hover .ov_txt{ opacity: 1; background-color:rgba(0,0,0,0.65);}

#cont5 .layout .grap > ul > li .lowtimes{ height:100%; background-color:#fff; padding:60px 0;}
#cont5 .layout .grap > ul > li .lowtimes > strong{ position:relative; font-size: 30px; font-weight: 500; display: block; margin-bottom: 50px;}
#cont5 .layout .grap > ul > li .lowtimes > strong:after{ position:absolute; top:70px; left:50%; margin-left:-20px; content:""; display: block; width: 30px; height: 1px; background-color:#333;}
#cont5 .layout .grap > ul > li .lowtimes > p{ font-size: 20px; margin-bottom:40px;}

#cont5 .control > button{ position: absolute; top:50%; width:85px; height: 88px; background: #bbb url(../images/btn_type3.png) no-repeat; vertical-align: middle; font-size: 0; border-radius: 50%;}
#cont5 .control > button.btn_prev{ left:-110px;}
#cont5 .control > button.btn_next{ right:-110px; background-position: -109px 0;}


#footer{ position: absolute;bottom:-100%;left:0;width:100%; margin:0 auto; text-align: center;background-color:#07161d;  transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s;}
#footer.on{ bottom:0;}
#footer img{margin:0 auto;}

@media (max-width: 1279px){
    #header,
    .layout,
    .gnb,
    .gnb2,
    body,
    html,
    #view{ width:100%;}
    #cont2,
    .op-section{ position: relative;}
    .op-section{padding:50px 0; overflow: hidden;}
    #cont1{padding:0;}
    #view{ overflow: auto;}
    #radioWrap{ display: none;}
    #cont1 .pc{ display: none;}
    #cont1 .mo{ display: inline-block;}
    #cont1 .layout{padding: 136px 0 250px 0;}
    #cont1 ul{margin-top:-200px;}
    #cont1 .more{margin-bottom:-200px;}
    #cont3 .sliderBox > ul > li .imgwrap img{ width:auto; height: 100%;;}
    #cont3 .sliderBox > ul > li .imgwrap .rightbox li img{ width:100%; height: auto; margin-top:0;}
    #frame{overflow: hidden;}
}


@media (max-height: 1000px){
    #cont1 .layout{padding-bottom:100px;}
    #cont1 ul{margin-top:-200px;}
    #cont1 .more{margin-bottom:-200px;}
}