@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Paytone+One&display=swap');
/*font-family: 'Paytone One', sans-serif;*/


/*********layout*********/
html {overflow-x:hidden; width:100%;}
html,body {margin:0; padding:0; width:100%; height:100%;}
.w_1400 {position:relative; width:1400px; margin:0 auto;}
img {-webkit-perspective:1;}

div, span, article, section, header, footer, aside, p, ul, li, fieldset, legend, label, a, nav, form {
	box-sizing: border-box;
}


/* header, footer */
#header {position:fixed; top:0; left:0; width:100%; z-index:100; height:120px;  transition:0.2s;}
#header:hover {background:rgba(255, 255, 255, 0.8);}
#header.bg_white {background:rgba(255, 255, 255, 0.8);}
#header h1.logo {float:left; padding:30px 0 0 4%;}
#header h1.logo img {height:60px; width:auto;}
#header #menu {float:right; padding-right:4%;}
#header #menu ul.menu_1depth {height:120px; text-align:right;}
#header #menu ul.menu_1depth li {position:relative; float:left; padding-right:60px;}
#header #menu ul.menu_1depth li:last-child {padding-right:0;}
#header #menu ul.menu_1depth li a {display:inline-block; font-size:20px; font-weight:700; color:rgba(0, 0, 0, 1); transition:0.2s; line-height:120px;}
#header #menu ul.menu_1depth li.on a {color:#20bdbe}
#header #menu ul.menu_1depth li.menu_sns {padding-right:24px;}
#header #menu ul.menu_1depth li.menu_sns a {width:24px; text-indent:-9999px; font-size:0;}
#header #menu ul.menu_1depth li.menu_sns.sns_insta a {background:url("../images/sns_insta.png") no-repeat center center; background-size:28px 28px;}
#header #menu ul.menu_1depth li.menu_sns.sns_youtube a {background:url("../images/sns_youtube.png") no-repeat center center; background-size:28px 28px;}
#header #menu ul.menu_1depth li.menu_sns.sns_blog a {background:url("../images/sns_blog.png") no-repeat center center; background-size:28px 28px;}
#header #menu ul.menu_1depth li:hover ul.menu_2depth {display:block;}
#header #menu ul.menu_1depth:hover li a {opacity:0.5;} 
#header #menu ul.menu_1depth:hover li:hover a {opacity:1;}
#header #menu ul.menu_1depth ul.menu_2depth {display:none; position:absolute; left:50%; top:119px; width:240px; padding:24px 0; margin-left:-150px; background:rgba(255, 255, 255, 0.8); box-shadow:0 10px 20px rgba(0, 0, 0, 0.2);}
#header #menu ul.menu_1depth ul.menu_2depth li {text-align:center; padding:0; float:none;}
#header #menu ul.menu_1depth ul.menu_2depth li a {font-size:16px; font-weight:600; line-height:60px;}
#header #menu ul.menu_1depth ul.menu_2depth li a:hover {text-decoration:underline;}
#header .m_cate {display:none;}
#header .m_cate_close {display:none;}
#header.fixed {background:rgba(255, 255, 255, 0.8);}

#footer {position:relative; padding:60px 4% 60px 4%; background:#000;}
#footer .foot_cont {display:flex; gap:40px; position:relative; color:#fff;}
#footer .foot_cont .foot_left {}
#footer .foot_cont .foot_left img {width:100px;}
#footer .foot_cont .foot_center {font-size:16px; line-height:24px; font-weight:400;}

