/* BASIC css start */
/* container */

#index {position: fixed; margin: auto; width: 100%; height: 100vh; background-color: #fff; z-index:1111; text-align: center;}
#index .info {position: absolute; top: 50%; left: 7%;}

#main_visual {}
#main_visual ul {}
#main_visual ul li {}
#main_visual ul li a {position: relative; display: block; padding-top : calc(1700/1204*100%); width: 100%; height: 100; background: center / cover no-repeat;}

#main_visual ul li a:before {content: ''; position: absolute; top: 0; left: 0; display: block; padding-top : calc(1700/1204*100%); width: 100%; height: 0; background: center / cover no-repeat url(https://special417.makeshop.co.kr/design/peterjin/11657/back.png); border-radius: 10px; opacity: 0.3;}

#main_visual ul li:nth-of-type(1) a {background-image: url(https://special417.makeshop.co.kr/design/peterjin/2023/mainv-1copy.png);}
#main_visual ul li:nth-of-type(2) a {background-image: url(https://special417.makeshop.co.kr/design/peterjin/2023/mainv-2copy.png);}
#main_visual ul li:nth-of-type(3) a {background-image: url(https://special417.makeshop.co.kr/design/peterjin/2023/mainv-3copy.png);}
#main_visual ul li:nth-of-type(4) a {background-image: url(https://special417.makeshop.co.kr/design/peterjin/2023/mainv-4copy.png);}

#main_visual .slick-dots {display: none !important;}

#container {margin: 20px;}
#container h2 {font-size: 1.2em; font-weight: 900;}

#spacePortfolio {margin-top: 100px;}
#spacePortfolio h2 {}
#spacePortfolio ul {margin-top: 15px;}
#spacePortfolio ul li {margin-bottom: 10px; background-color: #b2b2b2;}
#spacePortfolio ul li a {position: relative; display: block; padding-top:calc(40/130*100%); width: 100%; height: 0;}

#spacePortfolio ul li a:before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 0;  opacity: 0.4;  padding-top:calc(40/130*100%); background: center / 100% no-repeat url(https://special417.makeshop.co.kr/design/peterjin/2023/main_visual_back_small.png);}

#spacePortfolio ul li:nth-of-type(1) a {background-image: url(/design/peterjin/space-meeting.png);}
#spacePortfolio ul li:nth-of-type(2) a {background-image: url(/design/peterjin/space-office.png);}
#spacePortfolio ul li:nth-of-type(3) a {background-image: url(/design/peterjin/space-school.png);}
#spacePortfolio ul li:nth-of-type(4) a {background-image: url(/design/peterjin/space-counter.png);}

#spacePortfolio ul li a span {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-weight: 700; text-align: center;}


#portfolio {margin-top: 100px;}
#portfolio .portfolio_tab {display: flex; justify-content: space-between;}
#portfolio .portfolio_tab h2 {}
#portfolio .portfolio_tab ul {margin-left: auto;}
#portfolio .portfolio_tab ul li {display: inline-block; font-size: 0.8em; color: #C9C9C9; font-weight: 700;}
#portfolio .portfolio_tab ul li+li {margin-left: 10px;}
#portfolio .portfolio_tab ul li a {padding-bottom: 5px;}
#portfolio .portfolio_tab ul li .active {color: #000; border-bottom: 2px solid #000;}

#portfolio .portfolio_area {width: 100%;}
#portfolio .portfolio_area>div {display: none;}
#portfolio .portfolio_area .active {display: block;}
#portfolio .portfolio_area .active ul {margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr;}
#portfolio .portfolio_area .active ul li {}
#portfolio .portfolio_area .active ul li:nth-of-type(2n) {margin: 0 0 10px 10px;} 
#portfolio .portfolio_area .active ul li a {display: block; width: 100%; height: 146px;}

