div.courseInfo {float:left; padding:50px 0; width:570px; height:570px; background:url('../img/course/courseBg.png') no-repeat;}
div.courseInfo h2.infoTit {margin-left:50px; margin-bottom:30px; font-size:30px; color:#fff; letter-spacing: 1px}
div.courseInfo h2.infoTit::after {margin-top:15px; display:block; content:''; width:40px; height:1px; background-color:#fff;}
div.courseInfo dl.infoTxt {display:inline-block;}
div.courseInfo dl.infoTxt:first-child {margin-right:15px; padding-left:50px; border-right:1px solid #687d96;}
div.courseInfo dl.infoTxt dt {display:inline-block; font-size:14px; color:#fff;}
div.courseInfo dl.infoTxt dd {display:inline-block; padding:0 15px; font-size:22px; color:#fff;}
div.courseInfo div.mapImg {margin-top:40px;}
div.courseList {float:right; width:630px;}
div.courseList a {position:relative; float:left; display:block; width:210px; height:190px; background-color:#000; overflow:hidden;}
div.courseList a:nth-child(3n) {margin-right:0;}
div.courseList a p.cosTit {position:absolute; top:50%; left:50%; margin-top:-15px; margin-left:-40px; padding:2px 0; width:80px;  font-size:14px; text-align:center; color:#fff; z-index:1;}
div.courseList a p.cosTit span {margin-right:3px; font-size:24px;}
div.courseList a img.cosImg {opacity:0.5; transition:0.3s;}
div.courseList a:hover img.cosImg {opacity:1;}

div.cosPopup {display:none; position:fixed; top:0; height:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:9999;}
div.popInner {position:relative; top:50%; left:50%; margin-top:-320px; margin-left:-600px; width:1200px; height:700px; background:#fff; overflow:hidden;}
div.closedBtn {position:absolute; top:0; right:0; width:70px; height:70px; background:#9d8644; cursor:pointer; z-index:999;}
div.closedBtn span {display:block; width:70px; height:70px; background:url('../img/cosPop_Closed.png') no-repeat center;}

.course_w {position: relative; width: 100%; height: 1300px;   background: #fff;}
.course_w ol.holeTab {position:relative; margin:auto; text-align: center}
.course_w ol.holeTab li {display: inline-block;  width:50px; height:50px; background:#fdfdfd; border:1px solid #ddd; border-radius:50px; text-align:center; line-height:50px; font-size:22px; color:#666666; cursor:pointer; margin: 0 5px}
.course_w ol.holeTab li.active {background:#9d8644; border-color:#9d8644; color:#fff;}
.course_w span.holeMap {position:absolute; top:10px; left:0;}

div.holeCnt {position:absolute; top:100px; left:0; width: 530px; height: 600px; z-index: 10;}
div.holeCnt img{max-width:500px}
div.cosInfo {position:absolute; top:100px; right:0; width:600px;}
div.cosInfo p.cosTit {display:inline-block; padding:2px 0; font-size:25px; font-family: 'Noto Serif', serif; color:#9d8644; margin-bottom: 10px}
div.cosInfo p.cosTit span {font-size:60px; margin-right:8px;}
div.cosInfo p.cosTit .par {font-size:25px; color:#232348; margin-left: 10px}
dl.infoInner {margin:30px 0; width:100%;}
dl.infoInner dt {font-size:20px; margin-top: 30px; font-family: 'Noto Sans Medium'}
dl.infoInner dd { margin-top:10px; font-size:16px; line-height:26px; color:#333;}
dl.infoInner dd ol.attack li {position: relative; margin-bottom:5px; padding-left:15px; }
dl.infoInner dd ol.attack li:after {position: absolute; left: 0; top:12px; display: block; content: ''; width: 4px; height: 4px; border-radius: 50%; background: #9d8644}

div.slideVisual {position:relative; width:600px; height:280px; overflow:hidden; z-index:666; background: #ddd;}
div.slideVisual span{text-align: center;}
div.mpVisual{position:relative; width:600px; height:340px; overflow:hidden; z-index:666; background: #fff; margin-top: 10px}
.slick-arrow {position:absolute; top:50%; margin-top:-25px; z-index:666; width:50px; height:50px; cursor:pointer; color:transparent; border:0; outline:none; background:transparent; z-index:666;}
.slick-prev {left:0; background:url('../img/cos_prev.png') center;}
.slick-next {right:-1px; background:url('../img/cos_next.png') center;}

/* Dots */
.slick-dots {position:absolute; bottom:20px; display:block; width: 100%; text-align:center;}
.slick-dots li {position: relative; display: inline-block; width: 10px; height: 10px; margin: 0 6px; cursor: pointer;}
.slick-dots li button {display:block; width:12px; height:12px; cursor:pointer; color:transparent; border:0; outline:none; background:transparent;}
.slick-dots li button:before {position:absolute; top:0; left:0; content:''; display:block; width:10px; height:10px; border-radius:30px; border:2px solid #fff;}
.slick-dots li button:hover:before, .slick-dots li button:focus:before, .slick-dots li.slick-active button:before {background:#fff;}