@charset "utf-8";


/* reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small,
strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form,
label, legend, table, caption, tbody, tfoot, thead, tr, th, td, input, textarea, button,
article, aside, canvas, details, embed, figure, figcaption, footer, header, menu,
nav, output, ruby, section, summary, time, mark, audio, video
{ margin:0;padding:0;border:0;}
article, aside, details, figcaption, figure, footer, header, menu, nav, section { display: block;}
html {height:auto;-webkit-text-size-adjust: none;-moz-text-size-adjust: none;-ms-text-size-adjust: none; }
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: '';content:none;}
table {border-collapse:collapse;border-spacing:0;}
a {text-decoration:none;color:inherit;}
a:hover {text-decoration:none;}
legend, caption, hr {display:none;}
em {font-style:normal;}
img {vertical-align:top;max-width: 100%;}
input {vertical-align:middle;}
p,h3,h2,h1{letter-spacing: normal;}
input,textarea,button,select{ font-family: sans-serif;-webkit-appearance: none;border-radius: 0;border: 0;background: none;width: 100%;height: 100%;}
section{width:100%;text-align: center;}
body{ font-family:Microsoft YaHei;width: 100%;height: 100%;min-width:1200px !important; color:#333333;background-color: #ffffff;margin: 0 auto;word-break: break-all;}
button{cursor: pointer}
button,select{ font-family:Microsoft YaHei;-webkit-appearance: none;-moz-appearance: none; appearance: none;border: 0;background: transparent;}
video{object-fit: cover;}
ol, ul,li { list-style: none; }
h1,h2,h3,h4,h5{font-weight: normal}
h2{font-family:Microsoft YaHei; font-weight: normal;}
.cj_title_bold{font-family:Microsoft YaHei;}
.cj_title_medium{font-family:Microsoft YaHei;}
.cj_title_regular{font-family:Microsoft YaHei;}
.cj_title_light{font-family:Microsoft YaHei;}
.fclear{*zoom:1}
.fclear:after{display:block;content:"";clear:both;}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    font-family:Microsoft YaHei;color:#939393;
}
::-moz-placeholder { /* Firefox 19+ */
    font-family:Microsoft YaHei;color:#939393;
}
:-ms-input-placeholder { /* IE 10+ */
    font-family:Microsoft YaHei;color:#939393;
}
:-moz-placeholder { /* Firefox 18- */
    font-family:Microsoft YaHei;color:#939393;
}
select::-ms-expand { display: none; }

#skipTo {width: 100%; overflow: hidden; position: relative; z-index: 1000;}
#skipTo a {margin: 0px -1px -1px 0px; width: 1px; height: 1px; text-align: center; line-height: 0; overflow: hidden; font-size: 0px; display: block;}
#skipTo a:focus {background: rgb(32, 38, 44); margin: 0px; padding: 8px 0px 0px 15px; width: auto; height: 20px; color:#ffffff; line-height: 1; font-size: 12px; font-weight: 700;}
#skipTo a:hover {background: rgb(32, 38, 44); margin: 0px; padding: 8px 0px 0px 15px; width: auto; height: 20px; color:#ffffff; line-height: 1; font-size: 12px; font-weight: 700;}
#skipTo a:active {background: rgb(32, 38, 44); margin: 0px; padding: 8px 0px 0px 15px; width: auto; height: 20px; color:#ffffff; line-height: 1; font-size: 12px; font-weight: 700;}

