@CHARSET "UTF-8";

@import url('https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.6/static/pretendard.css');
@import url('https://fonts.googleapis.com/earlyaccess/notosanskr.css');
@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

* { margin:0; padding:0; box-sizing: border-box;}
html { scrollbar-Track-Color:#dcdcdc; scrollbar-Face-Color:#bfbfbf; }
body { font-size:16px; font-family: "Pretendard","돋움", Dotum, "굴림", Gulim, MalgunGothic, AppleGothic, Sans-serif; color:#000; text-align:left; }
img { border:0; vertical-align:top; margin:0; padding:0; }
ul,ol,li,dl,dt,dd { list-style:none; padding:0; margin:0; }

body::-webkit-scrollbar { width:8px; }
body::-webkit-scrollbar-thumb { background-color:#bfbfbf; }
body::-webkit-scrollbar-track { background-color:#dcdcdc; }

a { cursor:pointer; text-decoration:none; outline:none; }
a:hover, a:active, a:focus { text-decoration:none; }
.pcOnly{display: initial;}
.mobileOnly{display: none;}
.m1080Img{display: none;}
.m_top{display: none;}
.m_goConsult{display: none;}
.show1080{display: none !important;}

.wrap { user-select:none; }
main{width: 100%; height: auto; background: #4a64f5; text-align: center;}
main img{margin-top: 193px; margin-bottom: 108px;}
section .inner{width: 1080px; margin: 0 auto; text-align: center;}
section .inner.w1228{width: 1228px;}

.section1{width: 100%;}
.section1 .inner{position: relative;}
.section1 #s1_anchor{position: absolute; left: 0; top: -88px; background: transparent; width: 1px; height: 1px;}
.section2{width: 100%; max-height: 889px; padding-top: 4.8vw; padding-bottom: 10.3vw; background: #f6f8fc;}
.wrap.pc .section2 .inner{width: fit-content; max-width: 1304px; margin: 0 0 0 24.2vw; }
.section2 .pcContent .sec2Top{display: block; width: 30vw; max-width: 576px;}
.section2 .pcContent div{display: grid; grid-auto-flow: column; align-items: end; width: 100%; margin-top: 5.2vw;}
.section2 .pcContent div img:first-child{width: 15.5vw; max-width: 298px;}
.section2 .pcContent div img:last-child{width: 48.4vw; margin-left: 7.6%; max-width: 929px;}
.section3 { max-height: 939px; background: #e6efff; padding-top: 178px; }
.section3 .sec3Txt{margin-right: 2.9vw; max-width: 491px; width: 25.6vw;}
.section3 .sec3Hi{max-width: 451px; width: 23.4vw;}
.section5_5{background: #f3f3f3;}
.slide { 
  display: flex; 
  overflow: hidden;
  position: relative;
}
.slide .rolling-list ul { 
    display: flex;
}
.slide .rolling-list ul li { 
    width: 328px; 
    height: 275px; 
    box-sizing: border-box; 
    border-radius: 40px 40px 0 0; 
    margin: 0 11px;  
    display: flex; 
    align-items: center; 
    flex-shrink: 0; 
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.14);
    border: 1px solid #e3e3e3;
    background: #fff;
    text-align: center;
    opacity: 1;
    transition: opacity 0.3s;
    justify-content: center;
}

.slide:before { content:""; top: 0; left:0; position: absolute; display: inline-block; width: 38%; height: 100%; z-index: 1; background-image: linear-gradient(90deg, rgba(230, 239, 255, 0.7)
, transparent ); }
.slide:after { content:""; top: 0; right:0; position: absolute; display: inline-block; width: 38%; height: 100%; z-index: 1; background-image: linear-gradient(90deg, transparent, rgba(230, 239, 255, 0.7)); }

.innerDiv { margin-bottom: 115px; display: flex;align-items: center; justify-content: center; text-align: center; }
.rolling-list.original {
    animation: rollingleft1 65s linear infinite;
}
.rolling-list.clone {
    animation: rollingleft2 65s linear infinite;
}
@keyframes rollingleft1 {
    0% { transform: translateX(0); }
    50% { transform: translateX(-100%); }
    50.01% { transform: translateX(100%); }
    100% { transform: translateX(0); }
}

@keyframes rollingleft2 {
    0% { transition: translateX(0); }
    100% { transform: translateX(-200%); }
}

@media all and (max-width:968px ){
    .sec1 { padding-top: 80px; }
    .innerDiv { margin-bottom: 60px; }

}

.section4{width: 100%; background: #4a64f5;}
.section4 .w1228Img{width: 100%; max-width: 1228px;}
.section5{width: 100%; background: #e6efff;}
.section6{width: 100%; background: #fbfbfb;}
.section7{width: 100%; background: #e9e9e9;}
.section8{width: 100%; background: #242e61;}

/*견적서 나오기 전 임시 모달*/
.consultAlarm{width: 474px; height: 218px; display: flex; align-items: center; flex-direction: column; background: #fff url('https://nzscdn.azureedge.net/images/k365/consultAlarmBg.png') no-repeat center 32px; border-radius:10px; padding-top: 108px;}
.consultAlarm p{font-weight: 700; font-size: 18px; color: #000; margin-bottom: 24px;}
.consultAlarm .okBtn{width: 104px; height: 39px; display: flex; align-items: center; justify-content: center; background: #e9e9e9; border-radius: 3px; font-size: 13px; color: #000; cursor: pointer; user-select: none;}
.consultAlarm .okBtn:hover{background: #6b6b6b; color: #fff;}


.modalDownload { width:100%; height:100%; position:fixed; top:0; left:0; z-index:1030; background-color:rgba(0,0,0,0.7); text-align:center; display:none; overflow:auto; align-items: center; justify-content: center;}

/*sec8 서비스신청 CSS*/
.modal_pptView {position:relative; width: 865px; height:549px; border-radius: 10px; box-shadow: 4px 4px 40px 0 rgba(0, 0, 0, 0.15); margin:0 auto; text-align: left; overflow: hidden;}

.modal_pptView .modalX {  width:27px; height:27px; display:inline-block; background:url('../../k365_alpha/images/modalX.png')  no-repeat; background-size: cover; position:absolute; right: 18px; top:18px; }
.modal_pptView .modalX:hover { background:url('../../k365_alpha/images/modalX_hover.png') no-repeat; background-size: cover; cursor:pointer; }
.modal_pptView>div{display: flex;}
.modal_pptView>div .leftCont{width: 299px; height: 549px; background: url('../../k365_alpha/images/pptView_left.png') no-repeat; padding: 196px 0 0 36.5px;}
.m_title{display: none;}
.modal_pptView>div .leftCont h3{font-weight: 800; font-size: 15px; letter-spacing: -0.75px; color: #fff; margin-bottom: 10px;}
.modal_pptView>div .leftCont li{font-weight: 400; font-size: 14px; line-height: 20px; letter-spacing: -0.7px; color: #7aa2e5; display: inline-block; transition: color 0.5s ease;}
.modal_pptView>div .leftCont .on1 li:nth-child(1){color: #fff; position: relative; padding-right: 18px;}
.modal_pptView>div .leftCont .on1 li:nth-child(1)::after{content: '→'; position: absolute; top: 0; right: 0; font-size: 14px;}
.modal_pptView>div .leftCont .on2 li:nth-child(2){color: #fff; position: relative; padding-right: 18px;}
.modal_pptView>div .leftCont .on2 li:nth-child(2)::after{content: '→'; position: absolute; top: 0; right: 0; font-size: 14px;}
.modal_pptView>div .leftCont .on3 li:nth-child(3){color: #fff; position: relative; padding-right: 18px;}
.modal_pptView>div .leftCont .on3 li:nth-child(3)::after{content: '→'; position: absolute; top: 0; right: 0; font-size: 14px;}
.modal_pptView>div .rightCont{background: #f3f4f7; width: 566px; height: 549px; padding: 53px 48px 0;}
.modal_pptView>div .rightCont h2{font-family: 'GmarketSansBold'; font-size: 20px; letter-spacing: -1px; color: #000; margin-bottom: 14px;}
.modal_pptView>div .rightCont .pptItem_list{display: flex;}
.modal_pptView>div .rightCont .pptItem_list li{width: 150px; height: 49px; border: 2px solid transparent; font-family: 'Noto Sans KR'; font-weight: bold; font-size: 14px; letter-spacing: -0.7px; background: #fff;
 border-radius: 30px; display: flex; align-items: center; justify-content: center; box-shadow: 2px 2px 20px 0 rgba(0, 0, 0, 0.08); cursor: pointer; user-select: none; margin-bottom: 9px;}
.modal_pptView>div .rightCont .pptItem_list li:nth-child(1){color: #153468;}
.modal_pptView>div .rightCont .pptItem_list li:nth-child(2){color: #3781ff; margin: 0 10px;}
.modal_pptView>div .rightCont .pptItem_list li:nth-child(3){color: #64bbeb;}
.modal_pptView>div .rightCont .pptItem_list li:nth-child(1).on{border-color: #153468;}
.modal_pptView>div .rightCont .pptItem_list li:nth-child(2).on{border-color: #3781ff;}
.modal_pptView>div .rightCont .pptItem_list li:nth-child(3).on{border-color: #64bbeb;}
.modal_pptView>div .rightCont .pptItem_data li{display: none; width: 470px; height: 375px; overflow: hidden;}
.modal_pptView>div .rightCont .pptItem_data li img{margin: -13px 0 0 -19px;}
.modal_pptView>div .rightCont .pptItem_data li.on{display: block;}
.modal_pptView>div .rightCont .m_pptItem_data{display: none;}

.modalDownload::-webkit-scrollbar { width:1px; }
.modalDownload::-webkit-scrollbar-thumb { background-color:#bfbfbf; }
.modalDownload::-webkit-scrollbar-track { background-color:#dcdcdc; }

.w1080Img{width: 100%; max-width: 1080px;}

@media (max-width: 1586px){
    .section3 .sec3Txt{width: 29.6vw;}
    .section3 .sec3Hi{width: 27.4vw;}
    .section4 .w1228Img{width: calc(100% - 8rem);}
}

@media (max-width: 1400px){
    section .inner{width: 100%;}
    main img{width: calc(100% - 8rem);}
    .w1080Img{width: calc(100% - 16rem);}
    .section4 .w1228Img{width: calc(100% - 16rem);}
    /*주먹 영역 반응형*/
    .wrap.pc .section2 .inner{margin: 0 0 0 16.2vw;}
    .section2 .pcContent .sec2Top{width: 34vw;}
    .section2 .pcContent div img:first-child{width: 19.5vw;}
    .section2 .pcContent div img:last-child{width: 52.4vw;}
}

@media (max-width: 1280px){
    main img{width: calc(100% - 4rem);}
    .w1080Img{width: calc(100% - 12rem);}
    section .inner.w1228{width: 100%;}
    footer .container{width: calc(100% - 100px); max-width: 1080px; }
}

@media (max-width: 1080px){
    .m1080Img{display: inline-block; width: 100%;}
    .w1080Img{width: 100%;}
    .show1080{display: initial !important;}
    .hide1080{display: none !important;}
    .pcOnly{display: none !important;}
    .mobileOnly{display: initial !important;}
    .mobileHide{display: none !important;}
    .pcImg{display: none;}
    .pcContent{display: none;}
    .m_top.on{position: fixed; right: 0; bottom: 97px; display: inline-block; width: 53px; height: 53px; background: url('../images/mTop.png') no-repeat; cursor: pointer; z-index: 99;}
    .m_goConsult.on{position: fixed; left: 0; bottom: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 60px; background: #ffa923; font-weight: bold; font-size: 22px; letter-spacing: -1.1px;  color: #fff; cursor: pointer; z-index: 99;}

    .section2{padding: 0;}
    .section3{padding-top: 0;}
    .section3 .innerDiv{padding-top: 17.1vw; padding-bottom: 10.5vw; margin-bottom: 0;}
    .section3 .sec3Txt{width: 45.5vw;}
    .section3 .sec3Hi{width: 41.8vw;}
    .slide .rolling-list ul li{width: 30vw; height: 23vw; border-radius: 3.8vw 3.8vw 0 0; margin:  0 1vw;}
    .slide .rolling-list ul li img{max-width: 185px; width: 17.1vw;}
    section .inner.w1228{width: 100%;}
    footer{margin-bottom: 60px;}
    .boxFooter .pcOnly{margin: 0;}
}


@media (max-width: 1162px){
	.m_title{display: block;}
    .modal_pptView{position: fixed; left: 50%; top: 0; max-width: 901px; width: calc(100% - 22.46vw); height: 100%; overflow-y: scroll; transform: translateX(-50%);}
    .modal_pptView::-webkit-scrollbar { width:1px; }
    .modal_pptView::-webkit-scrollbar-thumb { background-color:transparent; }
    .modal_pptView::-webkit-scrollbar-track { background-color: transparent; }
    .modal_pptView .modalX{width: 5.599vw; height: 5.599vw; top: 1.5vw; right: 1.5vw; background: url('../../k365_alpha/images/m_modalX.png')  no-repeat; background-size: 100% 100%;}
    .modal_pptView .modalX:hover{background: url('../../k365_alpha/images/m_modalX.png')  no-repeat; background-size: 100% 100%;}
    .modal_pptView>div{flex-direction: column;}
    .modal_pptView>div .leftCont{width: 100%; height: 48.538vw; padding: 6.55vw 0 0 6.05vw; background: url('../../k365_alpha/images/m_pptView_left.png') no-repeat; background-size: 100% 100%;}
    .modal_pptView>div .leftCont .m_title{margin-bottom: 4.15vw;}
    .modal_pptView>div .leftCont .m_title img{width: 35.229vw;}
    .modal_pptView>div .leftCont ul{display: flex; flex-direction: column;} 
    .modal_pptView>div .leftCont li{width: fit-content; font-size: 2.59vw; letter-spacing: -0.13vw; line-height: normal; margin-bottom: 1.26vw;}
    .modal_pptView>div .leftCont .on1 li:nth-child(1)::after, .modal_pptView>div .leftCont .on2 li:nth-child(2)::after, .modal_pptView>div .leftCont .on3 li:nth-child(3)::after{font-size: 2.59vw; right: -1.4vw;} 
    .modal_pptView>div .leftCont h3{font-size: 2.59vw; margin-bottom: 2vw;}
    
    .modal_pptView>div .rightCont{width: 100%; height: fit-content; padding: 0; padding-bottom: 4vw;}
    .modal_pptView>div .rightCont .container{padding: 5.93804vw 4.388981vw 0;}
    .modal_pptView>div .rightCont h2{font-family: 'GmarketSansMedium'; font-weight: normal; font-size: 3.44234vw; letter-spacing: -0.17vw; margin-bottom: 2.29776vw; text-align: center;}
    .modal_pptView>div .rightCont .pptItem_data li{width: 100%; height: fit-content;}
    .modal_pptView>div .rightCont .pptItem_data{display: none;}
    .modal_pptView>div .rightCont .pptItem_list{display: none;}
    .modal_pptView>div .rightCont .m_pptItem_data{display: block; text-align: center; position: relative;}
    .modal_pptView>div .rightCont .m_pptItem_data img{width: calc(100% - 3.487vw); visibility: hidden; position: absolute; left: 50%; top: 0; transform: translateX(-50%);}
    .modal_pptView>div .rightCont .m_pptItem_data img:nth-of-type(2){visibility: visible;}
    .modal_pptView>div .rightCont .m_pptItem_data img:nth-of-type(4){opacity: 0; position: unset; left: unset; top: unset;}
}

@media (max-width: 768px){
    footer .copyright{font-size: 0.9em;}
}

@media (max-width: 570px){
	.modal_pptView{top: 50%; transform: translate(-50%, -50%); height: fit-content; overflow: hidden;}
    footer .copyright{font-size: 0.8em;}
}

@media (max-width: 570px){
    footer .container{height: auto;}
    footer .copyright{padding: 12vw 0 10.4vw 0; height: auto; font-size: 0.7rem;}
}

@media (max-width: 510px){
    footer .copyright{font-size: 2.2vw;}
}