/* =====================================================
   Homepage Plus Premium Style
   style.css Part 1
===================================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:'Pretendard','Noto Sans KR',sans-serif;

font-size:16px;

line-height:1.7;

color:#222;

background:#f6f8fc;

overflow-x:hidden;

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

color:#222;

transition:.3s;

}

li{

list-style:none;

}

.wrap{

width:1200px;

margin:auto;

}


.wrap p{



}
/* ===========================
HEADER
=========================== */

header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:999;

background:rgba(255,255,255,.90);

backdrop-filter:blur(20px);

border-bottom:1px solid #ececec;

transition:.3s;

}

header .wrap{

height:84px;

display:flex;

justify-content:space-between;

align-items:center;

background: #fff;
}

.logo{

font-size:32px;

font-weight:800;

}

.logo span{

color:#2563eb;

}

nav ul{

display:flex;

gap:45px;

}

nav a{

font-size:17px;

font-weight:600;

}

nav a:hover{

color:#2563eb;

}

.btn_top{

padding:14px 30px;

border-radius:50px;

background:#2563eb;

color:#fff;

font-weight:700;

transition:.3s;

}

.btn_top:hover{

background:#1748b8;

transform:translateY(-3px);

box-shadow:0 15px 35px rgba(37,99,235,.35);

}

/* ===========================
HERO
=========================== */

.hero{

padding-top:170px;

padding-bottom:120px;

background:

linear-gradient(135deg,#eff5ff,#ffffff);

}

.hero .wrap{

display:grid;

grid-template-columns:1fr 520px;

gap:80px;

align-items:center;

}

.badge{

display:inline-block;

padding:10px 22px;

background:#dbeafe;

color:#2563eb;

border-radius:100px;

font-size:14px;

font-weight:700;

margin-bottom:30px;

}

.hero h1{

font-size:58px;

line-height:1.2;

font-weight:900;

margin-bottom:30px;

word-break: keep-all;
}

.hero p{

font-size:20px;

color:#666;

margin-bottom:40px;

}

/* ===========================
BUTTON
=========================== */

.hero_button{

display:flex;

gap:20px;

margin-bottom:60px;

}

.btn_blue{

display:inline-flex;

align-items:center;

justify-content:center;

height:58px;

padding:0 40px;

background:#2563eb;

color:#fff;

border-radius:100px;

font-size:17px;

font-weight:700;

transition:.3s;

}

.btn_blue:hover{

transform:translateY(-4px);

box-shadow:0 18px 40px rgba(37,99,235,.35);

}

.btn_white{

display:inline-flex;

align-items:center;

justify-content:center;

height:58px;

padding:0 40px;

background:#fff;

border:1px solid #ddd;

border-radius:100px;

font-size:17px;

font-weight:700;

transition:.3s;

}

.btn_white:hover{

background:#2563eb;

color:#fff;

border-color:#2563eb;

}

/* ===========================
COUNTER
=========================== */

.hero_count{

display:flex;

gap:60px;

}

.hero_count strong{

display:block;

font-size:38px;

font-weight:900;

color:#2563eb;

}

.hero_count p{

margin-top:8px;

font-size:15px;

color:#666;

}

/* ===========================
BROWSER MOCKUP
=========================== */

.browser{

background:#fff;

border-radius:24px;

overflow:hidden;

box-shadow:

0 40px 80px rgba(0,0,0,.12);

transition:.4s;

}

.browser:hover{

transform:translateY(-12px);

}

.browser_top{

height:52px;

background:#1748b8;

display:flex;

align-items:center;

padding-left:20px;

gap:10px;

}

.browser_top span{

width:12px;

height:12px;

border-radius:50%;

}

.browser_top span:nth-child(1){

background:#ff5f57;

}

.browser_top span:nth-child(2){

background:#ffbd2f;

}

.browser_top span:nth-child(3){

background:#28ca42;

}

.browser_body{

margin:20px;

}

/* ===========================
SECTION
=========================== */

section{

padding:110px 0;

}

section h2{

font-size:46px;

font-weight:900;

text-align:left;

margin-bottom:70px;

}

/* ===========================
CARD
=========================== */

.card{

background:#fff;

border-radius:22px;

padding:40px;

box-shadow:

0 10px 35px rgba(0,0,0,.2);

transition:.35s;

}

.card:hover{

transform:translateY(-12px);

box-shadow:

0 25px 60px rgba(0,0,0,.10);

}

.card i{

font-size:42px;

color:#2563eb;

margin-bottom:20px;

}

.card h3{

font-size:24px;

margin-bottom:15px;

}

.card p{

color:#666;

line-height:1.8;

}




/* =====================================================
   style.css Part 2
   Service / Portfolio / Counter / CTA
=====================================================*/

/* ===============================
SERVICE
================================*/

#service{

background:#ffffff;

position:relative;

overflow:hidden;

}

