@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
/*

@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap')
@import url(https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css);
@import url('https://fonts.googleapis.com/css?family=Nanum+Myeongjo');
@import url(https://cdn.rawgit.com/openhiun/hangul/14c0f6faa2941116bb53001d6a7dcd5e82300c3f/nanumbarungothic.css);
@import url('https://fonts.googleapis.com/css?family=Play');
*/

/* =============================================
    초기화
============================================= */
html,
body { height: 100%;width: 100%;margin: 0;padding: 0;left: 0;top: 0;color: #666666;font-family:"Noto Sans KR", sans-serif;line-height: 1.2;font-weight: 400;}
/* html { font-size:62.5%; } */
html { font-size:10px; }
body { font-size:1.4rem; }
* { padding: 0; margin: 0; word-break:keep-all; box-sizing:border-box; }
/* body {margin:0;padding:0;font-size: inherit;font-family:"NanumSquare", sans-serif;} */
/*body {margin:0;padding:0;font-size: inherit;font-family:'Titillium Web', sans-serif !important;}*/
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0;font-weight: 500;}
p {margin:0;padding:0;word-break:keep-all;line-height: 1.5;letter-spacing: -0.025em;}

li, ol, ul { list-style: none; margin: 0;padding: 0;}
a { text-decoration: none !important; }

/* =============================================
		CSS Document
============================================= */
.mt0 { margin-top: 0 !important; }
.mt5 { margin-top: 5px; }
.mt10 { margin-top: 10px; }
.mt20 { margin-top: 20px; }
.mt30 { margin-top: 30px; }
.mt40 { margin-top: 40px; }
.mt50 { margin-top: 50px; }
.mt60 { margin-top: 60px; }
.mt70 { margin-top: 70px; }
.mt80 { margin-top: 80px; }
.mt90 { margin-top: 90px; }
.mt100 { margin-top: 100px; }

.mr5 { margin-right: 5px; }
.mr10 { margin-right: 10px; }
.mr20 { margin-right: 20px; }
.mr30 { margin-right: 30px; }
.mr40 { margin-right: 40px; }
.mr50 { margin-right: 50px; }
.mr60 { margin-right: 60px; }
.mr70 { margin-right: 70px; }
.mr80 { margin-right: 80px; }
.mr90 { margin-right: 90px; }
.mr100 { margin-right: 100px; }

.mb5 { margin-bottom: 5px; }
.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px; }
.mb40 { margin-bottom: 40px; }
.mb50 { margin-bottom: 50px; }
.mb60 { margin-bottom: 60px; }
.mb70 { margin-bottom: 70px; }
.mb80 { margin-bottom: 80px; }
.mb90 { margin-bottom: 90px; }
.mb100 { margin-bottom: 100px; }

.ml5 { margin-left: 5px; }
.ml10 { margin-left: 10px; }
.ml20 { margin-left: 20px; }
.ml30 { margin-left: 30px; }
.ml40 { margin-left: 40px; }
.ml50 { margin-left: 50px; }
.ml60 { margin-left: 60px; }
.ml70 { margin-left: 70px; }
.ml80 { margin-left: 80px; }
.ml90 { margin-left: 90px; }
.ml100 { margin-left: 100px; }

.pt10 { padding-top: 10px; }
.pt15 { padding-top: 15px; }
.pt15 { padding-top: 15px; }
.pt20 { padding-top: 20px; }
.pt30 { padding-top: 30px; }
.pt40 { padding-top: 40px; }
.pt50 { padding-top: 50px; }
.pt60 { padding-top: 60px; }
.pt70 { padding-top: 70px; }
.pt80 { padding-top: 80px; }
.pt90 { padding-top: 90px; }
.pt100 { padding-top: 100px; }

.pr10 { padding-right: 10px; }
.pr15 { padding-right: 15px; }
.pr15 { padding-right: 15px; }
.pr20 { padding-right: 20px; }
.pr30 { padding-right: 30px; }
.pr40 { padding-right: 40px; }
.pr50 { padding-right: 50px; }
.pr60 { padding-right: 60px; }
.pr70 { padding-right: 70px; }
.pr80 { padding-right: 80px; }
.pr90 { padding-right: 90px; }
.pr100 { padding-right: 100px; }

.pb10 { padding-bottom: 10px; }
.pb15 { padding-bottom: 15px; }
.pb20 { padding-bottom: 20px; }
.pb30 { padding-bottom: 30px; }
.pb40 { padding-bottom: 40px; }
.pb50 { padding-bottom: 50px; }
.pb60 { padding-bottom: 60px; }
.pb70 { padding-bottom: 70px; }
.pb80 { padding-bottom: 80px; }
.pb90 { padding-bottom: 90px; }
.pb100 { padding-bottom: 100px; }

