@import url("common.css");

.container{overflow: hidden;}

/*** Visual ***/
#visual{width:calc(100% - 100px); overflow: hidden;  position: relative; margin:0 auto;}
#visual .visual_in {width: 100%; height: 800px; position: relative; background:#000; border-radius:var(--borderR30); overflow:hidden;}
#visual .visual_in .slick-list, #visual .visual_in .slick-track {height:100%;}
#visual .visual_in .roll{width: 100%; height: 100%; position:relative; overflow:hidden;}
#visual .visual_in .roll .v_txt {position: absolute; left: 50%; top:50%; transform:translate(-50%,-50%); z-index: 9999; text-align:center;}
#visual .visual_in .roll .v_txt h3 {color: var(--white); font-size: 3.667rem; font-weight: 700; line-height:120%; letter-spacing: -2.08px; text-shadow: var(--text-shadow); font-family:var(--title); filter: blur(5px); opacity: 0; }
#visual .visual_in .roll .v_txt p {font-weight: 700; color: rgba(255,255,255,.8); margin:40px 0 0; filter: blur(5px); opacity: 0; }

#visual .visual_in .roll .v_bg {position: absolute; left: 0; top:0; width: 100%; height: 100%;}
#visual .visual_in .roll .v_bg .bg {width: 100%; height: 100%; background-repeat:no-repeat; background-size:cover; background-position:center; -ms-transform: scale(1.1,1.1); -o-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1); -webkit-transition:transform 3000ms  ease-in-out; -moz-transition:transform 3000ms ease-in-out; -o-transition:transform 3000ms ease-in-out; -ms-transition:transform 3000ms ease-in-out; transition:transform 3000ms ease-in-out;}
#visual .visual_in .roll .v_bg .bg.mo {display:none;}

@keyframes fadeIn {
	0% { opacity: 0;}
	100% {opacity: 1;}
}

#visual .visual-info{background:var(--white); max-width:375px; width: 100%; box-sizing:border-box; padding:40px; border-radius:var(--borderR30) 0 0 0; position: absolute; right: 0; bottom: 0; z-index:99999; display: flex; align-items:center; justify-content: space-between;}
#visual .visual-info:before{content:''; display: block; width: 40px;	height: 40px; background:url('/img/radius.png') no-repeat center/contain; position:absolute; left:-40px; bottom:0;}
#visual .visual-info:after{content:''; display: block; width: 40px;	height: 40px; background:url('/img/radius.png') no-repeat center/contain; position:absolute; right:0; top:-40px;}

#visual .visual-info .info-in {display:flex; flex-wrap:wrap; gap:0 15px; align-items:center;}
#visual .visual-info .info-in .arrow {position:relative; width:auto; height:auto; display:block; font-size:0; line-height:1; transition:all 0.3s linear; border-radius:0; background-color:transparent; border:0; cursor:pointer;}
#visual .visual-info .info-in .arrow:hover {opacity:0.6; transition:all 0.3s linear;}
#visual .visual-info .info-in .arrow::before {content:'\e2ea'; font-size:20px; line-height:1; font-family:var(--icon); display:block; position:relative; color:var(--black);}
#visual .visual-info .info-in #prev::before {}
#visual .visual-info .info-in #next::before {transform: scaleX(-1);}

#visual .visual-info .slick-page {display:flex; flex-wrap:wrap; align-items:center; gap:0 5px; position:relative; top:1px;}
#visual .visual-info .slick-page li {font-size: 0.77rem; font-weight: 600; line-height:1; letter-spacing: -0.42px; color:var(--basic);}
#visual .visual-info .slick-page li.cur{color:var(--main);}

#visual .progress-round__wrap {position:relative; z-index:99; width:42px; height:42px; z-index:10;}
#visual .progress-round__wrap::after {content:''; width:100%; height:100%; border:3px solid rgba(34,34,34,0.2); border-radius:100%; position:absolute; top:0; left:0; z-index:-1; box-sizing:border-box;}
#visual .progress-round__wrap .progress {position:relative; display:block; width:100%; height:100%; box-sizing:border-box; border-radius:100%; overflow:visible !important;}
#visual .progress-round__wrap .progress circle {fill: transparent; stroke: var(--main); stroke-width: 3;}
#visual .progress-round__wrap .btn {position:absolute; top:0; left:0; width:100%; height:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; z-index:20;}
#visual .progress-round__wrap .btn::before {content:''; width: 8px; height: 10px; display: block; position: absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:url('/img/visual_play_btn.png') no-repeat center/contain;}
#visual .progress-round__wrap .btn.play::before { background:url('/img/visual_pause_btn.png') no-repeat center/contain;} 


