:root{
	--background-type1:#FDF9FB;
}

/* setting -- START */
#wrap {width:1300px; margin:0 auto; position:relative;}
/* setting -- END */


/* content -- START */
#content {position:relative; padding-top:180px; padding-bottom:10px; background:var(--background-body);}
#content section {margin-bottom:140px;}
#content section .secTitle {height:70px; position:relative; font-family:'Exercise Regular'; font-size:40px; letter-spacing:-2.5px; text-align:center; margin-bottom:40px;}
#content section .secTitle:before {content:''; width:70px; height:70px; display:block; background:url('https://cdn.jsdelivr.net/gh/solmopark/oworld/docs/img/main_titleStar01.png') top center/cover no-repeat; position:absolute; top:-80%; left:50%; transform:translateX(-50%);}
#content section .secTitle span {font-size:0.7em; display: block; font-family: 'Pretendard-Regular';}
#content section a.thumb {transition:All .2s ease; -webkit-transition:All .2s ease; -moz-transition:All .2s ease; -o-transition:All .2s ease;}

/* section.type1 */
#content section.type1 .secTitle {margin-bottom:80px;}
#content section.type1 .secBox {position:relative; display:flex; flex-flow:row wrap; justify-content:space-between; align-items:stretch;}
#content section.type1 .secBox.ver3 > a.thumb {width:calc((100% - 40px) / 3);}
#content section.type1 .secBox.ver4 > a.thumb {width:calc((100% - 30px) / 2); display: flex; flex-grow; flex-flow: row; justify-content: space-between;  align-items: center;
    text-align: center; padding: 2vw 1vw; border-radius: 20px; margin-bottom: 5vw; box-shadow: 0 0 20px 1px rgb(0 0 0 / 10%);     border: 4px solid #fff;}
#content section.type1 .secBox a.thumb .img {position:relative; font-size:0; line-height:0;}
#content section.type1 .secBox a.thumb .img:before {content:'“'; position:absolute; top:55px; left:5px; font-family:var(--font_style_1); font-size:0; color:var(--color_Dp); text-shadow:0px 4px var(--background-type1), 4px 0px var(--background-type1), 3.5px 2px var(--background-type1), 2px 3.5px var(--background-type1), -2px 3.5px var(--background-type1), 3.5px -2.5px var(--background-type1); transition:All .2s ease; -webkit-transition:All .2s ease; -moz-transition:All .2s ease; -o-transition:All .2s ease;}
#content section.type1 .secBox a.thumb .img img {width:250px; height:250px; border-radius:100%; overflow:hidden;}
#content section.type1 .secBox a.thumb .txt {width: calc(98% - 9.5vw); height:auto ; font-size:20px; padding-left: 2vw; line-height:30px; display:flex; flex-flow:column; align-items:stretch; text-align: left; transition:All .2s ease-out; -webkit-transition:All .2s ease-out; -moz-transition:All .2s ease-out; -o-transition:All .2s ease-out;}
#content section.type1 .secBox a.thumb .txt .day{color: #b3b3b3; margin-bottom:15px;}
#content section.type1 .secBox a.thumb .txt .title { font-family:'SBAggroM'; font-size:1.3em; line-height:1.2em; }
#content section.type1 .secBox a.thumb .txt .text {font-family: 'SBAggroM';margin-bottom:40px;}
#content section.type1 .secBox img.deco {position:absolute; top:-100px; right:28.5%; z-index:1;}
#content section.type1 .secBox a.thumb .more {width:30%;}

/* type2 */
#content section.type2 {margin-bottom: 10vw;}

