@charset "utf-8";
/* *******************************************************
 * filename : main_responsive.css
 * description : 메인 레이아웃 및 컨텐츠 반응형 CSS
 * date : 2020-11-25
******************************************************** */

/* ******************  메인 비주얼 ********************** */
@media all and ( max-width: 1024px ){
	/* 공통 :: 레이아웃 */
	#fullpage .section{height:auto !important;}
	#fullpage .fp-section .fp-tableCell{padding-top:0; height:0 !important;}
}
@media all and ( max-width: 1420px ){	
	/* 메인 비주얼 */
	.main-visual-item .main-visual-pc-img #visualVideo{right:-60px}
}
@media all and ( max-width: 1024px ){	
	/* 메인 비주얼 */
	#mainVisual{height:720px}
	.main-visual-item .main-visual-pc-img #visualVideo{margin-top:0}
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-item .main-visual-txt-con{margin-top:50px}
	.main-visual-item .main-visual-txt-con .main-visual-txt1{font-size:62px}
	.main-visual-item .main-visual-txt-con .main-visual-txt2{font-size:18px}
}
@media all and ( max-width: 800px ){
	/* 메인 비주얼 */
	#mainVisual{height:auto}
	.main-visual-con{position:relative;}
	.main-visual-item,.main-visual-item .main-visual-pc-img{position:static}
	.main-visual-item .main-visual-pc-img #visualVideo{right:auto; left:0; width:100%; text-align:center; top:auto; bottom:0; transform:translateY(0)}
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-item .main-visual-txt-con{position:relative; top:auto; transform:translateY(0); -webkit-transform:translateY(0); margin-top:130px; padding-bottom:53%; text-align:center}
	.main-visual-item .main-visual-txt-con .main-visual-txt1{font-size:45px}
	.main-visual-item .main-visual-txt-con .main-visual-txt2{font-size:15px; margin-top:25px}
	.main-visual-item .main-visual-txt-con .main-visual-more-btn{margin:20px auto 0; text-align:left; width:190px; height:47px}
	.main-visual-item .main-visual-txt-con .main-visual-more-btn span{font-size:14px; padding:0 0 0 20px; }
	.main-visual-item .main-visual-txt-con .main-visual-more-btn span .arrow{width:8px; height:15px; right:20px}
}
@media all and ( max-width: 480px ){
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-item .main-visual-txt-con{margin-top:110px}
	.main-visual-item .main-visual-txt-con .main-visual-txt1{font-size:40px}
}



/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
@media all and ( max-width: 800px ){
	.main-tit-box .main-tit{font-size:35px}
	.main-tit-box .main-sub-tit{font-size:17px; margin-top:5px}
}
@media all and ( max-width: 480px ){	
	.main-tit-box .main-tit{font-size:30px}
	.main-tit-box .main-sub-tit{font-size:15px}
}

/* -------- 메인 컨텐츠 :: 컨텐츠1(portal 서비스 소개) -------- */
@media all and (max-width:800px){
	#mainContent1{padding:50px 0 60px}
/* 	.main-con01-inner{margin-top:19%} */
	.main-con01-inner > div{display:block; margin:0}
	.main-con01-inner .lf-img{width:100%; max-width:100%; margin:0 auto}
	.main-con01-inner .rt-txt{width:100%; padding:30px 0 0; text-align:center; aspect-ratio: auto; }
	.main-con01-inner .rt-txt .txt-01{font-size:22px; margin-bottom:20px}
	.main-con01-inner .rt-txt .txt-02{font-size:13px; margin-bottom:30px}
	.main-con01-inner .rt-txt .tip-btn{font-size:13px; width:200px; height:50px; margin:0 auto; text-align:left}
	.main-con01-inner .rt-txt .tip-btn span{padding-left:15px}
	.main-con01-inner .rt-txt .tip-btn span .arrow{width:7px; height:12px; right:15px}
}