#gnb{position: fixed;top: 0;left: 0; right: 0;text-align: center;width:100%;margin: 0 auto;z-index: 999;height: 85px;box-shadow: 0px 1px 5px 0 rgba(0,0,0,0.3);}
#gnb:after{content: '';position: absolute;left:0;bottom:0;right:0; height: 1px;background: #efefef;}
#gnb .navi{position: absolute;left:0;right: 0;top:0;  width: 100%;background-color: #026749;height:85px;overflow: hidden}
#gnb .navi .nav_bg{position: absolute;top:85px;left:0;right:0;height: 374px;background: url(../images/body-bg.jpg);border-bottom: 1px solid #efefef; border-top: 1px solid #ddd;}
#gnb .navi .nav_inner{position: relative; height:85px;  max-width: 1200px;min-width:1080px; margin: 0 auto; }
#gnb .navi ul.depth1{position: relative;width:100%;font-size: 0;letter-spacing: 0;word-spacing: 0;margin: 0 auto;}
#gnb .navi ul.depth1 > li{position: relative;display:inline-block;width:137px;  vertical-align: top;font-size:15px;float: left;}
#gnb .navi ul.depth1 > li > a{position: relative;display: block;color: #fff;font-family:'CjOnlyOnetitleMedium';height: 85px;line-height: 85px;letter-spacing:0.1px;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;}
#gnb .navi ul.depth1 > li > a:hover, #gnb .navi ul.depth1 > li > a.on{color: #fff;}
#gnb .navi ul.depth1 > li > a:before{content: '';position: absolute;top:50%;left:0; width: 1px;  height: 16px; margin-top: -9px;background:#fff;}
#gnb .navi ul.depth1 > li:first-child > a:before{display: none}
#gnb .navi ul.depth1 > li:first-child{margin-left: 0px;}
#gnb .navi ul.depth1 > li:nth-child(1) {margin-left: 237px;}
#gnb .navi ul.depth1 li img{height: 85px;}
#gnb .logo {position: absolute;top: 0px;/*bottom: 0;*/left: 50%;margin-left: -620px;z-index: 10;height: 84px;overflow: hidden;}
#gnb .logo img {}
#gnb .navi .logo{position: absolute;top:0;bottom:0;left:0;z-index: 10;}
#gnb .navi .logo > a h1{padding:3px 0 2px 0;}
#gnb .navi .logo > a h1 span{height: 65px;overflow: hidden;display: block;}
#gnb .navi .logo > a h1 span img{margin-top:-65px;}


#gnb .navi .lang{ position: absolute;top:24px;left:125px;z-index: 10;font-family:'CjOnlyOneBodyRegular'; display:none;width: 72px;height: 22px;line-height: 24px; overflow: hidden;border:1px solid #dddddd;border-radius: 22px;}
#gnb .navi .lang ul{overflow: hidden;width: 66px;padding: 0 5px}
#gnb .navi .lang ul:before{content: '';position: absolute;top:3px;height: 16px;left:35px; width: 1px;background: #efefef;}
#gnb .navi .lang ul li{float: left;width: 14px;white-space: nowrap;padding: 0 8px;}
#gnb .navi .lang ul li a{display:block;font-size: 11px;color: #bdbdbd;}
#gnb .navi .lang ul li a.active{color: #333;}
#gnb .navi .btn_inquiry{position: absolute;top:0px;right:0;}
#gnb .navi .btn_inquiry >a{position: relative;display: block;color: #fff;margin-top: 15px;padding-left: 5px; width: 138px;height: 40px;line-height: 40px;font-size: 14px;color: #026749; border:1px solid #dddddd;border-radius: 80px;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;}
#gnb .navi .btn_inquiry >a:before{content: '';position: absolute;left:30px;top:11px;width: 16px;height: 16px;background: url(../images/ico_inquiry.png) no-repeat center top;  -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;}
#gnb .navi .btn_inquiry >a:after{content: '';position: absolute;left:30px;top:11px;width: 16px;height: 16px;background: url(../images/ico_inquiry_on.png) no-repeat center top;  -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;opacity: 0;}

#gnb .navi .btn_inquiry >a:hover{background: url(../images/btn_inquiry_bg.png) repeat;color: #026749;border-color: #026749}
#gnb .navi .btn_inquiry >a:hover:before{opacity: 0;}
#gnb .navi .btn_inquiry >a:hover:after{opacity: 1;}
#gnb .navi ul.depth1 > li .depth2{position: relative;  left: 0; right: 0;z-index:1;padding-top:40px;box-sizing: border-box;-webkit-box-sizing: border-box;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform:translateY(-10px);
    visibility: hidden;opacity: 0;
}
#gnb .navi ul.depth1 > li > span{position: absolute;display: block; top:120px;left:50%;width: 4px;height: 4px;border-radius: 8px;margin-left: -2px;
    background: #009966;  -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -ms-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;}