.pl10 { padding-left: 10px; }
.pl15 { padding-left: 15px; }
.pl20 { padding-left: 20px; }
.pl30 { padding-left: 30px; }
.pl40 { padding-left: 40px; }
.pl50 { padding-left: 50px; }
.pl60 { padding-left: 60px; }
.pl70 { padding-left: 70px; }
.pl80 { padding-left: 80px; }
.pl90 { padding-left: 90px; }
.pl100 { padding-left: 100px; }


[class*="col-"] {
	float: left; 
	box-sizing:border-box;
	width:100%;
}

.col-sm-12 { width: 100%; }
.col-sm-11 { width: 91.66666667%; }
.col-sm-10 { width: 83.33333333%; }
.col-sm-9 { width: 75%; }
.col-sm-8 { width: 66.66666667%; }
.col-sm-7 { width: 58.33333333%; }
.col-sm-6 { width: 50%; }
.col-sm-5 { width: 41.66666667%; }
.col-sm-4 { width: 33.33333333%; }
.col-sm-3 { width: 25%; }
.col-sm-2 { width: 16.66666667%; }
.col-sm-1 { width: 8.33333333%; }

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img { display: block; max-width: 100%; height: auto; }

img { display:inline-block; max-width:100%; height:auto; }

/* =============================================
    레이아웃
============================================= */
.wrap { width: 100%; }
.containers { margin: 0 auto; }
.relative {position: relative;}

/* =============================================
    폼
============================================= */
input[type="text"],
input[type="password"],
input[type="tel"],
input[type="number"],
.submit_btn { width:100%; }


