#btn-navi button:focus { outline-offset: 7px; outline: 3px solid #1d1d1d; }

/*pc*/
@media {
    #photoInsertPcDiv { display: block;}
    #photoInsertMobileDiv { display: none;}

    #keyboardPcDiv { display: block;}
    #keyboardMobileDiv { display: none;}

    #keyboardPcEng { display: inline-block;}
    #keyboardMobileEng { display: none;}

    #authPcDiv { display: flex;}
    #authMobileDiv { display: none;}

    #chatbotDiv { display: flex;}

    #footSiteWeb { display: block;}
    #footSiteMobile { display: none;}

    #printPcSpan { display: block;}
    #printMobileSpan { display: none;}

    #licencePcSpan { display: block!important;}
    #licenceMobileSpan { display: none!important;}

    .info-box.type-g-agree{
	    background: #F8F8F8;
	    border-color:#D8D8D8;
	    border-radius: 0;
	    padding:2.4rem;
	    line-height: 1.8;
	    font-size:17px;
	    padding-bottom:4.4rem;
    }
}

/*mobile*/
@media (max-width: 768px) {
    #photoInsertPcDiv { display: none; }
    #photoInsertMobileDiv { display: block; text-align:center;}

    #keyboardPcDiv { display: none; }
    #keyboardMobileDiv { display: block;}

    #keyboardPcEng { display: none;}
    #keyboardMobileEng { display: inline-block;}

    #authPcDiv { display: none;}
    #authMobileDiv { display: flex;}

    #chatbotDiv { display: flex;}

    #footSiteWeb { display: none;}
    #footSiteMobile { display: block;}

    #printPcSpan { display: none;}
    #printMobileSpan { display: block;}

    #licencePcSpan { display: none!important;}
    #licenceMobileSpan { display: block!important;}

    .info-box.type-g-agree{
	    background: #F8F8F8;
	    border-color:#D8D8D8;
	    border-radius: 0;
	    padding:2.4rem;
	    line-height: 1.8;
	    font-size:17px;
	    padding-bottom:11.4rem;
    }
}

.ico-file{
    display : inline-flex;
    flex-shrink:0;
    width:2rem;
    height:2rem;
    background:url(../img/ico_file_20.svg) no-repeat;
    content: '';
    float: right;
    margin-left : 5px;
    margin-top : -2px;
}

.ico-link{
    display : inline-flex;
    flex-shrink:0;
    width:2rem;
    height:2rem;
    background:url(../img/ico_go_20.svg) no-repeat;
    content: '';
    float: right;
    margin-left : 5px;
    margin-top : -2px;
}

.ico-flag{
    display : inline-flex;
    flex-shrink:0;
    width:2.4rem;
    height:1.6rem;
    background:url(../img/top_ban_ico_flag.svg) no-repeat;
    content: '';
    float: left;
    margin-right : 6px;
    margin-top : 3px;
}

.nuri-banner{
    background-color:#EEF2F7;
    height:36px;
    padding:7px 0px 7px 0px;
    border-bottom:1px solid #D8D8D8;
}

.nuri-div{
    margin: 0 auto;
    margin-top:0rem;
    max-width: 144rem;
}

.nuri-text{
    padding-left: 15px;
    color: #1d1d1d;
    font-size: 15px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.shot-container {
	display: flex;
	justify-content: flex-start !important;
	align-items: flex-start;
	gap: 2%;
	margin-top: 20px 0 !important;
	flex-wrap: nowrap;
    width: 100%;
    padding: 0 !important;
}

.shot {
	flex: 1;
	text-align: center;
	max-width: 550px;
	margin: 0 !important;
}

.shot_img {
	width: 100%;
	height: 300px;
	overflow: hidden;
	background-color: #f8f8f8;
	display: flex;
	align-items: center;
	justify-content: center;
    border: 1px solid #ddd;
}

.shot_img img {
	width: auto;
    height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border: 1px solid #ddd;
}

.step-text {
	margin-top: 10px;
	font-size: 14px;
	color: #333;
}

.step-img {

	justify-content: center;
	gap: 30px;
	margin: 20px 0;
}

@media screen and (max-width: 768px) {
	.shot-container {
	flex-direction: column !important;
	align-items: center;
	gap: 30px;
    }

	.shot {
		width: 100%;
		max-width: 100%;
		margin: 0 auto !important;
	}

	.shot_img {
	   height: auto !important;
	   aspect-ratio: 4/3;
	   min-height: 250px
	}

	.shot_img img {
	   width: 100%;
	   height: auto;
	   object-fit: contain;
	}
}