@charset "UTF-8"; /*@charset "euc-kr"; */
/************************************************************************
 * 최적화       : html5
 * 서비스       : dino
 * 최초작성일   : 170901
 * 작성자       : 박노성
************************************************************************/
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
.fast_change,
.btn,
.wrap,
.wrap .header,
.wrap .header .img_con,
.wrap .header .contact,
.wrap .header .contact:before,
.wrap .contents .left_contents ,
.wrap .contents .cells .filter span img,
.wrap .contents .cells .filter span:before,
.wrap .contents .cells .info .Intersection,
.wrap .contents .cells .info .we_list > span:after,
.wrap .contents .cells .info .we_list > span:before,
.wrap .contents .cells .info .more_subject .more_con,
.wrap .contents .cells .info .thumb_con > div,
.wrap .contents .cells .info .thumb_con > div:before,
.wrap .contents .cells .info .thumb_con > div:after,
.wrap .contents .cells .info .thumb_con > div > img.list,
.slick-dots li button:before,
.slick-current:after{ 
	transition: all 0.15s ease-in-out;
}
.sticker > a,
.sticks > a,
.wrap .contents .cells .info .graph,
.wrap .contents .cells .info .graph div { 
	transition: all 0.25s ease-in-out;
}
.wrap .contents .cells .info .thumb_con > div div.viewer {
	transition: height 0.15s ease-in-out;
}
i { height: 20px; line-height: 16px; margin:-2px 0 -3px 0; display: inline-block; *display: inline; *zoom: 1;  background: #00c8ff;  background: -webkit-linear-gradient(0deg, #00c8ff, #3399ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
html, body { font-family: 'Noto Sans KR'; font-weight: 400; color: #333; font-size: 12px; letter-spacing: -0.5px;}
html.oh, body.oh { overflow:hidden;}
body {
	background: rgb(255,255,255); 
	background:url(../img/bg_noise.png), linear-gradient(135deg, #aaddff 0%, #1ab0ff 100%) fixed; 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaddff', endColorstr='#1ab0ff',GradientType=1 ) fixed; 
}
body .ie{ position:absolute; width:300px; text-align:center; top:10px; left:50%; margin:0 0 0 -150px; color:#fff;}
.wrap_con { position: absolute; width: 100%; z-index:2; top:0; padding:40px 0 ; } 
.wrap { position: relative; width: 1000px; height: 1415px; margin: 0 auto; background:#fff; border-radius: 1px;	
	box-shadow: 10px 10px 25px rgba(8,36,51,0.25),
				20px 20px 50px rgba(15,72,102,0.25),
				30px 30px 75px rgba(23,107,153,0.25),
				40px 40px 90px rgba(31,143,204,0.25);
}
body.scale_on{
	overflow:hidden;
    transform: scale(0.708);
}
.poster{ position: relative; margin:30px 0 0 0; opacity:0;  filter: alpha(opacity=0); transform: scale(1.015); transition: all 0.75s ease-out;}
.poster.show{margin:0 0 0 0; opacity:1;  filter: alpha(opacity=1); transform: scale(1);}
.wrap_border{ height:5px; border-radius: 1px 1px 0 0;
	background:#1ab0ff;
	background: linear-gradient(to right, rgb(0,200,255) 0%,rgb(51,153,255) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00c8ff', endColorstr='#3399ff',GradientType=1 );
}
.wrap .header { position: relative; padding: 30px 0; margin: 0 60px; border-bottom: 1px dashed #ddd; border-color:#ddd; }
.wrap .header .img_con { position: relative; vertical-align: top; border: 3px solid #1ab0ff; border-top-color:#1ab0ff; border-left-color:#00c8ff; border-bottom-color:#1ab0ff; border-right-color:#39f; border-radius: 100px; display: inline-block; *display: inline; *zoom: 1;  opacity:0;  filter: alpha(opacity=0);}
.wrap .header .img_con.show { opacity:1;  filter: alpha(opacity=100);}
.wrap .header .img_con:before { position: absolute; content: ''; width: 100%; height: 100%; border-radius: 100px; /* box-shadow: inset 0 0 20px #fff; */}
.wrap .header .img_con img { width: 125px; border-radius: 100px; border: 5px solid #f7f7f7; }
.wrap .header .img_con .age { position: absolute; font-family: 'Noto Sans KR'; font-weight: 500; bottom: -3px; right: -3px; color: #fff; border-radius: 20px; font-size: 14px; line-height: 14px; border: 3px solid #fdfdfd; padding: 6px;
	background:#1ab0ff;
	background: linear-gradient(135deg, rgb(0,200,255) 0%,rgb(51,153,255) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00c8ff', endColorstr='#3399ff',GradientType=1 );
}
.wrap .header .name { font-family: 'Noto Sans KR'; font-weight: 500; font-size:18px; color: #39f; display: inline-block; *display: inline; *zoom: 1; margin: 0 0 0 30px; letter-spacing: 0.5px; }
.wrap .header .name > span { font-family: 'Bebas Neue'; color: #333; font-size: 60px; letter-spacing: 2px; height:42px; line-height:48px; display: inline-block; *display: inline; *zoom: 1; }
.wrap .header .name div  > span { font-family: 'Noto Sans KR'; font-weight: 400; display: block; font-size: 12px; letter-spacing: 0; line-height: 14px; width: 420px; color: #999; margin: 12px 0 0 0;}
.wrap .header .name div  > span b{ font-family: 'Noto Sans KR'; font-weight: 500; font-weight:normal;}
.wrap .header .contact { position: absolute; top: 30px; right: -60px; width: 260px; color: #666; background: #f3f3f3; padding: 20px 30px; letter-spacing: 0; }
.wrap .header .contact:before { position: absolute; content: ''; top: 0; left: -680px; width: 30px; height: 140px; background: #f3f3f3; }
.wrap .header .contact img { width: 20px; margin: 3px 10px 2px 0; }
.wrap .header .contact img.logo { width: 60px; position: absolute; top: 20px; right: 60px; margin: 0; display:none;}
.wrap .contents { padding: 30px 0; margin: 0 60px; position:relative; }
.wrap .contents .left_contents { height: 1058px; vertical-align: top; width: 619px; margin: 0 30px 0 0; border-right: 1px dashed #ddd; border-color:#ddd; display: inline-block; *display: inline; *zoom: 1; }
.wrap .contents .left_contents.tra {border-color: transparent;}
.wrap .contents .right_contents { position:absolute; top:30px; right:0; width: 230px; vertical-align: top;}
.wrap .contents .cells { margin: 0 0 60px 0; position: relative; }
.wrap .contents .cells.last { margin: 0;}
.wrap .contents .cells > .title { position: relative; font-family: 'Bebas Neue'; font-size: 42px; line-height: 35px; height: 30px; padding: 0 0 0 14px; margin: 0 0 30px 0; border-left: 2px solid #00c8ff; display: inline-block; *display: inline; *zoom: 1; }
.wrap .contents .cells > .title:before { position: absolute; content: ''; height: 100%; left: 2px; border-left: 2px solid #39f; }
.wrap .contents .cells > div > .subtitle { font-family: 'Noto Sans KR'; font-weight: 500; font-size: 18px; line-height: 18px; margin: 30px 0 10px 0; display: inline-block; *display: inline; *zoom: 1;  }
.wrap .contents .cells .info { vertical-align: top; position: relative; }
.wrap .contents .cells .info.times:before,
.wrap .contents .cells .info.times:after{ position: absolute; content: ''; left: 0; width: 570px; height: 15px; z-index: 1;}
.wrap .contents .cells .info.times:before{ top: -15px; background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);}
.wrap .contents .cells .info.times:after{ bottom: -15px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);}
.wrap .contents .cells .info .Intersection { position: absolute; font-family: 'Noto Sans KR'; font-weight: 500; border-radius: 100px; color: #fff; text-shadow: 0 0 10px #00c8ff; text-align: center; }
.wrap .contents .cells .info .subject { width: 50%; line-height: 24px; height: 24px; color: #666; display: inline-block; *display: inline; *zoom: 1; }
.wrap .contents .cells .info .more_subject { }

.wrap .contents .cells .info .more_subject .more_con { position: absolute; background: #fff; background: rgba(255,255,255,0.9); padding:0 0 30px 0; pointer-events:none;
    opacity: 0;
    filter: alpha(opacity=0);}
.wrap .contents .cells .info .more_subject .btn_more { position: absolute; left: 216px; top: -25px; border: 1px solid #ccc; border-radius: 3px; width: 12px; height: 12px; cursor:pointer;}
.wrap .contents .cells .info .more_subject .btn_more div { position: absolute; border: 1px solid #aaa; background:#aaa; left: 2px; top: 5px; width: 6px; }
.wrap .contents .cells .info .more_subject .btn_more div.pl { left: 5px; top: 2px; height: 6px; width: 0; }
.wrap .contents .cells .info .more_subject:hover .btn_more div.pl { display: none; }
.wrap .contents .cells .info .more_subject:hover .more_con { display: block; z-index:1; opacity: 1; filter: alpha(opacity=100);}

.wrap .contents .cells .info .graph { height: 5px; width: 50%; margin: 9px 0 10px 0; background: #ddd; display: inline-block; *display: inline; *zoom: 1; }
.wrap .contents .cells .info .graph.short { width: 0%;}
.wrap .contents .cells .info .graph div { position: relative; height: 5px; background: #39f;
	background: -moz-linear-gradient(left, rgb(0,200,255) 0%, rgb(51,153,255) 100%);
	background: -webkit-linear-gradient(left, rgb(0,200,255) 0%,rgb(51,153,255) 100%);
	background: linear-gradient(to right, rgb(0,200,255) 0%,rgb(51,153,255) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00c8ff', endColorstr='#3399ff',GradientType=1 );
    box-shadow: inset 0 0 2px 1px rgba(0,255,255,0.5);
}
.wrap .contents .cells .info .graph div.short { width: 0;}
.wrap .contents .cells .info .graph div:before { position: absolute; content: ''; width: 0; height: 0; top: -5px; right: -4px; border-top: 4px solid #aaa; border-bottom: 4px solid #fff; border-bottom: 4px solid transparent; border-left: 4px solid #fff; border-left: 4px solid transparent; border-right: 4px solid #fff; border-right: 4px solid transparent; }

.wrap .contents .cells .info .graph div.short:before { border-color:transparent !important; }
.wrap .contents .cells .info .none { opacity: 0; filter: alpha(opacity=0); }
.wrap .contents .cells .info:hover .Intersection.none {  opacity: 1; filter: alpha(opacity=100);}
.wrap .contents .cells .info:hover .Intersection.design { padding: 32px 33px 58px !important; }
.wrap .contents .cells .rader_chart { width: 100%; height: 200px; position: absolute; }



.wrap .contents .cells .info .we_list{ padding-left: 209px !important; width: 382px; vertical-align:top; letter-spacing: 0; line-height: 18px; display: inline-block; *display: inline; *zoom: 1;}

.wrap .contents .cells .info.times .we_list{ padding: 15px 0; margin: -15px 0; max-height: 388px; overflow: auto;}

.wrap .contents .cells .info .we_list > div{ position: relative; font-family: 'Noto Sans KR'; font-weight: 500; font-size: 18px; color:#39f;}
.wrap .contents .cells .info .we_list > div:after{ position: absolute; content: ''; width: 4px; height: 4px; border: 2px solid #999; border-color:#999; border-radius: 10px; top:5px; left:-37px;}
.wrap .contents .cells .info .we_list > div .time_line{ position: absolute; font-size: 16px; color:#999; margin: 0 0 0 -209px; letter-spacing: -1px;}
.wrap .contents .cells .info .we_list > span{ position: relative; display: inline-block; *display: inline; *zoom: 1; color:#999; margin: 4px 0 18px 0; line-height: 16px; }
.wrap .contents .cells .info .we_list > span s{ color: #ccc;}
.wrap .contents .cells .info .we_list > span .sm{ margin-left: 5px;}
.wrap .contents .cells .info .we_list > span.last{ margin: 4px 0 0 0;}
.wrap .contents .cells .info .we_list > span:before{ position: absolute; content: ''; height: 100%; border: 1px solid #ddd; border: 1px dashed #ddd; border-color:#ddd; top: -7px; left: -34px; padding: 0 0 26px 0;}
.wrap .contents .cells .info .we_list > span.last:before{ border:none;}


.wrap .contents .cells .info .we_list > div .position{ color: #666; margin: 5px 0 -3px 8px; padding: 0 0 0 8px; height: 10px; font-size: 12px; line-height: 11px; vertical-align: top; border-left: 1px solid #ccc; display: inline-block; *display: inline; *zoom: 1;}

.wrap .contents .cells .filter { position:absolute; top:0; right:30px;}
.wrap .contents .cells .filter span{ position:relative; display: inline-block; *display: inline; *zoom: 1; margin:0 0 0 3px; cursor: pointer;}
.wrap .contents .cells .filter span.selected{}
.wrap .contents .cells .filter span:before{ position:absolute; top:0; left:0; content:''; border-top:0px solid #39f; border-left:0px solid #39f; border-bottom:0px solid transparent; border-right:0px solid transparent;}
.wrap .contents .cells .filter span.selected:before{ border-top:3px solid #39f; border-left:3px solid #39f; border-bottom:3px solid transparent; border-right:3px solid transparent;}
.wrap .contents .cells .filter span img{width:20px; padding:5px; box-shadow: inset 0 0 0 1px #aaa; border-radius:50px; opacity:0.65;  filter: alpha(opacity=0.65);}
.wrap .contents .cells .filter.active span img{opacity:0.35;  filter: alpha(opacity=0.35);}
.wrap .contents .cells .filter span:hover img{ opacity:1; filter: alpha(opacity=100); box-shadow: inset 0 0 0 2px #666;}
.wrap .contents .cells .filter span.selected img{ opacity:1; filter: alpha(opacity=100); box-shadow: inset 0 0 0 2px #39f;}
.wrap .contents .cells .filter span:active img{  transform: scale(0.9);}


.wrap .contents .cells .info .thumb_con{ position:absolute; width:592px; height:222px;}
.wrap .contents .cells .info .thumb_con .btn_close{ position: absolute; z-index: 2; top: -66px; left: 334px;}
.wrap .contents .cells .info .thumb_con > div { position: relative; width:72px; height:72px; margin:0 2px 2px 0; float:left; cursor: pointer;  opacity:1; filter: alpha(opacity=100); transform: scale(1);}
.wrap .contents .cells .info .thumb_con > div.sticks { opacity:0; filter: alpha(opacity=0);  transform: scale(0.5);
}
.wrap .contents .cells .info .thumb_con > div.select {}
.wrap .contents .cells .info .thumb_con > div:after { position:absolute; top:0; left:0; content:''; border-top:0px solid #39f; border-left:0px solid #39f; border-bottom:0px solid transparent; border-right:0px solid transparent; z-index:1;}
.wrap .contents .cells .info .thumb_con > div.select:after { border-top:5px solid #39f; border-left:5px solid #39f; border-bottom:5px solid transparent; border-right:5px solid transparent;}
.wrap .contents .cells .info .thumb_con > div.select:hover:after {  border-top:0px solid #39f; border-left:0px solid #39f; border-bottom:0px solid transparent; border-right:0px solid transparent;}

.wrap .contents .cells .info .thumb_con > div:hover { z-index:3;}
.wrap .contents .cells .info .thumb_con > div:hover img.list{   transform: scale(1.2);}
.wrap .contents .cells .info .thumb_con > div.view{ cursor: default;  z-index:4;}	
.wrap .contents .cells .info .thumb_con > div.view:hover img.list{ transform: scale(1); }	
.wrap .contents .cells .info .thumb_con > div.ab-light{ background:none !important; }	
.wrap .contents .cells .info .thumb_con > div.ab-dark{ background:none !important;}	
.wrap .contents .cells .info .thumb_con > div:before { position: absolute; content: ''; width:72px; height:72px; box-shadow:inset 0 0 0 0 #39f; z-index: 1; border-radius: 2px; background:rgba(255,255,255,0.25);}	
.wrap .contents .cells .info .thumb_con.filtering > div:before { background:rgba(255,255,255,0.8);}	
.wrap .contents .cells .info .thumb_con.filtering > div.select:before { background:rgba(255,255,255,0.25);}	
.wrap .contents .cells .info .thumb_con > div:hover:before { box-shadow:inset 0 0 0 3px #1ab0ff; background:rgba(255,255,255,0) !important; transform: scale(1.2);}
.wrap .contents .cells .info .thumb_con.view > div:before{ background:rgba(255,255,255,0.8);}
.wrap .contents .cells .info .thumb_con > div.view:before{ z-index: 4;box-shadow:inset 0 0 0 0 #1ab0ff; background:rgba(255,255,255,0);}	
.wrap .contents .cells .info .thumb_con > div > img.list{width:72px; height:72px; position:relative; border-radius: 2px; filter: gray; filter: grayscale(100%);}
.wrap .contents .cells .info .thumb_con > div > img.list.view{ z-index:4;}
.wrap .contents .cells .info .thumb_con > div:hover > img.list{ filter: none; filter: grayscale(0%);}
.wrap .contents .cells .info .thumb_con > div.view > img.list{ width:144px; height:144px; border-radius: 3px; margin: -36px 0 0 -36px; filter: none; filter: grayscale(0%); box-shadow: 0 0 1px rgba(0,0,0,0.25); }
.wrap .contents .cells .info .thumb_con > div.ab-dark.view  > img.list{  box-shadow: 0 0 1px rgba(255,255,255,0.25); }
.wrap .contents .cells .info .thumb_con > div div.viewer{ position: absolute; top: -46px; left: -46px; border-radius: 4px; width: 400px; height: 260px; height:164px; z-index: 2; display:none; overflow: hidden; box-shadow: 0 0 2px rgba(0,0,0,0.025), 20px 20px 80px rgba(0,0,0,0.1), 10px 10px 20px rgba(0,0,0,0.25); }
.wrap .contents .cells .info .thumb_con > div div.viewer.load{height: 202px; margin:0 0 10px 0;}
.wrap .contents .cells .info .thumb_con > div div.viewer.load:after{ position: absolute; content: "Loading..."; text-align: center; width: 380px; bottom: 0; z-index: 2; border-top: 1px solid #ccc; border-top: 1px solid rgba(0,0,0,0.15); padding: 10px 0 0 0; margin: 10px;}
.wrap .contents .cells .info .thumb_con > div.ab-dark  div.viewer.load:after{ color: #aaa;}
.wrap .contents .cells .info .thumb_con > div.ab-dark div.viewer.load:after{ border-top: 1px solid rgba(255,255,255,0.15);}
.wrap .contents .cells .info .thumb_con > div div.viewer.large{height: 285px; margin:0 0 10px 0;}
.wrap .contents .cells .info .thumb_con > div div.viewer.large .port_img{position: absolute; top: 154px; display:none; border-top:1px solid #ccc; border-top:1px solid rgba(0,0,0,0.15); padding:5px 0 0 0; margin:10px 0 0 0; left: 10px; width: 380px; height: 86px; z-index: 2;}

.wrap .contents .cells .info .thumb_con > div.ab-dark  div.viewer.large .port_img{ border-top:1px solid rgba(255,255,255,0.15); }
.wrap .contents .cells .info .thumb_con > div div.viewer.large .port_img div.port_img_con{ margin:5px; position:relative;}
.wrap .contents .cells .info .thumb_con > div div.viewer.large .port_img div.port_img_con img{ height: 86px; border-radius: 2px;}

.wrap .contents .cells .info .thumb_con > div div.viewer:before{position: absolute; content: ''; width:100%; height:100%; top:0; left:0;z-index:2;}

.wrap .contents .cells .info .thumb_con > div div.viewer:before{
	background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,0.35) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d9ffffff', endColorstr='#a6ffffff',GradientType=1 );
}
.wrap .contents .cells .info .thumb_con > div.ab-dark div.viewer:before{
	background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 25%,rgba(0,0,0,0.35) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d9000000', endColorstr='#a6000000',GradientType=1 );
}
.wrap .contents .cells .info .thumb_con > div div.viewer div.blur_bg_con{
    /*
	opacity: 0.75;
    filter: alpha(opacity=75);
	*/
}
.wrap .contents .cells .info .thumb_con > div div.viewer div.blur_bg_con .blur_bg{position: absolute; width: 420px; top: -118px; left: 70px; z-index:1; filter: blur(6px);}
.wrap .contents .cells .info .thumb_con > div div.viewer .list_no{ display:none;}
.wrap .contents .cells .info .thumb_con > div .p_link{ position: absolute; top: 71px; left: 71px; background: #fff; border-radius: 3px; padding:5px; z-index:4; display:none;box-shadow: 0.5px 0.5px 2px rgba(0,0,0,0.175);}
.wrap .contents .cells .info .thumb_con > div .p_link img{ width:20px; height:20px;}
.wrap .contents .cells .info .thumb_con > div .port_data{ position: absolute; top: 10px; left: 164px; z-index: 3; text-shadow: 0 0 10px rgba(255,255,255,0.5);}
.wrap .contents .cells .info .thumb_con > div .port_data > .subtitle{}
.wrap .contents .cells .info .thumb_con > div .port_data > .title{ font-family: 'Bebas Neue'; font-size: 30px; line-height: 28px; color:#333;}
.wrap .contents .cells .info .thumb_con > div .port_data > .client{}
.wrap .contents .cells .info .thumb_con > div .port_data > .completed{}
.wrap .contents .cells .info .thumb_con > div .port_data > .tools{}
.wrap .contents .cells .info .thumb_con > div .port_data > .scope{}
.wrap .contents .cells .info .thumb_con > div .port_data > * > span{ display: inline-block; *display: inline; *zoom: 1;}

.wrap .contents .cells .info .thumb_con > div.ab-dark .port_data{ color:#bbb;text-shadow: 0 0 10px rgba(0,0,0,0.5);}
.wrap .contents .cells .info .thumb_con > div.ab-dark .port_data > .title{ color:#ddd;}

.wrap .contents .cells .info .thumb_con > div .port_data > .client,
.wrap .contents .cells .info .thumb_con > div .port_data > .completed,
.wrap .contents .cells .info .thumb_con > div .port_data > .tools,
.wrap .contents .cells .info .thumb_con > div .port_data > .scope{margin: 0 0 0 70px; line-height: 13px; font-size:11px; opacity:0;  filter: alpha(opacity=0);}
.wrap .contents .cells .info .thumb_con > div .port_data > .client:before,
.wrap .contents .cells .info .thumb_con > div .port_data > .completed:before,
.wrap .contents .cells .info .thumb_con > div .port_data > .tools:before,
.wrap .contents .cells .info .thumb_con > div .port_data > .scope:before{ position:absolute; left:0; font-family: 'Noto Sans KR'; font-weight: 500; color:#333; }
.wrap .contents .cells .info .thumb_con > div .port_data > .client:before{ content:'Client';}
.wrap .contents .cells .info .thumb_con > div .port_data > .completed:before{ content:'Completed';}
.wrap .contents .cells .info .thumb_con > div .port_data > .tools:before{ content:'Tools';}
.wrap .contents .cells .info .thumb_con > div .port_data > .scope:before{ content:'Scope';}

.wrap .contents .cells .info .thumb_con > div.ab-dark .port_data > .client:before,
.wrap .contents .cells .info .thumb_con > div.ab-dark .port_data > .completed:before,
.wrap .contents .cells .info .thumb_con > div.ab-dark .port_data > .tools:before,
.wrap .contents .cells .info .thumb_con > div.ab-dark .port_data > .scope:before{ color:#ddd; }

.wrap .contents .cells .info .thumb_con > img { width:72px; height:72px; margin:0 2px 2px 0; float:left; pointer-events:none; }
.wrap .footer { text-align: center; color: #999; position:relative; font-family: 'Noto Sans KR'; font-weight: 300;}
.wrap .footer div { height: 1px; width: 30px; background: #ccc; margin: 5px auto 0; position: relative; z-index: 1; }
.wrap .footer span { color:#fff; position:absolute; width:100px; top:146px; left:50%; margin:0 0 0 -50px; padding: 0 0 40px 0; line-height: 1em; display: inline-block; *display: inline; *zoom: 1; }
.wrap .footer span img{  display: block; margin: -17px auto 10px; width:101px;}
.wrap .footer b{ font-weight: normal; font-family: 'Noto Sans KR'; font-weight: 500;}


.wrap .cover_fold { position: absolute; width: 100%; height: 100%; top: 0; background: url(../img/cover_fold.png) 0 0 no-repeat; background-size: cover; pointer-events: none; box-shadow: inset 1px 1px 1px rgba(255,255,255,0.25); z-index:1;} 
.wrap .cover_noise { position: absolute; width: 100%; height: 100%; top: 0; pointer-events: none; z-index:1; background:url(../img/bg_noise.png), linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(0,0,0,0.025) 100%); } 


.z_viewer_con { position:fixed; top:0; height:100%; width:100%; z-index:999; display:none; text-align:center; overflow:auto; -webkit-overflow-scrolling:touch;}
.z_viewer_con .z_viewer_bg{ position:fixed; background:rgba(0,0,0,0.9); height:100%; width:100%; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);  }
.z_viewer_con .z_viewer { position: relative; z-index:1; width:auto; max-width:1000px; margin:30px auto 100px auto; display: inline-block; *display: inline; *zoom: 1;}
.z_viewer_con .z_viewer img{ max-width:1000px; 
 box-shadow: 0 0 2px rgba(0,0,0,0.025),
			 20px 20px 80px rgba(0,0,0,0.1),
			 10px 10px 20px rgba(0,0,0,0.25);}
			 
.z_viewer_con .btn{ position: fixed; bottom: 30px; left: 50%; z-index: 2; cursor:default; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); background: rgba(255, 255, 255, 0.15);}	
.z_viewer_con .btn.active{ cursor:pointer; background: rgba(255, 255, 255, 1);}	
.z_viewer_con .btn_a_left{   margin:0 0 0 -70px;}	
.z_viewer_con .btn_close{  margin:0 0 0 -20px; cursor:pointer;}	
.z_viewer_con .btn_a_right{ margin:0 0 0 30px;}			
 

table#port_data_list{ display: none;}

 
.btn{ background: #fff; width: 20px; height: 20px; padding: 10px; border-radius: 40px; cursor: pointer;
	box-shadow: 0 0 2px rgba(0,0,0,0.025),
				20px 20px 80px rgba(0,0,0,0.1),
				10px 10px 20px rgba(0,0,0,0.25);
}
.btn.active:hover{
	box-shadow: 0 0 2px rgba(0,0,0,0.025),
				20px 20px 80px rgba(0,0,0,0.1),
				2px 2px 4px rgba(0,0,0,0.35)}
.btn.active:active{
	background: #ddd;
    transform: scale(0.9);
	box-shadow: 0 0 2px rgba(0,0,0,0.025),
				20px 20px 80px rgba(0,0,0,0.1),
				0px 0px 1px 1px rgba(0,0,0,0.1);
	}


.sticker, .sticker s, .sticker:before, .sticker:after{ color:transparent !important; background:transparent !important; position:relative; border-left:none !important; box-shadow:none !important; text-shadow:none; pointer-events: none; border-color:transparent !important;}
.sticker > a{ position:absolute; display:block; height:100%; width:0%; top:0; left:0; z-index:1;}
.sticker > img{opacity: 0 !important; filter: alpha(opacity=0) !important;}
.sticker.st_black a{ background:#333;}
.sticker.st_blue a{background:#1ab0ff;}
.sticker.st_charcoal a{background:#666;}
.sticker.st_gray a{background:#999;}
.sticker.st_white a{ background:#eee;}
.sticks{  position:relative; pointer-events: none;}
.sticks.st_black a{ background:#333;}
.sticks.st_blue a{background:#1ab0ff;}
.sticks.st_charcoal a{background:#666;}
.sticks.st_gray a{background:#999;}
.sticks.st_white a{ background:#eee;}
.sticks > a{position:absolute; display:block; height:100%; width:100%; top:0; left:0; z-index:1;}
.stick_hide{opacity: 0; filter: alpha(opacity=0);}
.stick_pointer{pointer-events:none;}