/* BASIC css start */
.top_btn {z-index: 100; position: fixed; right: -40px; bottom: 50px; display: block; width: 40px; height: 40px; background-image: url(/design/peterjin/11657/top_btn-01.png); transition: 0.4s;}

/* #container */

header .b_gnb ul li:nth-of-type(1) a {font-weight: 500 !important;}
header .b_gnb ul li:nth-of-type(1) a:before {content: ''; display: none !important;}
header .b_gnb ul li:nth-of-type(5) a {font-weight: 900;}
header .b_gnb ul li:nth-of-type(5) a:before {content: attr(data-hidden-tab); z-index: -1; display: block; position: absolute; top: -5px; left: -7px; width: 125%; height: 30px; background-color: #edecec; border-radius: 20px;}

h2 {padding: 50px 0 20px 0; text-align: center; font-size: 1.2em; font-weight: 900;}

#container {padding-top: 87px;}
#container .tit {width: 100%; height: 240px; background-image: url(/design/peterjin/11657/productmain_tit.png); color: #fff; text-align: center;}
#container .tit h2 {padding-top: 90px; font-size: 1.8em; font-weight: 700;}
#container .tit .sub_tit {padding: 10px 20px; font-size: 0.85em;}

#container .inner {width: 100%;}
#container .inner .pd_area {}
#container .inner .pd_area ul {margin-top: 100px; width: 100%;}
#container .inner .pd_area ul li {margin: 0 auto 70px auto; width: 100%;}
#container .inner .pd_area ul li a {position: relative; display: block; padding-top: calc(1500/1500*100%); width: 100%; height: 0; background: center / cover no-repeat; border-radius: 10px; color: #fff; transition: 0.3s; font-size: 0.75em;}
#container .inner .pd_area ul li a h3 {font-weight: 900;}

#container .inner .pd_area ul li:nth-of-type(1) a {background-image: url(/design/peterjin/11657/pdmain_office.png);}
#container .inner .pd_area ul li:nth-of-type(2) a {background-image: url(/design/peterjin/11657/pdmain_smart.png);}
#container .inner .pd_area ul li:nth-of-type(3) a {background-image: url(/design/peterjin/11657/pdmain_sofa.png);}
#container .inner .pd_area ul li:nth-of-type(4) a {background-image: url(/design/peterjin/11657/pdmain_builtin.png);}
#container .inner .pd_area ul li a:before {content: ''; position: absolute; top: 0; left: 0; display: block; padding-top: calc(1500/1500*100%); width: 100%; height: 0; background: center / cover no-repeat url(/design/peterjin/11657/pdmain_back.png); opacity: 0.5; border-radius: 10px;}
#container .inner .pd_area ul li a h3 {position: absolute; width: 100%; font-size: 1.8em; text-align: center; }
#container .inner .pd_area ul li a span {position: absolute; padding: 20px; width: 100%; margin-right: 15%; font-size: 1.2em;}
#container .inner .pd_area ul li:nth-of-type(1) a h3 {bottom: 186px;}
#container .inner .pd_area ul li:nth-of-type(1) a span {bottom: 28px;}
#container .inner .pd_area ul li:nth-of-type(2) a h3 {bottom: 167px;}
#container .inner .pd_area ul li:nth-of-type(2) a span {bottom: 28px;}
#container .inner .pd_area ul li:nth-of-type(3) a h3 {bottom: 109px;}
#container .inner .pd_area ul li:nth-of-type(3) a span {bottom: 32px;}
#container .inner .pd_area ul li:nth-of-type(4) a h3 {bottom: 109px;}
#container .inner .pd_area ul li:nth-of-type(4) a span {bottom: 32px;}

#container .more_view {margin: 100px 0 100px 0;}
#container .more_view a {display: block; text-align: center; font-size: 1.4em; font-weight: 700; transition: 0.3s;}
#container .more_view a:hover {color: #b83a2f;}


/* BASIC css end */