#service:before{

content:"";

position:absolute;

top:-250px;

right:-180px;

width:550px;

height:550px;

border-radius:50%;

background:rgba(37,99,235,.05);

}

.service_grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

position:relative;

z-index:2;

}

.service_grid .card{

text-align:center;

}

.service_grid .card:hover{

background:#2563eb;

}

.service_grid .card:hover h3,

.service_grid .card:hover p,

.service_grid .card:hover i{

color:#fff;

}

.service_grid i{

transition:.35s;

}

.service_grid .card:hover i{

transform:scale(1.2) rotate(5deg);

}

/* ===============================
PORTFOLIO
================================*/

#portfolio{

background:#f6f8fc;

}

.portfolio_list{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:35px;

}

.item{

background:#fff;

border-radius:24px;

overflow:hidden;

box-shadow:0 15px 40px rgba(0,0,0,.08);

transition:.35s;

}

.item:hover{

transform:translateY(-12px);

box-shadow:0 35px 70px rgba(0,0,0,.14);

}

.item img{

width:100%;

height:260px;

object-fit:cover;

transition:.5s;

}

.item:hover img{

transform:scale(1.08);

}

.item h3{

font-size:24px;

padding:25px 25px 10px;

font-weight:800;

}

.item p{

padding:0 25px 30px;

color:#666;

}

/* ===============================
BADGE
================================*/

.portfolio_badge{

display:inline-block;

padding:8px 18px;

border-radius:50px;

background:#2563eb;

color:#fff;

font-size:13px;

margin-top:18px;

}

/* ===============================
NUMBER
================================*/

.counter_section{

padding:100px 0;

background:linear-gradient(135deg,#2563eb,#4f8cff);

color:#fff;

}

.counter_grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:40px;

text-align:center;

}

.counter_grid strong{

display:block;

font-size:54px;

font-weight:900;

margin-bottom:12px;

}

.counter_grid span{

font-size:18px;

opacity:.9;

}

/* ===============================
WHY
================================*/

.why_grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

margin-top:70px;

}

.why_box{

background:#fff;

padding:45px;

border-radius:24px;

transition:.35s;

box-shadow:0 12px 35px rgba(0,0,0,.06);

}

.why_box:hover{

transform:translateY(-8px);

}

.why_box h4{

font-size:26px;

margin-bottom:20px;

}

.why_box p{

color:#666;

line-height:1.8;

}

/* ===============================
CTA
================================*/

.cta{

padding:120px 0;

}

.cta_box{

background:linear-gradient(135deg,#2563eb,#3f7fff);

border-radius:34px;

padding:80px;

text-align:center;

color:#fff;

box-shadow:0 40px 80px rgba(37,99,235,.30);

}

.cta_box h2{

font-size:52px;

margin-bottom:25px;

color:#fff;

}

.cta_box p{

font-size:21px;

margin-bottom:40px;

opacity:.92;

}

.cta_box .btn_blue{

background:#fff;

color:#2563eb;

}

.cta_box .btn_blue:hover{

background:#eef5ff;

}

/* ===============================
CARD EFFECT
================================*/

.shadow_card{

background:#fff;

border-radius:24px;

padding:40px;

box-shadow:

0 10px 30px rgba(0,0,0,.06);

transition:.35s;

}

.shadow_card:hover{

transform:translateY(-10px);

box-shadow:

0 35px 70px rgba(0,0,0,.12);

}

/* ===============================
ANIMATION
================================*/

.fadeUp{

opacity:0;

transform:translateY(60px);

transition:all .7s;

}

.fadeUp.active{

opacity:1;

transform:translateY(0);

}


/* =====================================================
   style.css Part 3
   Review Feed + Pricing
=====================================================*/

/* ==========================
   REVIEW
==========================*/

#review{

background:#f7f9fc;

position:relative;

overflow:hidden;

}

.review_feed{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

margin-top:60px;

}

.review_card{

background:#fff;

border-radius:24px;

padding:30px;

box-shadow:0 15px 40px rgba(0,0,0,.08);

transition:.35s;

position:relative;

}

.review_card:hover{

transform:translateY(-12px);

box-shadow:0 35px 70px rgba(0,0,0,.15);

}