#gnb .navi ul.depth1 > li > span:before{content: '';background: #e4e4e4;position: absolute;top:0;left:0;width: 4px;height: 4px;border-radius: 8px;}
#gnb .navi ul.depth1 > li > span:after{content: '';background: #e4e4e4;position: absolute;top:0;right:0;width: 4px;height: 4px;border-radius: 8px;}
#gnb .navi ul.depth1 > li:hover > span{width: 36px; margin-left: -18px;}
#gnb .navi ul.depth1 > li:hover > span:before{background: #026749;}
#gnb .navi ul.depth1 > li:hover > span:after{background: #026749;}

#gnb .navi ul.depth1 > li .depth2 > li{display:block;position:relative;font-size: 14px;color: #6f6f6f;}
#gnb .navi ul.depth1 > li .depth2 > li > a{display: block;position:relative;vertical-align:middle;width:100%;z-index: 1;margin-top:20px;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}






#gnb .navi ul.depth1 > li .depth2 > li > a:hover,#gnb .navi ul.depth1 > li .depth2 > li > a.on{color:#026749;}

#gnb.over .navi ul.depth1 > li .depth2{visibility: visible;opacity: 1;-webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform:translateY(0px);}


body.main #gnb{margin-top: -70px;}
body.main #gnb .navi{background: /*url(../images/body-bg.jpg)*/ #026749;border-bottom: 1px solid #bbb}
body.main #gnb:after{background: rgba(255,255,255,0.3);}
body.main #gnb .navi ul.depth1{}

body.main #gnb .navi ul.depth1 > li > a{color: #fff;}

body.main #gnb .navi ul.depth1 > li > a:before{ background: #fff;}
body.main #gnb .navi .logo > a h1 span{height: 65px;overflow: hidden;display: block;}
body.main #gnb .navi .logo > a h1 span img{margin-top:0px;}
body.main #gnb .navi .logo > a:hover h1 span img,#gnb .navi .logo > a.on h1 span img{margin-top: -65px;}
body.main #gnb .navi .lang ul li a{color:rgba(255,255,255,0.6);}
body.main #gnb .navi .lang ul li a.active{color: #fff;}
body.main #gnb .navi .btn_inquiry >a{color: #fff;}
body.main #gnb .navi .btn_inquiry >a:before{opacity: 0;}
body.main #gnb .navi .btn_inquiry >a:after{opacity: 1;}
body.main #gnb.over:after{background: #efefef;}
body.main #gnb.over .navi{background-color: #026749;}
body.main #gnb.over .navi ul.depth1 > li > a{color: #fff}
body.main #gnb.over .navi ul.depth1 > li > a:hover,body.main #gnb.over .navi ul.depth1 > li > a.on{color: #fff;}
body.main #gnb.over .navi ul.depth1 > li > a:before{ background: #efefef;}
body.main #gnb.over .navi .logo > a h1 span img{margin-top: -65px;}
body.main #gnb.over .navi .lang ul li a{color:#bdbdbd;}
body.main #gnb.over .navi .lang ul li a.active{color: #fff;}