#commercial_area ul li:nth-of-type(1) a {background: center / 150% no-repeat url(https://special417.makeshop.co.kr/design/peterjin/2023/pt-com-2copy.png);}
#commercial_area ul li:nth-of-type(2) a {background: center / 150% no-repeat url(https://special417.makeshop.co.kr/design/peterjin/2023/pt-com-3copy.png);}
#commercial_area ul li:nth-of-type(3) a {background: center / 150% no-repeat url(https://special417.makeshop.co.kr/design/peterjin/2023/pt-com-4copy.png);}
#commercial_area ul li:nth-of-type(4) a {background: center / 150% no-repeat url(https://special417.makeshop.co.kr/design/peterjin/2023/pt-com-5copy.png);}

#office_area ul li:nth-of-type(1) a {background: center / 150% no-repeat url(https://special417.makeshop.co.kr/design/peterjin/2023/pt-office-2copy.png);}
#office_area ul li:nth-of-type(2) a {background: center / 150% no-repeat url(https://special417.makeshop.co.kr/design/peterjin/2023/pt-office-3copy.png);}
#office_area ul li:nth-of-type(3) a {background: center / 150% no-repeat url(https://special417.makeshop.co.kr/design/peterjin/2023/pt-office-4copy.png);}
#office_area ul li:nth-of-type(4) a {background: center / 150% no-repeat url(https://special417.makeshop.co.kr/design/peterjin/2023/pt-office-5copy.png);}

#school_area ul li:nth-of-type(1) a {background: center / 150% no-repeat url(https://special417.makeshop.co.kr/design/peterjin/2023/pt-school-2copy.png);}
#school_area ul li:nth-of-type(2) a {background: center / 150% no-repeat url(https://special417.makeshop.co.kr/design/peterjin/2023/pt-school-3copy.png);}
#school_area ul li:nth-of-type(3) a {background: center / 150% no-repeat url(https://special417.makeshop.co.kr/design/peterjin/2023/pt-school-4copy.png);}
#school_area ul li:nth-of-type(4) a {background: center / 150% no-repeat url(https://special417.makeshop.co.kr/design/peterjin/2023/pt-school-5copy.png);}

#other_area ul li:nth-of-type(1) a {background: center / 150% no-repeat url(https://special417.makeshop.co.kr/design/peterjin/2023/pt-etc-2copy.png);}
#other_area ul li:nth-of-type(2) a {background: center / 150% no-repeat url(https://special417.makeshop.co.kr/design/peterjin/2023/pt-etc-3copy.png);}
#other_area ul li:nth-of-type(3) a {background: center / 150% no-repeat url(https://special417.makeshop.co.kr/design/peterjin/2023/pt-etc-4copy.png);}
#other_area ul li:nth-of-type(4) a {background: center / 150% no-repeat url(https://special417.makeshop.co.kr/design/peterjin/2023/pt-etc-5copy.png);}


#license {margin-top: 100px;}
#license h2 {text-align: center; font-weight: 400;}
#license h2 strong {font-weight: 900;}
#license .license_list {margin-top: 20px; text-align: center;}
#license .license_list li {margin: 5px; padding: 7px 10px; display: inline-block; background-color: #000; color: #fff; font-weight: 700;}
#license .license_list li a {color: #fff;}

#license .license_info {margin-top: 20px; text-align: center;}
#license .license_info p {}
#license .license_info a {display: inline-block; margin-top: 30px; color: #B3B3B3; font-weight: 700;}

#product {margin-top: 100px;}
#product .product_tab {display: flex; justify-content: space-between;}
#product .product_tab h2 {}
#product .product_tab ul {margin-left: auto;}
#product .product_tab ul li {display: inline-block; font-size: 0.8em; color: #C9C9C9; font-weight: 700;}
#product .product_tab ul li+li {margin-left: 15px;}
#product .product_tab ul li a {padding-bottom: 5px;}
#product .product_tab ul li .PD_active {color: #000; border-bottom: 2px solid #000;}

#product .product_area {margin-top: 20px;}
#product .product_area>div {display: none;}
#product .product_area>.PD_active {display: block;}
#product .product_area .main_pd {}
#product .product_area .main_pd a {width: 100%;}
#product .product_area .main_pd a .thumb {height: 288px; background-color: #d2d2d2;}
#product .product_area .main_pd a .info_pd {margin-top: 10px;}
#product .product_area .main_pd a .info_pd span {display: block; font-weight: 700;}
#product .product_area .main_pd a .info_pd .name {font-size: 1.2em;}
#product .product_area .main_pd a .info_pd .price {font-size: 1.1em;}

