@charset "utf-8";
/* Common */
.section {padding: 100px 0;}
.sec-tit h2 {font-weight: 500; font-size: 30px; color: #242424; text-align: center; margin-bottom: 60px;}
.sec-tit .tit-caption {font-size: 15px; color: #686868; margin-bottom: 12px; text-align: center;}
.sec-tit.tit-deco {position: relative;font-weight: 600; font-size: 35px; color: #242424; padding-bottom: 30px; width: fit-content; margin:0 auto 60px; display: block;}
.sec-tit.tit-deco:before {position: absolute; content: ''; width: 60px; height: 3px; bottom: 0; left: 50%; transform: translateX(-50%); background: #920883;}
.item-tit {font-weight: 600; font-size: 22px; color: #242424;}
.caption {font-size: 18px; font-weight: 500;}
.list-cnt li {line-height: 1.75em; position: relative; padding-left: 15px;}
.list-cnt li:before {position: absolute; content: ''; width: 5px; height: 5px; border-radius: 100%; background: #ccc; top: 10px; left: 0;}
.table-cnt table {border-collapse: collapse; width: 100%;}
.table-cnt th {color: #fff; background: #686868; font-weight: 600; font-size: 18px; padding: 17px 15px; border-left: 1px solid #ddd;}
.table-cnt th:first-child {border-left: none;}
.table-cnt td {background: #fff; text-align: center; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; height: 60px;}
.table-cnt td:first-child {font-weight: 500; border-left: none; color: #242424;}

/* sub01_01 */
.history .logo {text-align: center;}
.history .doc-cnt {position: relative; overflow: hidden;}
.history .doc-cnt:before {position: absolute; content: ''; height: 100%; width: 1px; background: #ddd; left: 50%; top: 110px; z-index: -3;}
.history .item {width: 50%; margin-right: 0; margin-left: auto; margin-top: 55px; position: relative; padding-left: 40px; position: relative;}
.history .item:before {position: absolute; content: ''; height: 60px; width: 100%; left: 0; top: 0; border-bottom: 1px dashed #ddd; z-index: -1;}
.history .item:after {position: absolute; content: ''; width: 19px; height: 19px; border: 4px solid #920883; border-radius: 100%; top: 60px; left: 0; transform: translate(-50%, -50%); z-index: -1; background: #fff;}
.history .item:nth-child(even):after {left: auto; right: 0; transform: translate(50%, -50%);}
.history .item:nth-child(even) {margin-left: 0; margin-right: auto; text-align: right; padding-left: 0; padding-right: 40px;}
.history .item .year {font-size: 34px; font-weight: 700; color: #920883; line-height: 1em; padding-bottom: 38px;}
.history .item .list-cnt li {margin-top: 12px;}
.history .item:nth-child(even) .list-cnt li {padding-left: 0; padding-right: 15px;}
.history .item:nth-child(even) .list-cnt li:before {left: auto; right: 0;}
.history .item:last-child .list-cnt:before {position: absolute; content: ''; width: 100%; height: calc(100% - 60px); background: #fff; bottom: 0; right: -5px; z-index: -2;}

/* sub01_02 */
.org {text-align: center; padding: 100px 30px;}
.org .img {padding: 0 30px;}

/* sub01_03 */
.intro .doc-cnt {background: url('../images/sub/bg_intro.jpg') no-repeat center center; padding-top: 50px; text-align: center; font-size: 20px; font-weight: 600; line-height: 1.5em;}
.intro .img {border-radius: 60px 0 60px 0; overflow: hidden;}
.intro .txt {margin-bottom: 150px;}
.intro .txt .top {color: #242424; font-size: 28px; font-weight: 600; line-height: 1.429em;}
.intro .txt .mid {font-size: 26px; font-weight: 600; margin-top: 27px; margin-bottom: 34px;}
.intro .view-more .ico {margin-left: 10px;}

/* sub02_01 */
.making .section:nth-child(even), .radio .section:nth-child(even), .internet-radio .section:nth-child(even) {background: #f8f8f8;}
.radio-type .sec-tit h2 {font-weight: 600;}
.cards .item:nth-child(1) {border:1px solid #d44692;}
.cards .item:nth-child(1) .point {color: #d44692 !important; font-weight: 500;}
.cards .item:nth-child(2) {border: 1px solid #920883;}
.cards .item:nth-child(3) {border:1px solid #551167;}
.cards .item:nth-child(3) .point {color: #551167 !important; font-weight: 500;}
.cards .item:nth-child(4) {border:1px solid #350342;}
.cards .item:nth-child(4) .point {color: #350342 !important; font-weight: 500;}
.cards {gap: 40px; margin-bottom: 25px;}
.cards .item {width: calc((100% - 40px) / 2);}
.cards .item-cnt {padding: 40px;}
.cards .item-cnt .info .txt {gap: 10px}
.cards .item-cnt .info .txt .tit {min-width: 61px;}
.list-cnt.star li:before {content: '※'; top: 0; background: none;}

.process .sec-cnt {display: flex; margin: 0 -30px}
.process .item {text-align: center; flex: 1; padding: 0 15px;}
.process .item .icons {position: relative; margin-bottom: 3px;}
.process .item .icons:before {position: absolute; content: ''; width: 23px; height: 40px; top: 50%; right: 0; transform: translate(100%, -50%); background: url('../images/sub/ico_process_next.png') no-repeat center center; background-size: contain;}
.process .item:last-child .icons:before{content: none}
.process .item .icons .ico{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.process .item .tit span {font-size: 14px;}
.process .item .tit h4 {font-size: 18px; font-weight: 600; color:#242424; margin-bottom: 10px;}
.process li {font-size: 15px; line-height: 1.667em;}

.period .img{text-align: center; margin-bottom: 65px;}

/* sub02_02 */
.fm-radio{position: relative;}
.fm-radio:before {position: absolute; content: 'CMSONG Research Institute'; width: 100%; text-align: center; font-weight: 700; font-size: 80px; color: rgba(0,0,0,.07); left: 50%; bottom: 0; transform: translateX(-50%); line-height: .8em; letter-spacing: .075em;}
.fm-radio .sec-cnt {display: flex; align-items: center;}
.fm-radio .img {border-radius: 30px; overflow: hidden; width: 54.16%;}
.fm-radio .txt {flex: 1; padding-left: 60px;}
.fm-radio h3 {font-size: 35px; margin-bottom: 35px;}
.fm-radio p {font-size: 17px; line-height: 1.765em; margin-top: 35px;}

.add-type .items {display: flex; gap: 30px; justify-content: space-between; text-align: center; margin-bottom: 100px;}
.add-type .item .txt {margin-top: 35px;}
.add-type .item .txt .item-tit {margin-bottom: 15px;}
.add-type .table-cnt td {text-align: center; padding: 0 15px; line-height: 1.375em; height: 60px; border-bottom: 1px solid #ddd; border-left: 1px solid #ddd; background: #fff;}
.add-type .table-cnt tr:last-child td a {font-weight: 600; display: block;}
.add-type .table-cnt .sound {cursor: pointer; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 17px; color: #242424; gap: 10px;}
.add-type .table-cnt audio {display: none; margin: 0 auto;}
.add-type .table-cnt audio.active {display: block; max-width: 100%;}

.timeline .sec-cnt {border-radius: 20px; overflow: hidden; border: 1px solid #ddd;;}
.timeline .item-tit {background: #686868; color: #fff; text-align: center; padding: 17px 15px;}
.timeline .item-cnt {text-align: center; padding: 35px 10px;}

.cost .table-cnt td {padding: 10px;}

.internet-radio .target .sec-cnt {display: flex;}
.internet-radio .target .item {width: 50%; text-align: center;}
.internet-radio .target .item .img {display: flex; align-items: center; justify-content: center; height: 400px; padding: 30px; border: 1px solid #ddd; margin-bottom: 30px;}
.internet-radio .target .item:first-child .img {border-radius: 20px 0 0 20px}
.internet-radio .target .item:last-child .img {border-radius: 0 20px 20px 0}

.internet-radio .cost .list-cnt {display: block; width: fit-content; margin: 0 auto; padding-bottom: 22px;}
.internet-radio .cost .list-cnt li {font-size: 20px; padding-left: 60px; line-height: 1.3em; margin: 38px 0;}
.internet-radio .cost .list-cnt li:before {width: 39px; height: 39px; top: -5px; background: url('../images/sub/ico_chk.png') no-repeat center center; background-size: contain;}
.internet-radio .cost .table-cnt tr:last-child td {background: rgba(146,8,131,.05); color: #920883; font-weight: 600; font-size: 18px;}

.internet-radio .user .img {border-radius: 20px; border: 1px solid #ddd; padding: 60px; text-align: center; margin-bottom: 30px;}
.internet-radio .user .caption {text-align: center;}
.internet-radio .user-number .table-cnt tr:nth-child(odd) td, .internet-radio .mbcmini .table-cnt tr:nth-child(even) td {background: #f8f8f8;}
.internet-radio .mbcmini .table-cnt .img {padding: 0 15px;}

.mbcmini .sec-tit {position: relative; padding-bottom: 110px;}
.mbcmini .sec-tit:before {position: absolute; content:''; left: 50%; bottom: 0; background: #920883; opacity: .4; height: 80px; width: 1px;}
.mbcmini .sec-tit h2, .radio_propasal .sec-tit h2 {line-height: 1.333em; margin-bottom: 0;}
.mbcmini .sec-tit h2 .now {color: #df0e0f}
.mbcmini .sec-cnt > .img {text-align: center; margin-bottom: 90px;}

.radio_propasal .sec-tit.line {position: relative; padding-bottom: 110px; margin-bottom: 35px;}
.radio_propasal .sec-tit.line:before {position: absolute; content:''; left: 50%; bottom: 0; background: #ddd; opacity: .4; height: 80px; width: 1px;}
.radio_propasal .items {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 44px; margin-top: 60px;}
.radio_propasal .items .item {width: calc((100% - 88px) / 3); height: 80px; background: #9f9f9f; display: flex; align-items: center; justify-content: space-between; text-align: center; font-size: 22px; font-weight: 600; color :#fff; border-radius: 10px; overflow: hidden;}
.radio_propasal .items .item .ico {background: #686868; display:flex; height: 100%; width: 80px; align-items: center; justify-content: center;}
.radio_propasal .items .item > a {flex: 1;}
.radio_propasal .items .item:hover {background: #920883; transition: .2s;}
.radio_propasal .items .item:hover .ico {background: #5c0452; transition: .2s;}

/* sub03_03 */
.sample .item input {display: none;}
.sample .item label {display: block; height: 100%; display: flex; align-items: center; justify-content: center; width: 100%;}
.sample .menu-cnt{display: flex; justify-content: space-between; background: #f8f8f8; border-radius: 20px; gap: 30px; padding: 60px 45px; margin-bottom: 60px;}
.sample .item {display: flex; gap: 10px;}
.sample .item-cnt {display: flex; gap: 10px;}
.sample .item .item-cnt .option {min-width: 100px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid #ddd; background: #fff;}
.sample .item .item-tit {min-width: 100px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid #3e3e3e; background: #3e3e3e; color: #fff; font-weight: 500; font-size: 18px;	}
.sample .item:last-child .item-cnt {flex-wrap: wrap; width: 540px;}
.sample .item .item-cnt .option:has(input:checked) {border: 1px solid #920883; color: #920883;}
.voice-list table {border-top: 2px solid #242424; width: 100%; border-collapse: collapse;}
.voice-list table th {background: #fafafa; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; font-size: 18px; font-weight: 600; color: #242424; padding: 16px 5px;}
.voice-list table td {border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; text-align: center; padding: 16px 5px;}
.voice-list .sample {display: flex; align-items: center; justify-content: flex-end; gap: 15px; padding: 0 20px;}
.voice-list .sample .txt {width: 56px; text-align: center;}
.voice-list .sample .controls {position: relative;  width: 30px; height: 30px;}
.voice-list .sample .controls > * {position: absolute;}
.voice-list .sample .controls .pause {display: none;}
.voice-list .sample .controls.active .pause {display: block;}
.voice-list .sample .controls.active .play {display: none;}
.voice-list .sample .audio {position: absolute; z-index: -1; opacity: 0;}

/* sub04_03 */
.root_daum_roughmap .wrap_controllers {display: none;}
.root_daum_roughmap, .root_daum_roughmap .wrap_map {width: 100% !important;}
.contact .info {margin-top: 40px;}
.contact .info .tag.point {font-weight: 600;}
.contact .info h3 {font-size: 23px; font-weight: 600; color: #242424; margin: 5px 0;}
.contact .address {padding-bottom: 25px; border-bottom: 1px solid #ddd;}
.contact .item {border-bottom: 1px solid #ddd; padding: 25px 0; padding-left: 30px; display: flex;}
.contact .item img {vertical-align: middle; margin-right: 20px;}
.contact .item .tit {font-weight: 500; font-size: 18px; color: #242424; width: 150px;}