/* main */
.main_visual .cont_pagew {max-width: 1350px; width: 100%; margin: 0 auto; padding: 0 15px;}
.main_visual .intro {width: 100%; height: 100vh; position: relative; background:#000;}
.main_visual .intro .logo {display: flex; justify-content: center; align-items: center; width: 16rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; transition: all 1.5s ease; transform: translate(-50%, -50%) scale(0.8)}
.main_visual .intro .logo img {max-width: 100%}
.main_visual .intro .logo.on {transform: translate(-50%, -50%) scale(1.2)}
.main_visual .intro .logo.go {opacity: 0}
.main_visual .sec01 .bg {position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 100vh; overflow: hidden; height: calc(var(--vh, 1vh)*100)}
.main_visual .sec01 .bg .clip {display: none; clip-path: inset(77% 40% 13% 40%); transition: all 3s cubic-bezier(0.25, 1, 0.3, 1); transform: translateY(30%); margin-top: -30px; object-fit: cover; position: absolute; height: 100vh; width: 100vw;}
.main_visual .sec01 .bg .clip.on {display: block; transform: translateY(0%)}
.main_visual .sec01 .bg .clip.on2 {clip-path: inset(31% 37% 31% 37%)}
.main_visual .sec01 .bg .clip.active {clip-path: inset(0% 0%); width: 100%; height: 100%; transform: translateY(0%) scale(1); transition: all 1s ease-in-out; margin-top: 0%;}
.main_visual .sec01 .bg .tit {font-size: 5.8rem; font-weight: bold; letter-spacing: -2.05px; line-height: 1.5; position: absolute; bottom: 152px; opacity: 0; transition: all 1s}
.main_visual .sec01 .bg .tit.on {opacity: 1; transform: translateY(-30%)}
.swiper {width: 100%; height: 100%;}
.swiper-slide {text-align: center; display: flex; justify-content: center; align-items: center;}
.swiper-slide img {display: block; width: 100%; height: 100%; object-fit: cover;}
:root {
    --swiper-theme-color: #000 !important;
}



/* container */
#container_team {padding-bottom:140px; overflow-x:hidden; word-break:keep-all;}
#container_team.cont_main {padding-bottom:0;}
.pc_only {display:block;}
.m_only {display:none;}


/*sub*/
.sub_tit {text-align:center; padding:200px 0 0 0;}
.sub_tit span {font-size:16px; font-weight:700; border:1px solid #000; border-radius:100px; padding:12px 40px;}
.sub_tit h4 {font-size:70px; font-weight:400; height:78px; font-family: 'Paytone One', sans-serif; padding-top:20px;}
.paddingbottom {padding-bottom:80px;}

.about_cont {position:relative; padding:480px 0 0 0;}
.about_cont .about_tit h2 {position:relative; font-size:95px; font-weight:800; padding-bottom:80px;}
.about_cont .about_tit h2:after {position:absolute; left:210px; top:-70px; content:""; width:189px; height:220px; background:url("../images/about_center.png") no-repeat;}
.about_cont .about_tit h4 {font-size:36px; line-height:54px; font-weight:700; padding-bottom:16px;}
.about_cont .about_tit p {font-size:20px; line-height:34px; font-weight:400; padding-bottom:40px;}
.about_cont:after {position:absolute; animation: fadein 3s; left:0; top:0; width:100%; height:400px; content:""; z-index:-1; background:url("../images/about_bg.png") no-repeat center top / 100% 100%;}
ul.num_list {}
ul.num_list li {padding:24px 0;}
ul.num_list li h4 {font-size:24px; line-height:40px; padding-bottom:10px;}
ul.num_list li h4 span {display:inline-block; width:40px; height:40px; background:#000; border-radius:999px; font-size:16px; color:#fff; text-align:center; margin-right:18px;}
ul.num_list li p {font-size:16px; line-height:26px;}
.team_cont {padding-top:80px;}
.team_cont ul {display:flex; flex-wrap:wrap; gap:60px 3%;}
.team_cont ul li {width:31.3%; text-align:Center;}
.team_cont ul li .team_img {transition:0.3s;}
.team_cont ul li .team_img img {width:100%;}
.team_cont ul li .team_img h4 {display:block; transition:0.3s;}
.team_cont ul li .team_img h5 {display:none; transition:0.3s;}
.team_cont ul li .team_img:hover h4 {display:none;}
.team_cont ul li .team_img:hover h5 {display:block;}
.team_cont ul li p {font-size:24px; font-weight:700; padding-top:24px;}
.work_cont {padding-top:80px;}
.work_cont ul {border-top:2px solid #000;}
.work_cont ul li {padding:40px 0; border-bottom:1px solid #ddd;}
.work_cont ul li p {padding-left:58px; padding-right:40px;}
#map {width:100%; height:500px; background:#eee; text-align:center; line-height:500px;}
.contact_cont {}
.contact_cont ul {display:flex; text-align:center; border-top:2px solid #000; border-bottom:1px solid #ddd; margin-top:60px;} 
.contact_cont ul li {flex:1; margin:40px 0; border-right:1px solid #ddd;}
.contact_cont ul li:last-child {border-right:none;}
.btn_contact {text-align:center; padding-top:40px;}
.btn_contact a {display:inline-block; background:#20bdbe; font-size:20px; font-weight:700; color:#fff; border-radius:999px; text-align:center; width:300px; line-height:74px;}
.btn_contact a span {padding-right:26px; background:url("../images/icon_more.png") no-repeat center right / 10px auto;}
.btn_contact a:hover {background:#009c9d;}

.port_tit {font-size:16px; color:#222; padding:12px 8px 0 8px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; text-align:center;}
.port_list {}
.port_list .gall_img {background:#000; height:auto !important; max-height:auto !important;}
.port_list .gall_img img {width:100%; transition:all 0.2s linear;}
.port_list .gall_img:hover img {opacity:0.8; transform: scale(1.05);}
.port_list .gall_img p {transition:0.3s; opacity:0; position:absolute; left:0; top:48%; right:0; bottom:0; font-size:16px; text-align:center; vertical-align:middle; color:#fff;}
.port_list .gall_img:hover p {opacity:1;}
.port_subject {position:relative; font-size:30px; text-align:center; font-weight:bold; padding:200px 0 40px 0;}
.port_subject:after {position:absolute; left:50%; margin-left:-40px; bottom:0; width:80px; height:2px; background:#000; content:"";}

.licensed_cont {padding-top:80px;}
.licensed_cont h2 {}
.licensed_cont h2 img {width:100%;}
.licensed_cont h4 {font-size:36px; line-height:54px; font-weight:700; padding-bottom:16px; padding-top:40px;}
.licensed_cont p {font-size:20px; line-height:34px; font-weight:400;}


/*** PC 축소 ***/
@media screen and (max-width:1400px) {
.w_1400 {width:90%; margin:0 5%;}

}


/*** 태블릿가로버전 ***/
@media screen and (max-width:1220px) {
#header #menu ul.menu_1depth li {padding-right:50px;}

/*sub*/

}



/*** 태블릿세로버전 ***/
@media screen and (max-width:1023px) {
#header h1.logo {}
#header h1.logo img {}
#header #menu ul.menu_1depth li {padding-right:40px;}


/*sub*/
#container_team {padding-bottom:80px;}

}



/*** 모바일버전 ***/
@media screen and (max-width:767px) {
:root {--swiper-navigation-size:24px !important;}
.pc_only {display:none;}
.m_only {display:block;}
#header {height:70px;}
#header h1.logo {padding-top:18px;}
#header h1.logo img {height:34px;}
#header .m_cate {display:block; position:fixed; right:4%; top:10px;}
#header .m_cate button {text-indent:-9999px; width:50px; height:50px; background:url("../images/quick_category.png") no-repeat center center / 30px 30px;}
#header .m_cate_close {display:none; position:fixed; right:4%; top:15px;}
#header .m_cate_close.on {display:block;}
#header .m_cate_close button {text-indent:-9999px; width:50px; height:50px; background:url("../images/quick_close_white.png") no-repeat center center / 30px 30px;}

/*nav*/
.dim_layer {display:none;}
.dim_layer.on {display:-webkit-box;position: fixed;top: 0;left: 0;z-index: 1000;width: 100%;height: 100%;background: rgba(0,0,0,0.7);}
#header #menu {width:100%; height:100%; overflow-x:hidden; position:fixed; top:0; right:-100%; z-index:9999; background:#000; transition:0.4s;}
#header #menu ul.menu_1depth {height:auto; padding-top:24%;}
#header #menu ul.menu_1depth li {float:none; padding:0;}
#header #menu ul.menu_1depth li a {display:inline-block; width:100%; color:#fff; text-align:left; padding-left:12%; font-size:24px; line-height:70px;}
#header #menu ul.menu_1depth ul.menu_2depth {display:block; position:static; width:100%; margin:0; background:none; padding:0 0 20px 0;}
#header #menu ul.menu_1depth ul.menu_2depth li {}
#header #menu ul.menu_1depth ul.menu_2depth li a {line-height:40px; color:#ddd;}
#header #menu ul.menu_1depth li.menu_sns {float:left;}
#header #menu ul.menu_1depth li.menu_sns a {line-height:100px;}
#header #menu ul.menu_1depth li.menu_sns.sns_insta {padding-left:12%;}
#header #menu ul.menu_1depth li.menu_sns.sns_insta a {background:url("../images/sns_insta_w.png") no-repeat center center; background-size:28px 28px;}
#header #menu ul.menu_1depth li.menu_sns.sns_youtube a {background:url("../images/sns_youtube_w.png") no-repeat center center; background-size:28px 28px;}
#header #menu ul.menu_1depth li.menu_sns.sns_blog a {background:url("../images/sns_blog_w.png") no-repeat center center; background-size:28px 28px;}


#footer {padding:40px 4%;}
#footer .foot_cont {display:block;}
#footer .foot_cont .foot_left img {width:60px;}
#footer .foot_cont .foot_center {font-size:14px; padding-top:24px;}

.main_visual .intro .logo {width:34%;}

/*sub*/
#container_team {padding-bottom:60px; word-break:keep-all;}
.sub_tit {padding-top:100px; padding-left:4%; padding-right:4%;}
.sub_tit span {font-size:13px; border:1px solid #000; padding:8px 24px;}
.sub_tit h4 {font-size:32px; line-height:30px; height:auto;}
.paddingbottom {padding-bottom:30px;}

.about_cont {padding:300px 0 0 0;}
.about_cont .about_tit h4 {font-size:30px; line-height:40px; }
.about_cont .about_tit p {font-size:16px; line-height:26px; padding-bottom:20px;}
.about_cont:after {height:260px; background:url("../images/about_bg_m.png") no-repeat center top / 100% 100%;}
ul.num_list {}
ul.num_list li {padding:14px 0;}
ul.num_list li h4 {font-size:18px; line-height:28px; padding-bottom:6px;}
ul.num_list li h4 span {width:28px; height:28px; font-size:14px; margin-right:12px;}
ul.num_list li p {font-size:14px; line-height:24px;}

.team_cont {padding-top:40px;}
.team_cont ul {gap:30px 4%;}
.team_cont ul li {width:48%;}
.team_cont ul li p {font-size:14px; padding-top:12px;}
.work_cont {padding-top:30px;}
.work_cont ul {border-top:1px solid #000;}
.work_cont ul li {padding:24px 0;}
.work_cont ul li p {padding-left:40px; padding-right:4%;}
#map {height:300px; line-height:300px;}
.contact_cont {}
.contact_cont ul {display:block; border-top:1px solid #000; border-bottom:none; margin-top:40px;} 
.contact_cont ul li {margin:0; padding:24px 0; border-right:none; border-bottom:1px solid #ddd;}
.btn_contact {padding-left:4%; padding-right:4%;}
.btn_contact a {font-size:16px; width:100%; line-height:54px;}
.btn_contact a span {padding-right:20px; background:url("../images/icon_more.png") no-repeat center right;}
.btn_contact a:hover {}


#container_team .gall_row .col-gn-3 {width:100%;}
.port_tit {font-size:14px;}
.port_subject {font-size:24px; padding:100px 0 30px 0;}
.port_subject:after {margin-left:-30px; width:60px;}

    
.licensed_cont {padding-top:40px;}
.licensed_cont h2 {}
.licensed_cont h2 img {width:100%;}
.licensed_cont h4 {font-size:30px; line-height:40px;  padding-top:24px;}
.licensed_cont p {font-size:16px; line-height:26px;}


}



#smart_editor2 img {width:100%;}