/* KoPub Dotum */
@font-face {
  font-family: 'KoPub Dotum';
  font-style: normal;
  font-weight: 300;
  src: url(//cdn.jsdelivr.net/font-kopub/1.0/KoPubDotum-Light.eot);
  src: url(//cdn.jsdelivr.net/font-kopub/1.0/KoPubDotum-Light.eot?#iefix) format('embedded-opentype'),
  url(//cdn.jsdelivr.net/font-kopub/1.0/KoPubDotum-Light.woff) format('woff'),
  url(//cdn.jsdelivr.net/font-kopub/1.0/KoPubDotum-Light.ttf) format('truetype');
}
@font-face {
  font-family: 'KoPub Dotum';
  font-style: normal;
  font-weight: 400;
  src: url(//cdn.jsdelivr.net/font-kopub/1.0/KoPubDotum-Medium.eot);
  src: url(//cdn.jsdelivr.net/font-kopub/1.0/KoPubDotum-Medium.eot?#iefix) format('embedded-opentype'),
  url(//cdn.jsdelivr.net/font-kopub/1.0/KoPubDotum-Medium.woff) format('woff'),
  url(//cdn.jsdelivr.net/font-kopub/1.0/KoPubDotum-Medium.ttf) format('truetype');
}
@font-face {
  font-family: 'KoPub Dotum';
  font-style: normal;
  font-weight: 700;
  src: url(//cdn.jsdelivr.net/font-kopub/1.0/KoPubDotum-Bold.eot);
  src: url(//cdn.jsdelivr.net/font-kopub/1.0/KoPubDotum-Bold.eot?#iefix) format('embedded-opentype'),
  url(//cdn.jsdelivr.net/font-kopub/1.0/KoPubDotum-Bold.woff) format('woff'),
  url(//cdn.jsdelivr.net/font-kopub/1.0/KoPubDotum-Bold.ttf) format('truetype');
}


/* 스타일 초기화 */
html,body,#body_wrap{height:100%}
body,ol,ul,li,a,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,fieldset,legend{margin:0px; padding:0px;}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;}
ol,ul,li{list-style:none;}
a,a:hover,a:active,a:visited,a:focus{color:inherit;text-decoration:none;}
body{overflow:hidden;font-size:0.75em;color:#666;font-family: 'KoPub Dotum', 'Dotum', '돋움', Arial, sans-serif;letter-spacing: -0.5px;background-color:#fff;}
header,section,footer{display:block;}
input{line-height:normal}
address{font-style:normal}
small{font-size:inherit}
fieldset{border:0}
caption,legend{display:block;position:absolute;left:-9999px;font-size:0}
button{border:0;padding:0;margin:0;}

*{
  box-sizing:border-box;
}
*:not(input,textarea) {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
:focus:not(input) {
  outline: 0;
}


#body_wrap{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}

/*공통 스타일*/
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}

.clear{*zoom:1}
.clear:after{clear:both;content:"";display:block;}
.f_l{float:left}
.f_r{float:right}
.hide_text{clip: rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute !important;width:1px;}
.hide{display:none !important;}
.area{position:relative;width:100%;max-width:916px;margin:0 auto}
.persp{height:100%;-webkit-perspective: 500px;perspective: 500px;}
.red_font{color:#d73032}

/*타이틀*/
.h2_title{font-size:2.833em}
.symbol{padding:15px 0}
.symbol img{width:120px}

/*페이지 로딩*/
#page_loding{z-index:9999;position:absolute;left:0;top:0;width:100%;height:100%}

/*header*/
header{z-index:100;position:absolute;left:-200px;width:200px;height:100%;-webkit-transform:translateX(0);transform:translateX(0);-webkit-transition:-webkit-transform 0.3s;transition:transform 0.3s}
header.on{-webkit-transform:translateX(200px);transform:translateX(200px)}
header .menu{position:absolute;right:-60px;top:10px;height:50px;width:50px;text-indent:-9999px;background:url(../image/main/menu_icon.png) no-repeat;background-size:100%}
header .area{max-width:932px;height:100%;}
header .area ul{width:100%;height:100%;border-right:2px solid #fff;background-color:#1dbed4}
header .area ul li a{display:block;width:100%;height:50px;line-height:50px;text-align:center;font-size:1.417em;font-weight:700;color:#fff}
header .area ul li.on a,header .area ul li a:hover{color:#1dbed4}

header .area ul li.li1{background-color:#f79b87}
header .area ul li.li2{background-color:#ffd602}
header .area ul li.li3{background-color:#fcaf17}
header .area ul li.li4{background-color:#f37d7c}
header .area ul li.showing{padding-top:20px;text-align:center}
header div ul li.showing .logo{display:block;width:65px;height:70px;margin:0 auto;font-size:0;background:url(../image/main/menu_logo.png) no-repeat}
header div ul li.showing .user{display:inline-block;width:auto;height:20px;line-height:normal;margin:20px auto 0; font-size:13px;border-bottom:1px solid #71cfdf}
header div ul li.showing .user:hover{color:#fff}

header div ul li.showing .sns{padding-top:20px;text-align:center}
header div ul li.showing .sns a{display:inline-block;font-size:0;width:20px;height:19px;background:url(../image/main/sns.png) no-repeat}
header div ul li.showing .sns a.is{background-position:-20px 0}

/*header div ul li a:hover,header div ul li a:focus{color:#1dbed4}*/

/*푸터*/
footer{color:#fff}
footer .top{padding:28px 0;line-height:24px;background-color:#ebcb42;font-size:1.167em;text-align:center}


footer .bottom{padding:38px 0;background-color:#000}
footer .bottom ul{text-align:center}
footer .bottom ul li{width:100%;padding-top:10px}
footer .bottom ul li:first-child{padding-top:0}
footer .bottom .small{font-size:0.833em}



/*main*/
/*메인 visual*/
.main_wrap .visual{position:relative;height:500px;background:#0074c0 url(../image/main/moblie_visual.jpg) no-repeat bottom;background-size:100%}
.main_wrap .visual .title{z-index:10;position:absolute;top:50px;width:100%;text-align:center;color:#fff;text-shadow: 1px 1px 3px rgba(122, 122, 122, 1);}
.main_wrap .visual .title h1{width:125px;height:25px;margin:0 auto;font-size:0;background:url(../image/main/s_logo.png) no-repeat;background-size:100%}
.main_wrap .visual .title p strong{display:block;font-weight:300;font-size:2em;-webkit-transform:scaleX(0.8);transform:scaleX(0.8);letter-spacing: 0.75px}
.main_wrap .visual .title p span{display:block;padding-top:7px;font-size:1.5em;font-weight:300;-webkit-transform:scaleX(0.9);transform:scaleX(0.9);letter-spacing:0}

.main_wrap .visual .cloude-back{display:none;z-index:3;position:absolute;left:0;top:0;width:100%;height:801px;background:url(../image/main/cloud-back.jpg) no-repeat;background-size:100%}

.main_wrap .visual .building{display:none;z-index:5;position:absolute;left:0;top:277px;width:100%;height:545px}
.main_wrap .visual .building .img{max-width:1420px;width:100%;height:100%;margin:0 auto;background:url(../image/main/building.png) no-repeat;background-size:100%}

.main_wrap .visual .fruits-01{display:none;z-index:7;position:absolute;left:0;top:360px;width:100%;height:340px;}
.main_wrap .visual .fruits-01 .img{max-width:1271px;width:100%;height:100%;margin:0 auto;background:url(../image/main/fruits-01.png) no-repeat;background-size:100%}
.main_wrap .visual .clude-01{display:none;z-index:9;position:absolute;left:0;top:370px;width:100%;height:851px;background:url(../image/main/cloud-01.png) no-repeat;background-size:100%}

/*특징*/
.main_wrap .character{z-index:20;position:relative;padding-top:20px;text-align:center;background-color:#fff}
.main_wrap .character .h2_title{color:#27bbd4;-webkit-transform:scaleX(0.92);transform:scaleX(0.92);}
.main_wrap .character .title{padding-bottom:40px}
.main_wrap .character .cont>div{width:100%}
.main_wrap .character .cont .f_l .img1{padding-bottom:48px}
.main_wrap .character .cont .f_l .con .img2{padding-bottom:12px}
.main_wrap .character .cont .f_l .con dl{color:#919090;}
.main_wrap .character .cont .f_l .con dl dt{padding-bottom:20px;font-size:1.333em;color:#23b8bc}
.main_wrap .character .cont .f_l .con dl dd{width:285px;margin:0 auto;text-align:left;line-height:16px}
.main_wrap .character .cont .f_l .con dl dd strong{display:block;font-weight:700;padding-bottom:5px}

.main_wrap .character .cont .f_r{padding-top:50px}
.main_wrap .character .cont .f_r p{font-size:1.333em;color:#919090;line-height:26px;-webkit-transform:scaleX(0.87);transform:scaleX(0.87);}
.main_wrap .character .cont .f_r p span{font-weight:700}
.main_wrap .character .cont .f_r p span.blue{color:#23b8bc}
.main_wrap .character .cont .f_r p span.green{color:#11c808}
.main_wrap .character .cont .f_r .border{width:63px;height:1px;margin:35px auto;background-color:#c1c1c1}
.main_wrap .character .cont .f_r ul{padding-top:15px;max-width:300px;margin:0 auto}
.main_wrap .character .cont .f_r ul li{float:left;width:50%;font-size:0;padding-top:20px}
.main_wrap .character .cont .f_r ul li .img{height:55px;width:83px;margin:0 auto;background:url(../image/main/logos.png) no-repeat;background-size:400% 100%}

.main_wrap .character .cont .f_r ul li.li2 .img{background-position:33.3333% 0}
.main_wrap .character .cont .f_r ul li.li3 .img{background-position:66.6666% 0}
.main_wrap .character .cont .f_r ul li.li4 .img{background-position:100% 0}

/*상품 리스트*/
.main_wrap .goods_list{padding-top:50px;padding-bottom:67px}
.main_wrap .goods_list .category{height:30px;padding-left:40px;background:url(../image/main/tab_icon.png) no-repeat 10px center}
.main_wrap .goods_list .category li{float:left;width:25%;text-align:center;padding-top:10px;}
.main_wrap .goods_list .category li a{display:block;font-weight:700;color:#969696;-webkit-transform:scaleX(0.9);transform:scaleX(0.9);}
.main_wrap .goods_list .category li a.on{color:#1dbed4}

.main_wrap .goods_list .lists{padding-top:30px}
.main_wrap .goods_list .lists ul{overflow-x:auto;white-space: nowrap;padding:0 10px}
.main_wrap .goods_list .lists ul li{float:left;width:50%;padding:10px;}
.main_wrap .goods_list .lists ul li a{display:block;position:relative;}
.main_wrap .goods_list .lists ul li a img{width:100%;max-width:213px;height:auto}

.main_wrap .goods_list .lists ul li a .spoon{position:relative}
.main_wrap .goods_list .lists ul li a .thumb{display:none;position:relative;left:0;top:0;width:100%;height:100%;background-size:100% !important}

.main_wrap .goods_list .lists ul li a:hover .spoon,.main_wrap .goods_list .lists ul li a:focus .spoon{
  display:none;
}

.main_wrap .goods_list .lists ul li a:hover .thumb,.main_wrap .goods_list .lists ul li a:focus .thumb{
  display:block;
}


/*어바웃*/
.main_wrap .about{position:relative;height:800px;padding:60px 0 0;background:#0ee4e7 url(../image/main/about_moblie.jpg) no-repeat center bottom;overflow:hidden;background-size:100%}
.main_wrap .about .title{z-index:10;position:relative;text-align:center}
.main_wrap .about .title .h2_title{font-weight:300;color:#fff;-webkit-transform:scaleX(0.92);transform:scaleX(0.92);}
.main_wrap .about .title .symbol{padding:10px 0}

.main_wrap .about .area{z-index:10}
.main_wrap .about .slider{width:100%}
.main_wrap .about .slider .item{
  width:347px;margin:12px auto 19px;background-color:rgba(255,255,255,0.5);text-align:left;
  -webkit-transition:-webkit-transform 0.5s,box-shadow 0.5s,background-color 0.5s;
  transition:transform 0.5s,box-shadow 0.5s,background-color 0.5s;
}

.main_wrap .about .slider .item{position:absolute;left:50%;top:0;margin-left:-173px}

.main_wrap .about .slider .item div{width:100%;height:534px;background-size:100% !important}
.main_wrap .about .slider .item .history{background:url(../image/main/history.png) no-repeat}
.main_wrap .about .slider .item .about_pollice{background:url(../image/main/about_pollice.png) no-repeat}
.main_wrap .about .slider .item .mission{background:url(../image/main/mission.png) no-repeat}
.main_wrap .about .slider .item .vision{background:url(../image/main/vision.png) no-repeat}

.main_wrap .about .slider .mod0{z-index:10;-webkit-transform:scale(1);transform:scale(1);background-color:#fff;
  -webkit-box-shadow: 5px 5px 25px 0px rgba(0,0,0,0.39);
  -moz-box-shadow: 5px 5px 25px 0px rgba(0,0,0,0.39);
  box-shadow: 5px 5px 25px 0px rgba(0,0,0,0.39);
}
.main_wrap .about .slider .mod1{z-index:9;-webkit-transform: translateX(-340px) scale(0.7);transform: translateX(-340px) scale(0.7)}
.main_wrap .about .slider .mod2{z-index:8;-webkit-transform: scale(0.5);transform: scale(0.5)}
.main_wrap .about .slider .mod3{z-index:7;-webkit-transform: translateX(340px) scale(0.7);transform: translateX(340px) scale(0.7)}



.main_wrap .about .area .slider_nav button{z-index:20;display:block;position:absolute;left:50%;top:45px;width:47px;height:27px;border-radius:5px;background-color:#7b7979;color:#fff}
.main_wrap .about .area .slider_nav button.next{margin-left:99px}
.main_wrap .about .area .slider_nav button.prev{margin-left:46px}

.main_wrap .about .about-back{display:none;z-index:3;position:absolute;left:0;top:0;width:100%;height:800px;background:url(../image/main/about_back.jpg) no-repeat bottom;background-size:100%}
.main_wrap .about .clude-01{display:none;z-index:15;position:absolute;left:0;bottom:0;width:100%;height:60px;background:url(../image/main/about_cloud.png) no-repeat center bottom;background-size:cover}


/*구매*/
.main_wrap .buy{display:none}
.main_wrap .buy .title{padding-top:30px;text-align:center}
.main_wrap .buy .title .h2_title{color:#594238;-webkit-transform:scaleX(0.92);transform:scaleX(0.92);}

.main_wrap .buy .cont{padding:20px}
.main_wrap .buy .cont>div{width:100%}
.main_wrap .buy .cont .f_l .h3_title{padding-bottom:8px;font-size:1.5em;font-weight:700;color:#878686;border-bottom:1px solid #878686}
.main_wrap .buy .cont .f_l .h3_title i{display:inline-block;width:35px;height:26px;background:url(../image/main/contact_icon.png) no-repeat}
.main_wrap .buy .cont .f_l .h3_title i.phone{width:33px;height:35px;background-position:-35px 0}
.main_wrap .buy .cont .f_l .h3_title>*{vertical-align: middle}
.main_wrap .buy .cont .f_l>dl>dt{font-size:1.583em;font-weight:700;color:#878686;padding-top:8px}
.main_wrap .buy .cont .f_l>dl>dd p{font-size:1.333em;font-weight:300;color:#878686;padding-top:14px;line-height:24px;-webkit-transform:scaleX(0.95) translate(-7px);transform:scaleX(0.95) translate(-7px);}

.main_wrap .buy .cont .f_l>dl>dt.big{font-size:2.917em}
.main_wrap .buy .cont .f_l>dl>dt.middle{font-size:1.333em}
.main_wrap .buy .cont .f_l>dl>dd dl{padding-top:10px;font-size:1.167em;color:#878686}
.main_wrap .buy .cont .f_l>dl>dd dl dt{font-weight:700}
.main_wrap .buy .cont .f_l>dl>dd dl dd{padding-top:4px;font-weight:300}

.main_wrap .buy .cont .f_r{padding-top:30px}
.main_wrap .buy .btns{padding:0 20px;text-align:right}
.main_wrap .buy .btns button{width:95px;height:38px;background:url(../image/main/contact_button.png) no-repeat;background-size:100% 200%;text-indent:-9999px}

.main_wrap .contact .title{padding-top:50px;text-align:center}
.main_wrap .contact .title .h2_title{color:#594238;-webkit-transform:scaleX(0.92);transform:scaleX(0.92);}

.main_wrap .contact .cont{padding:20px}
.main_wrap .contact .cont>div{width:100%}
.main_wrap .contact .cont .f_l>ul>li{font-size:1.333em;color:#878686;padding-top:40px}
.main_wrap .contact .cont .f_l>ul>li:first-child{padding-top:0}
.main_wrap .contact .cont .f_l>ul>li p{font-weight:300;-webkit-transform:scaleX(0.92) translate(-12px);transform:scaleX(0.92) translate(-12px);line-height:29px}
.main_wrap .contact .cont .f_l>ul>li img{width:229px }
.main_wrap .contact .cont .f_l>ul>li>ul{-webkit-transform:scaleX(0.92) translate(-12px);transform:scaleX(0.92) translate(-12px);}
.main_wrap .contact .cont .f_l>ul>li>ul>li{line-height:26px}

.main_wrap .contact .cont .f_r{padding-top:30px}

.main_wrap .contact .btns{padding:0 20px;text-align:right}
.main_wrap .contact .btns button{width:95px;height:38px;background:url(../image/main/contact_button.png) no-repeat 0 -38px;background-size:100% 200%;text-indent:-9999px}

.main_wrap .cont .table dt{font-size:1.083em;padding-top:23px;padding-left:3px}
.main_wrap .cont .table dt:first-child{padding-top:0}
.main_wrap .cont .table dd{padding-top:3px}
.main_wrap .cont .table dd input,.main_wrap .cont .table dd textarea{padding:10px;width:100%;border:1px solid #d0d0d0;border-radius:5px}

.main_wrap .map{padding:47px 20px}


/*모달*/
#goods_modal{z-index:-1;position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.5);opacity:0;transition: opacity 0.3s,z-index 0s 0.3s}
#goods_modal.on{z-index:9999;opacity:1;transition:opacity 0.3s}
#goods_modal .area{max-width:1280px;height:100%}

#goods_modal .exit{z-index:100;position:absolute;right:20px;top:20px;width:46px;height:46px;background:rgba(255,255,255,0.7) url(../image/main/modal_exit.png) no-repeat center;background-size:36px;border-radius:5px}
#goods_modal .cont{position:relative;width:100%;height:100%;font-size:0;text-align:center}
#goods_modal .cont img{max-width:100%;max-height:902px;position:absolute;left:0;top:0;right:0;bottom:0;margin:auto}
#goods_modal .cont .pc_img{display:none}

/*로그인 모달*/
#login_modal{z-index:-1;position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;background:rgba(0,0,0,0.5);-webkit-transition:opacity 0.3s,z-index 0s 0.3s;transition:opacity 0.3s,z-index 0s 0.3s;}
#login_modal.on{z-index:9999;opacity:1;-webkit-transition:opacity 0.3s;transition:opacity 0.3s}
#login_modal .area{max-width:523px;}
#login_modal .exit{position:absolute;right:30px;top:30px;width:32px;height:32px;background:url(../image/main/user_exit.png) no-repeat;background-size:100%}
#login_modal iframe{display:block;width:100%;}


/*회원가입 공통*/
.form_wrap{background-color:#f5f5f5;font-size:1.167em;border-radius:8px;overflow:hidden}
.form_wrap input{padding:13px;color:#888;border:1px solid #eee;background-color:#fff;border-radius:8px}
.form_wrap .btn_ui{font-size:1.147em;font-weight:700;border-radius:5px;background-color:#333;color:#fff;text-align:center}
.form_wrap .pd30{padding:30px}
.form_wrap .blue_font{color:#10a4b8}
.form_wrap form p{position:relative;padding-left:100px;margin-top:18px}
.form_wrap form p:first-child{margin-top:0}
.form_wrap form p label{position:absolute;left:0;top:0;padding-right:20px;width:100px;height:44px;line-height:44px;color:#1dbed4;text-align:right;}
.form_wrap form p input{width:100%}
.form_wrap form dd{padding-top:30px}
.form_wrap form dd .f_l{padding-top:17px}
.form_wrap form dd .f_l label>*{vertical-align:middle}


/*로그인 폼*/
.login_wrap .h2_title{width:123px;height:35px;padding-bottom:57px;background:url(../image/main/login_logo.png) no-repeat;background-size:100%}
.login_wrap form{padding:30px}

.login_wrap form .login_btn{width:152px;height:52px}
.login_wrap .btns{background-color:#fff;padding:30px;border-top:1px solid #ddd}
.login_wrap .btns ul li{padding-top:13px}
.login_wrap .btns ul li:first-child{padding-top:0}

/*조인 폼*/
.join_apply_wrap .h2_title{width:93px;height:35px;padding-bottom:57px;background:url(../image/main/join_logo.png) no-repeat;background-size:100%}
.join_apply_wrap .title_p{line-height:20px;color:#888}
.join_apply_wrap form{border-top:1px solid #e5e5e5}
.join_apply_wrap form dd{text-align:center}
.join_apply_wrap form .btn_ui{width:242px;height:52px;}

/*조인 메일 보내기 폼*/
.join_apply_wrap .email_box{border-top:1px solid #ddd}
.join_apply_wrap .email_box dt p label{color:#1dbed4;padding-right:30px}

/*회원가입 폼*/
.signup_wrap .h2_title{width:93px;height:35px;padding-bottom:57px;background:url(../image/main/join_logo.png) no-repeat;background-size:100%}
.signup_wrap dl dt{border-top:1px solid #ddd}
.signup_wrap .post_p{padding-right:110px}
.signup_wrap .post_p .post_btn{position:absolute;top:0;right:0;padding:12px;font-weight:700;width:100px;color:#fff;background-color:#333}
.signup_wrap dl dd .f_l>*{vertical-align:middle}
.signup_wrap dl dd .btn_ui{width:152px;height:52px}

/*회원가입 완료*/
.join_apply_wrap .email_boxs{border-top:1px solid #ddd}
.join_apply_wrap .email_boxs dl dt{padding-right:30px}
.join_apply_wrap .home{text-align:center}
.join_apply_wrap .home .btn_ui{display:inline-block;width:242px;height:56px;line-height:56px}

/*비밀번호 찾기 폼*/
.join_apply_wrap .h2_title.pw{width:171px;background:url(../image/main/pw_logo.png) no-repeat;background-size:100%}