<style>
/* hallyu tour */

.course_detail > p{font-size: 20px; padding: 30px;}
.relation_cos .cos_cont{display:none;;position: relative;padding: 0 30px 30px;}
.relation_cos .detail_box{padding: 80px 100px;border:1px solid #e0e0e0;background:#fff;border-radius: 20px; }
.relation_cos .cos_cont.active{display:block;}

.relation_cos .cos_wrap ul li{position:relative;padding: 110px 0 80px; width: 240px;}
.relation_cos .cos_wrap.js_slider3 ul li{width: calc((100% - 40px) / 3);}
.relation_cos .cos_wrap.js_slider4 ul li{width: calc((100% - 60px) / 4);}
.relation_cos .cos_wrap ul li a{display:block;width: 100%; height:180px;position: relative;border-radius: 20px;}
.relation_cos .cos_wrap ul{width:100%;}
.relation_cos .cos_wrap ul li.on1:before{content:'';display:block;width:50% !important;height:2px;background:#ff73d0;position:absolute;left:0;top: 52px;}
.relation_cos .cos_wrap ul li.on:before{content:'';display:block;width:110%;height:2px;background:#ff73d0;position:absolute;left:0;top: 52px;}

.relation_cos ul li em{display:inline-block;position:absolute;left:50%;top:36px; transform: translateX(-50%); font-style: normal; font-weight:700;font-size:18px;line-height:28px;width:33px;height:33px;border:1px solid #ff73d0;border-radius: 100%;background:#fff;color:#ff73d0;}
.relation_cos ul li.on em, .relation_cos ul li.on1 em{border:1px solid #ff73d0;background-color:#ff73d0; color:#fff;}
.relation_cos ul li em span{font-size:0;text-indent: -9999px;}
.relation_cos ul li .img{display: block;position: absolute;left: 0;top: 0;width: 100%;height: 100%;border-radius: 20px; overflow: hidden;}
.relation_cos ul li .img img{object-fit: cover; object-position: center; width: 100%; height: 100%;}
.relation_cos ul li .tit{position:absolute;left:50%;top:50%; transform: translate(-50%, -50%); width:100%;padding:0 20px;color:#fff;font-size:18px;font-weight:700;z-index: 10;}
.relation_cos ul li .tit span{font-size: 18px; letter-spacing:-0.5px;line-height: 1.2;display:block;overflow:hidden;display: -webkit-box;word-break: keep-all;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}

.relation_cos .cos_wrap{position:relative;padding:0 30px; text-align: center;}
.relation_cos .cos_wrap:after{content:'';display:block;height:3px;width:auto;background: url('/public/assets/hallyu/images/line_btn.png') repeat-x;position:absolute;left:30px;right:30px;top:52px;}
.relation_cos .cos_wrap ul li a:after{content:'';display:block;width:100%;height:100%;position:absolute;left:0;top:0;background:rgba(0,0,0,.3);border-radius: 20px;}
.relation_cos .cos_wrap ul li.on1 a:after, .relation_cos .cos_wrap ul li:hover a:after{background:rgba(255,115,208,.8);}
.relation_cos .swiper-container{position: static;}
.relation_cos .coscont_wrap{position: relative;}
.relation_cos .cos_cont .title{overflow:hidden;text-align:center; margin-bottom: 40px;}
.relation_cos .cos_cont .title .spot_name{display: inline-block; margin-bottom: 18px; font-weight:800;font-size:28px;color:#000;letter-spacing: -1px;}
.relation_cos .cos_cont .spot_name a{position: relative; padding-right: 30px; line-height: 1.2; display: -webkit-box;word-break: keep-all;text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.relation_cos .cos_cont .spot_name a::after{content: ''; position: absolute; bottom: 5px; right: 0; display: inline-block; width: 18px; height: 18px; background: url('/public/assets/hallyu/images/link_btn.png') 0 0 / 100% 100% no-repeat;}
.relation_cos .cos_cont .spot_name.nodb a{pointer-events: none;}
.relation_cos .cos_cont .spot_name.nodb a::after{display: none;}
.relation_cos .cos_cont .address{font-size:20px;color:#333; font-weight: 300;}
.relation_cos .cos_cont .btn_copy{display: inline-block; text-indent: -9999px; margin-left: 5px; vertical-align: -2px; width: 18px; height: 18px; background: url('/public/assets/hallyu/images/copy_btn.png') 0 0 / 100% 100% no-repeat;}
.relation_cos .cos_cont .length {position: relative; padding-right: 20px;}
.relation_cos .cos_cont .length p{display: inline; font-size: 20px; display: -webkit-box;word-break: keep-all;text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.relation_cos .cos_cont .length.on p{display: block;}
.relation_cos .cos_cont .length .btn_more{position: absolute; bottom: 0; right: 0; display: inline-block; text-indent: -9999px; width: 18px; height: 18px; background: url('/public/assets/hallyu/images/more_btn.png') 0 0 / 100% auto no-repeat;}
.relation_cos .cos_cont .length.on .btn_more{background-position: 0 -18px;}

.relation_cos .link_article{border: 1px solid #e0e0e0; border-radius: 20px; width: 540px; height: 140px; display: flex; align-items: center; margin: 0 auto 50px;}
.relation_cos .link_article .img{width: 180px; height: 100%; border-radius: 20px; overflow: hidden;}
.relation_cos .link_article .img img{object-fit: cover; object-position: center; width: 100%; height: 100%;}
.relation_cos .link_article .txt{padding: 0 50px 0 20px; flex: 1;}
.relation_cos .link_article p{display: -webkit-box;word-break: keep-all;text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.relation_cos .coscont_wrap .toast_copy{display: none; position: absolute; top: 25%; right: 30px; width: 300px; height: 50px; text-align: center; line-height: 50px; background-color: #333; color: #fff; font-size: 18px; font-weight: 700;}

.column-wrap2 { margin: 0 auto; padding: 0; background: #FFF; text-align: left; /*width:700px */}
.column-wrap2 .mT4 { margin-top: 4px }
.column-wrap2 .txtmT { margin-top: 35px }
.column-wrap2 .cap-imgwrap {text-align: center;}

/*사이즈 줄일 때*/
.column-wrap2 .fixsize { max-width: 567px !important; }
	
/*이미지 사이즈 조정*/
.cap-imgwrap div { width: 100% !important; max-width: 950px !important;display: block; margin-left: auto; margin-right: auto;}
.column-wrap2 img { width: 100% !important; max-width: 950px !important;display: block; margin-left: auto; margin-right: auto;}

/*2개 이미지  분리*/ 
.img-area-col {max-width: 950px; overflow: hidden; display: block; margin-left: auto; margin-right: auto; }
.img-area-col li { float: left; width: 49.75%; margin-left: 0.5%; /*margin-top: 5px;*/ }
.column-wrap2 [class*='img-area-col']  li:first-child {margin-left: 0;}

/*2개 이미지  분리 - 사이즈 다름*/ 
.img-area-col.diff .large{width: 52.05%}
.img-area-col.diff .small{width: 47.45%}

/*2개 이미지  분리 - 사이즈 다름*/ 
.img-area-col.diff2 .large{width: 64.5%}
.img-area-col.diff2 .small{width: 35%}

/*2개 이미지  분리 - 사이즈 다름*/ 
.img-area-col.diff3 .large{width: 35.55%}
.img-area-col.diff3 .small{width: 63.45%}
/*2개 이미지  분리 - 사이즈 다름*/ 
.img-area-col.diff4 .large{width: 54%}
.img-area-col.diff4 .small{width: 45.5%}
	
/*2개 이미지  1caption */ 
.column-wrap2 .img-wrap {position:relative; max-width:950px; display: block; margin-left: auto; margin-right: auto;}
.column-wrap2 .img-wrap .caption{position: absolute; bottom:0; width: 100%;box-sizing:border-box;}
	


@media (max-width: 1200px) {

    .floatmenu{display: none !important;}
    .thingsToDo__section{padding-bottom: 40px;}

    .course_detail > p{font-size: 11px; padding: 20px 0;}
    .relation_cos .detail_box{padding: 40px 10px; border-radius: 15px;}
    .relation_cos .cos_wrap{padding: 0;}
    .relation_cos .cos_wrap:after{height: 1px; top: 30px; left: 0; right: 0;}
    .relation_cos .cos_wrap ul li{padding: 58px 0 40px;}
    .relation_cos .cos_wrap ul li.on:before{height: 1px; top: 30px;}
    .relation_cos .cos_wrap ul li.on1:before{height: 1px; top: 30px;}
    .relation_cos .cos_wrap ul li a{height: 80px;}
    .relation_cos ul li .tit span{font-size: 11px; -webkit-line-clamp: 4;}
    .relation_cos ul li em{width: 20px; height: 20px; line-height: 18px; font-size: 12px; top: 20px;}
    .relation_cos .cos_wrap ul li a:after{border-radius: 10px;}
    .relation_cos ul li .img{border-radius: 10px;}
    
    .relation_cos .cos_cont{padding: 0 0 40px;}
    .relation_cos .cos_cont .title{margin-bottom: 20px;}
    .relation_cos .cos_cont .title .spot_name{font-size: 17px;}
    .relation_cos .cos_cont .spot_name a{padding-right: 18px;}
    .relation_cos .cos_cont .spot_name a::after{width: 11px; height: 11px;}
    .relation_cos .cos_cont .address{font-size: 11px;}
    .relation_cos .cos_cont .btn_copy{width: 11px; height: 11px; vertical-align: -8px;}
    .relation_cos .cos_cont .length{padding-right: 15px;}
    .relation_cos .cos_cont .length p{font-size: 11px; -webkit-line-clamp: 5;}
    .relation_cos .cos_cont .length .btn_more{width: 11px; height: 11px;}
    .relation_cos .cos_cont .length.on .btn_more{background-position: 0 -11px;}

    .relation_cos .coscont_wrap .toast_copy{top: 20%; right: 0; width: 200px; height: 40px; line-height: 40px; font-size: 12px;}
    .relation_cos .link_article{width: 100%; height: 60px; border-radius: 10px; margin: 0 auto 20px;}
    .relation_cos .link_article .img{width: 80px; border-radius: 10px;}
    .relation_cos .link_article .txt{padding: 0 10px;}
    .relation_cos .link_article p{font-size: 10px;}

    .column-wrap2 [class*='img-area-col']  li {float:none; width: 100%; margin-left: 0;margin-top: 5px;}
    .column-wrap2 [class*='img-area-col']  li:first-child {margin-left: 0;margin-top: 0}

    .img-area-col .large{width: 100%  !important}
    .img-area-col .small{width: 100% !important}


}
</style>