body.main #gnb.over .navi .btn_inquiry >a{color: #026749;}
body.main #gnb.over .navi .btn_inquiry >a:before{opacity: 1;}
body.main #gnb.over .navi .btn_inquiry >a:after{opacity: 0;}
body.main #gnb.over .navi .btn_inquiry >a:hover{color: #026749;}
body.main #gnb.over .navi .btn_inquiry >a:hover:before{opacity: 0;}
body.main #gnb.over .navi .btn_inquiry >a:hover:after{opacity: 1;}
body.main #gnb.on:after{background: #efefef;}
body.main #gnb.on .navi{background-color: #026749;}
body.main #gnb.on .navi ul.depth1 > li > a{color: #fff}
body.main #gnb.on .navi ul.depth1 > li > a:hover,body.main #gnb.over .navi ul.depth1 > li > a.on{color: #026749;}
body.main #gnb.on .navi ul.depth1 > li > a:before{ background: #fff;}
body.main #gnb.on .navi .logo > a h1 span img{margin-top: -65px;}
body.main #gnb.on .navi .lang ul li a{color:#bdbdbd;}
body.main #gnb.on .navi .lang ul li a.active{color: #333;}
body.main #gnb.on .navi .btn_inquiry >a{color: #026749;}
body.main #gnb.on .navi .btn_inquiry >a:before{opacity: 1;}
body.main #gnb.on .navi .btn_inquiry >a:after{opacity: 0;}
body.main #gnb.on .navi .btn_inquiry >a:hover{color: #fff;}
body.main #gnb.on .navi .btn_inquiry >a:hover:before{opacity: 0;}
body.main #gnb.on .navi .btn_inquiry >a:hover:after{opacity: 1;}

.location{display:block;position: relative;padding-top:28px;color:#fff; overflow: hidden; margin-right: 30px;}
.location ul{text-align: right;overflow: hidden; margin: 0 auto;font-size: 0;letter-spacing: 0;word-spacing: 0;}
.location ul li{display:inline-block;line-height:17px;font-size: 13px;}
.location ul li:after{content: '';display:inline-block;position:relative;top:0px;left:0px;margin:0 10px;width:5px;height:8px;background: url(../images/ico_location_arw.png) center center;}
.location ul li:last-child:after{content:none;}
.location ul li img{margin-top:2px;}
#contents{position: relative;}
#contents .section_top{position:relative;overflow: hidden; height: 400px;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box}
#contents .section_top.full{height: 100vh}
#contents .section_top .back_container{  will-change: transform;position: absolute;top:0;right:0;bottom:0;left:0;  width: 100%; max-width: 2000px;overflow: hidden; margin: 0 auto;background:none;}
#contents .section_top .back_container video{  position: absolute;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    object-fit: cover}
/*#contents .section_to.first .back_container{-moz-transform: scale(1.08);
    -webkit-transform: scale(1);
    -o-transform: scale(1.08);
    -ms-transform: scale(1.08);
    transform: scale(1);
}*/
#contents .section_top.first .back_container{opacity: 0;}
#contents .section_top.first .back_container.inmotion {opacity: 1;
    -webkit-transition: opacity 0.6s ease-out;
    transition: opacity 0.6s ease-out;
}

#contents .section_top .section_inner{position: relative; max-width: 1200px;margin: 0 auto;  height: 100%;}
#contents .section_top .section_inner .text_container{position: relative;max-width: 1080px;opacity: 0;}
#contents .section_top .section_inner .text_container h2{position: relative; color: #fff;font-size: 55px;padding-top:35px; }
#contents .section_top .section_inner .text_container h2 em{opacity: 0;display: inline-block}
#contents .section_top .section_inner .text_container p{opacity: 0;transform: translateX(15px);-webkit-transform: translateX(15px); position: relative; color: #fff;font-size: 20px;padding-top:15px;letter-spacing: -0.2px;}
#contents .section_top .section_inner .text_container text{stroke-dasharray: 1000;stroke-dashoffset: 1000;}
#contents .section_top .section_inner .text_container span{opacity:0;position: absolute;display: block; top:0;left:27px;width: 5px;height: 5px;border-radius: 10px;background: rgba(255,255,255,0.3);

    /*
      -webkit-transition: all 0.8s ease-out ;
            -moz-transition: all 1s ease-out;
            -ms-transition: all 1s ease-out ;
            transition: all 0.8s ease-out;*/

}
#contents .section_top .section_inner .text_container span:before{content: '';background: #fff;position: absolute;top:0;left:0;width: 5px;height: 5px;border-radius: 10px;}
#contents .section_top .section_inner .text_container span:after{content: '';background: #fff;position: absolute;top:0;right:0;width: 5px;height: 5px;border-radius: 10px;}
#contents .section_top .section_inner .text_container.nomotion span{opacity:1;width:50px;transform: matrix(1, 0, 0, 1, -25, 0);-webkit-transform: matrix(1, 0, 0, 1, -25, 0)}
/*#contents .section_top.inmotion .section_inner .text_container span{opacity:1}
#contents .section_top.inmotion .section_inner .text_container span{width: 50px;transform: translateX(-25px);}*/