/* section.type3 */
#content section.type3 {}
#content section.type3 .secTitle {height:95px;}
#content section.type3 .secBox {display:flex; flex-flow:row; flex-wrap:wrap; justify-content:space-between; margin-bottom:-20px;}
#content section.type3 .secBox a.thumb {position:relative; margin-bottom:20px; border-radius:30px; background:#000; overflow:hidden; -webkit-box-shadow:0 0 20px 1px rgb(0 0 0 / 10%); -moz-box-shadow:0 0 20px 1px rgb(0 0 0 / 10%); box-shadow:0 0 20px 1px rgb(0 0 0 / 10%);}
#content section.type3 .secBox.ver3 > a.thumb {width:calc((100% - 40px) / 3);}
#content section.type3 .secBox.ver4 > a.thumb {width:calc((100% - 20px) / 2);}
#content section.type3 .secBox a.thumb .img {width:100%; height:100%;}
#content section.type3 .secBox a.thumb .img img {width:100%; display:block; opacity:0.4;}
#content section.type3 .secBox a.thumb .txt {position:absolute; top:0; left:0; width:100%; height:100%; padding:40px; display:flex; flex-flow:column; justify-content:flex-end; align-items:stretch; font-size:20px; line-height:30px; color:#fff;}
#content section.type3 .secBox a.thumb .txt .title {position:relative; width:fit-content; overflow:hidden; font-family:'SBAggroM'; font-size:1.3em; line-height:1.2em;}
#content section.type3 .secBox a.thumb .txt .title:before {content:''; position:relative; top:5px; width:30px; height:30px; display:inline-block; margin-right:10px; background:url('https://cdn.jsdelivr.net/gh/solmopark/oworld/docs/img/type3_default.png') center center/cover no-repeat; transition:All .3s ease; -webkit-transition:All .3s ease; -moz-transition:All .3s ease; -o-transition:All .3s ease;}
#content section.type3 .secBox a.thumb .txt .title:after {content:''; position:absolute; bottom:0; left:40px; width:20%; height:2px; opacity:0; display:block; margin-right:40px; background:#fff; transition:All .8s ease; -webkit-transition:All .8s ease; -moz-transition:All .8s ease; -o-transition:All .8s ease;}
#content section.type3 .secBox a.thumb .txt .title.second {margin-top:5px; padding-left:40px;}
#content section.type3 .secBox a.thumb .txt .title.second:before {display:none;}
#content section.type3 .secBox a.thumb .txt .title.second:after {display:none;}
#content section.type3 .secBox a.thumb .txt .text {margin-top:20px; font-weight:500;}
#content section.type3 .secBox a.thumb .txt .title img {position:relative; top:4px;}

/* type4 */
#content section.type4 {margin-bottom: 2vw;}
#content section.type4 .secTitle:before {display: none;}
#content section.type4 .secTitle {text-align: left; margin-bottom: 100px;}
#content section.type4 .secTitle span{letter-spacing: -0.125rem; margin-top: 10px; /*font-size: 1rem;*/}


@media (hover:hover) {
	#content section.type1 .secBox a.thumb:hover {background:var(--background-type1); color:var(--color_Dp);}
	#content section.type1 .secBox a.thumb:hover .img:before {font-size:80px;}
    #content section.type3 .secBox a.thumb:hover .txt .title:before {background:url('https://cdn.jsdelivr.net/gh/solmopark/oworld/docs/img/type3_hover.png') center center/cover no-repeat;}
	#content section.type3 .secBox a.thumb:hover .txt .title:after {width:100%; opacity:1;}
}
@media only screen and (max-width: 2000px) {
	/* type1 */
	#content section.type1 .secBox a.thumb .txt {width: calc(98% - 13vw);}

	/* type3 */	
	#content section.type3 .secTitle:before {top: -70%;}
}
@media only screen and (max-width: 1600px) {
	#wrap {width:1200px;}

	#content section .secTitle {height:56px; font-size:34px; letter-spacing:-2px; margin-bottom:30px;}
	#content section .secTitle:before {width:60px; height:60px; top: -90%;}

	/* type1 */
	#content section.type1 .secTitle {margin-bottom:90px;}
	#content section.type1 .secBox a.thumb .txt{font-size: 18px; line-height: 28px; width: calc(98% - 15vw);}
	#content section.type1 .secBox a.thumb .img img {width: 210px; height: 210px; }

	/* type3 */	
	#content section.type3 .secTitlec{height: auto;}
	#content section.type3 .secTitle:before {top: -65%;}
	#content section.type3 .secBox a.thumb .txt .title img {height:20px;}
    #content section.type3 .secBox a.thumb .txt {font-size:18px; line-height:28px;}
	#content section.type3 .secBox a.thumb .txt .title:before {width:28px; height:28px;}

	/* type4 */
	#content section.type4 .secTitle {margin-bottom: 20px;}
}

@media only screen and (max-width: 1400px) {
	#wrap {width:1140px;}
	#content section .secTitle {height:56px; font-size:32px; letter-spacing:-2px; margin-bottom:40px;}
	#content section .secTitle:before {width:55px; height:55px;}

	
}

