@charset "utf-8";

#main_container *{ box-sizing: border-box;}

.quick{ position: absolute; top: 0; right: 20px; width: 100px; z-index: 99;}
.quick li{ position: relative; height: 100px; outline: solid 10px rgba(255,240,0,0.3); background: #fff000;  border-radius: 50%; box-shadow: 0 0 3px rgba(0,0,0,0.2); margin: 30px 0; text-align: center;}
.quick li a{display: inline-block; width:80%; font-size: 16px; line-height: 1.2em; font-weight: 500; letter-spacing: -0.04em; color: #000; word-break: keep-all;  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.quick li a.popup{padding-top: 30px; background: url("/images/jewelry/main/icon_popup.png") center top no-repeat;}

@media all and (max-width :480px) {
.quick{ right: 20px; width: 70px; }
.quick li{ height: 70px;outline: solid 8px rgba(255,240,0,0.3);margin: 25px 0;}
.quick li a{display: inline-block; width:80%; font-size: 15px; line-height: 1.2em;}
.quick li a.popup{padding-top: 14px;  background-size:20px;}
}

/* mainbox_area01 **************************************************************************************************/
.mainbox_area01{ position:relative; text-align:center;}
.mainbox_area01 .slideWrap{position:relative; width:100%; margin:0px auto;}
.mainbox_area01 .slideWrap .slide{}
.mainbox_area01 .slideWrap .slide .main_img{width:100%; height:600px; background-position: center top; background-repeat: no-repeat; background-size: cover; }
.mainbox_area01 .slideWrap .slide .main_img01{ background-image:url(/images/jewelry/main/main_visual01.jpg);}
.mainbox_area01 .slideWrap .slide .main_img02{ background-image:url(/images/jewelry/main/main_visual01.jpg);}
.mainbox_area01 .slideWrap .slide .main_img03{ background-image:url(/images/jewelry/main/main_visual01.jpg);}

.mainbox_area01 .slideWrap .slide .txt_guide{text-align: right; padding: 350px 20px 0 0;}
.mainbox_area01 .slideWrap .slide .main_txt{position: relative;display: inline-block; padding: 40px; background: rgba(0,0,0,0.8); color: #fff; font-size: 24px;text-align: center;}
.mainbox_area01 .slideWrap .slide .main_txt > strong{display: block;font-size: 40px; font-weight: 700; line-height: 1.5em;}
.mainbox_area01 .slideWrap .slide .main_txt:before{ position: absolute; content: ''; width:50px; height: 50px; background: #c53438; top: -20px; left: -20px; }

.mainbox_area01 .slideWrap .slick-list{ overflow:visible;}
.mainbox_area01 .slideWrap .slide .slick-slide{overflow:hidden; position:relative;}
.mainbox_area01 .slideWrap .slick-navi{ position:absolute; z-index:56; left:50%; bottom:40px; vertical-align:top; text-align:center; transform: translateX(-50%);}
.mainbox_area01 .slideWrap .slick-dots{ display:inline-block; text-align:center; vertical-align:top;}
.mainbox_area01 .slideWrap .slick-dots li{ display:inline-block;margin:0 3px; overflow:hidden; font:0/0 a; vertical-align:top;}
.mainbox_area01 .slideWrap .slick-dots li button[type="button"]{ width:30px; height:30px;  border:none; font:0/0 a; border-radius:15px; }
.mainbox_area01 .slideWrap .slick-dots .slick-active{}
.mainbox_area01 .slideWrap .slick-dots .slick-active button[type="button"]{width:60px; height:30px; background:#c53438;}

.mainbox_area01 .slick-arrow{ position:absolute; z-index:555; top:50%;transform:translateY(-50%); display:block; width:70px; height:70px;background-color:rgba(255,255,255,0.0); background-position:center; background-repeat:no-repeat; font:0/0 a;}
.mainbox_area01 .slick-arrow.slick-prev{ left:10px;background-image:url(/images/jewelry/main/visual_btn_prev.png);}
.mainbox_area01 .slick-arrow.slick-next{ right:10px;background-image:url(/images/jewelry/main/visual_btn_next.png);}
.mainbox_area01 .slideWrap .slick-play{display:inline-block; width:30px; height:30px; margin:0 3px; border:none; background:transparent url('/images/jewelry/main/visual_nav_stop.png') no-repeat; font:0/0 a;  vertical-align:top;}
.mainbox_area01 .slideWrap .slick-play.pause{background:url('/images/jewelry/main/visual_nav_play.png') no-repeat}



@media all and (max-width :1024px) {
.mainbox_area01 .slideWrap .slide .main_img{height:800px;}

.mainbox_area01 .slideWrap .slide .main_txt{font-size: 18px;}
.mainbox_area01 .slideWrap .slide .main_txt > strong{font-size: 32px;}
	
.mainbox_area01 .slideWrap .slide .txt_guide{text-align:center; padding:100px 0 0 00px ;}
.mainbox_area01 .slideWrap .slick-navi{ display:none;}
}

@media all and (max-width :767px) {
.mainbox_area01 .slideWrap .slide .main_txt > strong{font-size: 28px;} 
 
.mainbox_area01 .slick-arrow{ width:50px; height:50px; top:50%;transform:translateY(-50%);}
	.mainbox_area01 .slick-arrow.slick-prev{ left:2%;}
	.mainbox_area01 .slick-arrow.slick-next{right:2%;}
}


@media all and (max-width :480px) {
.mainbox_area01 .slideWrap .slide .main_img{height:600px;}

.mainbox_area01 .slideWrap .slide .txt_guide{padding:50px 0 0 20px ;text-align:left; }
.mainbox_area01 .slideWrap .slide .main_txt{font-size: 14px;padding: 25px;}
.mainbox_area01 .slideWrap .slide .main_txt > strong{font-size: 25px;line-height: 1.4em;}
.mainbox_area01 .slideWrap .slide .main_txt:before{ width:30px; height: 30px; top: -10px; left: -10px; }
}




/* mainbox_area02 **************************************************************************************************/

.mainbox_area02{ background: #523bb6;}

.mainbox_area02 .museum_info{ position: absolute; left: -30px; bottom: 0; display: inline-block; text-align: center; width: 550px; height: 350px; background: url("/images/jewelry/main/info_bg_pc.png") center top no-repeat;}
.mainbox_area02 .museum_info h3{font-size: 28px; color: #523bb6; font-weight: 700; line-height: 90px; margin: 30px 0;}
.mainbox_area02 .museum_info ul{display: inline-block;}
.mainbox_area02 .museum_info ul li{ font-size: 18px; color: #000; line-height: 1.5em; text-align: left; letter-spacing: -0.03em; margin-top: 5px;}
.mainbox_area02 .museum_info ul li:first-of-type{margin-top: 0px;}
.mainbox_area02 .museum_info ul li em{display: inline-block;}
.mainbox_area02 .museum_info ul li > span{ display: inline-block; font-size: 14px; color: #555; width: 85px; vertical-align: top;}

.mainbox_area02 .link{display: flex;  text-align: center; height: 160px; padding: 30px 0;padding-left: 470px;}
.mainbox_area02 .link li{flex: 1; position: relative;}
.mainbox_area02 .link li:before{display: inline-block; content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%);width: 1px; height:80px; background: rgba(255, 255, 255, 0.1); }
.mainbox_area02 .link li a{ display:block; color: #fff; font-size: 20px; padding-top: 70px;}
.mainbox_area02 .link li .icon01{ background: url("/images/jewelry/main/link_icon01.png") center top no-repeat;}
.mainbox_area02 .link li .icon02{ background: url("/images/jewelry/main/link_icon02.png") center top no-repeat;}
.mainbox_area02 .link li .icon03{ background: url("/images/jewelry/main/link_icon03.png") center top no-repeat;}
.mainbox_area02 .link li .icon04{ background: url("/images/jewelry/main/link_icon04.png") center top no-repeat;}


@media all and (max-width :1280px) {

.mainbox_area02 .museum_info{ left: -90px;}
.mainbox_area02 .link{padding-left: 380px;}
.mainbox_area02 .link li a{ font-size: 18px;}
}

@media all and (max-width :1024px) {
	.mainbox_area02 .museum_info{ left: 50%; transform: translateX(-50%);bottom: 160px;}
	.mainbox_area02 .link{padding-left: 00px;}
}

@media all and (max-width :480px) {
	.mainbox_area02 .museum_info{ bottom: 120px; width: 360px; height: 270px; background: url("/images/jewelry/main/info_bg_mo.png") center top no-repeat;}
	.mainbox_area02 .museum_info h3{font-size: 22px;  line-height: 70px; margin: 20px 0 15px 0;letter-spacing: -0.03em;}
	.mainbox_area02 .museum_info ul{padding-left: 24px;}
	.mainbox_area02 .museum_info ul li{ font-size: 15px;  margin-top: 3px;}
	.mainbox_area02 .museum_info ul li > span{ font-size: 13px; width: 75px;}
	
	
	.mainbox_area02 .link{height: 120px; padding: 25px 0;}
	.mainbox_area02 .link li a{ font-size: 16px; padding-top: 53px; line-height: 1.3em;}
	.mainbox_area02 .link li a > span{display: block;}
	.mainbox_area02 .link li .icon01,
	.mainbox_area02 .link li .icon02,
	.mainbox_area02 .link li .icon03,
	.mainbox_area02 .link li .icon04{  background-size: 45px;}

}







/* mainbox_area03 **************************************************************************************************/
.mainbox_area03{ padding: 80px 0;}
/* notice */
.mainbox_area03 > div{ display: flex; justify-content: space-between;}
.mainbox_area03 .notice{width: calc(100% - 500px);} 
.mainbox_area03 .notice h3{ color: #000; font-size: 30px; font-weight: 700; height: 60px;}
.mainbox_area03 .notice h3 > a{ display: inline-block; width: 25px; height: 25px; text-align: center; background: url("/images/jewelry/main/icon_more.gif") center no-repeat; border: 1px solid #ddd; overflow: hidden; text-indent: -500px; margin-left: 10px;}
.mainbox_area03 .notice ul{display: flex;}
.mainbox_area03 .notice ul li{ width: 31%; margin-left: 3.5%;}
.mainbox_area03 .notice ul li:first-of-type{margin-left: 0;}
.mainbox_area03 .notice ul li a{ position: relative; display: block; height:240px; border:1px solid #ddd; padding: 30px 25px 0 25px; }
.mainbox_area03 .notice ul li a:hover{ background: #f6f6f6; box-shadow: 0 0 8px rgba(0,0,0,0.1); text-decoration: none;border:2px solid #523bb6; }
.mainbox_area03 .notice ul li a > strong{display: block; font-size: 20px; overflow: hidden; height: 54px; margin-bottom: 20px;}
.mainbox_area03 .notice ul li a > span{display: block;font-size: 15px;}
.mainbox_area03 .notice ul li a .txt{overflow: hidden;height: 60px; line-height: 1.3em; }
.mainbox_area03 .notice ul li a .date{position: absolute; left:  25px; bottom: 25px; font-size: 15px; color: #666;}



/* popupzone */
.mainbox_area03 .popupzone{position: relative; width: 450px; background: #276ac4;}
.mainbox_area03 .popupzone > div{height: 300px;  overflow: hidden;}
.mainbox_area03 .popupzone > div img{ width: 100%; height: 300px;}
.mainbox_area03 .popupzone ul{display: flex; position: absolute; right: 0; bottom: 0; z-index: 2; }
.mainbox_area03 .popupzone ul li{font-size:16px; margin-left: 2px; width: 55px; height: 55px; line-height: 55px;background:rgba(0,0,0,0.9);color: #fff; text-align: center; vertical-align:bottom;}
.mainbox_area03 .popupzone ul li:first-child{width: 60px;}
.mainbox_area03 .popupzone ul li button{ display: block;color: rgba(0,0,0,0.0); background:none;  background-repeat: no-repeat; background-position: center; width: 55px; height: 55px;text-align: center;}
.mainbox_area03 .popupzone ul li .pz_stop{background-image: url("/images/jewelry/main/popup_btn_stop.png");}
.mainbox_area03 .popupzone ul li .pz_next{background-image: url("/images/jewelry/main/popup_btn_next.png");}
.mainbox_area03 .popupzone ul li .pz_play{background-image: url("/images/jewelry/main/popup_btn_play.png");}
.mainbox_area03 .popupzone ul li .pz_prev{background-image: url("/images/jewelry/main/popup_btn_prev.png");}

@media all and (max-width :1024px) {
.mainbox_area03 .notice{width: calc(100% - 430px);} 
.mainbox_area03 .notice h3{ font-size: 26px; height: 50px;}
.mainbox_area03 .notice ul{flex-direction: column; max-height:250px; overflow: hidden;}	
.mainbox_area03 .notice ul li{ width: 100%;margin-left:0; margin-bottom: 10px; }
.mainbox_area03 .notice ul li a{ height:120px; padding: 20px 20px 0 20px; }
.mainbox_area03 .notice ul li a > strong{font-size: 18px;}
.mainbox_area03 .notice ul li a .txt{display: none;}
.mainbox_area03 .notice ul li a .date{left:  20px; bottom: 20px; font-size: 14px;}
	
.mainbox_area03 .popupzone{width: 400px;}
	
}
@media all and (max-width :767px) {
.mainbox_area03{padding: 50px 0; }
.mainbox_area03 > div{ flex-direction: column;}
.mainbox_area03 .notice{width:100%;} 
.mainbox_area03 .notice h3{ font-size: 26px; height: 50px; text-align: center;}
.mainbox_area03 .notice ul{max-height:inherit;}	
.mainbox_area03 .notice ul li a { height: auto; padding-bottom: 35px;}
.mainbox_area03 .notice ul li a > strong{max-height: 54px; height: auto;}
.mainbox_area03 .popupzone{width: 100%; margin: 20px 0 0 0;height: auto;}

}

@media all and (max-width :480px) {
.mainbox_area03 .popupzone > div{height: 250px;}
.mainbox_area03 .popupzone > div img{ width: 100%; height: 250px;}	
}




/* mainbox_area04 **************************************************************************************************/

.mainbox_area04{ background:#f4f4f4 url("/images/jewelry/main/main_box04_bg_pc.png") center top no-repeat; padding: 80px 0; text-align: center;}
.mainbox_area04 h3{ color: #000; font-size: 40px; font-weight: 700; margin-bottom: 70px;}
.mainbox_area04 h3 > a{ display: inline-block; width: 25px; height: 25px; text-align: center; background: url("/images/jewelry/main/icon_more.gif") center no-repeat; border: 1px solid #ddd; overflow: hidden; text-indent: -500px; margin-left: 10px;}
.mainbox_area04 h3 > p{font-size: 18px; font-weight: 400;color: #666; padding-top: 15px;}
.mainbox_area04 ul{ display: flex;}
.mainbox_area04 ul li{position: relative; width: 23%; margin-left: calc(8% / 3);}
.mainbox_area04 ul li:first-of-type{margin-left: 0;}
.mainbox_area04 ul li a{overflow: hidden;display:block;box-shadow:1px 1px 8px rgba(0,0,0,0.15);}
.mainbox_area04 ul li a:hover img{transform:scale(1.1, 1.1);}
.mainbox_area04 ul li a img{ width: 100%; transition: all 0.4s;}
.mainbox_area04 ul li span{ position: absolute; top: 0; right: 0; width: 80px; height: 40px; line-height: 40px; color: #fff; font-size: 15px; z-index: 111;}
.mainbox_area04 ul li .ca_bg01{background: #df3b42; }
.mainbox_area04 ul li .ca_bg02{background: #000; }



@media all and (max-width :767px) {
.mainbox_area04{padding: 50px 0;background:#f4f4f4 url("/images/jewelry/main/main_box04_bg_mo.png") left top no-repeat; background-size: cover;}
.mainbox_area04 h3{ font-size: 26px;margin-bottom: 40px;}
.mainbox_area04 h3 > p{font-size: 15px; padding-top: 10px;}
.mainbox_area04 ul{ flex-wrap: wrap; }	
.mainbox_area04 ul li{width: 48%; margin-bottom: 20px;}
.mainbox_area04 ul li:nth-child(3){margin-left: 0;}
}





/* 팝업존모아보기 **************************************************************************************************/

#popup_list.overlay {display: none;height: 100%;width: 100%;position: fixed;z-index: 11111;top: 0;left: 0;background-color: rgba(0,0,0, 0.9);}

#popup_list .popupchang_content {position: absolute; overflow: hidden;top: 50%;left: 50%; transform: translate(-50%,-50%);width: 1400px;background: #fff; border-radius: 20px;}

.popupchang_content .tit_guide{background: linear-gradient(135deg, #0b94fd, #23d87c); color: #fff; display: flex; justify-content: space-between;}
.popupchang_content .tit_guide h3{ font-size: 22px; height: 60px; line-height: 60px; padding: 0 30px;}
.popupchang_content .tit_guide button{font-size: 18px; height: 60px; background: none;color: #fff; padding: 0 20px; border-left: 1px solid rgba(255,255,255,0.3);}

.popupchang_content .tit_guide ul{display: flex; justify-content:space-between;}
.popupchang_content .tit_guide .btn{display: inline-block;font-size: 0;height: 60px; line-height: 60px; vertical-align: middle;}
.popupchang_content .tit_guide .btn button{display: inline-block;width: 34px; height: 34px;  overflow: hidden; text-indent: -5000px; border:none; padding: 0; margin: 0 1px !important;border-radius: 5px;  vertical-align: middle;}
.popupchang_content .tit_guide .btn_prev{ background: url("/images/jewelry/main/popup_chang_prev.png") center no-repeat; }
.popupchang_content .tit_guide .btn_next{ background: url("/images/jewelry/main/popup_chang_next.png") center no-repeat; }
.popupchang_content .tit_guide .btn_stop{ background: url("/images/jewelry/main/popup_chang_stop.png") center no-repeat; }
.popupchang_content .tit_guide .btn_play{ background: url("/images/jewelry/main/popup_chang_play.png") center no-repeat; }
.popupchang_content .tit_guide .closebtn {}

.popupchang_content .tit_guide a{color:#fff;}
.popupchang_content .chang_all{ padding:70px 50px; text-align: center; font-size: 0;}
.popupchang_content .chang_all > div {width: 100% !important; height: 400px; overflow: hidden;}
.popupchang_content .chang_all div img{width: auto; max-width: 100%;height: 400px;margin: 0 auto;}
.popupchang_content .chang_all .owl-item{ text-align: center;}
.popupchang_content .chang_all .owl-item > div{width: 95%; margin: 0 auto; text-align: center;}

@media all and (max-width :1420px) {
	#popup_list .popupchang_content{width: 90%;}
	

}

@media all and (max-width :1023px) {
.popupchang_content .tit_guide h3{ font-size: 20px; padding: 0 30px;}
.popupchang_content .tit_guide button{font-size: 16px;  padding: 0 10px;}
	.popupchang_content .chang_all{ padding:50px;}
	.popupchang_content .chang_all div{width: 100%; margin: 0%;}
	.popupchang_content .chang_all .owl-item > div{width: 100%;}
}

@media all and (max-width :767px) {
	.popupchang_content .tit_guide{ flex-direction: column; justify-content: flex-start;padding: 10px 0;}
	.popupchang_content .tit_guide h3{ font-size: 20px; height: 40px; line-height: 40px; margin-bottom: 10px;}
	.popupchang_content .tit_guide .btn{height: 40px; line-height: 40px; }
	.popupchang_content .tit_guide ul{justify-content: center;}
	.popupchang_content .tit_guide button{height: auto; padding: 5px 20px; border-left:none; border: 1px solid #fff; font-size: 15px;border-radius: 20px; margin: 0 2px;}
	.popupchang_content .chang_all > div {height: 350px;}
	.popupchang_content .chang_all div img{height: 350px;}
	
}

@media all and (max-width :480px) {
	.popupchang_content .tit_guide button{padding: 5px 10px;}
	.popupchang_content .chang_all{ padding:30px 20px;}
	.popupchang_content .chang_all > div {height: 200px;}
	.popupchang_content .chang_all div img{height: 200px;}
}