select option[value=""]:first-child {
    display: none;
}

#contents.ir_board .section .inner .select_year select option[value=""]:first-child {
    display: block;
}

#contents .section_top .top_wave{position: absolute;bottom: -6px;left: 50%;right: 0;width: 2000px; margin-left: -1000px;height: 320px;}
#contents .section{position: relative;background: #fff;}

.top_btn{position: relative;top:-80px;width:1200px;margin:0 auto;}
.top_btn a{float:right;}

#footer{position: relative;background: #fff;}
#footer .sns{height:54px;line-height: 54px;border-top: 1px solid #ececec;border-bottom: 1px solid #ececec;}
#footer .sns > ul{width:800px;margin:0 auto;}
#footer .sns > ul li{position: relative;float:left;width:200px;text-align: center}
#footer .sns > ul li a{position:relative;display: block;font-size:14px;letter-spacing: 1px;}
#footer .sns > ul li:after{content: '';position: absolute;top:50%;right:0px;z-index:99;width:1px;height:15px;margin-top:-8px;background-color: #dadada;}
#footer .sns > ul li:last-child:after{content: none;}
#footer .sns > ul li a.out:after{content:'';  position: relative;top:1px;display:inline-block;vertical-align: baseline;width:13px;height:13px;background: url(../images/outlink_l.png) no-repeat center top;margin:0 0 0 12px;}


#footer .family{display: inline-block;position: relative;  z-index: 99;}
#footer .family .selectbox{display: inline-block;position: relative;border: 1px solid #999999;font-size:11px;line-height:29px;width: 158px;padding-left:20px;box-sizing: border-box;-webkit-box-sizing: border-box;}
#footer .family .selectbox a{display:block;width:100%;}
#footer .family .selectbox a:after{content: '';width: 7px;height: 4px;position: absolute;top:13px;right:13px; background: url(../images/ico_bottom_select.png) no-repeat center top;background-size: 7px 4px;}
#footer .family .selectbox.on a:after{ -ms-transform: rotate(180deg);-webkit-transform:rotate(180deg);transform: rotate(180deg);}

#footer .family ul.selectul{display:none;position: absolute;top:-328px;right:0;width:156px;background-color: #ffffff;border: 1px solid #626262;color: #626262; height: 340px;overflow-y: scroll;}
#footer .family ul.selectul li{line-height:25px;text-indent:9px;font-size: 12px;color: #333;}
#footer .family ul.selectul li.group{color:#999999}
#footer .family ul.selectul li a{display: block;width:100%;text-indent:15px;}
#footer .family ul.selectul li a:after{content:'';display:inline-block;float:right;width:9px;height:9px;background: url(../images/outlink.png) no-repeat top left;margin:7px 10px 0 0;}
#footer .family ul.selectul li a.self:after{content: none}
#footer .family ul.selectul li a:hover{background-color:#4f9f72;color:#ffffff;}
#footer .family ul.selectul li a:hover:after{background-position: 0 -9px;}
#footer .family .selectbox.on+ul.selectul{display:block}

#footer  .footer_logo{padding:50px 0 39px;text-align: center;}
#footer  .footer_logo img{height: 88px;}