/* 효과 */
#visual .visual_in .roll.action .v_bg .bg{transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1);}
#visual .visual_in .roll.action .v_txt h3 {animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 0.3s forwards;}
#visual .visual_in .roll.action .v_txt p {animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 0.3s forwards;}


/* QUICK LINK */
#quick{padding: 90px 0 170px;}
#quick dl{display: flex; flex-wrap:wrap; align-items:center;}
#quick dl dt{width: 270px;}
#quick dl dd{width: calc(100% - 270px);}
#quick dl dd ul{display: flex;}
#quick dl dd ul li{width: 16.66%; padding: 0 10px; box-sizing:border-box; border-right:1px solid var(--border); text-align:center;}
#quick dl dd ul li:last-child{border:0 !important;}
#quick dl dd ul li a{display: block;}
#quick dl dd ul li a svg{display: block; width: 40px; height: auto; margin: 0 auto 20px; transition:all .3s ease;}
#quick dl dd ul li a:hover svg{transform:translateY(-15px);}
#quick dl dd ul li a h4{font-size:1rem; font-weight: 600; color:var(--black); line-height: 120%; letter-spacing: -0.54px; transition:all .3s ease;} 
#quick dl dd ul li a:hover h4{color:var(--main);} 




/* BUSINESS */
#business{position: relative;}
#business .business_in{display: flex;}
#business .business_in > div{box-sizing:border-box;}
#business .business_in .img_area{width: 40%;}
#business .business_in .tit_area{width: 60%; padding: 70px 0 0 70px;}

#business .business_img{}
#business .business_img .roll{}
#business .business_img .roll .img{aspect-ratio:2/2.5; overflow:hidden; border-radius:var(--borderR50);}
#business .business_img .roll img{display: block; width: 100%; min-height:100%; object-fit:cover;}


#business .business_wrap{position: absolute; left: 0; top: 240px; width: 100%; z-index: 9991;}
#business .business_roll{overflow: visible; margin: 0 0 0 40%; max-width:1350px; width: 60%;}
#business .business_roll .roll{width:545px; position: relative; border-radius:var(--borderR60); overflow: hidden; transition: box-shadow 1s; opacity: 0.5;  opacity: 0; box-shadow:none;}
#business .business_roll .roll.swiper-slide-prev{}
#business .business_roll .roll.swiper-slide-active{opacity: 1; box-shadow: 126px 89px 43px 0px rgba(59, 59, 59, 0.00), 80px 57px 39px 0px rgba(59, 59, 59, 0.01), 45px 32px 33px 0px rgba(59, 59, 59, 0.02), 20px 14px 25px 0px rgba(59, 59, 59, 0.03), 5px 4px 14px 0px rgba(59, 59, 59, 0.04);}

#business .business_roll .roll.swiper-slide-active +.roll{opacity: 0.5; box-shadow: 126px 89px 43px 0px rgba(59, 59, 59, 0.00), 80px 57px 39px 0px rgba(59, 59, 59, 0.01), 45px 32px 33px 0px rgba(59, 59, 59, 0.02), 20px 14px 25px 0px rgba(59, 59, 59, 0.03), 5px 4px 14px 0px rgba(59, 59, 59, 0.04);}

#business .business_roll .roll .in{box-sizing:border-box; padding:55px; background:var(--grayBg); transition: opacity 1s, background 1s;}
#business .business_roll .roll .in:before{content:''; display: block; width: 100%; height: 100%; background:url('/img/business_ci.png') no-repeat right -50px bottom -50px/393px auto; mix-blend-mode: plus-lighter; position: absolute; left:0; top:0; opacity: 0;}
#business .business_roll .roll .eng_tit{display: block; position: relative; z-index: 2; }
#business .business_roll .roll .fs30{color:var(--black); text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block; position: relative; z-index: 2;}
#business .business_roll .roll .fs18{margin: 15px 0 0; color:rgba(34,34,34,.7); height:7.2em; line-height: 1.8em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;  position: relative; z-index: 2;}
#business .business_roll .roll .detail_btn{display: inline-block; font-size:0.889rem; font-weight: 600; color:var(--black); letter-spacing: -0.48px; line-height: 150%; margin: 30px 0 0; position: relative; z-index: 2;}
#business .business_roll .roll .detail_btn:after{content:'\e984'; display: inline-block; vertical-align: middle; margin: -2px 0 0 8px; font-size:24px; font-family:var(--icon); font-weight: 400; transform:rotate(-90deg);}


