/* 여기에 작업 또는 수정할 당신의 css style을 설정하세요. (customizations) */
body.dark-mode{padding-right:0px !important}

.bg-abm-color {background:#47b2e4 !important}


.top-header .title-logo img {width:auto;height:46px}
@media (max-width:991px) {
	.top-header .title-logo img {height:30px}
}

.dark-mode .top-header-nav li > a { color:#eee !important;}
.border-white{border-color:#fff !important;}

.btn-e-xxxl {padding:15px 5px;font-size:1.7rem;line-height:2;margin:0 auto;}
.btn-e.disabled {opacity: unset !important;;}


.panel-white>.panel-heading {background-color:#d1d1d1 !important;border-color:#fff !important;color:#000}
.panel-white>.panel-body {border-color:#fff !important}

.navbar-nav a, .navbar-toggler, .nav-link {
     color: unset !important; 
}


.tab-content {min-height: 40px;}
.tab-content .row { width:100%;}
.tab-content .row:hover {background-color: transparent !important;}
.tab-content mark {font-weight:700}

.tab-content .info-box-icon {
	float: left;
    border-radius: 100%;
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex;
    font-size: 1.575rem;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    width: 40px;
    height: 40px;
	min-width:40px;
}
.tab-content .info-quest{width:70%;margin:auto 10px;}
.tab-content .info-answer{width:25%;min-width:320px;text-align:right;float:right}
.box-radio-input input[type="radio"]{  display:none;}

.box-radio-input input[type="radio"] + span{
  display:inline-block;
  background:none;
  border:1px solid #373636;  
  padding:0px 2px;
  text-align:center;
  height:35px;
  line-height:33px;
  font-weight:500;
  cursor:pointer;
  font-size: small;
}
.box-radio-input.width-20{width:19.2% !important}
.box-radio-input input[type="radio"]:checked + span{
  border:1px solid #1e88e5;
  background:#1e88e5;
  color:#fff;
}

.nav-tabs .nav-link.active {
	background-color: #47b2e4 !important;
    border-color: #30363d !important;
    color: #ffffff !important;
}

.modal-body.training-body {
    padding: 0px !important;
}
@media (max-width:767px) {
	.box-radio-input .width-100{
		width:98% !important;
		font-size: 0.65rem !important;
	}
	.box-radio-input.width-20{width:18.5% !important;margin: 10px 0;}
	.box-radio-input input[type="radio"] + span{
		  height:45px;
		  line-height:43px;
		
	}
	.nav-link{padding:10px 14px}
	.tab-content .p-3{padding:15px 3px 10px !important;}
}

.panel-cyan>.panel-heading {
    background-color: #47b2e4;
    border-color: #00acc1;
    color: #FFF;
}

		.gy-4{max-width: 1316px;margin:auto}

        .phone-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            width: 100%;
           /**/ max-width: 1316px;
			/*margin-top:60px;*/
			padding-bottom:60px;
        }
        .phone {
            width: 300px;
            height: 600px;
            background-color: white;
            border-radius: 40px;
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5); /* 그림자 효과 추가 */
            position: relative;
            padding: 20px;
            margin: 10px;
            transition: transform 0.3s ease;
        }
        /* 가운데 핸드폰을 1.2배로 확대 */
        .phone-large {
            transform: scale(1.2);
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.9); /* 가운데 핸드폰에 더 큰 그림자 */

        }
        .top-bar {
            width: 100%;
            height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .time {
            font-size: 16px;
            color: #555;
        }
        .signal {
            width: 60px;
            height: 20px;
            background-color: #ddd;
            border-radius: 10px;
        }
        .screen {
            width: 100%;
            height: 80%;
            background-color: #fafafa;
            margin-top: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .screen img {
            width: 100%;
            height: auto;
        }
        .screen h3 {
            margin: 20px 0 10px 0;
            font-size: 18px;
            color: #333;
        }
        .screen p {
            font-size: 14px;
            color: #777;
            text-align: center;
        }
        .home-button {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 50px;
            background-color: #ddd;
            border-radius: 50%;
        }

        /* 반응형 디자인을 위한 미디어 쿼리 */
        @media (max-width: 1200px) {
		
			.phone-container {
				margin-top:0px;
			}
            .phone {
                width: 240px;
                height: 480px;
            }
            .phone-large {
                transform: scale(1.1);
            }
            .screen h3 {
                font-size: 16px;
            }
            .screen p {
                font-size: 12px;
            }
        }

.sub-title {position:relative;overflow:hidden}
/* 마스터 타이틀 */
.sub-title .master-title {position: relative;padding: 30px;margin-bottom: 60px;text-align: center;background-color: #fff;border:15px solid var(--accent-color);}
.sub-title .master-title:before,
.sub-title .master-title:after {content:"";display: block;position: absolute;left: 50%;transform:translateX(-50%);width: 90%;height: 15px;background-color: #eee;}
.sub-title .master-title:before {top: -15px;}
.sub-title .master-title:after {bottom: -15px;}
.sub-title .master-title h2 {position: relative;margin-bottom: 30px;font-size:24px;font-weight: 700;}
.sub-title .master-title h2:before {content:"";display: block;position: absolute;bottom: -15px;left: 50%;width: 40px;height: 2px;margin-left: -20px;background-color: #0277bd;}
.sub-title .master-title p {font-size: 17px;}
@media (max-width:991px){
    .sub-title .master-title {padding: 20px;margin-bottom: 30px;border-width:10px;}
    .sub-title .master-title:before,
    .sub-title .master-title:after {height: 10px;}
    .sub-title .master-title:before {top: -10px;}
    .sub-title .master-title:after {bottom: -10px;}
    .sub-title .master-title h2 {font-size: 20px;}
    .sub-title .master-title p {font-size: 14px;}
    .sub-title .master-title p br {display: none;}
}