#footer .policy{height:50px;text-align: center;font-size: 14px;color:#666666;}
#footer .policy ul{display: inline-block;}
#footer .policy ul li{display:inline-block;position:relative;float:left;padding:0 15px;}
#footer .policy ul li:first-child{color:#066aa1;}
#footer .policy ul li:after{content: '';position: absolute;top:50%;right:0px;width:1px;height:15px;margin-top:-8px;background-color: #dadada;}
#footer .policy ul li:last-child:after{content: none;}

#footer .company_info{height:50px;line-height: 50px;text-align: center;color:#999999;font-size: 13px;border-top:1px solid #ececec;}
#footer .company_info ul{display: inline-block;}
#footer .company_info ul li{display:inline-block;position:relative;float:left;padding:0 10px;}
#footer .company_info ul li:after{content: '';position: absolute;top:50%;right:0px;width:1px;height:15px;margin-top:-8px;background-color: #dadada;}
#footer .company_info ul li:last-child:after{content: none;}

#footer .copyright{height:50px;line-height: 50px;text-align: center;background-color:#ececec;color:#999999;font-size: 12px;}



.mot1 {
    -webkit-transition: all 0.01s;
    -moz-transition: all 0.01s;
    -ms-transition: all 0.01s;
    transition: all 0.01s;
}

