@charset "UTF-8";
*{font-weight:400;}
.inner{position:relative; margin:0 auto; padding:0 20px; max-width:1240px;}

/* header */
header .header-wrap{position:absolute; left:0; right:0; top:0; z-index:100;}
header .header-inner{margin:0 auto; max-width:1400px;}
header .top-header{padding:16px 0; display:flex; justify-content:space-between; align-items:center;}
header .top-header .login-info{font-family:'Paperlogy', 'Noto Sans Korean', sans-serif; display:flex; align-items:center; gap:12px;}
header .top-header .login-info *{font-family:inherit; font-weight:700;}
header .top-header .login-info p{font-size:15px; color:#53565D;}
header .top-header .login-info .btn-login{padding:0 14px; display:block; font-size:13px; color:#fff; line-height:28px; background:#53565D; border-radius:50px;}
header .btn-main{display:none;}
header .header-float-bnrs{display:flex; justify-content:space-between; align-items:flex-start;}
header .header-float-bnrs .btn-bnr-type{padding:0 18px; background:#FAFFD8; border:2px solid #fff; border-radius:20px; box-shadow:0 4px 8px 3px rgba(0,0,0,.15);}
header .header-float-bnrs .btn-guide{display:inline-block; font-size:16px; color:#33468E; font-weight:600; line-height:39px;}
header .header-float-bnrs .btn-bnr{padding:7px 18px; display:flex; align-items:center; gap:10px;}
header .header-float-bnrs .btn-bnr+.btn-bnr{margin-top:10px;}
header .header-float-bnrs .btn-bnr p{font-size:12px; color:#33478E;}
header .header-float-bnrs .btn-bnr p span{display:block; color:inherit; font-size:16px; font-weight:800;}
header .title-wrap{padding-top:30px; height:506px; background:url('/resources/images/themeplace/practicalPlayground/main_bg.png') repeat-x center top;}
header .main-title{position:relative; margin:0 auto; max-width:1190px;}
header .main-title .obj{position:absolute; animation:bounce infinite 1s alternate linear;}
header .main-title .txt{top:350px; left:0; right:0; animation:none;}
header .main-title .txt p{font-size:20px; color:#111; font-weight:500; line-height:1.5; letter-spacing:-.03em; text-align:center;}
header .main-title .title-obj1{left:257px; top:185px; animation:titleBounce 3s infinite cubic-bezier(0.41, 0.72, 0.57, 1);}
header .main-title .title-obj2{left:462px; top:150px; animation:titleBounce 3s infinite cubic-bezier(0.41, 0.72, 0.57, 1); animation-delay:1s;}
header .main-title .title-obj3{left:675px; top:189px; animation:titleBounce 3s infinite cubic-bezier(0.41, 0.72, 0.57, 1); animation-delay:2s}
header .main-title .obj1{left:94px; top:305px;}
header .main-title .obj2{left:92px; top:176px; animation-delay:.35s}
header .main-title .obj3{left:154px; top:13px; animation-delay:.7s}
header .main-title .obj4{left:620px; top:259px; animation-delay:1.05s}
header .main-title .obj5{right:336px; top:76px; animation-delay:.35s}
header .main-title .obj6{right:86px; top:255px; animation-delay:.75s}
header .main-title .obj7{right:-30px; top:384px; animation-delay:1.05s}
header .main-title .obj8{right:-86px; top:230px;}
header .sub-title{display:none; position:absolute; bottom:-12px; left:50%; transform:translateX(-50%);}

header.sub .btn-main{padding:0 18px; display:inline-block; font-size:16px; color:#33468E; font-weight:600; line-height:39px; background:#FAFFD8; border:2px solid #fff; border-radius:20px; box-shadow:0 4px 8px 3px rgba(0,0,0,.15);}
header.sub .header-float-bnrs{display:none;}
header.sub .title-wrap{height:225px; background:url('/resources/images/themeplace/practicalPlayground/sub_bg.png') repeat-x center top; border-bottom:12px solid #86CF00;}
header.sub .title-wrap .inner{height:100%;}
header.sub .main-title{display:none;}
header.sub .sub-title{display:block;}

@keyframes bounce{
  100%{transform:translateY(15px);}
}

@keyframes titleBounce{
  33%{transform:translateY(-25px);}
  66%{transform:translateY(0);}
  100%{transform:translateY(0);}
}

/* footer */
#footerGray {position: relative;padding: 26px 0 35px;margin: 0 auto;background:#fff; border-top:1px solid #E9E9ED;}
#footerGray * { letter-spacing: -.5px;}
#footerGray .logo {position: absolute;left:0;top:0;width: 68px;height: 23px;}
#footerGray .link {margin-bottom:14px;*zoom: 1;padding-left:122px;}
#footerGray .link:after {content: '';display: block;clear: both;}
#footerGray .link li {float: left;padding-left: 23px;margin-left: 23px;border-left: 1px #d1d1d1 solid;line-height:13px;}
#footerGray .link li:first-child {padding-left: 0;margin-left: 0;border-left: none;}
#footerGray .link li a {font-family: 'Nanum Gothic', sans-serif;font-weight: 800;font-size: 13px;color: #666;}
#footerGray .link li a:hover {text-decoration: none;}
#footerGray .info {padding-left:122px;}
#footerGray .info li {font-size:12px; color: #777;font-family: 'Nanum Gothic', sans-serif; font-weight:400;line-height:18px;text-align: left;}
#footerGray .info span {padding-left: 15px;font-size:12px; color: #777;font-family: 'Nanum Gothic', sans-serif; font-weight:400;line-height:18px;text-align: left;}
#footerGray .info span:first-child {padding-left: 0;}

/* lnb */
.pg-lnb{padding:9px 0; background:#86CF00;}
.pg-lnb .lnb-container{margin:0 auto; max-width:1200px; display:flex; gap:15px;}
.pg-lnb .lnb-container .lnb-item{flex:1; height:62px; font-size:24px; color:#fff; font-weight:600; border-radius:62px;}
.pg-lnb .lnb-container .lnb-item:hover,
.pg-lnb .lnb-container .lnb-item.on{background:#895CFF; box-shadow:0 4px 9px 0 rgba(0,0,0,.1);}

.pg-main-wrap{padding:60px 0 80px;}
.pg-list-cnt{margin-bottom:30px; font-size:20px; color:#1E1E21; font-weight:700;}
.pg-list-cnt span{font:inherit; color:#895CFF;}

.pg-btns{display:flex; gap:8px;}
.pg-btn{position:relative; padding:0 12px; width:169px; font-size:16px; color:#7556FF; line-height:45px; border:1px solid #7556FF; border-radius:8px;}
.pg-btn:hover{color:#7556FF; font-weight:600; background:#E4E0FF;}
.pg-btn:after{content:''; position:absolute; right:12px; top:0; bottom:0; background-repeat:no-repeat; background-position:center;}
.pg-btn.link:after{width:7px; background-image:url('/resources/images/themeplace/practicalPlayground/ico_arr.png');}
.pg-btn.down:after{width:18px; background-image:url('/resources/images/themeplace/practicalPlayground/ico_down.png');}


.pg-list-wrap{display:flex; gap:32px 20px; flex-wrap:wrap;}
.pg-list-wrap .pg-list-item{position:relative; width:calc(33.33%  - 40px/3);}
.pg-list-wrap .pg-list-item a{display:block; height:100%; border-radius:16px; border:1px solid #E4E4E4; overflow:hidden;}
.pg-list-wrap .pg-list-item .thumb{position:relative;}
.pg-list-wrap .pg-list-item .thumb img{width:100%;}
.pg-list-wrap .pg-list-item .desc{padding:24px 23px 98px; background:#fff;}
.pg-list-wrap .pg-list-item .desc h5{display:flex; gap:5px; min-height:2.8em; font-size:20px; color:#1E1E21; font-weight:700; line-height:1.4; word-break:break-all;}
.pg-list-wrap .pg-list-item .desc h5 span{font:inherit; color:inherit; flex:none;}
.pg-list-wrap .pg-list-item .btn-share{position:absolute; right:10px; bottom:10px; width:45px; height:44px; background:url('/resources/images/themeplace/practicalPlayground/ico_share.png') no-repeat center top;}
.pg-list-wrap .pg-list-item .btn-share:hover{background-position-y:bottom;}
.pg-list-wrap .pg-list-item .module-btns{position:absolute; left:23px; bottom:24px;}
.pg-list-wrap .pg-list-item .module-btns .pg-btn{border-radius:8px; border:1px solid #7556FF;}

.pg-list-wrap.ty2{margin-top:30px; flex-wrap:nowrap;}
.pg-list-wrap.ty2 .pg-list-item{width:calc(25% - 15px);}
.pg-list-wrap.ty2 .pg-list-item .desc{padding-bottom:23px;}
.pg-list-wrap.ty2 .pg-list-item .desc h5{min-height:0;}

section[class^='pg-detail']{padding:25px 0 60px;}
.pg-detail{padding-top:16px;}
.pg-module .btn-share{width:139px; height:43px; font-size:16px; color:#895CFF; font-weight:600; border-radius:200px; border:1px solid #895CFF;}
.pg-module.top{margin-bottom:16px;}
.pg-module.bottom{margin-top:24px;}
.pg-module.bottom .pg-btns{justify-content:flex-end;}
.pg-detail-wrap{position:relative;}
.pg-detail-wrap:after{content:''; display:block; padding-bottom:56.25%;}
.pg-detail-wrap iframe{position:absolute; left:0; right:0; top:0; bottom:0; width:100%; height:100%;}
.pg-section-title{padding-bottom:80px; border-bottom:2px solid #53565D; text-align:center;}
.pg-section-title img{padding:8px 0;}
.pg-section-sub-title{margin-top:8px; font-size:18px; color:#53565D; line-height:1.48;}

.pg-data-wrap{margin-top:30px;}
.pg-data-wrap .pg-data-item-title{padding:16px 10px; border-color:#E9E9ED; border-style:solid; border-width:1px 0; display:flex; gap:10px; background:#F7F7F7;}
.pg-data-wrap .pg-data-item-title .badge{padding:0 11px; font-size:18px; color:#fff; font-weight:600; line-height:36px; border-radius:36px; background:#009DFF;}
.pg-data-wrap .pg-data-item-title h6{font-size:20px; color:#1E1E21; font-weight:700; line-height:36px;}
.pg-data-wrap .pg-data-item-title span{padding-left:30px; font-size:20px; color:#1E1E21; font-weight:300; line-height:36px; background:url('/resources/images/themeplace/practicalPlayground/ico_arr2.png') no-repeat left 4px center;}
.pg-data-wrap .pg-data-item a{padding:16px 10px; display:flex; justify-content:space-between; align-items:center; border-color:#E9E9ED; border-style:solid; border-width:1px 0;}
.pg-data-wrap .pg-data-item a .txt p{padding-left:34px; font-size:20px; color:#494949; font-weight:300; line-height:1.2; background:url('/resources/images/themeplace/practicalPlayground/ico_reply.png') no-repeat left top;}
.pg-data-wrap .pg-data-item a .btn p{display:flex; justify-content:center; align-items:center; width:211px; height:43px; font-size:16px; color:#895CFF; border:1px solid #895CFF; border-radius:200px;}
.pg-data-wrap .pg-data-item a .btn p i{width:24px; height:24px; background:url('/resources/images/themeplace/practicalPlayground/ico_chasi.png') no-repeat center top;}
.pg-data-wrap .pg-data-item a:hover .btn p{background:#895CFF; color:#fff;}
.pg-data-wrap .pg-data-item a:hover .btn p i{background-position-y:bottom;}

.pg-guide-top{padding:60px 0;}
.pg-guide-cont-wrap{margin-top:30px; padding:35px 29px; border:1px solid #E9E9ED; border-radius:20px; overflow:hidden;}
.pg-guide-cont-wrap .pg-guide-cont{display:flex; flex-wrap:wrap; gap:16px 20px;}
.pg-guide-cont-wrap .guide-item{width:calc(50% - 10px);}
.pg-guide-cont-wrap .guide-item .img{width:100%;}
.pg-guide-cont-wrap .guide-item .img img{max-width:100%;}
.pg-guide-cont-wrap .guide-item .txt{margin-top:16px;}
.pg-guide-cont-wrap .guide-item .txt p{font-size:18px; color:#53565D; line-height:1.48; text-align:center;}


.pg-guide-spec{padding-bottom:60px;}
.pg-spec-tab-wrap{margin-top:80px;}
.pg-guide-tab-menu{display:flex; justify-content:center; gap:10px;}
.pg-guide-tab-menu button{width:227px; height:62px; font-size:20px; color:#53565D; font-weight:700; border:1px solid #53565D; border-radius:62px;}
.pg-guide-tab-menu button.on{color:#fff; background:#895CFF; border-color:#895CFF;}
.pg-guide-tab-cont{display:none;}
.pg-guide-tab-cont.on{display:block;}
.pg-guide-tab-cont ul{margin-top:36px;}
.pg-guide-tab-cont ul li{position:relative; padding-left:15px; font-size:16px; color:#53565D; line-height:1.5;}
.pg-guide-tab-cont ul li .badge{margin-right:8px; display:inline-block; padding:0 17px; font-size:14px; color:#fff; font-weight:600; line-height:31px; border-radius:31px;}
.pg-guide-tab-cont ul li .badge.ty15{background:#FF593C;}
.pg-guide-tab-cont ul li .badge.ty22{background:#009DFF;}
.pg-guide-tab-cont ul li+li{margin-top:10px;}
.pg-guide-tab-cont ul li:before{content:''; position:absolute; left:3px; top:50%; margin-top:-2px; width:4px; height:4px; border-radius:50%; background:#53565D;}
.pg-guide-tab-cont table{margin-top:40px; width:100%; text-align:center;}
.pg-guide-tab-cont th{padding:20px; font-size:18px; color:#494949; line-height:1.2; font-weight:700; background:#F7F7F7; border:1px solid #E9E9ED;}
.pg-guide-tab-cont td{padding:20px; font-size:18px; color:#494949; line-height:1.2; letter-spacing:-0.04em; border:1px solid #E9E9ED;}
.pg-guide-tab-cont thead th{border-bottom-color:#424242;}
.pg-guide-tab-cont .pg-spec-txt{margin-top:12px; font-size:16px; color:#53565D; line-height:1.5;}