@charset "utf-8"; :root{ /* 월호 디자인 배경색 --background-body에 입력 */ --background-body:linear-gradient(180deg, #fbf1e0 , #fbf6ec 60%); --background-type1:#eff8ff; --background-type4:#ee3645; --background-type6-1:#dceeff; --background-type6-2:#f4fff4; --background-type6-3:#fff6ee; --background-fff:#fff; --banner-type1-color:#229573; --banner-type1-BG:#eefffa; --banner-type2-color:#eeb200; --banner-type2-BG:#fffce9; --banner-type3-color:#64b65d; --banner-type3-BG:#f0ffef; --color-type1:#4394d6; --color-type2:#f1602c; --color-type3:#fff; --color-type4:#ee3645; --color-type5:#d70695; --color-type6-1:#2d82c7; --color-type6-2:#64b65d; --color-type6-3:#f37028; } /* setting -- START */ #wrap {width:1300px; margin:0 auto; position:relative;} /* setting -- END */ /* header -- START */ #header {position:fixed; top:0; left:0; z-index:990; background:#fff; border-bottom:1px solid #eee; width:100%; height:100px; padding:0 60px; display:flex; flex-flow:row; justify-content:space-between; align-items:center;} #header a.logo {display:inline-block;} #header .left {display:flex; flex-flow:row; justify-content:flex-start; align-items:center; font-size:16px;} #header .left .volList {width:120px; height:34px; display:block; position:relative;} #header .left .volList button {width:100%; height:34px; font-weight:600; text-align:left; padding:0 10px; outline:0; border:1px solid #777; background:#fff; color:#777;} #header .left .volList button span {font-size:0.5em; position:relative; bottom:2px; padding-left:10px;} #header .left .volList .list {width:100%; height:0; padding:0 0 0 8px; overflow-Y:auto; background:#fff; position:absolute; top:100%; left:0; border:1px solid #777; border-bottom:0; border-top:0; transition:0.3s ease-out;} #header .left .volList .list::-webkit-scrollbar {width:12px;} #header .left .volList .list::-webkit-scrollbar-track {background-color:#fff;} #header .left .volList .list::-webkit-scrollbar-thumb {background-color:#babac0; border-radius:16px; border:4px solid #fff;} #header .left .volList .list::-webkit-scrollbar-button {display:none;} #header .left .volList .list li {border-bottom:1px solid #ccc;} #header .left .volList .list li:last-child {border-bottom:0;} #header .left .volList .list li a {height:34px; line-height:38px; padding:0 10px; display:block; font-size:15px;} #header .left .volList.active button span {display:inline-block; transform:rotate(180deg); bottom:1px; padding-left:0; padding-right:10px;} #header .left .volList.active .list {height:170px; border-bottom:1px solid #777;} /* script 확인 필요 */ #header .left .subscript {display:inline-block; cursor:pointer; background:#f0541b; height:34px; line-height:34px; padding:0 15px; margin-left:10px;} #header .left .subscript span {position:relative; color:#fff; font-weight:600;} #header .left .subscript span:before {content:''; display:inline-block; position:relative; top:2px; width:20px; height:15px; margin-right:5px; background:url('../images/apply_icon.png') center center/cover no-repeat;} #header .right {display:flex; flex-flow:row; align-items:center; justify-content:center;} #header .right a.sns {width:auto; height:40px; padding:0 5px; margin:0 5px; display:flex; flex-flow:row; align-items:center; justify-content:center;} #header .right a.sns:last-child {padding-right:0;} #header .right a.sns img {height:25px; opacity:0.8; display:inline-block; transition:All .3s ease; -webkit-transition:All .3s ease; -moz-transition:All .3s ease; -o-transition:All .3s ease;} #header .right a.sns:hover img {opacity:1;} /* header -- END */ /* visual -- START */ #visual {position:relative; z-index:989; width:100%; height:40.1175vw; margin-top:100px; background:url('../images/visualBG.jpg') #faf1e0 top center/cover no-repeat; padding-top:5%;} #visual .visualText {width:100%; font-family:'IM_Hyemin-Bold'; font-size:26px; letter-spacing:-2.5px; display:flex; flex-flow:column; justify-content:center; align-items:center;} #visual .visualText .volKeyword {font-size:1.6em; margin-bottom:20px;} #visual .visualText .volKeyword span {position:relative;} #visual .visualText .volKeyword span:after {content:'ㆍㆍㆍㆍㆍㆍ'; overflow:hidden; position:absolute; width:100%; height:10px; line-height:10px; top:-10px; left:0; word-break:keep-all; color:#d15050;;} #visual .visualText .volTitle {font-family:'IM_Hyemin-Regular'; font-size:2.4em; margin-bottom:40px; position:relative;} #visual .visualText .volDate {background:#fff; color:#333; display:inline-block; padding:12px 60px; border-radius:40px;} #visual .visualText .volDate .date {display:inline-block; letter-spacing:-1px;} #visual .visualText .volDate .date:after {content:'｜'; font-family:'IM_Hyemin-Regular'; display:inline;} #visual .visualText .volDate .date .en {font-family:'IM_Hyemin-Regular'; letter-spacing:0;} #visual .visualText .volDate .num {display:inline-block;} #visual .visualText .volDate .num:before {content:'vol. '; letter-spacing:0; display:inline-block;} #visual .visualText .volKeyword.white {color:#604533;} #visual .visualText .volKeyword.white span {color:#d15050;;} #visual .visualText .volTitle.white {color:#604533;} #visual .visualText .volTitle.white span {color:#d15050;;} #visual .visualText .volDate.black {background:#333; color:#fff;} #visual .visualText .volTitle .deco {position:absolute; top:-112px; left:-9px; width:23px; height:30px;} #visual .visualText .volTitle .deco2{position:absolute; top:-116px; right:288px; width:20px; height:30px;} /* visual -- 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:'Cafe24Ssurround'; font-size:40px; letter-spacing:-2.5px; text-align:center; margin-bottom:40px;} #content section .secTitle:before {content:''; width:100px; height:70px; display:block; background:url('../images/secTitleBG.png') top center/cover no-repeat; position:absolute; bottom:70%; left:50%; transform:translateX(-50%);} #content section .secTitle span {font-size:0.7em;} #content section a.thumb {transition:All .2s ease; -webkit-transition:All .2s ease; -moz-transition:All .2s ease; -o-transition:All .2s ease;} #content section.type1 {} #content section.type1 .secBox {position:relative; display:flex; flex-flow:row; 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% - 60px) / 4);} #content section.type1 .secBox a.thumb {position:relative; z-index:2; display:flex; flex-flow:column; justify-content:flex-start; align-items:center; text-align:center; padding:26px 15px; border-radius:20px; border:4px solid #fff; background:#fff; -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.type1 .secBox a.thumb .img {position:relative; font-size:0; line-height:0; margin-bottom:25px;} #content section.type1 .secBox a.thumb .img:before {content:'“'; position:absolute; top:55px; left:5px; font-family:'yg-jalnan'; font-size:0; color:var(--color-type1); 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:100%; height:calc(100% - 275px); font-size:20px; line-height:30px; display:flex; flex-flow:column; align-items:stretch; 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 .title {min-height:63px; font-family:'SBAggroM'; font-size:1.3em; line-height:1.2em; display:flex; justify-content:center; align-items:center;} #content section.type1 .secBox a.thumb .txt .text {min-height:90px; margin-top:15px; display:flex; justify-content:center; align-items:center;} #content section.type1 .secBox img.deco {position:absolute; top:-100px; right:28.5%; z-index:1;} #content section.type2 {} #content section.type2 .secBox {display:flex; flex-flow:column;} #content section.type2 .secBox a.thumb {position:relative; display:flex; flex-flow:row; align-items:center; margin:20px 0;} #content section.type2 .secBox a.thumb:nth-child(even) {flex-flow:row-reverse;} #content section.type2 .secBox a.thumb .img {position:absolute; bottom:-10px; z-index:2; font-size:0; line-height:0;} #content section.type2 .secBox a.thumb .img:before {content:'“'; position:absolute; top:55px; left:5px; font-family:'yg-jalnan'; font-size:0; color:var(--color-type2); text-shadow:0px 4px var(--background-body), 4px 0px var(--background-body), 3.5px 2px var(--background-body), 2px 3.5px var(--background-body), -2px 3.5px var(--background-body), 3.5px -2.5px var(--background-body); transition:All .2s ease; -webkit-transition:All .2s ease; -moz-transition:All .2s ease; -o-transition:All .2s ease;} #content section.type2 .secBox a.thumb .img img {width:250px; height:250px; border-radius:100%; overflow:hidden;} #content section.type2 .secBox a.thumb .txt {font-size:20px; line-height:30px; padding:40px 30px; background:#fff; border-radius:0 40px 40px 40px; height:fit-content; min-height:2.25rem; width:fit-content; max-width:66%; box-shadow:0 0 2rem rgb(0 0 0 / 8%), 0rem 1rem 1rem -1rem rgb(0 0 0 / 10%); margin:0 30px 0 280px; 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.type2 .secBox a.thumb:nth-child(even) .txt {text-align:right; margin:0 280px 0 30px; border-radius:40px 0 40px 40px;} #content section.type2 .secBox a.thumb .txt .title {font-family:'SBAggroM'; font-size:1.3em; line-height:1.2em;} #content section.type2 .secBox a.thumb .txt .text {margin-top:15px;} #content section.type2 .secBox img.deco {position:absolute; top:-150px; right:20px; z-index:1;} #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:7px; width:30px; height:30px; display:inline-block; margin-right:10px; background:url('../images/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;} /* 202209 --- START */ #content section.type3 .secBox a.thumb .txt .title img {position:relative; top:4px;} @media only screen and (max-width: 1600px) { #content section.type3 .secBox a.thumb .txt .title img {height:20px;} } @media only screen and (max-width: 1200px) { #content section.type3 .secBox a.thumb .txt .title img {height:1.725vw; top:0.3vw;} } @media only screen and (max-width: 800px) { #content section.type3 .secBox a.thumb .txt .title img {height:1.9vw;} } @media only screen and (max-width: 600px) { #content section.type3 .secBox a.thumb .txt .title img {height:3.2vw; top:0.5vw;} } /* 202209 --- END */ #content section.type4 {margin-bottom:60px;} #content section.type4 .secBox {display:flex; flex-flow:column; flex-wrap:wrap; justify-content:space-between;} #content section.type4 .secBox a.thumb {display:flex; flex-flow:row; justify-content:space-between; align-items:center; margin-bottom:20px; border-radius:30px; font-size:20px; line-height:30px; background:#fff; 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.type4 .secBox a.thumb .title {position:relative; padding:20px 40px; font-family:'SBAggroM'; font-size:1.3em; line-height:1.2em; transition:All .3s ease-out; -webkit-transition:All .3s ease-out; -moz-transition:All .3s ease-out; -o-transition:All .3s ease-out;} #content section.type4 .secBox a.thumb .title:before {content:'“'; position:absolute; top:25px; left:40px; font-family:'yg-jalnan'; font-size:0; color:var(--color-type4); transition:All .3s ease; -webkit-transition:All .3s ease; -moz-transition:All .3s ease; -o-transition:All .3s ease;} #content section.type4 .secBox a.thumb .info {position:relative; padding:20px 40px 20px 20px; text-align:right; color:#fff; background:var(--color-type4); opacity:0.7; transition:All .3s ease-out; -webkit-transition:All .3s ease-out; -moz-transition:All .3s ease-out; -o-transition:All .3s ease-out;} #content section.type4 .secBox a.thumb .info:before {content:''; width:0; height:0; position:absolute; top:0; right:100%; border-top:100px solid; border-top-color:var(--color-type4); border-left:40px solid transparent; transition:All .3s ease-out; -webkit-transition:All .3s ease-out; -moz-transition:All .3s ease-out; -o-transition:All .3s ease-out;} #content section.typeBanner {margin-top:-50px; /* margin-top:-80px; */} #content section.typeBanner a.banner.type1 {background:var(--banner-type1-BG); display:flex; flex-flow:row; justify-content:space-around; align-items:center; margin-bottom:20px; border-radius:30px; font-size:22px; line-height:30px; 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%); padding:0 50px;} #content section.typeBanner a.banner.type1 .img {width:33%; padding-top:50px; text-align: center;} #content section.typeBanner a.banner.type1 .img img {vertical-align:bottom; transition:All .3s ease-out; -webkit-transition:All .3s ease-out; -moz-transition:All .3s ease-out; -o-transition:All .3s ease-out;} /* #content section.typeBanner a.banner.type1 .txt {margin-left:3%;} */ #content section.typeBanner a.banner.type1 .txt .info {font-family:'IM_Hyemin-Bold'; font-size:0.95em; margin-bottom:15px;} #content section.typeBanner a.banner.type1 .txt .title {position:relative; color:var(--banner-type1-color); display:flex; flex-flow:row; flex-wrap:wrap; font-family:'SBAggroB'; font-size:1.8em; line-height:1.2em; margin-bottom:25px;} #content section.typeBanner a.banner.type1 .txt .title .theme {position:relative; margin-right:20px;font-family:'SBAggroB';color:var(--banner-type1-color); } #content section.typeBanner a.banner.type1 .txt .title .theme:after {content:''; position:absolute; bottom:0; left:0; width:0; height:4px; opacity:0.5; display:block; background:var(--banner-type1-color); transition:All .6s ease; -webkit-transition:All .6s ease; -moz-transition:All .6s ease; -o-transition:All .6s ease;} /* 202210 #content section.typeBanner a.banner.type1 .txt .title .theme:last-child:after {background:var(--banner-type2-color);} */ #content section.typeBanner a.banner.type1 .txt .title .vol {display:inline-block; color:#333; font-family:'IM_Hyemin-Bold'; font-size:0.7em;} #content section.typeBanner a.banner.type2 {background:var(--banner-type2-BG); display:flex; flex-flow:row; justify-content:space-between; align-items:center; margin-bottom:20px; border-radius:30px; font-size:22px; line-height:30px; 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%); padding:0 80px;} #content section.typeBanner a.banner.type2 .img {padding:30px;} #content section.typeBanner a.banner.type2 .img img {width:90%; vertical-align:bottom; transition:All .3s ease-out; -webkit-transition:All .3s ease-out; -moz-transition:All .3s ease-out; -o-transition:All .3s ease-out;} #content section.typeBanner a.banner.type2 .txt {margin-left:3%;} #content section.typeBanner a.banner.type2 .txt .intro {font-family:'IM_Hyemin-Bold'; font-size:0.95em; margin-bottom:20px;} #content section.typeBanner a.banner.type2 .txt .title {position:relative; color:var(--banner-type2-color); font-family:'SBAggroB'; font-size:1.8em; line-height:1.2em; margin-bottom:25px;} #content section.typeBanner a.banner.type2 .txt .title:after {content:''; position:absolute; bottom:0; left:0; width:20%; height:4px; opacity:0; display:block; background:var(--banner-type2-color); transition:All .8s ease; -webkit-transition:All .8s ease; -moz-transition:All .8s ease; -o-transition:All .8s ease;} #content section.typeBanner a.banner.type2 .txt .title .light {font-family:'SBAggroM';} #content section.typeBanner a.banner.type2 .txt .info {font-weight:500;} #content section.typeBanner .secBox {display:flex; flex-flow:row; justify-content:space-between; align-items:strech;} #content section.typeBanner .secBox .left {display: flex; flex-flow: row; justify-content: space-between; width: calc(100% / 2 - 10px);} #content section.typeBanner .secBox .right {display: flex; flex-flow: row; justify-content: space-between; width: calc(100% / 2 - 10px);} #content section.typeBanner .secBox a.banner.type3 {background:var(--banner-type2-BG); display:flex; flex-flow:row; justify-content:space-between; align-items:center; width:100%; margin-bottom:20px; border-radius:30px; font-size:22px; line-height:30px; 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%); padding:40px 45px;} #content section.typeBanner .secBox a.banner.type3 .img {display:flex;flex-flow: column nowrap; justify-content: space-between; align-items: center; width:24%;} #content section.typeBanner .secBox a.banner.type3 .img img {width:100%; vertical-align:bottom; transition:All .3s ease-out; -webkit-transition:All .3s ease-out; -moz-transition:All .3s ease-out; -o-transition:All .3s ease-out;} #content section.typeBanner .secBox a.banner.type3 .logo {width: 140px; margin-left:6px; padding-bottom:10px;} #content section.typeBanner .secBox a.banner.type3 .logo img{max-width:100%;} #content section.typeBanner .secBox a.banner.type3 .small {width:120px;} /* 202302 */ #content section.typeBanner a.banner.type1 .txt {margin-right:6%;} #content section.typeBanner a.banner.type1:nth-child(3) .txt {margin-right:3%;} #content section.typeBanner a.banner.type2:nth-child(4) .img {padding:2.4rem 0;} #content section.typeBanner a.banner.type2:nth-child(4) .img img {width:100%;} /* 202301 */ #content section.typeBanner .secBox a.banner.type3.BG {background:var(--banner-type3-BG);} #content section.typeBanner .secBox a.banner.type3 .txt {padding-bottom:1rem;} #content section.typeBanner .secBox a.banner.type3 .txt .intro {font-family:'IM_Hyemin-Bold'; font-size:0.95em; margin-bottom:20px; letter-spacing: -0.4px;} #content section.typeBanner .secBox a.banner.type3 .txt .title {position:relative; color:var(--banner-type2-color); font-family:'SBAggroB'; font-size:1.8em; line-height:1.2em; margin-bottom:25px;} #content section.typeBanner .secBox a.banner.type3 .txt .title:after {content:''; position:absolute; bottom:0; left:0; width:20%; height:4px; opacity:0; display:block; background:var(--banner-type2-color); transition:All .8s ease; -webkit-transition:All .8s ease; -moz-transition:All .8s ease; -o-transition:All .8s ease;} #content section.typeBanner .secBox a.banner.type3 .txt .title .light {font-family:'SBAggroM';} #content section.typeBanner .secBox a.banner.type3 .txt .title > small {font-family:'SBAggroM';} #content section.typeBanner .secBox a.banner.type3 .txt .title .second {font-size:;} #content section.typeBanner .secBox a.banner.type3 .txt .info {font-weight:500; letter-spacing: -0.04em;} #content section.typeBanner .secBox a.banner.type3 .txt .title .vol {display:inline-block; color:#333; font-family:'IM_Hyemin-Bold'; font-size:0.65em;} /* 202209 --- START */ @media only screen and (max-width: 1600px) { } @media only screen and (max-width: 1200px) { } @media only screen and (max-width: 800px) { } @media only screen and (max-width: 600px) { #content section.typeBanner {margin-top:-72px; /* margin-top:-80px; */} } /* 202209 --- END */ #content section.typeBanner .bannerBox {position:relative; overflow:hidden; display:flex; flex-flow:column; justify-content:space-between; align-items:flex-start; padding:10px 40px 0; margin-bottom:20px; border-radius:30px; font-size:20px; line-height:30px; background:#fff; 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.typeBanner .bannerBox:after {content:''; display:block; width:170px; height:165px; position:absolute; bottom:0; right:0; z-index:1; background:url('../images/typeBannerBoxBG.jpg') right bottom/cover no-repeat;} #content section.typeBanner .bannerBox a.bannerList {width:100%; border-bottom:1px solid #ccc; padding:30px 20px; font-family:'SBAggroM'; font-size:1.3em; line-height:1.2em; transition:All .3s ease-out; -webkit-transition:All .3s ease-out; -moz-transition:All .3s ease-out; -o-transition:All .3s ease-out;} #content section.typeBanner .bannerBox a.bannerList:last-child {border-bottom:0;} #content section.typeBanner .bannerBox a.bannerList .light {font-size:0.8em;} #content section.type5 .secBox {position:relative; overflow:hidden; display:flex; flex-flow:column; justify-content:space-between; align-items:flex-start; padding:10px 40px; margin-bottom:20px; border-radius:30px; background:#fff; 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.type5 .secBox a.thumb {position:relative; width:100%; display:flex; flex-flow:row; flex-wrap:wrap; justify-content:space-between; border-bottom:1px solid #ccc; padding:30px 20px 25px; font-size:20px; line-height:30px; transition:All .3s ease-out; -webkit-transition:All .3s ease-out; -moz-transition:All .3s ease-out; -o-transition:All .3s ease-out;} #content section.type5 .secBox a.thumb:last-child {border-bottom:0;} #content section.type5 .secBox a.thumb:before {content:'“'; position:absolute; top:35px; left:20px; font-family:'yg-jalnan'; font-size:0; color:var(--color-type5); transition:All .3s ease; -webkit-transition:All .3s ease; -moz-transition:All .3s ease; -o-transition:All .3s ease;} #content section.type5 .secBox a.thumb .title {width:100%; font-family:'SBAggroM'; font-size:1.3em; line-height:1.2em;} #content section.type5 .secBox a.thumb .title .light {font-size:0.8em;} #content section.type5 .secBox a.thumb .info {margin-top:5px;} #content section.type5 .secBox a.thumb .date b {margin-top:5px;font-weight:700;} #content section.type6 {} #content section.type6 .secTitle {text-align:left; padding-left:40px;} #content section.type6 .secTitle:before {left:0; transform:none;} #content section.type6 .secBox {display:flex; flex-flow:row; justify-content:space-between; align-items:strech;} #content section.type6 .left {width:calc(100% - 500px); display:flex; flex-flow:column; justify-content:space-between;} #content section.type6 .left .thumb {width:100%; height:calc(50% - 10px); border:5px solid #fff; position:relative; display:flex; flex-flow:row; justify-content:space-between; align-items:center; padding:30px 60px; font-size:19px; line-height:28px; border-radius:30px; background:#fff; 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%); transition:All .3s ease-out; -webkit-transition:All .3s ease-out; -moz-transition:All .3s ease-out; -o-transition:All .3s ease-out;} #content section.type6 .left .thumb .txt {} #content section.type6 .left .thumb .txt .title {font-family:'SBAggroM'; font-size:1.7em; line-height:1.2em; margin-bottom:5px; transition:All .3s ease-out; -webkit-transition:All .3s ease-out; -moz-transition:All .3s ease-out; -o-transition:All .3s ease-out;} #content section.type6 .left .thumb .txt .text {} #content section.type6 .left .thumb .link {height:100%; display:flex; flex-flow:row; align-items:center;} #content section.type6 .left .thumb .link a {font-family:'SBAggroL'; line-height:1; display:flex; justify-content:center; align-items:center; border-radius:100%; border:1px solid #333; width:80px; height:80px; margin:0 8px; padding-top:5px; 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.type6 .left .thumb .img {} #content section.type6 .left .thumb .img img {display:block;} #content section.type6 .right {width:480px;} #content section.type6 .right .thumb {position:relative; width:100%; height:100%; border:5px solid #fff; overflow:inherit !important; display:flex; flex-flow:column; justify-content:space-between; align-items:flex-start; padding:80px 60px; font-size:20px; line-height:30px; margin-bottom:20px; border-radius:30px; background:#fff; 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%); transition:All .3s ease-out; -webkit-transition:All .3s ease-out; -moz-transition:All .3s ease-out; -o-transition:All .3s ease-out;} #content section.type6 .right .thumb .title {font-family:'SBAggroM'; font-size:1.7em; line-height:1.2em; margin-bottom:-5px; transition:All .3s ease-out; -webkit-transition:All .3s ease-out; -moz-transition:All .3s ease-out; -o-transition:All .3s ease-out;} #content section.type6 .right .thumb .text {} #content section.type6 .right .thumb .info {margin-top:30px; font-family:'SBAggroL'; } #content section.type6 .right .thumb .info .team {font-family:'SBAggroM'; margin-bottom:2px;} #content section.type6 .right .thumb .info .call:before {content:''; display:inline-block; position:relative; top:5px; width:20px; height:20px; margin-right:8px; background:url('../images/type6_icon1.png') center center/cover no-repeat;} #content section.type6 .right .thumb .info .e-mail:before {content:''; display:inline-block; position:relative; top:5px; width:20px; height:20px; margin-right:8px; background:url('../images/type6_icon2.png') center center/cover no-repeat;} #content section.type6 .right .thumb .img {position:absolute; bottom:-30px; right:40px;} #content section.type6 .right .thumb .img img {} @media (hover:hover) { #content section.type1 .secBox a.thumb:hover {background:var(--background-type1); color:var(--color-type1);} #content section.type1 .secBox a.thumb:hover .img:before {font-size:80px;} #content section.type2 .secBox a.thumb:hover .txt {color:var(--color-type2);} #content section.type2 .secBox a.thumb:hover .img:before {font-size:80px;} #content section.type3 .secBox a.thumb:hover .txt .title:before {background:url('../images/type3_hover.png') center center/cover no-repeat;} #content section.type3 .secBox a.thumb:hover .txt .title:after {width:100%; opacity:1;} #content section.type4 .secBox a.thumb:hover .title {padding-left:80px; color:var(--color-type4);} #content section.type4 .secBox a.thumb:hover .title:before {font-size:60px;} #content section.type4 .secBox a.thumb:hover .info {opacity:1;} #content section.typeBanner a.banner.type1:hover .txt .title .theme:after {width:100%;} #content section.typeBanner a.banner.type1:hover .img img {transform:scale(1.05);} #content section.typeBanner a.banner.type2:hover .txt .title:after {width:100%; opacity:0.5;} #content section.typeBanner a.banner.type2:hover .img img {transform:scale(1.05);} #content section.typeBanner .secBox a.banner.type3:hover .txt .title:after {width:100%; opacity:0.5;} #content section.typeBanner .secBox a.banner.type3:hover .img img {transform:scale(1.05);} #content section.type5 .secBox a.thumb:hover {padding-left:50px;} #content section.type5 .secBox a.thumb:hover .title {color:var(--color-type5);} #content section.type5 .secBox a.thumb:hover:before {font-size:50px;} #content section.type6 .left .thumb .link a:hover {background:var(--color-type6-1); border:1px solid var(--color-type6-1); color:#fff;} #content section.type6 .left .thumb:hover:first-child {background:var(--background-type6-1);} #content section.type6 .left .thumb:hover:last-child {background:var(--background-type6-2);} #content section.type6 .left .thumb:hover:first-child .txt .title {color:var(--color-type6-1);} #content section.type6 .left .thumb:hover:last-child .txt .title {color:var(--color-type6-2);} #content section.type6 .right .thumb:hover {background:var(--background-type6-3);} #content section.type6 .right .thumb:hover .title {color:var(--color-type6-3);} } .w800_show {display:none;} .w600_show {display:none;} .w400_show {display:none;} .before {-webkit-filter:drop-shadow(1px 1px 0 black) drop-shadow(-1px -1px 0 black); filter:drop-shadow(1px 1px 0 black) drop-shadow(-1px -1px 0 black);} /* content -- END */ @media only screen and (max-width:1600px) { #wrap {width:1200px;} #visual {height:700px; margin-top:80px;} #visual .visualText {font-size:22px;} #visual .visualText .volTitle .deco {top:-91px; left:-9px; width:23px;} #visual .visualText .volTitle .deco2{top:-93px; right:236px; width:20px;} #content section .secTitle {height:56px; font-size:34px; letter-spacing:-2px; margin-bottom:30px;} #content section .secTitle:before {width:80px; height:56px; bottom:70%;} #content section.type1 .secBox a.thumb .img img {width:210px; height:210px;} #content section.type1 .secBox a.thumb .txt {height:auto; font-size:18px; line-height:28px;} #content section.type1 .secBox a.thumb .txt .title {min-height:57px;} #content section.type1 .secBox a.thumb .txt .text {min-height:84px;} #content section.type1 .secBox img.deco {height:120px; top:-70px; right:30%;} #content section.type2 .secBox a.thumb .img img {width:210px; height:210px;} #content section.type2 .secBox a.thumb .txt {font-size:18px; line-height:28px; margin:0 30px 0 240px;} #content section.type2 .secBox a.thumb:nth-child(even) .txt {margin:0 240px 0 30px;} #content section.type2 .secBox img.deco {height:120px; top:-100px; right:10px;} #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;} #content section.type4 .secBox a.thumb {font-size:18px; line-height:28px;} #content section.type4 .secBox a.thumb .title:before {left:30px;} #content section.typeBanner a.banner.type1 {font-size:20px; line-height:28px; padding:0 40px;} #content section.typeBanner a.banner.type1 .img {width:32%; text-align:center;} #content section.typeBanner a.banner.type2 {font-size:20px; line-height:28px; padding:0 100px;} #content section.typeBanner a.banner.type2 .img {text-align:center;} #content section.typeBanner a.banner.type2 .img img {width:85%;} /* 202302 */ #content section.type4 {margin-bottom:55px;} #content section.typeBanner a.banner.type1:nth-child(3) .img {padding-top:60px;} #content section.typeBanner a.banner.type2:nth-child(4) .img {padding: 2rem 0;} #content section.typeBanner .bannerBox {font-size:18px; line-height:28px;} #content section.typeBanner .bannerBox a.bannerList {padding:25px 20px;} #content section.type5 .secBox {padding:10px 40px;} #content section.type5 .secBox a.thumb {padding:25px 20px 20px; font-size:18px; line-height:28px;} #content section.type6 .secTitle {padding-left:30px;} #content section.type6 .left .thumb {font-size:17px; line-height:27px; padding:30px 40px;} #content section.type6 .right .thumb {font-size:18px; line-height:28px; padding:70px 40px;} #content section.type6 .right .thumb .title {line-height:1.4em; margin-bottom:5px;} #content section.type6 .right .thumb .info .team {font-size:1.1em; margin-bottom:5px;} #content section.type6 .right .thumb .info .call:before {width:16px; height:16px;} @media (hover:hover) { #content section.type1 .secBox a.thumb:hover .img:before {font-size:74px;} #content section.type2 .secBox a.thumb:hover .img:before {font-size:74px;} #content section.type4 .secBox a.thumb:hover .title {padding-left:75px;} #content section.type4 .secBox a.thumb:hover .title:before {font-size:65px;} #content section.type5 .secBox a.thumb:hover {padding-left:50px;} #content section.type5 .secBox a.thumb:hover .title {color:var(--color-type5);} #content section.type5 .secBox a.thumb:hover:before {font-size:50px;} } } @media only screen and (max-width:1400px) { #wrap {width:1140px;} #visual .visualText .volKeyword {margin-bottom:15px;} #visual .visualText .volTitle {margin-bottom:35px;} #visual .visualText .volDate {padding:10px 50px; border-radius:30px;} #content section .secTitle {height:56px; font-size:32px; letter-spacing:-2px; margin-bottom:40px;} #content section .secTitle:before {width:80px; height:56px; bottom:70%;} } @media only screen and (max-width:1200px) { #wrap {width:100%; padding:0 40px;} #content {padding-top:100px;} #visual {height:45vw; background-size:110%; margin-top:70px; padding-top:6vw;} #visual .visualText {font-size:1.5vw;} #visual .visualText .volKeyword {margin-bottom:0.8vw;} #visual .visualText .volTitle {margin-bottom:2.2vw;} #visual .visualText .volDate {padding:0.8vw 3vw; border-radius:3vw;} #visual .visualText .volTitle .deco {top:-71px; left:-9px; width:21px;} #visual .visualText .volTitle .deco2 {top:-75px; right:190px; width:17px;} #content section .secTitle {height:auto; font-size:2.8vw; letter-spacing:-0.1vw; margin-bottom:3vw;} #content section .secTitle:before {width:6vw; height:4.2vw; bottom:60%;} #content section.type1 .secBox a.thumb {border-radius:2.5vw; padding:2vw 0.5vw;} #content section.type1 .secBox a.thumb .img {margin-bottom:2vw;} #content section.type1 .secBox a.thumb .img:before {display:none;} #content section.type1 .secBox a.thumb .img img {width:17vw; height:17vw;} #content section.type1 .secBox a.thumb .txt {height:auto; font-size:1.5vw; line-height:2vw;} #content section.type1 .secBox a.thumb .txt .title {min-height:5vw; line-height:2.5vw;} #content section.type1 .secBox a.thumb .txt .text {min-height:6vw; margin-top:1.5vw;} #content section.type1 .secBox img.deco {height:10vw; top:-6vw; right:27vw;} #content section.type2 .secBox a.thumb {margin:15px 0;} #content section.type2 .secBox a.thumb .img img {width:18vw; height:18vw;} #content section.type2 .secBox a.thumb .txt {font-size:1.5vw; line-height:2vw; padding:3vw; border-radius:0 3vw 3vw 3vw; margin:0 20px 0 20vw;} #content section.type2 .secBox a.thumb:nth-child(even) .txt {border-radius:3vw 0 3vw 3vw; margin:0 20vw 0 20px;} #content section.type2 .secBox a.thumb .txt .text {margin-top:1.5vw;} #content section.type2 .secBox img.deco {height:10vw; top:-9vw; right:1vw;} #content section.type3 .secTitle {height:auto;} #content section.type3 .secTitle:before {bottom:85%;} #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;} #content section.type4 .secBox a.thumb:first-child {line-height:3vw;} /* 202301 */ #content section.type4 .secBox a.thumb {font-size:1.5vw; line-height:2vw; border-radius:2.1vw;} #content section.type4 .secBox a.thumb .title {padding:2vw 3vw;} #content section.type4 .secBox a.thumb .title:before {display:none;} #content section.type4 .secBox a.thumb .info {padding:1.5vw 3vw 1.5vw 2vw;} #content section.typeBanner a.banner.type1 {justify-content:space-evenly; font-size:1.65vw; line-height:2.15vw; border-radius:2.5vw; padding:0 1vw;} #content section.typeBanner a.banner.type1 .img {width:30%; padding-top:40px;} #content section.typeBanner a.banner.type1 .img img {width:100%;} #content section.typeBanner a.banner.type1 .txt {margin-right:1%;} #content section.typeBanner a.banner.type1 .txt .info {margin-bottom:1.5vw;} #content section.typeBanner a.banner.type1 .txt .title {margin-bottom:2vw;} #content section.typeBanner a.banner.type1 .txt .title .theme {margin-right:10px;} #content section.typeBanner a.banner.type2 {justify-content:space-evenly; font-size:1.65vw; line-height:2.1vw; border-radius:2.5vw; padding:0 1vw;} #content section.typeBanner a.banner.type2 .txt .intro {margin-bottom:1.5vw;} #content section.typeBanner a.banner.type2 .txt .title {margin-bottom:2vw;} #content section.typeBanner a.banner.type2 .img {width:30%;} #content section.typeBanner a.banner.type2 .img img {width:100%;} #content section.typeBanner .secBox a.banner.type3 {justify-content:space-between; font-size:1.65vw; line-height:2.1vw; border-radius:2.5vw; padding:15px 2vw;} #content section.typeBanner .secBox a.banner.type3 .txt .intro {margin-bottom:1.5vw;} #content section.typeBanner .secBox a.banner.type3 .txt .title {margin-bottom:2vw;} #content section.typeBanner .secBox a.banner.type3 .img{width:24.4%;} /* 202302 */ #content section.typeBanner a.banner.type1:nth-child(3) .txt {margin-right: -3%;} #content section.typeBanner .bannerBox {font-size:1.5vw; line-height:2vw; border-radius:2.5vw; padding:1vw 2.5vw 0;} #content section.typeBanner .bannerBox a.bannerList {padding:2vw 1vw;} #content section.type5 .secBox {padding:1vw 2.5vw; border-radius:2.5vw;} #content section.type5 .secBox a.thumb {padding:2vw 1vw 1.5vw; font-size:1.5vw; line-height:2vw;} #content section.type5 .secBox a.thumb:before {display:none;} #content section.type6 .secTitle {padding-left:3vw;} #content section.type6 .left {width:calc(60% - 20px)} #content section.type6 .left .thumb {font-size:1.5vw; line-height:2vw; padding:1vw 3vw; border-radius:2.5vw;} #content section.type6 .left .thumb .txt .title {font-size:1.5em; line-height:1.1em;} #content section.type6 .left .thumb .link a {width:70px; height:70px;} #content section.type6 .left .thumb .img {width:30%;} #content section.type6 .right {width:40%;} #content section.type6 .right .thumb {font-size:1.5vw; line-height:2vw; padding:3vw; border-radius:2.5vw;} #content section.type6 .right .thumb .title {line-height:1.4em; margin-bottom:5px;} #content section.type6 .right .thumb .info .team {font-size:1.1em; margin-bottom:5px;} #content section.type6 .right .thumb .info .call:before {width:16px; height:16px;} #content section.type6 .right .thumb .info .e-mail:before {width:16px; height:16px;} #content section.type6 .right .thumb .img {width:30%; bottom:-7%; right:3vw;} @media (hover:hover) { #content section.type1 .secBox a.thumb:hover {background:inherit; color:inherit;} #content section.type2 .secBox a.thumb:hover .txt {color:inherit;} #content section.type3 .secBox a.thumb:hover .txt .title:before {background:url('../images/type3_default.png') center center/cover no-repeat;} #content section.type3 .secBox a.thumb:hover .txt .title:after {width:100%; opacity:1;} #content section.type4 .secBox a.thumb:hover .title {padding-left:0; color:inherit;} #content section.type4 .secBox a.thumb:hover .info {opacity:0;} #content section.type5 .secBox a.thumb:hover {padding-left:0;} #content section.type5 .secBox a.thumb:hover .title {color:inherit;} #content section.type6 .left .thumb .link a:hover {background:inherit;} } } @media only screen and (max-width:1024px){ #visual .visualText .volTitle .deco {top:-62px; left:-7px; width:18px;} #visual .visualText .volTitle .deco2 {top:-65px; right:160px; width:15px;} #content section.typeBanner .secBox .right.right1 a.banner.type3 .img img {max-width: 90%;} #content section.type4 {margin-bottom:80px;} } @media only screen and (max-width:1000px) { #content section.type1 .secBox.ver3 > a.thumb {width:calc((100% - 30px) / 3);} #content section.type1 .secBox.ver4 > a.thumb {width:calc((100% - 45px) / 4);} #content section.type2 .secBox a.thumb {margin:10px 0;} #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;} #content section.type4 .secBox {padding-bottom:30px;} #content section.type4 .secBox a.thumb {margin-bottom:15px;} } @media only screen and (max-width:800px) { #wrap {padding:0 20px;} #visual {height:51vw; background-size:129%; /* background-size:115% */; margin-top:60px; padding-top:8vw;} #visual .visualText {font-size:1.8vw;} #visual .visualText .volKeyword {margin-bottom:0.8vw;} #visual .visualText .volTitle {margin-bottom:2.2vw;} #visual .visualText .volDate {padding:0.8vw 3vw; border-radius:3vw;} #visual .visualText .volTitle .deco {top:-55px; left:-6px; width:16px;} #visual .visualText .volTitle .deco2 {top:-60px; right:142px; width:12px;} #content section {margin-bottom:80px} #content section .secTitle {font-size:3.2vw; margin-bottom:20px;} #content section.type1 .secBox {flex-wrap:wrap; margin-bottom:-10px;} #content section.type1 .secBox.ver3 > a.thumb {width:calc((100% - 10px) / 3);} #content section.type1 .secBox.ver4 > a.thumb {width:calc((100% - 10px) / 2);} #content section.type1 .secBox a.thumb {flex-flow:row; justify-content:space-between; padding:2vw 1vw; border-radius:20px; margin-bottom:10px;} #content section.type1 .secBox a.thumb .img {margin-bottom:0;} #content section.type1 .secBox a.thumb .img img {width:17vw; height:17vw;} #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 {min-height:auto; line-height:1.2em; justify-content:flex-start;} #content section.type1 .secBox a.thumb .txt .text{min-height:auto; margin-top:1.5vw; justify-content:flex-start;} #content section.type1 .secBox img.deco {right:5vw;} #content section.type2 .secBox a.thumb .img {bottom:auto;} #content section.type2 .secBox a.thumb .img img {width:20vw; height:20vw;} #content section.type2 .secBox a.thumb .txt {font-size:1.8vw; line-height:2.3vw; padding:20px; border-radius:0 20px 20px 20px; margin:0 15px 0 calc(20vw + 15px);} #content section.type2 .secBox a.thumb:nth-child(even) .txt {border-radius:20px 0 20px 20px; margin:0 calc(20vw + 15px) 0 15px;} #content section.type2 .secBox a.thumb .txt .text {margin-top:1vw;} #content section.type2 .secBox img.deco {height:10vw; top:-6vw; right:1vw;} #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;} #content section.type4 .secBox a.thumb {font-size:1.6vw; line-height:2.3vw; border-radius:15px;} #content section.type4 .secBox a.thumb .title {padding:2vw 2.5vw 1.5vw;} #content section.type4 .secBox a.thumb .info {padding:1.5vw 2.5vw 1.5vw 1.5vw;} /* 202302 */ #content section.typeBanner a.banner.type1 {justify-content:space-evenly; font-size:1.6vw; line-height:2.2vw; border-radius:20px; padding:0 3vw;} #content section.typeBanner a.banner.type1 .img {width:45%; padding-top:4vw;} #content section.typeBanner a.banner.type1 .img img {width:80%;} #content section.typeBanner a.banner.type1:nth-child(3) .img {padding-top: 40px;} #content section.typeBanner a.banner.type1:nth-child(3) .img img {width:74%;} #content section.typeBanner a.banner.type1 .txt {margin-right:8%;} #content section.typeBanner a.banner.type1 .txt .info {margin-bottom:1.2vw;} #content section.typeBanner a.banner.type1 .txt .title {margin-bottom:1.8vw; flex-flow:column;} #content section.typeBanner a.banner.type1:nth-child(3) .txt {margin-right: 3%;} #content section.typeBanner a.banner.type2 {justify-content:space-evenly; font-size:1.6vw; line-height:2.2vw; border-radius:20px; padding:0 2vw;} #content section.typeBanner a.banner.type2 .img {width:30%;} #content section.typeBanner a.banner.type2 .img img {width:100%;} #content section.typeBanner a.banner.type2 .txt {margin-left:2%;} #content section.typeBanner .secBox a.banner.type3 {justify-content:space-between; font-size:1.6vw; line-height:2.2vw; border-radius:20px; padding:18px 2.5vw;} #content section.typeBanner .secBox .right a.banner.type3 .img {} #content section.typeBanner .secBox a.banner.type3 .logo {width: 88px; margin-left:-10px;} #content section.typeBanner .secBox a.banner.type3 .small img{margin-left:7px; max-width:75px;} /* 202302 */ #content section.type4 {margin-bottom:70px;} #content section.typeBanner .secBox .left.left1 a.banner.type3 {padding:18px 1.2vw 18px 1.5vw;} #content section.typeBanner .secBox .right.right1 a.banner.type3 .img {} #content section.typeBanner .secBox .right.right1 a.banner.type3 .img img {max-width: 100%;} #content section.typeBanner .bannerBox {font-size:1.6vw; line-height:2.3vw; border-radius:20px; padding:1vw 2.5vw 0;} #content section.typeBanner .bannerBox:after {width:105px; height:102px;} #content section.type5 .secBox {border-radius:20px; padding:1vw 2.5vw;} #content section.type5 .secBox a.thumb {padding:2vw 1vw 1.5vw; font-size:1.6vw; line-height:2.3vw;} #content section.type5 .secBox a.thumb:before {display:none;} #content section.type6 .secTitle {padding-left:3vw;} #content section.type6 .left {width:calc(60% - 10px); justify-content:center; margin-bottom:-10px;} #content section.type6 .left .thumb {font-size:1.6vw; line-height:2.2vw; padding:1vw 3vw; margin-bottom:10px; border-radius:20px;} #content section.type6 .left .thumb .txt .title {font-size:1.5em; line-height:1.1em; margin-bottom:1vw;} #content section.type6 .left .thumb .link a {width:8vw; height:8vw; padding-top:2px; margin:0 0.8vw;} #content section.type6 .left .thumb .img {width:30%;} #content section.type6 .right {width:40%;} #content section.type6 .right .thumb {font-size:1.6vw; line-height:2.2vw; padding:4vw 3vw; border-radius:20px;} #content section.type6 .right .thumb .title {line-height:1.3em; margin-bottom:5px;} #content section.type6 .right .thumb .info {margin-top:3vw;} #content section.type6 .right .thumb .info .team {font-size:1.1em; margin-bottom:5px;} #content section.type6 .right .thumb .img {width:30%; bottom:-7%; right:3vw;} .w800_show {display:block;} } @media only screen and (max-width:600px) { #content {padding-top:10px;} #visual {height:90vw; background-size:236%; margin-top:50px; padding-top:10vw;} #visual .visualText {font-size:4vw;} #visual .visualText .volKeyword {font-size:1.4em; margin-bottom:1.2vw;} #visual .visualText .volTitle {font-size:1.8em; margin-bottom:5vw;} #visual .visualText .volDate {padding:1vw 6vw; border-radius:3vw;} #visual .visualText .volTitle .deco {display:none;} #visual .visualText .volTitle .deco2 {display:none;} #content section {padding-top:40px; margin-bottom:40px;} #content section .secTitle {font-size:5.5vw; margin-bottom:3vw;} #content section .secTitle:before {width:10vw; height:7vw; bottom:60%;} #content section.type1 .secBox {margin-bottom:-3vw;} #content section.type1 .secBox a.thumb {margin-bottom:3vw;} #content section.type1 .secBox.ver3 > a.thumb {width:100%;} #content section.type1 .secBox.ver4 > a.thumb {width:100%;} #content section.type1 .secBox a.thumb {padding:3vw 4vw;} #content section.type1 .secBox a.thumb .img {margin-bottom:0;} #content section.type1 .secBox a.thumb .img img {width:28vw; height:28vw;} #content section.type1 .secBox a.thumb .txt {width:calc(100% - 28vw); text-align:left; font-size:2.8vw; line-height:3.8vw; padding-left:5vw;} #content section.type1 .secBox a.thumb .txt .text {margin-top:1.5vw;} #content section.type1 .secBox img.deco {height:20vw; top:-12vw; right:5vw;} #content section.type2 .secBox a.thumb {align-items:flex-start; margin:0 0 10px 0;} #content section.type2 .secBox a.thumb .img {position:relative;} #content section.type2 .secBox a.thumb .img img {width:28vw; height:28vw;} #content section.type2 .secBox a.thumb .txt {width:calc(100% - 28vw - 10px); font-size:2.8vw; line-height:3.8vw; padding:3vw 4vw; border-radius:0 20px 20px 20px; margin:8vw 0 0 10px;} #content section.type2 .secBox a.thumb:nth-child(even) .txt {border-radius:20px 0 20px 20px; margin:8vw 10px 0 0;} #content section.type2 .secBox a.thumb .txt .text {margin-top:1.5vw;} #content section.type2 .secBox img.deco {height:18vw; top:-6vw; right:0;} #content section.type3 .secBox.ver4 > a.thumb {width:100%;} #content section.type3 .secBox a.thumb {border-radius:20px; margin-bottom:10px;} #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;} #content section.type4 .secBox a.thumb {font-size:2.8vw; line-height:3.8vw; border-radius:12px; margin-bottom:10px;} #content section.type4 .secBox a.thumb .title {padding:1vw 4vw 0;} #content section.type4 .secBox a.thumb .info {padding:3.5vw 3vw 3.5vw 0;} #content section.type4 .secBox a.thumb .info:before {border-top-width:80px; border-left-width:30px;} #content section.typeBanner a.banner.type1 {justify-content: space-between; position:relative; align-items:flex-end; font-size:2.8vw; line-height:3.8vw; border-radius:20px; padding:0 5vw; margin-bottom:10px;} #content section.typeBanner a.banner.type1 .img {position:absolute; right:3vw; width:40%; padding-top:0;} #content section.typeBanner a.banner.type1 .img img {width:100%;} /* 임시 */#content section.typeBanner a.banner.type1:nth-child(3) .img img {width: 96%; margin-left: 10px;} #content section.typeBanner a.banner.type1 .txt {margin-right:0; padding:5vw 0;} #content section.typeBanner a.banner.type1 .txt .info {margin-bottom:2vw;} #content section.typeBanner a.banner.type1 .txt .title {margin-bottom:1.8vw; flex-flow:column;} #content section.typeBanner a.banner.type1 .txt .title .vol {font-size:0.6em; line-height:1.8em;} #content section.typeBanner a.banner.type2 {position:relative; justify-content:space-between; align-items:center; font-size:2.8vw; line-height:3.8vw; border-radius:20px; padding:0 4vw;} #content section.typeBanner a.banner.type2 .img {width:43%; padding: 1.7rem 0;} #content section.typeBanner a.banner.type2:nth-child(4) .img {padding: 2.5rem 0;} #content section.typeBanner a.banner.type2 .img img {width:100%;} #content section.typeBanner a.banner.type2 .txt {margin-left:0; padding:6vw 0;} #content section.typeBanner a.banner.type2 .txt .intro {margin-bottom:2.3vw; letter-spacing:-0.08em;} #content section.typeBanner a.banner.type2 .txt .title {font-size:1.5em; margin-bottom:1.5vw;} #content section.typeBanner .secBox {flex-flow: column;} #content section.typeBanner .secBox .left {width:100%;} #content section.typeBanner .secBox .right {width:100%;} #content section.typeBanner .secBox a.banner.type3 {position:relative; justify-content:space-between; align-items:center; font-size:2.8vw; line-height:3.8vw; border-radius:20px; padding:0 5vw; margin-bottom: 10px;} #content section.typeBanner .secBox a.banner.type3 .img {width:34%; padding: 2vw 0;} #content section.typeBanner .secBox a.banner.type3 .logo {margin-left: 6px; width:67px;} #content section.typeBanner .secBox a.banner.type3 .small {max-width: 56px;} #content section.typeBanner .secBox a.banner.type3 .txt {padding:6vw 0;} #content section.typeBanner .secBox a.banner.type3 .txt .intro {margin-bottom:2.3vw;} #content section.typeBanner .secBox a.banner.type3 .txt .title .vol {font-size:0.6em; line-height:1.8em;} #content section.typeBanner .secBox a.banner.type3.left .img {justify-content: center;} /* 202302 */ #content section.typeBanner .secBox .left.left1 a.banner.type3 {padding:0 5vw;} #content section.typeBanner .secBox .left.left1 a.banner.type3 .img {width:35%;} #content section.typeBanner .secBox .left.left1 a.banner.type3 .img img {max-width:100%;} #content section.typeBanner .secBox .right.right1 a.banner.type3 .img img {max-width: 78%;} #content section.type4 {margin-bottom:50px;} #content section.typeBanner .bannerBox {font-size:2.8vw; line-height:3.8vw; border-radius:20px; padding:1vw 2.5vw 0;} #content section.typeBanner .bannerBox:after {width:105px; height:102px;} #content section.type5 .secBox {border-radius:20px; padding:2vw 4vw;} #content section.type5 .secBox a.thumb {flex-flow:column; padding:3vw 1.5vw; font-size:2.8vw; line-height:3.8vw;} #content section.type6 .secTitle {padding-left:3vw;} #content section.type6 .secTitle:before {bottom:75%;} #content section.type6 .secBox {flex-flow:column;} #content section.type6 .left {width:100%; margin-bottom:0;} #content section.type6 .left .thumb {height:24vw; font-size:3vw; line-height:4vw; padding:0 6vw; border-radius:20px;} #content section.type6 .left .thumb .txt .title {font-size:1.4em; line-height:1.3em; margin-bottom:1.5vw;} #content section.type6 .left .thumb .link a {width:12vw; height:12vw; padding-top:2px; margin:0 1vw;} #content section.type6 .right {width:100%;} #content section.type6 .right .thumb {font-size:3vw; line-height:4vw; padding:4.5vw 6vw; border-radius:20px;} #content section.type6 .right .thumb .title {font-size:1.4em; line-height:1.3em; margin-bottom:1.5vw;} #content section.type6 .right .thumb .info {margin-top:5vw;} #content section.type6 .right .thumb .info .team {font-size:1.1em; margin-bottom:1vw;} #content section.type6 .right .thumb .info .call:before {top:3px; width:12px; height:12px;} #content section.type6 .right .thumb .info .e-mail:before {top:3px; width:12px; height:12px;} #content section.type6 .right .thumb .img {width:25%; bottom:-10%; right:10vw;} .w600_show {display:block;} /* .w800_show {display:none;} */ } @media only screen and (max-width:500px) { #visual {height:100vw; padding-top:14vw;} #content section.typeBanner .secBox a.banner.type3 .txt .info {letter-spacing: -0.5px;} #content section.typeBanner .secBox a.banner.type3 .img img {max-width:95px;} #content section.typeBanner .secBox a.banner.type3 .small img{max-width:79px;} #content section.typeBanner .secBox .right a.banner.type3 .img {padding-top:18px;} #content section.typeBanner a.banner.type1:nth-child(3) {align-items: center;} #content section.typeBanner a.banner.type1:nth-child(3) .img {padding-top: 0;} #content section.typeBanner a.banner.type2 {margin-bottom: 10px;} #content section.typeBanner a.banner.type2:nth-child(4) .img {padding: 2rem 0;} @media only screen and (max-width:425px){ .w400_show {display:block;} } @media only screen and (max-width:400px){ #content section.typeBanner .secBox a.banner.type3 .logo {margin-left: -34px; width:51px; margin-bottom:0;} #content section.typeBanner .secBox a.banner.type3 .logo img {max-width: 85px;} #content section.typeBanner .secBox a.banner.type3 .small {max-width:100px;} #content section.typeBanner .secBox a.banner.type3 .small img {width:50px;} #content section.typeBanner .secBox .right a.banner.type3 .img {padding-top:11px;} #content section.typeBanner .secBox a.banner.type3 .img {width:24%;} #content section.typeBanner .secBox .right.right1 a.banner.type3 .img img {max-width: 93%;} } @media only screen and (max-width:350px){ #content section.type4 {margin-bottom:40px;} /* 임시 */#content section.typeBanner a.banner.type1:nth-child(3) .img img {width: 90%; margin-left: 18px;} #content section.typeBanner a.banner.type2 .txt .info {letter-spacing: -0.05em;} #content section.typeBanner a.banner.type2 .img {width:38%; } }