#product .product_area .sub_pd {margin-top: 20px;}
#product .product_area .sub_pd ul {display: grid; grid-template-columns: 1fr 1fr;}
#product .product_area .sub_pd ul li {}
#product .product_area .sub_pd ul li+li {margin-left: 10px;}
#product .product_area .sub_pd ul li a {}
#product .product_area .sub_pd ul li a .thumb {height: 147px; background-color: #d2d2d2;}
#product .product_area .sub_pd ul li a .info_subpd {margin-top: 10px; font-weight: 700; font-size: 0.9em;}
#product .product_area .sub_pd ul li a .info_subpd span {}
#product .product_area .sub_pd ul li a .info_subpd .name {}
#product .product_area .sub_pd ul li a .info_subpd .price {}

#product .product_area div .more_view {margin-top: 40px; text-align: center; color: #b3b3b3; font-weight: 700;}
#product .product_area div .more_view a {}

#officePD_area {}
#officePD_area .main_pd {}
#officePD_area .main_pd a {}
#officePD_area .main_pd a .thumb {background: center / 100% no-repeat url(https://special417.makeshop.co.kr/design/peterjin/2023/pd-office-1.png);}
#officePD_area .sub_pd ul li:nth-of-type(1) a .thumb {background: center / 100% no-repeat url(/design/peterjin/2023/pd-office-3.png);}
#officePD_area .sub_pd ul li:nth-of-type(2) a .thumb {background: center / 100% no-repeat url(/design/peterjin/2023/pd-office-2.png);}

#livingPD_area {}
#livingPD_area .main_pd {}
#livingPD_area .main_pd a {}
#livingPD_area .main_pd a .thumb {background: center / 100% no-repeat url(https://special417.makeshop.co.kr/design/peterjin/2023/pd-li-1.png);}
#livingPD_area .sub_pd ul li:nth-of-type(1) a .thumb {background: center / 100% no-repeat url(https://special417.makeshop.co.kr/design/peterjin/2023/pd-li-2.png);}
#livingPD_area .sub_pd ul li:nth-of-type(2) a .thumb {background: center / 100% no-repeat url(https://special417.makeshop.co.kr/design/peterjin/2023/pd-li-3.png);}

#smartPD_area {}
#smartPD_area .main_pd {}
#smartPD_area .main_pd a {}
#smartPD_area .main_pd a .thumb {background: center / 100% no-repeat url(https://special417.makeshop.co.kr/design/peterjin/2023/pd-smart-1.png);}
#smartPD_area .sub_pd ul li:nth-of-type(1) a .thumb {background: center / 100% no-repeat url(https://special417.makeshop.co.kr/design/peterjin/2023/pd-smart-2.png);}
#smartPD_area .sub_pd ul li:nth-of-type(2) a .thumb {background: center / 100% no-repeat url(https://special417.makeshop.co.kr/design/peterjin/2023/pd-smart-3.png);}

#store {margin-top: 130px;}
#store .store_img {}
#store .store_img a {position: relative; margin: auto; display: block; width: 263px; height: 263px; border-radius: 50%; background-color: #E1E1E1;}
#store .store_img a img {position: absolute;}
#store .store_img a img:nth-of-type(1) {top: -76px; left: 10px; width: 186px;}
#store .store_img a img:nth-of-type(2) {top: 17px; left: -25px; width: 330px;}

#store .more_view {margin-top: 40px; text-align: center; font-weight: 700; font-size: 1.2em;}
#store .more_view a {font-weight: 700; font-size: 1.2em;}


#sns {margin: 100px 0; text-align: center;}
#sns h2 {}
#sns ul {margin-top: 20px;}
#sns ul li {display: inline-block; margin: 10px;}
#sns ul li a {display: block; padding: 10px; background-color: #EDEDED; font-weight: 900;}

/* BASIC css end */