@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;500&display=swap');

html, body, div, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, span, blockquote, pre,
abbr, acronym, address, big, cite, code, del, dfn, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var, a,b, center, dl, dt, dd, ol, ul, li,
fieldset, form, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio, video ,button, textarea, input, 
label, select, option{
    margin:0; padding:0; border:0; vertical-align:top; line-height:1.6em; box-sizing:border-box; border-width:0px;
    border-style:initial; border-color:initial; border-image:initial; outline:0px;
    font-size:18px; color:#111; font-family:'Montserrat','Noto Sans KR',sans-serif; letter-spacing:0.02em; word-break:keep-all
}
html{-webkit-text-size-adjust:100%}
a{text-decoration:none; cursor:pointer}
a:hover{text-decoration:none; color:#111}
input, button, select{background:none; outline:none; border:none; cursor:pointer}
button {cursor:pointer}
em,i{font-style:normal}
em{font-weight:bold}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display:block}
body {line-height:1;}
ol, ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after {content:''; content:none}
table {border-spacing:0; border-collapse:collapse}
caption{display:none;}
input[type=radio]{margin-top:-1px}
input[type=checkbox]{margin-top:-1px}
textarea{width:96%; padding:10px; overflow-y:auto; resize:none; border:1px solid #dfdfdf}
hr{border:none}
i{display:inline-block}
input::placeholder{color:#aaa; font-weight:normal}
input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder{color:transparent} 
input:focus:-moz-placeholder, textarea:focus:-moz-placeholder{color:transparent}
input:focus::-moz-placeholder, textarea:focus::-moz-placeholder{color:transparent}
input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder{color:transparent}
select{-moz-appearance:none; -webkit-appearance:none; appearance:none;}
select::-ms-expand{display:none}
label{display:inline-block; text-align:center}
ul{font-size:0}
strong{font-weight:500}
img{image-rendering:-webkit-optimize-contrast; transform:translateZ(0); backface-visibility:hidden}

h2{font-size:40px; font-weight:500}
h3{font-size:30px; font-weight:500}
h4, h4 *{font-size:22px; font-weight:500}

.tal{text-align:left !important}
.tar{text-align:right !important}
.tac{text-align:center !important}

.vat{vertical-align:top}
.vam{vertical-align:middle}
.vab{vertical-align:bottom}

.fl{float:left}
.fr{float:right}

.mt0{margin-top:0px !important}
.mt10{margin-top:10px !important}
.mt15{margin-top:15px !important}
.mt20{margin-top:20px !important}
.mt25{margin-top:25px !important}
.mt30{margin-top:30px !important}
.mt35{margin-top:35px !important}
.mt40{margin-top:40px !important}
.mt45{margin-top:45px !important}
.mt50{margin-top:50px !important}
.mt55{margin-top:55px !important}
.mt60{margin-top:60px !important}
.mt65{margin-top:65px !important}
.mt70{margin-top:70px !important}

html, body{position:relative;  height:100%}
.inner{width:100%; max-width:1200px; margin:0 auto; padding:0 20px; position:relative}
.section{height:100vh; overflow:hidden}
.incon{width:100%; max-width:940px; margin:0 auto; padding:0 20px; position:relative}
.flexbox{display:flex !important; justify-content:space-between; align-items:center}
.flex{display:flex !important; justify-content:space-between}
.flexend{display:flex !important; justify-content:space-between; align-items:flex-end}
.flexcenter{
    display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex;
    -webkit-box-pack:center; -ms-flex-pack:center; -webkit-justify-content:center; justify-content:center;
    -webkit-box-align:center; -ms-flex-align:center; -webkit-align-items:center; align-items:center
}
.table{display:table; table-layout:fixed; width:100%}
.table > *{display:table-cell}
.m_block, .xs_block{display:none}
.m_hidden, .xs_hidden{display:block}
.inline{display:inline}
.underline{text-decoration:underline; text-underline-offset:3px}

.img{position:relative; overflow:hidden}
.img30{padding-bottom:30%}
.img50{padding-bottom:50%}
.img56{padding-bottom:56%}
.img72{padding-bottom:72%}
.img100{padding-bottom:100%}
.img125{padding-bottom:125%}
.img img, .img iframe, .img video{position:absolute; top:0; left:0; width:100%; min-height:100%}
.imgback::before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.3); z-index:1}
.radius20{border-radius:20px}

