@charset "utf-8";

.container{position:relative; width:100%; padding:0}
.backLine{position:fixed; top:0; left:75px; width:calc(100% - 75px); height:100%; font-size:0; z-index:-1}
.backLine span{width:25%; border-left:1px solid #e9e9e9; height:calc(100% + 150px); display:inline-block}
.page .backLine{left:0; width:100%}

.gnbLeft{width:75px; position:fixed; padding:20px 0; text-align:center; height:100%; background:#fff; z-index:9}
.gnbLeft ul, .main_pagination{position:absolute; bottom:30px; left:50%; transform:translateX(-50%)}
.gnbLeft li{writing-mode:tb-rl; -ms-writing-mode:tb-rl; -webkit-writing-mode:tb-rl; margin:30px 0}
.gnbLeft li a, .main_swiper .main_pagination .swiper-pagination-bullet span{font-size:15px; color:#aaa}
.gnbLeft li a.on, .main_swiper .main_pagination .swiper-pagination-bullet-active span{color:#0f83f1; font-weight:700; position:relative}
.gnbLeft li a.on::before, .main_swiper .main_pagination .swiper-pagination-bullet-active span::before{content:''; position:absolute; top:0; left:-5px; width:1px; height:100%;  background:#0f83f1}
.main_swiper .main_pagination .swiper-pagination-bullet{width:auto; height:auto; background:none; writing-mode:tb-rl; -ms-writing-mode:tb-rl; -webkit-writing-mode:tb-rl; margin-bottom:50px; cursor:pointer; opacity:1}

.sub, .main{width:calc(100% - 75px); margin-left:75px; overflow:hidden}
.main > div + div{padding-top:150px}
.main01{position:relative}
.main01 .gnbList{position:absolute; top:30px; right:20px; z-index:10}
.main01 .swiper-container{height:100vh}
.main01 .swiper-slide{overflow:hidden}
.main01 .swiper-slide::before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.3); z-index:1}
.main01 video, .main01 img, .main02_img video, .main02_img img{position:absolute; top:50%; left:50%; transform:translate(-50.1%, -50.1%); -ms-transform:translate(-50.1%, -50.1%); -webkit-transform:translate(-50.1%, -50.1%); min-width:100%; min-height:100%; width:auto; height:auto; object-fit:cover}
.main01 source{width:100%; height:100%}
.main01 .con{position:absolute; top:30%; left:50%; transform:translateX(-50%); z-index:2; text-align:left}
.main01 .con p{color:#fff}
.main01 .con .tit{font-size:135px; font-weight:bold}
.main01 .con .subtext{font-size:24px; line-height:1.8em}
.main01 .main01_pagination{position:absolute; z-index:5; bottom:20%; left:50%; transform:translateX(-50%); text-align:left}
.main01 .swiper-pagination-bullet{width:auto; height:auto; background:none; opacity:0.5; border-radius:0}
.main01 .swiper-pagination-bullet + .swiper-pagination-bullet{margin-left:20px}
.main01 .swiper-pagination-bullet-active{opacity:1; border-bottom:1px solid #fff}
.main01 .swiper-pagination-bullet span{color:#fff; font-size:16px}
.iconmouse{position:absolute; bottom:30px; right:50px; z-index:1; width:30px; height:50px; border:2px solid #fff; border-radius:20px}
@keyframes Mouse_act{0%{transform:translateY(2px); opacity:1} 30%{opacity:1} 100%{transform:translateY(25px); opacity:0}}
.iconmouse::before{content:'SCROLL'; display:block; position:absolute; top:-30px; left:50%; margin-left:-23px;color:#fff; letter-spacing:0px; font-size:12px}
.iconmouse .ball{position:absolute; top:5px; left:11px; width:5px; height:5px; background:#fff; border-radius:50%; animation:Mouse_act 1.5s ease-out infinite}

.main02{overflow:hidden}
.main02_img{width:50%; float:right}
.main02_img .swiper-slide{border-radius:20px; overflow:hidden; position:relative; height:60vh}
.main02_img img{width:100%}
.main02_btn{position:absolute; bottom:0; left:50%; margin-left:-70px; font-size:0; z-index:3}
.main02_btn button{width:70px; height:70px; background:#fff}
.main02_btn button svg{width:22px}
.main02_btn .main02_prev:hover svg{position:Relative; animation:slideInRight 0.5s 1 forwards; -webkit-animation:slideInRight 0.5s 1 forwards}
@-webkit-keyframes slideInRight {0% {-webkit-transform:translate3d(50%, 0, 0); transform:translate3d(50%, 0, 0)} 100% {-webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0)}}
@keyframes slideInRight {0% {-webkit-transform:translate3d(50%, 0, 0); transform:translate3d(50%, 0, 0)} 100% {-webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0)}}
.main02_btn .main02_next:hover svg{position:Relative; animation:slideInLeft 0.5s 1 forwards; -webkit-animation:slideInLeft 0.5s 1 forwards}
@-webkit-keyframes slideInLeft {0% {-webkit-transform:translate3d(-50%, 0, 0); transform:translate3d(-50%, 0, 0)} 100%{-webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0)}}
@keyframes slideInLeft {0% {transform:translate3d(-50%, 0, 0); transform:translate3d(-50%, 0, 0)} 100% {transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0)}}
.main02_text{width:50%; z-index:2; display:inline-block}
.main02_text .swiper-container{height:100%; overflow:visible; position:inherit}
.main02_text p{opacity:0; text-align:left}
.main02_text .swiper-slide-active p{animation:fadeInRight 0.8s 1 forwards; -webkit-animation:fadeInRight 0.8s 1 forwards; animation-delay:0.1s}
@-webkit-keyframes fadeInRight {
    0% {opacity:0; -webkit-transform:translate3d(100px, 0, 0); transform:translate3d(100px, 0, 0)}
    25% {opacity:0; -webkit-transform:translate3d(50px, 0, 0); transform:translate3d(50px, 0, 0)}
    100% {opacity:1; -webkit-transform:none; transform:none}
}
@keyframes fadeInRight {
    0%{opacity:0; -webkit-transform:translate3d(100px, 0, 0); -ms-transform:translate3d(100px, 0, 0); transform:translate3d(100px, 0, 0)}
    25%{opacity:0; -webkit-transform:translate3d(50px, 0, 0); -ms-transform:translate3d(50px, 0, 0); transform:translate3d(50px, 0, 0)}
    100%{opacity:1; -webkit-transform:none; -ms-transform:none; transform:none}
}
.main02_text .tit{font-size:40px; line-height:1.4em; font-weight:bold; margin-bottom:50px; position:relative}
.main02_text .text{color:#666; width:80%}

.main03 ul{margin:-30px -15px}
.main03 li{width:calc(50% - 30px); margin:30px 15px; display:inline-block; text-align:left}
.main03 h2{font-weight:bold; margin-top:30px; font-size:32px}
.main03 .text{margin:10px 0 30px 0}
.main03 .btn{width:100%; border-radius:0; background:none; color:#111 !important; border:1px solid #aaa; font-weight:bold; font-size:16px; overflow:hidden; position:relative; -webkit-transition:border .35s; transition:border .35s}
.main03 .btn i::before{background:#111}
.main03 .btn i::after{border-top:1px solid #111; border-right:1px solid #111}
.main03 .btn:hover{border:1px solid #0f83f1; color:#fff !important}
.main03 .btn:hover i::before{background:#fff}
.main03 .btn:hover i::after{border-top:1px solid #fff; border-right:1px solid #fff}
.main03 .btn:hover .fillbox{transform:translateZ(0)}
.fillbox{position:absolute; width:102%; height:102%;  top:0; left:0; margin:0; background-color:#0f83f1; transform:translate3d(-101%,0,0); transition:transform .35s ease-in-out; margin:0 !important; padding:0 !important; z-index:-1}

.main04 .subtit{color:rgba(255,255,255,0.8)}
.main04 h2{color:#fff; font-weight:normal}
.main04 ul{position:relative}
.main04 li{display:inline-block; position:relative}
.main04 li .img::before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:1}
.main04 li:hover img{-webkit-transform:scale(1.1); transform:scale(1.1); -webkit-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out}
.main04 li:nth-child(1){width:50%}
.main04 li:nth-child(2){width:50%; position:absolute; top:0; right:0}
.main04 li:nth-child(3){width:50%; position:absolute; bottom:0; right:0}
.main04 .info{position:absolute; top:50%; left:30px; transform:translateY(-50%); z-index:2}
.main04 .info p{color:rgba(255,255,255,0.8)}
.main04 .info h3{color:#fff; margin-top:10px}

.main05{margin-top:150px}
.main05 li{width:calc(25% - 20px) !important}
.main05 .topsns li{width:auto !important}

.sub > div{position:relative}
.sub > * + *, .sub + .sub{margin-top:100px}
.sub .title{position:absolute; top:50%; left:0; width:100%; transform:translateY(-50%); text-align:center}
.sub .title h2{color:#fff; animation:fadeInUp 0.8s 1 forwards; -webkit-animation:fadeInUp 0.8s 1 forwards; animation-delay:0.05s}
.sub .title p{margin-top:20px; color:#fff; animation:fadeInUp 0.8s 1 forwards; -webkit-animation:fadeInUp 0.8s 1 forwards; animation-delay:0.05s}
.sub .title p *{color:#fff; display:inline-block}
@-webkit-keyframes fadeInUp {
    0% {
        opacity:0;
        -webkit-transform:translate3d(0, 100%, 0);
        transform:translate3d(0, 100%, 0)
    }
    100% {
        opacity:1;
        -webkit-transform:none;
        transform:none
    }
}
@keyframes fadeInUp {
    0% {
        opacity:0;
        -webkit-transform:translate3d(0, 100%, 0);
        -ms-transform:translate3d(0, 100%, 0);
        transform:translate3d(0, 100%, 0)
    }
    100% {
        opacity:1;
        -webkit-transform:none;
        -ms-transform:none;
        transform:none
    }
}
.sub .subtitle{color:#999; margin-bottom:30px}
.sub .flex .subtitle{margin:0}
.sub .flex .noti{display:block; font-weight:500; margin-bottom:20px; color:#0f83f1}
#particles{overflow:hidden; background:linear-gradient(45deg, #021955, 40%, #000)}
.sub h3{position:relative; margin-bottom:10px}
.sub h3 *{font-size:30px}
.sub h3::before{content:''; position:absolute; top:0; left:-12px; width:8px; height:8px; background:#0f83f1; border-radius:100%}
.sub .bigtit{font-size:60px; font-style:italic}

.intro_img ul{margin:0 -15px}
.intro_img li{display:inline-block; width:calc(25% - 30px); margin:0 15px; position:relative}
.intro_img .makelist li{width:calc((100% - 90px)/3)}
.intro_img .img{border-radius:100%; position:relative}
.intro_img .img span{position:absolute; top:50%; left:0; width:100%; transform:translateY(-50%); text-align:center; font-size:24px; color:#fff; z-index:2; text-shadow:3px 6px 12px rgba(0,0,0,0.5)}
.intro_img .tit{font-weight:bold; margin:20px 0 10px 0}
.intro_img li:hover .img img{-webkit-transform:scale(1.1); transform:scale(1.1); -webkit-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out}

.intro03{background:url('/layouts/tekville/image/intro03.png') center; background-size:cover; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover}
.intro03.inside{background:url('/layouts/tekville/image/inside_back.png') center; background-size:cover; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover}
.intro03.susemi{background:url('/layouts/tekville/image/susemi.png') center}
.intro03 .inner{padding-top:150px}
.swiperRight{overflow:hidden; width:calc((100% - 1160px)/2 + 1160px); margin-left:calc((100% - 1160px)/2); padding-bottom:50px; position:relative}
.swiperRight .pagination04{max-width:1200px; bottom:0; top:auto}
.flex23 > div{width:350px}
.flex23 > p{width:calc(100% - 400px)}

.subImg{height:calc(100vh - 300px); min-height:650px; background-size:cover !important; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; overflow:hidden}
.subImg.teacherville{background:url('/layouts/tekville/image/teacherville_header01.png') center}
.subImg.historyback{background:url('/layouts/tekville/image/history_header.png') center}
.subImg.mapback{background:url('/layouts/tekville/image/map_header.png') center}
.subImg.cultureback{background:url('/layouts/tekville/image/culture_header.png') center}
.subImg.channelback{background:url('/layouts/tekville/image/channel_header.png') center}
.subImg.bookback{background:url('/layouts/tekville/image/book_header.png') center}
.subImg.tekvilienback{background:url('/layouts/tekville/image/tekvilien_header.png') center}
.subImg.newsback{background:url('/layouts/tekville/image/news_header.png') center}
.subImg.prback{background:url('/layouts/tekville/image/pr_header.png') center}
.subImg.en_prback{background:url('/layouts/tekville/image/en_pr_header.png') center}
.subImg.magazineback{background:url('/layouts/tekville/image/magazine_header.png') center}
.subImg.galleryback{background:url('/layouts/tekville/image/gallery_header.png') center}
.subImg.mallback{background:url('/layouts/tekville/image/mall_header.png') center}
.subImg.bumoback{background:url('/layouts/tekville/image/bumo_header.png') center}
.subImg.makeback{background:url('/layouts/tekville/image/makelab_header.png') center}
.subImg.breakfastback{background:url('/layouts/tekville/image/breakfast_header.png') center}
.subImg.gotoback{background:url('/layouts/tekville/image/goto_header.png') center}
.subImg.awardsback{background:url('/layouts/tekville/image/praise_header.png') center}
.subImg.vision{background:url('/layouts/tekville/image/vision_header.png') center}
.subImg.qnaback{background:url('/layouts/tekville/image/careers/qna_header.png') center}
.subImg.dev_vr{background:url('/layouts/tekville/image/careers/vr_back.png') center}
.subImg.dev_plf{background:url('/layouts/tekville/image/careers/dev_plf_back.png') center}
.subImg.dev{background:url('/layouts/tekville/image/careers/dev_back.png') center}
.subImg.dev_data{background:url('/layouts/tekville/image/careers/dev_data.png') center}
.subImg.security{background:url('/layouts/tekville/image/careers/security.png') center}
.subImg.pm_contents{background:url('/layouts/tekville/image/careers/pm_contents.png') center}
.subImg.pm_product{background:url('/layouts/tekville/image/careers/pm_product.png') center}
.subImg.pm_marketing{background:url('/layouts/tekville/image/careers/pm_marketing.png') center}
.subImg.pm_service{background:url('/layouts/tekville/image/careers/pm_service.png') center}
.subImg.pm_picture{background:url('/layouts/tekville/image/careers/pm_picture.png') center}
.subImg.publish{background:url('/layouts/tekville/image/careers/publish.png') center}
.subImg.design{background:url('/layouts/tekville/image/careers/design.png') center}
.subImg.md{background:url('/layouts/tekville/image/careers/md.png') center}
.subImg.cs{background:url('/layouts/tekville/image/careers/cs.png') center}
.subImg.consulting{background:url('/layouts/tekville/image/careers/consulting.png') center}
.subImg.hr{background:url('/layouts/tekville/image/careers/hr.png') center}
.subImg.accounting{background:url('/layouts/tekville/image/careers/accounting.png') center}
.subImg.pr{background:url('/layouts/tekville/image/careers/pr.png') center}
.subImg.enjoyback{background:url('/layouts/tekville/image/careers/enjoy_header01.png') center}
.subImg.lifeat, .careers_back{background:url('/layouts/tekville/image/careers/250415_lifeat_back.png') 45%}
.subImg.teamback{background:url('/layouts/tekville/image/careers/team_back.png') 45%}
.subImg.ssam{background:url('/layouts/tekville/image/ssam_header.png') 45%}
.subImg.chathess{background:url('/layouts/tekville/image/chathess_header.png') 45%}
.qnaback .underline:hover{color:#0f83f1; text-decoration:underline}
.subImg video{position:absolute; top:50%; left:50%; transform:translate(-50.1%, -50.1%); -ms-transform:translate(-50.1%, -50.1%); -webkit-transform:translate(-50.1%, -50.1%); min-width:100%; min-height:100%; width:auto; height:auto; object-fit:cover}
.bncon > * + *{margin-top:50px}
.logo01{width:53px; height:36px; background:url('/layouts/tekville/image/logo01.png') no-repeat center; vertical-align:middle; margin-right:10px}
.logo02{width:31px; height:36px; background:url('/layouts/tekville/image/logo02.png') no-repeat center; vertical-align:middle; margin:-10px 10px 0 0}
.logo03{width:65px; height:36px; background:url('/layouts/tekville/image/logo03.png') no-repeat center; vertical-align:middle; margin:-10px 10px 0 0}
.logo04{width:26px; height:36px; background:url('/layouts/tekville/image/logo04.png') no-repeat center; vertical-align:middle; margin:-10px 0 0 10px}

.toggle_list h3{margin-bottom:30px}
.toggle_list ul{border-top:3px solid #111; background:#fff}
.toggle_list li{border-bottom:1px solid #ddd}
.toggle_list .tit{padding:40px 20px}
.toggle_list .tit{display:flex; justify-content:space-between; align-items:center; cursor:pointer}
.toggle_list .tit *{font-size:24px; font-weight:500}
.toggle_list .tit p em{color:#ccc; margin-right:15px}
.toggle_list .tit p span{position:relative; display:inline-block; z-index:1}
.toggle_list .tit span::before{content:''; background:#00e3ff; position:absolute; bottom:0; left:0; width:100%; height:14px; transform:scaleY(0); transition:0.3s ease; z-index:-1}
.toggle_list .tit:hover span::before, .toggle_list li.on span::before{transform:scaleY(1)}
.toggle_list .tit i{position:relative; width:16px; height:16px}
.toggle_list .tit i::before, .toggle_list .tit i::after{content:''; position:absolute; top:50%; left:0; right:0; height:2px; background:#0f83f1; transition:0.25s; border-radius:5px}
.toggle_list .tit i::before{transform:rotate(90deg)}
.toggle_list .tit i::after{transform:rotate(180deg)}
.toggle_list li.on .tit i::before, .toggle_list li.on .tit i::after{transform:rotate(-180deg)}
.toggle_list .text{padding:40px 20px 60px 20px; margin-top:20px; border-top:1px solid #ddd; display:none}
.toggle_list .text div{margin-top:20px; text-align:right}

.familyList ul{margin:0 -15px}
.familyList li{display:inline-block; width:calc((100% - 60px)/6); margin:0 5px}
/*.familyList li{display:inline-block; width:calc(20% - 10px); margin:0 5px}*/
.familyList .text{margin-top:20px; text-align:center}
.familyList li:hover img{-webkit-transform:scale(1.1); transform:scale(1.1); -webkit-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out}

.historyTit{width:500px}
.history .historyList{width:calc(100% - 500px)}
.historyTit.fix{position:fixed; top:186px}
.historyList.fix{margin-left:500px}
.historyList .tar{margin-bottom:30px}
.historyList ul{border-top:2px solid #111; background:#fff}
.historyList li{padding:20px 0; border-bottom:1px solid #ddd}
.historyList li p{width:80px; font-weight:500}
.historyList li div{width:calc(100% - 80px)}
.historyList li, .historyList dl{display:table; width:100%}
.historyList li > *, .historyList dl *{display:table-cell}
.historyList dl + dl{margin-top:20px}
.historyList dt{width:30px; color:#999}
.historyList ul + h3{margin-top:50px}
h3 + .historyList{margin-top:0}
.historyList .nmonth p{width:80px}
.historyList .nmonth li div p{width:100% !important; font-weight:normal}
.historyList li div p + p{margin-top:20px}
.con_cmn{display:none}
.con_cmn.con1{display:block}

.map .root_daum_roughmap{width:100%}

.mapInfo{margin-top:50px}
.flex55 > *{width:calc(50% - 30px)}
.mapInfo .tit{font-weight:500; color:#0f83f1; font-size:24px; margin-bottom:20px}
.mapInfo dl{font-size:0}
.mapInfo dl *{display:inline-block}
.mapInfo dl + dl{margin-top:20px}
.mapInfo dt{font-weight:500; width:80px}
.root_daum_roughmap .wrap_map{height:500px !important}

.ceo{background:url('/layouts/tekville/image/ceo.png') bottom}
.ceohistory{background:url('/layouts/tekville/image/ceohistory.png') bottom}
.ceoList li p{width:160px}

.cultureList ul{margin:-15px}
.cultureList li{margin:15px; display:inline-block; width:calc((100% - 90px)/3); background:#fff; border:1px solid #0f83f1; padding:30px 20px; position:relative}
.cultureList .tit{margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid #0f83f1; font-weight:500; font-size:24px; color:#0f83f1}
.cultureList li::before{content:''; position:absolute; bottom:-10px; right:-10px; width:100%; height:100%; border:1px solid #0f83f1; z-index:-1}
.cultureList span{background:#111; color:#fff; display:inline-block; width:120px; height:36px; line-height:36px; border-radius:100px; text-align:center; font-size:14px; margin-top:40px}
.more{background:#111; color:#fff; display:inline-block; width:120px; height:36px; line-height:36px; border-radius:100px; text-align:center; font-size:14px}
.more:hover{color:#fff;}
.cultureList .more{margin-top:40px}
.cultureList li:nth-child(1):hover{background:url('/layouts/tekville/image/cultureList01.png') center}
.cultureList li:nth-child(2):hover{background:url('/layouts/tekville/image/cultureList02.png') center}
.cultureList li:nth-child(3):hover{background:url('/layouts/tekville/image/cultureList03.png') center}
.cultureList li:nth-child(4):hover{background:url('/layouts/tekville/image/cultureList04.png') center}
.cultureList li:nth-child(5):hover{background:url('/layouts/tekville/image/cultureList05.png') center}
.cultureList li:nth-child(6):hover{background:url('/layouts/tekville/image/cultureList06.png') center}
.cultureList li:nth-child(7):hover{background:url('/layouts/tekville/image/cultureList07.png') center}
.cultureList li:nth-child(8):hover{background:url('/layouts/tekville/image/cultureList08.png') center}
.cultureList li:nth-child(9):hover{background:url('/layouts/tekville/image/cultureList09.png') center}
.cultureList li:nth-child(10):hover{background:url('/layouts/tekville/image/cultureList10.png') center}
.cultureList li:nth-child(11):hover{background:url('/layouts/tekville/image/cultureList11.png') center}
.cultureList li:nth-child(12):hover{background:url('/layouts/tekville/image/cultureList12.png') center}
.cultureList li:nth-child(13):hover{background:url('/layouts/tekville/image/cultureList13.png') center}
.cultureList li:hover{background-size:cover !important; -webkit-background-size:cover !important; -ms-background-size:cover !important}

.culturepop{position:fixed; width:100%; max-width:600px; padding:0 20px; top:50%; left:50%; transform:translate(-50%, -50%); display:none; z-index:2}
.culturepop > div{padding:50px 30px; background:#fff; position:relative}
.culturepop > div::before{content:''; position:absolute; bottom:-10px; right:-10px; width:100%; height:100%; z-index:-1; background:rgba(0,0,0,0.1)}
.culturepop button{position:absolute; top:30px; right:40px}
.culturepop button::before{content:''; position:absolute; width:20px; height:2px; background:#111; transform:rotate(45deg)}
.culturepop button::after{content:''; position:absolute; width:20px; height:2px; background:#111; transform:rotate(135deg)}
.culturepop .img{margin:20px 0}
.culturepop p{max-height:30vh; overflow-y:auto}
.culturepop07 ul{display:table; table-layout:fixed; margin:30px 0}
.culturepop07 li{display:table-cell; position:relative}
.culturepop07 li + li{padding-left:30px}
.culturepop07 li + li::before{content:'+'; position:absolute; left:5px; top:43px; font-weight:bold}
.culturepop07 li + li:last-child::before{content:'=';}
.culturepop07 li label, .culturepop07 li p small{font-size:14px; font-weight:bold; vertical-align:baseline}
.culturepop07 li p{font-size:50px; font-weight:bold; line-height:1; overflow-y:visible}
.culturepop07 li:last-child p{color:#0f83f1}
.dim{position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.3); z-index:1; display:none}

.booktext, .imgtit{position:absolute; top:50px; left:30px; z-index:2}
.booktext .tit, .imgtit .tit{font-size:24px; color:#fff; font-style:italic; margin-bottom:30px}
.booktext .tit span{text-decoration:underline; text-underline-position:under; font-size:30px; color:#fff}
.booktext .text{color:rgba(255,255,255,0.8); font-style:italic}
.imgtit .tit{font-size:4vw; line-height:1.2em; font-style:normal}
.awards{position:absolute; top:50%; left:30px; transform:translateY(-50%); z-index:2}
.awards .tit{font-size:30px; font-weight:500; color:#fff}
.awards .text{color:#fff; margin-top:20px}
.pressList .img{border-radius:100%; width:18px; height:18px; vertical-align:middle; margin-right:10px}
.pressList li{padding:50px 20px}
.pressList li div{width:100%}
.pressList li p{width:180px}
.pressList li:hover > div{-webkit-transform:scale(1.02); transform:scale(1.02); -webkit-transition:all 0.4s ease-in-out; transition:all 0.4s ease-in-out}
.go{position:relative; width:20px; height:15px; vertical-align:middle; margin-left:5px; opacity:0.3}
.go::before{content:''; position:absolute; width:20px; height:2px; background:#111; top:4px; right:0}
.go::after{content:''; border-top:2px solid #111; border-right:2px solid #111; position:absolute; top:0; right:0; width:10px; height:10px; transform:rotate(45deg) translatez(0)}
.pressList li:hover .go{opacity:1}
.pressList li span{color:#999; font-size:16px; margin-left:5px}

.channel ul{margin:-10px}
.channel li{display:inline-block; width:calc((100% - 80px)/3); margin:10px}
.channel .info{background:rgba(0,0,0,0.7); position:absolute; bottom:0; left:0; width:100%; padding:15px; display:none}
.channel li:hover .info{display:block}
.channel .info p{color:#fff}
.channel .tit{overflow:hidden; white-space:nowrap; text-overflow:ellipsis; margin-bottom:10px; font-size:16px}
.channel .text{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; max-height:3.2em; font-size:14px}

.newstab{text-align:center}
.newstab li{display:inline-block; margin:0 50px; position:relative}
.newstab li a{color:#999}
.newstab li.on a{color:#0f83f1}
.newstab li.on::before{content:''; position:absolute; top:-15px; left:50%; transform:translateX(-50%); width:8px; height:8px; background:#0f83f1; border-radius:100%}
.newstab li:hover a{color:#111; text-decoration:underline; text-underline-position:under}
.newstab li:hover.on a{color:#0f83f1; text-decoration:none}

.newList li:hover > div{-webkit-transform:scale(1); transform:scale(1)}
.newList li p{width:320px}
.newList li span{margin-left:0}
.newList li .name{color:#111; vertical-align:middle; width:100px; display:inline-block}
.newList li .date{font-size:14px; vertical-align:middle}
.newList li a:hover{text-decoration:underline; text-underline-position:under}
.notice{width:45px; color:#fff; background:#ec0021; font-size:13px; height:24px; line-height:24px; vertical-align:middle; margin-right:10px}

.detail{border:1px solid #0f83f1; background:#fff; color:#0f83f1 !important}
.detail .arrow::before{background:#0f83f1}
.detail .arrow::after{border-top:1px solid #0f83f1; border-right:1px solid #0f83f1}
.detail:hover{background:#0f83f1; color:#fff !important}
.detail:hover .arrow::before{background:#fff}
.detail:hover .arrow::after{border-top:1px solid #fff; border-right:1px solid #fff}

.magazine{margin:-20px -10px}
.magazine li{margin:20px 10px; width:calc(25% - 20px); display:inline-block}
.magazine li .img{border:1px solid #ddd}
.magazine li:hover img, .channel li:hover img{-webkit-transform:scale(1.1); transform:scale(1.1); -webkit-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out}
.magazine .tit{margin:10px 0; font-weight:500; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; max-height:3.2em}
.magazine .date{font-size:14px; color:#999}
.magazine .subtit{color:#0f83f1; font-weight:500; text-decoration:underline; text-underline-position:under; margin-top:10px; font-size:14px}

.topsns li{display:inline-block}
.topsns li + li{margin-left:40px; position:relative}
.topsns li + li::before{content:'/'; position:absolute; top:50%; transform:translateY(-50%); left:-24px; font-size:18px; color:#999}

.tekvilien ul{margin:-15px}
.tekvilien li{width:calc((100% - 90px)/3); margin:15px}
.tekvilien li *{white-space:initial}
.tekvilien li .tit{font-weight:500}
.tekvilien li .subtit{font-size:14px; color:#999}
.tekvilien li .img{border-radius:0}

.wanted li{padding:15px 0}
.wanted li + li{border-top:1px solid #ddd}
.wanted li span{color:#0f83f1; font-weight:bold; margin-right:10px}
.wanted p{margin-top:30px; font-weight:500}

.peopleList li{display:flex; justify-content:space-between; align-items:center}
.peopleList li + li{margin-top:20px}
.peopleList li .img{width:200px; height:200px; border-radius:100%}
.peopleList li .text{width:calc(100% - 230px)}
.peopleList li p{color:#0f83f1; font-weight:500; margin-top:20px}
.peopleList li p span{color:#999; font-size:14px; font-weight:normal; margin-left:15px; vertical-align:middle}

.recruit{margin:-20px; text-align:center}
.recruit li{width:calc((100% - 240px)/6); margin:20px; display:inline-block}
.recruit li .tit{font-weight:500; margin:10px 0}
.recruit li .img{border-radius:100%; border:1px solid #ddd}
.recruit li .text{font-size:14px}
.recruit_info{margin-top:50px; text-align:center; padding:15px 0; background:#f3f3f3; border:1px solid #ddd}

.eduList li{width:calc((100% - 90px)/3); margin:15px}
.eduList .img{border-radius:0}
.eduList .img::before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:1}
.eduList .info{position:absolute; top:50%; transform:translateY(-50%); left:10px; width:calc(100% - 20px); text-align:center; z-index:2}
.eduList .info p{color:#fff; white-space:initial}
.eduList .info .tit{font-size:24px; font-weight:500}
.eduList .info .subtit{font-size:16px}

.pagenation{text-align:center}
.pagenation li{display:inline-block}
.pagenation li + li{margin-left:20px; padding-left:21px; position:relative}
.pagenation li + li::before{content:''; position:absolute; top:50%; transform:translateY(-50%); left:0; width:1px; height:10px; background:#ccc}
.pagenation li.on a{color:#0f83f1}
.pagenation li.prev a, .pagenation li.next a{text-indent:-9999px; display:inline-block; width:16px; height:16px; vertical-align:middle}
.pagenation li.prev a{background:url('/layouts/tekville/image/page_prev.png') center no-repeat; background-size:auto 100%}
.pagenation li.next a{background:url('/layouts/tekville/image/page_next.png') center no-repeat; background-size:auto 100%}

.page{padding-top:86px}
.page .pagetit{margin:50px 0; padding:50px 0; border-top:2px solid #111; border-bottom:1px solid #ddd}
.page .pagetit h3::before{content:none}
.page .pagetit .date{margin-top:15px}
.page .pagetit .date span{color:#999; position:relative}
.page .pagetit .date span + span{margin-left:10px; padding-left:11px}
.page .pagetit .date span + span::before{content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:10px; background:#ccc}
.page .pagetext{line-height:2; text-align:center}
.page .pagetext img{max-width:100%}
.sns{text-align:center; margin:100px 0}
.sns li{display:inline-block}
.sns li + li{margin-left:20px}
.sns button{width:40px; height:40px; text-indent:-9999px; background-size:100% 100% !important}
.sns .facebook{background:url('/layouts/tekville/image/icon_facebook.png')}
.sns .kakao{background:url('/layouts/tekville/image/icon_kakao.png')}
.sns .blog{background:url('/layouts/tekville/image/icon_blog.png')}
.sns .url{background:url('/layouts/tekville/image/icon_url.png')}
.sns .twitter{background:url('/layouts/tekville/image/icon_twitter.png')}

.tbl01{width:100%}
.tbl01 tr > *{padding:8px 10px; border:1px solid #ddd; text-align:center; background:#fff; vertical-align:middle; word-break:break-word}
.tbl01 th{background:#f3f3f3; font-weight:500; color:#111}
.privacy *{color:#666}
.privacy strong{margin-top:15px; display:block; color:#111}
.privacy em{color:#111; font-weight:500}
.privacy .btit{color:#0f83f1; margin:50px 0 15px 0}
.privacy p + table{margin:15px 0}
.privacy .pdleft{padding-left:25px}
.privacy .before_list{padding:50px; margin:50px 0; border-top:2px dashed #ddd; border-bottom:2px dashed #ddd; display:none}
.privacy a:hover{text-decoration:underline}

.vision_list{text-align:center}
.vision_list li{display:inline-table; width:400px; height:400px; border-radius:100%}
.vision_list li > div{display:table-cell; vertical-align:middle}
.vision_list li:nth-child(1){background:url('/layouts/tekville/image/vision01.png')}
.vision_list li:nth-child(2){background:url('/layouts/tekville/image/vision02.png')}
.vision_list li .tit{font-size:30px; font-weight:500}
.vision_list li:nth-child(1) .tit{color:#0f83f1}
.vision_list li:nth-child(2) .tit{color:#021955}
.vision_list li + li{margin-left:40px}
.core_list { display:flex; }
.core_list li{display:inline-block; width:calc((100% - 40px)/3); padding:180px 30px 50px 30px; text-align:center}
.core_list li + li{margin-left:20px}
.core_list li:nth-child(1){background:url('/layouts/tekville/image/core01.png') no-repeat center 50px #f3f3f3}
.core_list li:nth-child(2){background:url('/layouts/tekville/image/core02.png') no-repeat center 50px #f3f3f3}
.core_list li:nth-child(3){background:url('/layouts/tekville/image/core03.png') no-repeat center 50px #f3f3f3}
.core_list .tit{font-size:22px; font-weight:700; margin-bottom:20px} /* font-weight:500; */
.core_list .text{min-height:112px}

.team_list{display:flex; flex-wrap:wrap; margin:-20px}
.team_list li{width:calc((100% - 120px)/3); margin:20px}
.team_list .img{padding-bottom:100%}
.team_list li:hover .img img{-webkit-transform:scale(1.1); transform:scale(1.1); -webkit-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out}
.team_list .tit{margin:20px 0 10px}
.team_list .tit::before{content:none}
.team_sub{margin:10px -5px -5px; font-size:0}
.team_sub a{display:inline-block; border:1px solid #ccc; background:#fff; border-radius:100px; padding:5px 20px; margin:5px; font-size:16px}
.team_sub a:hover, .team_sub a.on{color:#fff; border:1px solid #0f83f1; background:#0f83f1}

.team_intro{background:#fff; margin:0 !important; padding:100px 0 150px; position:relative; z-index:1; overflow:hidden}
.team_intro .inner > * + *{margin-top:100px}
.team_intro h4{font-weight:bold; margin-bottom:15px}
.lifeat_go{margin-top:30px; text-align:center}
.team_intro .text p, .chk_li li{position:relative}
.chk_li li{padding:10px 0 0 30px}
.chk_li li::before{content:'✔️'; position:absolute; top:10px; left:0; font-size:15px}
.chk_li li + li{margin-top:10px; border-top:1px dashed #ddd}
.team_intro .team_sub{margin:-5px; text-align:center}
.team_intro .team_sub a{color:#999; padding:10px 25px}
.team_intro .team_sub a:hover, .team_intro .team_sub a.on{color:#fff}
.team_intro .bk_gray{background:#f3f3f3; padding:40px}
.team_intro .bk_gray > * + *{margin-top:30px}
.team_intro .info li{font-size:16px; color:#666; padding-left:7px; position:relative}
.team_intro .info li::before{content:''; position:absolute; top:10px; left:0; width:2px; height:2px; background:#aaa}
.team_intro .info li + li{margin-top:5px}
.info_ic{position:relative; padding-left:25px; margin-bottom:10px; font-weight:500}
.info_ic::before{position:absolute; top:-1px; left:0; font-size:16px}
.info_ic01::before{content:'⏰'}
.info_ic02::before{content:'🍔'}
.info_ic03::before{content:'✈️'}
.info_ic04::before{content:'📝'}
.info_ic05::before{content:'💙'}

.subImg.lifeat::before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.3)}
.lifeat .title{text-align:left; left:50%; transform:translateX(-50%); top:auto; bottom:15%}
.lifeat .title .tit{font-size:90px; color:#fff; line-height:1; margin-top:0; font-weight:bold}
.lifeat .title h2{font-family:'Patrick Hand', cursive; font-weight:400; letter-spacing:2px; font-style:italic}
#lifeat .main02_text p{opacity:1}
#lifeat .main02_img .swiper-slide{height:0; padding-bottom:75%}
#lifeat .btn{width:80%}
#lifeat .channel ul{margin:-20px -10px}
#lifeat .channel li{margin:20px 10px}
.life_tit{margin-top:10px}
.life_tit .num{font-size:15px; color:#999}
.life_tit .tit{font-size:22px; font-weight:bold}
.life_tit .hash{font-size:15px}

.lifeat_list{position:absolute; top:0; right:20px; width:400px; padding:40px; border-radius:20px; background:#f3f3f3}
.lifeat_list h4{font-family:'Patrick Hand', cursive}
.lifeat_list ul{margin-top:40px}
.lifeat_list li + li{margin-top:5px; padding-top:5px; border-top:1px dashed #ddd}
.lifeat_list li a{color:#666; font-size:15px; vertical-align:middle}
.lifeat_list li.on a{color:#111; font-weight:bold}
.lifeat_head{background:#0f83f1}
.lifeat_box{margin-top:185px; } /* padding-bottom:150px */
.lifeat_con{max-width:calc(100% - 440px)}
.lifeat_con span{font-family:'Patrick Hand', 'Noto Sans KR', cursive; font-style:italic; font-size:22px; color:#999; margin-bottom:20px; display:block}
.lifeat_con h2{line-height:1.3}
.lifeat_con > * + *{margin-top:50px}
.lifeat_con img{max-width:100%}
.lifeat_con h4{font-weight:bold; margin-bottom:35px; color:#0f83f1}
.lifeat_con .mt{margin-top:75px}
.lifeat_con small{font-size:15px; margin:20px 0 30px; display:block; font-style:italic}
.lifeat_con .box{background:#f3f3f3; padding:40px}
.lifeat_con .box ul{margin-top:20px}
.lifeat_con .flexbox li + li{margin-left:5px}
.lifeat_con .flexbox small{text-align:right; font-size:15px; color:#999; margin:5px 0 0 0}
.swiper_life{width:100%; max-width:1160px; overflow:hidden; position:relative}
.swiper_life .pagination04{display:none;}
.lifeat_con strong{font-weight:bold}
.lifeat_con .img_text{display:flex; align-items:center; justify-content:space-between}
.lifeat_con .img_text img{width:300px}
.lifeat_con .img_text > div{width:calc(100% - 320px)}

.careers{width:100% !important; margin-left:0 !important}
.careers_top{position:relative; height:100vh; width:100%; overflow:hidden; background:url('/layouts/tekville/image/careers/careers.png') no-repeat center; background-size:cover}
.careers_top::before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.3); z-index:1}
.careers_top .inner{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:2; text-align:center}
.careers_top .tit{overflow:hidden}
.careers_top .tit + .tit{margin-top:10px}
.careers_top .tit span{font-size:80px; font-weight:bold; line-height:1; color:#fff; position:relative; top:150px; animation:title_lg 0.9s ease-in-out .2s forwards}
@keyframes title_lg{0%{opacity:0; top:150px} 100%{opacity:1; top:0px}}
.careers h3::before{content:none}
.careers > * + *{margin-top:150px}
.careers .bk_gray{margin-top:0 !important; padding:100px 20px; background:#f3f3f3}
.car_tit{margin-bottom:30px}
.car_tit p{font-size:16px; color:#777} 
.careers .life_tit{padding:15px 20px; background:#f3f3f3; margin-top:0}
.careers .life_tit .tit{font-size:15px; margin:0}
.careers .life_tit .num{font-size:14px; margin-bottom:5px}
.career02::before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.2); z-index:1}
.career02 > div{position:absolute; top:50%; transform:translateY(-50%); left:0; width:100%; text-align:center; z-index:2}
.career02 p{color:#fff}
.careers .more{position:absolute; top:26px; right:20px}
.careers .career02 .more{position:relative; top:auto; right:auto; margin:20px auto 0; display:block}

.searchform{text-align:center}
.searchform div{width:400px; margin:0 auto; background:#fff; border-radius:100px; border:1px solid #ddd; display:inline-grid; grid-template-columns:auto 30px; column-gap:20px; padding:0 20px}
.searchform input[type="text"]{border:none; box-shadow:none; width:100%; height:50px; background:none; padding:0; font-size:18px}
.searchform .btn-search i{font-size:22px; vertical-align:sub}
.searchform .btn:hover i{animation:none}


@media (max-width:1200px) {
    .gnbLeft{display:none}
    .sub, .main, .sub, .main_swiper > .swiper-wrapper{width:100%; margin-left:0}

    .main01 .con .tit{font-size:10vw}
    .main01 .con .subtext{font-size:2vw}

    .sub > * + *, .sub + .sub{margin-top:7vw}
    .sub h3, .sub h3 *{font-size:2.7vw}
    .sub h3::before{top:3px; left:-8px; width:6px; height:6px}

    .subImg{height:50vw; min-height:auto}
    .sub .title h2{font-size:4vw}
    .sub .title p{font-size:2vw}

    .intro03 .inner{padding:10vw 15px}
    .intro_img .img span{font-size:20px}
    .swiperRight{width:100%; margin-left:0; padding:0 15px 30px 15px}
    .swiperRight .pagination04{width:calc(100% - 30px); left:15px}
    .booktext{top:20px; left:20px}
    .booktext .tit span{font-size:2.7vw}
    .sub .bigtit{font-size:5vw}
	
	.lifeat_box{margin-top:145px}
	.lifeat_list{width:350px; padding:40px 20px; border-radius:10px; right:15px}
	.lifeat_con{max-width:calc(100% - 370px)}
	
	.careers h2 { font-size:4.0vw; font-weight: bold; }
	.careers h3 { font-size:2.7vw; font-weight: bold; }
	
	
	
}


@media (max-width:767px) {
    .backLine{left:0; width:100%}

    .main01, .main01 .swiper-container{height:80vh}
    .main01 .con .tit{font-size:6.5vh}
	.lifeat .title .tit{font-size:40px}
    .main01 .con .subtext{font-size:2.4vh; margin-top:20px}
    .main01 .swiper-pagination-bullet{width:10px; height:10px; background:#fff; text-indent:-9999px; border-radius:100%}
    .main01 .swiper-pagination-bullet + .swiper-pagination-bullet{margin-left:5px}
    .iconmouse{display:none}
    .main > div + div{padding-top:7vh}
    .main01 video, .main01 img, .main02_img video, .main02_img img{width:100%; height:100%}
    .main02_img{float:none; width:100%}
    .main02_img .swiper-slide{position:relative; overflow:hidden; padding-bottom:100%; height:auto}
    .main02_img .swiper-slide video{ transform:translate(0,0); -ms-transform:translate(0,0); -webkit-transform:translate(0,0); top:0; left:0}
    .main02_text{width:100%; position:relative}
    .main02_text .tit{font-size:3.2vh; margin:20px 0 10px 0}
    .main02_text .text{width:100%}
    .main02_btn{bottom:auto; top:-40px; left:auto; right:0}
    .main02_btn button{width:40px; height:40px}
    .main02_btn button svg{width:16px}
    .main03 ul{margin:-10px 0}
    .main03 li{width:100%; margin:10px 0}
    .main03 h2{font-size:3.2vh; margin-top:10px}
    .main03 .text{margin:10px 0 20px 0}
    .main04 li{width:100% !important; position:relative !important}
    .main04 li .img{padding-bottom:50%}
    .main04 .info{left:20px}
    .main04 .info h3{font-size:2vh}

    .sub > h4{padding:0 10px}
    .sub > * + *, .sub + .sub, .main05{margin-top:7vh}
    .subImg{height:50vh}
    .notice{font-size:12px; height:20px; line-height:20px; width:40px; margin-right:5px}
    .sub .title h2{font-size:3.2vh}
    .sub .title p{font-size:14px}
    .sub h3, .sub h3 *{font-size:3vh}
    .sub .subtitle{margin-bottom:15px}
    .sub .flex .subtitle{margin-bottom:20px}
    .intro03 .inner{padding:7vh 15px}
    .intro_img ul, .recruit{margin:-20px -5px}
    .intro_img li, .recruit li{width:calc(50% - 10px); margin:20px 5px}
    .intro_img p{white-space:initial}
    .intro_img .makelist li{width:calc(50% - 10px)}
    .bncon > * + *{margin-top:25px}
    .toggle_list h3{margin-bottom:10px}
    .toggle_list .tit{padding:20px 0}
    .toggle_list .tit *{font-size:2.4vh}
    .toggle_list .tit p em{display:block}
    .toggle_list .text{padding:20px 0}
    .familyList ul{margin:-5px}
    .familyList li{width:calc(50% - 10px); margin:5px}
    .familyList .text{margin-top:10px}
    .historyTit{width:100%}
    .historyTit.fix{position:relative; top:auto}
    .history .historyList{width:100%}
    .historyList.fix{margin-left:0}
    .mapInfo .tit{font-size:2.4vh; margin-bottom:10px}
    .mapInfo{margin-top:30px}
    .mapInfo > div + div{margin-top:30px}
    .mapInfo dt{width:65px}
    .mapInfo dd{width:calc(100% - 65px)}
    .ceo, .ceohistory{background-position-x:30%}
    .subImg.bumoback, .subImg.chathess{background-position-x:76%}
    .root_daum_roughmap .wrap_map{height:300px !important}
    .pressList li{padding:20px 0}
    .pressList li p{width:115px}
    .pressList li span{font-size:14px}
    .newList li .date{font-size:12px}
    .booktext, .imgtit{top:15px; left:15px}
    .booktext .tit, .imgtit .tit{font-size:16px; margin-bottom:15px}
    .channel li{width:calc(50% - 20px)}
    .main04 .text{height:3em}
    .magazine li{width:calc(50% - 10px); margin:20px 5px}
    .cultureList ul{margin:-10px 0}
    .cultureList li{width:100%; margin:10px 0}
    .cultureList .tit{font-size:2.4vh}
    .culturepop > div{padding:20px 10px}
    .culturepop button{top:20px; right:30px}
    .booktext .tit span{font-size:2.4vh}
    .peopleList li .img{width:100px; height:100px}
    .peopleList li .text{width:calc(100% - 115px)}
    .recruit li *{white-space:initial}
    .sub .bigtit{font-size:5vh}
    .eduList ul{white-space:initial; overflow:hidden; margin:-10px 0}
    .eduList li{width:100%; margin:10px 0}
    .eduList .img{padding-bottom:72%}
    .eduList .img::before{content:none}
    .eduList .img img{top:50%; transform:translateY(-50.1%)}
    .eduList .info{position:relative; top:0; left:0; transform:translateY(0); width:100%; text-align:left}
    .eduList .info p{color:#111}
    .eduList .info .subtit{font-size:14px}
    .eduList .info .tit{font-size:20px; margin:10px 0 5px 0}
    .channel ul{margin:-5px}
    .channel li{width:calc(50% - 10px) !important; margin:5px}
    .channel li:hover .info{display:none}
    .booktext .text{font-size:12px}
    .go{display:none}
    .awards{left:20px}
    .awards .tit{font-size:3vh}
    .awards .text{margin-top:10px}
    .topsns{text-align:center; margin:20px 0}
    .magazine .date{font-size:12px}
    .logo01{width:5vh; height:3.2vh; background-size:auto 100%; margin-right:5px}
    .logo02{width:3vh; height:3.2vh; background-size:auto 100%; margin:-5px 5px 0 0}
    .logo03{width:6vh; height:3.2vh; background-size:auto 100%; margin:-5px 5px 0 0}
    .intro03.inside, .intro03{padding-bottom:25%}
    .page{padding-top:66px}
    .page .pagetit{padding:30px 0; margin:30px 0}
    .page .pagetit .date{margin-top:10px}
    .page .pagetit .date span{font-size:13px}
    .sns{margin:30px 0}
    .sns button{width:30px; height:30px}
    .privacy .btit{color:#0f83f1; margin:30px 0 10px 0}
    .privacy strong{margin-top:10px}
    .privacy .pdleft{padding-left:0}

    .vision_list li{width:80vw; height:80vw; background-size:100% 100% !important}
    .vision_list li .tit{font-size:3vh; margin-bottom:10px}
    .vision_list li + li, .core_list li + li{margin:20px 0 0 0}
    .core_list { display:block; }
	.core_list li{width:100%; padding:100px 20px 20px 20px; background-size:60px 60px !important; background-position:center 25px !important}
    .core_list .tit{font-size:2.4vh; margin-bottom:10px}
    .core_list .text{min-height:auto}
	
	/* .sub_intro{padding-bottom:15%} */
	.sub_intro .subImg{height:30vh; min-height:30vh}
	.sub_intro .sub{margin-top:30vh}
	.team_intro{padding:10% 0 15%}
	.team_intro .inner > * + *{margin-top:10%}
	.team_intro h4, .lifeat_tit{margin-bottom:10px}
	.team_intro .text p, .chk_li li{font-size:15px}
	.team_intro .bk_gray{padding:20px}
	.team_intro .info li{font-size:14px}
	.team_intro .team_sub a{padding:5px 15px}
	.info_ic{padding-left:20px}
	.info_ic::before{font-size:13px}
	.team_intro select{width:100%}

	.team_list{margin:-15px -5px}
	.team_list li{width:calc(100% - 10px); margin:15px 5px}
	.team_list .img, #lifeat .channel .img{padding-bottom:56%}
	.team_list .img img, #lifeat .channel .img img{top:50%; transform:translateY(-50.1%)}
	.team_list li:hover .img img{transform:translateY(-50.1%); transition:none}
	.team_list .tit{margin:10px 0 5px}
	.team_sub{margin:5px -5px -5px}
	.team_sub a{font-size:14px}

	#lifeat .btn{width:100%}
	.life_tit .tit{font-size:18px}
	#lifeat .channel ul{margin:-10px -5px}
	#lifeat .channel li{width:calc(100% - 10px) !important; margin:10px 5px}
	.life_tit .hash, .life_tit .num{font-size:13px}

	.lifeat_box{margin-top:65px; padding:10% 10px 15%}
	.lifeat_con{max-width:100%}
	.lifeat_con > * + *{margin-top:30px}
	.lifeat_con span{font-size:14px; margin-bottom:10px}
	.lifeat_list{position:relative; width:100%; padding:20px; margin-top:50px; top:auto; right:auto;}
	.lifeat_list select{margin-top:10px; width:100%}
	.lifeat_con h4{margin-bottom:20px}
	.lifeat_con .mt{margin-top:35px}
	.lifeat_con .box{padding:20px}
	.lifeat_con .box ul{margin-top:10px}
	.swiper_life{padding-bottom:20px}
	.swiper_life .pagination04{display:block; top:auto; bottom:0}

	.careers > * + *{margin-top:10%}
	.careers .more{position:relative; top:auto; right:auto; margin:20px auto; display:block}
	.career02{padding-bottom:75%}
	.career02 img{width:auto; height:100%}
	.careers .channel li{width:calc(100% - 10px) !important; margin:5px}
	.car_tit p{font-size:14px}
	.careers .bk_gray{padding:10% 10px}
	.careers .bk_gray h3{line-height:1.3; margin-bottom:10px}
	.careers_top .tit span{font-size:60px}

	.careers h2 { font-size:3.0vh; font-weight: bold; }
	.careers h3 { font-size:3.0vh; font-weight: bold; }
	
	.searchform div{width:calc(100% - 200px); padding:0 15px}
    .searchform input[type="text"]{height:40px; font-size:15px}
}