/* =============================================
    수정 레이아웃
============================================= */
.containers { max-width: 1600px;  box-sizing:border-box; }
.row { margin-left: -1.0rem; margin-right: -1.0rem; }
.bg_gray { background:#f7f7f7; }
.bg_pd { padding: 6.2rem 0 10rem; box-sizing:border-box; }

[class*="col-"] {
	padding: 0 1.0rem;
}




/* 기본 공통사항 */
:root {
	--main_c1: #fdb811;
	--main_c2: #393739;
	--c_3a: #3a3a3a;

	--ff_pre: "pretendard";
	--ff_right: "Righteous";
	--ff_mon: "Montserrat";

	--bg_Lv1: #fff;
	--bg_Lv2: #fff;
	--bg_Lv3: #fff;
	
}

/* 라이트모드 */
body[data-darkmode=off] {
	--bg_Lv1: #fff;
	--bg_Lv2: #fff;
	--bg_Lv3: #fff;
	
   --main_c2: #393739;

}


/* 다크모드 */
body[data-darkmode=on] {
	--bg_Lv1: #222;
	--bg_Lv2: #111;
	--bg_Lv3: #000;
   --main_c2: #dadada;

   --c_3a: #dadada;

	 body { color:#eee; }
	
	.header:hover { background:rgba(0, 0, 0, 0.6); }
	.header:hover .logo a { background-image:url(../img/w_logo.png); }

	.header.fixed { background:rgba(0, 0, 0, 0.6); }
	.header.fixed .logo a { background-image:url(../img/w_logo.png); }

	.header .all_gnb .darkmode > .todark { opacity:0; z-index:-1; }
	.header .all_gnb .darkmode > .tolight { opacity:1; z-index:2 }

	.aGnb .bg01 .de1_ul .de1_li .de1_a { color:#dadada; }
	.aGnb .bg01 .de1_ul .de1_li .de2_ul .de2_li .de2_a { color:#aaa; }

	.aGnb .bg02 .info li { color:#fff; }


	.main_ctt .section01 .right_box .swiper-pagination-bullet i { color:#999; }
	.main_ctt .section01 .right_box .swiper-pagination-bullet-active i { color:#fff; }
	.main_ctt .section01 .right_box .swiper-pagination-bullet b { color:#fff; }
	.main_ctt .section01 .right_box .swiper-pagination-bullet-active b { opacity:0.1; }

	.main_ctt .icon_section .icon { background: rgba(34, 34, 34, 1); }
	.main_ctt .icon_section .icon li .img { filter: contrast(0.5); }
	.main_ctt .icon_section .icon li .tit { color:#dadada; }
	.main_ctt .icon_section .icon li .txt { color:#999; }

	.works .portfolio li a .txt_box .value { color:#666; }
	.works .portfolio li a .txt_box .name { color:#fff; }
	.works .btn_box a { color:#fff; }

	.main_ctt .section02 .sSlide ul li a { filter: brightness(0.7); }


	#ctt { background:var(--bg_Lv1); }

	.bg-gray { background:#282828; }

	.ctt_intro_180601 .tit_box .tit,
	.ctt_contact .tit_box .tit,
	.ctt_estimate .tit_box .tit { color:#fff; }
	div.about_txt .stit { color:#fff; }
	p.about_intro { color:#ccc; }
	div.about_pc img { mix-blend-mode: multiply; }

	.ctt_intro_180601 .top-line .logo_mean .tit { color:#fff; }
	.ctt_intro_180601 .top-line .logo_mean .txt .red { color:var(--main_c1); }
	.ctt_intro_180601 .top-line .logo_mean .txt { color:#ccc }

	.cd-home-title h2 { color:#fff; }
	.cd-home-title p { color:#ccc; }
	.cd-home-title::after { background-color:var(--main_c1); }
	.team-block-style { background:#222; }
	.intro-section .cbp-l-grid-slider-team-position { color:#fff !important; }
	.intro-section .cbp-l-grid-slider-team-desc { color:#ccc !important; }

	.ceo_intro { color:#ccc; }
	h5.ceo_name { color:#bbb; }


	.ctt_contact .tit_box .stit { color:#fff; }
	.ctt_contact .tit_box .txt { color:#ccc; }
	.ctt_contact .section01 .info_box .tit { color:#fff; }
	.ctt_contact .section01 .info_box .info li,
	.ctt_contact .section01 .info_box .info li a { color:#ccc; }
	.ctt_contact .tit_box .txt strong { color:var(--main_c1); }


	.sub_tit .tit { color:#eaeaea; }
	.sub_tit .txt { color:#ccc; }

	.ctt_homepage .img img { mix-blend-mode: exclusion; }

	h1.sec_tit1 { color:#dadada; }

	.flex_table .tr .th:first-child .inner,
	.flex_table .tr .td:first-child .inner { background:#333; color:#eee; }

	.flex_table .tr .th:nth-child(2) .inner { background:#1f3d34; }
	.flex_table .tr .th:nth-child(3) .inner { background:#23283a; }
	.flex_table .tr .th:nth-child(4) .inner { background:#3b272a; }
	.flex_table .tr .th:nth-child(5) .inner { background:#2f2335; }

	.flex_table .tr .td:nth-child(2) .inner { color:#1f3d34; background:#acafb1; }
	.flex_table .tr .td:nth-child(3) .inner { color:#23283a; background:#acabb1; }
	.flex_table .tr .td:nth-child(4) .inner { color:#3b272a; background:#b1abab; }
	.flex_table .tr .td:nth-child(5) .inner { color:#2f2335; background:#bab7bb; }


	.icon_tit { color:#dadada; }
	.web_wrap ul#flowList li .icon_txt li { color:#fff; }
	.web_wrap ul#flowList li i img { filter: contrast(0); }

	.progress { background:#282828; }
	.progress_tit { color:#dadada; }
	.progress-value { color:#fff !important; }


	p.sec_txt { color:#dadada; }
	h2.sec_tit2 { color:var(--main_c1); }
	h2.sec_tit2 span { color:#fff; }

	.icon_txt { color:#dadada; }


	.ctt_security .section01 .img_box .txt { color:#aaa; }
	.ctt_security .section01 .info_box dt { color:#fff; border-color:#3a3a3a; }
	.ctt_security .section01 .info_box dd { color:#aaa; }
	.ctt_security .section01 .info_box dd strong { color:#fff; }


	.section_tit { color:#dadada; }
	.ctt_security .section02 { background:#282828; }
	.ctt_security .section02 .list_box .box .inner { background:#222; }
	.ctt_security .section02 .list_box .box .tit { color:#eaeaea; }
	.ctt_security .section02 .list_box .box .progress_bar li span { color:#dadada }
	.ctt_security .section02 .list_box .box .progress_bar li .zero i:nth-child(n + 0) { background:#222; border: 1px solid #4e4e4e; }
	.ctt_security .section02 .list_box .box .progress_bar li .one i:nth-child(n + 2) { background:#222; border: 1px solid #4e4e4e; }
	.ctt_security .section02 .list_box .box .progress_bar li .two i:nth-child(n + 3) { background:#222; border: 1px solid #4e4e4e; }
	.ctt_security .section02 .list_box .box .progress_bar li .three i:nth-child(n + 4) { background:#222; border: 1px solid #4e4e4e; }
	.ctt_security .section02 .list_box .box .progress_bar li .four i:nth-child(n + 5) { background:#222; border: 1px solid #4e4e4e; }
	.ctt_security .section02 .list_box .box .progress_bar li .five i:nth-child(n + 6) { background:#222; border: 1px solid #4e4e4e; }
	.ctt_security .section02 .list_box .box .progress_bar li .six i:nth-child(n + 7) { background:#222; border: 1px solid #4e4e4e; }
	.ctt_security .section02 .list_box .box .txt { color:#aaa; }
	.important { color:#aaa; }

	.filter_tab li a { border-color:#444; color:#dadada; }
	.filter_tab li a .tooltips { background:#fff; color:#222; }
	.filter_tab li a .tooltips:after { color:#fff; }

	.work .filter_wrap article a .txt_box .name { color:#dadada; }


	.ctt_estimate .stit_box .bot_box .left .stit { color:#dadada; }
	.ctt_estimate .stit_box .bot_box .left .txt { color:#dadada; }
	.ctt_estimate .itit { color:#eaeaea; }


	.ctt_estimate .top_box .input_box label { color:#dadada; }

	.ctt_estimate .inner .bot_box .form-group .input_box input[type="text"],
	.ctt_estimate .inner .bot_box .form-group .input_box select,
	.ctt_estimate .inner .bot_box .form-group .input_box .file_box .uname { background:transparent; border-color:#3a3a3a !important; }
	.ctt_estimate .inner .bot_box .form-group .input_box.note { border-color:#3a3a3a !important; }
	.ctt_estimate .inner .bot_box .form-group .input_box.note textarea { background-image: linear-gradient(270deg, transparent 1px, transparent 0), linear-gradient(#222 50px, #3a3a3a 0); }

	.ctt_estimate .agree_box label { color:#dadada; }
	.ctt_estimate .btn_box input { background:var(--main_c1); color:#222; }



}


html *,
body * { transition:all 0.5s; }

html { background: transparent !important; }
body { transition:all 0.5s; background:var(--bg_Lv1); }


#cursor {
  position: fixed;
  z-index: 99;
  left: 0;
  top: 0;
  pointer-events: none;
  will-change: transform;
  mix-blend-mode: difference;
  transition:all 0s;
}

@media (hover: hover) and (pointer: fine) {
  .cursor__circle {
    width: 20px;
    height: 20px;
    margin-top: -50%;
    margin-left: -50%;
    border-radius: 50%;
    background:rgba(253, 184, 17, 0.7);
    transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1),
      background-color 0.3s cubic-bezier(0.25, 1, 0.5, 1),
      border-color 0.3s cubic-bezier(0.25, 1, 0.5, 1),
      width 0.3s cubic-bezier(0.25, 1, 0.5, 1),
      height 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
  }
  
  #cursor.arrow .cursor__circle{
    width: 48px;
    height: 48px;
	/*border-radius:0;
	transform:rotateX(45deg);*/
    background-color: #073099;
    border-color: #073099;
  }
  
  #cursor.subtle .cursor__circle{
    opacity: 0.16;
  }
  
  #cursor.overlay .cursor__circle{
    width: 32px;
    height: 32px;
    background-color: rgba(227, 222, 193, 0.08);
    border-color: transparent;
  }

}


.header { position:fixed; top:0; z-index:9; }
.header .containers { display:flex; align-items:center; justify-content:space-between; max-width:100%; padding-left: 5rem; padding-right: 5rem; box-sizing:border-box; }
.header .logo { margin: 0; }
.header .logo a { display:inline-block; width:278px; height:36px; background-image:url(../img/w_logo.png); }
.header .nav {  }
.header .nav .de1_ul { display:flex; align-items:center; justify-content:center; margin-bottom: 0; }
.header .nav .de1_ul .de1_li { position:relative; }
.header .nav .de1_ul .de1_li .de1_a { display:flex; height:110px; align-items:center; font-size:2rem; color:#fff; font-weight: 600; font-family: var(--ff_pre); padding: 0 3.5rem; box-sizing:border-box; }
.header .nav .de1_ul .de1_li:hover .de1_a { color:var(--main_c1) !important; }
.header .nav .de1_ul .de1_li .de2_ul { display:none; position:absolute; background:#fff; border-radius:20px; text-align: center; padding:3rem 2rem; width:200px; left:50%; margin-left: -100px; transition:all 0s; }
.header .nav .de1_ul .de1_li .de2_ul .de2_li { margin-top: 1rem; }
.header .nav .de1_ul .de1_li .de2_ul .de2_li:first-child { margin-top: 0; }
.header .nav .de1_ul .de1_li .de2_ul .de2_li .de2_a { font-size:1.8rem; color:#3a3a3a; }

.header .all_gnb { width:278px; display:flex; justify-content:end; align-items:center; padding-right: 6rem; box-sizing:border-box; }
.header .all_gnb .darkmode { position:relative; }
.header .all_gnb .darkmode input { position:absolute; left:0; top:0; opacity:0; }
.header .all_gnb .darkmode label { display:flex; width:130px; height:40px; border-radius:500px; padding: 0 3px; box-sizing:border-box; align-items:center; text-align: center; font-size:12px; font-family: var(--ff_pre); font-weight: 600; cursor:pointer; transition:all 0.5s; margin-bottom: 0; }
.header .all_gnb .darkmode label i { display:flex; align-items:center; justify-content:center; text-align: center; width:34px; height:34px; border-radius:50%; }
.header .all_gnb .darkmode label span { display:inline-block; width:calc(100% - 34px); }
.header .all_gnb .darkmode > .todark { background:#f4f4f4; color:var(--c_3a); }
.header .all_gnb .darkmode > .todark i { background:#fff; }
.header .all_gnb .darkmode > .tolight { background:#222; color:#dadada; flex-direction: row-reverse; position:absolute; top:0; left:0; opacity: 0; z-index:-1; }
.header .all_gnb .darkmode > .tolight i { background:#4b4b4b; }

.crm { margin-left: 1rem; }
.crm a { display:inline-flex; background:#c7000d; width:48px; height:48px; border-radius:50%; align-items:center; justify-content:center; text-align: center; font-size:2rem; color:#fff; }


.aGnb { position:fixed; top:0px; left:0px; width:0%; height:100%; z-index:8; overflow:hidden; transition: width 0s ease 0.5s; }
.aGnb .outter { background:var(--bg_Lv2); position:absolute; overflow:hidden; transition: all .5s ease; }
.aGnb .bg01 { width:0%; height:100%; display:flex; align-items:center; top:0%; left:0%; }
.aGnb .bg01 .de1_ul { font-family: var(--ff_pre); padding-left:15%; box-sizing:border-box; }
.aGnb .bg01 .de1_ul .de1_li { margin-top: 4rem; }
.aGnb .bg01 .de1_ul .de1_li:first-child { margin-top: 0; }
.aGnb .bg01 .de1_ul .de1_li .de1_a { font-size:5rem; color:#222; font-weight: 800; }
.aGnb .bg01 .de1_ul .de1_li .de2_ul { display:none; transition:all 0s; padding-top:1rem; box-sizing:border-box; }
.aGnb .bg01 .de1_ul .de1_li .de2_ul .de2_li { margin-top: 1rem; padding-left: 1rem; box-sizing:border-box; }
.aGnb .bg01 .de1_ul .de1_li .de2_ul .de2_li .de2_a { font-size:2.2rem; color:#666; }
.aGnb .bg01 .de1_ul.dump .de1_li .de1_a { font-size:3rem; }
.aGnb .bg01 .de1_ul .de1_li.active .de1_a { color:var(--main_c1) !important; font-size:5rem; }

.aGnb .bg02,
.aGnb .bg03 { right:0%; }
.aGnb .bg02 { display:flex; align-items:center; padding-left: 5%; box-sizing:border-box; width:50%; height:0%; top:0%; }
.aGnb .bg02 .info {  }
.aGnb .bg02 .info li { font-size:1.8rem; color:#000; font-weight: 500; margin-top: 3rem; }
.aGnb .bg02 .info li:first-child { margin-top: 0;}
.aGnb .bg02 .info li i { color:#999; display:block; font-style: normal; font-weight: 400; margin-bottom: 1rem; }

.aGnb .bg03 { width:0%; height:50%; top:50%; }

.aGnb.show { width:100%; transition: width 0s ease 0s; }
.aGnb.show .bg01 { width:50%; }
.aGnb.show .bg03 { width:50%; }
.aGnb.show .bg02 { height:50%; }


.header:hover { background:rgba(255, 255, 255, 0.8); }
.header:hover .logo a { background-image:url(../img/c_logo.png); }
.header:hover .nav .de1_ul .de1_li .de1_a { color:var(--c_3a); }

.header.fixed { background:rgba(255, 255, 255, 0.8); }
.header.fixed .logo a { background-image:url(../img/c_logo.png); }
.header.fixed .nav .de1_ul .de1_li .de1_a { color:var(--c_3a); height:70px; }


/** Toggle02 **/
/* basic */
.Toggle02 { --icon: #393739;  -webkit-tap-highlight-color: transparent; background: transparent; }
.Toggle02 .menu {	display:inline-block; perspective: 600px;	width: 48px; height: 48px;	position: relative;	cursor: pointer; position:absolute;top:50%; margin-top: -24px; right:5rem; z-index:9; }
.Toggle02 .menu div span {  --rotateY: 0deg;  --background: var(--main_c1);  transform: rotateY(var(--rotateY));  transform-style: preserve-3d;  position: absolute;  left: 0;  top: 0;  width: 100%;  height: 100%;  border-radius: 50%;  background: var(--background);  -webkit-backface-visibility: hidden; backface-visibility: hidden;  transition: background 0.3s transform 0.6s cubic-bezier(0.2, 0.64, 0.48, 1.24);}
.Toggle02 .menu div span:before,
.menu div span:after {  --rotate: 0deg;  content: "";  position: absolute;  width: 16px;  height: 2px;  border-radius: 1px;  top: 50%;  left: 50%;  background: var(--icon);  -webkit-backface-visibility: hidden; backface-visibility: hidden;  transform: translate(-50%, -50%) rotate(var(--rotate)) translateZ(6px);}
/* normal */
.Toggle02 .menu div span:first-child { --rotateY: -180deg; }
.Toggle02 .menu div span:last-child { --rotateY: 0deg; }

.Toggle02 .menu div span:last-child:before { box-shadow: 0 -5px 0 var(--icon), 0 5px 0 var(--icon);}
.Toggle02 .menu div span:last-child:after { display: none; }

/* show */
.Toggle02.show .menu div span:first-child { --background: var(--main_c2); --rotateY: 0deg;}
.Toggle02.show .menu div span:first-child:before { --rotate: -45deg;}
.Toggle02.show .menu div span:first-child:after { --rotate: 45deg;}
.Toggle02.show .menu div span:first-child:before,
.Toggle02.show .menu div span:first-child:after { background:#fff; }

.Toggle02.show .menu div span:last-child { --rotateY: 180deg;}



.main_ctt {  }

.main_ctt .visual_wrap { overflow:hidden; }
.main_ctt .visual_wrap .visual { background-position: center center; background-repeat:no-repeat; background-size:cover; height:1024px; }
.main_ctt .visual_wrap .visual01 { background-image:url(../img/visual01.webp); }
.main_ctt .visual_wrap .visual02 { background-image:url(../img/visual02.webp); }
.main_ctt .visual_wrap .visual .txt_box { padding-top: 28.2rem; box-sizing:border-box; }
.main_ctt .visual_wrap .visual .txt_box .tit { font-size:7rem; color:#fff; font-weight: 700; line-height: 8.4rem; font-family: var(--ff_pre); }
.main_ctt .visual_wrap .visual .txt_box .txt { font-size:2.2rem; color:#fff; line-height: 4rem; margin: 6.6rem 0 9rem; }
.main_ctt .visual_wrap .visual .txt_box .txt strong { font-weight: 700; color:var(--main_c1); }
.main_ctt .visual_wrap .visual .txt_box .more_arrow { font-size:2rem; color:#d3d3d3; font-weight: 600; display:inline-flex; align-items:center; }
.main_ctt .visual_wrap .visual .txt_box .more_arrow i { display:inline-block; width:36px; height:36px; background:url(../img/more_arrow.png) center center no-repeat; border-radius:50%; margin-left: 2rem; }



.main_ctt .tit_box { padding-bottom: 3.4rem; box-sizing:border-box; }
.main_ctt .tit_box .etit { font-size:7rem; color:var(--c_3a); font-family: var(--ff_right); }
.main_ctt .tit_box .txt { font-size:2rem; color:var(--c_3a); font-weight: 400; margin-top: 1rem; }
.main_ctt .tit_box .txt strong { color:var(--main_c1); font-weight: 600; }


.main_ctt .secition { box-sizing:border-box; }

.main_ctt .section01 { padding-top: 13.2rem; overflow:hidden; }
.main_ctt .section01 .slide_wrap { display:flex; align-items:stretch; }
.main_ctt .section01 .left_box { width:100%; max-width:800px; overflow:hidden; }
.main_ctt .section01 .left_box li {  }
.main_ctt .section01 .left_box li a {  }
.main_ctt .section01 .left_box li a .img {  }
.main_ctt .section01 .left_box li a .txt { font-size:8rem; color:#000; font-weight: 800; font-family: var(--ff_mon); opacity:0.05; display:none; }

.main_ctt .section01 .right_box { position:relative; width:100%; max-width:800px; padding-left: 16.4rem; box-sizing:border-box; }
.main_ctt .section01 .right_box .pagination {  }
.main_ctt .section01 .right_box .swiper-pagination-bullet { width:auto !important; height:auto !important; background:transparent !important; display:table; opacity:1 !important; margin-top: 4.4rem; }
.main_ctt .section01 .right_box .swiper-pagination-bullet-active {  }
.main_ctt .section01 .right_box .swiper-pagination-bullet i { font-size:20px; color:#666; font-weight: 400; display:flex; align-items:center; transition:all 0.5s; font-style: normal; }
.main_ctt .section01 .right_box .swiper-pagination-bullet i:before { content:""; display:inline-block; width:10px; height:10px; border-radius:50%; margin-right: 10px; background:var(--main_c1); opacity:0; transition:all 0.5s; }
.main_ctt .section01 .right_box .swiper-pagination-bullet b { font-size:0; color:#000; font-weight: 800; font-family: var(--ff_mon); opacity:0; position:absolute; right:0; bottom:115px; cursor:default; transition:all 0.5s; }
.main_ctt .section01 .right_box .swiper-pagination-bullet-active i { color:#000; font-weight: 600; }
.main_ctt .section01 .right_box .swiper-pagination-bullet-active i:before { opacity:1; }
.main_ctt .section01 .right_box .swiper-pagination-bullet-active b { font-size:8rem; opacity:0.05; }



.main_ctt .icon_section { margin-top: -11.5rem; position:relative; z-index:3; }
.main_ctt .icon_section .containers { display:flex; justify-content:end; }
.main_ctt .icon_section .icon { background:rgba(255, 255, 255, 0.7); width:100%; max-width:1387px; display:flex; justify-content:end; padding-top: 3rem; padding-left: 8rem; box-sizing:border-box; }
.main_ctt .icon_section .icon li { text-align: center; margin-left: 10.5rem; }
.main_ctt .icon_section .icon li:first-child { margin-left: 0; }
.main_ctt .icon_section .icon li .img {  }
.main_ctt .icon_section .icon li .tit { font-size:1.8rem; color:#393739; font-weight: 600; letter-spacing: -0.0525em; margin: 1.2rem 0 1rem; }
.main_ctt .icon_section .icon li .txt { font-size:1.5rem; color:#666; font-weight: 400; letter-spacing: -0.0525em; line-height: 2.2rem; }



.works { margin-top: 9rem; }
.works .containers { max-width:100%; }
.works .tit_box { width:100%; max-width:1600px; margin-left: auto; margin-right: auto; }
.works .portfolio { display:flex; flex-wrap:wrap; margin-top: -9rem; }
.works .portfolio li { width:25%; margin-top: 9rem; }
.works .portfolio li a {  }
.works .portfolio li a .img {  }
.works .portfolio li a .txt_box { padding: 2.6rem 2rem 0; box-sizing:border-box; }
.works .portfolio li a .txt_box .value { font-size:1.6rem; color:#aaa; }
.works .portfolio li a .txt_box .name { font-size:2rem; color:#000; font-weight: 600; margin-top: 4px; }
.works .btn_box { text-align: center; margin-top: 15.5rem; }
.works .btn_box a { font-size:2rem; color:#000; font-weight: 600; display:inline-flex; align-items:center; }
.works .btn_box a i { display:inline-block; width:36px; height:36px; background:url(../img/more_arrow.png) center center no-repeat; border-radius:50%; margin-left: 2rem; }



.main_ctt .section02 { overflow:hidden; margin-top: 18rem; }
.main_ctt .section02 .sSlide {  }
.main_ctt .section02 .swiper-wrapper{ transition-timing-function: linear; }
.main_ctt .section02 .right_slide { margin-top: 20px; }
.main_ctt .section02 .sSlide ul li { /*width:auto !important;*/ }
.main_ctt .section02 .sSlide ul li a { display:inline-block; }



.footer { margin-top: 20rem; background:#121212; padding: 12.6rem 0 11rem; box-sizing:border-box; }
.footer * { font-family: var(--ff_pre); }
.footer .top_line { border-bottom: 1px solid #414141; box-sizing:border-box; display:flex; align-items:end; justify-content:space-between; padding-bottom: 9rem; }
.footer .top_line .txt_box {  }
.footer .top_line .txt_box .tit { font-size:3.6rem; color:#fff; font-weight: 800; line-height: 4.8rem; }
.footer .top_line .txt_box .txt { font-size:2.2rem; color:var(--main_c1); font-weight: 700; margin-top: 2rem; }
.footer .top_line a { display:flex; align-items:center; justify-content:center; text-align: center; font-size:1.8rem; color:#fff; font-weight: 700; border: 1px solid #888; box-sizing:border-box; width:220px; height:60px; }
.footer .top_line a img { margin-right: 8px; }

.footer .bot_line { margin-top: 3rem; }
.footer .bot_line .fnb { display:flex; align-items:center; }
.footer .bot_line .fnb li { display:flex; align-items:center; }
.footer .bot_line .fnb li:before { content:""; display:inline-block; width:1px; height:12px; background:#dadada; margin: 0 2rem; }
.footer .bot_line .fnb li:first-child:before { display:none; }
.footer .bot_line .fnb li a { font-size:1.6rem; color:#dadada; font-weight: 400; }
.footer .bot_line .box02 { display:flex; align-items:start; justify-content:space-between; padding-top: 4.8rem; box-sizing:border-box; }
.footer .bot_line .box02 .info { margin-top: -2rem; }
.footer .bot_line .box02 .info li { display:flex; align-items:center; margin-left: -4.4rem; margin-top: 1rem; }
.footer .bot_line .box02 .info li span { display:flex; align-items:start; font-size:1.6rem; color:#fff; font-weight: 600; margin-left: 4.4rem; margin-top: 1rem; }
.footer .bot_line .box02 .info li span i { color:#dadada; font-weight: 300; font-style: normal; margin-right: 12px; }
.footer .bot_line .family { position:relative; }
.footer .bot_line .family label { display:flex; align-items:center; justify-content:space-between; border-radius:1rem; background:#fff; font-family: var(--ff_mon) !important; width:200px; height:60px; border: 1px solid #eee; box-sizing:border-box; padding-left: 2rem; padding-right: 1.4rem; font-size:1.4rem; color:#222; font-weight: 500; cursor:pointer; }
.footer .bot_line .family label img {  }
.footer .bot_line .family ul { display:none; background:#fff; border-radius:1rem; padding: 2rem; box-sizing:border-box; width:100%; position:absolute; top:65px; transition:all 0s; }
.footer .bot_line .family ul li { margin-top: 1rem; }
.footer .bot_line .family ul li:first-child { margin-top: 0; }
.footer .bot_line .family ul li a { font-size:1.6rem; color:var(--main_c2); font-weight: 400; }
.footer .bot_line .copyright { margin-top: 3.6rem; font-size:1.4rem; color:#fff; opacity:0.6; font-weight: 300; } 



.fancybox-slide--iframe .fancybox-content { width: 1200px; height: 600px; max-width: 80%; max-height: 90%; margin: 0; }



/* counter_line */
#counter_line { padding-top: 0; box-sizing: border-box; margin: 13rem 0; }
#counter_line .containers { display:flex; }
#counter_line .containers > div { flex:1; text-align: center; }
#counter_line .containers > div > div {  }
#counter_line .containers > div > div > span { display:block; }
#counter_line .containers > div .count { font-size:4rem; color: #fff; font-family: var(--ff_right); }
#counter_line .containers > div .tit { font-size:2rem; margin-top: 1rem; color:#dadada; font-weight: 600; }

.counter-block::after { background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0; bottom: 0; content: ""; left: 0; position: absolute; right: 0; top: 0; z-index: -1; }
.counter-block { background: rgba(0, 0, 0, 0) url("../img/main_back.webp") no-repeat fixed center center / cover ; padding: 10rem 0;    position: relative; z-index: 1;}
.counter-item i { font-size: 50px; color: #fff; }


.bottom_consult { padding:10rem 0 0; box-sizing:border-box; }
.bottom_consult .tit_box { margin-bottom: 6rem; box-sizing:border-box; }
.bottom_consult .tit_box .tit { font-size:6rem; color:#222; font-weight: 700; display:flex; align-items:baseline; margin-bottom: 0; }
.bottom_consult .tit_box .tit:after { content: ""; display: inline-block; width: 10px; height: 9px; background: url(../img/dia.png) center center no-repeat; margin-left: 2rem; }
.bottom_consult .tit_box .stit { font-size:2.2rem; color:#3a3a3a; font-weight: 600; margin-bottom: 3rem; }
.bottom_consult .tit_box .txt { font-size:1.8rem; color:#3a3a3a; font-weight: 400; line-height: 28px; margin-bottom: 6rem; }
.bottom_consult .tit_box .txt strong { color:#000; font-weight: 600; }

.bottom_consult .btn_box {  }
.bottom_consult .btn_box a { display:flex; align-items:center; justify-content:center; text-align: center; font-size:1.8rem; color:#fff; font-weight: 700; border: 1px solid transparent; box-sizing:border-box; width:220px; height:60px; background:#121212; }
.bottom_consult .btn_box a img { margin-right: 8px; }

.ctt_webhosting .bottom_consult { background:#f7f7f7; }


/* FAQ 리스트 */
.faq-title { font-size: 2.8rem; font-weight: 800; margin-bottom: 5rem; text-align: center; }
.faqBox { background: #fafafa; padding:10rem 0; box-sizing:border-box; }
.faq-list { max-width: 1220px; margin: 0 auto; border-top: 2px solid var(--text-dark); }

/* 아이템 숨기기용 input */
.faq-input { display: none; }

/* 질문(Question) 영역 */
.faq-question { display: flex; align-items: center; padding: 2.5rem 3rem; background: #fff; border-bottom: 1px solid var(--border-color); cursor: pointer; transition: background 0.3s ease; position: relative;}
.faq-question:hover { background: #fafafa; }
.q-icon { font-size: 2.2rem; font-weight: 800; color: var(--main-color); margin-right: 2rem;}
.q-txt { font-size: 1.8rem; color: var(--text-dark); font-weight: 700; flex: 1;}
.arrow-icon { font-size: 1.4rem; color: #bbb; transition: transform 0.3s ease;}
/* 답변(Answer) 영역 */
.faq-answer { max-height: 0; overflow: hidden; background: #f9f9f9; transition: none;}
.answer-inner { padding: 3rem; padding-left: 7.2rem; /* Q 아이콘 위치 맞춤 */ border-bottom: 1px solid var(--border-color); font-size: 1.7rem;    color: var(--text-base); line-height: 1.8;}
.answer-inner .fBtn { display:inline-flex; padding:3px 20px; border-radius:5px; font-size:14px; color:#222; background:#fdb811; font-weight: 600; align-items:center; margin-top: 1rem; border: 2px solid transparent; transition:all 0.5s; }
.answer-inner .fBtn i { margin-right: 5px; }

.answer-inner .fBtn:hover { border: 2px solid #fdb811; color:#fdb811; background:#fff; }

/* 체크 시 활성화 상태 (CSS 전용 로직) */
.faq-input:checked + .faq-question { background: #fff; }
.faq-input:checked + .faq-question .arrow-icon { transform: rotate(180deg); color: var(--main-color); }
.faq-input:checked ~ .faq-answer { max-height: 500px; transition: max-height 0.4s ease; } /* 답변 내용에 따라 조절 */

/* 반응형 */
@media (max-width: 768px) {
    .faq-question { padding: 2rem; }
    .q-icon { margin-right: 1.5rem; }
    .q-txt { font-size: 1.6rem; }
    .answer-inner { padding: 2rem; padding-left: 2rem; font-size: 1.5rem; }
}