/* -------- 메인 컨텐츠 :: 컨텐츠2(3가지 문서중앙화) -------- */
@media all and (max-width:1420px){
	.main-02-wrap .lf-txt .lf-txt-inner{width:100%; padding:0 30px; box-sizing:border-box}
}
@media all and (max-width:1366px){	
	.main-02-wrap .lf-txt .main-02-tit p .pc-br,
	.main-02-wrap .lf-txt .policy-txt .txt p .pc-br{display:none}
}
@media all and (max-width:1024px){
	.main-02-wrap .lf-txt .lf-txt-inner{padding:0 15px;}
}
@media all and (max-width:960px){	
	#mainContent2{height:auto}
	.main-02-wrap > div{float:none; width:100%}
	.main-02-wrap .lf-txt{padding-bottom:50px}
	.main-02-wrap .lf-txt .main-02-tab-wrap{max-width:none;}
	.main-02-wrap .rt-img{position:relative; height:100%}
	.main-02-wrap .rt-img .policy-img span{position:relative; display:block; padding-top:72%}
}
@media all and (max-width:800px){		
	.main-02-wrap .lf-txt{padding-bottom:25px}
	.main-02-wrap .lf-txt .lf-txt-inner{margin-top:50px}
	.main-02-wrap .lf-txt .main-02-tit span{font-size:16px; margin-bottom:10px}
	.main-02-wrap .lf-txt .main-02-tit p{font-size:22px;}
	.main-02-wrap .lf-txt .main-02-tab-wrap{margin-top:30px}
	.main-02-wrap .lf-txt .main-02-tab > ul li span{height:55px}
	.main-02-wrap .lf-txt .main-02-tab > ul li span em{font-size:13px}
	.main-02-wrap .lf-txt .main-02-tab > ul li span:after{width:calc(100% - 12px); height:calc(100% - 12px)}
	.main-02-wrap .lf-txt .tab-policy-txt{margin-top:30px}
	.main-02-wrap .lf-txt .policy-txt .tit{font-size:17px; margin-bottom:15px}
	.main-02-wrap .lf-txt .policy-txt .tit strong{padding-right:35px}
	.main-02-wrap .lf-txt .policy-txt .tit strong:after{width:8px; height:13px; right:11px; top:6px}
	.main-02-wrap .lf-txt .policy-txt .txt p{font-size:13px}
}
@media all and (max-width:480px){	
	.main-02-wrap .lf-txt .policy-txt .tit span{display:block; margin-top:5px}
}


/* -------- 메인 컨텐츠 :: 컨텐츠3(portal 선택해야 할 이유) -------- */
@media all and (max-width:1220px){	
	.main-con03-inner .rt-con .main-con03-rt .detail .detail-list{min-height:235px}
}
@media all and (max-width:1024px){		
	.main-con03-inner .lf-con{width:350px}
	.main-con03-inner .lf-con .main-con03-lf .txt{width:350px !important}
	.main-con03-inner .lf-con .main-con03-lf .txt > div p span{padding-left:30px}
	.main-con03-inner .lf-con .main-con03-lf .txt.slick-current{width:380px !important; left:-7px}
	.main-con03-inner .lf-con .main-con03-lf .txt.slick-current > div p span{padding-left:40px}
	.main-con03-inner .rt-con{width:calc(100% - 350px); padding:60px 3%}
}
@media all and (max-width:800px){		
	#mainContent3{padding:45px 0 55px}
	.main-con03-inner{margin-top:30px}
	.main-con03-inner > div{display:block; margin:0}
	.main-con03-inner .lf-con{width:100%; height:190px}
	.main-con03-inner .lf-con .main-con03-lf{text-align:center}
	.main-con03-inner .lf-con .main-con03-lf .txt{width:20% !important; margin:0 8px; left:0; bottom:-30px; max-width:120px}
	.main-con03-inner .lf-con .main-con03-lf .txt.slick-current{width:20% !important; left:0; bottom:11px}
	.main-con03-inner .lf-con .main-con03-lf .txt > div{height:210px}
	.main-con03-inner .lf-con .main-con03-lf .txt > div p{font-size:14px; padding:30px 15px 0; vertical-align:top}
	.main-con03-inner .lf-con .main-con03-lf .txt > div p span,
	.main-con03-inner .lf-con .main-con03-lf .txt.slick-current > div p span{padding-left:0}
	.main-con03-inner .lf-con .main-con03-lf .txt > div p span .arrow{width:19px; height:13px; top:auto; right:auto; bottom:25px; left:50%; transform:translateX(-50%) rotate(90deg)}
	.main-con03-inner .rt-con{width:100%; padding:40px 20px; box-sizing:border-box; border-top-right-radius:0; border-bottom-left-radius:40px}
	.main-con03-inner .rt-con .main-con03-rt .detail .detail-list{margin-bottom:35px; padding-left:55px; min-height:auto !important}
	.main-con03-inner .rt-con .main-con03-rt .detail .detail-list .tit strong{font-size:20px}
	.main-con03-inner .rt-con .main-con03-rt .detail .detail-list .tit .icon{width:40px; top:3px}
	.main-con03-inner .rt-con .main-con03-rt .detail .detail-list .txt{font-size:13px}
}
@media all and (max-width:640px){		
	.main-con03-inner .lf-con .main-con03-lf .txt{bottom:-40px}
	.main-con03-inner .lf-con .main-con03-lf .txt > div p{font-size:12.5px; padding:30px 10px 0}
}
@media all and (max-width:480px){		
	.main-con03-inner .lf-con .main-con03-lf .txt{margin:0 1%; width:22.5% !important}
	.main-con03-inner .lf-con .main-con03-lf .txt.slick-current{width:22.5% !important}
	.main-con03-inner .lf-con .main-con03-lf .txt > div p{font-size:11.5px; padding:30px 5px 0}
}