.review_top{

display:flex;

align-items:center;

margin-bottom:20px;

}

.review_photo{

width:60px;

height:60px;

border-radius:50%;

overflow:hidden;

margin-right:15px;

}

.review_photo img{

width:100%;

height:100%;

object-fit:cover;

}

.review_name{

font-size:18px;

font-weight:700;

}

.review_date{

font-size:13px;

color:#999;

margin-top:5px;

}

.review_star{

margin:18px 0;

font-size:22px;

color:#ffb400;

letter-spacing:2px;

}

.review_text{

font-size:16px;

line-height:1.8;

color:#555;

min-height:120px;

}

.review_image{

margin-top:25px;

border-radius:18px;

overflow:hidden;

}

.review_image img{

width:100%;

height:220px;

object-fit:cover;

transition:.5s;

}

.review_card:hover .review_image img{

transform:scale(1.08);

}

.review_bottom{

margin-top:20px;

display:flex;

justify-content:space-between;

font-size:14px;

color:#888;

}

.review_bottom i{

margin-right:6px;

color:#2563eb;

}

/* ==========================
   PRICE
==========================*/

#price{

background:#fff;

}

.price_table{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:35px;

margin-top:70px;

}

.price{

background:#fff;

border-radius:28px;

padding:55px 40px;

box-shadow:-1px 0px 45px rgba(0, 0, 0, .08);

transition:.35s;

position:relative;

}

.price:hover{

transform:translateY(-12px);

}

.price h3{

font-size:30px;

font-weight:800;

}

.price strong{

display:block;

font-size:26px;

color:#222;

text-decoration :line-through;

}


.price span{

display:block;

font-size:32px;

color:#2563eb;

font-weight: bold;

line-height: 1;

padding: 10px 0;

}
.price strong span{

font-size:18px;

color:#666;

}

.price ul{



}

.price li{

padding:14px 0;

border-bottom:1px solid #eee;

font-size:16px;

}

.price li:before{

content:"*";

margin-right:12px;

color:#2563eb;

font-weight:bold;

}

/* ==========================
PREMIUM
==========================*/

