@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
















/*Reset*/
*, *:after, *:before{margin:0; padding:0; box-sizing: border-box; word-break:keep-all;}
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, address, strong, i, ul, li, fieldset, form, label, legend, article, aside, canvas, figure, figcaption, footer, header, 
section, summary, time, mark, audio, video
{ margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,footer, header, main, nav, section, samp, cite {display: block;}
ul, ol {list-style: none;}
a{color: inherit; text-decoration: none; cursor:pointer;}
em, i{font-style:normal;}
input, select, textarea{-webkit-border-radius: 0; padding:3px 5px; vertical-align:middle; border: 1px solid #c2c2c2; font-family:inherit; outline:0; font-family: 'dream', sans-serif;}
button{border:0; outline:0; font-family: 'Rubik', 'Noto Sans KR', sans-serif;}
h1, h2, h3, h4, h5, h6, h7{clear:both; font-weight:normal;}
img {vertical-align:middle; border:0}
caption{position:absolute; left:-9999999px;}
.hiddenLabel{position:absolute; left:-999999px;}
*::-webkit-scrollbar {
    width: 5px;
}
*::-webkit-scrollbar-thumb {
    background-color: #cdd8da;
    border-radius: 10px;
    background-clip: padding-box;
}
*::-webkit-scrollbar-track {
    background-color: rgba(255,255,255,0.5);
}
.alb2::-webkit-scrollbar{display : none;}
.cursor{cursor:pointer;}
.ac{text-align:center !important;}
.ar{text-align:right !important;}
.w100{width: 100% !important;}
.d_flex{display: flex;}
















html{width:100%; height:100%; overflow-x:hidden;}
body{height:100%; font-family: 'Rubik', 'Noto Sans KR'; font-weight:400; color:#000; letter-spacing: -0.64px; overflow-x:hidden;}
















.header{position: relative;}
.header .phone_num{display: flex; position: absolute; top: 50%; right: 8%; font-size: 2rem; align-items: center; font-weight: bold; transform: translateY(-50%);}
.header .phone_num::before{content:""; display:block; width: 30px; height: 30px; background:url('../../img/eyegood/img/icon_phone.svg')no-repeat 0 4px; background-size: contain }
.header .sns {display: flex; position: absolute; top: 50%; left: 8%; transform: translateY(-50%); }
.header .sns li a{display: block; width: 30px; height: 30px; background-size: contain !important; margin-right: 5px;}
.header .sns .sns_kakao{background:url('../../img/eyegood/img/sns-1.png')no-repeat; }
.header .sns .sns_store{background:url('../../img/eyegood/img/sns-2.png')no-repeat;}
.header .sns .sns_blog{background:url('../../img/eyegood/img/sns-3.png')no-repeat;}
.header .sns .sns_youtube{background:url('../../img/eyegood/img/sns-4.png')no-repeat;}
.header .sns .sns_talk{background:url('../../img/eyegood/img/naverTalk.png')no-repeat;}
swiper-container{margin-top: 197px;}
















.sub_cont .title-wrap{display: flex; align-items: flex-end; flex-flow: row-reverse; justify-content: space-between; }
.sub_cont .title-wrap .rout ul{display: flex; width: 100%; justify-content: right}
















.contact{display: flex; margin: 4% 0 1%; }
.contact .movie_box{width: 60%; position: relative; padding-bottom: 33.71%;}
.contact .movie_box iframe {position: absolute; width: 100%; height: 100%; left: 0; top:0;}
.contact .cs_box{width: 40%; font-size: 1.2rem; padding: 0 5% 2% 5%; text-align: left; font-weight: 400}
.contact .cs_box h3{display: none;}
.contact .cs_box p{ margin: 6% 0;}
.contact .cs_box p i{margin-right: 5px; opacity: 0.4;}
.contact .cs_box a{display: block; text-align: center; padding: 14px 30px; min-width: 150px; margin: 10% auto 0; background: #0059c7; border-radius: 50px; color: #fff; font-weight: 500;}
.contact .cs_box .snsLink a { background: none; padding: 0; margin-top: 6%; text-align: left; color: #000; display: flex; align-items: center; gap: 15px; }
















/*ǪÅÍ*/
footer#footer{width:100%; max-width: 1600px; margin: 0 auto; text-align: left; display: flex; justify-content: space-between; padding: 30px 0; border-top:1px solid #e9e9e9;}
.footlink{margin: 0 auto; text-align: center;}
.foot_info h2 {font-size: 30px; font-weight: bold; margin-bottom: 20px;}
footer ul{font-size:1.2rem; font-weight:100; margin-bottom: 30px;}
footer ul li{margin-right:30px; line-height: 1.7; float: left; font-weight: 400; }
footer ul li i {color: #018aff;}
footer ul li a { font-weight: 400; }
footer address{font-weight:100; margin-top: 1%; line-height: 24px; opacity:0.6; } 
footer .copy{position: relative; padding: 0.5% 0;}
















.f_right { min-width: 187px; }
footer .phone_num { display: flex; font-size: 2rem; align-items: center; font-weight: bold; }
footer .phone_num::before { content: ""; display: block; width: 30px; height: 30px; background: url(../../img/eyegood/img/icon_phone.svg)no-repeat 0 4px; background-size: contain; }
a.topBtn { display: flex; flex-direction: column; align-items: center; position: fixed; bottom: 5%; right: 5%; border: 1px solid #e9e9e9; border-radius: 50%; width: 70px; height: 70px; justify-content: center; background: #fff; z-index: 999;}
a.topBtn i {color: #018aff;}
















.cs_center{text-align: left; padding: 3% 5%;}
.cs_center h4{font-size: 1.4rem;}
.cs_center strong{display: block; font-size: 2.4rem; font-weight: 500; color: #0471eb; margin: 5% 0;}
.cs_center span{display: block; line-height: 1.8}
.cs_center span em{opacity: 0.7; margin-right: 10px;}
















.cs_area{width: 1600px; margin: 5% auto; display: flex}
.cs_area h3{ font-size: 1.5rem;}
.cs_area p{width: 72%; padding: 5% 3% 5% 0; color:#adadad; font-size: 1rem; line-height: 1.5; font-weight: 400; height: 112px;}
.cs_area a.go{display: block; width: 100px; background: #0471eb; border-radius: 30px; padding: 1.6% 5%; color: #fff; font-size: 0.8rem; text-align: center;}
.cs_area .line{position: relative; }
.cs_area .line::before{content:""; display: block; position: absolute; top:0; right: 70px; width: 1px; height: 200px; background: #dadada;}
















.call_box{width: 25%}
.call_box strong{display: block; font-size: 2.4rem; font-weight: 500; color: #0471eb; margin: 5% 0;}
.call_box span{display: block; color: #666; font-size: 1.2rem; font-weight: 400; }
.ad_box{width: 25%}
.ad_box a{position: relative; display: block; width: 34%; color: #666; font-size: 0.8rem; font-weight: 400; padding-left: 42px; }
.ad_box a::before{content:""; display: block; position: absolute; top:0; left: 0; width: 36px; height: 36px; background-size: contain !important; }
.ad_box a.ad_kakao::before{background: url('../../img/eyegood/img/sns-1.png') 0 50% no-repeat;}
.ad_box a.ad_naver::before{background: url('../../img/eyegood/img/naverTalk.png') 0 50% no-repeat;}
.price_box{width: 25%; background: url('../../img/eyegood/img/price_box_bg.png') 60% 100% no-repeat;}
.shop_box{width: 25%; background: url('../../img/eyegood/img/shop_box_bg.png') 60% 100% no-repeat; background-size: 100px;}
.shop_box a.go{background:#0471eb; color: #FFF;}
















/*¹ÝÀÀÇü*/
@media screen and (max-width: 1024px) {
    .main-biz .chain_box img{width: 31%;}
    #footer .wrap{width: 1050px;}
    .cs_area {width:100%; flex-wrap: wrap; padding: 5%;}
    .cs_area .line::before{right: 30px;}
    .call_box {width: 50%}
    .ad_box {width: 50%; padding-left: 5%;}
    .cs_area .ad_box.line::before{display: none;}
    .price_box{width: 50%; margin-top: 8%; background-position: 80% 100%; }
    .shop_box {width: 50%; margin-top: 8%; padding-left: 5%; background-position: 80% 100%;}
}


@media screen and (max-width: 768px) {
    .logo{ width: 170px;  margin: 0; height: auto;}
    .greeting .cont p {width: 49%; margin: 1% 1% 1% 0;}
    .contact{flex-flow: column;}
    .contact .movie_box{width: 100%; padding-bottom: 56.25%}
    .contact .cs_box{width: 100%;}
    .cs_area {font-size: 0.8rem;}
    .shop_box {background-position: 100% 100%;}
    footer ul li{margin-right: 20px}
    footer .d_flex{flex-flow: column; }
    #footer .wrap{width: 100%}
    .foot_info{width: 95%; padding: 0; margin:0 auto;}
    .foot_info::before{width: 100%; height: 1px; right: 0; left: 0; top: 100%}
    .foot_info li span{width: 21%;}
    .cs_center strong{margin: 1% 0;}
    .swiper, swiper-container{margin-top: 100px;}
    .main-com ul li a h3{font-size: 1.2rem;}
    .main-com ul li a p{font-size: 0.9rem;}
    .main-com ul li a h3{padding: 1% 0;}
    .main-com span.btn_more{padding: 1% 10%; margin: 2% auto 0}
    .main-biz{padding: 4% 2%;}
    .main-com span.btn_more{width: 40%;}
    .case h2, .main-contact h2, .main-biz h2{font-size: 24px;}
    .sub_cont .title-wrap{flex-flow: column; align-items: center;}
    .sub_cont .title-wrap .cont-title{font-size: 2rem;}
    .sub_cont .title-wrap .rout ul{justify-content: center;}
    .greeting .intro p{font-size: 1rem; line-height: 1.4;}
    .cs_area .line::before{width: 100%; height: 1px; top: 115%; left: 0; right: 0;}
    .call_box {width: 100%}
    .call_box span{font-size: 1rem;
    }
    .ad_box {width: 100%; padding-left: 0;  margin-top: 12%;}
    .ad_box a{width: 50%;}
    .cs_area .ad_box.line::before{display: block;}
    .price_box{width: 100%; margin-top: 12%;}
    .price_box{background-position: 100% 100%; }
    .shop_box {width: 100%; margin-top: 12%; padding-left: 0%;}
    footer#footer {flex-direction: column-reverse; gap: 20px;}
    footer ul{font-size: 0.9rem;}
    footer ul li{margin-right: 18px}
    .footlink {width: 95%;}
    .footlink  ul {font-size: 1.2rem;}
    .cs_center{padding: 3% 5%;}
    .cs_center h4 {    font-size: 1.1rem;}
    .cs_center strong{font-size: 2rem;}
    .cs_center span{font-size: 1rem;}
    footer .phone_num {width: 95%; margin:0 auto;}
}