@media only screen and (max-width: 1200px) {
	#wrap {width:100%; padding:0 40px;}
	#content {padding-top:100px;}
	#content section .secTitle {height:auto; font-size:2.8vw; letter-spacing:-0.1vw; margin-bottom:3vw;}
	#content section .secTitle:before {width: 5vw; height: 5vw; top: -75%;}

	/* type1 */
	#content section.type1 {margin-bottom: 60px;}
	#content section.type1 .secBox a.thumb .txt{font-size: 1.5vw; line-height: 2vw; width: calc(98% - 17vw);}
	#content section.type1 .secBox a.thumb .txt .text {margin-bottom: 30px;}
	#content section.type1 .secBox a.thumb .img img {width: 16vw; height: 16vw; }
	#content section.type1 .secBox a.thumb .img:before {display:none;}

	/* type2 */
	#content section.type2 {margin-bottom: 15vw;}

	/* type3 */
	#content section.type3 .secBox a.thumb .txt .title img {height:1.725vw; top:0.3vw;}

    #content section.type3 .secTitle {height:auto;}
	#content section.type3 .secTitle:before {top: -105%;}
	#content section.type3 .secBox a.thumb  {border-radius:2.5vw;}
	#content section.type3 .secBox a.thumb .txt {font-size:1.5vw; line-height:2vw; padding:3.5vw 2.5vw;}
	#content section.type3 .secBox a.thumb .txt .title:before {width:2vw; height:2vw; top:0.5vw;}
	#content section.type3 .secBox a.thumb .txt .title:after {display:none;}
	#content section.type3 .secBox a.thumb .txt .title.second {padding-left:calc(2vw + 10px);}
	#content section.type3 .secBox a.thumb .txt .text {margin-top:1.5vw;}

	/* type4 */
	#content section.type4 .secTitle {margin-bottom: 0;}
}
@media only screen and (max-width:1000px) {
	/* type3 */
    #content section.type3 .secBox.ver4 > a.thumb {width:calc((100% - 15px) / 2);}
	#content section.type3 .secBox {margin-bottom:-15px;}
	#content section.type3 .secBox a.thumb {margin-bottom:15px;}
}
@media only screen and (max-width: 800px) {
	#wrap {padding:0 20px;}
	#content section {margin-bottom:80px;}
	#content section .secTitle {font-size:3.2vw; margin-bottom:20px;}

	/* type1 */
	#content section.type1 .secBox a.thumb{margin-bottom: 10px;}
	#content section.type1 .secBox.ver4 > a.thumb {width: calc((100% - 10px) / 2); }
	#content section.type1 .secBox a.thumb .txt {width: calc(100% - 17vw); text-align: left; font-size: 1.8vw; line-height: 2.3vw; padding-left: 2vw;}
	#content section.type1 .secBox a.thumb .txt .title {font-size: 1.2em;;}
	#content section.type1 .secBox a.thumb .txt .text {margin-bottom: 20px;}
	#content section.type1 .secBox a.thumb .img img {width: 17vw; height: 17vw;}
	#content section.type1 .secBox a.thumb .more {width:22%;}

	/* type3 */
	#content section.type3 .secBox a.thumb .txt .title img {height:1.9vw;}

    #content section.type3 .secBox {margin-bottom:-10px;}
	#content section.type3 .secBox.ver4 > a.thumb {width:calc((100% - 10px) / 2);}
	#content section.type3 .secBox a.thumb {border-radius:20px; margin-bottom:10px;}
	#content section.type3 .secBox a.thumb .txt {font-size:1.6vw; line-height:2.3vw; padding:3.5vw 2vw;}
	#content section.type3 .secBox a.thumb .txt .title:before {width:2.3vw; height:2.3vw; margin-right:5px; background-size:100%;}
	#content section.type3 .secBox a.thumb .txt .title.second {padding-left:calc(2.3vw + 5px); margin-top:2px; margin-bottom:0.2vw;}
	#content section.type3 .secBox a.thumb .txt .text {margin-top:1vw;}
}
@media only screen and (max-width: 600px) {

	#content {padding-top:10px;}
	#content section{margin-bottom: 50px;}
	#content section.type1 {padding-top:80px; margin-bottom:80px;}
	#content section .secTitle {font-size:5.5vw; margin-bottom:3vw;}
	#content section .secTitle:before {width:9vw; height:9vw; top:-60%;}
	#content section.type3 .secBox a.thumb .txt .title img {height:3.2vw; top:0.5vw;}

	/* type1 */
	#content section.type1 .secTitle {margin-bottom: 3vw;}
	#content section.type1 .secBox a.thumb{padding: 3vw 4vw; margin-bottom: 3vw;}
	#content section.type1 .secBox.ver4 > a.thumb {width: 100%; }
	#content section.type1 .secBox a.thumb .txt { width: calc(100% - 28vw); ext-align: left; font-size: 2.8vw; line-height: 3.8vw; padding-left: 5vw;}
	#content section.type1 .secBox a.thumb .img img {width: 28vw; height: 28vw;}

	/* type3 */
	#content section.type3 .secTitle:before {top: -115%;}
    #content section.type3 .secBox.ver4 > a.thumb {width:100%;}
	#content section.type3 .secBox a.thumb {border-radius:20px; margin-bottom:5vw;}
	#content section.type3 .secBox a.thumb .txt {font-size:2.8vw; line-height:3.8vw; padding:6vw;}
	#content section.type3 .secBox a.thumb .txt .title:before {width:3.8vw; height:3.8vw; top:0.7vw;}
	#content section.type3 .secBox a.thumb .txt .title.second {padding-left:calc(3.8vw + 5px);}
	#content section.type3 .secBox a.thumb .txt .text {margin-top:1.5vw;}

	/* type4 */
	#content section.type4 .secTitle {text-align: center; margin-bottom: 3vw;}
}