/* import_base */
@import url("font.css");
@import url("common.css");
@import url("table.css");

/* common */
*{font-family:'Pretendard', 'Nanum Gothic', 'Noto Sans KR', Sans-serif;}
table, tbody, tfoot, thead, tr, th, td{border-collapse:separate;border-spacing:0;table-layout:auto;font-weight:normal;}
/* 6 */* html table, tbody, tfoot, thead, tr, th, td {border-collapse:collapse;}
/* 7 */* + html table, tbody, tfoot, thead, tr, th, td{border-collapse:collapse;}
legend{display:none;position:absolute;visibility:hidden;}
caption{visibility:hidden;width:0px;height:0px;overflow:hidden;font-size:0px;margin:0px;padding:0px;line-height:0px;}
table, div {font-family: 'Pretendard', 'Nanum Gothic', 'Noto Sans KR', Sans-serif; color:#333333; line-height:140%; font-size:12px; margin:0px; padding:0px;}
body, div, span, applet, object, iframe, h1,  h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, font,  img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, ol,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, button{margin:0;padding:0;outline:0;font-weight:normal;list-style:none;}
select {font-size:15px; padding:3px; }
fieldset,img,abbr,acronym {border:0 none;}
li img, td img {line-height:0;}
ol,ul {list-style:none;}
/*caption,th {text-align:left;}*/
address,caption,cite,code,dfn,em,th,var,input,textarea {font-size:14px;font-weight:normal;}
h1,h2,h3,h4,h5,h6,h7,h8 {font-size:140%;font-weight:normal;}
* html input {margin:0; padding:3px; } 
* html input.radio, * html input.check {margin:0 0 0 0;}










/*a link*/
a:link{color:#000000;text-decoration:none; }
a:visited{color:#000000;text-decoration:none;}
a:active{color:#000000;text-decoration:none;}
a:hover{color:#000000; }
a.menu img { border-width:0px; display:block; }
a.menu img.rollover { display:none; }
a.menu:hover img { display : none;}
a.menu:hover img.rollover { display:block; }

a.style1:link{color:#fff;text-decoration:none;font-weight:600; font-family:'Montserrat', 'Noto Sans KR', Sans-serif, "µ¸¿ò", dotum, "±¼¸²";}
a.style1:visited{color:#fff;text-decoration:none;font-weight:600; font-family:'Montserrat', 'Noto Sans KR', Sans-serif, "µ¸¿ò", dotum, "±¼¸²";}
a.style1:active{color:#fff;text-decoration:none;font-weight:600; font-family:'Montserrat', 'Noto Sans KR', Sans-serif, "µ¸¿ò", dotum, "±¼¸²";}
a.style1:hover{color:#ffd716;text-decoration:none;font-weight:600; font-family:'Montserrat', 'Noto Sans KR', Sans-serif, "µ¸¿ò", dotum, "±¼¸²";}
a.style1.menu img { border-width:0px; display:block; }
a.style1.menu img.rollover { display:none; }
a.style1.menu:hover img { display : none;}
a.style1.menu:hover img.rollover { display:block;}

a.style2:link{color:#333;text-decoration:none;font-weight:600; font-family:'Montserrat', 'Noto Sans KR', Sans-serif, "µ¸¿ò", dotum, "±¼¸²";}
a.style2:visited{color:#333;text-decoration:none;font-weight:600; font-family:'Montserrat', 'Noto Sans KR', Sans-serif, "µ¸¿ò", dotum, "±¼¸²";}
a.style2:active{color:#333;text-decoration:none;font-weight:600; font-family:'Montserrat', 'Noto Sans KR', Sans-serif, "µ¸¿ò", dotum, "±¼¸²";}
a.style2:hover{color:#f05c1c;text-decoration:none;font-weight:600; font-family:'Montserrat', 'Noto Sans KR', Sans-serif, "µ¸¿ò", dotum, "±¼¸²";}
a.style2.menu img { border-width:0px; display:block; }
a.style2.menu img.rollover { display:none; }
a.style2.menu:hover img { display : none;}
a.style2.menu:hover img.rollover { display:block;}

.red { color:#ff0000; }
.blank { visibility:hidden; }
.blue { color:blue; }
.pink { color:#d5084c; }

/*full WRAP*/
body {  z-index:1; min-width:1280px }
.body_bg{ width:100%; display:block; }
#bodyMain { width:100%;  z-index:1;}
#bodyWrap { width:100%; z-index:2; }

/*top_banner*/
.wrap_top_banner {  width:100%; height:87px; position:relative;  display:block; background:url('/img/top_banner_bg.gif') repeat;}
.top_banner {   width:1280px; display:block;  margin:0 auto; }

/* middle_bar*/
#MiddleBar { display:block; float:right; width:1280px;  background:url("/main/img/MiddleBar_bg.gif") repeat-x; }
#MiddleBar li {float:left; padding:12px 0 10px 0;  }
#MiddleBar li:first-child { padding-left:10px; }

/* middle_banner*/
.middle_banner { float:right; margin-top:15px; margin-bottom:10px;}

/*ž¶óÀÎ(»ç¿ëÀÚÀνÄÄÚ¸àÆ®+·Î±×ÀÎ)*/
.topLine_wrap { width:100%; padding:10px 0 25px 0;}
#topLine { width:1280px; display:block; overflow:hidden; padding:5px 0 ;margin:0 auto; color:#6d6d6d;}
#topLine .topline_comment { float:left; } 


#topLine .topline_link a {  float:left; font-size:12px; }
#topLine .topline_link a img { vertical-align:top;}
#topLine .topline_link a span { position:absolute; top:8px; margin-left:5px; color:#2E3080;}

#topLine .topline_login { padding-top:2px;float:right; font-size:12px; color:#000; letter-spacing:-1px;} 
.topline_login a {  padding:0 5px; position:relative;}
.topline_login a b { font-size:13px; color:#000;}

#txtTopUserID { width:100px; font-size:13px; border:1px solid #ccc; }
#txtTopPassword { width:100px; font-size:13px; border:1px solid #ccc; }

#topLine .btn_orange { font-size:12px; padding: 2px 5px; background-color:#f66c30; color:#fff; text-align:center; display:block;}
#topLine .btn_gray { font-size:12px; padding: 2px 5px; margin-left:3px; background-color:#9e9e9e; color:#fff; text-align:center; display:block; }
#topLine .btn_green  { font-size:12px; padding: 2px 5px; margin-left:3px; background-color:#a0b655; color:#fff; text-align:center; display:block; }
#topLine .btn_orange:hover { background-color:#e86227; }
#topLine .btn_gray:hover { background-color:#8a8a8a; }
#topLine .btn_green:hover { background-color:#8fa543; }
#topLine .top_guide { width:460px;}
._bar > td > a { border-left:1px solid #ddd; padding:0 8px;}
._bar > td:first-child > a:first-child { border-left:0;}


.sidebar { width:105px; position:fixed; height:100%; background-color:#fff; right:0; z-index:9999; border-left:1px solid #ededed;}
.sidebar ul li { text-align:center; }
.sidebar ul li a:hover { background-color:#e6e6e6; }
.sidebar ul li a { padding:15px 10px; display:block; overflow:hidden; border-top:1px solid #ededed;}
.sidebar ul li:first-child a { padding-top:25px; border-top:0;}



.sidebar_btn {  }
.sidebar_btn a {     
	position: absolute;
    bottom: 35%;
    right: 106px;
    padding: 0px 20px;
    font-size: 15px;
    vertical-align: middle;
    line-height: 55px;
    border-top-left-radius: 10%;
    border-bottom-left-radius: 10%;}
a.sidebar_on {
	background-color: #000000;
    color: #fff;
    z-index: 9999;}
a.sidebar_off {
    background-color: #00c0e4;
    color: #ffffff;
    z-index: 9999;
    display: none;}

.sidebar_btn a:hover {
	background-color: #43d6f2;
    color: white;}



.sidebar div>b { border-top:1px solid #ededed; padding:10px 10px; display:block;  overflow:hidden; }
.sidebar div>b a {  padding:5px 0; float:left; text-align:left; display:block;  overflow:hidden; width:100%; }
.sidebar div>b a span{  font-size:10px; color:#6d6d6d;  }


.sidebar_kakao  {background-color:#ffeb5a; }
.sidebar_kakao p { color:#231916; font-weight:bold; }
.sidebar_kakao a:hover {  }

.sidebar_webhard  {background-color:#dbe1f2; }
.sidebar_webhard p { color:#2e3283; font-weight:bold; }
.sidebar_webhard a:hover {  }


.wrap_top_banner { display:none; }
.event_latest { background-color:#ededed; width:172px; height:413px; overflow:hidden; padding:5px 15px; }
.event_latest li { list-style:none; padding-top:8px; padding-bottom:8px; border-top:1px solid #d1d1d1; letter-spacing:-0.1em; font-size:14px; font-weight:bold; color:#707070;}
.event_latest li a {  letter-spacing:-0.1em; font-size:14px; font-weight:bold; color:#000;}
.event_latest li:first-child {border-top:0px;}
.event_latest li.latest_sale { background:url('/img/mark_sale2.png') #ededed no-repeat; background-position:100% 50%; }
.event_latest li.latest_new { background:url('/img/mark_new2.png') #ededed no-repeat; background-position:100% 50%; }
.month_event { width:85px; height:65px; padding:20px 10px; overflow:hidden; margin:0 auto;  display:block; border-radius:70px; background-color:#2d3e50; color:yellow; text-align:center;  }
.month_event a p { font-size:17px; color:yellow; padding-top:5px; font-weight:bold;}
.month_event a span { color:#fff; font-size:30px; font-weight:bold; }
.ui-accordion .ui-accordion-header .ui-accordion-header-icon {display:none;}

.d_btn:hover {
    color: #464646;
    text-decoration: none;
    background-color: #e5e5e5;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e5e5e5));
    background: linear-gradient(to bottom, #fff, #e5e5e5);
}
.d_btn {
    display: inline-block;
    padding: 0.5em 1em;
    margin: 0.4em 0.15em;
    border: 1px solid #ccc;
    border-color: #dbdbdb #d2d2d2 #b2b2b2 #d2d2d3;
    cursor: pointer;
    color: #464646;
    vertical-align: middle;
    line-height: 1.25em;
    background-color: #f2f2f2;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f2f2f2));
    background: linear-gradient(to bottom, #fff, #f2f2f2);
}
.s_btn {
    display: inline-block;
    padding: 0.5em 1em;
    margin: 0.4em 0.15em;
    border: 1px solid #ccc;
    border-color: #dbdbdb #d2d2d2 #b2b2b2 #d2d2d3;
    cursor: pointer;
    color: #464646;
    vertical-align: middle;
    line-height: 1.25em;
    background-color: #f2f2f2;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f2f2f2));
    background: linear-gradient(to bottom, #fff7a5, #fff47e);
}

.s_btn:hover {
    color: #000000;
    text-decoration: none;
    background-color: #e5e5e5;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e5e5e5));
    background: linear-gradient(to bottom, #fff7a5, #e8d400);
}

.top {
		display:inline-block;
		width:100%;
		height:380px;
		text-align:center;
		color:#fff;
		}

.top dl { width:1280px; margin:0 auto; display:block; overflow:hidden; margin-top:260px; text-align:left; color:#000;}
.top dl dt { font-size:40px; padding:20px 0;}
.top dl dd { font-size:15px; word-break:keep-all; line-height:30px;}

		.hov-anim-box .animated {
  display: none
}

.hov-anim-box:hover .animated {
  display: inline
}

.hov-anim-box:hover .static {
  display: none
}




/*ºü¸¥ÁÖ¹®¹öÆ°*/
#quickOrder { position:relative; top:35px; z-index:99;}

#quickOrder a { 
				width:49px;
				background-position:0px 0px;
				cursor:pointer;
				height:180px;
				background:url("/img/q_menu.gif");
				float:left;
				display:none;
				}
				
#quickOrder a:hover { background-position:0 180px;}

a.btn_event {	
				padding:3px 5px;
				color:#ffffff;
				font-size:11px;
				font-weight:bold;
				background-color:#333333;
				border-top:1px solid #cccccc;
				border-left:1px solid #cccccc;
				border-right:2px solid gray;
				border-bottom:2px solid gray;
			}

/* Ç÷ÎÆø޴ºQuick */
#quickWrap { position:absolute; top:138px; left:55%; height:0px; display:none;}
#quickWrap #quick { position:relative; left:528px; }
#quickWrap .imgteaser a {display:block; overflow:hidden; margin:5px 0;}
#quick ul li a { color:#585858;}
#quick ul li.box a{ 
					padding:5px 0;
					background-color:#fafafa;
					border-left:1px solid #cecece;
					border-right:1px solid #cecece;
					border-bottom:1px solid #cecece;
					clear:both;
					overflow:hidden;
					position:relative;
					clear:both;
					display:block;
					text-align:center;
					width:48px;
					font-size:11px;
					}
#quick ul li.box a:first-child{ 
					border-top:1px solid #cecece;
					}
#quick ul li.box a:hover { background-color:#ededed; }


/*¸Þ´ºÇì´õ(·Î°í+¸Þ´º)*/
#headerWrap { width:1280px; height:105px; margin:0 auto; display:block; overflow:hidden; }

.top_logo { float:left; margin-top:15px;}
.navi {   margin-left:0px; overflow:hidden; display:block; }
.navi li { float:left;    font-weight:600;}
.navi li:fitst-child { }
.navi li a {  color:#000000;  padding:24px; margin-top:16px; font-size:18px; font-weight:600;   display:block; overflow:hidden;}
.navi li a:hover { color:#6BC8CE;}
.header_banner { float:right; margin-top:35px; display:block; clear:both; text-align:right; }
.header_banner a {  vertical-align:top;}



.s_navi { float:right; margin-top:10px; width:50px; display:none;}
.s_navi li { font-size:11px; list-style:none; line-height:19px;}
.s_navi li a { color:#f26122; text-decoration:underline; }
.s_navi li a:hover { color:#71cad2; }

.call_number a { border:0; padding:0; margin:0; display:block; overflow:hidden; clear:both;}
.call_number a img { border:0; padding:0; margin:0 5px 0 0;  }

.customer_box { padding:5px 7px; float:right; border:1px solid #eee; font-size:11px; }


.review {margin-top:35px; width:320px;  display:block; overflow:hidden;}
.review li {}
.review li a { border: 1px solid #cecece; float:left;  margin-top:20px; width:120px; padding:10px; margin-left:10px; font-size: 16px; text-align:center; font-weight:bold;}

.review li:hover a{ cursor:pointer; color:#6BC8CE;  display:block; overflow:hidden;}
/* bestGoods */

ul.bestGoods { width:1280px; margin:0 auto; display:block; overflow:hidden;  box-sizing: border-box;}
ul.bestGoods li {

	float:left; width:386px; height:550px; text-align:left; margin:20px; cursor:pointer;

    display: inline-block;
    position: relative;
    border-radius: 4px;

    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    transition: transform 300ms ease-in-out;

	background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover


}



ul.bestGoods li img {
width:380px;
height:305px;
  position:absolute;
  left:0;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}

ul.bestGoods li:hover img.top{
  opacity:0;
}



ul.bestGoods li::after {

    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    top: 0;
    left: 0;
    content: "";
    border-radius: 4px;
    box-shadow: 0px 5px 20px -4px rgba(0,0,0,0.75);
    opacity: 0;
    transition: opacity 100ms ease-in-out;
}



ul.bestGoods li:hover::after {
    opacity: 1;
}




ul.bestGoods dl { padding:20px; margin-top:300px; }
ul.bestGoods dl dt {font-size:22px; font-weight:bold; padding:25px 0 15px 0; color:#666666; }
ul.bestGoods dl dd {font-size:15px; line-height:24px; color:#858585; }
ul.bestGoods p { color:#1D93A1; padding:20px 20px 50px 20px; text-decoration:underline;font-size:15px; font-weight:bold; }
ul.bestGoods li img {width:386px;}

/* °í°´¼¾ÅÍ */
#customerMain {width:1280px; margin:0 auto; }
#customerMain .contents_cs { padding:18px 0 27px 0;  border-bottom:3px solid #333;   color:#000000;  }
#customerMain .contents_cs dt {float:left; font-size:20px; font-weight:bold;}
#customerMain .contents_cs dd {float:right; font-size:11px; color:#000000;}


.customerMain_wrap { width:100%; display:block; overflow:hidden; border-top:1px solid #cecece; padding-top:25px;}

.customer_value{ 
					font-family:'Dotum', 'Gulim'; 
					font-size:11px; 
					position:absolute; 
					border:1px solid #878787;
					border-radius:5px;
					background:#fff; 
					padding:10px 10px;
					letter-spacing:-0.1em;
					width:200px; 
					line-height:18px;
				
				}

.customer_value b { letter-spacing:0em; }


/* °øÁö»çÇ× */
#ContentsNotice, #ContentsMediaNotice { margin:0 auto;  clear:both; letter-spacing:-0.1em;}
#ContentsNotice a,#ContentsMediaNotice a { color:#000; font-size:14px;  line-height:190%; }
#ContentsNotice a:hover { color:#000; }
#ContentsMediaNotice a:hover { color:#000; }

#ContentsNotice .notice_title { padding:18px 0 27px 0;  border-bottom:3px solid #000000; margin-bottom:3px;  color:#000000;}
#ContentsNotice .notice_title dt {float:left; font-size:20px;  font-weight:bold;}
#ContentsNotice .notice_title dd {float:right; font-size:11px; }



/*¹ÎÆ® Äü¹è³Ê*/
#bottomBannerWrap { width:100%; height:175px; clear:both; border-top: 1px solid #cecece;}
#bottomBannerCover { position:relative; width:1280px; margin:0 auto; display:block; }
.bottomBanner { width:1280px;}
.bottomBanner li { text-align:center; height:155px;  width:119px; float:left; font-size:13px; padding-top:20px; overflow:hidden; color:#848484; cursor:pointer;}
.bottomBanner li:hover { color:#ffffff; }

.bottomBanner li.bn01 {   background:url('/img/bottom_banner_01_off.png') no-repeat 18px 10px; }
.bottomBanner li.bn02 {  background:url('/img/bottom_banner_02_off.png') no-repeat 18px 10px; }
.bottomBanner li.bn03 {  background:url('/img/bottom_banner_03_off.png') no-repeat 18px 10px; }
.bottomBanner li.bn04 {  background:url('/img/bottom_banner_04_off.png') no-repeat 18px 10px; }
.bottomBanner li.bn05 {  background:url('/img/bottom_banner_08_off.png') no-repeat 18px 10px; }
.bottomBanner li.bn06 {  background:url('/img/bottom_banner_06_off.png') no-repeat 18px 10px; }
.bottomBanner li.bn07 {  width:118px; background:url('/img/bottom_banner_07_off.png') no-repeat 18px 10px; }
.bottomBanner li.bn08 {  width:118px; background:url('/img/bottom_banner_05_off.png') no-repeat 18px 10px; }

.bottomBanner li.bn01:hover {  background:#8079e1 url('/img/bottom_banner_01.png') no-repeat 18px 10px; }
.bottomBanner li.bn02:hover { background:#c573d7 url('/img/bottom_banner_02.png') no-repeat 18px 10px; }
.bottomBanner li.bn03:hover { background:#f06d3e url('/img/bottom_banner_03.png') no-repeat 18px 10px; }
.bottomBanner li.bn04:hover { background:#ffc133 url('/img/bottom_banner_04.png') no-repeat 18px 10px; }
.bottomBanner li.bn05:hover {   background:#aae069 url('/img/bottom_banner_08.png') no-repeat 18px 10px; }
.bottomBanner li.bn06:hover { background:#5ab5ea url('/img/bottom_banner_06.png') no-repeat 18px 10px; }
.bottomBanner li.bn07:hover { width:118px; background:#ff81c4 url('/img/bottom_banner_07.png') no-repeat 18px 10px; }
.bottomBanner li.bn08:hover { width:118px; background:#3edab1 url('/img/bottom_banner_05.png') no-repeat 18px 10px; }
.bottomBanner li span { font-weight:600; font-size:16px; line-height:20px; display:block; overflow:hidden; padding-top:80px;}
.sns_btn {  width:1280px; margin:0 auto; clear:both;}


/*ÇÏ´Ü Ä«ÇÇ*/
#FooterWrap {  width:100%;  border-top:1px solid #cecece; }
#FooterCover { position:relative; clear:both; display:block; width:1280px;  margin:0 auto; }
#Footer { position:absolute;  right:0; padding-bottom:30px;}
#Footer .copy_wrap_fst { clear:both; height:30px; }
#Footer .copy_wrap_fst .copy_policy { width:650px; float:left; margin:6px 0; }
#Footer .copy_wrap_fst .copy_sns { width:300px; float:right; text-align:right; margin-bottom:6px; }
#Footer .copy_wrap_fst .copy_sns img { margin-left:5px; }


#Footer .copy_wrap_scd { clear:both; margin:15px 0 20px 0; height:40px; }
#Footer .copy_wrap_scd .copy_logo { width:170px; display:block; float:left; }
#Footer .copy_wrap_scd .copy_adress { width:800px; float:left; font-size:12px; line-height:200%; letter-spacing:-0.1em; }
#Footer .copy_wrap_scd .copy_cs { width:141px; display:block; float:right; }

#Footer .copy_award { clear:both; width:100%; }




/* ¼­ºê */
#orderMain td.grayline { position:relative;  }
#tbContent td:2th-child { position:relative; width:1050px; display:block; overflow:hidden;  }
#tbContent > tbody > tr > td:first-child { width:190px; padding-right:30px;  }


#orderMain {  width:1280px; margin:0 auto;}
#customerMain { width:1280px; margin:0 auto;}
#memberMain {  width:1280px; margin:0 auto;}



#tbContent {width:1280px; margin:0 auto;}
#contentsWrap { width:1050px; float:right; display:block; overflow:hidden; clear:both; padding-bottom:30px;}
#contentsWrap .content { width:100%; min-height:500px; }
#contentsWrap>h3 { width:100%; position:relative; display:block; overflow:hidden; padding:32px 0px 6px 0; }
#contentsWrap>h3>p { font-size:18px;  margin-left:20px; font-weight:bold;}
#contentsWrap>h3>span { position:absolute; font-size:11px; right:20px;text-align:right; top:22px;color:#999999; }
#contentsWrap>h3>span a { color:#8c8c8c; font-weight:600; }

/* left menu */
#leftWrap { width:225px; margin:0;  }
#leftWrap th { display:block; padding:36px 0 20px 0; text-align:left; border-bottom:1px solid #cecece; }
#leftWrap th p { font-size:18px;  font-weight:600;  padding-left:15px; }
#leftWrap td { width:100%; color:#8c8c8c; letter-spacing:-0.1em; border-bottom:1px solid #cecece;}
#leftWrap td ul { padding:8px 0; }
#leftWrap td ul li a { padding:6px 15px 6px 30px; color:#1b1b1b; background:url('/img/icon_gray_bar.gif') 15px 17px no-repeat; font-size:12px; display:block; }
#leftWrap td ul li a.a_select { font-weight:bold; color:#000;}
#leftWrap td > a { font-size:14px; display:block;  padding:14px 0 14px 25px; }
#leftWrap td a:hover {text-decoration:underline;}
#leftWrap .over a {  color:#000000; font-weight:600; }
#leftWrap td ul span.left_new {display: inline-block;margin-left:2px;width:11px;height:11px;background:url("/image/ico_new.gif") left no-repeat;}
@keyframes blink-effect {
	50% {
		opacity: 0.2;
	}
}
#leftWrap td ul span.left_hot {display: inline-block;margin-left:2px;width:22px;height:11px;background:url("/image/ico_hot.gif") left no-repeat;animation: blink-effect 1s step-end infinite;}


.left_ul{display:none;}
.ul_over{display:block;}

/* left menu - sub */
#tbContents {width:1280px; float:right;  overflow:hidden;}

#PaperViewWrap { font-size:11px; }
#PaperViewWrap { font-size:11px; }


.t12OrangeB { color:#ff3000; font-weight:bold; }


.tab_wrap {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(255,255,255,0);
}


.btnGoods_wrap {
				  width:1280px; 
				  display:block; 
				  overflow:hidden; 
				  position:relative;
				  margin:0 auto;
				  text-align:center;
				  
				  }

.btnGoods_wrap .btnGoods { display:inline-block;}  
.btnGoods_wrap .btnGoods li { float:left; text-align:center; font-size:13px; font-weight:bold;}
.btnGoods_wrap .btnGoods li  a {   display:inline-block; width:100px; padding:80px 30px 15px 30px; overflow:hidden; }
.btnGoods_wrap .btnGoods a:hover {  border-top:2px solid #000; font-weight:bold;  padding:78px 30px 13px 30px;}
.btnGoods_wrap .btnGoods li:hover { background-position:center 22px; }

.line_wrap { display:block; overflow:hidden; border-bottom:1px solid #ededed; }

.wrap_100 { width:100%; 
			  display:block; 
			  overflow:hidden; 
			  text-align:center; 
			  }



.wrap_100 h3 { font-weight:bold; font-size:20px; padding:60px 0 50px 0;}

.wrap_100 h3 img { padding:0 20px; }










body .tab_wrap{
  line-height: 1.5;
  color: #fff;
  background: #1a1a1a;
  width:1280px; display:block; overflow:hidden; position:relative;
  margin:0 auto;

}
.tab_wrap a {
  text-decoration: none;
  color: inherit;
}
.tab_wrap ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.css-tab {
  will-change: transform;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  background: #1a1a1a;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  -webkit-transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
.css-tab--active {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.css-tab__list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.css-tab__item {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  position: relative;
  -webkit-transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
.css-tab__item:hover {
  opacity: 0.75;
}
.css-tab__thumb {
  display: block;
  height: 80px;
  background: #dc143c;
  -webkit-transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
.css-tab__thumb:before {
  content: attr(data-letter);
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 70px;
  text-transform: uppercase;
  opacity: 0;
}
.css-tab__label {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #e6e6e6;
  margin: 0;
}
@media (max-width: 850px) {
  .css-tab__label {
    font-size: 14px;
  }
}
@media (max-width: 720px) {
  .css-tab__label {
    display: none;
  }
  .css-tab__thumb {
    height: 60px;
  }
  .css-tab__thumb:before {
    font-size: 24px;
    opacity: 0.7;
  }
}
.tab-content {
  height: 100vh;
  will-change: transform;
  -webkit-perspective: 400px;
          perspective: 400px;
  overflow: hidden;
  -webkit-transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
.section {
  will-change: transform;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  height: 100vh;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  background: #fff;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}
.section--hidden {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
.section--active {
  -webkit-transform: translateX(0) rotateY(0);
          transform: translateX(0) rotateY(0);
  z-index: 2;
}
.section__wrapper {
  width: 100%;
  max-width: 800px;
  padding: 0 8vw;
  position: relative;
}
.section__title {
  margin: 0 0 25px 0;
  font-size: 48px;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 5px;
}
.section__title:before {
  content: '';
  position: absolute;
  top: 5rem;
  left: 45%;
  margin: auto;
  width: 10%;
  height: 2px;
  background: #fff;
}
@media (max-width: 720px) {
  .section__title {
    font-size: 28px;
  }
  .section__title:before {
    top: 3.25rem;
  }
}
.section p {
  margin: 0 0 25px 0;
  font-family: 'Georgia';
  font-size: 18px;
  color: #fff;
  opacity: 0.55;
}
@media (max-width: 720px) {
  .section p {
    font-size: 16px;
  }
}
.section p:last-child {
  margin-bottom: 0;
}
.color1 {
  background: #1b1f25;
}
.color2 {
  background: #e74c3c;
}
.color3 {
  background: #3498db;
}
.color4 {
  background: #9b59b6;
}
.color5 {
  background: #1bc885;
}
.color6 {
  background: #dfb816;
}
.logo {
  position: fixed;
  top: 100px;
  right: 20px;
  z-index: 2;
}
@media (max-width: 720px) {
  .logo {
    top: 110px;
    right: 50%;
    margin-right: -20px;
  }
}
.logo img {
  width: 45px;
  -webkit-transform: rotate(0);
          transform: rotate(0);
  -webkit-transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
.logo img:hover {
  -webkit-transform: rotate(180deg) scale(1.1);
          transform: rotate(180deg) scale(1.1);
}