#business .business_roll .roll.swiper-slide-active .in{background:var(--main);}
#business .business_roll .roll.swiper-slide-active .eng_tit{color:var(--white);}
#business .business_roll .roll.swiper-slide-active .fs30{color:var(--white);}
#business .business_roll .roll.swiper-slide-active .fs18{color:rgba(255,255,255,.7);}
#business .business_roll .roll.swiper-slide-active .detail_btn{color:var(--white);}
#business .business_roll .roll.swiper-slide-active .in:before{opacity: 1;}

#business .swiper-button{padding:0; font-size:0; width:60px; height:60px; line-height: 60px; position: absolute; top:50%; margin-top: -30px; z-index: 9999; color:var(--black); transition:all .3s linear; cursor:pointer; border:0; overflow: hidden; background:none; border-radius:50%;}
#business .swiper-button:before{content:''; display: block; width: 100%; height: 100%; position: absolute; left:0; top:0; border-radius: 50%; background: rgba(255, 255, 255, 0.50); box-shadow: 4px 4px 30px 0px rgba(0, 0, 0, 0.15); backdrop-filter: blur(10px); transition:all .3s ease;}
#business .swiper-button:hover:before{background:var(--white);}
#business .swiper-button.swiper-button-prev{left: -25px; }
#business .swiper-button.swiper-button-next{right: auto; left: calc(50% - 55px);}
#business .swiper-button:after{content:'\e5e0'; display: block; width: 100%; height: 100%; font-size:24px; line-height: inherit; text-align:center; font-family:var(--icon); z-index: 9; position: absolute; top:0;}
#business .swiper-button.swiper-button-prev:after{left: 5px;}
#business .swiper-button.swiper-button-next:after{right: 5px; transform:rotate(180deg);}







/* 커뮤니티 */
#community{}
#community .community_in{display: flex;}
#community .community_in > article{box-sizing:border-box;}
#community .community_in > article .add_btn{display: block; width: 24px; height: 24px; line-height: 24px; font-size:0; position: absolute; text-align:center; color:var(--black); transition:all .3s ease;}
#community .community_in > article .add_btn:after{content:'\e145'; display: block; position: absolute; left:0; top:0; width: 100%; height:100%; font-size:24px; font-family:var(--icon);}
#community .community_in > article .add_btn:hover{transform:rotate(180deg); color:var(--main);}


#community .notice{width: 61%; padding: 0 50px 0 0;}
#community .notice .tit{position: relative; padding: 0 50px 0 0; box-sizing:border-box; margin: 0 0 18px; display: flex; align-items: flex-end;}
#community .community_tab{margin-left: 30px;}
#community .community_tab ul{display: flex; }
#community .community_tab ul li{font-size:1.111rem; font-weight: 700; color:rgba(34,34,34,.5); cursor:pointer; letter-spacing: -0.6px; line-height: 150%; transition:all .3s ease; margin: 0 20px 0 0; position: relative;}
#community .community_tab ul li:last-child{margin: 0;}
#community .community_tab ul li:hover{color:var(--black);}
#community .community_tab ul li.focus{color:var(--main) !important;}
#community .community_tab ul li:before{content:''; display: block; width: 6px; height: 6px; border-radius:50%; position: absolute; left:50%; top:-10px; margin-left: -3px; background:var(--main); opacity: 0; transition:all .3s ease;}
#community .community_tab ul li.focus:before{opacity: 1;}


