/*
=========================================================================
공통
=========================================================================
*/
:root {	
	--main-pink: #FF4C8C;
    --sub-pink: #FFF1F6;
}
#wrap, .header{width: 100%; min-width: 350px;}
.inner{width: 100%; box-sizing: border-box;}
.mainTit, .contTit{margin-bottom: 10px;}
.btn{padding: .7em 2em; text-align: center; background: var(--main-pink); color: #fff; border-radius: 5px; font-weight: 500;}


/*
=========================================================================
헤더
=========================================================================
*/
.header{position: fixed; top:0; left: 0; width: 100%; z-index: 999; transition: all .5s;}
.header.active{background: #fff;}
.header .inner{padding: 1em 2em; display: flex; justify-content: space-between; align-items: center;}
.header .logo{width: 150px; height: 35px; cursor: pointer;}
.header .logo img{width: 100%; height: auto;}
.header .hMenu{display: flex; gap: 20px;}
.header .hMenu>li{cursor: pointer; font-weight: 600; font-size: 1em;}
.header .hMenu>li>a{width: 100%; height: 100%; color: var(--main-pink);}

@media (max-width: 900px){
    .header .inner{padding: .8em 1em;}
    .header .logo{width: 100px; height: 25px;}
    .header .hMenu{gap: 12px;}
}

/*
=========================================================================
메인
=========================================================================
*/
.main{position: relative; height: 937px; background: var(--sub-pink);}
.main .inner{padding: 100px 2em 50px; display: flex; align-items: center; max-width: 1500px; box-sizing: border-box; margin: 0 auto; gap: 50px;}
.main .txtWrap{width: calc(100% - 800px);  margin-bottom: 50px;} 
.main .mainSubTit{font-size: 1.6em; font-weight: 400; margin-bottom: 5px;}
.main .mainTit{font-size: 3em; margin-bottom: 20px;}
.main .btn{margin-top: 50px;}
.main .btn>a{color: #fff;}
.mainVisual{width: 750px;}
.mainVisual>img{width: 100%; height: auto;}
@media (max-width: 1450px){
    .main{height: auto;}
    .main .inner{flex-direction: column; gap: 10px;}
    .main .txtWrap{width: 100%; text-align: center; margin-bottom: 20px;}
    .mainVisual{width: 100%; margin: 0 auto; max-width: 600px;}
    .main .btn{margin-top: 30px;}
}
@media (max-width: 900px){    
    .main .inner{padding: 90px 1em 40px;}
    .main .txtWrap{margin-bottom: 30px;} 
    .main .mainSubTit{font-size: 1.5em;}
    .main .mainTit{font-size: 2em; margin-bottom: 10px;}    
}
@media (max-width: 600px){
    .main .mainSubTit{font-size: 1.3em;}
    .main .mainTit{font-size: 1.8em;}
}
/*
=========================================================================
컨텐츠 공통
=========================================================================
*/
.cont .inner{width: 100%; max-width: 1500px; margin: 0 auto; padding: 50px 2em;}
.contSubTit{color: var(--main-pink); font-weight: 500; margin-bottom: 10px; border: 1px solid var(--main-pink); border-radius: 50px; padding: .1em 1em .2em;}
.contTit{font-size: 2.5em;}
.contTxt{color: #555;}
.cont .txtWrap{display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 40px; align-items: center; text-align: center;}

.imgCont{background: var(--sub-pink); border-radius: 1.5em; display: flex; justify-content: center; height: 600px; overflow: hidden;}
.imgCont>img{height: 100%; width: auto;}

@media (max-width: 900px){
    .cont .inner{padding: 40px 1em;}
    .contTit{font-size: 2em;}
    .cont .txtWrap{margin-bottom: 25px;}
    .imgCont{height: 400px;}
}
@media (max-width: 600px){
    .contTit{font-size: 1.8em;}
    .imgCont{height: 300px;}
}

/*
=========================================================================
컨텐츠1 - 화상통화
=========================================================================
*/
.cont1 .inner{padding-top: 100px;}

@media (max-width: 900px){
    .cont1 .inner{padding-top: 80px;}
}

/*
=========================================================================
컨텐츠4 - 관심
=========================================================================
*/
.cont4 .inner{padding-bottom: 100px;}

/*
=========================================================================
컨텐츠5 - 다운로드
=========================================================================
*/
.cont5{background: var(--main-pink);}
.cont5 .inner{padding: 70px 2em;}
.cont5 .txtWrap{align-items: center; color: #fff; margin-bottom: 0;}
.cont5 .contTit{margin-bottom: 0; font-size: 2.2em;}
.cont5 .appBtn{background: #fff; color: var(--main-pink); margin-top: 30px;}

@media (max-width: 900px){
    .cont5 .inner{padding: 50px 2em;}
    .cont5 .contTit{font-size: 1.7em;}
    .cont5 .appBtn{margin-top: 20px;}
}
@media (max-width: 600px){
    .cont5 .contTit{font-size: 1.5em;}
}

/*
=========================================================================
푸터
=========================================================================
*/
.footer{background: #f9f9f9; font-size: .85em;}
.footer .inner{width: 100%; max-width: 1500px; padding: 50px 2em; margin: 0 auto;}
.footer .fCont{color: #717683;}
.footer .fLogo{width: 125px; height: 30px; opacity: .7; margin-bottom: 20px;}
.footer .fLogo img{width: 100%; height: auto;}
.footer .fLink{display: flex; gap: 20px; margin-bottom: 18px;}
.footer .fLink>div{font-weight: 500; font-size: 1.05em;}
.footer .fInfo{width: 100%; gap: 8px 20px; display: flex; flex-wrap: wrap; font-size: .95em;}
.footer .fInfo>div{display: flex; flex-wrap: wrap; gap: 10px;}
.footer .fInfo .fTit{font-weight: 500;}
.footer .copyright{font-size: .85em; margin-top: 15px; opacity: .8; width: 100%;}

@media (max-width: 900px){
    .footer .inner{padding: 40px 1em;}
    .footer .fCont{flex-direction: column; gap: 15px;}
    .footer .fLogo{width: 105px; height: 25px;}
    .footer .fLink{gap: 15px;}
}
@media (max-width: 600px){
    .footer .inner{flex-direction: column; justify-content: left; align-items: flex-start;}
}

/*
=========================================================================
탑 버튼
=========================================================================
*/
/* top_btn */
#top_btn{position: fixed; bottom: 10px; right: 10px; width: 40px; height: 40px; cursor: pointer; z-index: 900;}
#top_btn img{width: 100%; height: auto;}

@media (max-width: 600px){
    #top_btn{width: 35px; height: 35px;}
}

/*
=========================================================================
모달
=========================================================================
*/
.modal{background: #fff; border: 1px solid #ddd; border-radius: 10px; max-width: 450px; width: calc(100% - 2em); position: fixed; top:50%; left: 50%; transform: translate(-50%,-50%); padding: 1.5em; text-align: center; box-sizing: border-box; z-index: 9999; display: none;}
.modal .closeBtn{position: absolute; top:15px; right:15px; width: 15px; height: 15px; background: url(../img/icon_close.png) no-repeat center / cover; cursor: pointer;}
.modal .modalCont{padding: 40px 0;}
.modal .modalTit{font-weight: 600; font-size: 1.3em; margin-bottom: 10px;}
.modal .modalTxt{font-weight: 400; color: #555; font-size: .9em;}
.noticeIcon{width: 35px; height: 35px; margin: 0 auto 10px;}
.noticeIcon>img{width: 100%; height: auto;}

@media (max-width: 600px) {
    .modal{padding: 1em 1.2em;}
}

/* 배경 */
.darkBg{width: 100%; height: 100dvh; z-index: 9990; background: rgba(0,0,0,0.4); position: fixed; top:0; left: 0; display: none;}
.darkBg.active{display: block;}