/* BASIC css start */ /* best-evt */ #main .best-evt { zoom: 1; overflow: hidden; margin-top: 20px; } /* slideBestEvt */ #main #slideBestEvt { float: left; width: auto; border-left: 0; } /* hashBestEvt */ #main #hashBestEvt { position: relative; float: right; } /* headlineBanner */ #main #headlineBanner { position: relative; margin-top: 20px; } /* mdItem */ #main #mdItem { position: relative; margin-top: 20px; } /*베스트 셀러*/ #best_podu { position:relative; width:100%; margin:0 auto; margin-top:100px; clear:both;} #best_podu h2 {font-size:45px; line-height:50px; margin:0 auto; color:#333; text-align:center; font-weight:300; } #best_podu h3 {font-size:17px; line-height:25px; color:#aaa; font-weight:400; } #best_podu .tab { width:20%; height:30px; margin:0 auto; } #best_podu .tab li { float:left; display:block; width:49%; line-height:30px; font-size: 13px; color:#777; text-align:center; cursor:pointer; border:1px solid #dfdfdf; font-weight:300; } #best_podu .tab li.active { float:left; width:49%; line-height:30px; color:#333; font-size: 13px; text-align:center; border-left:1px solid #dfdfdf; border-top:1px solid #dfdfdf; border-right:1px solid #dfdfdf; border-bottom:2px solid #333; font-weight:400; } #best_podu .tab li.active a { float:left; width:49%;line-height:30px; color:#333; font-size: 13px; text-align:center; font-weight:400; border-bottom:2px solid #333; } #best_podu .tab li:last-child { float:left; width:49%; line-height:30px; color:#777; font-size: 13px; text-align:center; font-weight:300; border:1px solid #dfdfdf; } #best_podu .tab li:last-child a { float:left; width:49%; line-height:30px; color:#777; font-size: 13px; text-align:center; font-weight:400; border:1px solid #dfdfdf; } #best_podu .tab_con { width:1240px; margin:0 auto; margin-top:50px;} #best_podu .tab_con li.list {float:left; width:24.3%; height:400px; margin-left:6px; border:1px solid #fff; transition:all, 0.5s; cursor:pointer } #best_podu .tab_con li:first-child {margin-left:none;} #best_podu .tab_con .item-list {float:left; width:100%;} #best_podu .tab_con .item-list .item-icon {text-align:center !important;} #best_podu .tab_con .item-list .item-icon { position:absolute; margin-left:10px; margin-top:10px; z-index:5; } #best_podu .tab_con .item-list .thumb { width:90%; height:90%; margin:0 auto; } #best_podu .tab_con .item-list .thumb img { width:100%;} #best_podu .tab_con .item-list .prd-ect { font-size:14px; margin-top:20px; color:#aaa; font-weight:400; } #best_podu .tab_con .item-list .prd-name { font-size:18px; margin-top:5px; color:#333; font-weight:400; } #best_podu .tab_con .item-list .prd-subname { font-size:16px; margin-top:5px; color:#555; font-weight:300; } #best_podu .tab_con .item-list .prd-price { font-size:22px; margin-top:10px; color:#333; font-family: 'Lato' !important; font-weight:400 !important; } #best_podu .tab_con .item-list .prd-price-ect {margin-top:10px; text-align:center;} #best_podu .tab_con .item-list span.won { font-size:15px; color:#777; font-family: 'Noto Sans KR' !important; font-weight:300 !important; } #best_podu .tab_con .item-list span.hit { font-size:13px; margin-top:20px; line-height:25px; height:25px; color:#ccc; vertical-align:baseline; font-weight:400; } #best_podu .tab_con .item-list {width:100%;} #best_podu .tab_con .item-list .button { position:absolute; margin:0 auto; width:auto; height:200px; transition:all, 0.5s; z-index:10; clear:both;} #best_podu .tab_con .item-list .button .zoome { position:absolute; margin-left:90px; margin-top:100px; width:60px; height:60px; border-radius:30px; background-color:#ec3d20; transition:all, 0.5s; opacity:0; z-index:10;} #best_podu .tab_con .item-list .button .basket { position:absolute; margin-left:160px; margin-top:100px; width:60px; height:60px; border-radius:30px; background-color:#ec3d20; transition:all, 0.5s; opacity:0; z-index:10;} #best_podu .tab_con .item-list .button > div { background-color:none; opacity:0; } #best_podu .tab_con .item-list > .button { background-color:none; opacity:0; } /*베스트 셀러 button 오버*/ #best_podu .tab_con .list:hover {float:left; width:24.3%; height:400px; border:1px solid red; } #best_podu .tab_con .list:hover .button { position:absolute; margin:0 auto; width:auto; height:200px; opacity:1; z-index:10; clear:both; } #best_podu .tab_con .list:hover .button > .zoome { position:absolute; display:block; margin-left:90px; margin-top:100px; width:60px; height:60px; border-radius:30px; background-color:#ec3d20; opacity:0.9;} #best_podu .tab_con .list:hover .button > .basket { display:block; margin-left:160px; margin-top:100px; width:60px; height:60px; border-radius:30px; background-color:#ec3d20; opacity:0.9;} /*.tab_con .item-cont .item-list .button { position:absolute;margin:0 auto; width:100%; height:300px; z-index:2;} .tab_con .item-cont .item-list .button .zoome { position:absolute; display:block; margin-left:90px; margin-top:100px; width:60px; height:60px; border-radius:30px; background-color:#ec3d20; opacity:0.9;} .tab_con .item-cont .item-list .button .basket { display:block; margin-left:160px; margin-top:100px; width:60px; height:60px; border-radius:30px; background-color:#ec3d20; opacity:0.9;}*/ /* 가입 아이콘*/ .pers { position:relative; width:100%; height:180px; margin-top:550px; clear:both;} .pers .pers_box { width:1240px; margin:0 auto; } .pers .pers_box .left_bn {float:left; width:50%; text-align:left;} .pers .pers_box .right_bn { float:right; text-align:right;} /*제품 동영상*/ #pro_video { position:relative; width:100%; height:600px; margin-top:100px; padding-top:50px; text-align:center; background:url("/design/histolab/2019/main/video_bg.jpg") center no-repeat; clear:both; } #pro_video h2 {font-size:35px; line-height:40px; color:#fff; text-align:center; font-weight:300; } #pro_video h3 {font-size:16px; line-height:20px; color:#f4f4f4; text-align:center; font-weight:400;} #pro_video .title { position:relative; float:center !important; width:1350px; height:44px; margin:0 auto !important; z-index:20; top:35% !important; background:none !important; clear:both; } #pro_video .title .w3-button { background:none !important; } /*#pro_video .title h2 {font-size:35px; line-height:35px; margin:0 auto; color:#fff; text-align:center; font-weight:300; } #pro_video .title h3 { float:right; width:100%; font-size:17px; line-height:25px; color:#eee; text-align:center; font-weight:400; margin-top:5px; }*/ #pro_video .title .vb_more { float:right; width:60px; height:44px; margin-top:10px; margin-right:50px; color:#fff; clear:both;} #pro_video .title .btn_left { float:left; width:30px; height:44px; margin-top:10px; background:none !important; } #pro_video .title .btn_right { float:right; width:30px; height:44px; margin-top:10px; background:none !important; } #pro_video .title .btn_right .w3-button {background:none !important; } #pro_video .title .btn_left .w3-button { background:none !important; } #pro_video .slider {position:relative; width:1240px; height:450px; margin:0 auto; text-align:left; top:0; clear:both; } #pro_video .slider .slide { width:100%; height:450px; margin:0 auto;} #pro_video .slider .slide .video_item { float:left; display:block; width:560px; height:430px; padding-top:20px; border-bottom:1px solid #fe907a; border-top:1px solid #fe907a;/*padding:11px; */ } #pro_video .slider .slide .video_item .tibox {float:left; display:block; width:560px; height:80px; } #pro_video .slider .slide .video_item .tibox > h2 {font-size:30px; line-height:30px; margin:0 auto; color:#fff; text-align:left; font-weight:400; } #pro_video .slider .slide .video_item .tibox > h3 {position:relative; font-size:16px; line-height:25px; color:#fff; text-align:left; font-weight:400;} #pro_video .slider .slide .video_item .video { display:block; float:right; width:560px; height:315px; margin:0 auto; box-shadow: 7px 7px 18px #333 ;} #pro_video .slider .slide .video_item .video iframe, #pro_video .slider .slide .video_item .video object, #pro_video .slider .slide .video_item .video embed {top:0; left:0; width:100%; height:100%; border:0; } #pro_video .slider .slide .video_item .tibox > h2 > span.vb_more a { position:absolute; float:left; width:70px; height:25px; font-size: 14px; margin-left:20px; color:#fff; text-align:left; font-weight:400; } #pro_video .slider .slide .video_item .tibox > h2 > span.vb_more a:hover { position:absolute; float:left; width:70px; height:25px; font-size: 14px; margin-left:20px; color:#333; text-align:left; font-weight:400; } #pro_video .slider .slide .video_item_02 {float:left; display:block; width:322px; height:450px; margin-left:15px; text-align:center; border:1px solid #eee; background-color:#fff; transition:all, 0.5s;} #pro_video .slider .slide .video_item_02:hover {width:322px; height:450px; border:1px solid #ccc; background-color:#fff; box-shadow: 7px 7px 13px #333; cursor:pointer; } #pro_video .slider .slide .video_item_02 .video {position:absolute; margin-left:130px; text-align:center; margin-top:100px; width:60px; height:60px; border-radius:30px; background-color:#fff; transition:all, 0.5s; opacity:1; z-index:14; } #pro_video .slider .slide .video_item_02 .video i { color:#333;} #pro_video .slider .slide .video_item_02:hover > .video {position:absolute; margin-left:130px; margin-top:100px; width:60px; height:60px; border-radius:30px; background-color:#ec3d20; opacity:1; z-index:10;} #pro_video .slider .slide .video_item_02:hover > .video i { color:#fff;} #pro_video .slider .slide .video_item_02 p.sti {font-size:15px; margin-top:5px; color:#999; } #pro_video .slider .slide .video_item_02 p.ti { font-size:20px; margin-top:5px; color:#333; } #pro_video .slider .slide .video_item_02 p.tag { margin-top:20px; color:#999; font-weight:100; } #pro_video .slider .slide .video_item_02 p.img { width:100%; margin-bottom:40px; border-bottom:1px solid #eee; clear:both;} #pro_video .slider .slide .video_item_02 p.img img {width:100%; !important; margin:0 auto;} #pro_video .slider .slide .video_item_02 span.stag { width:100%; font-size:12px; height:15px; padding:3px 3px; margin:5px 2px; color:#999; border:1px solid #eee; font-weight:300; } /*공식판매처, 제품브로셔 다운로드, 카카오플러스, 전문가회원가입 #pf_zone_icon { position:relative; width:1240px; height:300px; margin:0 auto; } #pf_zone_icon .pf_zone_icon_box { position:absolute; width:100%; height:300px; margin:0 auto; } #pf_zone_icon .pf_zone_icon_box ul { width:100%; height:300px; } #pf_zone_icon .pf_zone_icon_box ul li { float:left; width:25%; height:300px; text-align:center;} #pf_zone_icon .pf_zone_icon_box ul li img { width:242px; transition:all, 0.5s;} #pf_zone_icon .pf_zone_icon_box ul li img:hover { width:250px; } #pf_zone_icon .pf_zone_icon_box h2 { font-size: 18px !important; color:#000 !important; letter-spacing:-1px; font-weight:400; text-align:center; margin-top:25px; } #pf_zone_icon .pf_zone_icon_box h3 { font-size: 13px !important; color:#777 !important; font-weight:300; text-align:center; } */ /*공식판매처, 제품브로셔 다운로드, 카카오플러스, 전문가회원가입*/ #pf_zone_bn { position:relative; width:1240px; height:190px; margin:0 auto; margin-top:50px;} #pf_zone_bn .pf_zone_bn_box { position:absolute; width:100%; height:140px; margin:0 auto; } #pf_zone_bn .pf_zone_bn_box ul { width:100%; height:100%; } #pf_zone_bn .pf_zone_bn_box ul li { float:left; width:16.8%; text-align:left; padding:30px 50px; border-left:1px solid #eee; border-top:1px solid #eee;border-bottom:1px solid #eee; border-right:none; } #pf_zone_bn .pf_zone_bn_box ul li:last-child { float:left; width:16.8%; text-align:left; border-right:1px solid #eee; } #pf_zone_bn .pf_zone_bn_box h2 { display:block; font-size: 18px !important; color:#000 !important; letter-spacing:-1px; font-weight:400; text-align:left; } #pf_zone_bn .pf_zone_bn_box h3 { display:block; font-size: 13px !important; color:#777 !important; margin-top:25px; font-weight:300; text-align:left; } #pf_zone_bn .pf_zone_bn_box span.bd { float:left; display:inline-block; width:30px; height:1px; margin:10px 0px; background:#000; } #pf_zone_bn .pf_zone_bn_box a.go { display:inline-block; font-size:12px; color:#333; font-weight:400;} #pf_zone_bn .pf_zone_bn_box a.go:hover {display:inline-block; font-size:12px; color:#ec3d20; } #pf_zone_bn .pf_zone_bn_box a.go:hover::after {content:"→"; padding-left:13px; } /*전문가 신청서 아이콘*/ #pf_oder_zone { position:relative; width:1240px; height:150px; margin:0 auto;} #pf_oder_zone .pf_oder_zone_box { float:center; display:block; width:930px; height:150px; margin:0 auto; } #pf_oder_zone .pf_oder_zone_box > div > h2 { display:block; font-size: 16px !important; color:#000 !important; letter-spacing:-1px; font-weight:400; margin-top:30px; text-align:center; } #pf_oder_zone .pf_oder_zone_box > div > h3 { display:block; font-size: 11px !important; color:#777 !important; height:12px margin-top:5px; font-weight:300; text-align:center; } /*전문가 신청서 아이콘 _타이틀*/ #pf_oder_zone .pf_oder_zone_box .oder_icon_title { display:block; float:left; width:270px; height:150px; border-radius:30px; background-color:#eee; text-align:center; clear:both; } #pf_oder_zone .pf_oder_zone_box .oder_icon_title .txt_box { display:block; float:left; width:48%; margin-top:10px; margin-left:20px;} #pf_oder_zone .pf_oder_zone_box .oder_icon_title .txt_box h2 { display:block; font-size: 16px !important; color:#000 !important; letter-spacing:-1px; font-weight:400; margin-top:30px; text-align:center; } #pf_oder_zone .pf_oder_zone_box .oder_icon_title .txt_box h3 { display:block; font-size: 11px !important; color:#777 !important; height:12px margin-top:5px; font-weight:300; text-align:center; } #pf_oder_zone .pf_oder_zone_box .oder_icon_title .txt_box .oder_go a { display:inline-block; font-size:12px; width:84px; height:24px; line-height:24px; -ms-padding-top:8px; margin:0 auto; margin-top:0px; color:#777777; font-weight:400; margin-top:10px; font-family:'Dotum' !important; border:1px solid #777777; transition:all, 0.5s; cursor:pointer } #pf_oder_zone .pf_oder_zone_box .oder_icon_title .txt_box .oder_go a:hover { display:inline-block; font-size:12px; width:84px; height:24px; line-height:24px; -ms-padding-top:8px; margin:0 auto; margin-top:0px; color:#000; font-weight:400; margin-top:10px; font-family:'Dotum' !important; border:1px solid #000; } #pf_oder_zone .pf_oder_zone_box .oder_icon_title .img_box {display:block; float:right; text-align:center; margin-right:0px; } #pf_oder_zone .pf_oder_zone_box .oder_icon_title .img_box img {display:inline-block; text-align:center; margin-right:10px; margin-top:10px; } /*전문가 신청서 아이콘 _카타로그*/ #pf_oder_zone .pf_oder_zone_box .oder_icon_catalogue { display:block; float:left; width:270px; height:150px; border-radius:30px; background-color:#fdf6e3; margin-left:60px; } #pf_oder_zone .pf_oder_zone_box .oder_icon_catalogue .txt_box { display:block; float:left; width:48%; margin-left:20px; margin-top:10px;} #pf_oder_zone .pf_oder_zone_box .oder_icon_catalogue .txt_box h2 { display:block; font-size: 16px !important; color:#000 !important; letter-spacing:-1px; font-weight:400; margin-top:30px; text-align:center; } #pf_oder_zone .pf_oder_zone_box .oder_icon_catalogue .txt_box h3 { display:block; font-size: 11px !important; color:#777 !important; height:12px margin-top:5px; font-weight:300; text-align:center; } #pf_oder_zone .pf_oder_zone_box .oder_icon_catalogue .txt_box .oder_go a { display:inline-block; font-size:12px; width:84px; height:24px; line-height:24px; -ms-padding-top:8px; margin:0 auto; margin-top:0px; color:#ee5d00; font-weight:400; margin-top:10px; font-family:'Dotum' !important; border:1px solid #ee5d00; transition:all, 0.5s; cursor:pointer } #pf_oder_zone .pf_oder_zone_box .oder_icon_catalogue .txt_box .oder_go a:hover { display:inline-block; font-size:12px; width:84px; height:24px; line-height:24px; -ms-padding-top:8px; margin:0 auto; margin-top:0px; color:#000; font-weight:400; margin-top:10px; font-family:'Dotum' !important; border:1px solid #000; } #pf_oder_zone .pf_oder_zone_box .oder_icon_catalogue .img_box {display:block; float:right; text-align:center; margin-right:0px; } #pf_oder_zone .pf_oder_zone_box .oder_icon_catalogue .img_box img {display:inline-block; text-align:center; margin-top:20px; margin-right:20px; } /*전문가 신청서 아이콘 _리플렛 #pf_oder_zone .pf_oder_zone_box .oder_icon_leaflet { display:block; float:left; width:155px; height:270px; border-radius:30px; background-color:#fcf1ed; margin-left:30px; margin-top:-30px;} #pf_oder_zone .pf_oder_zone_box .oder_icon_leaflet .oder_go a { display:inline-block; font-size:12px; width:84px; height:24px; line-height:24px; -ms-padding-top:8px; margin:0 auto; margin-top:0px; color:#ee2200; font-weight:400; margin-top:10px; font-family:'Dotum' !important; border:1px solid #ee2200; transition:all, 0.5s; cursor:pointer } #pf_oder_zone .pf_oder_zone_box .oder_icon_leaflet .oder_go a:hover { display:inline-block; font-size:12px; width:84px; height:24px; line-height:24px; -ms-padding-top:8px; margin:0 auto; margin-top:0px; color:#000; font-weight:400; margin-top:10px; font-family:'Dotum' !important; border:1px solid #000; } #pf_oder_zone .pf_oder_zone_box .oder_icon_leaflet img {display:inline-block; text-align:center; margin-top:30px; } /*전문가 신청서 아이콘 _쇼케이스 #pf_oder_zone .pf_oder_zone_box .oder_icon_showcase { display:block; float:left; width:155px; height:270px; border-radius:30px; background-color:#eee; margin-left:30px;} #pf_oder_zone .pf_oder_zone_box .oder_icon_showcase .oder_go a { display:inline-block; font-size:12px; width:84px; height:24px; line-height:24px; -ms-padding-top:8px; margin:0 auto; margin-top:0px; color:#777777; font-weight:400; margin-top:10px; font-family:'Dotum' !important; border:1px solid #777777; transition:all, 0.5s; cursor:pointer } #pf_oder_zone .pf_oder_zone_box .oder_icon_showcase .oder_go a:hover { display:inline-block; font-size:12px; width:84px; height:24px; line-height:24px; -ms-padding-top:8px; margin:0 auto; margin-top:0px; color:#000; font-weight:400; margin-top:10px; font-family:'Dotum' !important; border:1px solid #000; } #pf_oder_zone .pf_oder_zone_box .oder_icon_showcase img {display:inline-block; text-align:center; margin-top:20px; } /*전문가 신청서 아이콘 _포스터 #pf_oder_zone .pf_oder_zone_box .oder_icon_poster {display:block; float:left; width:155px; height:270px; border-radius:30px; background-color:#dcf2f0; margin-left:30px; margin-top:-30px;} #pf_oder_zone .pf_oder_zone_box .oder_icon_poster .oder_go a { display:inline-block; font-size:12px; width:84px; height:24px; line-height:24px; -ms-padding-top:8px; margin:0 auto; margin-top:0px; color:#1ab1a3; font-weight:400; margin-top:10px; font-family:'Dotum' !important; border:1px solid #1ab1a3; transition:all, 0.5s; cursor:pointer } #pf_oder_zone .pf_oder_zone_box .oder_icon_poster .oder_go a:hover { display:inline-block; font-size:12px; width:84px; height:24px; line-height:24px; -ms-padding-top:8px; margin:0 auto; margin-top:0px; color:#000; font-weight:400; margin-top:10px; font-family:'Dotum' !important; border:1px solid #000; } #pf_oder_zone .pf_oder_zone_box .oder_icon_poster img {display:inline-block; text-align:center; margin-top:20px; }*/ /*전문가 신청서 아이콘 _as*/ #pf_oder_zone .pf_oder_zone_box .oder_icon_as { display:block; float:left; width:270px; height:150px; border-radius:30px; background-color:#eee; margin-left:60px;} #pf_oder_zone .pf_oder_zone_box .oder_icon_as .txt_box { isplay:block; float:left; width:48%; margin-left:20px; margin-top:10px;} #pf_oder_zone .pf_oder_zone_box .oder_icon_as .txt_box h2 { display:block; font-size: 16px !important; color:#000 !important; letter-spacing:-1px; font-weight:400; margin-top:30px; text-align:center; } #pf_oder_zone .pf_oder_zone_box .oder_icon_as .txt_box h3 { display:block; font-size: 11px !important; color:#777 !important; height:12px margin-top:5px; font-weight:300; text-align:center; } #pf_oder_zone .pf_oder_zone_box .oder_icon_as .txt_box .oder_go a { display:inline-block; font-size:12px; width:84px; height:24px; line-height:24px; -ms-padding-top:8px; margin:0 auto; margin-top:0px; color:#777777; font-weight:400; margin-top:10px; font-family:'Dotum' !important; border:1px solid #777777; transition:all, 0.5s; cursor:pointer } #pf_oder_zone .pf_oder_zone_box .oder_icon_as .txt_box .oder_go a:hover { display:inline-block; font-size:12px; width:84px; height:24px; line-height:24px; -ms-padding-top:8px; margin:0 auto; margin-top:0px; color:#000; font-weight:400; margin-top:10px; font-family:'Dotum' !important; border:1px solid #000; } #pf_oder_zone .pf_oder_zone_box .oder_icon_as .img_box {display:block; float:right; text-align:center; margin-right:0px; } #pf_oder_zone .pf_oder_zone_box .oder_icon_as .img_box img {display:inline-block; text-align:center; margin-right:20px; } /*전문가 기계 리스트*/ #pf_zone {position:relative; width:100%; height:550px; margin:0 auto; margin-top:100px; text-align:center; clear:both;} #pf_zone h2 {font-size:35px !important; line-height:40px !important; margin:0 auto !important; color:#333 !important; text-align:center !important; font-weight:300 !important; } #pf_zone h3 {position:relative; font-size:16px; line-height:25px; color:#aaa; text-align:center; font-weight:400; } #pf_zone .title {position:relative; float:center; width:1350px; height:44px; margin:0 auto; z-index:20; top:40% !important; } #pf_zone .title .btn_left { float:left; width:30px; height:44px; margin-top:10px; } #pf_zone .title .btn_right { float:right; width:30px; height:44px; margin-top:10px; } #pf_zone .container {width:1240px; margin:0 auto; text-align:left;} #pf_zone .container > div { display: inline-block;} #pf_zone .container .slideshow {float:left; width:100%;} #pf_zone .container .slideshow > div { position: absolute; margin:0 auto; } #pf_zone .container .slideshow .hidden { display: none;} #pf_zone .container .slideshow .list_item { float:left; width:398px; height:420px; overflow:hidden; text-align:center; margin-left:10px; border:1px solid #eee; cursor:pointer} #pf_zone .container .slideshow .list_item:hover {border:1px solid #ddd; transition: 0.1s ease-in-out; } #pf_zone .container .slideshow .list_item > p.sti { font-size:15px; margin-top:40px; color:#999; } #pf_zone .container .slideshow .list_item > p.ti {font-size:20px; margin-top:5px; color:#333; } #pf_zone .container .slideshow .list_item > p.img { width:100%; height:300px; padding:0; margin-bottom:20px; opacity:1; -webkit-transition: 0.1s ease-in-out; -moz-transition: 0.1s ease-in-out; -o-transition: 0.1s ease-in-out; transition: 0.1s ease-in-out;} #pf_zone .container .slideshow .list_item:hover > p.img { height:300px; margin-bottom:20px; opacity:0.7; -webkit-transition: all 0.1s ease-in; -webkit-transform: scale(1.1); -ms-transition: all 0.1s ease-in; -ms-transform: scale(1.1); -moz-transition: all 0.1s ease-in; -moz-transform: scale(1.1); transition: all 0.1s ease-in; transform: scale(1.1); } /*kaka 가입 아이콘*/ #kaka {position:relative; width:100%; height:180px; margin-top:120px; clear:both;} #kaka .kaka_box { width:1240px; margin:0 auto; } #kaka .kaka_box .left_bn {float:left; width:50%; text-align:left;} #kaka .kaka_box .right_bn { float:right; text-align:right;} /*브랜드 소개*/ #brand {position:relative; width:100%; height:400px; margin-top:150px; clear:both;} #brand .brand_box { width:1240px; margin:0 auto; } #brand .brand_box .brand_sbox01 { float:left; width:60%; height:400px;} #brand .brand_box .brand_sbox01 .video { width:100%; height:400px;} #brand .brand_box .brand_sbox01 .video iframe, #brand .brand_box .brand_sbox01 .video object, #brand .brand_box .brand_sbox01 .video embed { top:0px; left:0; width:100%; height:100%; border:0; } #brand .brand_box .brand_sbox02 {float:right; width:39%; height:100%; margin-top:70px; text-align:center; } #brand .brand_box .brand_sbox02 h2 {font-size:45px !important; line-height:50px !important; margin:0 auto !important; color:#333 !important; text-align:center !important; font-weight:400 !important; clear:both; } #brand .brand_box .brand_sbox02 h3 {font-size:16px; line-height:20px; margin:0 auto; color:#333; text-align:center; margin-top:20px; margin-bottom:50px; font-weight:400; } #brand .brand_box .brand_sbox02 .br_button { width:130px; height:40px; margin:0 auto; line-height:40px; background-color:#333; color:#fff; border:1px solid #333; text-align:center; font-weight:400;} #brand .brand_box .brand_sbox02 .br_button:hover { height:40px; margin:0 auto; line-height:40px; background-color:#fff; color:#333; border:1px solid #333; text-align:center; font-weight:400; } #brand .brand_box .brand_sbox02 .br_button > a {display:block; font-size:15px; color:#fff; line-height:40px;} #brand .brand_box .brand_sbox02 .br_button > a:hover { display:block; font-size:15px; color:#333; line-height:40px;} /*sns_icon 리스트*/ #sns_icon { position:relative; width:100%; height:100px; margin:0 auto; margin-top:100px; clear:both;} #sns_icon .sns_icon_box {float:center; width:1240px; height:100px; margin:0 auto; } #sns_icon .sns_icon_box ul {float:center; width:60%; height:100px; margin:0 auto; } #sns_icon .sns_icon_box ul li { float:left; width:25%; height:100px; text-align:center;} #sns_icon .sns_icon_box ul li .sns_icon { display:block; height:100px; width:100px; margin:10px; border-radius:80px; text-align:center; line-height:100px; color:#ddd; background-color:#f2f2f2; cursor: pointer; transition:all, 0.5s;} #sns_icon .sns_icon_box ul li .sns_icon:hover { float:left; display:block; height:100px; width:100px; margin:10px; border-radius:80px; text-align:center; line-height:100px; color:#fff; background-color:#f0442c; } #sns_icon .sns_icon_box ul li .sns_icon:hover span > i { color:#fff;} /*sns 리스트 (이전) #sns {position:relative; width:100%; height:530px; margin:0 auto; margin-top:100px; clear:both;} #sns .sns_box { width:1240px; height:530px; margin:0 auto; text-align:center; } #sns .sns_box .sns_mbox {float:left; width:720px; height:480px; border:1px solid #eee;} #sns .sns_box .sns_mbox .sns_sbox01 {float:left; width:270px; height:450px; padding-left:30px; padding-top:30px; text-align:left;} #sns .sns_box .sns_mbox .sns_sbox01 p.sns_st { font-size:15px; line-height:18px; color:#333; } #sns .sns_box .sns_mbox .sns_sbox01 p.sns_ti { font-size:24px; line-height:24px; color:#333; margin-top:50px; } #sns .sns_box .sns_mbox .sns_sbox01 p.sns_st02 { font-size:18px; line-height:18px; color:#aaa; margin-top:50px;} #sns .sns_box .sns_mbox .sns_sbox01 p.sns_stxt { font-size:13px; line-height:15px; color:#333; margin-top:150px; margin-bottom:20px; } #sns .sns_box .sns_mbox .sns_sbox01 p.sns_button { display:block; width:100px; height:30px; font-size:13px; line-height:30px; color:#333; font-weight:300; text-align:center; border-bottom:2px solid #333; } #sns .sns_box .sns_mbox .sns_sbox02 {float:left; width:420px; height:480px; background-color:#eee;} #sns .sns_box .sns_sbox03 {position:relative; float:right; width:500px; height:480px; top: 0px; border:1px solid #eee;} #sns .sns_box .sns_sbox03 .title {display:block; top:0; width:500px; height:50px; } #sns .sns_box .sns_sbox03 .title .icon_rol {float:left; width:500px; height:50px;} #sns .sns_box .sns_sbox03 .title .icon_roll li {float:left; font-size:20px; height:50px; line-height:50px; color:#333; font-weight:400;} #sns .sns_box .sns_sbox03 .list {position:absolute; display:block; width:500px; height:256px; border:1px solid blue;} #sns .sns_box .sns_sbox03 .list .con01 {width:500px; height:137px; margin-left:20px; margin-top:20px;} #sns .sns_box .sns_sbox03 .list .con01 .sns_icon { float:left; display:block; height:50px; width:50px; margin:10px; border-radius:50px; text-align:center; line-height:50px; color:#FFF; background-color:#f0442c; cursor: pointer; transition:all, 0.5s;} #sns .sns_box .sns_sbox03 .list .con01 .sns_icon > i { color:#FFF;} #sns .sns_box .sns_sbox03 .list .con01 .sns_icon:hover { float:left; display:block; height:50px; width:50px; margin:10px; border-radius:50px; text-align:center; line-height:50px; color:#fff; background-color:#555; } #sns .sns_box .sns_sbox03 .list .con01 .sns_icon:hover span > i { color:#fff;} #sns .sns_box .sns_sbox03 .list .con01 .img {float:left; width:137px; } #sns .sns_box .sns_sbox03 .list .con01 .text {float:left; text-align:left; font-size:15px; width:300px; font-weight:400; margin-left:157px; } #sns .sns_box .sns_sbox03 .list .con01 .text h1 {text-align:left; font-weight:400; color:#333; font-size:17px; padding-top:10px; padding-bottom:10px;}*/ /*sns 리스트*/ #sns {position:relative; width:100%; height:50px; margin:0 auto; margin-top:20px; clear:both;} #sns .sns_box { width:1240px; height:50px; margin:0 auto; text-align:center; } #sns .sns_box .sns_mbox {float:left; width:720px; height:480px; border:1px solid #eee;} #sns .sns_box .sns_mbox .sns_sbox01 {float:left; width:270px; height:450px; padding-left:30px; padding-top:30px; text-align:left;} #sns .sns_box .sns_mbox .sns_sbox01 p.sns_st { font-size:15px; line-height:18px; color:#333; } #sns .sns_box .sns_mbox .sns_sbox01 p.sns_ti { font-size:24px; line-height:24px; color:#333; margin-top:50px; } #sns .sns_box .sns_mbox .sns_sbox01 p.sns_st02 { font-size:18px; line-height:18px; color:#aaa; margin-top:50px;} #sns .sns_box .sns_mbox .sns_sbox01 p.sns_stxt { font-size:13px; line-height:15px; color:#333; margin-top:150px; margin-bottom:20px; } #sns .sns_box .sns_mbox .sns_sbox01 p.sns_button { display:block; width:100px; height:30px; font-size:13px; line-height:30px; color:#333; font-weight:300; text-align:center; border-bottom:2px solid #333; } #sns .sns_box .sns_mbox .sns_sbox02 {float:left; width:420px; height:480px; background-color:#eee;} #sns .sns_box .sns_sbox03 {position:relative; float:right; width:500px; height:480px; top: 0px; border:1px solid #eee;} #sns .sns_box .sns_sbox03 .title { display:block; width:500px; height:50px; clear:both;} #sns .sns_box .sns_sbox03 .title .icon_rol {float:left; width:500px; height:50px;} #sns .sns_box .sns_sbox03 .title .icon_roll li {float:left; font-size:20px; height:50px; line-height:50px; color:#333; font-weight:400;} #sns .sns_box .sns_sbox03 .list { display:block; width:500px; height:430px;} #sns .sns_box .sns_sbox03 .list .video {width:500px; height:256px; padding:25px 0px;} #sns .sns_box .sns_sbox03 .list .text { display:block; float:left; text-align:left; font-size:15px; width:400px; height:50px; font-weight:400; margin-left:30px; } #sns .sns_box .sns_sbox03 .list .text h1 {text-align:left; font-weight:400; color:#333; font-size:17px; } /* #sns .sns_box .sns_sbox03 .list .sns_icon_list { display:block; float:center; font-size:15px; width:280px; height:50px; margin:0 auto; } #sns .sns_box .sns_sbox03 .list .sns_icon_list .sns_icon { float:left; display:block; height:50px; width:50px; margin:10px; border-radius:50px; text-align:center; line-height:50px; color:#FFF; background-color:#f0442c; cursor: pointer; transition:all, 0.5s;} #sns .sns_box .sns_sbox03 .list .sns_icon_list .sns_icon > i { color:#FFF;} #sns .sns_box .sns_sbox03 .list .sns_icon_list1 .sns_icon:hover { float:left; display:block; height:50px; width:50px; margin:10px; border-radius:50px; text-align:center; line-height:50px; color:#fff; background-color:#555; } #sns .sns_box .sns_sbox03 .list .sns_icon_list .sns_icon:hover span > i { color:#fff;} #sns .sns_box .sns_sbox03 .list .con01 .img {float:left; width:137px; }*/ #sns .sns_box .sns_icon_list { display:block; float:center; font-size:15px; width:600px; height:90px; margin:0 auto; } #sns .sns_box .sns_icon_list .sns_icon { float:left; display:block; margin:30px; width:63px; border-radius:63px; text-align:center; line-height:60px; color:#FFF; background-color:#f0442c; cursor: pointer; transition:all, 0.5s;} #sns .sns_box .sns_icon_list .sns_icon > i { color:#FFF; } #sns .sns_box .sns_icon_list .sns_icon:hover { float:left; display:block; margin:30px; width:63px; border-radius:63px; text-align:center; line-height:60px; color:#fff; background-color:#555; } #sns .sns_box .sns_icon_list .sns_icon:hover span > i { color:#fff;} #sns .sns_box .sns_sbox03 .list .con01 .img {float:left; width:137px; } /*notice*/ #notice {position:relative; width:100%; height:370px; margin-top:100px; clear:both;} #notice .notice_box { width:1240px; margin:0 auto; } #notice .notice_box .notice_sbox01 { float:left; width:33%; height:370px; padding-left:30px; border: 1px solid #eee;} #notice .notice_box .notice_sbox01 ul { float:left; width:100%; height:120px; text-align:left; } #notice .notice_box .notice_sbox01 ul li { float:left; width:100%; height:25px; text-align:left; font-weight:300; } #notice .notice_box .notice_sbox01 ul li a { font-size: 14px; font-weight:300; color:#999; line-height:25px; } #notice .notice_box .notice_sbox01 ul li a:hover { font-size: 14px; color:#333; font-weight:300; } #notice .notice_box .notice_sbox01 h2 { float:left !important; width:100% !important; height:30px !important; font-size: 18px !important; margin-top: 20px !important; color:#333 !important; text-align:left !important; font-weight:400 !important; } #notice .notice_box .notice_sbox01 span.bo_more a {float:right !important; width:70px !important; height:30px !important; font-size: 14px !important; color:#999 !important; text-align:left !important; font-weight:400 !important; } #notice .notice_box .notice_sbox01 span.bo_more a:hover { float:right; width:70px; height:30px; font-size: 14px; color:#ec3d20; text-align:left; font-weight:400; } #notice .notice_box .notice_sbox02 { float:left; width:25.7%; height:370px; padding-left:30px;} #notice .notice_box .notice_sbox02 .notice_info { float:left; height:230px;} #notice .notice_box .notice_sbox02 .notice_info li { float:left; height:25px;} #notice .notice_box .notice_sbox02 .notice_info p.info_st { font-size:14px; line-height:20px; color:#999; font-weight:300; text-align:left;} #notice .notice_box .notice_sbox02 .notice_info p.info_bst { font-size:18px; line-height:25px; color:#333; font-weight:400; text-align:left;} #notice .notice_box .notice_sbox02 .notice_info p.info_tel { font-size:35px; line-height:45px; margin-top:10px; color:#333; font-weight:400; text-align:left;} #notice .notice_box .notice_sbox02 .notice_info > .info_btn { float:left; display:block; width:110px; padding:5px 5px; margin-top:10px; margin-right:30px; height:25px; font-size:15px; line-height:25px; color:#333; border:2px solid #eee; font-weight:300; text-align:left;} #notice .notice_box .notice_sbox02 .notice_info > .info_btn a { display:block; font-size:15px; width:110px; line-height:25px; } #notice .notice_box .notice_sbox02 .notice_info > .info_btn a:after { content:"→";padding-left:60px; height:25px;} #notice .notice_box .notice_sbox02 ul { float:left; height:120px; text-align:left; } #notice .notice_box .notice_sbox02 ul li { float:left; width:100%; height:25px; text-align:left; font-weight:300; } #notice .notice_box .notice_sbox02 ul li a { font-size: 14px; font-weight:300; color:#999; line-height:25px; } #notice .notice_box .notice_sbox02 li a:hover { font-size: 14px; color:#333; font-weight:300; } #notice .notice_box .notice_sbox02 h2 { float:left !important; width:100% !important; height:30px !important; font-size: 18px !important; margin-top: 20px !important; color:#333 !important; text-align:left !important; font-weight:400 !important; } #notice .notice_box .notice_sbox02 span.bo_more a {float:right; width:70px; height:30px; font-size: 14px; color:#999; text-align:left; font-weight:400; } #notice .notice_box .notice_sbox02 span.bo_more a:hover { float:right; width:70px; height:30px; font-size: 14px; color:#ec3d20; text-align:left; font-weight:400; } #notice .notice_box .notice_sbox03 { float:left; width:36%; height:370px;/* background-color:#fa4f32;*/} #notice .notice_box .notice_sbox03 .tx_ti { text-align:center; height:79px; line-height:79px; font-size:18px; color:#fff; font-weight:400;} /***** 여기까지 비디오 보기 시작 ******************/ /*! * Strip - An Unobtrusive Responsive Lightbox - v1.6.4 * (c) 2014-2016 Nick Stakenburg * * http://www.stripjs.com * * Licensing: * - Commercial: http://www.stripjs.com/license * - Non-commercial: http://creativecommons.org/licenses/by-nc-nd/3.0 */ .strp-window { position: fixed; width: 0; height: 100%; overflow: hidden; background: #292929; font: 13px/20px "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, sans-serif; } .strp-window.strp-vertical { height: 0; width: 100%;} /* margin is added around the window to keep a visual reference * to the underlying page at all times. */ .strp-window { margin-left: 40px; } .strp-window.strp-vertical { margin-left: 0; margin-bottom: 40px; } /* fullscreen on smaller screens (iPhone 6+ and smaller) * since min-width is used to make this work it won't show on IE8, but * we're not expecting that browser to have a mobile sized screen anyway */ @media all and (max-width: 414px) and (orientation: portrait), all and (max-width: 736px) and (max-height: 414px) { .strp-window.strp-horizontal { min-width: 100%; } } @media all and (max-height: 414px) and (orientation: landscape), all and (max-height: 736px) and (max-width: 414px){ .strp-window.strp-vertical { min-height: 100%; } } /* z-index */ .strp-window, .strp-spinner-move { z-index: 99999;} /* reset box-sizing */ .strp-window, .strp-window [class^='strp-'], .strp-spinner-move, .strp-spinner-move [class^='strp-'] { box-sizing: border-box; } /* Chrome hack, this fixes a visual glitch when quickly toggling a video */ .strp-window { transform: translateZ(0px); } /* some properties on the window are used to toggle things * like margin and the fullscreen mode, * we reset those properties after measuring them */ .strp-measured { margin: 0 !important; min-width: 0 !important; min-height: 0 !important;} .strp-pages { position: absolute; width: 100%; height: 100%; overflow: hidden;} /* sides */ .strp-side-right { top: 0; right: 0; } .strp-side-right .strp-pages { top: 0; right: 0; } .strp-side-right .strp-page { top: 0; right: 0; } .strp-side-right .strp-close { top: 0; right: 0; } .strp-side-left { top: 0; left: 0; } .strp-side-left .strp-pages { top: 0; left: 0; } .strp-side-left .strp-page { top: 0; left: 0; } .strp-side-left .strp-close { top: 0; right: 0; } .strp-side-top { top: 0; left: 0; } .strp-side-top .strp-pages { top: 0; left: 0; } .strp-side-top .strp-page { top: 0; left: 0; } .strp-side-top .strp-close { top: 0; right: 0; } .strp-side-bottom { bottom: 0; left: 0; } .strp-side-bottom .strp-pages { bottom: 0; left: 0; } .strp-side-bottom .strp-page { bottom: 0; left: 0; } .strp-side-bottom .strp-close { top: 0; right: 0; } .strp-page { position: absolute; width: 100%; height: 100%;} .strp-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: 0; padding: 0; text-align: center; background: #292929; -webkit-user-select: none; -moz-user-select: none; user-select: none;} /* youtube & vimeo use overlap:false, this adds padding to make sure buttons don't overlap the content. navbutton = 72 = 54 + (2 * 9 margin) closebutton = 48 */ .strp-no-overlap .strp-container { padding: 48px 72px; } .strp-no-overlap.strp-no-sides .strp-container { padding: 48px 0; } .strp-vertical .strp-no-overlap .strp-container { padding: 0 72px; } .strp-vertical .strp-no-overlap.strp-no-sides .strp-container { padding: 0 48px; } .strp-hovering-clickable .strp-container { cursor: pointer; } .strp-content-element { position: absolute; top: 50%; left: 50%;} .strp-content-element iframe { float: left; width: 100%; height: 100%;} .strp-container img { display: inline-block; vertical-align: middle;} .strp-info { position: absolute; bottom: 0; left: 0; width: 100%; color: #efefef; font-size: 13px; line-height: 20px; background: #000; -webkit-text-size-adjust: none; text-size-adjust: none;} .strp-info-padder { display: block; overflow: hidden; padding: 12px; position: relative; width: auto;} .strp-caption { width: auto; display: inline; white-space: wrap;} .strp-position { color: #b3b3b3; float: right; line-height: 21px; opacity: 0.99; position: relative; text-align: right; margin-left: 15px; white-space: nowrap;} /* links */ .strp-info a, .strp-info a:hover { color: #ccc; border: 0; background: none; text-decoration: underline;} .strp-info a:hover { color: #eee; } /* < > */ .strp-nav { position: absolute; top: 50%; width: 54px; height: 72px; margin: 0 9px; margin-top: -36px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none;} .strp-nav-previous { left: 0; } .strp-nav-next { right: 0; left: auto; } .strp-nav-disabled { cursor: default; } .strp-nav-button { float: left; width: 100%; height: 100%; margin: 0; padding: 0;} .strp-nav-button-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #101010;} .strp-nav-button-icon { float: left; position: relative; height: 100%; width: 100%; zoom: 1; background-position: 50% 50%; background-repeat: no-repeat;} /* X */ .strp-close { position: absolute; width: 48px; height: 48px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none;} .strp-close-background, .strp-close-icon { position: absolute; top: 12px; left: 12px; height: 26px; width: 26px; background-position: 50% 50%; background-repeat: no-repeat;} .strp-close-background { filter: alpha(opacity=80); opacity: .8; background-color: #101010; background-image: url('http://www.histolab.co.kr/design/histolab/2019/js/strip/close.png'); opacity: 1; } .strp-close:hover .strp-close-background { background-color: #161616; } .strp-has-error .strp-container { background-color: #ca3434; } .strp-error { position: absolute; top: 50%; left: 50%; width: 240px; height: 240px; margin-left: -120px; margin-top: -120px; background-position: 50% 50%; background-repeat: no-repeat; background-image: url('http://www.histolab.co.kr/design/histolab/2019/js/strip/error.svg');} .strp-no-svg .strp-error { background-image: url('http://www.histolab.co.kr/design/histolab/2019/js/strip/error.png'); } /* Spinner - loading icon, wrapped by a div that moves it */ .strp-spinner-move { position: fixed; top: 0px; right: 0px; height: 48px; width: 0; /* ensure overflow during a jQuery animation */ overflow: visible !important;} .strp-spinner-move.strp-vertical { width: 48px; height: 0; } .strp-spinner { width: 48px; height: 48px; float: left; position: relative;} /* different sides */ .strp-spinner-move.strp-side-top { top: 0; right: 0; bottom: auto; left: auto; } .strp-spinner-move.strp-side-bottom { top: auto; right: 0; bottom: 0; left: auto; } .strp-spinner-move.strp-side-right .strp-spinner { margin-left: -48px; } .strp-spinner-move.strp-side-left .strp-spinner { margin-right: -48px; float: right; } .strp-spinner-move.strp-side-bottom .strp-spinner { margin-top: -48px; } .strp-spinner-move.strp-side-top .strp-spinner { position: absolute; bottom: 0; right: 0; margin-bottom: -48px; } @-moz-keyframes strp-spinner-spin { 100% { -moz-transform: rotate(360deg); } } @-webkit-keyframes strp-spinner-spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes strp-spinner-spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } .strp-spinner-rotate, .strp-spinner-frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .strp-spinner-line { position: absolute; left: 50%; top: 15px; width: 2px; margin-left: -1px; height: 3px; border-radius: 1px; z-index: 80; /* amount of lines, removed later on */ color: inherit; /* color of the dots, inherited from text on the page */ } /* * ===== Skin: strip ===== */ /* < > */ .strp-window-skin-strip .strp-nav-button-background { background-color: transparent; } .strp-window-skin-strip .strp-nav-previous .strp-nav-button-icon { background-image: url('http://www.histolab.co.kr/design/histolab/2019/js/strip/previous.svg'); } .strp-window-skin-strip .strp-nav-next .strp-nav-button-icon { background-image: url('http://www.histolab.co.kr/design/histolab/2019/js/strip/next.svg'); } /* IE7-8/no-svg (using a faded png) */ .strp-window-skin-strip.strp-no-svg .strp-nav-previous .strp-nav-button-icon { background-image: url('http://www.histolab.co.kr/design/histolab/2019/js/strip/previous-faded.png'); opacity: 1; } .strp-window-skin-strip.strp-no-svg .strp-nav-next .strp-nav-button-icon { background-image: url('http://www.histolab.co.kr/design/histolab/2019/js/strip/next-faded.png'); opacity: 1; } .strp-window-skin-strip .strp-nav .strp-nav-button-icon { opacity: .6; } /* normal state */ .strp-window-skin-strip.strp-mobile-touch .strp-nav .strp-nav-button-icon { opacity: 1; } /* mobile-touch always has normal states at full opacity */ /* < > : hover */ .strp-window-skin-strip .strp-nav:hover .strp-nav-button-icon, .strp-window-skin-strip .strp-nav-hover .strp-nav-button-icon { opacity: 1; } /* IE7-8/no-svg (unfaded png) */ .strp-window-skin-strip.strp-no-svg .strp-nav.strp-nav-previous:hover .strp-nav-button-icon, .strp-window-skin-strip.strp-no-svg .strp-nav-hover.strp-nav-previous .strp-nav-button-icon { background-image: url('http://www.histolab.co.kr/design/histolab/2019/js/strip/previous.png'); } .strp-window-skin-strip.strp-no-svg .strp-nav.strp-nav-next:hover .strp-nav-button-icon, .strp-window-skin-strip.strp-no-svg .strp-nav-hover.strp-nav-next .strp-nav-button-icon { background-image: url('http://www.histolab.co.kr/design/histolab/2019/js/strip/next.png'); } /* Reduce < > button size on narrow screens (iPhone 6 and smaller) */ @media all and (max-width: 375px) and (orientation: portrait), all and (max-height: 375px) and (max-width: 667px) { .strp-window-skin-strip .strp-nav { width: 48px; height: 60px; margin: 0 5px; margin-top: -30px; } /* < > */ .strp-window-skin-strip .strp-nav-previous .strp-nav-button-icon { background-image: url('http://www.histolab.co.kr/design/histolab/2019/js/strip/previous-small.svg'); } .strp-window-skin-strip .strp-nav-next .strp-nav-button-icon { background-image: url('http://www.histolab.co.kr/design/histolab/2019/js/strip/next-small.svg'); } /* IE7-8/no-svg (using a faded png) */ .strp-window-skin-strip.strp-no-svg .strp-nav-previous .strp-nav-button-icon { background-image: url('http://www.histolab.co.kr/design/histolab/2019/js/strip/previous-small-faded.png'); } .strp-window-skin-strip.strp-no-svg .strp-nav-next .strp-nav-button-icon { background-image: url('http://www.histolab.co.kr/design/histolab/2019/js/strip/next-small-faded.png'); } /* IE7-8/no-svg (unfaded png) */ .strp-window-skin-strip.strp-no-svg .strp-nav.strp-nav-previous:hover .strp-nav-button-icon, .strp-window-skin-strip.strp-no-svg .strp-nav-hover.strp-nav-previous .strp-nav-button-icon { background-image: url('http://www.histolab.co.kr/design/histolab/2019/js/strip/previous-small.png'); } .strp-window-skin-strip.strp-no-svg .strp-nav.strp-nav-next:hover .strp-nav-button-icon, .strp-window-skin-strip.strp-no-svg .strp-nav-hover.strp-nav-next .strp-nav-button-icon { background-image: url('http://www.histolab.co.kr/design/histolab/2019/js/strip/next-small.png'); } /* also reduce padding navbutton = 58 = 48 + (2 * 5 margin) closebutton = 48 */ .strp-no-overlap .strp-container { padding: 48px 58px; } .strp-no-overlap.strp-no-sides .strp-container { padding: 48px 0; } .strp-vertical .strp-no-overlap .strp-container { padding: 0 58px; } .strp-vertical .strp-no-overlap.strp-no-sides .strp-container { padding: 0 48px; } } /* X */ .strp-window-skin-strip .strp-close .strp-close-icon { background-image: url('http://www.histolab.co.kr/design/histolab/2019/js/strip/close.svg'); opacity: .8; } .strp-window-skin-strip .strp-close:hover .strp-close-icon { opacity: 1; } /* iOS 8.4.1 bug: when opacity changes it'll require 2 taps force a single opacity to fix this */ .strp-window-skin-strip.strp-mobile-touch .strp-close .strp-close-icon, .strp-window-skin-strip.strp-mobile-touch .strp-close:hover .strp-close-icon { opacity: 1; } /* IE7-8/no-svg */ .strp-window-skin-strip.strp-no-svg .strp-close .strp-close-icon { background-image: url('http://www.histolab.co.kr/design/histolab/2019/js/strip/close.png'); opacity: 1; } /***** 여기까지 비디오 보기 끝 ******************/ /** 인스타그램 **/ #instaPics {max-width:1200px;overflow: hidden;} img {width:181px:height:181px;} .insta-box {position: relative; width:181px; height:181px; float:left; margin:2px; border:none;} .image-layer { overflow: hidden; width:100%; height:100%;} .image-layer img { max-width:100% } .caption-layer { display:none; position: absolute; top:0; background : rgba(255.255.255.0.8); height:100%; width:100%; padding:10px; box-sizing: border-box; font-size: 9px; color:#333;} .insta-likes { float:right; } /* BASIC css end */