#community .community_box{display: none; position: relative;}
#community .community_box .add_btn{position: absolute; right: 0; top:-45px;}
#community .community_box.focus{display: block;}
#community .community_box dl{border-top: 1px solid var(--black);}
#community .community_box dl a{display: flex; align-items:center; padding: 26px 0; transition:all .3s ease;}
#community .community_box dl a:hover{padding: 26px 20px; background:var(--grayBg); }
#community .community_box dl dt{width: 95px; height: 95px; border-radius:var(--borderR10); background:var(--main); text-align:center; color:var(--white); display: flex; flex-direction: column; justify-content: center;}
#community .community_box dl dt small{display: block; font-size:0.778rem; font-weight: 600; line-height: 120%; color:rgba(255,255,255,.6); margin: 0 0 5px;}
#community .community_box dl dt p{font-size:2rem; font-weight: 700; line-height: 120%;}
#community .community_box dl dd{width: calc(100% - 95px); padding: 0 30px; box-sizing:border-box;}
#community .community_box dl dd h4{line-height: 120%; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}
#community .community_box dl dd .txt{margin: 8px 0 0; line-height: 120%; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}
#community .community_box ul{border-top: 1px solid var(--border);}
#community .community_box ul li{border-bottom: 1px solid var(--border);}
#community .community_box ul li a{display: flex; align-items:center; padding: 25px 0; transition:all .3s ease;}
#community .community_box ul li a:hover{background:var(--grayBg); padding: 25px;}
#community .community_box ul li a h4{width: calc(100% - 80px); font-size:1rem; font-weight: 600; letter-spacing: -0.54px; line-height: 120%; color:var(--black); text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block; }
#community .community_box ul li a small{display: inline-block; width: 80px; text-align:right; font-size:0.889rem; color:#999;}


#community .sponsor{width: 39%;}
#community .sponsor .tit{position: relative; padding: 0 50px 0 0; box-sizing:border-box; margin: 0 0 18px;}
#community .sponsor .tit .add_btn{position: absolute; right: 0; top:50%; margin-top: -12px;}
#community .sponsor .sponsor_list{box-sizing:border-box; padding: 45px 50px 27px; background:var(--grayBg); border-radius:var(--borderR20);}
#community .sponsor .sponsor_list svg{width: 100px; height: auto; margin: 0 0 5px;}
#community .sponsor .sponsor_list .fs30{letter-spacing: 0;}
#community .sponsor .sponsor_list ul{}
#community .sponsor .sponsor_list ul li{font-size:0.889rem; letter-spacing: -0.48px; line-height: 160%; padding:15px 0 15px 86px; border-bottom: 1px solid var(--border); position: relative;}
#community .sponsor .sponsor_list ul li:last-child{border-bottom: 0;}
#community .sponsor .sponsor_list ul li b{position: absolute; left:0; top:15px; font-weight: 600; color:var(--black); line-height: inherit; letter-spacing: inherit;}
#community .sponsor .sponsor_list ul li b:before{display: inline-block; vertical-align: middle; margin: -2px 5px 0 0; font-family:var(--icon); font-weight: 400;}
#community .sponsor .sponsor_list ul li.name b:before{content:'\e851';}
#community .sponsor .sponsor_list ul li.tel b:before{content:'\e0b0';}
#community .sponsor .sponsor_list ul li.email b:before{content:'\e158';}
#community .sponsor .sponsor_list ul li span{display: inline-block;}
#community .sponsor .sponsor_info{border-bottom: 1px solid var(--border); padding: 15px 0; display: flex; align-items:center; justify-content: center; gap:20px;}
#community .sponsor .sponsor_info dt{font-size:0.889rem; font-weight: 600; color:var(--black); line-height: 130%; letter-spacing: -0.48px;}
#community .sponsor .sponsor_info dd{}
#community .sponsor .sponsor_info dd .sponsor_btn{display: inline-block; width: 107px; height: 36px; line-height: 34px; border-radius:50px; box-sizing:border-box; text-align:center; border:1px solid var(--main); background:var(--main); font-size:0.778rem; color:var(--white); font-weight:600; letter-spacing: -0.48px; transition:all .3s;}
#community .sponsor .sponsor_info dd .sponsor_btn:hover{background:var(--white); color:var(--main);}
#community .sponsor .sponsor_info dd .sponsor_btn:before{content:'\ea70'; margin: -2px 5px 0 0; display: inline-block; vertical-align: middle; font-size:20px; font-weight: 400; font-family:var(--icon);}