.mot2 {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

.mot3 {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.mot4 {
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -ms-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}

.mot5 {
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}
.mot6 {
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}


.mot3-delay {
    -webkit-transition: all 0.3s ease-out 0.3s;
    -moz-transition: all 0.3s ease-out 0.3s;
    -ms-transition: all 0.3s ease-out 0.3s;
    transition: all 0.3s ease-out 0.3s;
}

.mot4-delay {
    -webkit-transition: all 0.3s ease-out 0.4s;
    -moz-transition: all 0.3s ease-out 0.4s;
    -ms-transition: all 0.3s ease-out 0.4s;
    transition: all 0.3s ease-out 0.4s;
}


.paging {position: relative;text-align: center;margin-top: 35px;margin-bottom: 35px; overflow: hidden;}
.paging ul {margin: 0 auto;width: auto;  max-width: 570px;overflow: hidden; font-size: 0;letter-spacing: 0;word-spacing: 0;}
.paging ul li {width: auto;height: auto;background-color: inherit;margin:0 5px;overflow: hidden;display: inline-block;vertical-align: top;}
.paging ul li a {position: relative; box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;color: #666666;font-size: 13px;padding:7px 0; display: block;text-align: center;width: 20px;height: 33px}
.paging ul li.first_page_btn a,.paging ul li.prev_page_btn a
,.paging ul li.last_page_btn a,.paging ul li.next_page_btn a{width: 33px;height: 33px;padding:12px 4px; margin: 0;border: 1px solid #d8d8d8;}
.paging ul li.first_page_btn,.paging ul li.prev_page_btn
,.paging ul li.last_page_btn,.paging ul li.next_page_btn{padding: 0;margin: 0;}
.paging ul li.prev_page_btn{margin-left: 5px;margin-right: 20px;}
.paging ul li.next_page_btn{margin-right: 5px;margin-left: 20px;}

.paging ul li a span{  height: 7px;display: block;width: 9px; text-indent: -999em; margin: 0 auto;}
.paging ul li.prev_page_btn a span{background:url("../images/btn_page_prev.png") no-repeat center -18px;}
.paging ul li.next_page_btn a span{background:url("../images/btn_page_next.png") no-repeat center -18px;}
.paging ul li.first_page_btn a span{background:url("../images/btn_page_first.png") no-repeat center -18px;}
.paging ul li.last_page_btn a span{background:url("../images/btn_page_last.png") no-repeat center -18px;}


.paging ul li.on a,.paging ul li a:hover{color: #88bb8a; -webkit-transition: all 0.2s;-moz-transition: all 0.2s;-ms-transition: all 0.2s;transition: all 0.2s;}
.paging ul li.on a span,.paging ul li a:hover span{background-position: center -9px;}
.paging ul li.on a:before,.paging ul li a:hover:before{content: '';position: absolute;bottom:10px;left: 50%;margin-left: -5px; width: 10px;height: 1px;background: #88bb8a;}
.paging ul li.first_page_btn a:hover,.paging ul li.prev_page_btn a:hover
,.paging ul li.last_page_btn a:hover,.paging ul li.next_page_btn a:hover{background-color: #88bb8a;border-color: #88bb8a;}
.paging ul li.first_page_btn a:hover:before,.paging ul li.prev_page_btn a:hover:before
,.paging ul li.last_page_btn a:hover:before,.paging ul li.next_page_btn a:hover:before{content: none;}


.popup{position: absolute;left:0;top:0;right:0;bottom:0;z-index: 999;display: none;background: rgba(0,0,0,.5)}
.popup .pop_inner{position: absolute;left:50%;top:0px;width: 790px;margin: 0 0 0 -445px; background: #fff;text-align: left;}
.popup .pop_inner .btn_close{position: absolute;display: block;top:50px;right: 50px;z-index: 99;}
.popup .pop_inner .pop_header{text-align: left;}

.popup .pop_inner .pop_content{padding: 20px 0 0;position: relative;   overflow: hidden;}

body.error #contents{display: table;width:100%;}
.error_container{display:table-cell;vertical-align:middle;min-height:520px;width:100%;min-width:1200px;height:100vh;text-align: center;line-height: 38px;font-size: 20px;color:#333333;background:url("../images/error_bg.jpg") no-repeat center center;background-size: cover;}
.error_container .error_title{color:#333333;font-size:32px;line-height: 46px;padding:55px 0 40px;}
.error_container .error_hr{margin:40px auto 60px;height:1px; width:100px;background-color:#d3d3d3}
.error_container  p{}
.error_container  a{display:block;width:310px;height:60px;line-height:60px;margin:80px auto 0;border-radius: 50px;color:#ffffff;font-size: 20px;
    background: #74c3cb;
    background-image: -webkit-linear-gradient(to left, #72d49d, #74c3cb);
    background-image: -moz-linear-gradient(to left, #72d49d, #74c3cb);
    background-image: -o-linear-gradient(to left, #72d49d, #74c3cb);
    background-image: linear-gradient(to left, #72d49d, #74c3cb);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.error_container  a:hover{opacity: 0.7;}



@keyframes spinner {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-webkit-keyframes spinner {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
.spinner {
    position: relative;
}
.spinner div {
    left: 45px;
    top: 25px;
    position: absolute;
    -webkit-animation: spinner linear 1s infinite;
    animation: spinner linear 1s infinite;
    background: #73ceaa;
    width: 8px;
    height: 8px;
    border-radius: 98%;
    -webkit-transform-origin: 4px 24px;
    transform-origin: 4px 24px;
}
.spinner div:nth-child(1) {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-animation-delay: -0.875s;
    animation-delay: -0.875s;
}
.spinner div:nth-child(2) {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-animation-delay: -0.75s;
    animation-delay: -0.75s;
}
.spinner div:nth-child(3) {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-animation-delay: -0.625s;
    animation-delay: -0.625s;
}
.spinner div:nth-child(4) {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}
.spinner div:nth-child(5) {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-animation-delay: -0.375s;
    animation-delay: -0.375s;
}
.spinner div:nth-child(6) {
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
    -webkit-animation-delay: -0.25s;
    animation-delay: -0.25s;
}
.spinner div:nth-child(7) {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
    -webkit-animation-delay: -0.125s;
    animation-delay: -0.125s;
}
.spinner div:nth-child(8) {
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
.spinner {
    display: none;
    width: 100px;
    height: 100px;
   position: fixed;
    z-index: 999;  z-index: 999;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -50px;
}


@media all and (max-width: 1150px) {
    #gnb .navi .lang{left: 115px;width: 62px;}
    #gnb .navi .lang ul{width: 62px;padding: 0 0}
    #gnb .navi .lang ul:before{left: 30px}

}