@charset "utf-8";

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css");

*{margin:0px; padding:0px;}
*, :after, :before{box-sizing:border-box;}
body, html{width:100%; height:100%; min-width:360px; background:#FFF;}
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select,table,a,p{font-family:Pretendard, '맑은 고딕', MalgunGothic, '돋움', Dotum, sans-serif; font-size:18px; font-weight:300; color:#080d21; line-height:1.4em; word-break:keep-all;font-variant-numeric: tabular-nums;}
h1,h2,h3,h4,h5,h6{font-weight:normal;}
img,fieldset{max-width:100%; border:0px; vertical-align:top;}
ul,ol,dl{list-style-type:none;}
a{text-decoration:none;}
caption, legend{border:0px; display:none;}
em{font-style:normal;}
table{width:100%; border:0; border-collapse:collapse;}
input[type='button'],input[type='submit'],input[type='reset'],input[type='file'] {appearance: button; -webkit-appearance: button;}

.blind{display:block; overflow:hidden; position:absolute; left:-9999px; width:1px; height:1px; font-size:0; line-height:0; text-indent:-9999px;}
select{appearance:none; -webkit-appearance:none;}
select::-ms-expand{display:none;}
select:focus, input:focus, select:active, input:active{outline:none;}
.float_clear:after{display:block; clear:both; content:"";}
textarea{outline:none;}
input[type="checkbox"]{width:16px; height:16px; vertical-align:middle;}
input[type=checkbox]:checked, input[type=radio]:checked{accent-color:rgb(232,52,40);} 
:root{--black:#080d21;}
:root{--color:#bb9b7e;}

/* Common */
header{position:absolute; width:100%; height:100px; top:0; z-index:90; background-color: rgba(0, 0, 0, 0.5); z-index: 99;
        transition-timing-function:ease-in-out;
-webkit-transition-timing-function:ease-in-out; 
        transition-duration:0.2s;
-webkit-transition-duration:0.2s;}
header:after{position:absolute; content:""; width:100%; height:90px; top:0; left:0;
        transition-timing-function:ease-in-out;
-webkit-transition-timing-function:ease-in-out; 
        transition-duration:0.2s;
-webkit-transition-duration:0.2s;}
header .top_logo{position:absolute; width:279px; height:40px; top:30px; left:80px; background:url(../images/common/logo.png) no-repeat center; background-repeat: no-repeat; background-position: center; background-size:100% auto; z-index:2;}
header .top_logo a{display:block; width:100%; height:100%;}
header .nav_btn{display:none;}
header .gnb .nav_close{display:none;}
header .gnb .gnb_wrap{position:absolute; top:0; right:80px; display:flex; justify-content:space-between; gap:30px; z-index:1;}
header .gnb .main{display:flex;}
header .gnb .main:after{position:absolute; display:block; content:""; width:100%; height:0; top:90px; left:0; background:#FFF;}
header .gnb .main > li{padding-top:40px; vertical-align:top;}
header .gnb .main > li a{display:block; font-size:16px; padding: 0 20px; font-weight: 700; color:#FFF; text-align:center;}
header .gnb .main > li a span{position:relative; display:inline-block;}
header .gnb .main > li a span:after{display:block; content:""; width:0px; height:4px; background: var(--color); margin:15px auto 0;
        transition-timing-function:ease-in-out;
-webkit-transition-timing-function:ease-in-out; 
        transition-duration:0.2s;
-webkit-transition-duration:0.2s;}
header .gnb .main > li .sub_open{display:none;}
header .gnb .main > li .sub{display:block; margin-top:15px; height:1px; overflow:hidden; opacity:0; visibility:hidden;
        transition-timing-function:ease-in-out;
-webkit-transition-timing-function:ease-in-out; 
        transition-duration:0.2s;
-webkit-transition-duration:0.2s;}
header .gnb .main > li .sub li{width:100%; text-align:left;}
header .gnb .main > li .sub li a{line-height:38px; font-size:16px; color:#757575; font-weight: 400; letter-spacing:-1px;}
.top_nav.fixed{position:fixed;}

/* Hover 기능이 있는 디바이스에서만 Hover */
@media (hover: hover){
header .gnb .main > li:hover a span:after{width:100%;}
header .gnb .main > li .sub li a:hover{color: var(--black);}
header:hover:after{height:300px; background:rgba(255, 255, 255, 0.9); box-shadow:0 0 15px rgba(0,0,0,0.1);}
header:hover .gnb .main > li a{color: var(--black);}
header:hover .gnb .main > li .sub{height:auto; opacity:1; visibility:visible;}
header.nav_fixed:hover:after{height:280px;}
}

footer{background-color:#ffffff; padding: 40px 0 20px; border-top:1px solid #ddd;}
footer .con_align{display:flex; justify-content: space-between;}
footer .footer_logo dl{margin-top:25px;}
footer .footer_logo dt{font-size:22px; font-weight: 800;}
footer .footer_logo dd{font-size:14px;}
footer .footer_info{display:flex; flex-direction: column; gap: 15px;}
footer .footer_info dt{font-size:16px; font-weight: 800;}
footer .footer_info dd{font-size:16px;}
footer .footer_info .wrap{display:flex; gap:40px;}
footer .copyright{text-align: center; margin-top:40px; font-size:16px;}

/* Main */
.con_align{width:92%; max-width:1200px; margin:auto;}
.main_tt{font-size:50px; font-weight: 800; text-align: center;}
.main_btn a{display:inline-block; padding:20px 60px; margin-top:140px; border:1px solid #ddd; background-color: rgba(0, 0, 0, 0.5); color:#FFF; font-weight: 800;}
.main_visual{width:100%; height:100vh; background-color: #000000;}
.main_visual .txt_con{display:flex; align-items: flex-end; height:100vh; padding-bottom:120px;}
.main_visual .txt_con dl{display:flex; flex-direction: column; gap:20px;}
.main_visual .txt_con dt{font-size:50px; font-weight: 800; color:#FFF;}
.main_visual .txt_con dd{color:#FFF;}
.main_brand{display:flex; align-items: center; width:100%; height:100vh; background:url(../images/sub/sub_strategy.webp) no-repeat top; background-size: cover;}
.main_brand .txt_con{text-align:right;}
.main_brand .txt_con dl{display:flex; flex-direction:column; gap:20px;}
.main_brand .txt_con dt{font-size:50px; font-weight: 800; color:#FFF;}
.main_brand .txt_con dd{font-size:80px; font-weight: 800; color:#FFF;}
.main_brand .txt_con p{margin-top:30px; color:#FFF;}
.main_portfolio{padding:140px 0;}
.main_portfolio .portfolio_img{padding:100px 0;}
.main_portfolio .portfolio_img .wrap{display:flex; gap:60px; align-items: center; margin-bottom:20px;}
.main_portfolio .portfolio_img .wrap img{width:calc(50% - 30px);}
.main_portfolio .portfolio_slide{position:relative; margin-top:60px; padding-bottom:40px; overflow: hidden;}
.main_portfolio .portfolio_slide .swiper-pagination{bottom:0;}
.swiper-pagination-bullet-active{background-color: var(--black) !important;}
.main_portfolio .main_btn{text-align: center;}
.main_portfolio .main_btn a{background-color: #FFF; border:1px solid var(--black); color:var(--black);}
.main_partner{padding-bottom:140px;}
.main_partner .partner_list{margin-top:60px; display:grid; grid-template-columns: repeat(5, 1fr); gap:10px;}
.main_partner .partner_list li{border:1px solid #ddd; border-radius:10px; overflow: hidden; text-align: center;}
.main_partner .partner_list li img{width:auto; height:70px;}

/* Sub */
.sub_visual{width:100%; height:calc(100vh - 80px);}
.sub_visual .con_align{display:flex; align-items:center; justify-content: flex-end; height:100%;}
.sub_visual dl{margin-top:200px; text-align: right;}
.sub_visual dt{font-size:40px; font-weight: 800; color:#FFF;}
.sub_visual dd{margin-top:15px; color:#FFF;}
.overview_visual{background:url(../images/sub/sub_overview.webp) no-repeat center; background-size: cover;}
.team_visual{background:url(../images/sub/sub_team.webp) no-repeat center 20%; background-size: cover;}
.portfolio_visual{background:url(../images/sub/sub_portfolio.webp) no-repeat center 20%; background-size: cover;}
.strategy_visual{background:url(../images/sub/sub_strategy.webp) no-repeat top; background-size: auto 200%;}
.page_location{display:flex; gap:15px; padding:30px 0;}
.page_location li{display:flex; align-items: center; gap: 15px; font-size:16px;}
.page_location li:first-child a:after{content: "\f015"; font-family: "Font Awesome 6 Free" !important; font-weight: 900; font-size:14px;}
.page_location li:after{content:''; display:block; width:1px; height:12px; background-color: #aaa;}
.page_location li:last-child:after{display:none;}
.page_info{margin-bottom:120px;}
.page_info .con_align{padding:60px 0; border-bottom:1px solid var(--black);}
.page_info dl{display:flex; align-items: flex-end; justify-content: space-between; gap:60px;}
.page_info dt{font-size:32px; font-weight: 800;}
.sub_tt{font-size:60px; font-weight: 800; line-height: 1.4;}
.overview_con .con_align{display:flex; gap:60px; padding-bottom:140px;}
.overview_con .txt_con{display: flex; flex-direction: column; gap: 20px;}
.overview_con .desc{font-size:16px;}
.overview_con .company_info{border:1px solid #ddd; box-sizing: border-box; margin-top:80px;}
.overview_con .company_info dl{display:flex; border-bottom:1px solid #ddd;}
.overview_con .company_info dl:last-child{border-bottom:none;}
.overview_con .company_info dt{width:120px; padding:20px 0; box-sizing: border-box; background-color: var(--black); font-size:16px; font-weight: 600; color:#FFF; text-align: center;}
.overview_con .company_info dd{width:calc(100% - 120px); padding:20px 0 20px 20px; box-sizing: border-box; font-size:16px;}
.overview_con .company_info dd em{font-weight: 600;}
.vision_con .con_align{display:flex; gap:60px; padding-bottom: 140px;}
.vision_con .con_align > div{display:flex; flex-direction: column; gap: 30px;}
.establish_con .con01{display:flex; justify-content: space-between; border-bottom:1px solid var(--black); padding-bottom: 120px; margin-bottom:120px;}
.establish_con .con01 .sub_tt{width:calc(100% - 600px);}
.establish_con .con01 .img{width:600px;}
.establish_con .con02 ul{display:flex; gap:40px; padding-bottom: 140px;}
.establish_con .con02 ul li .num{width:50px; line-height:50px; background-color: var(--color); border-radius: 8px; font-size:22px; font-weight: 800; color:#FFF; text-align: center;}
.establish_con .con02 ul li dl{margin-top:20px;}
.establish_con .con02 ul li dt{font-weight:800; margin-bottom:20px;}
.establish_con .con02 ul li dd{font-size:16px;}
.organization_con .con_align{text-align: center; padding-bottom: 140px;}
.location_con{padding-bottom: 140px;}
.location_con .con_align{display: flex; gap: 100px;}
.location_con .left_con{width:calc(100% - 800px);}
.location_con .left_con dt{margin-bottom:10px; font-weight: 800;}
.location_con .right_con{width:700px; height:400px;}
.team_con .txt_con dl{display: flex; flex-direction: column; gap: 20px; text-align: right;}
.team_con .txt_con dt{font-size:50px; font-weight: 800;}
.team_con .txt_con dd{font-size:80px; font-weight: 800;}
.team_con .txt_con p{margin-top:30px; text-align: right;}
.team_con .team_list{display:grid; grid-template-columns: repeat(3,1fr); gap:39px; padding:120px 0 140px;}
.team_con .team_list li dl{margin:30px 0 20px;}
.team_con .team_list li dt{font-size:22px; font-weight: 600;}
.team_con .team_list li dt span{color:#c90000;}
.team_con .team_list li dd{margin-top:5px; font-size:16px; color:#606060;}
.portfolio_con{padding-bottom:140px;}
.tag_list{font-size:0;}
.tag_list span{display:inline-block; margin-right:10px; margin-bottom:10px; border:1px solid #505050; padding:10px 12px; font-size:16px;}
.portfolio_con .portfolio_list p{font-size:26px; font-weight: 800; text-align: center;}
.portfolio_con .portfolio_list ul{display:grid; grid-template-columns: repeat(6, 1fr); gap: 24px; margin-top:60px;}
.portfolio_con .portfolio_list ul li{border:1px solid #ddd; box-sizing: border-box; border-radius: 10px; text-align: center;}
.portfolio_con .portfolio_list ul li dt{font-size:16px; font-weight: 800;}
.portfolio_con .portfolio_list ul li dd{font-size:16px;}
.port_con{padding:100px 0 60px;}
.port_con .wrap{display:flex; gap:60px; align-items: center; margin-bottom:40px;}
.port_con .wrap img{width:calc(50% - 30px);}
.strategy_con{padding-bottom: 140px;}
.strategy_con ul{display:grid; grid-template-columns: repeat(3,1fr); gap:30px;}
.strategy_con li{border:1px solid var(--black); padding:20px; box-sizing: border-box;}
.strategy_con li .icon img{height:80px;}
.strategy_con li p{margin-bottom:15px;}
.strategy_con li .tt{font-weight:800; margin-top:20px;}
.plan_con{padding-bottom:140px;}
.plan_con dl{text-align: center; margin-bottom:40px;}
.plan_con dd{font-size:30px; font-weight:800;}
.process_con{padding-bottom:140px;}
.control_con{padding-bottom: 140px;}
.control_con .box_con{background-color: var(--black); padding:30px; box-sizing: border-box; text-align: center; border-radius: 20px;}
.control_con .box_con p{color:#FFF;}
.control_con .box_con .tt{font-size:22px; font-weight:800;}
.control_con ul{display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; margin-top:60px;}
.control_con li{border:1px solid var(--black); box-sizing: border-box;}
.control_con li p{padding:10px; background-color: var(--black); font-weight: 800; color:#FFF}
.control_con li dl{padding:20px;}
.control_con li dt{font-weight:600;}
.control_con li dd{margin-bottom:10px;}

/* 1400px 이하 해상도 */
@media screen and (max-width:1399px){
/* Common */
body, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, table, th, td, form, fieldset, legend, input, textarea, button, select, table, a, p{font-size:16px;}

/* Main */
}

/* 1279px 이하 해상도 태블릿 가로 */
@media screen and (max-width:1279px){
/* Common */
header{height:80px; background:none;}
header:after{height:80px;}
header .top_logo{width:173px; height:30px; top: 25px; left:5%;}
header .nav_btn{display:block; position:absolute; top:30px; right:5%; z-index:90;
        transition-timing-function:ease-in-out;
-webkit-transition-timing-function:ease-in-out; 
        transition-duration:0.2s;
-webkit-transition-duration:0.2s;}
header .nav_btn a{display:block; width:26px; height:18px; background:url(../images/common/nav_btn.webp); background-repeat: no-repeat; background-size:100% auto;}
header .gnb{display:none;}
header .gnb.on{display:block; position:fixed; width:100%; height:100%; top:0; z-index:90; overflow:hidden; background:rgba(0, 0, 0, 0.8); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);}
header .gnb .nav_close{display:block; position:absolute; top:25px; left:5%; z-index:90;}
header .gnb .nav_close a{display:block; width:22px;}
header .gnb .gnb_wrap{display:block; position:absolute; width: calc(90% - 60px); height:100%; right: 0; background: #FFF;}
header .gnb .main{display:block; width:90%; margin:auto;}
header .gnb .main > li{position:relative; width:100%; padding:0;}
header .gnb .main > li:nth-child(2) .sub_open,
header .gnb .main > li:nth-child(3) .sub_open{display:none;}
header .gnb .main > li:after{display:block; content:""; height:1px; background:#dddddd;}
header .gnb .main > li a{display:block; width:auto; height:70px; line-height:70px; text-align:left; font-size:18px; padding: 0 20px; color:var(--black);}
header .gnb .main > li a span:after{display:none;}
header .gnb .main > li a.sub_open{display:block; position:absolute; top:0; right:-22px; width:70px; height:70px; padding:0 0; background:url(../images/common/nav_arrow.webp); background-repeat: no-repeat; background-position: center; background-size:15px auto;}
header .gnb .main > li.on a.sub_open{ background:url(../images/common/nav_arrow_on.webp); background-repeat: no-repeat; background-position: center; background-size:15px auto;}
header .gnb .main > li .sub{display:none;}
header .gnb .main > li.on .sub{display:block; height:auto; visibility:visible; opacity:1; margin-top:0; margin-bottom:15px;}
header .gnb .main > li .sub:before{display:block; content:""; height:1px; background:#dddddd; margin-bottom:10px;}
header .gnb .main > li .sub li{width:auto;}
header .gnb .main > li .sub li a{height:auto; padding-left:30px; line-height:40px; font-size:16px; color:var(--black);}
header .top_util{display:flex; justify-content:flex-end; width:90%; margin:auto; padding-top:30px;}
header.fixed{height: 80px; background-color: rgba(0, 0, 0, 0.5);}
header.fixed .gnb .main > li{padding: 0 0;}
header.fixed .gnb .main > li a{color:var(--black);}
header.fixed .top_util .lang_wrap p a{background-image:url(../images/common/top_lang_icon_w.webp); color:#FFF;}

/* Main */
.main_visual .txt_con dt{font-size:40px;}
.main_brand .txt_con dt{font-size:40px;}
.main_brand .txt_con dd{font-size:74px;}
.main_portfolio{padding:120px 0;}
.main_tt{font-size:40px;}
.main_partner{padding-bottom:120px;}
.main_partner .partner_list{grid-template-columns: repeat(4, 1fr);}
.page_info{margin-bottom: 100px;}
.page_info dt{font-size:26px;}
.page_info dt br{display:none;}
.page_info dd br{display:none;}
.sub_tt{font-size:44px;}
.sub_tt br{display: none;}
.overview_con .con_align{flex-direction: column;}
.overview_con .company_info{margin-top:60px;}
.overview_con .right_con{max-width:800px; margin: auto;}
.vision_con .con_align{flex-direction: column; padding-bottom: 120px;}
.establish_con .con01 .sub_tt{width:50%;}
.establish_con .con01 .img{width:50%;}
.establish_con .con01{padding-bottom:100px; margin-bottom: 100px;}
.establish_con .con02 ul{padding-bottom: 120px;}
.establish_con .con02 ul li .num{width:40px; height: 40px; line-height:40px; font-size: 18px;}
.location_con{padding-bottom:120px;}
.location_con .con_align{flex-direction: column; gap:40px;}
.location_con .left_con{width:auto;}
.location_con .right_con{width:100%;}
.team_con .txt_con dt{font-size:40px;}
.team_con .txt_con dd{font-size:74px;}
.team_con .team_list{padding:100px 0 120px;}
.team_con .team_list li dt{font-size:20px;}
.team_con .team_list{grid-template-columns: repeat(2,1fr);}
.portfolio_con{padding-bottom: 120px;}
.portfolio_con .portfolio_list ul{grid-template-columns: repeat(4, 1fr); gap:20px;}
.strategy_con,
.plan_con,
.process_con,
.control_con{padding-bottom: 120px;}
}

/* 767px 이하 해상도 - 모바일 */
@media screen and (max-width:767px){
/* Common */
body, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, table, th, td, form, fieldset, legend, input, textarea, button, select, table, a, p{font-size:14px;}
header.fixed{height:70px;}
header:after{height:70px;}
header .top_logo{width:120px; height:20px;}
header .nav_btn{top:24px;}
header .gnb .main > li a{font-size:16px;}
footer .con_align{flex-direction: column;}
footer .footer_info{margin-top:30px;}
.sub_visual{height:500px;}
.sub_visual dt{font-size:30px;}
.sub_visual dd br{display:none;}

/* Main */
.main_visual .txt_con dt{font-size:30px;}
.main_brand .txt_con dt{font-size:30px;}
.main_brand .txt_con dd{font-size:50px;}
.main_btn a{padding:15px 40px;}
.main_tt{font-size:30px;}
.main_portfolio{padding:100px 0;}
.main_portfolio .portfolio_img{padding:40px 0;}
.main_portfolio .portfolio_img .wrap{flex-direction: column;}
.main_portfolio .portfolio_img .wrap img{width:auto;}
.main_partner .partner_list{grid-template-columns: repeat(3,1fr);}

.sub_tt{font-size:30px;}
.establish_con .con01{flex-direction: column; gap: 30px;}
.establish_con .con01 .img{width: auto;}
.establish_con .con02 ul{flex-direction: column;}
.team_con .txt_con dt{font-size:30px;}
.team_con .txt_con dd{font-size:50px;}
.team_con .team_list{flex-direction: column;}
.strategy_con ul{grid-template-columns: repeat(1,1fr);}
.control_con ul{grid-template-columns: repeat(1,1fr);}
}