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:#468E40; cursor:pointer; z-index:999;}
div.closedBtn span {display:block; width:70px; height:70px; background:url('../img/cosPop_Closed.png') no-repeat center;}
ol.holeTab {position:absolute; top:30px; left:30px; z-index:888;}
ol.holeTab li {float:left; margin-right:8px; 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;}
ol.holeTab li.active {background:#468E40; border-color:#468E40; color:#fff;}
span.holeMap {position:absolute; top:0; right:0;}

.holeInfo {position:absolute; width: 600px; height: 700px; top:20px; right:0;}
.holeInfo iframe{position:absolute; top:70px; right:0; z-index: 99}
.holeInfo dl.infoInner {position:absolute; top:400px; right:30px; margin-top:30px; width:570px; z-index: 99}
.holeInfo dl.infoInner dt {font-size:20px;}
.holeInfo dl.infoInner dd { margin-top:10px; font-size:16px; line-height:26px; color:#333;}
.holeInfo dl.infoInner dd ol.attack li {position: relative; margin-bottom:5px; padding-left:15px; }
.holeInfo dl.infoInner dd ol.attack li:after {position: absolute; left: 0; top:12px; display: block; content: ''; width: 4px; height: 4px; border-radius: 50%; background: #468E40}

table.cosTbl {position:absolute; left:50px; bottom:30px; width:460px;}
table.cosTbl tr th {padding:10px 0; font-size:24px; color:#666;}
table.cosTbl tr td {padding:10px 0; font-size:14px; color:#858585; text-align:center; background:url('../img/cos_bar.png') no-repeat center top;}

div.holeCnt {position:absolute; top:100px; left:30px; width: 400px; height: 550px; z-index: 10;}
div.cosInfo {width:100%;}
div.cosInfo p.cosTit {display:inline-block; padding:2px 0; font-size:22px; text-align:center; color:#468E40;}
div.cosInfo p.cosTit span {font-size:40px; margin-right:5px;}
div.cosInfo p.par {font-size:24px; color:#000; margin-top: 16px}

div.slideVisual {position:relative; width:630px; height:350px; overflow:hidden; z-index:666; background: #ddd;}
div.slideVisual span{text-align: center;}
.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;}