/* -------- 메인 컨텐츠 :: 컨텐츠4(portal 함께한 경험) -------- */
@media all and (max-width:1480px){		
	.main-con04-slide .lf-txt .lf-txt-inner{max-width:none; padding:0 8% 0 60px}
	.main-con04-slide .lf-txt .main-con04-txt li .txt01 br,
	.main-con04-slide .lf-txt .main-con04-txt li .tit br{display:none}
}
@media all and (max-width:1220px){		
	.main-con04-slide .lf-txt{margin-top:80px}
	.main-con04-slide .rt-img .main-con04-img li{width:520px; margin-right:60px}
	.main-con04-slide .rt-img .main-con04-img .slick-list{padding-left:60px}
	.main-con04-slide .rt-img .main-con04-img li.img-02 .deco{/*right:-34px*/}
	.main-con04-slide .rt-img .main-con04-img li .deco img{max-width:100%}
}
@media all and (max-width:960px){	
	.main-con04-slide > div{display:block; margin:0}
	.main-con04-slide .lf-txt{width:100%}
	.main-con04-slide .rt-img{width:100%; margin-top:30px}
	.main-con04-slide .rt-img .main-con04-img .slick-list{padding-top:5% !important; padding-bottom:40px !important}
	.main-con04-slide .rt-img .main-con04-img li{margin:0 40px; text-align:center}
	.main-con04-slide .rt-img .main-con04-img li .deco img,
	.main-con04-slide .rt-img .main-con04-img li .bg img{width:100%; max-width:none}
}
@media all and (max-width:800px){		
	#mainContent4{padding:45px 0 65px}
	.example-link-btn{margin-top:20px}
	.example-link-btn a{font-size:13px}
	.example-link-btn a .arrow{margin-top:4px;}
	.main-con04-slide{margin-top:0}
	.main-con04-slide .lf-txt{margin-top:50px}
	.main-con04-slide .lf-txt .lf-txt-inner{text-align:center; padding:0 5%}
	.main-con04-slide .lf-txt .main-con04-txt li .tit{font-size:19px; margin-bottom:20px; padding:0 20px}
	.main-con04-slide .lf-txt .main-con04-txt li .tit .arrow:before{width:18px; height:15px; top:0}
	.main-con04-slide .lf-txt .main-con04-txt li .tit .arrow.front:before{left:-26px}
	.main-con04-slide .lf-txt .main-con04-txt li .tit .arrow.back:before{right:-26px}
	.main-con04-slide .lf-txt .main-con04-txt li .txt01{font-size:13px;}
	.main-con04-slide .lf-txt .main-con04-txt li .txt02{font-size:13px; margin-top:15px}
	.main-con04-slide .rt-img .main-con04-img li{margin:0 30px}
	.main-con04-slide .lf-txt .main-con04-txt .slick-dots{bottom:-30px}
}
@media all and (max-width:480px){		
	.main-con04-slide .rt-img .main-con04-img li{margin:0 18px}
}


