/* Start: Recommended Isotope styles */ /**** Isotope Filtering ****/ .isotope-item { z-index: 2; } .isotope-hidden.isotope-item { display:none; pointer-events: none; z-index: 1; } /**** Isotope CSS3 transitions ****/ .isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; } .isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; } .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: -o-transform, opacity; transition-property: transform, opacity; } .isotope .isotope-item a{position:relative;} /**** disabling Isotope CSS3 transitions ****/ .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; } /* End: Recommended Isotope styles */ /* disable CSS transitions for containers with infinite scrolling*/ .isotope.infinite-scrolling { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } @font-face{ font-family: 'VAGRound'; font-style: normal; font-weight: normal; src: url('/Static/css/fonts/VAGRounded Lt-Normal.eot'); src: local('☺'), url('/Static/css/fonts/VAGRounded Lt-Normal.woff') format('woff'), url('/Static/css/fonts/VAGRounded Lt-Normal.ttf') format('truetype'); } @font-face{ font-family: 'VAGRoundB'; font-style: normal; font-weight: bold; src: url('/Static/css/fonts/VAG Rounded LT Bold.eot'); src: local('☺'), url('/Static/css/fonts/VAG Rounded LT Bold.woff') format('woff'), url('/Static/css/fonts/VAG Rounded LT Bold.ttf') format('truetype'); } /**** Base styles ****************************************************************************************************************************/ html,body{margin:0;padding:0;height:100%;} body{font:12px/1.5 "돋움", Dotum, "굴림", Gulim, Arial, sans-serif;background-color:#f6f3ee;color:#767676;} dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,tbody,tfoot,thead,th,td{margin:0;padding:0;} input,textarea,select,td,th{font:12px/1.5 "돋움", Dotum, "굴림", Gulim, Arial, sans-serif;color:#707070;vertical-align:middle;} h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:100%;} table{width:100%;table-layout:fixed;border-spacing:0;border-collapse:collapse;} ol,ul,li{list-style:none;} hr, legend, caption, .hidden{position:absolute;left:-5000px;top:0;visibility:hidden;overflow:hidden;line-height:0.1%;font-size:0.1%;width:0.1%;height:0.1%;} caption{position:relative;} img,fieldset{border:0 none;} img{vertical-align:top;line-height:0;font-size:0;} label,button{cursor:pointer;} em,address{font-style:normal;} a {color:#000;text-decoration:none;text-overflow:ellipsis;-o-text-overflow:ellipsis;} a:link,a:visited{color:#707070;text-decoration:none;} a:hover,a:active,a:focus{text-decoration:none;} .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } img{ background: transparent; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); /*IE6 & 7 */ zoom: 1; } /**** Web styles ****************************************************************************************************************************/ #loading_bg{ background:#fff; width:100%;height:100%; position: fixed;left:0;top:0; z-index: 10000000; } #loading_bar{ position: absolute;left:50%;top:50%; z-index: 10000001; margin-left:-75px; margin-top:-75px; } body{ position: relative; z-index: 300; width:100%;height:100%; background:#f6f3ee url("/Static/images/background.jpg") repeat-x left top; } /* Site Navigation */ #site-nav{background:url("/Static/images/leftMenu/bg_leftMenu.png") no-repeat left top;width:225px;height:929px;position:absolute;left:20px;top:68px;z-index:500;text-align:center;} #site-nav h1{margin-top:34px;} .lnb_wrap{text-align:center;margin-top:48px;} .lnb_wrap a{margin-right:3px;} .gnb_wrap{text-align:left;margin-top:20px;} .gnb_wrap ul{width:145px;margin:0 auto;} .gnb_wrap li{font-size:0;} .gnb_wrap li a{display:inline-block;width:145px;height:38px;} .gnb_wrap li.g1 a{background:url("/Static/images/leftMenu/gnb/gnb_cokeplay_off.png") no-repeat left top;} .gnb_wrap li.g2 a{background:url("/Static/images/leftMenu/gnb/gnb_video_off.png") no-repeat left top;} .gnb_wrap li.g3 a{background:url("/Static/images/leftMenu/gnb/gnb_brand_off.png") no-repeat left top;} .gnb_wrap li.g4 a{background:url("/Static/images/leftMenu/gnb/gnb_event_off.png") no-repeat left top;} .gnb_wrap li.g5 a{background:url("/Static/images/leftMenu/gnb/gnb_notice_off.png") no-repeat left top;} .gnb_wrap li.g6 a{background:url("/Static/images/leftMenu/gnb/gnb_cokezine_off.png") no-repeat left top;} .gnb_wrap li.g1 a:hover{background:url("/Static/images/leftMenu/gnb/gnb_cokeplay_on.png") no-repeat left top;} .gnb_wrap li.g2 a:hover{background:url("/Static/images/leftMenu/gnb/gnb_video_on.png") no-repeat left top;} .gnb_wrap li.g3 a:hover{background:url("/Static/images/leftMenu/gnb/gnb_brand_on.png") no-repeat left top;} .gnb_wrap li.g4 a:hover{background:url("/Static/images/leftMenu/gnb/gnb_event_on.png") no-repeat left top;} .gnb_wrap li.g5 a:hover{background:url("/Static/images/leftMenu/gnb/gnb_notice_on.png") no-repeat left top;} .gnb_wrap li.g6 a:hover{background:url("/Static/images/leftMenu/gnb/gnb_cokezine_on.png") no-repeat left top;} .gnb_wrap li.g1 a.on{background:url("/Static/images/leftMenu/gnb/gnb_cokeplay_on.png") no-repeat left top;} .gnb_wrap li.g2 a.on{background:url("/Static/images/leftMenu/gnb/gnb_video_on.png") no-repeat left top;} .gnb_wrap li.g3 a.on{background:url("/Static/images/leftMenu/gnb/gnb_brand_on.png") no-repeat left top;} .gnb_wrap li.g4 a.on{background:url("/Static/images/leftMenu/gnb/gnb_event_on.png") no-repeat left top;} .gnb_wrap li.g5 a.on{background:url("/Static/images/leftMenu/gnb/gnb_notice_on.png") no-repeat left top;} .gnb_wrap li.g6 a.on{background:url("/Static/images/leftMenu/gnb/gnb_cokezine_on.png") no-repeat left top;} .sns_wrap{margin-top:50px;} .sns_wrap ul{width:164px;overflow:hidden;margin:0 auto;} .sns_wrap li{float:left;} .sns_wrap li a{width:41px;height:41px;display:block;} .sns_wrap li.s1 a{background:url("/Static/images/leftMenu/sns/sns_facebook_off.png") no-repeat left top;} .sns_wrap li.s2 a{background:url("/Static/images/leftMenu/sns/sns_twitter_off.png") no-repeat left top;} .sns_wrap li.s3 a{background:url("/Static/images/leftMenu/sns/sns_blog_off.png") no-repeat left top;} .sns_wrap li.s4 a{background:url("/Static/images/leftMenu/sns/sns_youtube_off.png") no-repeat left top;} .sns_wrap li.s1 a:hover{background:url("/Static/images/leftMenu/sns/sns_facebook_on.png") no-repeat left top;} .sns_wrap li.s2 a:hover{background:url("/Static/images/leftMenu/sns/sns_twitter_on.png") no-repeat left top;} .sns_wrap li.s3 a:hover{background:url("/Static/images/leftMenu/sns/sns_blog_on.png") no-repeat left top;} .sns_wrap li.s4 a:hover{background:url("/Static/images/leftMenu/sns/sns_youtube_on.png") no-repeat left top;} .brand_wrap{margin:0 auto;width:173px;height:222px;padding-top:12px;position:relative;text-align:left;} #brand{width:135px; height:230px; position:relative; overflow:hidden; margin-left:21px;} #brand ul{width:1000px; height:230px; position:relative; top:0;} #brand li{width:150px; height:230px; float:left;} #brand li p.brandLine1{margin-top:15px;} #brand li p.brandLine2{margin-top:10px;} #brand li p.brandLine3{margin-top:8px;} @media screen and (-webkit-min-device-pixel-ratio:0){ #brand li p.brandLine3{margin-top:10px;} } #brand li a{display:inline-block;margin-right:7px;width:26px;height:60px;} #brand li a.b1{background:url("/Static/images/leftMenu/brand/brand_cocacola.png") no-repeat left bottom;} #brand li a.b2{background:url("/Static/images/leftMenu/brand/brand_zero.png") no-repeat left bottom;} #brand li a.b3{background:url("/Static/images/leftMenu/brand/brand_coke.png") no-repeat left bottom;} #brand li a.b4{background:url("/Static/images/leftMenu/brand/brand_fanta.png") no-repeat left bottom;} #brand li a.b5{background:url("/Static/images/leftMenu/brand/brand_dk.png") no-repeat left bottom;} #brand li a.b6{background:url("/Static/images/leftMenu/brand/brand_sprite.png") no-repeat left bottom;} #brand li a.b7{background:url("/Static/images/leftMenu/brand/brand_georgia.png") no-repeat left bottom;} #brand li a.b8{background:url("/Static/images/leftMenu/brand/brand_fuzetea.png") no-repeat left bottom;} #brand li a.b9{background:url("/Static/images/leftMenu/brand/brand_sogen.png") no-repeat left bottom;} #brand li a.b10{background:url("/Static/images/leftMenu/brand/brand_mmaid.png") no-repeat left bottom;} #brand li a.b11{background:url("/Static/images/leftMenu/brand/brand_soonsoo.png") no-repeat left bottom;} #brand li a.b12{background:url("/Static/images/leftMenu/brand/brand_smart.png") no-repeat left bottom;} #brand li a.b13{background:url("/Static/images/leftMenu/brand/brand_power.png") no-repeat left bottom;} #brand li a.b14{background:url("/Static/images/leftMenu/brand/brand_vitamin.png") no-repeat left bottom;} #brand li a.b15{background:url("/Static/images/leftMenu/brand/brand_schweppes.png") no-repeat left bottom;} #brand li a.b16{background:url("/Static/images/leftMenu/brand/brand_zico.png") no-repeat left bottom;} #brand li a.b17{background:url("/Static/images/leftMenu/brand/brand_kin.png") no-repeat left bottom;} #brand li a.b18{background:url("/Static/images/leftMenu/brand/brand_aquarius.png") no-repeat left bottom;} #brand li a.b19{background:url("/Static/images/leftMenu/brand/brand_pyungchangsoo.png") no-repeat left bottom;} #brand li a.b20{background:url("/Static/images/leftMenu/brand/brand_sunny10.png") no-repeat left bottom;} #brand li a.b21{background:url("/Static/images/leftMenu/brand/brand_matetea.png") no-repeat left bottom;} #brand li a.b22{background:url("/Static/images/leftMenu/brand/brand_cocopalm.png") no-repeat left bottom;} #brand li a.b24{background:url("/Static/images/leftMenu/brand/brand_toreta.png") no-repeat left bottom;} #brand li a.b25{background:url("/Static/images/leftMenu/brand/brand_seagram.png") no-repeat left bottom;} #brand li a.b26{background:url("/Static/images/leftMenu/brand/brand_hongchahwawon.png") no-repeat left bottom;} #brand li a.b27{background:url("/Static/images/leftMenu/brand/brand_goldpeak.png") no-repeat left bottom;} #brand li a.b1:hover{background:url("/Static/images/leftMenu/brand/brand_cocacola_hover.png") no-repeat left bottom;} #brand li a.b2:hover{background:url("/Static/images/leftMenu/brand/brand_zero_hover.png") no-repeat left bottom;} #brand li a.b3:hover{background:url("/Static/images/leftMenu/brand/brand_coke_hover.png") no-repeat left bottom;} #brand li a.b4:hover{background:url("/Static/images/leftMenu/brand/brand_fanta_hover.png") no-repeat left bottom;} #brand li a.b5:hover{background:url("/Static/images/leftMenu/brand/brand_dk_hover.png") no-repeat left bottom;} #brand li a.b6:hover{background:url("/Static/images/leftMenu/brand/brand_sprite_hover.png") no-repeat left bottom;} #brand li a.b7:hover{background:url("/Static/images/leftMenu/brand/brand_georgia_hover.png") no-repeat left bottom;} #brand li a.b8:hover{background:url("/Static/images/leftMenu/brand/brand_fuzetea_hover.png") no-repeat left bottom;} #brand li a.b9:hover{background:url("/Static/images/leftMenu/brand/brand_sogen_hover.png") no-repeat left bottom;} #brand li a.b10:hover{background:url("/Static/images/leftMenu/brand/brand_mmaid_hover.png") no-repeat left bottom;} #brand li a.b11:hover{background:url("/Static/images/leftMenu/brand/brand_soonsoo_hover.png") no-repeat left bottom;} #brand li a.b12:hover{background:url("/Static/images/leftMenu/brand/brand_smart_hover.png") no-repeat left bottom;} #brand li a.b13:hover{background:url("/Static/images/leftMenu/brand/brand_power_hover.png") no-repeat left bottom;} #brand li a.b14:hover{background:url("/Static/images/leftMenu/brand/brand_vitamin_hover.png") no-repeat left bottom;} #brand li a.b15:hover{background:url("/Static/images/leftMenu/brand/brand_schweppes_hover.png") no-repeat left bottom;} #brand li a.b16:hover{background:url("/Static/images/leftMenu/brand/brand_zico_hover.png") no-repeat left bottom;} #brand li a.b17:hover{background:url("/Static/images/leftMenu/brand/brand_kin_hover.png") no-repeat left bottom;} #brand li a.b18:hover{background:url("/Static/images/leftMenu/brand/brand_aquarius_hover.png") no-repeat left bottom;} #brand li a.b19:hover{background:url("/Static/images/leftMenu/brand/brand_pyungchangsoo_hover.png") no-repeat left bottom;} #brand li a.b20:hover{background:url("/Static/images/leftMenu/brand/brand_sunny10_hover.png") no-repeat left bottom;} #brand li a.b21:hover{background:url("/Static/images/leftMenu/brand/brand_matetea_hover.png") no-repeat left bottom;} #brand li a.b22:hover{background:url("/Static/images/leftMenu/brand/brand_cocopalm_hover.png") no-repeat left bottom;} #brand li a.b24:hover{background:url("/Static/images/leftMenu/brand/brand_toreta_hover.png") no-repeat left bottom;} #brand li a.b25:hover{background:url("/Static/images/leftMenu/brand/brand_seagram_hover.png") no-repeat left bottom;} #brand li a.b26:hover{background:url("/Static/images/leftMenu/brand/brand_hongchahwawon_hover.png") no-repeat left bottom;} #brand li a.b27:hover{background:url("/Static/images/leftMenu/brand/brand_goldpeak_hover.png") no-repeat left bottom;} .brand_btn{background:url("/Static/images/leftMenu/bg_brandBtn.png") no-repeat left top;width:79px;height:83px;position:absolute;right:-4px;top:6px;z-index:10;} .brand_btn ul{width:56px;overflow:hidden;position:absolute;right:10px;top:36px;z-index:20;} .brand_btn li{float:left;} .banner_wrap{width:171px;margin:43px auto 0;text-align:left;} .banner_wrap .inner{position:relative;overflow:hidden;width:100%;height:57px;} .banner_wrap .inner .gallery{position:absolute;left:0;top:0;width:9999px;} .banner_wrap .inner .gallery li{float:left;} .banner_wrap .inner .gallery li.on{display:block;} .rule_wrap{margin-top:18px;text-align:center;} .rule_wrap span{cursor:pointer;} .site_wrap{width:173px;margin:0 auto;position:relative;text-align:left;} .site_wrap .selectBx{width:173px;height:28px;cursor:pointer;} .site_wrap .optionBx{display:none;position:absolute;left:0;bottom:28px;width:173px;height:93px;background:url("/Static/images/leftMenu/bg_option.png") no-repeat left top;z-index:50;cursor:pointer;} .site_wrap ul{position:absolute;left:10px;top:10px;z-index:100;} .site_wrap li{padding:5px 0;font-size:0;} .copyright{text-align:center;margin-top:9px;padding-left:10px;} /* Site Contents */ .topMenu{margin-bottom:17px;} .topMenu .option-set{/* background:url("/Static/images/topMenu/bg_nav.png") no-repeat left top;*/width:467px;height:50px;position:relative;top:0;left:50%;margin-left:-233px;overflow:hidden;} .topMenu .option-set li{float:left;} .topMenu .option-set li a{display:inline-block;height:50px;} .topMenu .option-set li.t1 a{background:url("/Static/images/topMenu/nav_viewAll.png") no-repeat left top;width:156px;} .topMenu .option-set li.t2 a{background:url("/Static/images/topMenu/nav_brand.png") no-repeat left top;width:154px;} .topMenu .option-set li.t3 a{background:url("/Static/images/topMenu/nav_sns.png") no-repeat left top;width:156px;} /*.topMenu .option-set li.t4 a{background:url("/Static/images/topMenu/nav_mobile.png") no-repeat left top;width:149px;}*/ .topMenu .option-set li.t1 a:hover, .topMenu .option-set li.t1 a.selected{background:url("/Static/images/topMenu/nav_viewAll_on.png") no-repeat left top;} .topMenu .option-set li.t2 a:hover, .topMenu .option-set li.t2 a.selected{background:url("/Static/images/topMenu/nav_brand_on.png") no-repeat left top;} .topMenu .option-set li.t3 a:hover, .topMenu .option-set li.t3 a.selected{background:url("/Static/images/topMenu/nav_sns_on.png") no-repeat left top;} /* .topMenu .option-set li.t4 a:hover, .topMenu .option-set li.t4 a.selected{background:url("/Static/images/topMenu/nav_mobile_on.png") no-repeat left top;}*/ #container{margin-left:265px;} .element{margin:4px;float:left;overflow:hidden;position:relative;} .viewall{width:230px;height:173px;} .brand{width:177px;height:171px;} .sns{width:230px;/*height:173px;*/} .mobile{width:468px;height:354px;} .title{width:100%;height:87px;margin-bottom:50px;} .sns.title{width:468px;height:173px;margin-bottom:0px;} .wide{width:468px;height:716px;cursor:default;} .long{width:230px;height:354px;} .cont_wrap{position:relative;width:230px;height:176px;} .cont_default{position:absolute;left:0;top:0;z-index:2;} .cont_hover{position:absolute;left:0;top:0;z-index:1;display:none;} .square{ background:url("/Static/images/viewall/bg_square.png") left top;width:230px;height:173px;cursor:pointer; background:transparent\10; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/Static/images/viewall/bg_square.png',sizingMethod='crop'); } .longSquare{ background:url("/Static/images/viewall/bg_longSquare.png") left top;width:230px;height:354px;cursor:pointer; background:transparent\10; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/Static/images/viewall/bg_longSquare.png',sizingMethod='crop'); } .bottleCap{ background:url("/Static/images/viewall/bg_bottleCap.png") left top;width:230px;height:173px; background:transparent\10; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/Static/images/viewall/bg_bottleCap.png',sizingMethod='crop'); } .circle{ background:url("/Static/images/viewall/bg_circle.png") left top;width:230px;height:173px; background:transparent\10; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/Static/images/viewall/bg_circle.png',sizingMethod='crop'); } .square dl{width:200px;overflow:hidden;margin:0 auto;font-size:12px;text-align:left;height:130px;color:#fff;} .square dt{margin-top:20px;} .square dd{margin-top:10px;} .longSquare dl{width:200px;overflow:hidden;margin:0 auto;font-size:12px;text-align:left;color:#fff;height:280px;} .longSquare dt{margin-top:20px;} .longSquare dd{margin-top:10px;} .circleText{text-align:center;width:110px;height:130px;margin:0 auto;color:#fff;overflow:hidden;letter-spacing:-1px;} .circleText dt{margin-top:30px;} .circleText dd{margin-top:5px;} .long .cont_wrap{height:352px;} .login_wrap #cont4 .cont_default{ /*background:url("/Static/images/viewall/img_cont_4_login.png") no-repeat left top;*/ width:230px;height:176px;position:relative; /*background:transparent\10; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/Static/images/viewall/img_cont_4_login.png',sizingMethod='crop');*/ } .login_wrap #cont7 .cont_default{ background:url("/Static/images/viewall/img_cont_7_login.png") no-repeat left top; width:230px;height:176px; /*background:transparent\10; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/Static/images/viewall/img_cont_7_login.png',sizingMethod='crop');*/ } .join_name{color:#fff;font-weight:bold;font-size:21px;position:absolute;left:25px;top:30px;} .join_name strong{font-size:14px;} .join_point{color:#fff;font-weight:bold;font-size:21px;position:absolute;left:25px;top:96px;} .join_date{color:#fff;font-weight:bold;font-size:17px;margin-top:130px;margin-left:25px;} .join_date span{margin-left:22px;} .movie_wrap{ background:url("/Static/images/viewall/bg_movie.png") left top; width:468px;height:335px;padding-top:19px;text-align:center;position:relative;z-index:0; /*background:transparent\10; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/Static/images/viewall/bg_movie.png',sizingMethod='crop');*/ } .movie_wrap .video_left{position:absolute;width:43px;height:259px;left:0;top:0;display:block;z-index:2} .movie_wrap .video_right{position:absolute;width:43px;height:259px;right:2px;top:0;display:block;z-index:2} .movie_wrap .movie_img{width:429px; height:240px;margin:0 auto;text-align:left;cursor:pointer;overflow:hidden;position: relative;z-index:0} .movie_wrap .movie_text{width:100%;} .movie_wrap .movie_bottom_wrap{width:409px;padding:5px 10px 8px;margin:0 auto;overflow:hidden;color:#fff;} .movie_wrap .movie_title{float:left;font-size:12px;line-height:26px;vertical-align:middle;cursor:pointer} .movie_wrap .movie_sns{float:right;} .movie_wrap .movie_sns li{float:left;margin-left:3px;} .movie_wrap .movie_sns li a{width:26px;height:26px;display:block;} .movie_wrap .movie_sns li.ms1 a{background:url("/Static/images/viewall/btn_facebook.png") left top;} .movie_wrap .movie_sns li.ms2 a{background:url("/Static/images/viewall/btn_twitter.png") left top;} .movie_wrap .movie_sns li.ms1 a:hover{background:url("/Static/images/viewall/btn_facebook_hover.png") left top;} .movie_wrap .movie_sns li.ms2 a:hover{background:url("/Static/images/viewall/btn_twitter_hover.png") left top;} .point-slide-wrap{width:429px;height:48px;margin:0 auto;position:relative;overflow:hidden;} .point-slide-wrap #point-slide{width:360px;margin:0 auto;cursor:pointer} .point-slide-wrap #point-slide ul{} .point-slide-wrap #point-slide li{width:160px;height:48px;text-align:left;margin:0 20px;overflow:hidden;} .point-slide-wrap #point-slide li .thum{display:inline-block; float:left; width:48px; height:48px;line-height:0; font-size:0; vertical-align:top;} .point-slide-wrap #point-slide li .txt{display:inline-block; float:right; width:100px; color:#f2a5aa; font-size:12px; height:38px; padding-top:10px; line-height:14px;overflow:hidden; text-overflow:ellipsis; -o-text-overflow: ellipsis;word-wrap:break-word;} .point-slide-wrap #point-slide li:hover .txt, .point-slide-wrap #point-slide li.on .txt {color:#fff;} .point-slide-wrap #gift-bt-left{position:absolute;left:0;top:10px;} .point-slide-wrap #gift-bt-right{position:absolute;right:0;top:10px;} /* SNS - Blog & Facebook */ #sns_wrap{width:100%;overflow:hidden;position:relative;text-align:center;} #sns_wrap .long{float:left;height:354px;} .cont_wrap .snsMiddle{cursor:pointer;} .count{color:#808080;display:inline-block;font-size:13px;line-height:23px;height:23px;margin-left:5px;} .fbColor{color:#3b5995;font-size:12px;} .date{font-size:12px;} /* 페이스북 SNS */ #facebook_wrap .snsBx{width:184px;height:308px;padding:26px 26px 20px 20px;font:12px/16px Dotum;text-align:left;color:#707070;position:relative;} #facebook_wrap .snsTop{border-bottom:1px dashed #dadfe9;} .cont_hover .snsTop{padding-bottom:12px;} #facebook_wrap .snsMiddle{padding-top:12px;text-align:center;} #facebook_wrap .snsMiddle .txt_fbMsg{margin-top:10px;text-align:left;} #facebook_wrap .snsBottom{position:absolute;left:20px;bottom:20px;} #facebook_wrap .fbList{width:100%;overflow:hidden;height:60px;} #facebook_wrap .fbList dt{width:42px;float:left;border:1px solid #abafb1;} #facebook_wrap .fbList dd{width:125px;float:left;margin-left:10px;font-size:11px;} .fbWrite{width:100%;overflow:hidden;margin-top:10px;} .fbWrite .ipt_write{width:125px;height:20px;margin-right:5px;} .fbWrite .input{float:left;} .fb_mcs_container{width:194px; height:208px;text-align:left;} .fb_mcs_container .customScrollBox{position:relative; height:100%;overflow:hidden;} .fb_mcs_container .customScrollBox .container{position:relative; width:184px; top:0; float:left;} .fb_mcs_container .dragger_container{position:relative; width:9px; height:210px;float:left; background:#eaecec; margin-left:-5px; cursor:pointer;-moz-border-radius:6px; -khtml-border-radius:6px; -webkit-border-radius:6px; border-radius:6px;} .fb_mcs_container .dragger,.fb_mcs_container .dragger_pressed{position:absolute; width:9px; height:60px; background:#df1f2a; overflow:hidden; cursor:pointer; -moz-border-radius:6px; -khtml-border-radius:6px; -webkit-border-radius:6px; border-radius:6px;} .fb_mcs_container dl{margin-bottom:5px;} .fb_mcs_container dd{width:175px;overflow:hidden;} .btn_count{background:url("/Static/images/viewall/btn_count.png") no-repeat left top;width:99px;height:21px;display:inline-block;border:0;cursor:pointer;text-indent:-5000px;} .btn_comment{background:url("/Static/images/viewall/btn_comment.png") no-repeat left top;width:82px;height:21px;display:inline-block;border:0;cursor:pointer;text-indent:-5000px;margin-left:10px;} .btn_content{background:url("/Static/images/viewall/btn_content.png") no-repeat left top;width:82px;height:21px;display:inline-block;border:0;cursor:pointer;text-indent:-5000px;} .btn_write{background:url("/Static/images/viewall/btn_write.png") no-repeat left top;width:82px;height:21px;display:inline-block;border:0;cursor:pointer;text-indent:-5000px;margin-left:10px;} .btn_insert{background:url("/Static/images/viewall/btn_insert.png") no-repeat left top;width:48px;height:22px;display:inline-block;border:0;cursor:pointer;text-indent:-5000px;} .btnBx{width:100%;text-align:right;} .btn_insert2{background:url("/Static/images/viewall/btn_insert2.png") no-repeat left top;width:74px;height:22px;display:inline-block;border:0;cursor:pointer;text-indent:-5000px;margin-top:10px;} /* 블로그 SNS */ #blog_wrap .snsBx{width:184px;height:308px;padding:26px 26px 20px 20px;text-align:left;font:12px/16px Dotum;position:relative;} #blog_wrap .snsTop{border-bottom:1px dashed #dadfe9;padding-bottom:12px;color:#292929;} #blog_wrap .snsMiddle{padding-top:10px;} #blog_wrap .snsBottom{position:absolute;left:20px;bottom:20px;} #blog_wrap .blogList dt{width:178px;} #blog_wrap .blogList dd{width:100%;margin-top:10px;height:96px;overflow:hidden;} .mcs_container{width:194px; height:237px;text-align:left;} .mcs_container .customScrollBox{position:relative; height:100%;overflow:hidden;} .mcs_container .customScrollBox .container{position:relative; width:184px; top:0; float:left;} .mcs_container .dragger_container{position:relative; width:9px; height:237px;float:left; background:#eaecec; margin-left:-5px; cursor:pointer;-moz-border-radius:6px; -khtml-border-radius:6px; -webkit-border-radius:6px; border-radius:6px;} .mcs_container .dragger,.mcs_container .dragger_pressed{position:absolute; width:9px; height:60px; background:#df1f2a; overflow:hidden; cursor:pointer; -moz-border-radius:6px; -khtml-border-radius:6px; -webkit-border-radius:6px; border-radius:6px;} .mcs_container dl{margin-bottom:5px;} .mcs_container dd{width:175px;overflow:hidden;} .mcs_container dd span{float:right;margin-right:12px;font-size:11px;} .sns_write{width:180px;} .sns_write dl{width:180px;overflow:hidden;margin-bottom:5px;} .sns_write dt{width:50px;height:20px;line-height:20px;float:left;font-weight:bold;} .sns_write dd{width:100px;float:right;} .sns_write .ipt{width:98px;height:20px;line-height:20px;border:1px solid #ddd;} .sns_write .ta{width:170px;height:139px;padding:5px;border:1px solid #ddd;} #cont_mobile3{width:468px;height:354px;position:relative;z-index:10;} #cont_mobile4{width:468px;height:354px;position:relative;z-index:10;} .downloadBx{position:absolute;left:70px;top:300px;width:100%;overflow:hidden;z-index:100;} .downloadBx li{float:left;margin-right:60px;} .downloadBx li a{background:url("/Static/images/mobile/btn_download.png") no-repeat left top;display:block;width:132px;height:32px;} .downloadBx li a:hover{background:url("/Static/images/mobile/btn_download_on.png") no-repeat left top;} /**** Mobile styles ****************************************************************************************************************************/ .m_topMenu{background-color:#f6f6f6;display:none;width:480px;margin:0 auto;} .m_topMenu ul{text-align:center;width:100%;margin:0 auto;} .m_topMenu li{display:inline-block;color:#777;font-weight:bold;font-size:16px;height:50px;line-height:50px;} * html .m_topMenu li{display:inline;} *+html .m_topMenu li{display:inline;} .m_topMenu li a{display:inline-block;margin:0 10px;padding-left:28px;} .m_topMenu li.s1 a{background:url("/Static/images/m/ico_viewAll_off.png") no-repeat 0 13px;} .m_topMenu li.s2 a{background:url("/Static/images/m/ico_brand_off.png") no-repeat 0 13px;} .m_topMenu li.s3 a{background:url("/Static/images/m/ico_sns_off.png") no-repeat 0 13px;} .m_topMenu li a.selected{color:#e61e2b;} .m_topMenu li.s1 a.selected{background:url("/Static/images/m/ico_viewAll_on.png") no-repeat 0 13px;} .m_topMenu li.s2 a.selected{background:url("/Static/images/m/ico_brand_on.png") no-repeat 0 13px;} .m_topMenu li.s3 a.selected{background:url("/Static/images/m/ico_sns_on.png") no-repeat 0 13px;} header {position: relative;display:none;} header #head {background-color:#df1f2a;} header #head .top-util {height:58px; background:#df1f2a url("/Static/images/mobileweb/line_menu.png") repeat-x 0 100%;} header #head .logo {position:absolute;left:10px;top:8px;} header #head .logo a img {width:121px; height:43px; zoom:1; -moz-transform: scale(1);} header #head img {vertical-align:top; line-height:0; font-size:0;} header #head .my-info {position:absolute;right:10px;top:15px;color:#fff;vertical-align:top;} header #head .my-info .log-info {display:block;} header #head .my-info .log-info a.btn_myinfo{margin-left:5px;} header #head .my-info .log-info a img{zoom:1; -moz-transform: scale(1);} header nav { background-color:#df1f2a; } header nav menu {display:table;width:100%;text-align:center;font-size:0 } header nav menu li {display:table-cell;width:20%; height:32px;line-height:32px;text-align:center;display:inline-block;font-size:12px } * html header nav menu li{display:inline;} *+html header nav menu li{display:inline;} header nav menu li a {color:#fff; display:block;letter-spacing:0;font-weight:bold;border-right:1px solid #cc1620;border-left:1px solid #e93039;} header nav menu li.first a{border-left:none;} header nav menu li.last a{border-right:none;} footer {display:none;} footer #footer {background-color:#df1f2a;} footer .banner{background-color:#ff2129;}/*margin-top:4px;*/ footer .banner ul{font-size:0;width:100%;overflow:hidden;text-align:center; } footer .banner li{float:left;} footer .banner li.first{width:50%;} footer .banner li.last{width:49%;} footer .banner li a{display:block;} footer .banner li.first a{border-right:1px solid #ff5056;} footer .banner li.last a{border-left:1px solid #e91423;} footer .banner li img{ width:70%;} footer #footer .social {width:100%;text-align:center; padding:10px 0; font-size:0; line-height:0; vertical-align:top;} footer #footer .social a {margin:0 5px;padding:0; line-height:0; font-size:0; } footer #footer .social a.first{margin-left:none;} footer #footer .social a.last{margin-right:none;} footer #footer .social a img { width:38px;height:37px; zoom:1; -moz-transform: scale(1);} footer #footer .foot-menu {width:100%;text-align:center; } footer #footer .foot-menu ul { margin-bottom:5px;width:100%;text-align:center;} footer #footer .foot-menu ul li {display:inline-block; padding-right:9px; background: url("/Static/images/M/ico_line.png") no-repeat right 5px;} * html footer #footer .foot-menu ul li {display:inline;} *+html footer #footer .foot-menu ul li {display:inline;} footer #footer .foot-menu ul li a {display:block;color:#fff;padding-left:5px;*padding-left:10px;} footer #footer .foot-menu ul li.last{background:none;} footer #footer .foot-menu ul li span img{ zoom:1; -moz-transform: scale(1);} footer #footer .foot-menu .copyright {clear:both;height:30px;text-align:center;color:#fff;opacity:0.3;filter:alpha(opacity=30);} #twitter_wrap dt{font-weight:bold;} #twitter_wrap dd a{display:block;} @media screen and (min-width:641px) { header, footer{display:none;} #site-nav, .sitenavi, .topMenu{display:block;} .m_topMenu{display:none;} #sns_wrap{display:block;} #facebook_wrap{ background:url("/Static/images/viewall/bg_facebook.png") no-repeat left top;width:230px;height:354px; background:transparent\10; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/Static/images/viewall/bg_facebook.png',sizingMethod='crop'); } .sns #facebook_wrap{ background:url("/Static/images/sns/bg_facebook.png") no-repeat left top;width:230px;height:354px; background:transparent\10; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/Static/images/sns/bg_facebook.png',sizingMethod='crop'); } #blog_wrap{ background:url("/Static/images/viewall/bg_blog.png") no-repeat left top;width:230px;height:354px; background:transparent\10; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/Static/images/viewall/bg_blog.png',sizingMethod='crop'); } #twitter_wrap{ background:url("/Static/images/sns/bg_twitter.png") no-repeat left top;width:230px;height:173px; background:transparent\10; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/Static/images/sns/bg_twitter.png',sizingMethod='crop'); } #twitter_wrap dl{width:184px;height:127px;padding:26px 26px 20px 20px;font:12px/16px Dotum;text-align:justify;color:#707070;} } @media screen and (max-width:640px) { body{font-family:"VAGRoundB"; background:none;background-color:#f6f6f6} header, section, article, footer, menu, nav { display:block; margin:0; padding:0 } header a:link,header a:visited{color:#fff;text-decoration:none;} header, footer{display:block;} #site-nav, .sitenavi{display:none;} #options .option-set{position:static;width:auto;margin:0;background-image:none;text-align:center;} #options li{float:none;} #options li a{width:auto;height:auto;background-image:none;text-indent:0;} #options li a .hidden{position:static;font-size:16px;line-height:1.5;width:auto;height:auto;overflow:visible;visibility:visible;} #options li.t4{display:none;} #options{padding:16px 0 0;background-color:#f6f6f6;width:auto;margin:0;} #options ul{text-align:center;width:100%;margin:0 auto;} #options li{display:inline-block;color:#777;font-weight:bold;font-size:16px;} * html #options li{display:inline;} *+html #options li{display:inline;} #options li a{display:inline-block;margin:0 10px;padding-left:28px;} #options li.t1 a{background:url("/Static/images/m/ico_viewAll_off.png") no-repeat 0 0;} #options li.t2 a{background:url("/Static/images/m/ico_brand_off.png") no-repeat 0 0;} #options li.t3 a{background:url("/Static/images/m/ico_sns_off.png") no-repeat 0 0;} #options li a.selected{color:#e61e2b;} #options li.t1 a.selected{background:url("/Static/images/m/ico_viewAll_on.png") no-repeat 0 0;} #options li.t2 a.selected{background:url("/Static/images/m/ico_brand_on.png") no-repeat 0 0;} #options li.t3 a.selected{background:url("/Static/images/m/ico_sns_on.png") no-repeat 0 0;} .topMenu .option-set{height:37px;} .m_topMenu{display:block;} #sns_wrap{display:none;} #wrapMain{width:480px;margin:0 auto;} #container{margin-top:-5px;margin-left:0;} #container .wide{height:360px;} #sns_wrap{height:0px} .brand.title{width:100%;text-align:left;} /* .brand{width:48%;text-align:center;} */ .snsCircle{display:none;height:0;} .sns{width:468px;} .title.sns{height:87px;} #twitter_wrap{background:url("/Static/images/mobileweb/bg_twitter_m.png") no-repeat left top;width:468px; height:124px;} #twitter_wrap dl{width:422px; height:78px;padding:26px 26px 20px 20px;font:12px/16px Dotum;text-align:justify;color:#707070;} #facebook_wrap .fbList dd{width:300px;} #blog_wrap{background:url("/Static/images/mobileweb/bg_blog_m.png") no-repeat left top;width:468px;height:282px;} #blog_wrap .snsBx{position:relative;width:422px;height:236px;padding:26px 26px 20px 20px;font-size:12px;line-height:20px;} #blog_wrap .blogList dt{margin:0 auto;} #blog_wrap .blogList dd{height:35px;overflow:hidden;} .mcs_container{width:410px;height:161px;} .mcs_container .customScrollBox .container{width:410px;} .mcs_container .dragger_container{height:161px;} .mcs_container dl{margin-bottom:21px;} .sns_write{width:410px;} .sns_write dl{width:410px;} .sns_write dd{width:320px;} .sns_write .ipt{width:318px;} .sns_write .ta{width:399px;} .sns #facebook_wrap{background:url("/Static/images/mobileweb/bg_facebook_m.png") no-repeat left top;width:468px;height:326px;} .sns #facebook_wrap .snsBx{position:relative;width:422px;height:280px;padding:26px 26px 20px 20px;font-size:12px;line-height:20px;} .sns #facebook_wrap .snsBottom{text-align:center;} .fb_mcs_container{width:410px;height:183px;} .fb_mcs_container .customScrollBox .container{width:410px;} .fb_mcs_container .dragger_container{height:216px;} .fb_mcs_container dl{margin-bottom:11px;} .fb_mcs_container dd{margin-right:10px;} .sns #facebook_wrap .fbWrite .ipt_write{width:340px;margin-left:-20px;} .cont_wrap{width:438px;} .element{margin:2px;} .long_blog{height:282px;} .long_fb{height:326px;} } /**** Mobile styles ****************************************************************************************************************************/ /* Sub */ .subWrap{} .subWrap #site-nav{display:block;} /* box style */ .rbox01 { position:relative; border:1px solid #e7e7e7; background:#fcfcfc; min-height:30px; padding:5px 0; } .rbox01 span.c-square { position:absolute; display:block; width:5px; height:5px; overflow:hidden; background:url('/Static/img/Popup/bg_rbox_corner.gif') no-repeat; } .rbox01 span.c-square.tl { background-position:0px 0px; left:-1px; top:-1px; } .rbox01 span.c-square.tr{ background-position:-5px 0px; right:-1px; top:-1px; } .rbox01 span.c-square.bl { background-position:0px -5px; left:-1px; bottom:-1px; _bottom:-2px; } .rbox01 span.c-square.br{ background-position:-5px -5px; right:-1px; bottom:-1px; _bottom:-2px; } .rbox01 .rcont01 { margin:15px 20px 15px 20px } .rbox01 .giftcont01 { margin:15px 20px 36px 20px } #cont3{width:230px;position:relative;} #cont3 .date1{position:absolute;left:78px;top:50px;text-indent:-2px;font-weight:bold;font-size:35px;color:#e61d2b;} #cont3 .date2{display:none;position:absolute;left:107px;top:81px;font-weight:bold;font-size:11px/13px;color:#7f7f7f;} #cont3 .date3{display:none;position:absolute;left:64px;top:115px;font-weight:bold;font-size:16px/22px;color:#e61d2b;}