.price.premium{

background:linear-gradient(135deg,#2563eb,#4f8cff);

color:#fff;

}

.price.premium strong{

color:#fff;

}

.price.premium li{

border-color:rgba(255,255,255,.15);

}

.price.premium li:before{

color:#fff;

}

.price.premium:before{

content:"̵̧";

position:absolute;

top:25px;

right:-10px;

background:#ff9800;

color:#fff;

padding:8px 22px;

font-size:14px;

font-weight:700;

border-radius:30px;

box-shadow:0 10px 25px rgba(255,152,0,.35);

}

/* ==========================
BUTTON
==========================*/

.price_button{

margin-top:40px;

}

.price_button a{

display:block;

height:58px;

line-height:58px;

text-align:center;

border-radius:100px;

background:#2563eb;

color:#fff;

font-size:18px;

font-weight:700;

transition:.3s;

}

.price_button a:hover{

background:#1748b8;

}

.price.premium .price_button a{

background:#fff;

color:#2563eb;

}

/* ==========================
GOOGLE REVIEW
==========================*/

.google_score{

margin-top:70px;

display:flex;

justify-content:center;

align-items:center;

gap:20px;

}

.google_score strong{

font-size:54px;

color:#2563eb;

font-weight:900;

}

.google_score span{

font-size:22px;

color:#666;

}










.contact_section{

padding:100px 0;

background:linear-gradient(135deg,#0f172a,#1d4ed8);

}

.contact_wrap{

display:grid;

grid-template-columns:1fr 480px;

gap:60px;

align-items:center;

}

.contact_left{

color:#fff;

}

.contact_badge{

display:inline-block;

padding:8px 18px;

background:#2563eb;

border-radius:30px;

font-size:13px;

font-weight:bold;

margin-bottom:20px;

}

.contact_left h2{

font-size:44px;

margin-bottom:20px;

}

.contact_desc{

font-size:18px;

line-height:1.8;

opacity:.9;

margin-bottom:30px;

}

.contact_list{

list-style:none;

padding:0;

margin:0 0 35px;

}

.contact_list li{

margin-bottom:15px;

font-size:18px;

}

.contact_call{

font-size:32px;

font-weight:bold;

color:#ffd54f;

}

.contact_right{

background:#fff;

padding:40px;

border-radius:24px;

box-shadow:0 20px 50px rgba(0,0,0,.2);

}

.contact_right input,
.contact_right textarea{

width:100%;

padding:16px 18px;

margin-bottom:15px;

border:1px solid #ddd;

border-radius:12px;

font-size:16px;

box-sizing:border-box;

}

.contact_right textarea{

height:140px;

resize:none;

}

.contact_right button{

width:100%;

height:58px;

background:#2563eb;

color:#fff;

font-size:18px;

font-weight:bold;

border:0;

border-radius:12px;

cursor:pointer;

transition:.3s;

}

.contact_right button:hover{

background:#1d4ed8;

}






@media(max-width:768px){

.contact_wrap{

grid-template-columns:1fr;

gap:30px;

}

.contact_left{

text-align:center;

}

.contact_left h2{

text-align: center;
font-size:30px;

}

.contact_desc{

font-size:16px;

}

.contact_list{

text-align:left;

display:inline-block;

}

.contact_call{

font-size:24px;

}

.contact_right{

padding:25px;

}

}



/* ======================
 ¿ù ÀÌ¿ë¿ä±Ý Ãßõ Ä«µå
====================== */


.price.vip{

position:relative;

border:3px solid #0066ff;
/*
transform:translateY(-15px);
*/
background:#fff;

}


.recommend{

position:absolute;

top:-18px;

left:50%;

transform:translateX(-50%);

background:#0066ff;

color:#fff;

padding:8px 25px;

border-radius:30px;

font-size:14px;

font-weight:700;

}



.price.vip h3{

color:#0066ff;

}



.price_desc{

font-size:16px;

color:#666;

line-height:1.6;

margin:20px 0;

}



.price.vip ul{

text-align:left;

margin:25px 0;

}


.price.vip li{

padding:10px 0;

border-bottom:1px solid #eee;

font-size:15px;

}



.vip_btn{

display:block;

height:55px;

line-height:55px;

background:#0066ff;

color:white;

border-radius:30px;

text-align:center;

font-weight:700;

font-size:17px;

transition:.3s;

}



.vip_btn:hover{

background:#004dcc;

transform:translateY(-3px);

}


/* ===========================
   Mobile
=========================== */

@media (max-width:768px){

.wrap{
    width:92%;
    margin:0 auto;
}

/* Header */

header{
    height:70px;
}

header .wrap{
    height:70px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.logo{
    font-size:24px;
}

nav{
    display:none;
}

.btn_top{
    padding:10px 18px;
    font-size:14px;
}


/* Hero */

.hero{
    padding:110px 0 60px;
}

.hero .wrap{
    display:block;
}

.hero_left,
.hero_right{
    width:100%;
}

.hero h1{
    font-size:34px;
    line-height:1.35;
}

.hero p{
    font-size:16px;
}

.hero_button{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.btn_blue,
.btn_white{
    width:100%;
    text-align:center;
}

.hero_count{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    margin-top:35px;
    text-align:center;
	gap: 30px;
}

.hero_count strong{
    font-size:24px;
}

.browser{
    margin-top:40px;
}

.browser_body img{
    width:100%;
    border-radius:18px;
}


/* Á¦¸ñ */

section h2{
    font-size:30px;
	margin-bottom: 30px;
}


/* ¼­ºñ½º */
section {padding: 50px 0;}
    

.service_grid{
    grid-template-columns:1fr;
    gap:20px;
}


/* Á¦ÀÛ»ç·Ê */

.portfolio_list{
    display:grid;
    grid-template-columns:1fr;
    gap:20px;

}

.portfolio_list .item img{
    width:100%;
    height:240px;
    object-fit:cover;
}


/* Èıâ */

.review_feed{
    display:grid;
    grid-template-columns:1fr;
    gap:20px;
	margin-top: 30px;
}


/* °¡°Ý */

.price_table{
    display:grid;
    grid-template-columns:1fr;
    gap:25px;
	margin-top: 30px;
}


/* »ó´ã */

.contact_wrap{
    display:block;
}

.contact_left{
    margin-bottom:40px;
}

.contact_right{
    width:100%;
}

.contact_right input,
.contact_right textarea,
.contact_right select,
.contact_right button{
    width:100%;
}


/* Footer */

footer{
    padding: 0;
    text-align:center;
}


.contact_section{padding: 50px 0;}

}





/* °¡°Ý »ó¼¼ */

.payment{

font-size:14px;
color:#777;
margin:10px 0 20px;

}


.product_check,
.pay_info{

text-align:left;

margin-top:20px;

padding:20px;

background:#f8f9fc;

border-radius:15px;

}


.product_check h4,
.pay_info h4{

font-size:16px;

margin-bottom:12px;

color:#111;

}


.product_check ul{

padding:0;

margin:0;

list-style:none;

}


.product_check li{

padding:6px 0;

font-size:14px;

color:#444;

}



.pay_info p{

font-size:14px;

line-height:1.8;

color:#555;

margin:0;

}



/* Ãßõ»óÇ° */

.price.vip{

position:relative;

}


.recommend{

position:absolute;

top:-15px;

left:50%;

transform:translateX(-50%);

background:#0066ff;

color:white;

padding:7px 25px;

border-radius:20px;

font-size:13px;

font-weight:bold;

}




/* ȨÆäÀÌÁö È®ÀÎ ¿µ¿ª */

.homepage_check{

display:flex;

gap:30px;

margin-top:50px;

}


.homepage_box{

flex:1;

}


.homepage_bg{

height:230px;

background-size:cover;

background-position:center;

border-radius:25px;

overflow:hidden;

display:flex;

align-items:flex-end;

justify-content:center;

padding-bottom:25px;

position:relative;


}



/* À̹ÌÁö ¾îµÓ°Ô */

.homepage_bg:before{

content:"";

position:absolute;

left:0;

right:0;

top:0;

bottom:0;

background:rgba(0,0,0,.35);

}




.homepage_bg a{

position:relative;

z-index:1;

display:inline-block;

padding:15px 35px;

background:#0066ff;

color:#fff;

border-radius:50px;

font-weight:700;

font-size:16px;

transition:.3s;

}



.homepage_bg a:hover{

background:#004dcc;

transform:translateY(-5px);

}



/* ¸ð¹ÙÀÏ */

@media(max-width:768px){

.homepage_check{

flex-direction:column;

}

}


.price_percent{

margin:12px 0 20px;

display:inline-block;

padding:7px 18px;

background:#eaf3ff;

color:#0066ff;

border-radius:30px;

font-size:14px;

font-weight:700;

}





#price .homepage_check{

width: 92%;
display:flex;

gap:30px;

margin : 0 auto;
margin-top:50px;

max-width:1200px;



}


#price .homepage_box{

flex:1;

}



#price .homepage_bg{

height:220px;

border-radius:20px;

background-size:cover;

background-position:center;

position:relative;

display:flex;

align-items:flex-end;

justify-content:center;

padding-bottom:10px;

overflow:hidden;

}



#price .homepage_bg:before{

content:"";

position:absolute;

left:0;
right:0;
top:0;
bottom:0;

background:rgba(0,0,0,.15);

}



