@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


@media (min-width: 1600px) {
    .container { max-width: 1600px;}
}
/* =============================================================================================================================================================================================================== */

@keyframes iconMotion {
	0%{margin-top:0px;}
	100%{margin-top:10px;}
}

@keyframes arrowMotion {
	0%{top:0; left:0px;}
	50%{top:0; left:6px;}
	100%{top:0; left:0px;}
}

@keyframes imageMotion {
	0%{opacity:0;}
	100%{opacity:1;}
}

/* 기본구조 */
/*html,body{position:relative; min-width:1024px;} */
html{} 
body{overflow-x:hidden !important; color:#1B1E26;} 
p, li{text-overflow:ellipsis; overflow:hidden; white-space:nowrap; line-height:1.2em;}
textarea {resize: none;}

#containerArea {margin: 80px 0;}

.Wrap { }
.Wrap .Container { } 
.Wrap .Container .Content { } 
.Inner {display:block; position:relative; margin:auto;} 
.innerContainer { display:block; position:relative;} 

.w-5{width:5%;}
.w-8{width:8%;}
.w-10{width:10%;}
.w-15{width:15%;}
.w-20{width:20%;}
.w-30{width:30%;}
.w-35{width:35%;}
.w-40{width:40%;}
.w-45{width:45%;}
.w-55{width:55%;}
.w-60{width:60%;}
.w-65{width:65% !important;}
.w-70{width:70%;}
.w-75{width:75%;}
.w-80{width:80%;}
.w-84{width:84%;}
.w-90{width:90%;}
.h-5{height:5%;}
.fs-big-8{font-size:8rem;}
.fs-1-1{font-size:3rem;}
.fs-5-5{font-size:1.1rem;}
.fs-7{font-size:.9rem !important;}
.fs-8{font-size:.875em;}
.fs-9{font-size:3rem;}
.fs-10{font-size:4rem;}
.pb-5-5{padding-bottom:4rem;}
.pb-6{padding-bottom:6rem}
.px-5-5{padding-right:4rem; padding-left:4rem;}
.px-6{padding-right:5rem; padding-left:5rem;}
.px-7{padding-right:7rem !important; padding-left:7rem !important;}
.py-1-1{padding-top:.5rem; padding-bottom:.5rem;}
.py-1-2{padding-top:.6rem; padding-bottom:.6rem;}
.py-2{padding-top:.8rem !important; padding-bottom:.8rem !important;}
.py-2-2{padding-top:.7rem; padding-bottom:.7rem;}
.py-4-5{padding-top:2rem; padding-bottom:2rem;}
.py-6{padding-top:6rem; padding-bottom:6rem;}
.py-8{padding-top:8rem; padding-bottom:8rem}
.pt-10{padding-top:10rem;}
.py-10{padding-top:10rem; padding-bottom:10rem}
.ms-7{margin-left: 7rem;}
.mt-6{margin-top: 4rem;}
.my-6{margin-top: 4rem; margin-bottom: 4rem;}
.my-8{margin-top: 8rem; margin-bottom: 8rem;}
.mt-4-5{margin-top:1.8rem;}
.lh-1{line-height:1.5 !important;}
.start-m-15{left:-15%;}
.start-5{left:5%;}
.start-8{left:8%;}
.start-9{left:9%;}
.start-10{left:10%;}
.start-30{left:30%;}
.start-35{left:35%;}
.start-36{left:36%;}
.start-40{left:40%;}
.start-60{left:60%;}
.top-5{top:5%;}
.top-8{top:8%;}
.top-9{top:9%;}
.top-10{top:10%;}
.top-15{top:15%;}
.top-30{top:30%;}
.top-32{top:32%;}
.top-35{top:35%;}
.top-40{top:40%;}
.top-45{top:45%;}
.top-60{top:60%;}
.top-65{top:65%;}
.top-85{top:85%;}
.top-m-7{top:-7%;}
.top-m-10{top:-10%;}
.top-m-12{top:-12%;}
.top-m-15{top:-15%;}
.top-m-20{top:-20%;}
.end-m-15{right:-15%;}
.end-2{right:2%;}
.end-5{right:5%;}
.end-10{right:10%;}
.end-20{right:20%;}
.end-30{right:30%;}
.end-40{right:40%;}
.bottom-5{bottom:5%;}
.bottom-10{bottom:10%;}
.bottom-20{bottom:20%;}
.bottom-25{bottom:25%;}
.bottom-80{bottom:80%;}
.bottom-m-20{bottom:-20%;}
.fb-1{font-size: calc(1.5rem + 1.5vw);}
.ff-montser{font-family:'Montserrat', 'Pretendard', '돋음, Dotum', 'Apple SD Gothic', 'sans-serif';}
.fw-smbold{font-weight:600;}
.text-black-30 {color: rgba(0, 0, 0, .3);}
.text-blue-gray{color:#3b4859}
.text-light-green{color:#02ce99;}
.border-gray{border-color:#f0f0f0;}
.bg-green{background-color:#3c9c50;}
.bg-yellow{background-color:#ffc100;}
.bg-purple{background-color:#7a34a5;}
.bg-skyblue{background-color:#32c1de;}
.bg-brown{background-color:#995e4b;}
.bg-light-green{background-color:#02ce99;}
.bg-dark-pink{background-color:#c25450;}
.bg-dark-blue{background-color:#031127;}
.bg-light-gray-10{background-color:#f5f5f5;}
.bg-light-blue{background-color:#f1f7fd;}


/* [삭제버튼] */
.btn-delete  {width:20px; height: 20px;}
.btn-delete:before, .btn-delete:after {position: absolute; content:' '; top: 8px; height: 20px; width: 2px; background-color: #000;}
.btn-delete:before {transform: rotate(45deg);}
.btn-delete:after {transform: rotate(-45deg);}

/* ===================================================================== */
/* [소셜 로그인] */
.social-login {}
.social-login .or-line { position: relative;}
.social-login .or-line span { position: relative; display: inline-block; padding: 0 20px; background-color:#fff; z-index: 2;}
.social-login .or-line::after {position: absolute; content: ""; display: inline-block; width: 100%; border-bottom: 1px solid #eaeaea; bottom: 22px; margin-right: 15px; }
.social-login .naver-btn { background-color: #03cf5d; border: none; }
.social-login .kakao-btn { background-color: #f9e000; border: none; }
.social-login .rounded-circle { width:50px; height:50px; }

/* ===================================================================== */
/* [로그인] */
.login-cotanet .Logo{width:200px;} 
.login-cotanet .Logo img{width:100%; object-fit:cover;} 
.login-cotanet .emil-icon { top: 41px; right: 16px; }
.login-cotanet .pw-icon1 { top: 41px; right: 12px; }

.login-cotanet .form-floating>label {padding: 1.3rem .75rem;}
.login-cotanet .join-text-primary {color:#0d6efd;}
.login-cotanet .text-end a:last-child {border-left:1px solid #eaeaea;}

/* ===================================================================== */

/* ===================================================================== */
/* [비밀번호 변경] */
.pw-change-cotanet .lock-icon { top: 20px; }
.pw-change-cotanet .next-pw-btn {color: #0d6efd; }
.pw-change-cotanet .pw-icon1 { top: 40px; right: 12px; }

/* ===================================================================== */

/* [아이디 찾기] */
.find-id-cotanet .text-end a:last-child {border-left:1px solid #eaeaea;}
.find-id-cotanet .auth-number { width: 85% }

/* [비밀번호 찾기] */
.find-pw-cotanet.text-end a:last-child {border-left:1px solid #eaeaea;}
.find-pw-cotanet .emil-icon { top: 43px; right: 18px; }
.find-pw-cotanet .pw-icon1 { top: 41px; right: 12px; }

/* ===================================================================== */

/* [회원가입] */
.join-cotanet .order ul::before{position: absolute; content:""; width:200px; height:2px; border:1px solid #ddd; background-color:#ddd; z-index:-1; top:25%; left:55%; transform:translate(-50%, 50%);}
.join-cotanet .emil-icon{top:16px; right:72px;}
.join-cotanet .pw-icon1{top:41px; right:12px;}
/* [SNS 비밀번호 설정] */
.join-cotanet .emil-icon{/* right:18px; */}

/* ===================================================================== */

/* [MY 사이트] */
.mysite-cotanet .brand-drop-box .dropdown-menu-end li{width:200px; overflow: inherit;}
.mysite-cotanet .brand-drop-box .dropdown-menu-end li .btn-text{display:block; width:170px; text-align:left; text-overflow:ellipsis; overflow:hidden; white-space: nowrap;}
.mysite-cotanet .brand-drop-box .dropdown-menu-end li .add-btn{right:0; top:0;}

.mysite-cotanet .brand-drop-box .dropdown-menu-end .menu-box {height:214px; overflow-x:hidden; overflow-y:auto; }

.mysite-cotanet .boardSettingWrap .tblView{}
.mysite-cotanet .boardSettingWrap .tblView tr th, .boardSettingWrap .tblView tr td{border:0;padding:15px; vertical-align:middle;}
.mysite-cotanet .boardSettingWrap .tblView tr td .spRadio{display:inline-block; width:150px;}
.mysite-cotanet .boardSettingWrap .tblView tr td.thumbBox{height:60px;padding:5px;}
.mysite-cotanet .boardSettingWrap .drop-menu-2{transform:translate(0px, 50px) !important;}

/* ===================================================================== */
/* [사이트 만들기_공통] */
.site-make-cotanet .RatePaln{display:inline-block;}
.site-make-cotanet .RatePaln01{width:90px;}
.site-make-cotanet .RatePaln02{width:50px;}

/* [사이트 만들기_홈페이지선택] */
.site-make-cotanet .homepageSelect ul{height:425px;}
.site-make-cotanet .homepageSelect ul li:hover{transform:translateY(-15px); transition:all 0.3s ease-in-out;}
.site-make-cotanet .homepageSelect ul li:hover a{height:100%; border:2px solid #d8e8ff;}

/* [사이트 만들기_테마색상선택, 버튼색상선택] */
.site-make-cotanet .theme-color-box{width:90px;}
.site-make-cotanet .theme-color-box label{height:85px;}

.site-make-cotanet .want-color .form-floating>label{padding:1.35rem .75rem !important;} 
.site-make-cotanet .want-color .form-control-color{width:4.5rem; height:calc(1.7em + 2rem + calc(var(--bs-border-width)* 2)); padding:0rem 0.38rem 0rem; !important}

/* [사이트 만들기_메인페이지선택] */
.site-make-cotanet .choose-main-page .form-check{padding-left:1rem !importanat;}
#selectBox.border-box{border:1px solid #ddd;}
#selectBox.active{border:1px solid #0d6efd;}

/* ===================================================================== */

/* [모달창 스타일] */
.modal-body{max-height:300px; overflow-y:auto;}
.modal-content p{white-space:normal;}

/* [사이트 만들기 페이지_모닽창 스타일] */
.siteMakeModal{--bs-modal-width:50%;}
.siteMakeModal .modal-body{max-height:600px;}

/* ===================================================================== */

/* [유효성 검사] */
.form-control.is-valid, .was-validated .form-control:valid { background-image: none; !importanat }
.form-control.is-invalid, .was-validated .form-control:invalid { background-image: none; !importanat display:block; }
.form-check-input.is-valid:checked, .was-validated .form-check-input:valid:checked { background-color: #0d6efd; !importanat }
.form-check-input.is-valid, .was-validated .form-check-input:valid { border-color: #dee2e6; !importanat }
.form-check-input.is-invalid~.form-check-label, .was-validated .form-check-input:invalid~.form-check-label { color:#000; !importanat }

/* ===================================================================== */
/* [로더스피너] */
#timeLoading{width:100%; height:100%; left:0; top:0; background:rgb(0,0,0,0.7); text-align:center;}
#timeLoading img{position:absolute; left:50%; width:50px; margin-left:-25px; top:50%; margin-top:-25px;}
#timeLoading p{position:absolute; top:50%; margin-top:82px; color:#fff; width:100%; left:0; font-size:12pt;}
#timeLoading .loader {width:120px; height:120px; border-radius:50%; display:inline-block; border-top:5px solid #fff; border-right:5px solid transparent; box-sizing:border-box; animation:timeLoadingRotation 1s linear infinite; position:absolute; top:50%; margin-top:-60px; left:50%; margin-left:-60px;}

@keyframes timeLoadingRotation {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
} 

/* ===================================================================== */

/* [회원가입_유효성 검사] */
.join-cotanet .form-check-input.is-valid~.form-check-label, .was-validated .form-check-input:valid~.form-check-label { color:#000; !importanat }

/* ===================================================================== */

/* 공통헤더와푸터 */
/* ===================================================================== */
/* 헤더영역 */
header { }
header .container a img { max-height: 20px;}
header .container .header-logo{width:170px;}
header .container .header-logo img{width:100%; object-fit:cover;}
header .nav-menu{display:flex; align-items:center;}
header .nav li a{position:relative; z-index:2;}
/* 스크롤시 상단고정픽스 */
header.Fixed{display:block; position:fixed; width:100%; top:0px; border-top:none; background:rgba(255,255,255, 0.9); z-index:997;}
header.Fixed .HeaderNav_GNBtop{display:none;} 
header.Fixed .HeaderNav_GNBmenu{}

	/* 프로필 영역 ------------------------------------------------------------------------------------------ */
	header .nav .dropdown .profile-img div{width:55px; height:55px; overflow:hidden;}
	header .nav .dropdown .profile-img div img{width:100%; height:100%; object-fit:cover;}
	header .nav .dropdown .dropdown-menu li:nth-child(1):hover{background-color:#fff;}

	/* header 소메뉴 ------------------------------------------------------------------------------------------ */
	header .HeaderNav_SmallMenuCube .SubNav_Hide02{display:none;}
	header .HeaderNav_SmallMenuCube{margin-left:-50px; position:absolute; top:0; width:180px; padding:4.5em 0 1em; opacity:0; visibility:hidden;-webkit-transform:translateY(10px); transform:translateY(10px); z-index:999;}
	header .HeaderNav_SmallMenuCube ul{padding:0.5em 0; background-color:rgb(255 255 255 / 100%); box-shadow:0px 7px 13px 3px rgba(0, 0, 0, 0.05); border-radius:10px;}
	header .HeaderNav_SmallMenuCube ul li{padding:0.5em; margin:0 0.5em; font-size:15px;}

	header .menu-toggle a i{display:none;}
	header .menu-toggle:hover .HeaderNav_SmallMenuCube{display:block; opacity:1; visibility:visible; -webkit-transform:translateY(0); -ms-transform:translateY(0);  transform:translateY(0); -webkit-transition:all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
	header .MenuBig:hover .HeaderNav_SmallMenuCube ul{}
	header .MenuBig:hover .HeaderNav_SmallMenuCube ul li{display:block;}
	header .MenuBig:hover .HeaderNav_SmallMenuCube ul li:hover{background-color:#f0f0f0; border-radius:5px;}
	header .right-menu .MobileLogin{display:none;}
	header .Mobile-profile{display:none;}
	header .MobileNav{display:none;}

/* ===================================================================== */
/* 푸터영역 */
footer a img { max-height: 20px; }
footer .offset-md-2 { margin-left: 12%; }
footer .nav-item { display:flex; align-items: center; height: 20px; border-right:1px solid #eaeaea; }
footer .nav-item:last-child { border-right:none; }

/* ================================================================================================================= */
/* 플로팅퀵메뉴 */
.quickArea{}
.quickArea > div{position:fixed; z-index:998; bottom:1em; left:1em; width:380px; animation-name:aniQuickOpen; animation-iteration-count:1; animation-duration:1.5s; display:block; padding:25px; border-radius:10px; box-shadow:1px 6px 13px 0 rgba(0, 0, 0, 0.25); background-color:#fff;}
.quickArea.close > div{animation-name:aniQuickClose; animation-iteration-count:1; animation-duration:1.5s; animation-fill-mode:forwards;}
.quickArea .quickClose{position:absolute; left:0; top:-28px; z-index:2; display:inline-block; font-size:16pt; font-weight:200; color:#7b7b7b8c;}
.quickArea .quickClose span{cursor:pointer;}
.quickArea .quickImg{position:relative; display:block; width:100%;}
.quickArea .quickImg span{position:relative; display:block; width:100%;}
.quickArea .quickImg span img{position:relative; display:block; width:100%;}
.quickArea .quickBtn{position:relative; display:block; width:100%; text-align:center; margin-top:1em;}
.quickArea .quickBtn a{position:relative; display:inline-block; border-radius:7px; padding:0.8em 1.5em; width:100%; background:linear-gradient(to right, #00c33a, #007aff);}
.quickArea .quickBtn a p{color:#fff; font-size:11pt; font-weight:500; line-height:1.2;}
	
@keyframes aniQuickOpen{
	0%{bottom:-100%;}
	100%{bottom:1em;}
}
@keyframes aniQuickClose{
	0%{bottom:1em;}
	100%{bottom:-100%;}
}

/* ================================================================================================================= */
/* 메인페이지 */
/*.MainConBox{width:1600px; margin:0 auto;}*/

/* [세션01] 메인이미지 */
.MainSection01 .SwiperFull{width:1920px; height:800px; background-color:#000;}
.MainSection01 .Slide02 .TextBox{transform:translate(-20%, 33%);}
.MainSection01 .Slide02 .ImgBox{transform: translate(-10%, -35%) rotate(-20deg);}
.MainSection01 .Slide03 .ImgBox{height:400px;}
.MainSection01 .Slide03 .ImgBox .swiper-wrapper{}
.MainSection01 .Slide03 .ImgBox .swiper-wrapper .swiper-slide{}
.MainSection01 .Slide03 .ImgBox .swiper-wrapper .swiper-slide img{width:100%; height:100%; object-fit:cover; object-position:top;}
.MainSection01 .Slide04 .LeftImgBox{position:relative; top:17%; left:-4%;}
.MainSection01 .Slide04 .LeftImgBox img{width:95%;}
.MainSection01 .Slide04 .RightImgBox{position:relative; top:17%; right:-10%;}
.MainSection01 .Slide04 .RightImgBox img{width:40%;}


/* [세션02] 소개 */
.MainSection02{}
.MainSection02 .container .Box > div{width:calc(100% / 2 - 30px);}
.MainSection02 .RightBox .List02{margin-top:50px;}
.MainSection02 .LeftBox .List{box-shadow:2px 2px 8px rgba(0,0,0,0.08);}
.MainSection02 .RightBox .List{box-shadow:2px 2px 8px rgba(0,0,0,0.08);}
.MainSection02 .LeftBox .List:nth-child(1){background-color:#f6f6f6;}
.MainSection02 .RightBox .List01{background-color:#e0f1ff;}
.MainSection02 .RightBox .List02{background-color:#f1f3f8;}

.MainSection02 .LeftBox .ImgBox{transform:translateX(10%) rotate(-15deg);}
.MainSection02 .LeftBox .ImgBox span{box-shadow:0 20px 20px 0 rgba(0, 0, 0, 0.15); transition:transform 0.5s ease-in-out;}
.MainSection02 .LeftBox .ImgBox span:nth-child(1){transform:translateY(-5%);}
.MainSection02 .LeftBox .ImgBox span:nth-child(2){transform:translateY(20%);}
.MainSection02 .LeftBox:hover .ImgBox span:nth-child(1){transform:translateY(20%);}
.MainSection02 .LeftBox:hover .ImgBox span:nth-child(2){transform:translateY(5%);}

.MainSection02 .RightBox .List01 .ImgBox{position:absolute; right:0; transform:translate(40%, -180%) rotate(-15deg);}
.MainSection02 .RightBox .List01 .ImgBox span:nth-child(1){transform:translate(30%, -10%);}
.MainSection02 .RightBox .List01 .ImgBox span:nth-child(2){transform:translate(-45%, 35%);}
.MainSection02 .RightBox .List01 .ImgBox span:nth-child(3){transform:translate(-65%, 30%);}
.MainSection02 .RightBox .ImgBox span{transition:transform 0.5s ease-in-out;}
.MainSection02 .RightBox .List01:hover .ImgBox span:nth-child(1){transform:translate(20%, 0%);}
.MainSection02 .RightBox .List01:hover .ImgBox span:nth-child(2){transform:translate(-35%, 25%);}
.MainSection02 .RightBox .List01:hover .ImgBox span:nth-child(3){transform:translate(-75%, 35%);}

.MainSection02 .RightBox .List02 .ImgBox{}
.MainSection02 .RightBox .List02 .ImgBox span{transition:transform 0.5s ease-in-out; transform:translateY(10%);}
.MainSection02 .RightBox .List02 .ImgBox span:after{position:absolute; content:''; top:-15em; left:100%; width:50px; height:500px; background:rgb(255 255 255 / 35%); transform:rotate(300deg); transition-duration:850ms; opacity:0; z-index:2;}
.MainSection02 .RightBox .List02:hover .ImgBox span{transform:translateY(0%);}
.MainSection02 .RightBox .List02:hover .ImgBox span:after{top:6em; left:0; opacity:.8;}

/* [세션03] 홈페이지만들기 */
.MainSection03 .btn:hover{color:#fff !important;}
.MainSection03 .bi-arrow-right{animation:arrowMotion .9s cubic-bezier(0.47, 0.01, 0.5, 0.97) infinite alternate;}

/* [세션04] 프로그램 소개 */
.MainSection04{background-color:#F4F5F8;}
.MainSection04 .swiper{height:660px;}
.MainSection04 .swiper .swiper-wrapper .swiper-slide .TextBox{width:25%;}
.MainSection04 .swiper .swiper-wrapper .swiper-slide .TextBox p{text-overflow:clip; overflow:visible; white-space:normal;}
.MainSection04 .swiper .swiper-wrapper .swiper-slide .ImgBox{width:1400px !important;}
.MainSection04 .swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical>.swiper-pagination-bullets{transform: translate3d(40px, 50%, 0);}
.MainSection04 .swiper .swiper-wrapper .swiper-slide .ImgBox{transform: translate(115%, 50px); transition:transform 3.5s ease-in-out;}
.MainSection04 .swiper .swiper-wrapper .swiper-slide.swiper-slide-active .ImgBox{transform: translate(40%, 50px); transition:transform 1s ease-in-out;  animation:imageMotion 2s linear 2s; -webkit-animation:imageMotion 2s;}

/* [세션05] 제작사례 */
.MainSection05 .btn:hover{color: #fff !important;}
.MainSection05 .swiper-wrapper{transition-timing-function:linear !important; position:relative;}
.MainSection05 .swiper-wrapper .swiper-slide{transition:transform .2s;}
.MainSection05 .swiper-wrapper .swiper-slide:hover {transform:scale(.95);}
.MainSection05 .bi-arrow-right{animation:arrowMotion .9s cubic-bezier(0.47, 0.01, 0.5, 0.97) infinite alternate;}
.MainSection05 .swiper-wrapper .swiper-slide .Text01 .pfInfo{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; white-space:normal; overflow:hidden;}
.MainSection05 .ImgBox{height:340px;}

/* [세션06] 고객후기 */
.MainSection06{background-color:#F4F5F8;}
.MainSection06 .IconList .IconItem{box-shadow:5px 5px 15px rgba(0,0,0,0.05);}
.MainSection06 .IconList .IconItem{animation:iconMotion 0.5s linear 0s infinite alternate; margin-top: 0;}
.MainSection06 .ReviewBox li{width:calc(100% / 3 - 30px);}
.MainSection06 .ReviewBox li p{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; white-space:normal; overflow:hidden;}
.MainSection06 .ReviewBox li .tag p{width:calc(100% / 3 - 10px);}
.MainSection06 .ReviewBox li .TopBox{height:180px;}
.MainSection06 .ReviewBox li .speech-bubble{position:relative; background-color:rgba(255,255,255,0.7); /*box-shadow:inset -7px -10px 10px 0px rgba(0, 0, 0, 0.08);*/ height:100px;}
.MainSection06 .ReviewBox li .speech-bubble:after {content:''; position:absolute; top:-15px; left:20%; width:0; height:0; border-bottom:15px solid rgba(13,110,253,1); border-left:5px solid transparent; border-right:15px solid transparent;} 

/* [세션07] 파트너 */
.MainSection07 .swiper-container .swiper-wrapper{transition-timing-function:linear !important;}

/* [세션08] 사이트개설 */
.MainSection08{background-color:#0F0F10; height:600px; border-top-left-radius:100px; border-top-right-radius:100px;}
.MainSection08 a .bi-arrow-right{animation:arrowMotion .9s cubic-bezier(0.47, 0.01, 0.5, 0.97) infinite alternate;}

/* ================================================================================================================= */
/* 서브페이지 */
/*.SubConBox{width:1400px; margin:0 auto;}*/
.siteMakeWrap .SubConBox{width:1600px; margin:0 auto;}
.mypageWrap .SubConBox{width:1600px; margin:0 auto;}
/* ================================================================================================================= */
/* [서비스소개] 페이지 */
.seriveWrap{}
.seriveWrap .simple-text p{text-overflow:clip; white-space:normal;}

/*[서비스소개_세션01]상단이미지*/
.seriveWrap .Section01{} 

/*[서비스소개_세션02]홈페이지 디자인*/
.seriveWrap .Section02 .LeftBox .swiper-slide{width:100% !important; height: 25% !important;}
.seriveWrap .Section02 .LeftBox .swiper-slide:hover{cursor:pointer;}
.seriveWrap .Section02 .mySwiper .swiper-slide-thumb-active {border:1px solid #0d6efd; border-radius:15px; background-color:rgba(255,255,255,0.7); color:#0d6efd;}
.seriveWrap .Section02 .mySwiper .swiper-slide-thumb-active .text-blue-gray{color:#0d6efd !important;}
.seriveWrap .Section02 .RightBox{box-shadow:0px 0px 2px rgba(75, 81, 91, 0.1), 0px 2px 20px rgba(75, 81, 91, 0.12);}

/*[서비스소개_세션03]페이지 생성 및 수정*/
.seriveWrap .Section03{background-color:#f8f8f8;}
.seriveWrap .Section03 .RightBox .swiper-slide{width:100% !important; height: 33.3% !important;}
.seriveWrap .Section03 .RightBox .swiper-slide:hover{cursor:pointer;}
.seriveWrap .Section03 .mySwiper .swiper-slide-thumb-active {border:1px solid #0d6efd; border-radius:15px; background-color:rgba(255,255,255,0.7); color:#0d6efd;}
.seriveWrap .Section03 .mySwiper .swiper-slide-thumb-active .text-blue-gray{color:#0d6efd !important;}
.seriveWrap .Section03 .LeftBox{box-shadow:0px 0px 2px rgba(75, 81, 91, 0.1), 0px 2px 20px rgba(75, 81, 91, 0.12);}

/*[서비스소개_세션04]다양한 형태의 게시판 생성*/
.seriveWrap .Section04 .LeftBox .swiper-slide {width:100% !important; height: 33.3% !important;}
.seriveWrap .Section04 .LeftBox .swiper-slide:hover{cursor:pointer;}
.seriveWrap .Section04 .mySwiper .swiper-slide-thumb-active {border:1px solid #0d6efd; border-radius:15px; background-color:rgba(255,255,255,0.7); color:#0d6efd;}
.seriveWrap .Section04 .mySwiper .swiper-slide-thumb-active .text-blue-gray{color:#0d6efd !important;}

/*[서비스소개_세션05]필요한 기능*/
.seriveWrap .Section05{background-color:#f8f8f8;}
.seriveWrap .Section05 ul li{width:calc(100% / 3 - 50px); margin-top:50px;}
.seriveWrap .Section05 ul li p{line-height:1.2rem; text-overflow:clip; overflow:hidden; white-space:normal;}

/*[서비스소개_세션06]제작의뢰신청*/
.seriveWrap .Section06 .btn:hover{color:#fff !important;}
.seriveWrap .Section06 a .bi-arrow-right{animation:arrowMotion .9s cubic-bezier(0.47, 0.01, 0.5, 0.97) infinite alternate;}

/* ================================================================================================================= */
/* [제작의뢰] 페이지 */
.requestWrap{}
.requestWrap .Section01 .swiper-slide{width:40%;}

/* ================================================================================================================= */
/* [고객사례] 페이지 */
.portfolioWrap{}
.portfolioWrap .MenuBox li .active{background-color:#0a58ca; color:#fff;}
.portfolioWrap .List li{width:calc(100% / 4 - 30px); margin-right:40px; box-shadow:2px 2px 8px rgba(0, 0, 0, 0.08);}
.portfolioWrap .List li:nth-child(4n+0){margin-right:0;}
.portfolioWrap .List li button{display:none;}
.portfolioWrap .List li:hover .ImgBox{filter: brightness(0.5);}
.portfolioWrap .List li:hover .TextBox{background-color:rgb(0,0,0,50%) !important;}
.portfolioWrap .List li:hover button{display:block;}  
.portfolioWrap .Quick_GoTop a{width:50px; height:50px;}

/* ================================================================================================================= */
/* [고객지원]상단 메뉴 공통 */
.qnaWrap .TopMenu li{width:calc(100% / 4);}
.qnaWrap .TopMenu li.active{border-bottom:3px solid #0d6efd;}
.qnaWrap .TopMenu li.active a{color:#0d6efd !important;}

/* [고객지원_1:1문의] 페이지 */
.qnaWrap{}
.qnaWrap .Section01{width:1200px; margin:0 auto;}
.qnaWrap .table thead tr{height:30px; line-height:30px;}
.qnaWrap .table tbody tr{height:20px; line-height:20px;}
.qnaWrap .table tbody th{color:#6c757d;}
.qnaWrap .table tbody tr td, a{text-overflow:ellipsis; overflow:hidden; white-space:nowrap; color:#6c757d;}
.qnaWrap .table>:not(caption)>*>* {padding: 1rem 1rem !important;}
.qnaWrap .table .NoneList:not(caption)>*>* {border-bottom-width:0;}
.qnaWrap .table .NoneList tr td{height:300px; padding:150px !important;}

.qnaInquiryWrap form textarea.form-control{min-height:calc(13.5em + .75rem + calc(var(--bs-border-width)* 2)) !important;}
.qnaInquiryLsitDetailWrap .SubConBox{width:1200px; margin:0 auto;}
.qnaInquiryLsitDetailWrap .TitleBox{border-top:3px solid #000 !important;}
.qnaInquiryLsitDetailWrap .QuestionBox p, .qnaInquiryLsitDetailWrap .AnswerBox p{white-space:normal !important;}
.qnaInquiryLsitDetailWrap .AnswerBox .Question-border{width:35px; height:35px; line-height:35px;}

/* ================================================================================================================= */
/* [요금안내] */
.priceBody{overflow:hidden;}
.priceBody{height:100vh;}
.priceWrap{}
.priceWrap .Contents_Area{height:calc(100vh - 130px);}
.priceWrap .Contents_Area > div{padding:0 0 0 0 ;}
.priceWrap .Section01{height:calc(100vh - 130px);}
.priceWrap .Section01 .Title{padding-top:3em;}
.priceWrap .Section01 table tbody th{padding:1.5%;}
.priceWrap .Section01 table tbody tr *{line-height:1}
.priceWrap .Section01 table tbody tr i{color:#0a58ca!important;}
.priceWrap .Section01 table tbody tr:not(:last-child) *{border:none;}
.priceWrap .Section01 table tbody tr:last-child *{ padding-bottom:4%;}
.priceWrap .Section01 table tbody td{padding:1.5%;}
.priceWrap .Section01 table tbody:last-child tr:last-child *{padding-bottom:6%; border:none;}
.priceWrap .Section01 table thead{position:sticky; top:0; background:#fff;}
.priceWrap .Section01 > .table-striped{height:height:calc(calc(100vh - 130px) - 185px); overflow-y:scroll; overflow-x:hidden;}
.priceWrap .Section01 > .table-striped thead:after{content:''; position:absolute; left:0; width:1100px; height:25px; background:linear-gradient(#00000014, transparent);}

/* ================================================================================================================= */
/* [자주묻는질문] */
.faqBody{}
.faqWrap{}
.faqWrap .nav-tabs{display:table; width:100%;}
.faqWrap .nav-tabs .nav-item{display:table-cell;}
.faqWrap .nav-tabs .nav-item > button{width:100%; border:none; font-weight:600; color:#212529; font-size:1.05rem!important}
.faqWrap .nav-tabs .nav-item > button.active{background-color:#212529; color:#fff;}
.faqWrap .accordion-button:not(.collapsed){background-color:#f1f1f1;}
.faqWrap .accordion-button:focus{box-shadow:none;}
.faqWrap .accordion-body{display:flex;}
.faqWrap .accordion-body > span{display:inline-flex; line-height:1.5; color:#fff; font-size:1.5rem; line-height:1; border-radius:100px; height:2.5rem; width:2.5rem; background-color:#dddddd; border-radius:100px; align-items:center; justify-content:center; margin-right:1rem}
.faqWrap .accordion-body > div{display:block; line-height:1.8; margin-top:0.5rem;}
.faqWrap .accordion-body b{font-weight:800;}
.faqWrap .accordion-button{display:flex;}
.faqWrap .accordion-button > div{display:block; line-height:1.5}
.faqWrap .accordion-button > span{display:inline-flex; line-height:1.5; color:#fff; font-size:1.5rem; line-height:1; border-radius:100px; height:2.5rem; width:2.5rem; background-color:#dddddd; border-radius:100px; align-items:center; justify-content:center; margin-right:1rem}

/* ================================================================================================================= */
/* [마이페이지] */
.mypageWrap .mypageInfo .List{width:calc(100% / 2 - 15px); overflow: visible;}
	/* 왼쪽메뉴 영역 */
	.mypageWrap .mypageLeftMenu .profile-img{width:55px; height:55px; overflow:hidden;}
	.mypageWrap .mypageLeftMenu .profile-img img{width:100%; height:100%; object-fit:cover;}
	.mypageWrap .mypageLeftMenu ul li a:hover{color:#0d6efd;}

	/* 오른쪽 리스트 영역 */
	.mypageWrap .mypageInfo .List .Title01{width:90px; text-align:center;}

	/* 프로필 이미지 수정 영역 */
	.mypageWrap .profileImgEdit .profile-img{width:100px; height:100px; overflow:hidden;}
	.mypageWrap .profileImgEdit .profile-img img{width:100%; height:100%; object-fit:cover;}

	/*회원탈퇴_탈퇴 전 확인사항 */
	.mypageWrap .wdrCheckBox .wdrCheckList{white-space:normal; position:relative; padding-left:12px;}
	.mypageWrap .wdrCheckBox .wdrCheckList:before{content:""; display:inline-block; width:5px; height:5px; border-radius:50px; background-color:#000; position:absolute; top:16px; left:0px;}