/* -------- 메인 컨텐츠 :: 컨텐츠5(파트너 슬라이드) -------- */
@media all and (max-width:800px){		
	#mainContent5{padding:20px 0}
	.main-partner-list{padding:0 40px}
	.main-partner-list .slick-arrow{font-size:18px}
	.main-partner-list .slick-arrow.slick-prev{left:0}
	.main-partner-list .slick-arrow.slick-next{right:0}
}

/* -------- 메인 컨텐츠 :: 컨텐츠6(portal 요금안내) -------- */
@media all and (max-width:1220px){		
	.price-box .price-box-txt{width:85%}
	.price-box:after{max-width:none; width:85%}
}
@media all and (max-width:940px){
	.board-box .board-link > ul { flex-wrap: wrap; }
	.listAreaDiv { width: 100% !important; margin-bottom: 60px !important; }
}

@media all and (max-width:800px){	
	#mainContent6{padding:50px 0 80px}
	.price-box{padding-bottom:30px}
	.price-box .price-box-txt{padding:35px 20px 0}
	.price-box .price-box-txt .txt-01{font-size:16px; margin-bottom:10px}
	.price-box .price-box-txt .txt-02{font-size:45px; margin-bottom:30px}
	.price-box .price-box-txt .txt-03{font-size:13px}
	.price-box .price-link{margin-top:30px}
	.price-box .price-link li a{padding:25px 15px}
	.price-box .price-link li a .txt-01{font-size:15px; margin-bottom:20px}
	.price-box .price-link li a .txt-02{font-size:14px;}
	.price-box .price-link li a .txt-02 b{font-size:40px}
	.price-box .price-link li a .txt-02 b.sm{font-size:30px}
	.price-box .price-link li a .txt-03{font-size:13px; margin:10px 0 30px}
	.price-box .price-link li a .arrow-txt{font-size:12px; bottom:25px}
}
@media all and (max-width:640px){		
	.price-box .price-box-txt .txt-02{font-size:30px}
	.price-box .price-link > ul{margin:0 10px}
/* 	.price-box .price-link li{float:none; width:310px; margin:0 auto 12px} */
	.price-box .price-link li{float:none; width:310px; }
	.price-box .price-link li a .arrow-txt{position:relative; bottom:auto}
}

/* -------- 메인 컨텐츠 :: 컨텐츠7(클라우드 서비스) -------- */
@media all and (max-width:1220px){		
	.main-con07-inner .banner-inner{padding-left:4% }
	.main-con07-inner .banner-inner .txt{padding-right:35%}
	.main-con07-inner .banner-img{right:10px}
}
@media all and (max-width:800px){		
	#mainContent7{padding:0 0 50px}
	.main-con07-inner{padding:0 20px; text-align:center}
	.main-con07-inner .banner-inner{padding:40px 0 6%}
	.main-con07-inner .banner-inner .txt{font-size:23px; padding-right:0;}
	.main-con07-inner .banner-inner .banner-link{margin-top:30px;}
	.main-con07-inner .banner-inner .banner-link a{max-width:200px}
	.main-con07-inner .banner-inner .banner-link a.blue-btn{margin-left:10px}
	.main-con07-inner .banner-inner .banner-link a span{height:45px}
	.main-con07-inner .banner-inner .banner-link a span em{font-size:13px; padding-left:15px !important}
	.main-con07-inner .banner-inner .banner-link a span .arrow{font-size:16px}
	.main-con07-inner .banner-img{position:relative; right:auto; text-align:center; width:100%; display:block}
}
@media all and (max-width:480px){		
	.main-con07-inner .banner-inner{padding:40px 0}
	.main-con07-inner .banner-inner .banner-link a{max-width:none; width:calc(50% - 7px)}
	.main-con07-inner .banner-img{display:none}
}