#price .homepage_bg a{

position:relative;

z-index:1;

background:#0066ff;

color:#fff;

padding:14px 30px;

border-radius:50px;

font-weight:bold;

}






html,body{

margin:0;
padding:0;

}


.footer{

margin-bottom:0 !important;

}


.footer .wrap{

padding-bottom:0;
text-align: center;
margin-top: 20px;

}




.footer_text{

margin:0;

padding:20px 0;

text-align:center;

}




.hero_slide{

width:100%;

height:100%;

position:relative;

overflow:hidden;

}


.hero_slide img{

position:absolute;

width:100%;

height:100%;

object-fit:cover;

border-radius:15px;

opacity:0;

animation:heroFade 16s infinite;

}


/* À̹ÌÁö ¼ø¼­ */

.hero_slide img:nth-child(1){

animation-delay:0s;

}


.hero_slide img:nth-child(2){

animation-delay:4s;

}


.hero_slide img:nth-child(3){

animation-delay:8s;

}


.hero_slide img:nth-child(4){

animation-delay:12s;

}



@keyframes heroFade{


0%{

opacity:0;

}


10%{

opacity:1;

}


25%{

opacity:1;

}


35%{

opacity:0;

}


100%{

opacity:0;

}





}




.hero_slide{

width:100%;
height:100%;
position:relative;
overflow:hidden;

}


.hero_slide img{

position:absolute;

left:0;
top:0;

width:100%;
height:100%;

object-fit:cover;

border-radius:15px;

opacity:0;

animation:slideImage 16s infinite;

}



.hero_slide img:nth-child(1){

animation-delay:0s;

}

.hero_slide img:nth-child(2){

animation-delay:4s;

}

.hero_slide img:nth-child(3){

animation-delay:8s;

}

.hero_slide img:nth-child(4){

animation-delay:12s;

}



@keyframes slideImage{


0%{
opacity:0;
}


10%{
opacity:1;
}


25%{
opacity:1;
}


35%{
opacity:0;
}


100%{
opacity:0;
}


}




.browser_body{

height:400px;

overflow:hidden;

}


.hero_slide{

height:400px;

}