/* Partner */
#partner {overflow: hidden; width: 100%; padding: 30px 0;}
#partner .partner_roll_track {display: flex; width: max-content; will-change: transform;}
#partner .partner_roll_list {display: flex; animation: partnerRollRight 30s linear infinite;}
#partner .partner_roll_list > li {flex-shrink: 0; width: 282px;}
#partner .partner_roll_list > li a {display: flex; align-items: center; justify-content: center; aspect-ratio: 302 / 110;}
#partner .partner_roll_list > li a img {width: 100%; height: 100%; object-fit: cover;}

#partner .partner_roll_track:hover .partner_roll_list {animation-play-state: paused !important}

@keyframes partnerRollRight {
    0% {transform: translateX(0);}
    100% {transform: translateX(-50%);}
}

@keyframes partnerRollleft {
    0% {transform: translateX(-50%);}
    100% {transform: translateX(0);}
}





/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){



/* BUSINESS */
#business .business_roll{margin: 0 0 0 33.33%; width: 66.666%;}

}

/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){

/*** Visual ***/
#visual .visual_in .roll .v_txt h3 {font-size: 3.111rem;}



/* QUICK LINK */
#quick dl{align-items: flex-start;}
#quick dl dt{padding: 30px 0 0;}
#quick dl dd ul{flex-wrap:wrap;}
#quick dl dd ul li{width: 33.33%; padding: 30px 10px; border-right: 0; border-bottom:1px solid var(--border); position: relative;}
#quick dl dd ul li:after{content:''; display: block; width: 1px; height: 70%; background:var(--border); position: absolute; right: 0; top:50%; transform:translateY(-50%);}
#quick dl dd ul li:nth-child(3n):after{display: none;}
#quick dl dd ul li:nth-child(n+4){border-bottom: 0;}





/* BUSINESS */
#business{padding: 0 0 160px;}
#business .business_roll .roll .in{padding:45px;}






/* 커뮤니티 */
#community .sponsor .sponsor_list{padding: 35px 30px 22px;}
#community .sponsor .sponsor_list ul li{padding:13px 0 13px 86px;}
#community .sponsor .sponsor_list ul li b{top:13px;}
#community .sponsor .sponsor_list .fs30{font-size:1.556rem;}

}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){




/*** Visual ***/
#visual{width:calc(100% - 60px);}
#visual .visual_in {height: 600px;}
#visual .visual_in .roll .v_txt {}
#visual .visual_in .roll .v_txt h3 {font-size: 2.5rem;}
#visual .visual_in .roll .v_txt p {margin:20px 0 0;}
#visual .visual_in .roll .v_txt p br{display: none;}

#visual .visual-info{padding:20px;}



/* QUICK LINK */
#quick{padding: 70px 0 110px;}
#quick dl dt{width: 30%; padding: 20px 0 0;}
#quick dl dd{width: 70%;}



/* BUSINESS */
#business{padding: 0;}
#business .business_in{flex-wrap:wrap; flex-direction: column-reverse;}
#business .business_in .img_area{width: 50%;}
#business .business_in .tit_area{width: 100%; padding: 0 0 40px;}

#business .business_wrap{top: auto; bottom: 10%;}
#business .business_roll{margin: 0 0 0 40%; width: 90%;}
#business .business_roll .roll{}
#business .business_roll .roll .in{padding:35px;}
#business .business_roll .roll .eng_tit{}
#business .business_roll .roll .fs18{margin: 10px 0 0;}
#business .business_roll .roll .detail_btn{margin: 20px 0 0;}
#business .business_roll .roll .detail_btn:after{font-size:20px;}

#business .swiper-button{width:50px; height:50px; line-height: 50px; margin-top: -25px;}
#business .swiper-button.swiper-button-prev{left: -20px;}
#business .swiper-button.swiper-button-next{right: auto; left: calc(50% - 50px);}
#business .swiper-button:after{font-size:20px;}





/* 커뮤니티 */
#community{}
#community .community_in{flex-wrap:wrap;}

#community .notice{width: 100%; padding: 0 0 40px;}
#community .sponsor{width: 100%;}
#community .sponsor .sponsor_list ul{margin: 5px 0 0;}



/* Partner */
#partner .partner_roll_list > li {width: 250px;}



}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){

/*** Visual ***/
#visual{width:calc(100% - 30px);}
#visual .visual_in {height: 500px;}
#visual .visual_in .roll .v_txt {}
#visual .visual_in .roll .v_txt h3 {font-size: 2rem;}
#visual .visual_in .roll .v_txt p {margin:15px 0 0;}
#visual .visual_in .roll .v_bg .bg.mo {display:block;}

#visual .visual-info{max-width:60%; padding:10px;}
#visual .visual-info:before{width: 30px; height: 30px; left:-30px;}
#visual .visual-info:after{width: 30px;	height: 30px; top:-30px;}
#visual .visual-info .info-in {gap:0 10px;}
#visual .visual-info .info-in .arrow::before {font-size:16px;}



/* QUICK LINK */
#quick{padding: 60px 0;}
#quick dl{flex-wrap:wrap;}
#quick dl dt{width: 100%; padding: 0 0 20px; text-align:center;}
#quick dl dd{width: 100%;}
#quick dl dd ul{flex-wrap:wrap;}
#quick dl dd ul li{padding: 20px 5px;}
#quick dl dd ul li a{}
#quick dl dd ul li a svg{width: 35px; height: auto; margin: 0 auto 10px;}
#quick dl dd ul li a:hover svg{transform:translateY(0);}


/* BUSINESS */
#business{}
#business .business_in .img_area{width: 100%;}
#business .business_img .roll .img{aspect-ratio:3/2;}
#business .business_in .tit_area{width: 100%; padding: 0 0 25px; text-align:center;}

#business .business_wrap{top: auto; bottom: auto; left:auto; right: auto; position: relative; padding: 0 10%; box-sizing:border-box;}
#business .business_roll{margin: -50px 0 0; width: 100%;}
#business .business_roll .roll{border-radius:var(--borderR20);}
#business .business_roll .roll .in{padding:30px;}

#business .swiper-button{width:40px; height:40px; line-height: 40px; margin-top: -20px;}
#business .swiper-button.swiper-button-prev{left: -20px;}
#business .swiper-button.swiper-button-next{right: -20px; left: auto;}
#business .swiper-button:after{font-size:18px;}


#business .business_roll .roll .in:before{background-position: right -30px bottom -30px; background-size: 200px auto;}




/* 커뮤니티 */
#community{}

#community .notice{padding: 0 0 30px;}
#community .notice .tit{margin: 0 0 12px;}
#community .community_tab{margin-left: 20px;}
#community .community_tab ul{}
#community .community_tab ul li{margin: 0 10px 0 0;}

#community .community_box{}
#community .community_box .add_btn{top:-35px;}
#community .community_box dl a{padding: 15px 0;}
#community .community_box dl a:hover{padding: 15px 0;}
#community .community_box dl dt{width: 70px; height: 70px;}
#community .community_box dl dt small{margin: 0 0 3px;}
#community .community_box dl dt p{font-size:1.667rem;}
#community .community_box dl dd{width: calc(100% - 70px); padding: 0 15px;}
#community .community_box dl dd h4{}
#community .community_box dl dd .txt{margin: 6px 0 0;}
#community .community_box ul li a{padding: 15px 0;}
#community .community_box ul li a:hover{padding: 15px 10px;}

#community .sponsor .tit{margin: 0 0 12px;}
#community .sponsor .tit .add_btn{margin-top: -12px;}
#community .sponsor .sponsor_list{padding: 25px 20px 10px;}
#community .sponsor .sponsor_list svg{margin: 0 0 3px;}
#community .sponsor .sponsor_list ul{margin: 0;}
#community .sponsor .sponsor_list ul li{padding:10px 0 10px 70px;}
#community .sponsor .sponsor_list ul li b{top:10px;}
#community .sponsor .sponsor_list ul li b:before{font-size:16px;}
#community .sponsor .sponsor_info{padding: 10px 0;}
#community .sponsor .sponsor_info dt{}
#community .sponsor .sponsor_info dd{}
#community .sponsor .sponsor_info dd .sponsor_btn:before{font-size:16px;}


/* Partner */
#partner {padding: 20px 0;}
#partner .partner_roll_list > li {width: 190px;}



}
/*******************************************************************************
    @media ~480px               
*******************************************************************************/
@media all and (max-width:480px){





}
/*******************************************************************************
    @media ~360px
*******************************************************************************/
@media all and (max-width:360px){




}