.fc_black{color:#333 !important}
.fc_blue{color:#0f83f1 !important}
.btn{
    display:inline-block; min-width:165px; height:50px; line-height:50px; text-align:center; 
    background:#0f83f1; color:#fff !important; border-radius:100px; padding:0 20px; font-size:18px
}
.arrow{position:relative; width:15px; height:11px; vertical-align:middle; margin-left:5px}
.arrow::before{content:''; position:absolute; width:15px; height:1px; background:#111; top:3px; right:0}
.arrow::after{content:''; border-top:1px solid #111; border-right:1px solid #111; position:absolute; top:0; right:0; width:7px; height:7px; transform:rotate(45deg) translatez(0)}
.btn .arrow::before, .more .arrow::before{background:#fff}
.btn .arrow::after, .more .arrow::after{border-top:1px solid #fff; border-right:1px solid #fff}
.btn:hover i, .cultureList li:hover i{animation:main03 1s linear infinite; -ms-animation:main03 1s linear infinite}
@keyframes main03 {0% {right:0} 50% {right:-5px} 100% {right:0}}
.select{min-width:165px; height:50px; line-height:50px; border:1px solid #ddd; padding:0 10px; background:url('/layouts/tekville/image/select.png') no-repeat right 10px center #fff}

.header{position:fixed; top:0; left:0; width:100%; padding:20px 30px 20px 120px; z-index:10; transition:top 0.2s ease-in-out}
.header_tit{color:#fff; display:inline-flex; align-items:center; font-weight:bold; }
	.header_tit:hover{ color:#fff; }
.header_tit img{margin-right:10px}
.header.on .header_tit, .header.fix .header_tit{color:#266ba6}
.header.fix{position:fixed; background:#fff; box-shadow:2px 4px 10px rgb(0,0,0,0.05)}
.header.up{top:-86px; background:#fff}
.header.on{background:#fff; border-bottom:1px solid #e9e9e9}
.header.fix .gnbList > li > a, .header.on .gnbList > li > a{color:#111}
.pageheader{border-bottom:1px solid #ddd; background:#fff}
.pageheader .gnbList > li > a{color:#333}
.gnbList > li{display:inline-block; margin:0 20px}
.gnbList a{color:#fff; position:relative; font-size:16px}
.gnbSub{position:absolute; top:85px; left:0; width:100%; background:#fff; padding:20px; z-index:1; background:#0f83f1; display:none}
.gnbSub ul{margin-right:30px; text-align:right}
.gnbSub li{display:inline-block; position:relative}
.gnbSub li + li{margin-left:41px; position:relative}
.gnbSub li + li::before{content:''; position:absolute; left:-21px; top:50%; transform:translateY(-50%); width:1px; height:10px; background:rgba(255,255,255,0.3)}
.gnbSub a{font-size:15px}
.gnbList a::before{content:''; position:absolute; bottom:-7px; left:0; right:0; height:2px; border-radius:100px; background:#0f83f1; transform:scaleX(0); transition:0.3s all ease-out}
.gnbList a:hover::before{transform:scaleX(1)}
.gnbList > li > a:hover{color:#0f83f1 !important}
.gnbSub a::before{background:#fff; height:1px}
.mo_gnb .btn, .mo_gnb ul, .mobileGnb{display:none}

.gnbList .lang a{padding-right:20px; position:relative}
.gnbList .lang a::after{content:''; position:absolute; top:3px; right:0; width:5px; height:5px; border-top:2px solid #fff; border-right:2px solid #fff; transform:rotate(135deg); box-sizing:content-box; }
.header.fix .gnbList > li > a::after{border-top:2px solid #111; border-right:2px solid #111}
.gnbList .lang a:hover::after{border-top:2px solid #0f83f1 !important; border-right:2px solid #0f83f1 !important}
.gnbList .h_naver{margin:-5px 10px 0 0}
.h_naver a{width:30px; height:30px; background:url('/layouts/tekville/image/header_blog.png') no-repeat center #eee; text-indent:-9999px; display:inline-block; border-radius:100%}
.gnbList .h_facebook{margin:-5px 0 0 0}
.h_facebook a{width:30px; height:30px; background:url('/layouts/tekville/image/header_facebook.png') no-repeat center #eee; text-indent:-9999px; display:inline-block; border-radius:100%}

.footer{background:#eee; padding:40px 0; position:relative; margin-top:150px}
.main + .footer, .sub_intro + .footer{ margin-top:0; }, .sub_intro + div + div + div + iframe + .footer{ margin-top:0; } /* 동작하지 않아서, /layouts/tekville/_main.js 에서 js 로 처리 ㅠ */
.footer *{font-size:15px}
.footer h1{display:inline-block; vertical-align:middle}
.footer .noti{display:inline-block; margin-left:50px; vertical-align:middle}
.footer .noti li{display:inline-block; position:relative}
.footer .noti li + li{padding-left:40px}
.footer .noti li + li::before{content:''; position:absolute; top:50%; transform:translateY(-50%); left:19px; width:1px; height:12px; background:#aaa; border-radius:100%}
.footer .noti li strong{color:#0f83f1}
.footer .sitemap{position:relative}
.footer .sitemap button{width:200px; height:40px; text-align:left; padding:0 20px; background:#fff; display:flex; justify-content:space-between; align-items:center; border-radius:100px}
.footer .sitemap button i{width:12px; height:7px; background:url('/layouts/tekville/image/site.png');}
.footer .sitemap button.on i{transform:rotate(180deg)}
.footer .sitemap > ul{width:200px; position:absolute; bottom:40px; right:0; background:#fff; border:1px solid #ddd; border-top:0; height:300px; overflow-y:scroll; display:none}
.footer .sitemap li a{display:inline-block; width:100%; padding:10px 15px; text-align:left; border-top:1px solid #ddd; position:relative}
.footer .sitemap > ul > li > a{background:#eee; font-weight:500}
.footer .sitemap li i::before{content:'+'; position:absolute; top:50%; right:15px; transform:translateY(-50%)}
.footer > div + div{border-top:1px solid #aaa; margin-top:20px; padding-top:20px}
.footer .info{width:calc(100% - 250px)}
.footer .info li{color:#666; display:inline-block; font-size:14px; margin-right:30px}
.footer .mark li{display:inline-block}
.footer .mark li + li{margin-left:10px}


@media (max-width:1200px) {
    html, body, div, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, span, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, a, b, center, dl, dt, dd, ol, li, fieldset, form, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, button, textarea, input, label, select, option{font-size:16px; line-height:1.5em}
    .section{height:auto}
    .inner, .incon{padding:0 15px} 
    
    .header{padding:15px}
    .gnbSub{top:75px}
    .gnbList a{font-size:15px}
}

@media (max-width:767px) {
    html, body, div, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, span, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, a, b, center, dl, dt, dd, ol, li, fieldset, form, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, button, textarea, input, label, select, option{font-size:14px; line-height:1.5em}
    h4, h4 *{font-size:2.4vh}

    .m_mt0{margin-top:0px !important}
    .m_mt10{margin-top:10px !important}
    .m_mt15{margin-top:15px !important}
    .m_mt20{margin-top:20px !important}
    .m_mt25{margin-top:25px !important}
    .m_mt30{margin-top:30px !important}
    .m_mt35{margin-top:35px !important}
    .m_mt40{margin-top:40px !important}
    .m_mt45{margin-top:45px !important}
    .m_mt50{margin-top:50px !important}
    .m_mt55{margin-top:55px !important}
    .m_mt60{margin-top:60px !important}
    .m_mt65{margin-top:65px !important}
    .m_mt70{margin-top:70px !important}

    .flexnone{display:block !important}
    .flex23 > *, .flex55 > *{width:100% !important}
    .m_block, .xs_block{display:block !important}
    .m_hidden, .xs_hidden{display:none !important}
    .select, .btn{height:40px; line-height:40px}
	.btn{font-size:15px; min-width:125px}
    .radius20{border-radius:10px}

    .gnb{display:none !important}
    .mobileGnb{display:flex; justify-content:space-between; align-items:center}
    h1 img{height:35px; transform:translateZ(0)}
    .mo_gnb .btn{display:inline-block; width:26px; height:auto; cursor:pointer; text-align:center; vertical-align:middle; min-width:auto; background:none}
    .mo_gnb .btn > div{
        width:auto; margin:0 auto; transition:all .7s ease; -webkit-transition:all .7s ease; 
        -moz-transition:all .7s ease; -ms-transition:all .7s ease; -o-transition:all .7s ease
    }
    .mo_gnb .btn .bar{
        display:block; height:2px; width:26px; background:#fff; border-radius:10px; -webkit-transition:all .7s ease; 
        -moz-transition:all .7s ease; -ms-transition:all .7s ease; -o-transition:all .7s ease; transition:all .7s ease
    }
    .header.fix .mo_gnb .btn .bar, .header.on .mo_gnb .btn .bar, .pageheader .mo_gnb .btn .bar{background:#111}
    .mo_gnb .btn .bar + .bar{margin-top:5px}
    .mo_gnb .btn.on .top{
        -webkit-transform:translateY(7px) rotateZ(45deg); -moz-transform:translateY(7px) rotateZ(45deg);
        -ms-transform:translateY(7px) rotateZ(45deg); -o-transform:translateY(7px) rotateZ(45deg); transform:translateY(7px) rotateZ(45deg)
    }
    .mo_gnb .btn.on .middle{width:0}
    .mo_gnb .btn.on .bottom{
        -webkit-transform:translateY(-7px) rotateZ(-45deg); -moz-transform:translateY(-7px) rotateZ(-45deg); 
        -ms-transform:translateY(-7px) rotateZ(-45deg); -o-transform:translateY(-7px) rotateZ(-45deg); transform:translateY(-7px) rotateZ(-45deg)
    }
    .mo_gnb > ul{position:absolute; top:65px; left:0; width:100%; height:calc(100vh - 65px); background:#fff; z-index:1; padding:30px}
    .mo_gnb > ul > li  + li{border-top:1px solid #ddd}
    .mo_gnb > ul > li > a, .mo_gnb .flexbox a{font-weight:500; font-size:20px; display:flex; justify-content:space-between; align-items:center}
    .mo_gnb .flexbox i{font-size:20px}
    .mo_gnb a{display:block; padding:10px; position:relative}
    .mo_gnb .mo_sub{display:none; border-top:2px solid #333}
    .mo_gnb .mo_sub a{padding-left:20px; position:relative}
    .mo_gnb .mo_sub a::before{content:''; position:absolute; top:50%; transform:translateY(-50%); left:10px; width:3px; height:3px; background:#333; border-radius:100%}
	.mo_gnb .sns{display:flex; justify-content:center; align-items:center}
    .mo_gnb .sns > * + *{margin-left:15px; padding-left:16px; position:relative}
    .mo_gnb .sns > * + *::before{content:''; position:absolute; top:10px; left:0; width:1px; height:10px; background:#ccc}
    .mo_gnb .sns a{display:inline-block; padding:0}

    .footer{margin-top:12vw; padding:30px 0; text-align:center}
    .footer *{font-size:14px}
    .footer h1{display:none}
    .footer .noti{margin-left:0; display:block}
    .footer .noti li + li{padding-left:30px}
    .footer .sitemap{margin-top:15px}
    .footer .sitemap button{width:100%; padding:0 10px; background:#ccc; height:35px}
    .footer .noti li + li::before{left:15px}
    .footer .sitemap ul{width:100%; bottom:35px}
    .footer .info{margin-bottom:15px}
    .footer .info{width:100%}
    .footer .info li{display:block; font-size:12px}
    .footer .info li + li{margin:0}
}


/* for system */

.check-label {font-weight:normal;margin-bottom:0;}
.check-label input[type="checkbox"] {vertical-align:middle;position:relative !important;top:-3px !important;}
.radio-label {font-weight:normal;margin-bottom:0;}
.radio-label input[type="radio"] {vertical-align:middle;position:relative !important;top:-3px !important;}

/* scroll top 
#back-to-top {position:fixed; bottom:1.5em; right:17px; text-decoration:none; color:#fff; padding:9px 12px; border-radius:50%; background:rgba(0,0,0,0.3); z-index:200; cursor:pointer; display:none; -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000, endColorstr=#33000000)";}
*/